feat(web): license UI (#11182)

web/src/lib/components/shared-components/full-screen-modal.svelte

@@ -39,7 +39,7 @@
     } else if (width === 'narrow') {
       modalWidth = 'w-[28rem]';
     } else {
-      modalWidth = 'sm:max-w-lg';
+      modalWidth = 'sm:max-w-4xl';
     }
   }
 </script>

web/src/lib/components/shared-components/license/license-activation-success.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { t } from 'svelte-i18n';
+  import { mdiPartyPopper } from '@mdi/js';
+
+  export let onDone: () => void;
+</script>
+
+<div class="m-auto w-3/4 text-center flex flex-col place-content-center place-items-center mb-6 dark:text-white">
+  <Icon path={mdiPartyPopper} class="text-immich-primary dark:text-immich-dark-primary" size="96" />
+  <p class="text-4xl mt-8 font-bold">{$t('license_activated_title')}</p>
+  <p class="text-lg mt-6">{$t('license_activated_subtitle')}</p>
+
+  <div class="mt-10 w-full">
+    <Button fullwidth on:click={onDone}>OK</Button>
+  </div>
+</div>

web/src/lib/components/shared-components/license/license-content.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { user } from '$lib/stores/user.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import ServerLicenseCard from './server-license-card.svelte';
+  import UserLicenseCard from './user-license-card.svelte';
+  import { activateLicense, getActivationKey } from '$lib/utils/license-utils';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import { licenseStore } from '$lib/stores/license.store';
+  import { t } from 'svelte-i18n';
+
+  export let onActivate: () => void;
+
+  let licenseKey = '';
+  let isLoading = false;
+
+  const activate = async () => {
+    try {
+      licenseKey = licenseKey.trim();
+      isLoading = true;
+
+      const activationKey = await getActivationKey(licenseKey);
+      await activateLicense(licenseKey, activationKey);
+
+      onActivate();
+      licenseStore.setLicenseStatus(true);
+    } catch (error) {
+      handleError(error, $t('license_failed_activation'));
+    } finally {
+      isLoading = false;
+    }
+  };
+</script>
+
+<section class="p-4">
+  <div>
+    <h1 class="text-4xl font-bold text-immich-primary dark:text-immich-dark-primary tracking-wider">
+      {$t('license_license_title')}
+    </h1>
+    <p class="text-lg mt-2 dark:text-immich-gray">{$t('license_license_subtitle')}</p>
+  </div>
+  <div class="flex gap-6 mt-4 justify-between">
+    {#if $user.isAdmin}
+      <ServerLicenseCard />
+    {/if}
+    <UserLicenseCard />
+  </div>
+
+  <div class="mt-6">
+    <p class="dark:text-immich-gray">{$t('license_input_suggestion')}</p>
+    <form class="mt-2 flex gap-2" on:submit={activate}>
+      <input
+        class="immich-form-input w-full"
+        id="licensekey"
+        type="text"
+        bind:value={licenseKey}
+        required
+        placeholder="IMCL-0KEY-0CAN-00BE-FOUD-FROM-YOUR-EMAIL-INBX"
+        disabled={isLoading}
+      />
+      <Button type="submit" rounded="lg"
+        >{#if isLoading}
+          <LoadingSpinner />
+        {:else}
+          {$t('license_button_activate')}
+        {/if}</Button
+      >
+    </form>
+  </div>
+</section>

web/src/lib/components/shared-components/license/license-modal.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import LicenseActivationSuccess from '$lib/components/shared-components/license/license-activation-success.svelte';
+  import LicenseContent from '$lib/components/shared-components/license/license-content.svelte';
+
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+
+  export let onClose: () => void;
+
+  let showLicenseActivated = false;
+</script>
+
+<Portal>
+  <FullScreenModal showLogo title={''} {onClose} width="wide">
+    {#if showLicenseActivated}
+      <LicenseActivationSuccess onDone={onClose} />
+    {:else}
+      <LicenseContent
+        onActivate={() => {
+          showLicenseActivated = true;
+        }}
+      />
+    {/if}
+  </FullScreenModal>
+</Portal>

web/src/lib/components/shared-components/license/server-license-card.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { ImmichLicense } from '$lib/constants';
+  import { getLicenseLink } from '$lib/utils/license-utils';
+  import { mdiCheckCircleOutline, mdiServer } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+</script>
+
+<!-- SERVER LICENSE -->
+<div class="border border-gray-300 dark:border-gray-800 w-[375px] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900">
+  <div class="text-immich-primary dark:text-immich-dark-primary">
+    <Icon path={mdiServer} size="56" />
+    <p class="font-semibold text-lg mt-1">{$t('license_server_title')}</p>
+  </div>
+
+  <div class="mt-4 dark:text-immich-gray">
+    <p class="text-6xl font-bold">$99<span class="text-2xl font-medium">.99</span></p>
+    <p>{$t('license_per_server')}</p>
+  </div>
+
+  <div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
+    <div class="mt-6 flex flex-col gap-1">
+      <div class="grid grid-cols-[36px_auto]">
+        <Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
+        <p class="self-center">{$t('license_server_description_1')}</p>
+      </div>
+
+      <div class="grid grid-cols-[36px_auto]">
+        <Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
+        <p class="self-center">{$t('license_lifetime_description')}</p>
+      </div>
+
+      <div class="grid grid-cols-[36px_auto]">
+        <Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
+        <p class="self-center">{$t('license_server_description_2')}</p>
+      </div>
+    </div>
+
+    <a href={getLicenseLink(ImmichLicense.Server)}>
+      <Button fullwidth>{$t('license_button_select')}</Button>
+    </a>
+  </div>
+</div>

web/src/lib/components/shared-components/license/user-license-card.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { ImmichLicense } from '$lib/constants';
+  import { getLicenseLink } from '$lib/utils/license-utils';
+  import { mdiAccount, mdiCheckCircleOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+</script>
+
+<!-- USER LICENSE -->
+<div class="border border-gray-300 dark:border-gray-800 w-[375px] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900">
+  <div class="text-immich-primary dark:text-immich-dark-primary">
+    <Icon path={mdiAccount} size="56" />
+    <p class="font-semibold text-lg mt-1">{$t('license_individual_title')}</p>
+  </div>
+
+  <div class="mt-4 dark:text-immich-gray">
+    <p class="text-6xl font-bold">$24<span class="text-2xl font-medium">.99</span></p>
+    <p>{$t('license_per_user')}</p>
+  </div>
+
+  <div class="flex flex-col justify-between h-[200px] dark:text-immich-gray">
+    <div class="mt-6 flex flex-col gap-1">
+      <div class="grid grid-cols-[36px_auto]">
+        <Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
+        <p class="self-center">{$t('license_individual_description_1')}</p>
+      </div>
+
+      <div class="grid grid-cols-[36px_auto]">
+        <Icon path={mdiCheckCircleOutline} size="24" class="text-green-500 self-center" />
+        <p class="self-center">{$t('license_lifetime_description')}</p>
+      </div>
+    </div>
+
+    <a href={getLicenseLink(ImmichLicense.Client)}>
+      <Button fullwidth>{$t('license_button_select')}</Button>
+    </a>
+  </div>
+</div>

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -31,6 +31,7 @@
 
   const logOut = async () => {
     const { redirectUri } = await logout();
+
     if (redirectUri.startsWith('/')) {
       await goto(redirectUri);
     } else {

web/src/lib/components/shared-components/portal/portal.svelte

@@ -45,6 +45,24 @@
   }
 </script>
 
+<!--
+@component
+Allow rendering a component in a different part of the DOM.
+
+### Props
+- `target` - HTMLElement i.e "body", "html", default is "body"
+
+### Default Slot
+Used for every occurrence of an HTML tag in a message
+- `tag` - Name of the tag
+
+@example
+```html
+<Portal target="body">
+  <p>Your component in here</p>
+</Portal>
+```
+-->
 <script lang="ts">
   /**
    * DOM Element or CSS Selector

web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+  import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
   import SideBarLink from '$lib/components/shared-components/side-bar/side-bar-link.svelte';
   import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
-  import StatusBox from '$lib/components/shared-components/status-box.svelte';
   import { AppRoute } from '$lib/constants';
   import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync, mdiTools } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -17,7 +17,5 @@
     <SideBarLink title={$t('repair')} routeId={AppRoute.ADMIN_REPAIR} icon={mdiTools} preloadData={false} />
   </nav>
 
-  <div class="mb-6 mt-auto">
-    <StatusBox />
-  </div>
+  <BottomInfo />
 </SideBarSection>

web/src/lib/components/shared-components/side-bar/bottom-info.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import LicenseInfo from './license-info.svelte';
+  import ServerStatus from './server-status.svelte';
+  import StorageSpace from './storage-space.svelte';
+</script>
+
+<div class="mt-auto">
+  <StorageSpace />
+</div>
+
+<div class="mb-2">
+  <LicenseInfo />
+</div>
+
+<div class="mb-6">
+  <ServerStatus />
+</div>

web/src/lib/components/shared-components/side-bar/license-info.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiClose, mdiInformationOutline, mdiLicense } from '@mdi/js';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import LicenseModal from '$lib/components/shared-components/license/license-modal.svelte';
+  import { licenseStore } from '$lib/stores/license.store';
+  import { t } from 'svelte-i18n';
+  import { goto } from '$app/navigation';
+  import { AppRoute } from '$lib/constants';
+  import { getAccountAge } from '$lib/utils/auth';
+
+  let showMessage = false;
+  let isOpen = false;
+  const { isLicenseActivated } = licenseStore;
+
+  const openLicenseModal = () => {
+    isOpen = true;
+    showMessage = false;
+  };
+</script>
+
+{#if isOpen}
+  <LicenseModal onClose={() => (isOpen = false)} />
+{/if}
+
+<div class="hidden md:block license-status pl-4 text-sm">
+  {#if $isLicenseActivated}
+    <button
+      on:click={() => goto(`${AppRoute.USER_SETTINGS}?isOpen=user-license-settings`)}
+      class="w-full"
+      type="button"
+    >
+      <div class="flex gap-1 mt-2 place-items-center dark:bg-immich-dark-primary/10 bg-gray-100 py-3 px-2 rounded-lg">
+        <Icon path={mdiLicense} size="18" class="text-immich-primary dark:text-immich-dark-primary" />
+        <p class="dark:text-gray-100">{$t('license_info_licensed')}</p>
+      </div>
+    </button>
+  {:else}
+    <button
+      type="button"
+      on:click={openLicenseModal}
+      on:mouseenter={() => (showMessage = true)}
+      class="py-3 px-2 flex justify-between place-items-center place-content-center border border-gray-300 dark:border-immich-dark-primary/50 mt-2 rounded-lg shadow-sm dark:bg-immich-dark-primary/10 w-full"
+    >
+      <div class="flex place-items-center place-content-center gap-1">
+        <Icon path={mdiLicense} size="18" class="text-immich-dark-gray/75 dark:text-immich-gray/85" />
+        <p class="text-immich-dark-gray/75 dark:text-immich-gray">{$t('license_info_unlicensed')}</p>
+      </div>
+
+      <div class="text-immich-primary dark:text-immich-dark-primary flex place-items-center gap-[2px] font-medium">
+        {$t('license_button_buy')}
+
+        <span role="contentinfo">
+          <Icon path={mdiInformationOutline}></Icon>
+        </span>
+      </div>
+    </button>
+  {/if}
+</div>
+
+<Portal target="body">
+  {#if showMessage && getAccountAge() > 14}
+    <div
+      class="w-[265px] absolute bottom-[75px] left-[255px] bg-white dark:bg-gray-800 dark:text-white text-black rounded-xl z-10 shadow-2xl px-4 py-5"
+    >
+      <div class="flex justify-between place-items-center">
+        <Icon path={mdiLicense} size="44" class="text-immich-dark-gray/75 dark:text-immich-gray" />
+        <CircleIconButton
+          icon={mdiClose}
+          on:click={() => {
+            showMessage = false;
+          }}
+          title="Close"
+          size="18"
+          class="text-immich-dark-gray/85 dark:text-immich-gray"
+        />
+      </div>
+      <h1 class="text-lg font-medium my-3">{$t('license_trial_info_1')}</h1>
+      <p class="text-immich-dark-gray/80 dark:text-immich-gray text-balance">
+        {$t('license_trial_info_2')}
+        <span class="text-immich-primary dark:text-immich-dark-primary font-semibold">
+          {$t('license_trial_info_3', { values: { accountAge: getAccountAge() } })}</span
+        >. {$t('license_trial_info_4')}
+      </p>
+      <div class="mt-3">
+        <Button size="sm" fullwidth on:click={openLicenseModal}>{$t('license_button_buy_license')}</Button>
+      </div>
+    </div>
+  {/if}
+</Portal>

web/src/lib/components/shared-components/side-bar/server-status.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import ServerAboutModal from '$lib/components/shared-components/server-about-modal.svelte';
+  import { websocketStore } from '$lib/stores/websocket';
+  import { requestServerInfo } from '$lib/utils/auth';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
+
+  const { serverVersion, connected } = websocketStore;
+
+  let isOpen = false;
+
+  $: version = $serverVersion ? `v${$serverVersion.major}.${$serverVersion.minor}.${$serverVersion.patch}` : null;
+
+  let aboutInfo: ServerAboutResponseDto;
+
+  onMount(async () => {
+    await requestServerInfo();
+    aboutInfo = await getAboutInfo();
+  });
+</script>
+
+{#if isOpen}
+  <ServerAboutModal onClose={() => (isOpen = false)} info={aboutInfo} />
+{/if}
+
+<div
+  class="text-sm hidden group-hover:sm:flex md:flex pl-5 pr-1 place-items-center place-content-center justify-between"
+>
+  {#if $connected}
+    <div class="flex gap-2 place-items-center place-content-center">
+      <div class="w-[7px] h-[7px] bg-green-500 rounded-full" />
+      <p class="dark:text-immich-gray">{$t('server_online')}</p>
+    </div>
+  {:else}
+    <div class="flex gap-2 place-items-center place-content-center">
+      <div class="w-[7px] h-[7px] bg-red-500 rounded-full" />
+      <p class="text-red-500">{$t('server_offline')}</p>
+    </div>
+  {/if}
+
+  <div class="flex justify-between justify-items-center">
+    {#if $connected && version}
+      <button type="button" on:click={() => (isOpen = true)} class="dark:text-immich-gray">{version}</button>
+    {:else}
+      <p class="text-red-500">{$t('unknown')}</p>
+    {/if}
+  </div>
+</div>

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -21,12 +21,12 @@
     mdiToolbox,
     mdiToolboxOutline,
   } from '@mdi/js';
-  import StatusBox from '../status-box.svelte';
   import SideBarSection from './side-bar-section.svelte';
   import SideBarLink from './side-bar-link.svelte';
   import MoreInformationAssets from '$lib/components/shared-components/side-bar/more-information-assets.svelte';
   import MoreInformationAlbums from '$lib/components/shared-components/side-bar/more-information-albums.svelte';
   import { t } from 'svelte-i18n';
+  import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
 
   let isArchiveSelected: boolean;
   let isFavoritesSelected: boolean;
@@ -136,8 +136,5 @@
     {/if}
   </nav>
 
-  <!-- Status Box -->
-  <div class="mb-6 mt-auto">
-    <StatusBox />
-  </div>
+  <BottomInfo />
 </SideBarSection>

web/src/lib/components/shared-components/side-bar/storage-space.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import ServerAboutModal from '$lib/components/shared-components/server-about-modal.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import { serverInfo } from '$lib/stores/server-info.store';
+  import { user } from '$lib/stores/user.store';
+  import { requestServerInfo } from '$lib/utils/auth';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import { getByteUnitString } from '../../../utils/byte-units';
+  import LoadingSpinner from '../loading-spinner.svelte';
+  import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
+
+  let usageClasses = '';
+  let isOpen = false;
+
+  $: hasQuota = $user?.quotaSizeInBytes !== null;
+  $: availableBytes = (hasQuota ? $user?.quotaSizeInBytes : $serverInfo?.diskSizeRaw) || 0;
+  $: usedBytes = (hasQuota ? $user?.quotaUsageInBytes : $serverInfo?.diskUseRaw) || 0;
+  $: usedPercentage = Math.round((usedBytes / availableBytes) * 100);
+
+  let aboutInfo: ServerAboutResponseDto;
+
+  const onUpdate = () => {
+    usageClasses = getUsageClass();
+  };
+
+  const getUsageClass = () => {
+    if (usedPercentage >= 95) {
+      return 'bg-red-500';
+    }
+
+    if (usedPercentage > 80) {
+      return 'bg-yellow-500';
+    }
+
+    return 'bg-immich-primary dark:bg-immich-dark-primary';
+  };
+
+  $: $user && onUpdate();
+
+  onMount(async () => {
+    await requestServerInfo();
+    aboutInfo = await getAboutInfo();
+  });
+</script>
+
+{#if isOpen}
+  <ServerAboutModal onClose={() => (isOpen = false)} info={aboutInfo} />
+{/if}
+
+<div
+  class="hidden md:block storage-status p-4 bg-gray-100 dark:bg-immich-dark-primary/10 ml-4 rounded-lg text-sm"
+  title={$t('storage_usage', {
+    values: {
+      used: getByteUnitString(usedBytes, $locale, 3),
+      available: getByteUnitString(availableBytes, $locale, 3),
+    },
+  })}
+>
+  <div class="hidden group-hover:sm:block md:block">
+    <p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
+
+    {#if $serverInfo}
+      <p class="text-gray-500 dark:text-gray-300">
+        {$t('storage_usage', {
+          values: {
+            used: getByteUnitString(usedBytes, $locale),
+            available: getByteUnitString(availableBytes, $locale),
+          },
+        })}
+      </p>
+
+      <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
+        <div class="h-[7px] rounded-full {usageClasses}" style="width: {usedPercentage}%" />
+      </div>
+    {:else}
+      <div class="mt-2">
+        <LoadingSpinner />
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -1,125 +0,0 @@
-<script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
-  import ServerAboutModal from '$lib/components/shared-components/server-about-modal.svelte';
-  import { locale } from '$lib/stores/preferences.store';
-  import { serverInfo } from '$lib/stores/server-info.store';
-  import { user } from '$lib/stores/user.store';
-  import { websocketStore } from '$lib/stores/websocket';
-  import { requestServerInfo } from '$lib/utils/auth';
-  import { mdiChartPie, mdiDns } from '@mdi/js';
-  import { onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-  import { getByteUnitString } from '../../utils/byte-units';
-  import LoadingSpinner from './loading-spinner.svelte';
-  import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
-
-  const { serverVersion, connected } = websocketStore;
-
-  let usageClasses = '';
-  let isOpen = false;
-
-  $: version = $serverVersion ? `v${$serverVersion.major}.${$serverVersion.minor}.${$serverVersion.patch}` : null;
-  $: hasQuota = $user?.quotaSizeInBytes !== null;
-  $: availableBytes = (hasQuota ? $user?.quotaSizeInBytes : $serverInfo?.diskSizeRaw) || 0;
-  $: usedBytes = (hasQuota ? $user?.quotaUsageInBytes : $serverInfo?.diskUseRaw) || 0;
-  $: usedPercentage = Math.round((usedBytes / availableBytes) * 100);
-
-  let aboutInfo: ServerAboutResponseDto;
-
-  const onUpdate = () => {
-    usageClasses = getUsageClass();
-  };
-
-  const getUsageClass = () => {
-    if (usedPercentage >= 95) {
-      return 'bg-red-500';
-    }
-
-    if (usedPercentage > 80) {
-      return 'bg-yellow-500';
-    }
-
-    return 'bg-immich-primary dark:bg-immich-dark-primary';
-  };
-
-  $: $user && onUpdate();
-
-  onMount(async () => {
-    await requestServerInfo();
-    aboutInfo = await getAboutInfo();
-  });
-</script>
-
-{#if isOpen}
-  <ServerAboutModal onClose={() => (isOpen = false)} info={aboutInfo} />
-{/if}
-
-<div class="dark:text-immich-dark-fg">
-  <div
-    class="storage-status grid grid-cols-[64px_auto]"
-    title={$t('storage_usage', {
-      values: {
-        used: getByteUnitString(usedBytes, $locale, 3),
-        available: getByteUnitString(availableBytes, $locale, 3),
-      },
-    })}
-  >
-    <div class="pb-[2.15rem] pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary group-hover:sm:pb-0 md:pb-0">
-      <Icon path={mdiChartPie} size="24" />
-    </div>
-    <div class="hidden group-hover:sm:block md:block">
-      <p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">{$t('storage')}</p>
-      {#if $serverInfo}
-        <div class="my-2 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
-          <div class="h-[7px] rounded-full {usageClasses}" style="width: {usedPercentage}%" />
-        </div>
-        <p class="text-xs">
-          {$t('storage_usage', {
-            values: {
-              used: getByteUnitString(usedBytes, $locale),
-              available: getByteUnitString(availableBytes, $locale),
-            },
-          })}
-        </p>
-      {:else}
-        <div class="mt-2">
-          <LoadingSpinner />
-        </div>
-      {/if}
-    </div>
-  </div>
-  <div>
-    <hr class="my-4 ml-5 dark:border-immich-dark-gray" />
-  </div>
-  <div class="server-status grid grid-cols-[64px_auto]">
-    <div class="pb-11 pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary group-hover:sm:pb-0 md:pb-0">
-      <Icon path={mdiDns} size="26" />
-    </div>
-    <div class="hidden text-xs group-hover:sm:block md:block">
-      <p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">{$t('server')}</p>
-
-      <div class="mt-2 flex justify-between justify-items-center">
-        <p>{$t('status')}</p>
-
-        {#if $connected}
-          <p class="font-medium text-immich-primary dark:text-immich-dark-primary">{$t('online')}</p>
-        {:else}
-          <p class="font-medium text-red-500">{$t('offline')}</p>
-        {/if}
-      </div>
-
-      <div class="mt-2 flex justify-between justify-items-center">
-        <p>{$t('version')}</p>
-        {#if $connected && version}
-          <button
-            type="button"
-            on:click={() => (isOpen = true)}
-            class="font-medium text-immich-primary dark:text-immich-dark-primary">{version}</button
-          >
-        {:else}
-          <p class="font-medium text-red-500">{$t('unknown')}</p>
-        {/if}
-      </div>
-    </div>
-  </div>
-</div>