chore: add update dialog

src/lib/api/git.ts

@@ -0,0 +1,33 @@
+import type { Release } from '@/types';
+import { betterFetch } from '@better-fetch/fetch';
+import semver from 'semver';
+
+const ENDPOINT = 'https://git.ez-pp.farm/';
+
+const timeout = 5000; // 5 seconds;
+
+export const git = {
+  hasUpdate: async (version: string): Promise<Release | undefined> => {
+    try {
+      const request = await betterFetch<Release[]>(
+        `${ENDPOINT}api/v1/repos/EZPPFarm/EZPPLauncher/releases?limit=1`,
+        {
+          timeout,
+          headers: {
+            'User-Agent': 'EZPPLauncher',
+          },
+        }
+      );
+      if (request.error) return undefined;
+
+      const latestRelease = request.data[0];
+      if (!latestRelease) return undefined;
+
+      const hasUpdate = semver.lt(version, latestRelease.tag_name);
+
+      return hasUpdate ? latestRelease : undefined;
+    } catch {
+      return undefined;
+    }
+  },
+};

src/lib/components/ui/titlebar/titlebar.svelte

@@ -6,6 +6,8 @@
 
   import { getCurrentWindow } from '@tauri-apps/api/window';
   import { onMount } from 'svelte';
+  import { launcherVersion } from '@/global';
+  import Badge from '../badge/badge.svelte';
 
   onMount(() => {
     const appWindow = getCurrentWindow();
@@ -18,9 +20,10 @@
 </script>
 
 <div data-tauri-drag-region class="titlebar z-[60] border-b border-theme-800/90">
-  <div class="mr-auto ms-2 flex flex-row gap-2 items-center text-[1.05rem] font-semibold">
+  <div class="mr-auto ms-2 flex flex-row gap-2 items-center text-[1.05rem] font-semibold pointer-events-none">
     <img src={Logo} alt="EZPP Launcher Logo" class="h-11 w-11 inline-block" />
     <span>EZPPLauncher</span>
+    <Badge class="!text-[0.6rem] py-[0.5px] bg-primary-500 hover:bg-primary-500">{$launcherVersion}</Badge>
   </div>
   <div class="titlebar-button rounded-lg transition-colors duration-75" id="titlebar-minimize">
     <Minimize size={18} />

src/lib/global.ts

@@ -2,9 +2,13 @@ import { writable } from 'svelte/store';
 import { ezppfarm } from './api/ezpp';
 import type { Component } from 'svelte';
 import Loading from '../pages/Loading.svelte';
+import type { Release } from './types';
 
 export const currentView = writable<Component>(Loading);
 
+export const launcherVersion = writable<string>('');
+export const newVersion = writable<Release | undefined>(undefined);
+
 export const currentLoadingInfo = writable<string>('Initializing...');
 
 export const firstStartup = writable<boolean>(false);

src/lib/osuUtil.ts

@@ -110,3 +110,6 @@ export const isOsuRunning = async () => {
   const result = await invoke('is_osu_running');
   return typeof result === 'boolean' ? result : false;
 };
+
+export const getLauncherVersion = async () => await invoke<string>('get_launcher_version');
+export const exit = async () => await invoke('exit');

src/lib/types.ts

@@ -134,3 +134,54 @@ export type UpdateStatus = {
   size: number;
   progress: number;
 };
+
+export type Release = {
+  id: number;
+  tag_name: string;
+  target_commitish: string;
+  name: string;
+  body: string;
+  url: string;
+  html_url: string;
+  tarball_url: string;
+  zipball_url: string;
+  upload_url: string;
+  draft: boolean;
+  prerelease: boolean;
+  created_at: Date;
+  published_at: Date;
+  author: {
+    id: number;
+    login: string;
+    login_name: string;
+    source_id: number;
+    full_name: string;
+    email: string;
+    avatar_url: string;
+    html_url: string;
+    language: string;
+    is_admin: boolean;
+    last_login: Date;
+    created: Date;
+    restricted: boolean;
+    active: boolean;
+    prohibit_login: boolean;
+    location: string;
+    website: string;
+    description: string;
+    visibility: string;
+    followers_count: number;
+    following_count: number;
+    starred_repos_count: number;
+    username: string;
+  };
+  assets: {
+    id: number;
+    name: string;
+    size: number;
+    download_count: number;
+    created_at: Date;
+    uuid: string;
+    browser_download_url: string;
+  }[];
+};

src/pages/Loading.svelte

@@ -7,6 +7,8 @@
     currentSkin,
     currentView,
     firstStartup,
+    launcherVersion,
+    newVersion,
     osuBuild,
     osuStream,
     skins,
@@ -34,6 +36,7 @@
     getVersion,
     isValidOsuFolder,
   } from '@/osuUtil';
+  import { git } from '@/api/git';
 
   let ezppLogo: HTMLImageElement;
   let spinnerCircle: SVGCircleElement;
@@ -139,6 +142,12 @@
       }
     }
 
+    currentLoadingInfo.set('Checking for EZPPLauncher updates...');
+    const launcherUpdate = await git.hasUpdate($launcherVersion);
+    if (launcherUpdate) {
+      newVersion.set(launcherUpdate);
+    }
+
     animate(ezppLogo, {
       opacity: [1, 0],
       scale: [1, 1.05],

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>