enhance(dialog): use MaterialAlertDialogBuilder (#3491)

* Fix example insets

* Add app-region: drag

* Use `Theme.Material3.DayNight.NoActionBar`

* Re-generate some kotlin files

* Use MaterialAlertDialogBuilder

* Add change file

* Revert back to margin-top: 0.5rem

* Re-generate outdated gradle wrapper from #3039

* Move title bar to its own file

* Fix cancel message

Author: Legend-Master

.changes/material-dialog.md

@@ -0,0 +1,6 @@
+---
+dialog: patch
+dialog-js: patch
+---
+
+Use `com.google.android.material.dialog.MaterialAlertDialogBuilder` instead of `AlertDialog` so the dialog follows the app's theme

examples/api/src-tauri/capabilities/base.json

@@ -17,8 +17,7 @@
     "core:default",
     "fs:default",
     "core:window:allow-minimize",
-    "core:window:allow-maximize",
-    "core:window:allow-unmaximize",
+    "core:window:allow-toggle-maximize",
     "core:window:allow-close",
     "core:window:allow-start-dragging",
     "notification:default",

examples/api/src-tauri/gen/android/app/src/main/java/com/tauri/api/MainActivity.kt

@@ -1,3 +1,11 @@
 package com.tauri.api
 
-class MainActivity : TauriActivity()
+import android.os.Bundle
+import androidx.activity.enableEdgeToEdge
+
+class MainActivity : TauriActivity() {
+  override fun onCreate(savedInstanceState: Bundle?) {
+    enableEdgeToEdge()
+    super.onCreate(savedInstanceState)
+  }
+}

examples/api/src-tauri/gen/android/app/src/main/res/values-night/themes.xml

@@ -1,6 +1,6 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
     <!-- Base application theme. -->
-    <style name="Theme.api" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+    <style name="Theme.api" parent="Theme.Material3.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
     </style>
 </resources>

examples/api/src-tauri/gen/android/app/src/main/res/values/themes.xml

@@ -1,6 +1,6 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
     <!-- Base application theme. -->
-    <style name="Theme.api" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+    <style name="Theme.api" parent="Theme.Material3.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
     </style>
 </resources>

examples/api/src-tauri/gen/android/buildSrc/src/main/java/com/tauri/api/kotlin/BuildTask.kt

@@ -21,7 +21,23 @@ open class BuildTask : DefaultTask() {
             runTauriCli(executable)
         } catch (e: Exception) {
             if (Os.isFamily(Os.FAMILY_WINDOWS)) {
-                runTauriCli("$executable.cmd")
+                // Try different Windows-specific extensions
+                val fallbacks = listOf(
+                    "$executable.exe",
+                    "$executable.cmd",
+                    "$executable.bat",
+                )
+                
+                var lastException: Exception = e
+                for (fallback in fallbacks) {
+                    try {
+                        runTauriCli(fallback)
+                        return
+                    } catch (fallbackException: Exception) {
+                        lastException = fallbackException
+                    }
+                }
+                throw lastException
             } else {
                 throw e;
             }

examples/api/src-tauri/gen/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 #Tue May 10 19:22:52 CST 2022
 distributionBase=GRADLE_USER_HOME
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.9-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-bin.zip
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME

examples/api/src/App.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { onMount, tick } from 'svelte'
   import { writable } from 'svelte/store'
   import { getCurrentWindow } from '@tauri-apps/api/window'
   import { getCurrentWebview } from '@tauri-apps/api/webview'
@@ -23,11 +24,10 @@
   import Biometric from './views/Biometric.svelte'
   import Geolocation from './views/Geolocation.svelte'
   import Haptics from './views/Haptics.svelte'
-
-  import { onMount, tick } from 'svelte'
-  import { ask } from '@tauri-apps/plugin-dialog'
   import Nfc from './views/Nfc.svelte'
 
+  import TitleBar from './lib/TitleBar.svelte'
+
   const appWindow = getCurrentWindow()
 
   if (appWindow.label !== 'main') {
@@ -155,44 +155,9 @@
     selected = view
   }
 
-  // Window controls
-  let isWindowMaximized
-  onMount(async () => {
-    isWindowMaximized = await appWindow.isMaximized()
-    appWindow.onResized(async () => {
-      isWindowMaximized = await appWindow.isMaximized()
-    })
-  })
-
-  function minimize() {
-    appWindow.minimize()
-  }
-
-  async function toggleMaximize() {
-    ;(await appWindow.isMaximized())
-      ? appWindow.unmaximize()
-      : appWindow.maximize()
-  }
-
-  let confirmed_close = false
-  async function close() {
-    if (!confirmed_close) {
-      confirmed_close = await ask(
-        'Are you sure that you want to close this window?',
-        {
-          title: 'Tauri API'
-        }
-      )
-      if (confirmed_close) {
-        appWindow.close()
-      }
-    }
-  }
-
   // dark/light
-  let isDark
+  let isDark = localStorage.getItem('theme') == 'dark'
   onMount(() => {
-    isDark = localStorage && localStorage.getItem('theme') == 'dark'
     applyTheme(isDark)
   })
   function applyTheme(isDark) {
@@ -213,9 +178,9 @@
       ...r,
       {
         html:
-          `<pre><strong class="text-accent dark:text-darkAccent">[${new Date().toLocaleTimeString()}]:</strong> ` +
-          (typeof value === 'string' ? value : JSON.stringify(value, null, 1)) +
-          '</pre>'
+          `<pre><strong class="text-accent dark:text-darkAccent">[${new Date().toLocaleTimeString()}]:</strong> `
+          + (typeof value === 'string' ? value : JSON.stringify(value, null, 1))
+          + '</pre>'
       }
     ])
     await tick()
@@ -229,9 +194,9 @@
       ...r,
       {
         html:
-          `<pre><strong class="text-accent dark:text-darkAccent">[${new Date().toLocaleTimeString()}]:</strong> ` +
-          html +
-          '</pre>'
+          `<pre><strong class="text-accent dark:text-darkAccent">[${new Date().toLocaleTimeString()}]:</strong> `
+          + html
+          + '</pre>'
       }
     ])
     await tick()
