refactor: side bar modals (#18134)

web/src/lib/components/shared-components/purchasing/purchase-activation-success.svelte

@@ -1,11 +1,11 @@
 <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';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { preferences } from '$lib/stores/user.store';
   import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
+  import { mdiPartyPopper } from '@mdi/js';
+  import { t } from 'svelte-i18n';
 
   interface Props {
     onDone: () => void;
@@ -14,7 +14,7 @@
   let { onDone }: Props = $props();
 </script>
 
-<div class="m-auto w-3/4 text-center flex flex-col place-content-center place-items-center dark:text-white my-6">
+<div class="m-auto w-3/4 text-center flex flex-col place-content-center place-items-center my-6">
   <Icon path={mdiPartyPopper} class="text-immich-primary dark:text-immich-dark-primary" size="96" />
   <p class="text-4xl mt-8 font-bold">{$t('purchase_activated_title')}</p>
   <p class="text-lg mt-6">{$t('purchase_activated_subtitle')}</p>

web/src/lib/components/shared-components/purchasing/purchase-content.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { handleError } from '$lib/utils/handle-error';
-  import ServerPurchaseOptionCard from './server-purchase-option-card.svelte';
-  import UserPurchaseOptionCard from './individual-purchase-option-card.svelte';
-  import { activateProduct, 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 { purchaseStore } from '$lib/stores/purchase.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import { activateProduct, getActivationKey } from '$lib/utils/license-utils';
   import { t } from 'svelte-i18n';
+  import UserPurchaseOptionCard from './individual-purchase-option-card.svelte';
+  import ServerPurchaseOptionCard from './server-purchase-option-card.svelte';
 
   interface Props {
     onActivate: () => void;
@@ -39,13 +39,13 @@
 <section class="p-4">
   <div>
     {#if showTitle}
-      <h1 class="text-4xl font-bold text-immich-primary dark:text-immich-dark-primary tracking-wider">
+      <h1 class="text-4xl font-bold tracking-wider">
         {$t('purchase_option_title')}
       </h1>
     {/if}
 
     {#if showMessage}
-      <div class="mt-2 dark:text-immich-gray">
+      <div class="mt-2">
         <p>
           {$t('purchase_panel_info_1')}
         </p>

web/src/lib/components/shared-components/purchasing/purchase-modal.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import PurchaseActivationSuccess from '$lib/components/shared-components/purchasing/purchase-activation-success.svelte';
-  import PurchaseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
-
-  import Portal from '$lib/components/shared-components/portal/portal.svelte';
-
-  interface Props {
-    onClose: () => void;
-  }
-
-  let { onClose }: Props = $props();
-
-  let showProductActivated = $state(false);
-</script>
-
-<Portal>
-  <FullScreenModal showLogo title="" {onClose} width="wide">
-    {#if showProductActivated}
-      <PurchaseActivationSuccess onDone={onClose} />
-    {:else}
-      <PurchaseContent
-        onActivate={() => {
-          showProductActivated = true;
-        }}
-        showMessage={false}
-      />
-    {/if}
-  </FullScreenModal>
-</Portal>

web/src/lib/components/shared-components/server-about-modal.svelte

@@ -1,203 +0,0 @@
-<script lang="ts">
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import Portal from '$lib/components/shared-components/portal/portal.svelte';
-  import { type ServerAboutResponseDto, type ServerVersionHistoryResponseDto } from '@immich/sdk';
-  import { DateTime } from 'luxon';
-  import { t } from 'svelte-i18n';
-  import { mdiAlert } from '@mdi/js';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { locale } from '$lib/stores/preferences.store';
-
-  interface Props {
-    onClose: () => void;
-    info: ServerAboutResponseDto;
-    versions: ServerVersionHistoryResponseDto[];
-  }
-
-  let { onClose, info, versions }: Props = $props();
-</script>
-
-<Portal>
-  <FullScreenModal title={$t('about')} {onClose}>
-    <div class="flex flex-col sm:grid sm:grid-cols-2 gap-1 text-immich-primary dark:text-immich-dark-primary">
-      <div>
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="version-desc"
-          >Immich</label
-        >
-        <div>
-          <a
-            href={info.versionUrl}
-            class="underline text-sm immich-form-label"
-            target="_blank"
-            rel="noreferrer"
-            id="version-desc"
-          >
-            {info.version}
-          </a>
-        </div>
-      </div>
-
-      <div>
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="ffmpeg-desc"
-          >ExifTool</label
-        >
-        <p class="immich-form-label pb-2 text-sm" id="ffmpeg-desc">
-          {info.exiftool}
-        </p>
-      </div>
-
-      <div>
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="nodejs-desc"
-          >Node.js</label
-        >
-        <p class="immich-form-label pb-2 text-sm" id="nodejs-desc">
-          {info.nodejs}
-        </p>
-      </div>
-
-      <div>
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="vips-desc"
-          >Libvips</label
-        >
-        <p class="immich-form-label pb-2 text-sm" id="vips-desc">
-          {info.libvips}
-        </p>
-      </div>
-
-      <div class={(info.imagemagick?.length || 0) > 10 ? 'col-span-2' : ''}>
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="imagemagick-desc"
-          >ImageMagick</label
-        >
-        <p class="immich-form-label pb-2 text-sm" id="imagemagick-desc">
-          {info.imagemagick}
-        </p>
-      </div>
-
-      <div class={(info.ffmpeg?.length || 0) > 10 ? 'col-span-2' : ''}>
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="ffmpeg-desc"
-          >FFmpeg</label
-        >
-        <p class="immich-form-label pb-2 text-sm" id="ffmpeg-desc">
-          {info.ffmpeg}
-        </p>
-      </div>
-
-      {#if info.repository && info.repositoryUrl}
-        <div>
-          <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="version-desc"
-            >{$t('repository')}</label
-          >
-          <div>
-            <a
-              href={info.repositoryUrl}
-              class="underline text-sm immich-form-label"
-              target="_blank"
-              rel="noreferrer"
-              id="version-desc"
-            >
-              {info.repository}
-            </a>
-          </div>
-        </div>
-      {/if}
-
-      {#if info.sourceRef && info.sourceCommit && info.sourceUrl}
-        <div>
-          <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="git-desc"
-            >{$t('source')}</label
-          >
-          <div>
-            <a
-              href={info.sourceUrl}
-              class="underline text-sm immich-form-label"
-              target="_blank"
-              rel="noreferrer"
-              id="git-desc"
-            >
-              {info.sourceRef}@{info.sourceCommit.slice(0, 9)}
-            </a>
-          </div>
-        </div>
-      {/if}
-
-      {#if info.build && info.buildUrl}
-        <div>
-          <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="build-desc"
-            >{$t('build')}</label
-          >
-          <div>
-            <a
-              href={info.buildUrl}
-              class="underline text-sm immich-form-label"
-              target="_blank"
-              rel="noreferrer"
-              id="build-desc"
-            >
-              {info.build}
-            </a>
-          </div>
-        </div>
-      {/if}
-
-      {#if info.buildImage && info.buildImage}
-        <div>
-          <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="build-image-desc"
-            >{$t('build_image')}</label
-          >
-          <div>
-            <a
-              href={info.buildImageUrl}
-              class="underline text-sm immich-form-label"
-              target="_blank"
-              rel="noreferrer"
-              id="build-image-desc"
-            >
-              {info.buildImage}
-            </a>
-          </div>
-        </div>
-      {/if}
-
-      {#if info.sourceRef === 'main' && info.repository === 'immich-app/immich'}
-        <div class="col-span-full p-4 flex gap-1">
-          <Icon path={mdiAlert} size="2em" color="#ffcc4d" />
-          <p class="immich-form-label text-sm" id="main-warning">
-            {$t('main_branch_warning')}
-          </p>
-        </div>
-      {/if}
-
-      <div class="col-span-full">
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="version-history"
-          >{$t('version_history')}</label
-        >
-        <ul id="version-history" class="list-none">
-          {#each versions.slice(0, 5) as item (item.id)}
-            {@const createdAt = DateTime.fromISO(item.createdAt)}
-            <li>
-              <span
-                class="immich-form-label pb-2 text-xs"
-                id="version-history"
-                title={createdAt.toLocaleString(DateTime.DATETIME_SHORT_WITH_SECONDS, { locale: $locale })}
-              >
-                {$t('version_history_item', {
-                  values: {
-                    version: item.version,
-                    date: createdAt.toLocaleString(
-                      {
-                        month: 'short',
-                        day: 'numeric',
-                        year: 'numeric',
-                      },
-                      { locale: $locale },
-                    ),
-                  },
-                })}
-              </span>
-            </li>
-          {/each}
-        </ul>
-      </div>
-    </div>
-  </FullScreenModal>
-</Portal>

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

@@ -4,9 +4,10 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
-  import LicenseModal from '$lib/components/shared-components/purchasing/purchase-modal.svelte';
   import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
   import { AppRoute } from '$lib/constants';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import PurchaseModal from '$lib/modals/PurchaseModal.svelte';
   import { purchaseStore } from '$lib/stores/purchase.store';
   import { preferences } from '$lib/stores/user.store';
   import { getAccountAge } from '$lib/utils/auth';
@@ -19,7 +20,6 @@
   import { fade } from 'svelte/transition';
 
   let showMessage = $state(false);
-  let isOpen = $state(false);
   let hoverMessage = $state(false);
   let hoverButton = $state(false);
 
@@ -27,8 +27,8 @@
 
   const { isPurchased } = purchaseStore;
 
-  const openPurchaseModal = () => {
-    isOpen = true;
+  const openPurchaseModal = async () => {
+    await modalManager.open(PurchaseModal);
     showMessage = false;
   };
 
@@ -74,10 +74,6 @@
   });
 </script>
 
-{#if isOpen}
-  <LicenseModal onClose={() => (isOpen = false)} />
-{/if}
-
 <div class="license-status ps-4 text-sm">
   {#if $isPurchased && $preferences.purchase.showSupportBadge}
     <button

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
-  import ServerAboutModal from '$lib/components/shared-components/server-about-modal.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import ServerAboutModal from '$lib/modals/ServerAboutModal.svelte';
   import { userInteraction } from '$lib/stores/user.svelte';
   import { websocketStore } from '$lib/stores/websocket';
   import { requestServerInfo } from '$lib/utils/auth';
@@ -16,7 +17,6 @@
 
   const { serverVersion, connected } = websocketStore;
 
-  let isOpen = $state(false);
   let info: ServerAboutResponseDto | undefined = $state();
   let versions: ServerVersionHistoryResponseDto[] = $state([]);
 
@@ -37,10 +37,6 @@
   );
 </script>
 
-{#if isOpen && info}
-  <ServerAboutModal onClose={() => (isOpen = false)} {info} {versions} />
-{/if}
-
 <div
   class="text-sm flex md:flex ps-5 pe-1 place-items-center place-content-center justify-between min-w-52 overflow-hidden dark:text-immich-dark-fg"
 >
@@ -58,7 +54,11 @@
 
   <div class="flex justify-between justify-items-center">
     {#if $connected && version}
-      <button type="button" onclick={() => (isOpen = true)} class="dark:text-immich-gray flex gap-1">
+      <button
+        type="button"
+        onclick={() => info && modalManager.open(ServerAboutModal, { versions, info })}
+        class="dark:text-immich-gray flex gap-1"
+      >
         {#if isMain}
           <Icon path={mdiAlert} size="1.5em" color="#ffcc4d" /> {info?.sourceRef}
         {:else}