@futo-org/backups-orchestrator-ui 0.26.0 → 0.28.0

package/dist/components/test/TestUi.svelte

@@ -19,7 +19,7 @@
     mdiCog,
     mdiViewDashboard,
   } from "@mdi/js";
-  import BackendsList from "../backends/BackendsList.svelte";
+  import GlobalSettings from "../settings/GlobalSettings.svelte";
   import BackupsList from "../backups/BackupsList.svelte";
   import Dashboard from "../dashboard/Dashboard.svelte";
   import ScheduleList from "../schedules/ScheduleList.svelte";
@@ -37,7 +37,7 @@
   let route = $state("dashboard");
 </script>
 
-<AppShell>
+<AppShell class="h-full">
   <AppShellHeader>
     <div class="flex items-center justify-between w-full px-4 py-2">
       <Heading>
@@ -118,12 +118,12 @@
 
   <div class="p-4 flex flex-col gap-2 max-w-6xl m-auto">
     {#if route === "dashboard"}
-      <Dashboard local onNavigate={(target) => (route = target)} />
+      <Dashboard local onViewBackups={() => (route = "backups")} />
     {:else if route === "backups"}
       <BackupsList local />
     {:else if route === "config"}
       {#if !mock}
-        <BackendsList />
+        <GlobalSettings />
       {/if}
     {:else if route === "schedules"}
       {#if !mock}

package/dist/components/test/dashboard/ActiveJobs.svelte

@@ -34,7 +34,7 @@
   import { SvelteMap } from "svelte/reactivity";
   import OnEvents from "../../util/OnEvents.svelte";
   import RelativeTime from "../../util/RelativeTime.svelte";
-  import ViewLogModal from "../../backups/dialogs/ViewLogModal.svelte";
+  import ViewStatusModal from "../../backups/dialogs/ViewStatusModal.svelte";
 
   const LINGER_MS = 3000;
   const FADE_MS = 600;
@@ -171,7 +171,7 @@
   };
 
   const openLog = (logId: string) => {
-    modalManager.open(ViewLogModal, { logId });
+    modalManager.open(ViewStatusModal, { logId });
   };
 
   const onCancel = (parentId: string) => handleCancelTask(parentId);

package/dist/components/test/immich/MockImmichPhotos.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { Stack, Text } from "@immich/ui";
+
+  const groups = [
+    { title: "Friday, 31 July 2026", count: 13 },
+    { title: "Thursday, 30 July 2026", count: 8 },
+    { title: "Sunday, 26 July 2026", count: 17 },
+  ];
+
+  const aspects = [1.5, 0.75, 1.33, 1, 0.7, 1.78, 1.2, 0.8, 1.4, 1];
+  const greys = [88, 82, 91, 78, 85, 93, 80, 87];
+
+  const seedOf = (group: number, index: number) => group * 7 + index * 3;
+  const aspect = (seed: number) => aspects[seed % aspects.length];
+  const grey = (seed: number) => greys[seed % greys.length];
+</script>
+
+<Stack gap={8} class="p-4">
+  {#each groups as group, groupIndex (group.title)}
+    <Stack gap={2}>
+      <Text size="small" fontWeight="medium" color="muted">{group.title}</Text>
+
+      <div class="flex flex-wrap gap-1">
+        {#each Array.from({ length: group.count }, (_, index) => index) as index (index)}
+          {@const seed = seedOf(groupIndex, index)}
+          <div
+            class="h-36 grow rounded-sm"
+            style="background-color: hsl(0 0% {grey(seed)}%); flex-basis: {aspect(
+              seed,
+            ) * 9}rem"
+          ></div>
+        {/each}
+      </div>
+    </Stack>
+  {/each}
+</Stack>

package/dist/components/test/immich/MockImmichPhotos.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MockImmichPhotos: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MockImmichPhotos = InstanceType<typeof MockImmichPhotos>;
+export default MockImmichPhotos;

package/dist/components/test/immich/MockImmichPurchaseInfo.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Icon, Logo } from "@immich/ui";
+  import { mdiInformationOutline } from "@mdi/js";
+</script>
+
+<div class="license-status text-sm">
+  <button
+    type="button"
+    onclick={() => {}}
+    class="flex w-full cursor-pointer place-content-center place-items-center justify-between rounded-lg border border-primary/20 p-2 shadow-md dark:border-primary/10 dark:bg-primary/10"
+  >
+    <div
+      class="flex w-full place-content-center place-items-center justify-between"
+    >
+      <div class="flex place-content-center place-items-center gap-1">
+        <Logo variant="icon" size="tiny" />
+        <p class="flex font-medium text-primary">Buy Immich</p>
+      </div>
+
+      <div>
+        <Icon
+          icon={mdiInformationOutline}
+          class="flex font-medium text-primary"
+          size="18"
+        />
+      </div>
+    </div>
+  </button>
+</div>

package/dist/components/test/immich/MockImmichPurchaseInfo.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MockImmichPurchaseInfo: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MockImmichPurchaseInfo = InstanceType<typeof MockImmichPurchaseInfo>;
+export default MockImmichPurchaseInfo;

package/dist/components/test/immich/MockImmichStorageSpace.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { Icon, Meter, Text } from "@immich/ui";
+  import { mdiChevronRight, mdiCloudCheckOutline } from "@mdi/js";
+
+  type Props = {
+    onBackups: () => void;
+  };
+
+  const { onBackups }: Props = $props();
+</script>
+
+<div class="bg-light-100 overflow-hidden rounded-lg text-sm">
+  <div class="p-4">
+    <Meter
+      size="tiny"
+      class="bg-light-200"
+      containerClass="gap-2 leading-6"
+      label="Storage"
+      valueLabel="22.1 GiB of 100 GiB used"
+      value={0.221}
+    />
+  </div>
+
+  <button
+    type="button"
+    onclick={onBackups}
+    class="bg-success-50 text-success-700 flex w-full cursor-pointer items-center gap-2 px-3 py-3 text-start"
+  >
+    <Icon icon={mdiCloudCheckOutline} size="1em" class="shrink-0" />
+
+    <Text size="small" color="success" class="flex-1 truncate">
+      Backed up 2 hours ago
+    </Text>
+
+    <Icon icon={mdiChevronRight} size="1em" class="shrink-0" />
+  </button>
+</div>

package/dist/components/test/immich/MockImmichStorageSpace.svelte.d.ts

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

package/dist/components/ui/Accordion.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { Icon, Text } from "@immich/ui";
+  import { mdiChevronDown } from "@mdi/js";
+  import type { Snippet } from "svelte";
+  import { slide } from "svelte/transition";
+
+  type Props = {
+    title: string;
+    subtitle?: string;
+    icon?: string;
+    isOpen?: boolean;
+    children?: Snippet;
+  };
+
+  let {
+    title,
+    subtitle,
+    icon,
+    isOpen = $bindable(false),
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class="border-primary/20 mt-4 rounded-2xl border-2 px-6 py-4 transition-all"
+  class:border-primary={isOpen}
+  class:shadow-md={isOpen}
+>
+  <button
+    type="button"
+    aria-expanded={isOpen}
+    onclick={() => (isOpen = !isOpen)}
+    class="flex w-full place-items-center justify-between gap-4 text-start"
+  >
+    <div>
+      <div class="flex place-items-center gap-2">
+        {#if icon}
+          <Icon {icon} class="text-primary" size="1.5rem" aria-hidden="true" />
+        {/if}
+        <Text fontWeight="medium" color="primary">{title}</Text>
+      </div>
+
+      {#if subtitle}
+        <Text size="small" color="muted" class="mt-1">{subtitle}</Text>
+      {/if}
+    </div>
+
+    <div
+      class="hover:bg-primary/10 flex shrink-0 place-content-center place-items-center rounded-full p-3 transition-all"
+    >
+      <Icon
+        icon={mdiChevronDown}
+        size="1.25rem"
+        class="transition-transform duration-200 ease-in {isOpen
+          ? 'rotate-180'
+          : ''}"
+        aria-hidden="true"
+      />
+    </div>
+  </button>
+
+  {#if isOpen}
+    <div transition:slide={{ duration: 150 }} class="mb-2 ms-4">
+      {@render children?.()}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type Props = {
+    title: string;
+    subtitle?: string;
+    icon?: string;
+    isOpen?: boolean;
+    children?: Snippet;
+};
+declare const Accordion: import("svelte").Component<Props, {}, "isOpen">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/ui/ListToolbar.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import {
+    Button,
+    HStack,
+    Input,
+    menuManager,
+    type ActionItem,
+  } from "@immich/ui";
+  import { mdiFilterVariant, mdiMagnify, mdiSortVariant } from "@mdi/js";
+
+  type Menu = {
+    label: string;
+    items: ActionItem[];
+    active?: boolean;
+  };
+
+  type Props = {
+    placeholder: string;
+    search: string;
+    onSearch: (value: string) => void;
+    sort?: Menu;
+    filters?: Menu;
+  };
+
+  const { placeholder, search, onSearch, sort, filters }: Props = $props();
+
+  const openMenu = (items: ActionItem[]) => (event: Event) =>
+    void menuManager.show({
+      target: event.currentTarget as HTMLElement,
+      position: "bottom-left",
+      items,
+    });
+</script>
+
+<HStack class="items-center justify-between">
+  <Input
+    class="max-w-72"
+    leadingIcon={mdiMagnify}
+    {placeholder}
+    value={search}
+    oninput={(event) => onSearch(event.currentTarget.value)}
+  />
+
+  <HStack gap={2}>
+    {#each [{ menu: sort, icon: mdiSortVariant }, { menu: filters, icon: mdiFilterVariant }] as { menu, icon } (icon)}
+      {#if menu}
+        <Button
+          variant="outline"
+          size="small"
+          color={menu.active ? "primary" : "secondary"}
+          class="whitespace-nowrap"
+          leadingIcon={icon}
+          onclick={openMenu(menu.items)}
+        >
+          {menu.label}
+        </Button>
+      {/if}
+    {/each}
+  </HStack>
+</HStack>

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

@@ -0,0 +1,16 @@
+import { type ActionItem } from "@immich/ui";
+type Menu = {
+    label: string;
+    items: ActionItem[];
+    active?: boolean;
+};
+type Props = {
+    placeholder: string;
+    search: string;
+    onSearch: (value: string) => void;
+    sort?: Menu;
+    filters?: Menu;
+};
+declare const ListToolbar: import("svelte").Component<Props, {}, "">;
+type ListToolbar = ReturnType<typeof ListToolbar>;
+export default ListToolbar;

package/dist/components/ui/PageLayout.svelte

@@ -4,26 +4,42 @@
     Button,
     ContextMenuButton,
     HStack,
+    IconButton,
     type ActionItem,
   } from "@immich/ui";
+  import { mdiArrowLeft } from "@mdi/js";
   import type { Snippet } from "svelte";
 
   type Props = {
     title?: string;
     actions?: ActionItem[];
+    onBack?: () => void;
     children?: Snippet;
   };
 
-  const { title, actions = [], children }: Props = $props();
+  const { title, actions = [], onBack, children }: Props = $props();
   const { demoPadding } = options;
+
+  const hasHeader = $derived(Boolean(title) || actions.length > 0 || Boolean(onBack));
 </script>
 
-<main class="absolute inset-0">
-  {#if title || actions.length > 0}
+<main class="flex h-full w-full flex-col">
+  {#if hasHeader}
     <div
-      class="absolute top-0 left-0 flex h-16 w-full place-items-center justify-between border-b p-2 text-dark"
+      class="flex h-16 shrink-0 place-items-center justify-between border-b p-2 text-dark"
     >
       <div class="flex gap-2 items-center">
+        {#if onBack}
+          <IconButton
+            icon={mdiArrowLeft}
+            aria-label="Back"
+            variant="ghost"
+            color="secondary"
+            shape="round"
+            onclick={onBack}
+          />
+        {/if}
+
         {#if title}
           <div class="outline-none pe-8">{title}</div>
         {/if}
@@ -57,11 +73,7 @@
     </div>
   {/if}
 
-  <div
-    class="absolute left-0 w-full overflow-y-auto {title || actions.length > 0
-      ? 'top-16 h-[calc(100%-4rem)]'
-      : 'top-0 h-full'} {$demoPadding ? 'p-4' : ''}"
-  >
+  <div class="min-h-0 grow overflow-y-auto {$demoPadding ? 'p-4' : ''}">
     {@render children?.()}
   </div>
 </main>

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

@@ -3,6 +3,7 @@ import type { Snippet } from "svelte";
 type Props = {
     title?: string;
     actions?: ActionItem[];
+    onBack?: () => void;
     children?: Snippet;
 };
 declare const PageLayout: import("svelte").Component<Props, {}, "">;

package/dist/components/ui/Pagination.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { Button, HStack, IconButton, Text } from "@immich/ui";
+  import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
+
+  type Props = {
+    page: number;
+    pageCount: number;
+    onChange: (page: number) => void;
+  };
+
+  const { page, pageCount, onChange }: Props = $props();
+
+  const boundaryCount = 2;
+  const siblingCount = 0;
+
+  const range = (from: number, to: number) =>
+    Array.from({ length: Math.max(to - from + 1, 0) }, (_, index) => from + index);
+
+  const pages = $derived.by(() => {
+    const shown = new Set([
+      ...range(1, Math.min(boundaryCount, pageCount)),
+      ...range(Math.max(pageCount - boundaryCount + 1, 1), pageCount),
+      ...range(
+        Math.max(page - siblingCount, 1),
+        Math.min(page + siblingCount, pageCount),
+      ),
+    ]);
+
+    const items: (number | "ellipsis")[] = [];
+    for (const candidate of range(1, pageCount)) {
+      if (shown.has(candidate)) {
+        items.push(candidate);
+      } else if (items.at(-1) !== "ellipsis") {
+        items.push("ellipsis");
+      }
+    }
+
+    return items;
+  });
+</script>
+
+<HStack class="items-center justify-between">
+  <IconButton
+    icon={mdiChevronLeft}
+    aria-label="Previous page"
+    variant="ghost"
+    color="secondary"
+    disabled={page <= 1}
+    onclick={() => onChange(page - 1)}
+  />
+
+  <HStack gap={1} class="items-center">
+    {#each pages as item, index (index)}
+      {#if item === "ellipsis"}
+        <Text class="w-8 text-center" color="muted">&hellip;</Text>
+      {:else}
+        <Button
+          size="small"
+          variant="ghost"
+          color="secondary"
+          class={item === page ? "bg-subtle" : undefined}
+          aria-label={`Page ${item}`}
+          aria-current={item === page ? "page" : undefined}
+          onclick={() => onChange(item)}
+        >
+          {item}
+        </Button>
+      {/if}
+    {/each}
+  </HStack>
+
+  <IconButton
+    icon={mdiChevronRight}
+    aria-label="Next page"
+    variant="ghost"
+    color="secondary"
+    disabled={page >= pageCount}
+    onclick={() => onChange(page + 1)}
+  />
+</HStack>

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

@@ -0,0 +1,8 @@
+type Props = {
+    page: number;
+    pageCount: number;
+    onChange: (page: number) => void;
+};
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/ui/PathListField.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import StackList from "./StackList.svelte";
+  import StackListItem from "./StackListItem.svelte";
   import type { FilesystemListingResponseDto } from "../../fetch-client";
   import {
     Button,
-    HStack,
     IconButton,
     modalManager,
     Text,
@@ -58,26 +58,29 @@
 
   {#if paths.size > 0}
     {#each [...paths] as path (path)}
-      <HStack gap={2} class="px-4 py-3">
+      <StackListItem>
         <Text class="grow truncate" title={path}>{path}</Text>
-        <IconButton
-          icon={mdiClose}
-          aria-label="Remove"
-          size="tiny"
-          variant="ghost"
-          onclick={() => paths.delete(path)}
-        />
-      </HStack>
+
+        {#snippet trailing()}
+          <IconButton
+            icon={mdiClose}
+            aria-label="Remove"
+            size="tiny"
+            variant="ghost"
+            onclick={() => paths.delete(path)}
+          />
+        {/snippet}
+      </StackListItem>
     {/each}
   {:else if empty}
-    <HStack class="px-4 py-3">
+    <StackListItem>
       <Text color="secondary">{@render empty()}</Text>
-    </HStack>
+    </StackListItem>
   {/if}
 
-  <HStack class="px-4 py-2">
+  <StackListItem>
     <Button size="small" variant="ghost" onclick={openPicker}>
       {paths.size > 0 ? addLabel : manageLabel}
     </Button>
-  </HStack>
+  </StackListItem>
 </StackList>

package/dist/components/ui/StackList.svelte

@@ -1,30 +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";
+<script lang="ts">
+  import { Card, CardBody, Heading, HStack, Stack } from "@immich/ui";
   import type { Snippet } from "svelte";
 
   type Props = {
     title?: Snippet;
-    query?: CreateQueryResult<T>;
-    children: Snippet<[T]>;
+    action?: Snippet;
+    children?: Snippet;
   };
 
-  const { title, query, children }: Props = $props();
+  const { title, action, children }: Props = $props();
 </script>
 
 <Stack gap={2}>
-  {#if title}
-    <Heading class="px-1" size="tiny">{@render title()}</Heading>
-  {/if}
+  {#if title || action}
+    <HStack class="items-center justify-between px-1">
+      {#if title}
+        <Heading 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>
+      {@render action?.()}
+    </HStack>
   {/if}
+
+  <Card class="border-primary-100 shadow-none">
+    <CardBody class="divide-y p-0">
+      {@render children?.()}
+    </CardBody>
+  </Card>
 </Stack>

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

@@ -1,30 +1,9 @@
-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: {};
+type Props = {
+    title?: Snippet;
+    action?: Snippet;
+    children?: Snippet;
 };
-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>>;
+declare const StackList: import("svelte").Component<Props, {}, "">;
+type StackList = ReturnType<typeof StackList>;
 export default StackList;