@@ -265,10 +230,7 @@
     document.addEventListener('mousemove', moveHandler)
   }
 
-  let isWindows
-  onMount(async () => {
-    isWindows = (await os.platform()) === 'windows'
-  })
+  let isWindows = os.platform() === 'windows'
 
   // mobile
   let isSideBarOpen = false
@@ -340,65 +302,13 @@
 
 <!-- custom titlebar for Windows -->
 {#if isWindows}
-  <div
-    class="w-screen select-none h-8 pl-2 flex justify-between items-center absolute text-primaryText dark:text-darkPrimaryText"
-    data-tauri-drag-region
-  >
-    <span class="lt-sm:pl-10 text-darkPrimaryText">Tauri API Validation</span>
-    <span
-      class="
-      h-100%
-      children:h-100% children:w-12 children:inline-flex
-      children:items-center children:justify-center"
-    >
-      <button
-        aria-label="Toggle dark mode"
-        title={isDark ? 'Switch to Light mode' : 'Switch to Dark mode'}
-        class="bg-inherit border-none hover:bg-hoverOverlay active:bg-hoverOverlayDarker dark:hover:bg-darkHoverOverlay dark:active:bg-darkHoverOverlayDarker"
-        on:click={toggleDark}
-      >
-        {#if isDark}
-          <div class="i-ph-sun"></div>
-        {:else}
-          <div class="i-ph-moon"></div>
-        {/if}
-      </button>
-      <button
-        aria-label="Minimize window"
-        title="Minimize"
-        class="bg-inherit border-none hover:bg-hoverOverlay active:bg-hoverOverlayDarker dark:hover:bg-darkHoverOverlay dark:active:bg-darkHoverOverlayDarker"
-        on:click={minimize}
-      >
-        <div class="i-codicon-chrome-minimize"></div>
-      </button>
-      <button
-        aria-label="Maximize window"
-        title={isWindowMaximized ? 'Restore' : 'Maximize'}
-        class="bg-inherit border-none hover:bg-hoverOverlay active:bg-hoverOverlayDarker dark:hover:bg-darkHoverOverlay dark:active:bg-darkHoverOverlayDarker"
-        on:click={toggleMaximize}
-      >
-        {#if isWindowMaximized}
-          <div class="i-codicon-chrome-restore"></div>
-        {:else}
-          <div class="i-codicon-chrome-maximize"></div>
-        {/if}
-      </button>
-      <button
-        aria-label="Close window"
-        title="Close"
-        class="bg-inherit border-none hover:bg-red-700 dark:hover:bg-red-700 hover:text-darkPrimaryText active:bg-red-700/90 dark:active:bg-red-700/90 active:text-darkPrimaryText"
-        on:click={close}
-      >
-        <div class="i-codicon-chrome-close"></div>
-      </button>
-    </span>
-  </div>
+  <TitleBar {appWindow} {isDark} {toggleDark} />
 {/if}
 
 <!-- Sidebar toggle, only visible on small screens -->
 <div
   id="sidebarToggle"
-  class="z-2000 sidebar-toggle hidden lt-sm:flex justify-center absolute items-center w-8 h-8 rd-8
+  class="z-2000 hidden lt-sm:flex justify-center absolute items-center w-8 h-8 rd-8
             bg-accent dark:bg-darkAccent active:bg-accentDark dark:active:bg-darkAccentDark"
 >
   {#if isSideBarOpen}
@@ -409,7 +319,7 @@
 </div>
 
 <div
-  class="flex h-screen w-screen overflow-hidden children-pt8 children-pb-2 text-primaryText dark:text-darkPrimaryText"
+  class="flex h-screen w-screen overflow-hidden text-primaryText dark:text-darkPrimaryText"
 >
   <aside
     id="sidebar"
@@ -512,7 +422,7 @@
         <p class="font-semibold">Console</p>
         <button
           aria-label="Clear Console"
-          class="cursor-pointer h-85% rd-1 p-1 flex justify-center items-center border-none bg-inherit
+          class="cursor-pointer h-85% rd-1 p-1 flex justify-center items-center border-none
                 hover:bg-hoverOverlay dark:hover:bg-darkHoverOverlay
                 active:bg-hoverOverlay/25 dark:active:bg-darkHoverOverlay/25
           "

examples/api/src/app.css

@@ -8,6 +8,11 @@
   font-family: 'Rubik', sans-serif;
 }
 
+button {
+  color: inherit;
+  background-color: inherit;
+}
+
 ::-webkit-scrollbar {
   width: 0.25rem;
   height: 3px;
@@ -33,27 +38,34 @@ code.code-block {
   width: 18.75rem;
 }
 
-@media screen and (max-width: 640px) {
+@media screen and (width < 640px) {
   #sidebar {
     --translate-x: -18.75rem;
     transform: translateX(var(--translate-x));
   }
 }
 
-.sidebar-toggle {
-  margin-top: 0.5rem;
-  margin-left: 0.5rem;
+#sidebar,
+main {
+  padding-top: calc(env(safe-area-inset-top) + 2rem);
+}
+
+#sidebar {
+  padding-left: calc(env(safe-area-inset-left) + 0.5rem);
+}
+
+main {
+  padding-right: env(safe-area-inset-right);
 }
 
-body {
-  overflow: hidden;
-  padding: env(safe-area-inset-top) env(safe-area-inset-right)
-    env(safe-area-inset-bottom) env(safe-area-inset-left);
+#sidebarToggle {
+  margin-top: calc(env(safe-area-inset-top) + 0.5rem);
+  margin-left: calc(env(safe-area-inset-left) + 0.5rem);
 }
 
 #sidebar,
 #console {
-  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem);
 }
 
 .transparent {