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

<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>