feat(web): license UI (#11182)

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>