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

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,27 @@
+<script lang="ts">
+  import Accordion from "../../ui/Accordion.svelte";
+  import { Stack, Text } from "@immich/ui";
+
+  type Question = {
+    title: string;
+    answer: string;
+  };
+
+  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}>
+        <Text size="small" color="muted">{answer}</Text>
+      </Accordion>
+    {/each}
+  </Stack>
+</Stack>

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

@@ -0,0 +1,10 @@
+type Question = {
+    title: string;
+    answer: string;
+};
+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>

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,39 @@
+<script lang="ts">
+  import { Card, CardBody, Container, HStack, Stack } from "@immich/ui";
+  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;
+  };
+
+  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,13 @@
+type Question = {
+    title: string;
+    answer: string;
+};
+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;