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

package/dist/components/onboarding/upsell/UpsellModal.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    price: string;
+    onGetStarted: () => void;
+    onLearnMore: () => void;
+    onClose: () => void;
+};
+declare const UpsellModal: import("svelte").Component<Props, {}, "">;
+type UpsellModal = ReturnType<typeof UpsellModal>;
+export default UpsellModal;

package/dist/components/onboarding/upsell/UpsellPage.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { Card, CardBody, Container, HStack, Stack } from "@immich/ui";
+  import type { Snippet } from "svelte";
+  import UpsellBackupFeaturesGrid from "./UpsellBackupFeaturesGrid.svelte";
+  import UpsellExplainFutoBackups from "./UpsellExplainFutoBackups.svelte";
+  import UpsellFrequentlyAskedQuestions from "./UpsellFrequentlyAskedQuestions.svelte";
+  import UpsellHowItWorks from "./UpsellHowItWorks.svelte";
+
+  type Question = {
+    title: string;
+    answer: string | Snippet;
+  };
+
+  type Props = {
+    price: string;
+    includedStorage: string;
+    questions: Question[];
+    onGetStarted: () => void;
+  };
+
+  const { price, includedStorage, questions, onGetStarted }: Props = $props();
+</script>
+
+<Container size="large" center>
+  <Stack gap={8} class="py-4">
+    <Card color="primary" class="shadow-none">
+      <CardBody class="p-8">
+        <HStack gap={8} class="justify-between">
+          <UpsellExplainFutoBackups {price} {includedStorage} {onGetStarted} />
+
+          <UpsellHowItWorks color="secondary" />
+        </HStack>
+      </CardBody>
+    </Card>
+
+    <UpsellBackupFeaturesGrid />
+
+    <UpsellFrequentlyAskedQuestions {questions} />
+  </Stack>
+</Container>

package/dist/components/onboarding/upsell/UpsellPage.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+type Question = {
+    title: string;
+    answer: string | Snippet;
+};
+type Props = {
+    price: string;
+    includedStorage: string;
+    questions: Question[];
+    onGetStarted: () => void;
+};
+declare const UpsellPage: import("svelte").Component<Props, {}, "">;
+type UpsellPage = ReturnType<typeof UpsellPage>;
+export default UpsellPage;

package/dist/components/onboarding/upsell/UpsellProtectYourImmichLibrary.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { Button, Heading, HStack, Icon, Stack, Text } from "@immich/ui";
+  import { mdiCheckCircle } from "@mdi/js";
+  import UpsellFutoBackupsBadge from "./UpsellFutoBackupsBadge.svelte";
+
+  type Props = {
+    price: string;
+    onGetStarted: () => void;
+    onLearnMore: () => void;
+  };
+
+  const { price, onGetStarted, onLearnMore }: Props = $props();
+
+  const benefits = [
+    "Cloud copy while your originals stay local",
+    "Encrypted backups protect your data",
+    "Restore if your local storage fails",
+  ];
+</script>
+
+<Stack gap={6}>
+  <UpsellFutoBackupsBadge />
+
+  <Stack gap={4}>
+    <Heading size="medium" color="primary" fontWeight="bold"
+      >Protect your Immich library</Heading
+    >
+
+    <Text>
+      FUTO Backups adds hosted cloud backup storage to your existing Immich
+      setup, so you have another copy if something happens locally.
+    </Text>
+  </Stack>
+
+  <Stack gap={2}>
+    {#each benefits as benefit (benefit)}
+      <HStack gap={3} class="items-center">
+        <Icon
+          icon={mdiCheckCircle}
+          size="1.4em"
+          class="text-primary shrink-0"
+        />
+        <Text>{benefit}</Text>
+      </HStack>
+    {/each}
+  </Stack>
+
+  <Text fontWeight="semi-bold">
+    Starting at {price}/month. Additional storage billed by usage.
+  </Text>
+
+  <HStack gap={6} class="items-center">
+    <Button shape="round" onclick={onGetStarted}>Get Started</Button>
+    <Button variant="ghost" shape="round" onclick={onLearnMore}>
+      Learn More
+    </Button>
+  </HStack>
+</Stack>

package/dist/components/onboarding/upsell/UpsellProtectYourImmichLibrary.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    price: string;
+    onGetStarted: () => void;
+    onLearnMore: () => void;
+};
+declare const UpsellProtectYourImmichLibrary: import("svelte").Component<Props, {}, "">;
+type UpsellProtectYourImmichLibrary = ReturnType<typeof UpsellProtectYourImmichLibrary>;
+export default UpsellProtectYourImmichLibrary;

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;