refactor: move more elements (#22093)

web/src/lib/elements/Portal.svelte

@@ -0,0 +1,80 @@
+<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/elements/Skeleton.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  interface Props {
+    height: number;
+    title: string;
+  }
+
+  let { height = 0, title }: Props = $props();
+</script>
+
+<div class="overflow-clip" style:height={height + 'px'}>
+  <div
+    class="flex pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-light dark:text-immich-dark-fg md:text-sm"
+  >
+    {title}
+  </div>
+  <div
+    class="animate-pulse absolute h-full ms-[10px] me-[10px]"
+    style:width="calc(100% - 20px)"
+    data-skeleton="true"
+  ></div>
+</div>
+
+<style>
+  [data-skeleton] {
+    background-image: url('/light_skeleton.png');
+    background-repeat: repeat;
+    background-size: 235px, 235px;
+  }
+  @media (max-width: 767px) {
+    [data-skeleton] {
+      background-size: 100px, 100px;
+    }
+  }
+  :global(.dark) [data-skeleton] {
+    background-image: url('/dark_skeleton.png');
+  }
+  @keyframes delayedVisibility {
+    to {
+      visibility: visible;
+    }
+  }
+  [data-skeleton] {
+    visibility: hidden;
+    animation:
+      0s linear 0.1s forwards delayedVisibility,
+      pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+</style>