@futo-org/backups-orchestrator-ui 0.1.72 → 0.4.0

package/dist/components/integrations/immich/ImmichOnboardingRestoreFlow.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import OnboardingBootstrapError from "../../onboarding/OnboardingBootstrapError.svelte";
   import OnboardingStageBackupServices from "../../onboarding/stages/OnboardingStageBackupServices.svelte";
   import OnboardingStageKeyImport from "../../onboarding/stages/OnboardingStageKeyImport.svelte";
+  import OnboardingStageTelemetry from "../../onboarding/stages/OnboardingStageTelemetry.svelte";
   import RestorePointFlow from "../../onboarding/restore-point-flow/RestorePointFlow.svelte";
   import type { OnboardingStatusResponseDto } from "../../../fetch-client";
   import {
@@ -19,6 +21,7 @@
 
   let status: OnboardingStatusResponseDto | undefined = $state();
   let stage:
+    | "telemetry"
     | "key-import"
     | "backup-service"
     | "restore-point"
@@ -28,48 +31,55 @@
     handleOnboardingStatus().then((data) => {
       status = data;
 
-      if (data.hasOnboardedKey) {
-        if (data.hasBackend) {
-          stage = "restore-point";
-        } else {
-          stage = "backup-service";
-        }
+      if (data.status !== "ready") {
+        return;
+      }
+
+      if (data.hasTelemetry === "none") {
+        stage = "telemetry";
+      } else if (data.hasOnboardedKey) {
+        stage = data.hasBackend ? "restore-point" : "backup-service";
       }
     });
   });
 
   const onKeyImported = async () => {
     await handleConfirmRecoveryKey();
-
-    if (status?.hasBackend) {
-      stage = "restore-point";
-    } else {
-      stage = "backup-service";
-    }
+    stage = status?.hasBackend ? "restore-point" : "backup-service";
   };
 </script>
 
