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

package/dist/components/schedules/RepositoryPicker.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { useRepositories } from "../../services/repository.service";
-  import { HStack, IconButton, Stack, Text } from "@immich/ui";
+  import { IconButton, Stack, Text } from "@immich/ui";
   import { mdiArrowDown, mdiArrowUp, mdiClose, mdiPlus } from "@mdi/js";
   import StackList from "../ui/StackList.svelte";
+  import StackListItem from "../ui/StackListItem.svelte";
 
   type Props = {
     repositories: string[];
@@ -46,41 +47,44 @@
     {#snippet title()}Repositories{/snippet}
 
     {#each repositories as id, index (id)}
-      <HStack gap={2} class="px-4 py-3">
+      <StackListItem>
         <Text class="grow truncate" size="small">{nameById[id] ?? id}</Text>
-        <IconButton
-          icon={mdiArrowUp}
-          size="tiny"
-          variant="ghost"
-          aria-label="Move up"
-          disabled={index === 0}
-          onclick={() => move(index, -1)}
-        />
-        <IconButton
-          icon={mdiArrowDown}
-          size="tiny"
-          variant="ghost"
-          aria-label="Move down"
-          disabled={index === repositories.length - 1}
-          onclick={() => move(index, 1)}
-        />
-        <IconButton
-          icon={mdiClose}
-          size="tiny"
-          color="danger"
-          variant="ghost"
-          aria-label="Remove"
-          onclick={() => remove(id)}
-        />
-      </HStack>
+
+        {#snippet trailing()}
+          <IconButton
+            icon={mdiArrowUp}
+            size="tiny"
+            variant="ghost"
+            aria-label="Move up"
+            disabled={index === 0}
+            onclick={() => move(index, -1)}
+          />
+          <IconButton
+            icon={mdiArrowDown}
+            size="tiny"
+            variant="ghost"
+            aria-label="Move down"
+            disabled={index === repositories.length - 1}
+            onclick={() => move(index, 1)}
+          />
+          <IconButton
+            icon={mdiClose}
+            size="tiny"
+            color="danger"
+            variant="ghost"
+            aria-label="Remove"
+            onclick={() => remove(id)}
+          />
+        {/snippet}
+      </StackListItem>
     {/each}
 
     {#if repositories.length === 0}
-      <HStack class="px-4 py-3">
+      <StackListItem>
         <Text color="secondary" size="small">
           No repositories in this schedule yet.
         </Text>
-      </HStack>
+      </StackListItem>
     {/if}
   </StackList>
 
@@ -89,16 +93,19 @@
       {#snippet title()}Available{/snippet}
 
       {#each available as repo (repo.id)}
-        <HStack gap={2} class="px-4 py-3">
+        <StackListItem>
           <Text class="grow truncate" size="small">{repo.name}</Text>
-          <IconButton
-            icon={mdiPlus}
-            size="tiny"
-            variant="ghost"
-            aria-label="Add"
-            onclick={() => add(repo.id)}
-          />
-        </HStack>
+
+          {#snippet trailing()}
+            <IconButton
+              icon={mdiPlus}
+              size="tiny"
+              variant="ghost"
+              aria-label="Add"
+              onclick={() => add(repo.id)}
+            />
+          {/snippet}
+        </StackListItem>
       {/each}
     </StackList>
   {/if}

package/dist/components/schedules/ScheduleItem.svelte

@@ -3,7 +3,8 @@
   import RelativeTime from "../util/RelativeTime.svelte";
   import type { ScheduleDto } from "../../fetch-client";
   import { getScheduleActions } from "../../services/schedule.service";
-  import { Badge, HStack, Stack, Text } from "@immich/ui";
+  import { Badge, Icon } from "@immich/ui";
+  import { mdiClockOutline } from "@mdi/js";
 
   type Props = {
     schedule: ScheduleDto;
@@ -17,31 +18,36 @@
   );
 </script>
 
-<StackListItem actions={[Resume, Pause, Configure, Delete]}>
-  <Stack gap={0} class="min-w-0">
-    <HStack gap={1} class="items-baseline">
-      <Text>{schedule.name}</Text>
-      <Badge size="tiny" color="info">{schedule.cron}</Badge>
-      {#if schedule.paused}
-        <Badge size="tiny" color="warning">Paused</Badge>
-      {/if}
-      {#if schedule.lastRun}
-        <Badge size="tiny" color="success">
-          Ran <RelativeTime time={schedule.lastRun} />
-        </Badge>
-      {:else}
-        <Badge size="tiny" color="secondary">Never run</Badge>
-      {/if}
-    </HStack>
-
-    {#if schedule.repositories.length > 0}
-      <Text size="small" color="secondary">
-        {schedule.repositories
-          .map((repositoryId) => repositoryNames[repositoryId] ?? repositoryId)
-          .join(", ")}
-      </Text>
+<StackListItem
+  title={schedule.name}
+  color={schedule.paused ? "warning" : "primary"}
+  actions={[Resume, Pause, Configure, Delete]}
+>
+  {#snippet icon()}
+    <Icon icon={mdiClockOutline} />
+  {/snippet}
+
+  {#if schedule.repositories.length > 0}
+    {schedule.repositories
+      .map((repositoryId) => repositoryNames[repositoryId] ?? repositoryId)
+      .join(", ")}
+  {:else}
+    No backups in this schedule.
+  {/if}
+
+  {#snippet trailing()}
+    <Badge size="tiny" color="info">{schedule.cron}</Badge>
+
+    {#if schedule.paused}
+      <Badge size="tiny" color="warning">Paused</Badge>
+    {/if}
+
+    {#if schedule.lastRun}
+      <Badge size="tiny" color="success">
+        Ran <RelativeTime time={schedule.lastRun} />
+      </Badge>
     {:else}
-      <Text size="small" color="secondary">No backups in this schedule.</Text>
+      <Badge size="tiny" color="secondary">Never run</Badge>
     {/if}
-  </Stack>
+  {/snippet}
 </StackListItem>

package/dist/components/schedules/ScheduleList.svelte

@@ -4,9 +4,11 @@
     useScheduleEventHandler,
     useSchedules,
   } from "../../services/schedule.service";
-  import { Button, HStack, modalManager, Stack, Text } from "@immich/ui";
+  import { Button, HStack, modalManager, Stack } from "@immich/ui";
   import StackList from "../ui/StackList.svelte";
+  import StackListPlaceholder from "../ui/StackListPlaceholder.svelte";
   import OnEvents from "../util/OnEvents.svelte";
+  import Suspense from "../util/Suspense.svelte";
   import CreateScheduleModal from "./dialogs/CreateScheduleModal.svelte";
   import ScheduleItem from "./ScheduleItem.svelte";
 
@@ -31,16 +33,20 @@
 <OnEvents {onScheduleCreate} {onScheduleUpdate} {onScheduleDelete} />
 
 <Stack gap={2}>
-  <StackList query={schedulesQuery}>
+  <StackList>
     {#snippet title()}Schedules{/snippet}
-    {#snippet children(schedules)}
-      {#each schedules as schedule (schedule.id)}
-        <ScheduleItem {schedule} {repositoryNames} />
-      {/each}
-      {#if schedules.length === 0}
-        <Text class="text-center py-6" color="muted">No schedules yet.</Text>
-      {/if}
-    {/snippet}
+
+    <Suspense query={schedulesQuery}>
+      {#snippet children(schedules)}
+        {#each schedules as schedule (schedule.id)}
+          <ScheduleItem {schedule} {repositoryNames} />
+        {/each}
+
+        {#if schedules.length === 0}
+          <StackListPlaceholder>No schedules yet.</StackListPlaceholder>
+        {/if}
+      {/snippet}
+    </Suspense>
   </StackList>
 
   <HStack>

package/dist/components/settings/GlobalSettings.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Container } from "@immich/ui";
+  import SettingsBackends from "./SettingsBackends.svelte";
+</script>
+
+<Container size="large" center>
+  <SettingsBackends />
+</Container>

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

package/dist/components/settings/SettingsBackends.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import BackendsList from "../backends/BackendsList.svelte";
+  import Accordion from "../ui/Accordion.svelte";
+  import { Stack } from "@immich/ui";
+  import { mdiCloudOutline } from "@mdi/js";
+</script>
+
+<Accordion
+  title="Storage backends"
+  subtitle="Manage the storage services your backups can be sent to."
+  icon={mdiCloudOutline}
+>
+  <Stack gap={4} class="pt-2">
+    <BackendsList actions />
+  </Stack>
+</Accordion>

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

package/dist/components/settings/SettingsBilling.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import Accordion from "../ui/Accordion.svelte";
+  import {
+    Badge,
+    Button,
+    Field,
+    HStack,
+    Input,
+    Label,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { mdiCreditCardOutline } from "@mdi/js";
+
+  type Props = {
+    onManageBilling: () => void;
+  };
+
+  const { onManageBilling }: Props = $props();
+</script>
+
+<Accordion
+  title="Billing"
+  subtitle="Manage your FUTO Backups subscription and billing."
+  icon={mdiCreditCardOutline}
+>
+  <Stack gap={4} class="pt-2">
+    <Accordion
+      title="FUTO Backups"
+      subtitle="Hosted cloud backup storage for your Immich library."
+      isOpen
+    >
+      <Stack gap={4} class="pt-2">
+        <HStack gap={4} class="items-start justify-between">
+          <Stack gap={0}>
+            <Label label="Status" color="primary" />
+            <Text size="small" color="muted">
+              Connection state for your backup storage.
+            </Text>
+          </Stack>
+
+          <Badge color="primary">Active</Badge>
+        </HStack>
+
+        <Field
+          label="Storage Used"
+          description="How much storage your backups are using."
+          color="primary"
+          readOnly
+        >
+          <Input value="100 GiB" />
+        </Field>
+
+        <Field
+          label="Next Billing Date"
+          description="When your next FUTO Backups charge will occur."
+          color="primary"
+          readOnly
+        >
+          <Input value="August 20, 2026" />
+        </Field>
+      </Stack>
+    </Accordion>
+
+    <HStack class="justify-end">
+      <Button shape="round" onclick={onManageBilling}>Manage billing</Button>
+    </HStack>
+  </Stack>
+</Accordion>

package/dist/components/settings/SettingsBilling.svelte.d.ts

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

package/dist/components/settings/SettingsNotifications.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import Accordion from "../ui/Accordion.svelte";
+  import { Button, Field, HStack, Stack, Switch } from "@immich/ui";
+  import { mdiBellOutline } from "@mdi/js";
+
+  const alerts = $state([
+    {
+      label: "Backup failures",
+      description: "Notify me when a backup fails.",
+      checked: true,
+    },
+    {
+      label: "Storage issues",
+      description: "Notify me when backup storage is unavailable or running low.",
+      checked: true,
+    },
+    {
+      label: "Billing issues",
+      description: "Notify me when FUTO Backups billing needs attention.",
+      checked: true,
+    },
+  ]);
+
+  type Props = {
+    onSave: () => void;
+  };
+
+  const { onSave }: Props = $props();
+</script>
+
+<Accordion
+  title="Notifications"
+  subtitle="Manage backup alerts."
+  icon={mdiBellOutline}
+>
+  <Stack gap={4} class="pt-2">
+    {#each alerts as alert (alert.label)}
+      <Field label={alert.label} description={alert.description}>
+        <Switch bind:checked={alert.checked} />
+      </Field>
+    {/each}
+
+    <HStack class="justify-end">
+      <Button shape="round" onclick={onSave}>Save</Button>
+    </HStack>
+  </Stack>
+</Accordion>

package/dist/components/settings/SettingsNotifications.svelte.d.ts

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

package/dist/components/test/ImmichTestUi.svelte

@@ -6,19 +6,24 @@
     AppShellSidebar,
     Avatar,
     Button,
+    HStack,
     IconButton,
     Input,
     Logo,
     NavbarGroup,
     NavbarItem,
+    Stack,
+    Text,
     ThemeSwitcher,
   } from "@immich/ui";
   import {
     mdiAccountMultipleOutline,
     mdiArchiveArrowDownOutline,
-    mdiBackupRestore,
     mdiBellOutline,
     mdiCastVariant,
+    mdiChartBoxOutline,
+    mdiCogOutline,
+    mdiFormatListBulletedType,
     mdiHeartOutline,
     mdiImageAlbum,
     mdiImageMultipleOutline,
@@ -33,9 +38,17 @@
   } 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 MockImmichPhotos from "./immich/MockImmichPhotos.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 {
+    useIntegrationEventHandler,
+    useIntegrations,
+  } from "../../services/integrations.service";
 
   type Props = {
     onExit: () => void;
@@ -44,6 +57,27 @@
   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 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 +85,9 @@
   setProvider(orchestrationApiProvider);
 </script>
 
-<AppShell>
+<OnEvents {onIntegrationUpdate} />
+
+<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 +170,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 +194,77 @@
     </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 onBackups={() => (route = "settings")} />
+
+        {#if route !== "settings"}
+          <MockImmichPurchaseInfo />
+        {/if}
+
+        <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>
+      </Stack>
     </div>
   </AppShellSidebar>
 
@@ -175,9 +273,13 @@
       {onExit}
       onFinish={() => testUiRestore.set(false)}
     />
+  {:else if route === "settings"}
+    <ImmichBackupsPage
+      price="$1"
+      includedStorage="50 GB"
+      questions={sampleQuestions}
+    />
   {:else}
-    <ImmichOnboardingSetupFlow {onExit}>
-      <ImmichManageBackup />
-    </ImmichOnboardingSetupFlow>
+    <MockImmichPhotos />
   {/if}
 </AppShell>