Clean up application init and display backend version

Author: hhvrc

src/hooks.client.ts

@@ -1,19 +1,36 @@
-import { metaApi } from "$lib/api";
+import { metaApi } from '$lib/api';
+import { initializeSignalR } from '$lib/signalr';
+import { initializeDarkModeStore } from '$lib/stores/ColorSchemeStore.svelte';
+import { initializeSerialPortsStore } from '$lib/stores/SerialPortsStore';
+import { UserStore } from '$lib/stores/UserStore';
 
 export async function init() {
-    const response = await metaApi.versionGetBackendVersion();
-    if (!response.data) throw new Error("Failed to fetch backend info");
-    
-    if (response.data.version) {
-        sessionStorage.setItem("backendVersion", response.data.version);
-    }
-    if (response.data.commit) {
-        sessionStorage.setItem("backendCommit", response.data.commit);
-    }
-    if (response.data.shortLinkUrl) {
-        sessionStorage.setItem("shortLinkUrl", response.data.shortLinkUrl);
-    }
-    if (response.data.turnstileSiteKey) {
-        sessionStorage.setItem("turnstileSiteKey", response.data.turnstileSiteKey);
-    }
-}
+  // fire both requests in parallel
+  const [backendInfoRes, userRes] = await Promise.allSettled([
+    metaApi.versionGetBackendVersion(),
+    UserStore.refreshSelf(),
+  ]);
+
+  // handle backend info
+  if (backendInfoRes.status === 'fulfilled' && backendInfoRes.value?.data) {
+    const { version, commit, shortLinkUrl, turnstileSiteKey } = backendInfoRes.value.data;
+
+    if (version != null) sessionStorage.setItem('backendVersion', String(version));
+    if (commit != null) sessionStorage.setItem('backendCommit', String(commit));
+    if (shortLinkUrl != null) sessionStorage.setItem('shortLinkUrl', String(shortLinkUrl));
+    if (turnstileSiteKey != null)
+      sessionStorage.setItem('turnstileSiteKey', String(turnstileSiteKey));
+  } else {
+    throw new Error('Failed to fetch backend info');
+  }
+
+  // init client-side stores
+  initializeDarkModeStore();
+  initializeSerialPortsStore(); // TODO: move this elsewhere if needed
+
+  // start SignalR only if we have a user
+  const isLoggedIn = userRes.status === 'fulfilled' && !!userRes.value;
+  if (isLoggedIn) {
+    await initializeSignalR();
+  }
+}

src/lib/components/Turnstile.svelte

@@ -10,11 +10,15 @@
 
   interface Props {
     action: string;
-    cData: string;
+    cData?: string;
     response: string | null;
   }
 
-  let { action, cData, response = $bindable(dev ? PUBLIC_TURNSTILE_DEV_BYPASS_VALUE : null) }: Props = $props();
+  let {
+    action,
+    cData,
+    response = $bindable(dev ? PUBLIC_TURNSTILE_DEV_BYPASS_VALUE : null),
+  }: Props = $props();
 
   let element: HTMLDivElement;
 

src/lib/init.ts

@@ -1,7 +1,8 @@
 import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
 import { accountV1Api } from '$lib/api';
-import { destroyAuth } from '$lib/init';
+import { destroySignalR } from '$lib/signalr';
+import { UserStore } from '$lib/stores/UserStore';
 
 export const prerender = false;
 
@@ -17,7 +18,8 @@ export async function load() {
 
   try {
     // Clear local context
-    await destroyAuth();
+    UserStore.reset();
+    await destroySignalR();
   } catch (error) {
     console.error(error);
   }

src/routes/(anonymous)/logout/+page.ts

@@ -12,7 +12,6 @@
   import '../app.css';
   import { browser } from '$app/environment';
   import DialogManager from '$lib/components/confirm-dialog/dialog-manager.svelte';
-  import { initializeApp } from '$lib/init';
   import { isMobile } from '$lib/utils/compatibility';
 
   interface Props {
@@ -29,8 +28,6 @@
   $effect(() => {
     if (!isMobile) localStorage.setItem('sidebarOpen', isOpen ? 'true' : 'false');
   });
-
-  onMount(() => initializeApp(!page.url.pathname.startsWith('/logout')));
 </script>
 
 <BasicTags {...meta} />

src/routes/+layout.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
   import { HubConnectionState } from '@microsoft/signalr';
+  import { browser } from '$app/environment';
   import { PUBLIC_GITHUB_PROJECT_URL } from '$env/static/public';
   import { SignalR_State } from '$lib/signalr';
+
+  const version = browser && sessionStorage.getItem('backendVersion');
 </script>
 
 <footer class="bottom-0 flex items-center justify-between px-2 text-sm flex-none">
@@ -11,6 +14,12 @@
     by the <a target="_blank" href={PUBLIC_GITHUB_PROJECT_URL}> OpenShock Team</a>
   </div>
   <div>
+    {#if version}
+      {@const commit = sessionStorage.getItem('backendCommit')}
+      <span title={commit ? `Commit ${commit}` : undefined} class="text-blue-500">
+        API {version}
+      </span>
+    {/if}
     <span
       class={$SignalR_State === HubConnectionState.Connected ? 'text-green-500' : 'text-red-500'}
     >