@futo-org/backups-orchestrator-ui 0.27.0 → 0.30.0

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;

package/dist/components/ui/StackListItem.svelte

@@ -1,43 +1,69 @@
 <script lang="ts">
   import { hasActions } from "../../utils/actions";
-  import { ContextMenuButton, HStack, type ActionItem } from "@immich/ui";
+  import {
+    ContextMenuButton,
+    HStack,
+    Stack,
+    Text,
+    type ActionItem,
+  } from "@immich/ui";
   import { mdiDotsVertical } from "@mdi/js";
   import type { Snippet } from "svelte";
 
+  type Color = "primary" | "success" | "warning" | "danger";
+
   type Props = {
     class?: string;
+    title?: string;
+    color?: Color;
     icon?: Snippet;
     children: Snippet;
     trailing?: Snippet;
+    footer?: Snippet;
+    footerColor?: Color;
     actions?: ActionItem[];
-    disabled?: boolean;
-    onclick?: () => void;
   };
 
   const {
     class: className,
+    title,
+    color = "primary",
     icon,
     children,
     trailing,
+    footer,
+    footerColor = "primary",
     actions = [],
-    disabled = false,
-    onclick,
   }: Props = $props();
+
+  const tints: Record<Color, string> = {
+    primary: "bg-primary-50 text-primary",
+    success: "bg-success-50 text-success-700",
+    warning: "bg-warning-50 text-warning-800",
+    danger: "bg-danger-50 text-danger-700",
+  };
 </script>
 
