feat(web): enable websocket (#3765)

* send store event to page

* fix format

* add new asset to existing bucket

* format

* debouncing

* format

* load bucket

* feedback

* feat: listen to deletes and auto-subscribe on all asset grid pages

* feat: auto refresh on person thumbnail

* chore: skip upload event for now

* fix: person thumbnail event

* fix merge

* update handleAssetDeletion with websocket communication

* update info box on mount

* fix test

* fix test

* feat: event for trash asset

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/shared-components/status-box.svelte

@@ -1,52 +1,40 @@
 <script lang="ts">
+  import { browser } from '$app/environment';
+  import { locale } from '$lib/stores/preferences.store';
+  import { websocketStore } from '$lib/stores/websocket';
+  import { ServerInfoResponseDto, api } from '@api';
   import { onDestroy, onMount } from 'svelte';
   import Cloud from 'svelte-material-icons/Cloud.svelte';
   import Dns from 'svelte-material-icons/Dns.svelte';
-  import LoadingSpinner from './loading-spinner.svelte';
-  import { api, ServerInfoResponseDto } from '@api';
   import { asByteUnitString } from '../../utils/byte-units';
-  import { locale } from '$lib/stores/preferences.store';
+  import LoadingSpinner from './loading-spinner.svelte';
+
+  const { serverVersion, connected } = websocketStore;
 
-  let isServerOk = true;
-  let serverVersion = '';
   let serverInfo: ServerInfoResponseDto;
-  let pingServerInterval: NodeJS.Timer;
+
+  $: version = $serverVersion ? `v${$serverVersion.major}.${$serverVersion.minor}.${$serverVersion.patch}` : null;
+  $: usedPercentage = Math.round((serverInfo?.diskUseRaw / serverInfo?.diskSizeRaw) * 100);
 
   onMount(async () => {
-    try {
-      const { data: version } = await api.serverInfoApi.getServerVersion();
-
-      serverVersion = `v${version.major}.${version.minor}.${version.patch}`;
-
-      const { data: serverInfoRes } = await api.serverInfoApi.getServerInfo();
-      serverInfo = serverInfoRes;
-      getStorageUsagePercentage();
-    } catch (e) {
-      console.log('Error [StatusBox] [onMount]');
-      isServerOk = false;
-    }
-
-    pingServerInterval = setInterval(async () => {
-      try {
-        const { data: pingReponse } = await api.serverInfoApi.pingServer();
-
-        if (pingReponse.res === 'pong') isServerOk = true;
-        else isServerOk = false;
-
-        const { data: serverInfoRes } = await api.serverInfoApi.getServerInfo();
-        serverInfo = serverInfoRes;
-      } catch (e) {
-        console.log('Error [StatusBox] [pingServerInterval]', e);
-        isServerOk = false;
-      }
-    }, 10000);
+    await refresh();
   });
 
-  onDestroy(() => clearInterval(pingServerInterval));
-
-  const getStorageUsagePercentage = () => {
-    return Math.round((serverInfo?.diskUseRaw / serverInfo?.diskSizeRaw) * 100);
+  const refresh = async () => {
+    try {
+      const { data } = await api.serverInfoApi.getServerInfo();
+      serverInfo = data;
+    } catch (e) {
+      console.log('Error [StatusBox] [onMount]');
+    }
   };
+
+  let interval: number;
+  if (browser) {
+    interval = window.setInterval(() => refresh(), 10_000);
+  }
+
+  onDestroy(() => clearInterval(interval));
 </script>
 
 <div class="dark:text-immich-dark-fg">
@@ -61,7 +49,7 @@
           <!-- style={`width: ${$downloadAssets[fileName]}%`} -->
           <div
             class="h-[7px] rounded-full bg-immich-primary dark:bg-immich-dark-primary"
-            style="width: {getStorageUsagePercentage()}%"
+            style="width: {usedPercentage}%"
           />
         </div>
         <p class="text-xs">
@@ -88,7 +76,7 @@
       <div class="mt-2 flex justify-between justify-items-center">
         <p>Status</p>
 
-        {#if isServerOk}
+        {#if $connected}
           <p class="font-medium text-immich-primary dark:text-immich-dark-primary">Online</p>
         {:else}
           <p class="font-medium text-red-500">Offline</p>
@@ -97,20 +85,18 @@
 
       <div class="mt-2 flex justify-between justify-items-center">
         <p>Version</p>
-        <a
-          href="https://github.com/immich-app/immich/releases"
-          class="font-medium text-immich-primary dark:text-immich-dark-primary"
-          target="_blank"
-        >
-          {serverVersion}
-        </a>
+        {#if $connected && version}
+          <a
+            href="https://github.com/immich-app/immich/releases"
+            class="font-medium text-immich-primary dark:text-immich-dark-primary"
+            target="_blank"
+          >
+            {version}
+          </a>
+        {:else}
+          <p class="font-medium text-red-500">Unknown</p>
+        {/if}
       </div>
     </div>
   </div>
-  <!-- <div>
-		<hr class="ml-5 my-4" />
-	</div>
-	<button class="text-xs ml-5 underline hover:cursor-pointer text-immich-primary" on:click={() => goto('/changelog')}
-		>Changelog</button
-	> -->
 </div>

web/src/lib/components/shared-components/upload-panel.svelte

@@ -36,15 +36,12 @@
     in:fade={{ duration: 250 }}
     out:fade={{ duration: 250 }}
     on:outroend={() => {
-      const errorInfo =
-        $errorCounter > 0
-          ? `Upload completed with ${$errorCounter} error${$errorCounter > 1 ? 's' : ''}`
-          : 'Upload success';
-      const type = $errorCounter > 0 ? NotificationType.Warning : NotificationType.Info;
-
       notificationController.show({
-        message: `${errorInfo}, refresh the page to see new upload assets`,
-        type,
+        message:
+          ($errorCounter > 0
+            ? `Upload completed with ${$errorCounter} error${$errorCounter > 1 ? 's' : ''}`
+            : 'Upload success') + ', refresh the page to see new upload assets.',
+        type: $errorCounter > 0 ? NotificationType.Warning : NotificationType.Info,
       });
 
       if ($duplicateCounter > 0) {