@futo-org/backups-orchestrator-ui 0.1.71

package/dist/components/ui/PathPickerModal.svelte

@@ -0,0 +1,219 @@
+<script lang="ts">
+  import StackList from "./StackList.svelte";
+  import type { FilesystemListingResponseDto } from "../../fetch-client";
+  import { handleGetFileListing } from "../../services/filesystem.service";
+  import {
+    Button,
+    FormModal,
+    Heading,
+    HStack,
+    Icon,
+    IconButton,
+    ListButton,
+    LoadingSpinner,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import {
+    mdiArrowUp,
+    mdiClose,
+    mdiFileOutline,
+    mdiFolderOutline,
+    mdiPlus,
+  } from "@mdi/js";
+  import { onMount } from "svelte";
+  import { SvelteSet } from "svelte/reactivity";
+
+  type Props = {
+    title: string;
+    description?: string;
+    initial?: string[];
+    foldersOnly?: boolean;
+    single?: boolean;
+    handleGetListing?: (path?: string) => Promise<FilesystemListingResponseDto>;
+    onSubmit: (paths: string[]) => void | Promise<void>;
+    onClose: () => void;
+  };
+
+  let {
+    title,
+    description,
+    initial = [],
+    foldersOnly = false,
+    single = false,
+    handleGetListing,
+    onSubmit,
+    onClose,
+  }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  const selected = new SvelteSet(initial);
+  let listing: FilesystemListingResponseDto | undefined = $state();
+
+  const browse = async (path?: string) => {
+    listing = undefined;
+    listing = await (handleGetListing ?? handleGetFileListing)(path);
+  };
+
+  onMount(() => void browse());
+
+  const sortedItems = $derived(
+    listing
+      ? [...listing.items].sort(
+          (a, b) =>
+            Number(b.isDirectory) - Number(a.isDirectory) ||
+            a.path.localeCompare(b.path),
+        )
+      : [],
+  );
+
+  let submitting = $state(false);
+
+  const handleSubmit = async () => {
+    if (submitting) return;
+    submitting = true;
+    try {
+      await onSubmit([...selected]);
+      onClose();
+    } finally {
+      submitting = false;
+    }
+  };
+
+  const add = async (path: string) => {
+    if (single) {
+      if (submitting) return;
+      submitting = true;
+      try {
+        await onSubmit([path]);
+        onClose();
+      } finally {
+        submitting = false;
+      }
+    } else {
+      selected.add(path);
+    }
+  };
+</script>
+
+<FormModal
+  {title}
+  size="large"
+  submitText="Save"
+  disabled={submitting}
+  onSubmit={handleSubmit}
+  {onClose}
+>
+  <Stack gap={5}>
+    {#if description}
+      <Text color="secondary">{description}</Text>
+    {/if}
+
+    {#if !single}
+      {#if selected.size > 0}
+        <StackList>
+          {#snippet title()}
+            Selected paths
+          {/snippet}
+          {#each [...selected] as path (path)}
+            <HStack gap={2} class="items-center px-4 py-3">
+              <Text class="grow truncate" title={path}>{path}</Text>
+              <IconButton
+                icon={mdiClose}
+                aria-label="Remove"
+                size="tiny"
+                variant="ghost"
+                onclick={() => selected.delete(path)}
+              />
+            </HStack>
+          {/each}
+        </StackList>
+      {:else}
+        <Stack gap={2}>
+          <Heading class="px-1" size="tiny">Selected paths</Heading>
+          <Text color="muted" class="text-center py-6">No paths selected</Text>
+        </Stack>
+      {/if}
+    {/if}
+
+    {#if !listing}
+      <Stack gap={2}>
+        <Heading class="px-1" size="tiny">Browse</Heading>
+        <div class="py-6 flex justify-center">
+          <LoadingSpinner />
+        </div>
+      </Stack>
+    {:else}
+      <StackList>
+        {#snippet title()}
+          Browse
+        {/snippet}
+
+        <HStack gap={2} class="items-center px-4 py-3 bg-subtle">
+          <Icon icon={mdiFolderOutline} color="primary" />
+          <Text class="grow truncate" title={listing.path}>
+            {listing.path}
+          </Text>
+          {#if listing.parent && listing.parent !== listing.path}
+            <IconButton
+              icon={mdiArrowUp}
+              aria-label="Go up"
+              size="tiny"
+              variant="ghost"
+              onclick={() => browse(listing!.parent)}
+            />
+          {/if}
+        </HStack>
+
+        {#each sortedItems as item (item.path)}
+          {#if item.isDirectory || !foldersOnly}
+            <HStack gap={2} class="items-center px-2 py-1">
+              {#if item.isDirectory}
+                <ListButton
+                  leadingIcon={mdiFolderOutline}
+                  onclick={() => browse(item.path)}
+                  class="flex-1 justify-start"
+                >
+                  {item.path.split(/[\\/]/).pop()}
+                </ListButton>
+              {:else}
+                <HStack gap={2} class="items-center grow px-2 py-2">
+                  <Icon icon={mdiFileOutline} color="secondary" />
+                  <Text
+                    class="grow truncate"
+                    color="secondary"
+                    title={item.path}
+                  >
+                    {item.path.split(/[\\/]/).pop()}
+                  </Text>
+                </HStack>
+              {/if}
+              <IconButton
+                icon={mdiPlus}
+                aria-label={single ? "Select" : "Add"}
+                size="tiny"
+                variant="ghost"
+                disabled={!single && selected.has(item.path)}
+                onclick={() => add(item.path)}
+              />
+            </HStack>
+          {/if}
+        {/each}
+
+        {#if sortedItems.filter((item) => item.isDirectory || !foldersOnly).length === 0}
+          {#if foldersOnly}
+            <Stack class="items-center px-4 py-6">
+              <Button variant="outline" onclick={() => add(listing!.path)}>
+                Use this folder
+              </Button>
+            </Stack>
+          {:else}
+            <Text color="muted" class="text-center py-6">
+              This folder is empty
+            </Text>
+          {/if}
+        {/if}
+      </StackList>
+    {/if}
+  </Stack>
+</FormModal>

package/dist/components/ui/PathPickerModal.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { FilesystemListingResponseDto } from "../../fetch-client";
+type Props = {
+    title: string;
+    description?: string;
+    initial?: string[];
+    foldersOnly?: boolean;
+    single?: boolean;
+    handleGetListing?: (path?: string) => Promise<FilesystemListingResponseDto>;
+    onSubmit: (paths: string[]) => void | Promise<void>;
+    onClose: () => void;
+};
+declare const PathPickerModal: import("svelte").Component<Props, {}, "">;
+type PathPickerModal = ReturnType<typeof PathPickerModal>;
+export default PathPickerModal;

package/dist/components/ui/StackList.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" generics="T">
+  import { getReadableErrorMessage } from "../../utils/handle-error";
+  import { Alert, Heading, LoadingSpinner, Stack } from "@immich/ui";
+  import type { CreateQueryResult } from "@tanstack/svelte-query";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    title?: Snippet;
+    query?: CreateQueryResult<T>;
+    children: Snippet<[T]>;
+  };
+
+  const { title, query, children }: Props = $props();
+</script>
+
+<Stack gap={2}>
+  {#if title}
+    <Heading class="px-1" size="tiny">{@render title()}</Heading>
+  {/if}
+
+  {#if query?.isLoading}
+    <LoadingSpinner />
+  {:else if query?.isError}
+    <Alert color="danger">{getReadableErrorMessage(query.error)}</Alert>
+  {:else}
+    <Stack gap={0} class="divide-y rounded-2xl border overflow-hidden">
+      {@render children(query?.data as T)}
+    </Stack>
+  {/if}
+</Stack>

package/dist/components/ui/StackList.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { CreateQueryResult } from "@tanstack/svelte-query";
+import type { Snippet } from "svelte";
+declare function $$render<T>(): {
+    props: {
+        title?: Snippet;
+        query?: CreateQueryResult<T>;
+        children: Snippet<[T]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const StackList: $$IsomorphicComponent;
+type StackList<T> = InstanceType<typeof StackList<T>>;
+export default StackList;

package/dist/components/ui/StackListItem.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { hasActions } from "../../utils/actions";
+  import { ContextMenuButton, HStack, type ActionItem } from "@immich/ui";
+  import { mdiDotsVertical } from "@mdi/js";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    class?: string;
+    icon?: Snippet;
+    children: Snippet;
+    trailing?: Snippet;
+    actions?: ActionItem[];
+    onclick?: () => void;
+  };
+
+  const {
+    class: className,
+    icon,
+    children,
+    trailing,
+    actions = [],
+    onclick,
+  }: Props = $props();
+</script>
+
+{#snippet body()}
+  <HStack gap={4} class={`${className} items-center px-4 py-3`}>
+    {#if icon}
+      <div
+        class="flex p-2 items-center justify-center rounded-lg bg-subtle text-lg"
+      >
+        {@render icon?.()}
+      </div>
+    {/if}
+
+    <HStack gap={1} class="flex-1 items-baseline">
+      {@render children()}
+    </HStack>
+
+    {@render trailing?.()}
+
+    {#if hasActions(actions)}
+      <ContextMenuButton
+        icon={mdiDotsVertical}
+        aria-label="Options"
+        items={actions}
+        variant="ghost"
+        color="secondary"
+      />
+    {/if}
+  </HStack>
+{/snippet}
+
+{#if onclick}
+  <button
+    {onclick}
+    type="button"
+    class="block w-full text-left rounded-lg hover:bg-subtle focus-visible:outline-2 focus-visible:outline-primary-500 cursor-pointer"
+  >
+    {@render body()}
+  </button>
+{:else}
+  {@render body()}
+{/if}

package/dist/components/ui/StackListItem.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type ActionItem } from "@immich/ui";
+import type { Snippet } from "svelte";
+type Props = {
+    class?: string;
+    icon?: Snippet;
+    children: Snippet;
+    trailing?: Snippet;
+    actions?: ActionItem[];
+    onclick?: () => void;
+};
+declare const StackListItem: import("svelte").Component<Props, {}, "">;
+type StackListItem = ReturnType<typeof StackListItem>;
+export default StackListItem;

package/dist/components/ui/VisualisationGauge.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Text } from "@immich/ui";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    title: string;
+    content: string;
+    compact?: boolean;
+    subtitle?: Snippet;
+  };
+
+  const { title, content, compact = false, subtitle }: Props = $props();
+</script>
+
+<div>
+  <Text color="secondary" class={compact ? "text-xs" : ""}>{title}</Text>
+  <Text class={`tabular-nums ${compact ? "text-xl" : "text-2xl"}`}>
+    {content}
+  </Text>
+  {#if subtitle}
+    <Text color="secondary" class="text-xs">
+      {@render subtitle()}
+    </Text>
+  {/if}
+</div>

package/dist/components/ui/VisualisationGauge.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type Props = {
+    title: string;
+    content: string;
+    compact?: boolean;
+    subtitle?: Snippet;
+};
+declare const VisualisationGauge: import("svelte").Component<Props, {}, "">;
+type VisualisationGauge = ReturnType<typeof VisualisationGauge>;
+export default VisualisationGauge;

package/dist/components/ui/VisualisationSegmentedBar.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { Badge, HStack, Stack, Text } from "@immich/ui";
+
+  type Segment = {
+    value: number;
+    label: string;
+    color: string;
+    badge: "success" | "warning" | "danger" | "secondary";
+  };
+
+  type Props = {
+    title: string;
+    summary: string;
+    segments: Segment[];
+  };
+
+  const { title, summary, segments }: Props = $props();
+</script>
+
+<Stack>
+  <HStack class="justify-between">
+    <Text size="large">{title}</Text>
+    <Text color="secondary">{summary}</Text>
+  </HStack>
+
+  <div
+    style="display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px;"
+  >
+    {#each segments as segment (segment.label)}
+      {#if segment.value > 0}
+        <div
+          style="flex: {segment.value}; background: {segment.color}; border-radius: 3px;"
+        ></div>
+      {/if}
+    {/each}
+  </div>
+
+  <HStack wrap>
+    {#each segments as segment (segment.label)}
+      {#if segment.value > 0}
+        <Badge size="tiny" color={segment.badge}>
+          {segment.value}
+          {segment.label}
+        </Badge>
+      {/if}
+    {/each}
+  </HStack>
+</Stack>

package/dist/components/ui/VisualisationSegmentedBar.svelte.d.ts

@@ -0,0 +1,14 @@
+type Segment = {
+    value: number;
+    label: string;
+    color: string;
+    badge: "success" | "warning" | "danger" | "secondary";
+};
+type Props = {
+    title: string;
+    summary: string;
+    segments: Segment[];
+};
+declare const VisualisationSegmentedBar: import("svelte").Component<Props, {}, "">;
+type VisualisationSegmentedBar = ReturnType<typeof VisualisationSegmentedBar>;
+export default VisualisationSegmentedBar;

package/dist/components/util/OnEvents.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { events, SocketEvent, useSocket } from "../../events";
+  import { onDestroy, onMount } from "svelte";
+
+  type Props = {
+    [key: `on${string}`]: (event: SocketEvent<any>) => void;
+  };
+
+  const props: Props = $props();
+  const disconnect = useSocket();
+
+  onMount(() => {
+    for (const key of Object.keys(props)) {
+      events.addEventListener(
+        key.slice(2),
+        props[key as `on${string}`] as (event: Event) => void,
+      );
+    }
+  });
+
+  onDestroy(() => {
+    disconnect();
+
+    for (const key of Object.keys(props)) {
+      events.removeEventListener(
+        key.slice(2),
+        props[key as `on${string}`] as (event: Event) => void,
+      );
+    }
+  });
+</script>

package/dist/components/util/OnEvents.svelte.d.ts

@@ -0,0 +1,7 @@
+import { SocketEvent } from "../../events";
+type Props = {
+    [key: `on${string}`]: (event: SocketEvent<any>) => void;
+};
+declare const OnEvents: import("svelte").Component<Props, {}, "">;
+type OnEvents = ReturnType<typeof OnEvents>;
+export default OnEvents;

package/dist/components/util/RelativeTime.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { DateTime } from "luxon";
+  import { onDestroy, onMount } from "svelte";
+
+  type Props = {
+    time: string;
+  };
+
+  const props: Props = $props();
+
+  const format = () => DateTime.fromISO(props.time).toRelative();
+
+  let text = $state(format());
+
+  let interval: ReturnType<typeof setInterval>;
+
+  onMount(() => (interval = setInterval(() => (text = format()), 1000)));
+  onDestroy(() => clearInterval(interval));
+</script>
+
+{text}

package/dist/components/util/RelativeTime.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    time: string;
+};
+declare const RelativeTime: import("svelte").Component<Props, {}, "">;
+type RelativeTime = ReturnType<typeof RelativeTime>;
+export default RelativeTime;

package/dist/components/util/Suspense.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" generics="T extends object">
+  import { getReadableErrorMessage } from "../../utils/handle-error";
+  import { Alert, LoadingSpinner } from "@immich/ui";
+  import type { CreateQueryResult } from "@tanstack/svelte-query";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    query: CreateQueryResult<T>;
+    children: Snippet<[T]>;
+  };
+
+  const { query, children }: Props = $props();
+</script>
+
+{#if query.isLoading}
+  <LoadingSpinner />
+{:else if query.isError}
+  <Alert color="danger">{getReadableErrorMessage(query.error)}</Alert>
+{:else if query.isSuccess}
+  {@render children(query.data)}
+{/if}

package/dist/components/util/Suspense.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { CreateQueryResult } from "@tanstack/svelte-query";
+import type { Snippet } from "svelte";
+declare function $$render<T extends object>(): {
+    props: {
+        query: CreateQueryResult<T>;
+        children: Snippet<[T]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Suspense: $$IsomorphicComponent;
+type Suspense<T extends object> = InstanceType<typeof Suspense<T>>;
+export default Suspense;

package/dist/components/util/TimedButton.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { Button } from "@immich/ui";
+
+  type Props = {
+    text: string;
+    onclick: () => void;
+  };
+
+  let { text, onclick }: Props = $props();
+
+  let time = $state(5);
+  let interval: number | undefined;
+
+  onMount(() => {
+    interval = setInterval(
+      () => {
+        if (time === 0) {
+          clearInterval(interval);
+          return;
+        }
+
+        time--;
+      },
+      import.meta.env.DEV ? 100 : 1000,
+    ) as never;
+  });
+
+  onDestroy(() => clearInterval(interval));
+</script>
+
+<Button {onclick} disabled={time !== 0}
+  >{text}
+  {#if time !== 0}
+    ({time})
+  {/if}</Button
+>

package/dist/components/util/TimedButton.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    text: string;
+    onclick: () => void;
+};
+declare const TimedButton: import("svelte").Component<Props, {}, "">;
+type TimedButton = ReturnType<typeof TimedButton>;
+export default TimedButton;

package/dist/components/util/YuccaContext.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { TooltipProvider } from "@immich/ui";
+  import { QueryClientProvider } from "@tanstack/svelte-query";
+  import { defaults as orchestrationDefaults } from "../../fetch-client";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    children: Snippet;
+    baseUrl?: string;
+  };
+
+  const { baseUrl, children }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  if (baseUrl) {
+    orchestrationDefaults.baseUrl = baseUrl;
+  }
+
+  import { queryClient } from "../../query-client";
+</script>
+
+<QueryClientProvider client={queryClient}>
+  <TooltipProvider>
+    {@render children()}
+  </TooltipProvider>
+</QueryClientProvider>

package/dist/components/util/YuccaContext.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type Props = {
+    children: Snippet;
+    baseUrl?: string;
+};
+declare const YuccaContext: import("svelte").Component<Props, {}, "">;
+type YuccaContext = ReturnType<typeof YuccaContext>;
+export default YuccaContext;