-{#snippet body()}
-  <HStack gap={4} class={`${className} items-center px-4 py-3`}>
+<div>
+  <HStack gap={4} class={`${className} items-center px-5 py-4`}>
     {#if icon}
       <div
-        class="flex p-2 items-center justify-center rounded-lg bg-subtle text-lg"
+        class={`flex size-10 shrink-0 items-center justify-center rounded-lg text-xl ${tints[color]}`}
       >
-        {@render icon?.()}
+        {@render icon()}
       </div>
     {/if}
 
-    <HStack gap={1} class="flex-1 items-baseline">
-      {@render children()}
-    </HStack>
+    {#if title}
+      <Stack gap={0} class="flex-1 min-w-0">
+        <Text class="truncate">{title}</Text>
+        <Text size="small" color="muted">{@render children()}</Text>
+      </Stack>
+    {:else}
+      <HStack gap={1} class="flex-1 items-baseline">
+        {@render children()}
+      </HStack>
+    {/if}
 
     {@render trailing?.()}
 
@@ -51,17 +77,13 @@
       />
     {/if}
   </HStack>
-{/snippet}
 
-{#if onclick}
-  <button
-    {onclick}
-    {disabled}
-    type="button"
-    class="block w-full text-left rounded-lg hover:bg-subtle focus-visible:outline-2 focus-visible:outline-primary-500 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60"
-  >
-    {@render body()}
-  </button>
-{:else}
-  {@render body()}
-{/if}
+  {#if footer}
+    <HStack
+      gap={2}
+      class={`items-center border-t px-5 py-3 ${tints[footerColor]}`}
+    >
+      {@render footer()}
+    </HStack>
+  {/if}
+</div>

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

@@ -1,13 +1,16 @@
 import { type ActionItem } from "@immich/ui";
 import type { Snippet } from "svelte";
+type Color = "primary" | "success" | "warning" | "danger";
 type Props = {
     class?: string;
+    title?: string;
+    color?: Color;
     icon?: Snippet;
     children: Snippet;
     trailing?: Snippet;
+    footer?: Snippet;
+    footerColor?: Color;
     actions?: ActionItem[];
-    disabled?: boolean;
-    onclick?: () => void;
 };
 declare const StackListItem: import("svelte").Component<Props, {}, "">;
 type StackListItem = ReturnType<typeof StackListItem>;

package/dist/components/ui/StackListOption.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Icon } from "@immich/ui";
+  import { mdiChevronRight } from "@mdi/js";
+  import type { Snippet } from "svelte";
+  import StackListItem from "./StackListItem.svelte";
+
+  type Props = {
+    title: string;
+    icon?: Snippet;
+    children: Snippet;
+    disabled?: boolean;
+    onclick: () => void;
+  };
+
+  const { title, icon, children, disabled = false, onclick }: Props = $props();
+</script>
+
+<button
+  type="button"
+  {disabled}
+  {onclick}
+  class="block w-full cursor-pointer text-left hover:bg-subtle focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-500 disabled:cursor-not-allowed disabled:opacity-60"
+>
+  <StackListItem {title} {icon}>
+    {@render children()}
+
+    {#snippet trailing()}
+      {#if !disabled}
+        <Icon icon={mdiChevronRight} />
+      {/if}
+    {/snippet}
+  </StackListItem>
+</button>

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

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

package/dist/components/ui/StackListPlaceholder.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Text } from "@immich/ui";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    children: Snippet;
+  };
+
+  const { children }: Props = $props();
+</script>
+
+<Text class="block text-center py-8" color="muted">{@render children()}</Text>

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

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

package/dist/components/ui/StepNumber.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  type Props = {
+    step: number;
+    size?: "small" | "medium";
+  };
+
+  const { step, size = "medium" }: Props = $props();
+
+  const sizes = {
+    small: "size-5 text-xs",
+    medium: "size-8 text-lg",
+  };
+</script>
+
+<span
+  class={`bg-primary text-light flex shrink-0 items-center justify-center rounded-full tabular-nums ${sizes[size]}`}
+  aria-hidden="true"
+>
+  {step}
+</span>

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

@@ -0,0 +1,7 @@
+type Props = {
+    step: number;
+    size?: "small" | "medium";
+};
+declare const StepNumber: import("svelte").Component<Props, {}, "">;
+type StepNumber = ReturnType<typeof StepNumber>;
+export default StepNumber;

package/dist/components/util/Suspense.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T extends object">
   import { getReadableErrorMessage } from "../../utils/handle-error";
-  import { Alert, LoadingSpinner } from "@immich/ui";
+  import { Alert, HStack, LoadingSpinner } from "@immich/ui";
   import type { CreateQueryResult } from "@tanstack/svelte-query";
   import type { Snippet } from "svelte";
 
@@ -13,9 +13,13 @@
 </script>
 
 {#if query.isLoading}
-  <LoadingSpinner />
+  <HStack class="justify-center p-8">
+    <LoadingSpinner />
+  </HStack>
 {:else if query.isError}
-  <Alert color="danger">{getReadableErrorMessage(query.error)}</Alert>
+  <div class="p-4">
+    <Alert color="danger">{getReadableErrorMessage(query.error)}</Alert>
+  </div>
 {:else if query.isSuccess}
   {@render children(query.data)}
 {/if}

package/dist/components/util/YuccaContext.svelte

@@ -12,7 +12,7 @@
   const { baseUrl, children }: Props = $props();
 
   // svelte-ignore state_referenced_locally
-  if (baseUrl) {
+  if (typeof baseUrl === "string") {
     orchestrationDefaults.baseUrl = baseUrl;
   }
 

package/dist/events.js

@@ -10,7 +10,7 @@ export class SocketEvent extends Event {
     }
 }
 function createSocket() {
-    socket = io(defaults.baseUrl, {
+    socket = io(defaults.baseUrl || undefined, {
         path: '/api/yucca/socket.io',
         transports: ['websocket'],
         autoConnect: false,

package/dist/fetch-client.d.ts

@@ -81,6 +81,7 @@ export type ConfigureImmichIntegrationRequestDto = {
     backupConfiguration: boolean;
     libraries: "all" | string[];
     retentionPolicy?: (RetentionPolicyDto) | null;
+    paused?: boolean;
 };
 export type ImmichRollbackRequestDto = {
     repositoryId: string;
@@ -185,6 +186,7 @@ export type RepositoryInspectResponseDto = {
 };
 export type RepositoryUpdateRequestDto = {
     name?: string;
+    worm?: boolean;
     paths?: string[];
     retentionPolicy?: (RetentionPolicyDto) | null;
 };

package/dist/index.d.ts

@@ -1,13 +1,18 @@
 export { default as BackendsList } from './components/backends/BackendsList.svelte';
 export { default as BackupsList } from './components/backups/BackupsList.svelte';
-export { default as ViewLogModal } from './components/backups/dialogs/ViewLogModal.svelte';
+export { default as ViewStatusModal } from './components/backups/dialogs/ViewStatusModal.svelte';
 export { default as Dashboard } from './components/dashboard/Dashboard.svelte';
+export { default as ImmichBackupsNavButton } from './components/integrations/immich/ImmichBackupsNavButton.svelte';
 export { default as ImmichBackupsPage } from './components/integrations/immich/ImmichBackupsPage.svelte';
+export { default as ImmichBackupsSidebarItem } from './components/integrations/immich/ImmichBackupsSidebarItem.svelte';
 export { default as ImmichManageBackup } from './components/integrations/immich/ImmichManageBackup.svelte';
 export { default as ImmichOnboardingRestoreFlow } from './components/integrations/immich/ImmichOnboardingRestoreFlow.svelte';
 export { default as ImmichOnboardingSetupFlow } from './components/integrations/immich/ImmichOnboardingSetupFlow.svelte';
 export { default as OnboardingGate } from './components/onboarding/OnboardingGate.svelte';
+export { default as UpsellModal } from './components/onboarding/upsell/UpsellModal.svelte';
+export { default as UpsellPage } from './components/onboarding/upsell/UpsellPage.svelte';
 export { default as ScheduleList } from './components/schedules/ScheduleList.svelte';
+export { default as GlobalSettings } from './components/settings/GlobalSettings.svelte';
 export { default as VisualisationGauge } from './components/ui/VisualisationGauge.svelte';
 export { default as VisualisationSegmentedBar } from './components/ui/VisualisationSegmentedBar.svelte';
 export { default as OnEvents } from './components/util/OnEvents.svelte';

package/dist/index.js

@@ -1,13 +1,18 @@
 export { default as BackendsList } from './components/backends/BackendsList.svelte';
 export { default as BackupsList } from './components/backups/BackupsList.svelte';
-export { default as ViewLogModal } from './components/backups/dialogs/ViewLogModal.svelte';
+export { default as ViewStatusModal } from './components/backups/dialogs/ViewStatusModal.svelte';
 export { default as Dashboard } from './components/dashboard/Dashboard.svelte';
+export { default as ImmichBackupsNavButton } from './components/integrations/immich/ImmichBackupsNavButton.svelte';
 export { default as ImmichBackupsPage } from './components/integrations/immich/ImmichBackupsPage.svelte';
+export { default as ImmichBackupsSidebarItem } from './components/integrations/immich/ImmichBackupsSidebarItem.svelte';
 export { default as ImmichManageBackup } from './components/integrations/immich/ImmichManageBackup.svelte';
 export { default as ImmichOnboardingRestoreFlow } from './components/integrations/immich/ImmichOnboardingRestoreFlow.svelte';
 export { default as ImmichOnboardingSetupFlow } from './components/integrations/immich/ImmichOnboardingSetupFlow.svelte';
 export { default as OnboardingGate } from './components/onboarding/OnboardingGate.svelte';
+export { default as UpsellModal } from './components/onboarding/upsell/UpsellModal.svelte';
+export { default as UpsellPage } from './components/onboarding/upsell/UpsellPage.svelte';
 export { default as ScheduleList } from './components/schedules/ScheduleList.svelte';
+export { default as GlobalSettings } from './components/settings/GlobalSettings.svelte';
 export { default as VisualisationGauge } from './components/ui/VisualisationGauge.svelte';
 export { default as VisualisationSegmentedBar } from './components/ui/VisualisationSegmentedBar.svelte';
 export { default as OnEvents } from './components/util/OnEvents.svelte';

package/dist/services/backend.service.js

@@ -23,8 +23,11 @@ export const useDeviceFlow = (uid) => createQuery(() => ({
         window.open(response.verificationUri, '_blank');
         return response;
     },
+    gcTime: Infinity,
+    retry: 0,
     refetchOnReconnect: false,
     refetchOnWindowFocus: false,
+    refetchOnMount: true,
 }), () => queryClient);
 export const useBackendEventHandler = () => {
     return {

package/dist/services/immich.integration.service.d.ts

@@ -1,5 +1,5 @@
 import { type ActionItem } from '@immich/ui';
-export declare const getBackupPageActions: (repositoryId?: string) => {
+export declare const getBackupPageActions: (repositoryId: string | undefined, onConfigure: () => void) => {
     Configure: ActionItem;
     ViewRecoveryKey: ActionItem;
     BackUpNow: ActionItem;