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

package/dist/components/test/ImmichTestUi.svelte

@@ -11,14 +11,17 @@
     Logo,
     NavbarGroup,
     NavbarItem,
+    Stack,
     ThemeSwitcher,
   } from "@immich/ui";
   import {
     mdiAccountMultipleOutline,
     mdiArchiveArrowDownOutline,
-    mdiBackupRestore,
     mdiBellOutline,
     mdiCastVariant,
+    mdiChartBoxOutline,
+    mdiCogOutline,
+    mdiFormatListBulletedType,
     mdiHeartOutline,
     mdiImageAlbum,
     mdiImageMultipleOutline,
@@ -33,9 +36,20 @@
   } from "@mdi/js";
   import { options } from "../../options";
   import { onDestroy } from "svelte";
-  import ImmichManageBackup from "../integrations/immich/ImmichManageBackup.svelte";
+  import ImmichBackupsNavButton from "../integrations/immich/ImmichBackupsNavButton.svelte";
+  import ImmichBackupsCard from "../integrations/immich/ImmichBackupsCard.svelte";
+  import MockImmichPhotos from "./immich/MockImmichPhotos.svelte";
+  import MockImmichServerStatus from "./immich/MockImmichServerStatus.svelte";
+  import MockImmichPurchaseInfo from "./immich/MockImmichPurchaseInfo.svelte";
+  import MockImmichStorageSpace from "./immich/MockImmichStorageSpace.svelte";
+  import ImmichBackupsPage from "../integrations/immich/ImmichBackupsPage.svelte";
   import ImmichOnboardingRestoreFlow from "../integrations/immich/ImmichOnboardingRestoreFlow.svelte";
