refactor: move more elements (#22093)

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -4,6 +4,7 @@
   import type { Action } from '$lib/components/asset-viewer/actions/action';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
+  import Portal from '$lib/elements/Portal.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -24,7 +25,6 @@
   import { t } from 'svelte-i18n';
   import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
   import DeleteAssetDialog from '../../photos-page/delete-asset-dialog.svelte';
-  import Portal from '../portal/portal.svelte';
 
   interface Props {
     initialAssetId?: string;

web/src/lib/components/shared-components/notification/notification-list.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import Portal from '$lib/elements/Portal.svelte';
   import { t } from 'svelte-i18n';
   import { flip } from 'svelte/animate';
   import { quintOut } from 'svelte/easing';

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

@@ -1,80 +0,0 @@
-<script module lang="ts">
-  import { handlePromiseError } from '$lib/utils';
-  import { tick, type Snippet } from 'svelte';
-
-  /**
-   * Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
-   */
-  export function portal(element: HTMLElement, target: HTMLElement | string = 'body') {
-    let targetElement;
-    async function update(newTarget: HTMLElement | string) {
-      target = newTarget;
-      if (typeof target === 'string') {
-        targetElement = document.querySelector(target);
-        if (targetElement === null) {
-          await tick();
-          targetElement = document.querySelector(target);
-        }
-        if (targetElement === null) {
-          throw new Error(`No element found matching css selector: "${target}"`);
-        }
-      } else if (target instanceof HTMLElement) {
-        targetElement = target;
-      } else {
-        throw new TypeError(
-          `Unknown portal target type: ${
-            target === null ? 'null' : typeof target
-          }. Allowed types: string (CSS selector) or HTMLElement.`,
-        );
-      }
-      targetElement.append(element);
-      element.hidden = false;
-    }
-
-    function destroy() {
-      if (element.parentNode) {
-        element.remove();
-      }
-    }
-
-    handlePromiseError(update(target));
-    return {
-      update,
-      destroy,
-    };
-  }
-</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">
-  interface Props {
-    /**
-     * DOM Element or CSS Selector
-     */
-    target?: HTMLElement | string;
-    children?: Snippet;
-  }
-
-  let { target = 'body', children }: Props = $props();
-</script>
-
-<div use:portal={target} hidden>
-  {@render children?.()}
-</div>

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

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
-  import Portal from '$lib/components/shared-components/portal/portal.svelte';
   import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
   import { AppRoute } from '$lib/constants';
   import Icon from '$lib/elements/Icon.svelte';
+  import Portal from '$lib/elements/Portal.svelte';
   import PurchaseModal from '$lib/modals/PurchaseModal.svelte';
   import { purchaseStore } from '$lib/stores/purchase.store';
   import { preferences } from '$lib/stores/user.store';