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

.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);
 }
 
-body {
-  overflow: hidden;
-  padding: env(safe-area-inset-top) env(safe-area-inset-right)
-    env(safe-area-inset-bottom) env(safe-area-inset-left);
+#sidebar {
+  padding-left: calc(env(safe-area-inset-left) + 0.5rem);
+}
+
+main {
+  padding-right: env(safe-area-inset-right);
+}
+
+#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 {

examples/api/src/lib/TitleBar.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import type { Window } from '@tauri-apps/api/window'
+  import { ask } from '@tauri-apps/plugin-dialog'
+  import { onMount } from 'svelte'
+
+  let {
+    appWindow,
+    toggleDark,
+    isDark
+  }: { appWindow: Window; toggleDark: () => void; isDark: boolean } = $props()
+
+  // Window controls
+  let isWindowMaximized = $state(false)
+  onMount(async () => {
+    isWindowMaximized = await appWindow.isMaximized()
+    appWindow.onResized(async () => {
+      isWindowMaximized = await appWindow.isMaximized()
+    })
+  })
+
+  async function minimize() {
+    await appWindow.minimize()
+  }
+
+  async function toggleMaximize() {
+    await appWindow.toggleMaximize()
+  }
+
+  let confirmedClose = false
+  async function close() {
+    if (!confirmedClose) {
+      confirmedClose = await ask(
+        'Are you sure that you want to close this window?',
+        {
+          title: 'Tauri API'
+        }
+      )
+      if (confirmedClose) {
+        appWindow.close()
+      }
+    }
+  }
+</script>
+
+<div
+  class="w-screen select-none h-8 flex justify-between items-center absolute text-primaryText dark:text-darkPrimaryText"
+  data-tauri-drag-region
+>
+  <span
+    class="h-100% pl-2 flex-1 flex items-center lt-sm:pl-10 lt-lg:text-darkPrimaryText [app-region:drag]"
+    >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="border-none hover:bg-hoverOverlay active:bg-hoverOverlayDarker dark:hover:bg-darkHoverOverlay dark:active:bg-darkHoverOverlayDarker"
+      onclick={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="border-none hover:bg-hoverOverlay active:bg-hoverOverlayDarker dark:hover:bg-darkHoverOverlay dark:active:bg-darkHoverOverlayDarker"
+      onclick={minimize}
+    >
+      <div class="i-codicon-chrome-minimize"></div>
+    </button>
+    <button
+      aria-label="Maximize window"
+      title={isWindowMaximized ? 'Restore' : 'Maximize'}
+      class="border-none hover:bg-hoverOverlay active:bg-hoverOverlayDarker dark:hover:bg-darkHoverOverlay dark:active:bg-darkHoverOverlayDarker"
+      onclick={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="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"
+      onclick={close}
+    >
+      <div class="i-codicon-chrome-close"></div>
+    </button>
+  </span>
+</div>

examples/api/src/views/Dialog.svelte

@@ -55,7 +55,7 @@
 
   async function openDialog() {
     try {
-      var result = await open({
+      const result = await open({
         title: "My wonderful open dialog",
         defaultPath,
         filters: filter
@@ -74,9 +74,11 @@
 
       if (Array.isArray(result)) {
         onMessage(result);
+      } else if (result === null) {
+        onMessage('user cancelled the selection')
       } else {
-        var pathToRead = result;
-        var isFile = pathToRead.match(/\S+\.\S+$/g);
+        const pathToRead = result;
+        const isFile = pathToRead.match(/\S+\.\S+$/g);
 
         await readFile(pathToRead)
           .then(function (res) {
@@ -89,7 +91,7 @@
                 arrayBufferToBase64(
                   new Uint8Array(res),
                   function (base64) {
-                    var src = "data:image/png;base64," + base64;
+                    const src = "data:image/png;base64," + base64;
                     insecureRenderHtml('<img src="' + src + '"></img>');
                   }
                 );

plugins/deep-link/examples/app/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.deep_link_example" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+    <style name="Theme.deep_link_example" parent="Theme.Material3.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
     </style>
 </resources>

plugins/deep-link/examples/app/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.deep_link_example" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+    <style name="Theme.deep_link_example" parent="Theme.Material3.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
     </style>
 </resources>

plugins/dialog/android/build.gradle.kts

@@ -35,8 +35,8 @@ android {
 dependencies {
 
     implementation("androidx.core:core-ktx:1.9.0")
-    implementation("androidx.appcompat:appcompat:1.6.0")
-    implementation("com.google.android.material:material:1.7.0")
+    implementation("androidx.appcompat:appcompat:1.7.1")
+    implementation("com.google.android.material:material:1.13.0")
     testImplementation("junit:junit:4.13.2")
     androidTestImplementation("androidx.test.ext:junit:1.1.5")
     androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")

plugins/dialog/android/src/main/java/DialogPlugin.kt

@@ -5,7 +5,6 @@
 package app.tauri.dialog
 
 import android.app.Activity
-import android.app.AlertDialog
 import android.content.Intent
 import android.net.Uri
 import android.os.Handler
@@ -21,6 +20,7 @@ import app.tauri.plugin.Invoke
 import app.tauri.plugin.JSArray
 import app.tauri.plugin.JSObject
 import app.tauri.plugin.Plugin
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
 
 @InvokeArg
 class Filter {
@@ -158,7 +158,7 @@ class DialogPlugin(private val activity: Activity): Plugin(activity) {
 
     Handler(Looper.getMainLooper())
       .post {
-        val builder = AlertDialog.Builder(activity)
+        val builder = MaterialAlertDialogBuilder(activity)
 
         if (args.title != null) {
           builder.setTitle(args.title)
@@ -191,8 +191,7 @@ class DialogPlugin(private val activity: Activity): Plugin(activity) {
           }
         }
 
-        val dialog = builder.create()
-        dialog.show()
+        builder.show()
       }
   }