-  import ImmichOnboardingSetupFlow from "../integrations/immich/ImmichOnboardingSetupFlow.svelte";
+  import OnEvents from "../util/OnEvents.svelte";
+  import MockImmichHideBackupsReminder from "./immich/MockImmichHideBackupsReminder.svelte";
+  import {
+    useIntegrationEventHandler,
+    useIntegrations,
+  } from "../../services/integrations.service";
 
   type Props = {
     onExit: () => void;
@@ -44,6 +58,28 @@
   const { onExit }: Props = $props();
   const { testUiRestore, demoPadding } = options;
 
+  let route = $state<"photos" | "settings">("photos");
+
+  const integrations = useIntegrations();
+  const { onIntegrationUpdate } = useIntegrationEventHandler();
+  const configured = $derived(Boolean(integrations.data?.immichIntegration));
+  const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString();
+
+  const sampleQuestions = [
+    {
+      title: "Is FUTO Backups the same as an Immich product key?",
+      answer: "Sample answer copy for the FAQ preview.",
+    },
+    {
+      title: "How is FUTO Backups priced?",
+      answer: "Sample answer copy for the FAQ preview.",
+    },
+    {
+      title: "Can I use local storage instead?",
+      answer: "Sample answer copy for the FAQ preview.",
+    },
+  ];
+
   demoPadding.set(true);
   onDestroy(() => demoPadding.set(false));
 
@@ -51,7 +87,13 @@
   setProvider(orchestrationApiProvider);
 </script>
 
-<AppShell>
+<OnEvents {onIntegrationUpdate} />
+
+{#snippet hideReminder()}
+  <MockImmichHideBackupsReminder />
+{/snippet}
+
+<AppShell class="h-full">
   <AppShellHeader>
     <div class="grid grid-cols-[--spacing(64)_auto] items-center w-full py-2">
       <div class="flex flex-row gap-1 mx-4 items-center">
@@ -134,6 +176,17 @@
             aria-label="Cast"
           />
 
+          <IconButton
+            shape="round"
+            color="secondary"
+            variant={route === "settings" ? "filled" : "ghost"}
+            size="medium"
+            icon={mdiCogOutline}
+            onclick={() =>
+              (route = route === "settings" ? "photos" : "settings")}
+            aria-label="Settings"
+          />
+
           <button
             type="button"
             class="flex ps-2"
@@ -147,26 +200,79 @@
     </div>
   </AppShellHeader>
 
-  <AppShellSidebar>
-    <div class="pt-4 pr-2">
-      <NavbarItem href="#" title="Photos" icon={mdiImageMultipleOutline} />
-      <NavbarItem href="#" title="Explore" icon={mdiMagnify} />
-      <NavbarItem href="#" title="Map" icon={mdiMapOutline} />
-      <NavbarItem href="#" title="Sharing" icon={mdiAccountMultipleOutline} />
-
-      <NavbarGroup title="Library" size="tiny" />
-
-      <NavbarItem href="#" title="Favorites" icon={mdiHeartOutline} />
-      <NavbarItem
-        href="#"
-        title="Albums"
-        icon={{ icon: mdiImageAlbum, flipped: true }}
-      />
-      <NavbarItem href="#" title="Backups" icon={mdiBackupRestore} active />
-      <NavbarItem href="#" title="Utilities" icon={mdiToolboxOutline} />
-      <NavbarItem href="#" title="Archive" icon={mdiArchiveArrowDownOutline} />
-      <NavbarItem href="#" title="Locked folder" icon={mdiLockOutline} />
-      <NavbarItem href="#" title="Trash" icon={mdiTrashCanOutline} />
+  <AppShellSidebar class="relative">
+    <div class="flex h-full flex-col pt-4 pr-2">
+      {#if route === "settings"}
+        <ImmichBackupsNavButton
+          {configured}
+          active
+          onclick={() => {}}
+        />
+
+        <NavbarItem
+          href="#"
+          title="Users"
+          icon={mdiAccountMultipleOutline}
+          isActive={() => false}
+        />
+        <NavbarItem
+          href="#"
+          title="Job Queues"
+          icon={mdiFormatListBulletedType}
+          isActive={() => false}
+        />
+        <NavbarItem
+          href="#"
+          title="Server Stats"
+          icon={mdiChartBoxOutline}
+          isActive={() => false}
+        />
+        <NavbarItem
+          href="#"
+          title="Settings"
+          icon={mdiCogOutline}
+          isActive={() => false}
+        />
+      {:else}
+        <NavbarItem
+          href="#"
+          title="Photos"
+          icon={mdiImageMultipleOutline}
+          active
+        />
+        <NavbarItem href="#" title="Explore" icon={mdiMagnify} />
+        <NavbarItem href="#" title="Map" icon={mdiMapOutline} />
+        <NavbarItem href="#" title="Sharing" icon={mdiAccountMultipleOutline} />
+
+        <NavbarGroup title="Library" size="tiny" />
+
+        <NavbarItem href="#" title="Favorites" icon={mdiHeartOutline} />
+        <NavbarItem
+          href="#"
+          title="Albums"
+          icon={{ icon: mdiImageAlbum, flipped: true }}
+        />
+        <NavbarItem href="#" title="Utilities" icon={mdiToolboxOutline} />
+        <NavbarItem href="#" title="Archive" icon={mdiArchiveArrowDownOutline} />
+        <NavbarItem href="#" title="Locked folder" icon={mdiLockOutline} />
+        <NavbarItem href="#" title="Trash" icon={mdiTrashCanOutline} />
+      {/if}
+
+      <Stack gap={4} class="mt-auto p-4">
+        <MockImmichStorageSpace>
+          <ImmichBackupsCard
+            {configured}
+            lastBackup={configured ? twoHoursAgo : undefined}
+            onclick={() => (route = "settings")}
+          />
+        </MockImmichStorageSpace>
+
+        {#if route !== "settings"}
+          <MockImmichPurchaseInfo />
+        {/if}
+
+        <MockImmichServerStatus />
+      </Stack>
     </div>
   </AppShellSidebar>
 
@@ -175,9 +281,19 @@
       {onExit}
       onFinish={() => testUiRestore.set(false)}
     />
+  {:else if route === "settings"}
+    <ImmichBackupsPage
+      price="$1"
+      includedStorage="50 GB"
+      questions={[
+        {
+          title: "Already back up your library elsewhere?",
+          answer: hideReminder,
+        },
+        ...sampleQuestions,
+      ]}
+    />
   {:else}
-    <ImmichOnboardingSetupFlow {onExit}>
-      <ImmichManageBackup />
-    </ImmichOnboardingSetupFlow>
+    <MockImmichPhotos />
   {/if}
 </AppShell>

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/MockImmichHideBackupsReminder.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Field, Switch } from "@immich/ui";
+
+  let hidden = $state(false);
+</script>
+
+<Field
+  label="Hide backups reminder"
+  description="If you already manage backups outside of Immich, you can hide the backup setup reminder."
+>
+  <Switch bind:checked={hidden} />
+</Field>

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

@@ -0,0 +1,3 @@
+declare const MockImmichHideBackupsReminder: import("svelte").Component<Record<string, never>, {}, "">;
+type MockImmichHideBackupsReminder = ReturnType<typeof MockImmichHideBackupsReminder>;
+export default MockImmichHideBackupsReminder;

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/MockImmichServerStatus.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { HStack, Text } from "@immich/ui";
+</script>
+
+<HStack gap={2}>
+  <span class="bg-success size-2 rounded-full"></span>
+  <Text size="small" class="flex-1">Server Online</Text>
+  <Text size="small" color="muted">v3.0.3</Text>
+</HStack>

package/dist/components/test/immich/MockImmichServerStatus.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 MockImmichServerStatus: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MockImmichServerStatus = InstanceType<typeof MockImmichServerStatus>;
+export default MockImmichServerStatus;

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Stack } from "@immich/ui";
+  import type { Snippet } from "svelte";
+  import MockImmichServerStatus from "./MockImmichServerStatus.svelte";
+  import MockImmichStorageSpace from "./MockImmichStorageSpace.svelte";
+
+  type Props = {
+    children: Snippet;
+  };
+
+  const { children }: Props = $props();
+</script>
+
+<Stack gap={4} class="bg-light w-80 shrink-0 rounded-2xl border p-4">
+  <MockImmichStorageSpace>
+    {@render children()}
+  </MockImmichStorageSpace>
+
+  <MockImmichServerStatus />
+</Stack>

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

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

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { ProgressBar, Stack, Text } from "@immich/ui";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    children?: Snippet;
+  };
+
+  const { children }: Props = $props();
+</script>
+
+<div class="bg-subtle overflow-hidden rounded-xl border">
+  <Stack gap={1} class="p-4 border-b">
+    <Text fontWeight="medium">Storage space</Text>
+    <Text size="small" color="muted">22.1 GiB of 100 GiB used</Text>
+    <ProgressBar
+      progress={0.221}
+      shape="round"
+      size="tiny"
+      class="mt-2 border-none"
+    />
+  </Stack>
+
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type Props = {
+    children?: Snippet;
+};
+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;