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

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
           "