-{#if typeof status === "object"}
-  {#if stage === "key-import"}
-    <OnboardingStageKeyImport onImported={onKeyImported} onCancel={onExit} />
-  {:else if stage === "backup-service"}
-    <OnboardingStageBackupServices
-      onNext={() => (stage = "restore-point")}
-      onCancel={onExit}
-      restore
-    />
-  {:else if stage === "key-reimport"}
-    <OnboardingStageKeyImport
-      onImported={() => (stage = "restore-point")}
-      onCancel={() => (stage = "restore-point")}
-    />
-  {:else if stage === "restore-point"}
-    <RestorePointFlow
-      onImportKey={() => (stage = "key-reimport")}
-      onCancel={onExit}
-      {onFinish}
-    />
-  {/if}
-{:else}
+{#if status === undefined || status.status === "not-ready"}
   <LoadingSpinner />
+{:else if status.status === "error"}
+  <OnboardingBootstrapError error={status.error} onQuit={onExit} />
+{:else if stage === "telemetry"}
+  <OnboardingStageTelemetry
+    onContinue={() =>
+      (stage = status?.hasOnboardedKey
+        ? status.hasBackend
+          ? "restore-point"
+          : "backup-service"
+        : "key-import")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-import"}
+  <OnboardingStageKeyImport onImported={onKeyImported} onCancel={onExit} />
+{:else if stage === "backup-service"}
+  <OnboardingStageBackupServices
+    onNext={() => (stage = "restore-point")}
+    onCancel={onExit}
+    restore
+  />
+{:else if stage === "key-reimport"}
+  <OnboardingStageKeyImport
+    onImported={() => (stage = "restore-point")}
+    onCancel={() => (stage = "restore-point")}
+  />
+{:else if stage === "restore-point"}
+  <RestorePointFlow
+    onImportKey={() => (stage = "key-reimport")}
+    onCancel={onExit}
+    {onFinish}
+  />
 {/if}

package/dist/components/integrations/immich/ImmichOnboardingSetupFlow.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import OnboardingBootstrapError from "../../onboarding/OnboardingBootstrapError.svelte";
   import OnboardingStageBackupServices from "../../onboarding/stages/OnboardingStageBackupServices.svelte";
   import OnboardingStageKeyConfirm from "../../onboarding/stages/OnboardingStageKeyConfirm.svelte";
   import OnboardingStageKeyImport from "../../onboarding/stages/OnboardingStageKeyImport.svelte";
   import OnboardingStageKeyIntro from "../../onboarding/stages/OnboardingStageKeyIntro.svelte";
   import OnboardingStageSaveKey from "../../onboarding/stages/OnboardingStageKeySave.svelte";
+  import OnboardingStageTelemetry from "../../onboarding/stages/OnboardingStageTelemetry.svelte";
   import OnboardingStageWelcome from "../../onboarding/stages/OnboardingStageWelcome.svelte";
   import type { OnboardingStatusResponseDto } from "../../../fetch-client";
   import {
@@ -28,6 +30,7 @@
   let status: OnboardingStatusResponseDto | undefined = $state();
   let stage:
     | `welcome`
+    | `telemetry`
     | `key-${"intro" | "save" | "confirm" | "import"}`
     | `backup-${"service" | "confirm" | "create"}`
     | `finished` = $state("welcome");
@@ -36,12 +39,17 @@
     handleOnboardingStatus().then(async (data) => {
       status = data;
 
+      if (data.status !== "ready") {
+        return;
+      }
+
       if (data.hasOnboardedKey) {
-        if (data.hasBackup) {
-          stage = "finished";
-        } else {
-          stage = "backup-service";
-        }
+        stage =
+          data.hasTelemetry === "none"
+            ? "telemetry"
+            : data.hasBackup
+              ? "finished"
+              : "backup-service";
       } else {
         const { recoveryKey } = await handleCurrentRecoveryKey();
         code = recoveryKey;
@@ -60,54 +68,64 @@
   };
 </script>
 
-{#if typeof status === "object"}
-  {#if stage === "finished"}
-    {@render children()}
-  {:else if stage === "welcome"}
-    <OnboardingStageWelcome
-      onNext={() => (stage = "key-intro")}
-      onImportKey={() => (stage = "key-import")}
-      onCancel={onExit}
-    />
-  {:else if stage === "key-import"}
-    <OnboardingStageKeyImport
-      onStart={() => (stage = "welcome")}
-      onImported={() => (stage = "key-confirm")}
-      onCancel={onExit}
-    />
-  {:else if stage === "key-intro"}
-    <OnboardingStageKeyIntro
-      onNext={() => (stage = "key-save")}
-      onCancel={onExit}
-    />
-  {:else if stage === "key-save"}
-    <OnboardingStageSaveKey
-      {code}
-      onNext={() => (stage = "key-confirm")}
-      onCancel={onExit}
-    />
-  {:else if stage === "key-confirm"}
-    <OnboardingStageKeyConfirm
-      {code}
-      onBack={() => (stage = "key-save")}
-      onCancel={onExit}
-      {onConfirmKey}
-    />
-  {:else if stage === "backup-service"}
-    <OnboardingStageBackupServices onNext={onSelectBackend} onCancel={onExit} />
-  {:else if stage === "backup-confirm"}
-    <ImmichConfirmDefaultBackup
-      onCustomize={() => (stage = "backup-create")}
-      onConfirm={() => (stage = "finished")}
-      onCancel={onExit}
-    />
-  {:else if stage === "backup-create"}
-    <ImmichConfigureBackup
-      onFinish={() => (stage = "finished")}
-      onCancel={onExit}
-      {backendId}
-    />
-  {/if}
-{:else}
+{#if status === undefined || status.status === "not-ready"}
   <LoadingSpinner />
+{:else if status.status === "error"}
+  <OnboardingBootstrapError error={status.error} onQuit={onExit} />
+{:else if stage === "finished"}
+  {@render children()}
+{:else if stage === "welcome"}
+  <OnboardingStageWelcome
+    onNext={() => (stage = status?.hasTelemetry === "none" ? "telemetry" : "key-intro")}
+    onImportKey={() => (stage = "key-import")}
+    onCancel={onExit}
+  />
+{:else if stage === "telemetry"}
+  <OnboardingStageTelemetry
+    onContinue={() =>
+      (stage = status?.hasOnboardedKey
+        ? status.hasBackup
+          ? "finished"
+          : "backup-service"
+        : "key-intro")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-import"}
+  <OnboardingStageKeyImport
+    onStart={() => (stage = "welcome")}
+    onImported={() => (stage = "key-confirm")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-intro"}
+  <OnboardingStageKeyIntro
+    onNext={() => (stage = "key-save")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-save"}
+  <OnboardingStageSaveKey
+    {code}
+    onNext={() => (stage = "key-confirm")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-confirm"}
+  <OnboardingStageKeyConfirm
+    {code}
+    onBack={() => (stage = "key-save")}
+    onCancel={onExit}
+    {onConfirmKey}
+  />
+{:else if stage === "backup-service"}
+  <OnboardingStageBackupServices onNext={onSelectBackend} onCancel={onExit} />
+{:else if stage === "backup-confirm"}
+  <ImmichConfirmDefaultBackup
+    onCustomize={() => (stage = "backup-create")}
+    onConfirm={() => (stage = "finished")}
+    onCancel={onExit}
+  />
+{:else if stage === "backup-create"}
+  <ImmichConfigureBackup
+    onFinish={() => (stage = "finished")}
+    onCancel={onExit}
+    {backendId}
+  />
 {/if}

package/dist/components/onboarding/OnboardingBootstrapError.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import {
+    Button,
+    HStack,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { useReportError } from "../../services/onboarding.service";
+
+  type Props = {
+    error?: string;
+    onQuit: () => void;
+  };
+
+  const { error, onQuit }: Props = $props();
+
+  const mutation = useReportError();
+
+  const onReportAndQuit = () =>
+    mutation.mutate(undefined, { onSuccess: onQuit });
+</script>
+
+<Modal size="small" title="Something went wrong" onClose={onQuit} icon={false}>
+  <ModalBody>
+    <Stack>
+      <Text>We ran into an error setting up backups...</Text>
+      {#if error}
+        <Text size="small" color="danger" class="font-mono whitespace-pre-wrap"
+          >{error}</Text
+        >
+      {/if}
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button
+        color="danger"
+        onclick={onReportAndQuit}
+        loading={mutation.isPending}>Report error and quit</Button
+      >
+      <Button variant="ghost" onclick={onQuit} disabled={mutation.isPending}
+        >Go back</Button
+      >
+    </HStack>
+  </ModalFooter>
+</Modal>

package/dist/components/onboarding/OnboardingBootstrapError.svelte.d.ts

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

package/dist/components/onboarding/OnboardingGate.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { LoadingSpinner } from "@immich/ui";
   import { onMount, type Snippet } from "svelte";
+  import OnboardingBootstrapError from "./OnboardingBootstrapError.svelte";
   import SampleOnboarding from "./SampleOnboarding.svelte";
   import type { OnboardingStatusResponseDto } from "../../fetch-client";
   import { handleOnboardingStatus } from "../../services/onboarding.service";
@@ -13,14 +14,16 @@
 
   const { onExit, onFinish, children }: Props = $props();
 
-  let status: OnboardingStatusResponseDto | undefined = $state();
+  let onboarding: OnboardingStatusResponseDto | undefined = $state();
 
   onMount(() => {
-    handleOnboardingStatus().then((data) => (status = data));
+    handleOnboardingStatus().then((data) => (onboarding = data));
   });
 
   function onSkip() {
-    status = {
+    onboarding = {
+      status: "ready",
+      hasTelemetry: "full",
       hasBackend: true,
       hasOnboardedKey: true,
       hasBackup: true,
@@ -30,19 +33,19 @@
   }
 </script>
 
-{#if typeof status === "object"}
-  {#if !(status.hasBackend && status.hasOnboardedKey && (status.hasSkippedExtraConfig || (status.hasBackup && status.hasSchedule)))}
-    <SampleOnboarding
-      {status}
-      onFinish={() => (onFinish ? onFinish() : onSkip())}
-      onCancel={() => {
-        onSkip();
-        onExit();
-      }}
-    />
-  {:else}
-    {@render children()}
-  {/if}
-{:else}
+{#if onboarding === undefined || onboarding.status === "not-ready"}
   <LoadingSpinner />
+{:else if onboarding.status === "error"}
+  <OnboardingBootstrapError error={onboarding.error} onQuit={onExit} />
+{:else if onboarding.hasTelemetry === "none" || !(onboarding.hasBackend && onboarding.hasOnboardedKey && (onboarding.hasSkippedExtraConfig || (onboarding.hasBackup && onboarding.hasSchedule)))}
+  <SampleOnboarding
+    status={onboarding}
+    onFinish={() => (onFinish ? onFinish() : onSkip())}
+    onCancel={() => {
+      onSkip();
+      onExit();
+    }}
+  />
+{:else}
+  {@render children()}
 {/if}

package/dist/components/onboarding/SampleOnboarding.svelte

@@ -13,6 +13,7 @@
   import ImportKey from "./stages/OnboardingStageKeyImport.svelte";
   import KeyIntro from "./stages/OnboardingStageKeyIntro.svelte";
   import SaveKey from "./stages/OnboardingStageKeySave.svelte";
+  import Telemetry from "./stages/OnboardingStageTelemetry.svelte";
   import Welcome from "./stages/OnboardingStageWelcome.svelte";
 
   type Props = {
@@ -28,17 +29,20 @@
   // svelte-ignore state_referenced_locally
   let stage:
     | "welcome"
+    | "telemetry"
     | `key-${"intro" | "save" | "confirm" | "import"}`
     | "backup-service"
     | "backup-create"
     | "schedule-create" = $state(
     !status.hasOnboardedKey
       ? "welcome"
-      : !status.hasBackend
-        ? "backup-service"
-        : !status.hasBackup
-          ? "backup-create"
-          : "schedule-create",
+      : status.hasTelemetry === "none"
+        ? "telemetry"
+        : !status.hasBackend
+          ? "backup-service"
+          : !status.hasBackup
+            ? "backup-create"
+            : "schedule-create",
   );
 
   onMount(() => {
@@ -65,10 +69,22 @@
 
 {#if stage === "welcome"}
   <Welcome
-    onNext={() => (stage = "key-intro")}
+    onNext={() => (stage = status.hasTelemetry === "none" ? "telemetry" : "key-intro")}
     onImportKey={() => (stage = "key-import")}
     {onCancel}
   />
+{:else if stage === "telemetry"}
+  <Telemetry
+    onContinue={() =>
+      (stage = !status.hasOnboardedKey
+        ? "key-intro"
+        : !status.hasBackend
+          ? "backup-service"
+          : !status.hasBackup
+            ? "backup-create"
+            : "schedule-create")}
+    {onCancel}
+  />
 {:else if stage === "key-intro"}
   <KeyIntro onNext={() => (stage = "key-save")} {onCancel} />
 {:else if stage === "key-save"}

package/dist/components/onboarding/restore-point-flow/RestorePointFlow.svelte

@@ -1,15 +1,7 @@
 <script lang="ts">
-  import StackList from "../../ui/StackList.svelte";
+  import SelectRepositoryModal from "../../backups/dialogs/SelectRepositoryModal.svelte";
   import { useInspectRepositories } from "../../../services/repository.service";
-  import {
-    Button,
-    HStack,
-    Modal,
-    ModalBody,
-    ModalFooter,
-    Stack,
-    Text,
-  } from "@immich/ui";
+  import { Button } from "@immich/ui";
   import RestorePointFlow2SelectSnapshot from "./RestorePointFlow2SelectSnapshot.svelte";
 
   type Props = {
@@ -22,22 +14,10 @@
 
   const query = useInspectRepositories();
 
-  const sortedRepositories = $derived(
-    query.data?.toSorted((a, b) => {
-      const validA = a.snapshots !== undefined;
-      const validB = b.snapshots !== undefined;
-      return validA !== validB
-        ? Number(validB) - Number(validA)
-        : Number(b.name.includes("Immich")) - Number(a.name.includes("Immich"));
-    }),
-  );
-
   let selectedRepository: string | undefined = $state();
 
   const repository = $derived(
-    query.data?.find((repository) => {
-      return repository.id === selectedRepository;
-    }),
+    query.data?.find((repository) => repository.id === selectedRepository),
   );
 </script>
 
@@ -48,49 +28,14 @@
     {onFinish}
   />
 {:else}
-  <Modal title="Select Backup" size="small" onClose={onCancel}>
-    <ModalBody>
-      <StackList {query}>
-        {#snippet children()}
-          {#each sortedRepositories ?? [] as repo (repo.id)}
-            {@const accessible = repo.snapshots !== undefined}
-            <HStack gap={2} class="px-4 py-3">
-              <Stack gap={0} class="grow min-w-0">
-                <Text>{repo.name}</Text>
-                <Text size="small" color={accessible ? "secondary" : "danger"}>
-                  {#if !accessible}
-                    Unable to access repository
-                  {:else if repo.snapshots.length}
-                    Last backup: {new Date(
-                      repo.snapshots[0].time,
-                    ).toLocaleDateString()}
-                  {:else}
-                    No backups yet
-                  {/if}
-                </Text>
-              </Stack>
-              {#if accessible}
-                <Button onclick={() => (selectedRepository = repo.id)}>
-                  Select
-                </Button>
-              {/if}
-            </HStack>
-          {/each}
-          {#if (sortedRepositories ?? []).length === 0}
-            <Text class="text-center py-6" color="muted">
-              No repositories found.
-            </Text>
-          {/if}
-        {/snippet}
-      </StackList>
-    </ModalBody>
-    <ModalFooter>
-      <HStack>
-        <Button variant="ghost" onclick={onCancel}>Cancel</Button>
-        <Button variant="ghost" onclick={onImportKey}
-          >Import a different key</Button
-        >
-      </HStack>
-    </ModalFooter>
-  </Modal>
+  <SelectRepositoryModal
+    onSelect={(repositoryId) => (selectedRepository = repositoryId)}
+    {onCancel}
+  >
+    {#snippet footerContent()}
+      <Button variant="ghost" onclick={onImportKey}>
+        Import a different key
+      </Button>
+    {/snippet}
+  </SelectRepositoryModal>
 {/if}

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import {
+    Button,
+    HStack,
+    Icon,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { useEnableTelemetry } from "../../../services/onboarding.service";
+  import { mdiChartBox, mdiEyeOff } from "@mdi/js";
+
+  type Props = {
+    onContinue: () => void;
+    onCancel: () => void;
+  };
+
+  const { onContinue, onCancel }: Props = $props();
+
+  const mutation = useEnableTelemetry();
+
+  const onConfirm = () => mutation.mutate(undefined, { onSuccess: onContinue });
+</script>
+
+<Modal
+  size="small"
+  title="Telemetry required for closed beta"
+  onClose={onCancel}
+>
+  <ModalBody>
+    <Stack>
+      <HStack>
+        <Icon icon={mdiChartBox} class="shrink-0 place-self-start mt-1" />
+        <Text>
+          We collect usage and diagnostic data to understand how FUTO Backups is
+          used and to find problems.</Text
+        >
+      </HStack>
+      <HStack>
+        <Icon icon={mdiEyeOff} class="shrink-0 place-self-start mt-1" />
+        <Text>
+          Your photos, files, and recovery key are never collected and never
+          leave your device unencrypted.</Text
+        >
+      </HStack>
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button onclick={onConfirm} loading={mutation.isPending}>Continue</Button>
+      <Button
+        variant="ghost"
+        onclick={onCancel}
+        disabled={mutation.isPending}>Cancel</Button
+      >
+    </HStack>
+  </ModalFooter>
+</Modal>

package/dist/components/onboarding/stages/OnboardingStageTelemetry.svelte.d.ts

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

package/dist/components/schedules/dialogs/ConfigureScheduleModal.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import type { ScheduleDto } from "../../../fetch-client";
+  import { useUpdateSchedule } from "../../../services/schedule.service";
   import { Field, FormModal, Input, Stack } from "@immich/ui";
   import validate from "cron-validate";
-  import { useUpdateSchedule } from "../../../services/schedule.service";
   import RepositoryPicker from "../RepositoryPicker.svelte";
 
   type Props = {
@@ -31,7 +31,10 @@
 <FormModal
   title={`Edit ${schedule.name}`}
   size="large"
-  disabled={name.length === 0 || validate(cron).isError() || mutation.isPending}
+  disabled={name.length === 0 ||
+    validate(cron).isError() ||
+    repositories.length === 0 ||
+    mutation.isPending}
   {onSubmit}
   {onClose}
 >

package/dist/components/schedules/dialogs/CreateScheduleModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+  import { useCreateSchedule } from "../../../services/schedule.service";
   import { Field, FormModal, Input, Stack } from "@immich/ui";
   import validate from "cron-validate";
-  import { useCreateSchedule } from "../../../services/schedule.service";
   import RepositoryPicker from "../RepositoryPicker.svelte";
 
   type Props = {
@@ -26,7 +26,10 @@
 <FormModal
   title="Create A New Schedule"
   size="large"
-  disabled={name.length === 0 || validate(cron).isError() || mutation.isPending}
+  disabled={name.length === 0 ||
+    validate(cron).isError() ||
+    repositories.length === 0 ||
+    mutation.isPending}
   {onSubmit}
   {onClose}
 >

package/dist/components/ui/StackListItem.svelte

@@ -10,6 +10,7 @@
     children: Snippet;
     trailing?: Snippet;
     actions?: ActionItem[];
+    disabled?: boolean;
     onclick?: () => void;
   };
 
@@ -19,6 +20,7 @@
     children,
     trailing,
     actions = [],
+    disabled = false,
     onclick,
   }: Props = $props();
 </script>
@@ -54,8 +56,9 @@
 {#if onclick}
   <button
     {onclick}
+    {disabled}
     type="button"
-    class="block w-full text-left rounded-lg hover:bg-subtle focus-visible:outline-2 focus-visible:outline-primary-500 cursor-pointer"
+    class="block w-full text-left rounded-lg hover:bg-subtle focus-visible:outline-2 focus-visible:outline-primary-500 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60"
   >
     {@render body()}
   </button>