feat: native update handling for forced updates

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.3.71",
+	"version": "6.3.72",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@9.14.4",

src/app.d.ts

@@ -79,6 +79,8 @@ export interface Native {
   openUIDevtools: () => Promise<void>
   openTorrentDevtools: () => Promise<void>
   checkUpdate: () => Promise<void>
+  updateAndRestart: () => Promise<void>
+  updateReady: () => Promise<void>
   toggleDiscordDetails: (enabled: boolean) => Promise<void>
   setMediaSession: (metadata: SessionMetadata, mediaId: number) => Promise<void>
   setPositionState: (state?: MediaPositionState) => Promise<void>

src/lib/modules/native.ts

@@ -60,6 +60,8 @@ export default Object.assign<Native, Partial<Native>>({
   focus: async () => undefined,
   close: async () => undefined,
   checkUpdate: async () => undefined,
+  updateAndRestart: async () => undefined,
+  updateReady: () => sleep(rnd(10_000)),
   toggleDiscordDetails: async () => undefined,
   setMediaSession: async (metadata) => { navigator.mediaSession.metadata = new MediaMetadata({ title: metadata.title, artist: metadata.description, artwork: [{ src: metadata.image }] }) },
   setPositionState: async e => navigator.mediaSession.setPositionState(e),

src/routes/update/+page.svelte

@@ -1,8 +1,9 @@
 <script lang='ts'>
+  import InstallWaitButton from './InstallWaitButton.svelte'
+
   import { Button } from '$lib/components/ui/button'
   import { Menubar } from '$lib/components/ui/menubar'
   import { Separator } from '$lib/components/ui/separator'
-  import * as Tooltip from '$lib/components/ui/tooltip'
   import native from '$lib/modules/native'
   import { outdatedComponent, uiUpdate } from '$lib/modules/update'
 
@@ -18,18 +19,14 @@
       <div class='text-xl text-wrap max-w-full text-center mb-6'>A mandatory update is available for the {#await outdatedComponent then name}{name}{/await}.<br />Please update to continue.</div>
       {#await outdatedComponent then name}
         {#if name === 'client'}
-          <!-- TODO: remove this github releases open and replace it with native client update call!!! -->
-          <Button class='text-md font-bold' size='lg' on:click={() => native.openURL('https://github.com/ThaUnknown/miru/releases/tag/v6.1.0')}>Install</Button>
+          {#await native.updateReady()}
+            <InstallWaitButton />
+          {:then _}
+            <Button class='text-md font-bold' size='lg' on:click={native.updateAndRestart}>Update</Button>
+          {/await}
         {:else}
           {#await uiUpdate}
-            <Tooltip.Root>
-              <Tooltip.Trigger let:builder>
-                <Button builders={[builder]} class='text-md font-bold !pointer-events-auto cursor-wait' disabled>Install</Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content>
-                <p>Waiting for update to download</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
+            <InstallWaitButton />
           {:then _}
             <Button class='text-md font-bold' size='lg' on:click={() => location.reload()}>Install</Button>
           {/await}

src/routes/update/InstallWaitButton.svelte

@@ -0,0 +1,13 @@
+<script lang='ts'>
+  import { Button } from '$lib/components/ui/button'
+  import * as Tooltip from '$lib/components/ui/tooltip'
+</script>
+
+<Tooltip.Root>
+  <Tooltip.Trigger let:builder>
+    <Button builders={[builder]} class='text-md font-bold !pointer-events-auto cursor-wait' disabled>Install</Button>
+  </Tooltip.Trigger>
+  <Tooltip.Content>
+    <p>Waiting for update to download</p>
+  </Tooltip.Content>
+</Tooltip.Root>