chore: add update dialog

src/routes/+layout.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">
   import '../app.css';
+  import Logo from '$assets/logo.png';
+
   import Titlebar from '@/components/ui/titlebar/titlebar.svelte';
-  import { currentLoadingInfo, firstStartup, setupValues } from '@/global';
+  import {
+    currentLoadingInfo,
+    firstStartup,
+    launcherVersion,
+    newVersion,
+    setupValues,
+  } from '@/global';
   import { onMount } from 'svelte';
   import OsuCursor from '@/components/ui/osu-cursor/OsuCursor.svelte';
   import {
@@ -15,9 +23,14 @@
   import { Buffer } from 'buffer';
   import { Toaster } from '@/components/ui/sonner';
   import { userAuth } from '@/userAuthentication';
+  import * as AlertDialog from '@/components/ui/alert-dialog';
+  import { exit, getLauncherVersion } from '@/osuUtil';
 
   import '@fontsource/sora';
   import '@fontsource/space-mono';
+  import { ArrowRight } from 'lucide-svelte';
+  import Button from '@/components/ui/button/button.svelte';
+  import { openURL } from '@/utils';
 
   let { children } = $props();
 
@@ -71,8 +84,10 @@
 
   onMount(async () => {
     window.Buffer = Buffer;
+
     disableReload();
     setupValues();
+    launcherVersion.set(await getLauncherVersion());
     const isFirstStartup = await $userSettings.init();
     $userAuth.init();
 
@@ -105,6 +120,43 @@
 <Toaster richColors closeButton />
 
 <Titlebar />
+
+<AlertDialog.Root open={$newVersion !== undefined}>
+  <AlertDialog.Content class="bg-theme-950 border-theme-800 p-0">
+    <div
+      class="flex flex-col items-center justify-center border-b border-theme-800 bg-black/40 rounded-t-lg p-3"
+    >
+      <img class="h-20 w-20" src={Logo} alt="logo" />
+      <span class="font-semibold text-xl">Update available!</span>
+    </div>
+    <div
+      class="grid grid-cols-3 items-center bg-theme-900 border border-theme-800 rounded-lg mx-3 p-3"
+    >
+      <div class="flex flex-col items-center justify-center">
+        <span class="text-sm text-muted-foreground">Current Version</span>
+        <span>{$launcherVersion}</span>
+      </div>
+      <div class="flex items-center justify-center">
+        <ArrowRight />
+      </div>
+      <div class="flex flex-col items-center justify-center">
+        <span class="text-sm text-muted-foreground">New Version</span>
+        <span class="text-green-400">{$newVersion?.tag_name}</span>
+      </div>
+    </div>
+    <div class="flex items-center justify-center mb-3">
+      <Button
+        onclick={async () => {
+          if ($newVersion) {
+            await openURL($newVersion.html_url);
+            await exit();
+          }
+        }}>Update now</Button
+      >
+    </div>
+  </AlertDialog.Content>
+</AlertDialog.Root>
+
 <main>
   {@render children()}
 </main>