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

package/dist/components/onboarding/stages/OnboardingStageBackupServices.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import StackList from "../../ui/StackList.svelte";
-  import StackListItem from "../../ui/StackListItem.svelte";
+  import StackListOption from "../../ui/StackListOption.svelte";
   import {
     handleSetupLocalStorage,
     handleStartYuccaLogin,
@@ -15,7 +15,7 @@
     Stack,
     Text,
   } from "@immich/ui";
-  import { mdiChevronRight, mdiHarddisk, mdiShieldCheck } from "@mdi/js";
+  import { mdiHarddisk, mdiShieldCheck } from "@mdi/js";
 
   type Props = {
     restore?: boolean;
@@ -44,34 +44,20 @@
 >
   <ModalBody>
     <StackList>
-      <StackListItem onclick={onFutoBackups}>
+      <StackListOption title="FUTO Backups" onclick={onFutoBackups}>
         {#snippet icon()}
-          <Icon icon={mdiShieldCheck} size="36px" />
+          <Icon icon={mdiShieldCheck} />
         {/snippet}
 
-        <Stack gap={0}>
-          <Text class="font-bold">FUTO Backups</Text>
-          <Text>Simple, hosted backups.</Text>
-        </Stack>
-
-        {#snippet trailing()}
-          <Icon icon={mdiChevronRight} />
-        {/snippet}
-      </StackListItem>
-      <StackListItem onclick={onLocalBackups}>
+        Simple, hosted backups.
+      </StackListOption>
+      <StackListOption title="Local Storage" onclick={onLocalBackups}>
         {#snippet icon()}
-          <Icon icon={mdiHarddisk} size="36px" />
+          <Icon icon={mdiHarddisk} />
         {/snippet}
 
-        <Stack gap={0}>
-          <Text class="font-bold">Local Storage</Text>
-          <Text>A folder on this computer.</Text>
-        </Stack>
-
-        {#snippet trailing()}
-          <Icon icon={mdiChevronRight} />
-        {/snippet}
-      </StackListItem>
+        A folder on this computer.
+      </StackListOption>
     </StackList>
   </ModalBody>
   <ModalFooter>

package/dist/components/onboarding/steps/OnboardingStep1FinishSetup.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import StepNumber from "../../ui/StepNumber.svelte";
+  import { HStack, Stack, Text } from "@immich/ui";
+  import OnboardingStepLayout, {
+    type OnboardingStepAction,
+  } from "./OnboardingStepLayout.svelte";
+
+  type Props = {
+    onContinue: () => void;
+    onImportKey?: () => void;
+  };
+
+  const { onContinue, onImportKey }: Props = $props();
+
+  const steps = [
+    "Connect FUTO account",
+    "Save your recovery key",
+    "Start your first backup",
+  ];
+
+  const actions: OnboardingStepAction[] = [
+    { label: "Continue", onClick: () => onContinue() },
+    {
+      label: "Import key",
+      onClick: () => onImportKey?.(),
+      $if: () => !!onImportKey,
+    },
+  ];
+</script>
+
+<OnboardingStepLayout
+  title="Finish setting up FUTO Backups"
+  description="Your subscription is active. Finish setup to create your recovery key and start backing up your Immich library."
+  {actions}
+>
+  <Stack gap={3}>
+    {#each steps as step, index (step)}
+      <HStack gap={3} class="items-center">
+        <StepNumber step={index + 1} size="small" />
+        <Text size="small">{step}</Text>
+      </HStack>
+    {/each}
+  </Stack>
+</OnboardingStepLayout>

package/dist/components/onboarding/steps/OnboardingStep1FinishSetup.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    onContinue: () => void;
+    onImportKey?: () => void;
+};
+declare const OnboardingStep1FinishSetup: import("svelte").Component<Props, {}, "">;
+type OnboardingStep1FinishSetup = ReturnType<typeof OnboardingStep1FinishSetup>;
+export default OnboardingStep1FinishSetup;

package/dist/components/onboarding/steps/OnboardingStep2ConnectAccount.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { HStack, Icon, Stack, Text } from "@immich/ui";
+  import { mdiCheckCircle } from "@mdi/js";
+  import OnboardingStepLayout, {
+    type OnboardingStepAction,
+  } from "./OnboardingStepLayout.svelte";
+
+  type Props = {
+    onConnect: () => void;
+    onLocalStorage?: () => void;
+  };
+
+  const { onConnect, onLocalStorage }: Props = $props();
+
+  const outcomes = [
+    "Link this server to your FUTO Backups subscription",
+    "Allow Immich to upload encrypted backups",
+    "Return you here to finish setup",
+  ];
+
+  const actions: OnboardingStepAction[] = [
+    { label: "Connect account", onClick: () => onConnect() },
+    {
+      label: "Use local storage",
+      onClick: () => onLocalStorage?.(),
+      $if: () => !!onLocalStorage,
+    },
+  ];
+</script>
+
+<OnboardingStepLayout
+  title="Connect your FUTO account"
+  description="Connect your FUTO account to this Immich server so FUTO Backups can store your encrypted backups."
+  {actions}
+>
+  <Stack gap={3}>
+    <Text fontWeight="semi-bold" size="small">This will:</Text>
+
+    {#each outcomes as outcome (outcome)}
+      <HStack gap={3} class="items-center">
+        <Icon
+          icon={mdiCheckCircle}
+          size="1.25rem"
+          class="text-primary shrink-0"
+        />
+        <Text size="small">{outcome}</Text>
+      </HStack>
+    {/each}
+  </Stack>
+</OnboardingStepLayout>

package/dist/components/onboarding/steps/OnboardingStep2ConnectAccount.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    onConnect: () => void;
+    onLocalStorage?: () => void;
+};
+declare const OnboardingStep2ConnectAccount: import("svelte").Component<Props, {}, "">;
+type OnboardingStep2ConnectAccount = ReturnType<typeof OnboardingStep2ConnectAccount>;
+export default OnboardingStep2ConnectAccount;

package/dist/components/onboarding/steps/OnboardingStep3SaveRecoveryKey.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import RecoveryKeyDisplay from "../RecoveryKeyDisplay.svelte";
+  import { Checkbox, HStack, Stack, Text } from "@immich/ui";
+  import OnboardingStepLayout, {
+    type OnboardingStepAction,
+  } from "./OnboardingStepLayout.svelte";
+
+  type Props = {
+    code: string;
+    onContinue: () => void;
+    loading?: boolean;
+  };
+
+  const { code, onContinue, loading = false }: Props = $props();
+
+  let saved = $state(false);
+
+  const actions = $derived<OnboardingStepAction[]>([
+    {
+      label: "Continue",
+      onClick: onContinue,
+      disabled: !saved,
+      loading,
+    },
+  ]);
+</script>
+
+<OnboardingStepLayout
+  title="Save your recovery key"
+  description="You'll need this key to restore your encrypted backups. Save it somewhere safe before continuing. FUTO cannot recover this key if it is lost."
+  {actions}
+>
+  <Stack gap={4}>
+    <RecoveryKeyDisplay {code} />
+
+    <HStack gap={3} class="items-center">
+      <Checkbox bind:checked={saved} id="recovery-key-saved" />
+      <Text size="small">
+        <label for="recovery-key-saved">
+          I saved my recovery key somewhere safe.
+        </label>
+      </Text>
+    </HStack>
+  </Stack>
+</OnboardingStepLayout>

package/dist/components/onboarding/steps/OnboardingStep3SaveRecoveryKey.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    code: string;
+    onContinue: () => void;
+    loading?: boolean;
+};
+declare const OnboardingStep3SaveRecoveryKey: import("svelte").Component<Props, {}, "">;
+type OnboardingStep3SaveRecoveryKey = ReturnType<typeof OnboardingStep3SaveRecoveryKey>;
+export default OnboardingStep3SaveRecoveryKey;

package/dist/components/onboarding/steps/OnboardingStep4FirstBackup.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { HStack, Icon, Stack, Text } from "@immich/ui";
+  import { mdiClock, mdiDownloadBox, mdiImageMultiple } from "@mdi/js";
+  import OnboardingStepLayout, {
+    type OnboardingStepAction,
+  } from "./OnboardingStepLayout.svelte";
+
+  type Props = {
+    schedule: string;
+    storageLocation: string;
+    onStartBackup: () => void;
+    loading?: boolean;
+  };
+
+  const {
+    schedule,
+    storageLocation,
+    onStartBackup,
+    loading = false,
+  }: Props = $props();
+
+  const settings = $derived([
+    {
+      icon: mdiImageMultiple,
+      title: "Backup contents",
+      value:
+        "Photos, videos, metadata, database, configuration, and external libraries.",
+    },
+    {
+      icon: mdiClock,
+      title: "Schedule",
+      value: schedule,
+    },
+    {
+      icon: mdiDownloadBox,
+      title: "Storage location",
+      value: storageLocation,
+    },
+  ]);
+
+  const actions = $derived<OnboardingStepAction[]>([
+    { label: "Start backup", onClick: onStartBackup, loading },
+  ]);
+</script>
+
+<OnboardingStepLayout
+  title="Start your first backup"
+  description="Immich has prepared recommended settings for your first backup. You can update these anytime from the Backups dashboard."
+  {actions}
+>
+  <Stack gap={4}>
+    {#each settings as setting (setting.title)}
+      <HStack gap={4}>
+        <Icon
+          icon={setting.icon}
+          size="2.4rem"
+          class="text-primary mt-1 shrink-0"
+        />
+
+        <Stack>
+          <Text fontWeight="semi-bold" size="small">{setting.title}</Text>
+          <Text size="small" color="muted">{setting.value}</Text>
+        </Stack>
+      </HStack>
+    {/each}
+  </Stack>
+</OnboardingStepLayout>

package/dist/components/onboarding/steps/OnboardingStep4FirstBackup.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    schedule: string;
+    storageLocation: string;
+    onStartBackup: () => void;
+    loading?: boolean;
+};
+declare const OnboardingStep4FirstBackup: import("svelte").Component<Props, {}, "">;
+type OnboardingStep4FirstBackup = ReturnType<typeof OnboardingStep4FirstBackup>;
+export default OnboardingStep4FirstBackup;

package/dist/components/onboarding/steps/OnboardingStepLayout.svelte

@@ -0,0 +1,58 @@
+<script module lang="ts">
+  import type { ButtonProps, IfLike } from "@immich/ui";
+
+  export type OnboardingStepAction = {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    variant?: ButtonProps["variant"];
+    color?: ButtonProps["color"];
+  } & IfLike;
+</script>
+
+<script lang="ts">
+  import { Button, Heading, HStack, isEnabled, Stack, Text } from "@immich/ui";
+  import type { Snippet } from "svelte";
+  import UpsellFutoBackupsBadge from "../upsell/UpsellFutoBackupsBadge.svelte";
+
+  type Props = {
+    title: string;
+    description: string;
+    actions: OnboardingStepAction[];
+    children?: Snippet;
+  };
+
+  const { title, description, actions, children }: Props = $props();
+
+  const enabledActions = $derived(actions.filter(isEnabled));
+  const busy = $derived(enabledActions.some((action) => action.loading));
+</script>
+
+<Stack gap={5} class="py-2">
+  <UpsellFutoBackupsBadge />
+
+  <Stack gap={2}>
+    <Heading size="medium" color="primary" fontWeight="bold">{title}</Heading>
+    <Text>{description}</Text>
+  </Stack>
+
+  {#if children}
+    {@render children()}
+  {/if}
+
+  <HStack gap={2}>
+    {#each enabledActions as action, index (action.label)}
+      <Button
+        shape="round"
+        variant={action.variant ?? (index === 0 ? "filled" : "ghost")}
+        color={action.color ?? (index === 0 ? "primary" : "secondary")}
+        disabled={action.disabled || (busy && !action.loading)}
+        loading={action.loading}
+        onclick={action.onClick}
+      >
+        {action.label}
+      </Button>
+    {/each}
+  </HStack>
+</Stack>

package/dist/components/onboarding/steps/OnboardingStepLayout.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ButtonProps, IfLike } from "@immich/ui";
+export type OnboardingStepAction = {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    variant?: ButtonProps["variant"];
+    color?: ButtonProps["color"];
+} & IfLike;
+import type { Snippet } from "svelte";
+type Props = {
+    title: string;
+    description: string;
+    actions: OnboardingStepAction[];
+    children?: Snippet;
+};
+declare const OnboardingStepLayout: import("svelte").Component<Props, {}, "">;
+type OnboardingStepLayout = ReturnType<typeof OnboardingStepLayout>;
+export default OnboardingStepLayout;

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { HStack, Icon, Stack, Text } from "@immich/ui";
+  import {
+    mdiHistory,
+    mdiImageRefreshOutline,
+    mdiLayersTripleOutline,
+    mdiShieldKey,
+  } from "@mdi/js";
+
+  const features = [
+    {
+      icon: mdiLayersTripleOutline,
+      title: "Built for Immich",
+      description:
+        "Backup your photos, videos, albums, metadata, database, configuration, and external libraries together.",
+    },
+    {
+      icon: mdiShieldKey,
+      title: "Encrypted by design",
+      description:
+        "Your backups are protected with E2EE encryption, so only your recovery key can restore them.",
+    },
+    {
+      icon: mdiImageRefreshOutline,
+      title: "Snapshot restore",
+      description:
+        "Restore your photos, videos, metadata, database, and configuration from a backup snapshot.",
+    },
+    {
+      icon: mdiHistory,
+      title: "Automatic backups",
+      description:
+        "Your library is backed up in the background without managing a separate backup tool.",
+    },
+  ];
+</script>
+
+<div class="grid gap-x-12 gap-y-8 sm:grid-cols-2">
+  {#each features as feature (feature.title)}
+    <HStack gap={4} class="items-start">
+      <Icon
+        icon={feature.icon}
+        size="3rem"
+        class="text-primary mt-1 shrink-0"
+      />
+      <Stack gap={1}>
+        <Text fontWeight="semi-bold">{feature.title}</Text>
+        <Text size="small" color="muted">{feature.description}</Text>
+      </Stack>
+    </HStack>
+  {/each}
+</div>

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

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Button, Heading, Icon, Stack, Text } from "@immich/ui";
+  import { mdiCloudUpload } from "@mdi/js";
+
+  type Props = {
+    price: string;
+    includedStorage: string;
+    onGetStarted: () => void;
+  };
+
+  const { price, includedStorage, onGetStarted }: Props = $props();
+</script>
+
+<Stack gap={6}>
+  <Icon icon={mdiCloudUpload} size="5rem" class="text-primary" />
+
+  <Heading size="large" fontWeight="normal">FUTO Backups</Heading>
+
+  <Text>
+    Keep your Immich library safe with our secure, hosted backups solution.
+  </Text>
+
+  <Stack gap={0}>
+    <Text size="small" color="muted">Starting at {price}/month</Text>
+    <Text size="small" color="muted">
+      Includes {includedStorage} of backup storage. Additional storage billed by usage.
+    </Text>
+  </Stack>
+
+  <Button size="giant" shape="round" class="self-start" onclick={onGetStarted}>
+    Get Started
+  </Button>
+</Stack>

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

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

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import Accordion from "../../ui/Accordion.svelte";
+  import { Stack, Text } from "@immich/ui";
+  import type { Snippet } from "svelte";
+
+  type Question = {
+    title: string;
+    answer: string | Snippet;
+  };
+
+  type Props = {
+    questions: Question[];
+  };
+
+  const { questions }: Props = $props();
+</script>
+
+<Stack>
+  <Text fontWeight="semi-bold">Frequently Asked Questions</Text>
+
+  <Stack gap={0}>
+    {#each questions as { title, answer } (title)}
+      <Accordion {title}>
+        {#if typeof answer === "string"}
+          <Text size="small" color="muted">{answer}</Text>
+        {:else}
+          {@render answer()}
+        {/if}
+      </Accordion>
+    {/each}
+  </Stack>
+</Stack>

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

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

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Badge } from "@immich/ui";
+</script>
+
+<Badge color="primary" shape="round" size="tiny" class="self-start">
+  FUTO Backups
+</Badge>

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

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import StepNumber from "../../ui/StepNumber.svelte";
+  import { Card, CardBody, HStack, Stack, Text } from "@immich/ui";
+
+  const steps = [
+    {
+      title: "Connect your FUTO account",
+      description: "Securely connect FUTO Backups to Immich.",
+    },
+    {
+      title: "Save your recovery key",
+      description:
+        "Your backup is encrypted and requires your recovery key to restore.",
+    },
+    {
+      title: "Start backup",
+      description: "Use recommended settings or customise later.",
+    },
+  ];
+
+  type Props = {
+    color?: "primary" | "secondary";
+  };
+
+  const { color = "primary" }: Props = $props();
+</script>
+
+<Card class="shadow-none border-none max-w-96" {color}>
+  <CardBody class="p-8">
+    <Stack gap={6}>
+      <Text size="large" fontWeight="semi-bold">How it works</Text>
+
+      <Stack gap={4}>
+        {#each steps as step, index (step.title)}
+          <HStack gap={3} class="items-center">
+            <StepNumber step={index + 1} />
+            <Stack gap={0}>
+              <Text fontWeight="semi-bold">{step.title}</Text>
+              <Text color="muted">{step.description}</Text>
+            </Stack>
+          </HStack>
+        {/each}
+      </Stack>
+    </Stack>
+  </CardBody>
+</Card>

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

@@ -0,0 +1,6 @@
+type Props = {
+    color?: "primary" | "secondary";
+};
+declare const UpsellHowItWorks: import("svelte").Component<Props, {}, "">;
+type UpsellHowItWorks = ReturnType<typeof UpsellHowItWorks>;
+export default UpsellHowItWorks;

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import {
+    CloseButton,
+    HStack,
+    Modal,
+    ModalBody,
+    ModalHeader,
+  } from "@immich/ui";
+  import UpsellHowItWorks from "./UpsellHowItWorks.svelte";
+  import UpsellProtectYourImmichLibrary from "./UpsellProtectYourImmichLibrary.svelte";
+
+  type Props = {
+    price: string;
+    onGetStarted: () => void;
+    onLearnMore: () => void;
+    onClose: () => void;
+  };
+
+  const { price, onGetStarted, onLearnMore, onClose }: Props = $props();
+</script>
+
+<Modal
+  size="giant"
+  {onClose}
+  icon={false}
+  // this is a bit of a hack to remove the frames from base modal...
+  // twin code is in ViewStatusModal
+  class="[&>div>div:first-child]:border-b-0 [&>div>div:first-child]:pb-0"
+>
+  <ModalHeader>
+    <HStack fullWidth class="justify-end">
+      <CloseButton onclick={onClose} />
+    </HStack>
+  </ModalHeader>
+
+  <ModalBody>
+    <HStack gap={4} class="p-4">
+      <UpsellProtectYourImmichLibrary {price} {onGetStarted} {onLearnMore} />
+
+      <UpsellHowItWorks />
+    </HStack>
+  </ModalBody>
+</Modal>