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

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

@@ -1,39 +1,56 @@
 <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 OnboardingStepFinishSetup from "../../onboarding/steps/OnboardingStep1FinishSetup.svelte";
+  import OnboardingStepConnectAccount from "../../onboarding/steps/OnboardingStep2ConnectAccount.svelte";
+  import OnboardingStepSaveRecoveryKey from "../../onboarding/steps/OnboardingStep3SaveRecoveryKey.svelte";
+  import OnboardingStepFirstBackup from "../../onboarding/steps/OnboardingStep4FirstBackup.svelte";
   import type { OnboardingStatusResponseDto } from "../../../fetch-client";
+  import {
+    handleSetupLocalStorage,
+    handleStartYuccaLogin,
+  } from "../../../services/backend.service";
+  import {
+    IMMICH_DEFAULT_CRON,
+    useConfigureImmichDefaults,
+  } from "../../../services/integrations.service";
   import {
     handleConfirmRecoveryKey,
     handleCurrentRecoveryKey,
     handleOnboardingStatus,
   } from "../../../services/onboarding.service";
-  import { LoadingSpinner } from "@immich/ui";
+  import { LoadingSpinner, Modal, ModalBody } from "@immich/ui";
+  import cronstrue from "cronstrue";
   import { onMount, type Snippet } from "svelte";
-  import ImmichConfigureBackup from "./ImmichConfigureBackup.svelte";
-  import ImmichConfirmDefaultBackup from "./ImmichConfirmDefaultBackup.svelte";
+
+  type Stage =
+    | "idle"
+    | "intro"
+    | "telemetry"
+    | "connect"
+    | "key-import"
+    | "key"
+    | "backup"
+    | "finished";
 
   type Props = {
-    onExit: () => void;
+    fallback: Snippet<[() => void]>;
     children: Snippet;
   };
 
-  const { onExit, children }: Props = $props();
+  const { fallback, children }: Props = $props();
 
   let code = $state("");
-  let backendId = $state("");
+  let storageLocation = $state("FUTO Backups");
   let status: OnboardingStatusResponseDto | undefined = $state();
-  let stage:
-    | `welcome`
-    | `telemetry`
-    | `key-${"intro" | "save" | "confirm" | "import"}`
-    | `backup-${"service" | "confirm" | "create"}`
-    | `finished` = $state("welcome");
+  let stage: Stage = $state("idle");
+  let resume: Stage = $state("intro");
+  let confirming = $state(false);
+
+  const defaults = useConfigureImmichDefaults();
+
+  const schedule = cronstrue.toString(IMMICH_DEFAULT_CRON, { verbose: true });
 
   onMount(() => {
     handleOnboardingStatus().then(async (data) => {
@@ -44,12 +61,12 @@
       }
 
       if (data.hasOnboardedKey) {
-        stage =
-          data.hasTelemetry === "none"
-            ? "telemetry"
-            : data.hasBackup
-              ? "finished"
-              : "backup-service";
+        if (data.hasBackup) {
+          stage = "finished";
+          return;
+        }
+
+        resume = data.hasTelemetry === "none" ? "telemetry" : "connect";
       } else {
         const { recoveryKey } = await handleCurrentRecoveryKey();
         code = recoveryKey;
@@ -57,75 +74,99 @@
     });
   });
 
-  const onConfirmKey = async () => {
-    await handleConfirmRecoveryKey();
-    stage = "backup-service";
+  const onStart = () => (stage = resume);
+  const onCancel = () => (stage = "idle");
+
+  const afterTelemetry = () =>
+    (stage = status?.hasOnboardedKey && status.hasBackup
+      ? "finished"
+      : "connect");
+
+  const onBackendReady = () => (stage = status?.hasOnboardedKey ? "backup" : "key");
+
+  const onConnect = () => {
+    storageLocation = "FUTO Backups";
+    handleStartYuccaLogin(onBackendReady);
+  };
+
+  const onLocalStorage = () => {
+    storageLocation = "Local Storage";
+    handleSetupLocalStorage(onBackendReady);
   };
 
-  const onSelectBackend = (id: string) => {
-    backendId = id;
-    stage = "backup-confirm";
+  const onConfirmKey = async () => {
+    confirming = true;
+
+    try {
+      await handleConfirmRecoveryKey();
+      stage = "backup";
+    } finally {
+      confirming = false;
+    }
   };
+
+  const onStartBackup = () =>
+    defaults.mutate(undefined, { onSuccess: () => (stage = "finished") });
 </script>
 
 {#if status === undefined || status.status === "not-ready"}
-  <LoadingSpinner />
-{:else if status.status === "error"}
-  <OnboardingBootstrapError error={status.error} onQuit={onExit} />
+  <div class="flex h-full items-center justify-center p-8">
+    <LoadingSpinner />
+  </div>
 {: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}
+  {@render fallback(onStart)}
+{/if}
+
+{#if status?.status === "error" && stage !== "idle"}
+  <OnboardingBootstrapError error={status.error} onQuit={onCancel} />
+{:else if stage === "intro"}
+  <Modal size="small" title="FUTO Backups" onClose={onCancel}>
+    <ModalBody>
+      <OnboardingStepFinishSetup
+        onContinue={() =>
+          (stage = status?.hasTelemetry === "none" ? "telemetry" : "connect")}
+        onImportKey={() => (stage = "key-import")}
+      />
+    </ModalBody>
+  </Modal>
 {:else if stage === "telemetry"}
-  <OnboardingStageTelemetry
-    onContinue={() =>
-      (stage = status?.hasOnboardedKey
-        ? status.hasBackup
-          ? "finished"
-          : "backup-service"
-        : "key-intro")}
-    onCancel={onExit}
-  />
+  <OnboardingStageTelemetry onContinue={afterTelemetry} {onCancel} />
+{:else if stage === "connect"}
+  <Modal size="small" title="FUTO Backups" onClose={onCancel}>
+    <ModalBody>
+      <OnboardingStepConnectAccount {onConnect} {onLocalStorage} />
+    </ModalBody>
+  </Modal>
 {: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}
+    onStart={() => (stage = "intro")}
+    onImported={(key) => {
+      code = key;
+      stage = "connect";
+    }}
+    {onCancel}
   />
+{:else if stage === "key"}
+  <Modal size="small" title="FUTO Backups" onClose={onCancel}>
+    <ModalBody>
+      <OnboardingStepSaveRecoveryKey
+        {code}
+        onContinue={onConfirmKey}
+        loading={confirming}
+      />
+    </ModalBody>
+  </Modal>
+{:else if stage === "backup"}
+  <Modal size="small" title="FUTO Backups" onClose={onCancel}>
+    <ModalBody>
+      <OnboardingStepFirstBackup
+        {schedule}
+        {storageLocation}
+        {onStartBackup}
+        loading={defaults.isPending}
+      />
+    </ModalBody>
+  </Modal>
 {/if}

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

@@ -1,6 +1,6 @@
 import { type Snippet } from "svelte";
 type Props = {
-    onExit: () => void;
+    fallback: Snippet<[() => void]>;
     children: Snippet;
 };
 declare const ImmichOnboardingSetupFlow: import("svelte").Component<Props, {}, "">;

package/dist/components/integrations/immich/settings/ImmichSettingsBackupContents.svelte

@@ -0,0 +1,313 @@
+<script lang="ts">
+  import Accordion from "../../../ui/Accordion.svelte";
+  import OnEvents from "../../../util/OnEvents.svelte";
+  import {
+    useConfigureImmichIntegration,
+    useIntegrationEventHandler,
+    useIntegrations,
+  } from "../../../../services/integrations.service";
+  import {
+    useRepositories,
+    useRepositoryEventHandler,
+  } from "../../../../services/repository.service";
+  import {
+    useScheduleEventHandler,
+    useSchedules,
+  } from "../../../../services/schedule.service";
+  import {
+    Button,
+    Checkbox,
+    Field,
+    HStack,
+    LoadingSpinner,
+    Select,
+    Stack,
+    Switch,
+    Text,
+  } from "@immich/ui";
+  import { mdiImageMultiple } from "@mdi/js";
+  import { SvelteSet } from "svelte/reactivity";
+
+  type Group = {
+    key: string;
+    label: string;
+    description: string;
+    folders: string[];
+    required?: boolean;
+    warning?: string;
+    warningColor?: "danger" | "warning";
+  };
+
+  const groups: Group[] = [
+    {
+      key: "media",
+      label: "Photos and videos",
+      description: "Your media uploaded directly to Immich.",
+      folders: ["upload", "profile", "library"],
+      warning: "It is highly recommended you back this up!",
+      warningColor: "danger",
+    },
+    {
+      key: "database",
+      label: "Database and metadata",
+      description:
+        "Albums, people, tags, favorites and other library details. Required to restore.",
+      folders: ["backups"],
+      required: true,
+    },
+    {
+      key: "thumbs",
+      label: "Thumbnails and previews",
+      description: "Generated photo previews, can be recreated later.",
+      folders: ["thumbs"],
+      warning:
+        "When restoring, you will see broken previews. Use the admin panel to regenerate them.",
+      warningColor: "warning",
+    },
+    {
+      key: "encoded",
+      label: "Encoded videos",
+      description: "Generated video previews, can be recreated later.",
+      folders: ["encoded-video"],
+      warning:
+        "When restoring, you will see broken previews. Use the admin panel to regenerate them.",
+      warningColor: "warning",
+    },
+  ];
+
+  const integrations = useIntegrations();
+  const repositories = useRepositories();
+  const schedules = useSchedules();
+  const mutation = useConfigureImmichIntegration();
+
+  const { onIntegrationUpdate } = useIntegrationEventHandler();
+  const { onRepositoryCreate, onRepositoryUpdate, onRepositoryDelete } =
+    useRepositoryEventHandler();
+  const { onScheduleCreate, onScheduleUpdate, onScheduleDelete } =
+    useScheduleEventHandler();
+
+  const integration = $derived(integrations.data?.immichIntegration);
+
+  const repository = $derived(
+    integration
+      ? repositories.data?.find((entry) => entry.id === integration.id)
+      : undefined,
+  );
+
+  const schedule = $derived(
+    integration
+      ? schedules.data?.find((entry) => entry.id === integration.scheduleId)
+      : undefined,
+  );
+
+  const isLoading = $derived(
+    integrations.isLoading || repositories.isLoading || schedules.isLoading,
+  );
+
+  type LibrariesMode = "all" | "none" | "some";
+
+  const libraryModes = [
+    { value: "all", label: "All libraries" },
+    { value: "none", label: "No libraries" },
+    { value: "some", label: "Choose libraries" },
+  ];
+
+  const folders = new SvelteSet<string>();
+  const selectedLibraries = new SvelteSet<string>();
+  let backupConfiguration = $state(true);
+  let librariesMode = $state<LibrariesMode>("all");
+  let loaded = false;
+
+  $effect(() => {
+    if (loaded || !integration) {
+      return;
+    }
+
+    loaded = true;
+    backupConfiguration = integration.configuration.backupConfiguration;
+
+    const libraries = integration.configuration.libraries;
+
+    if (libraries === "all") {
+      librariesMode = "all";
+    } else if (libraries.length === 0) {
+      librariesMode = "none";
+    } else {
+      librariesMode = "some";
+
+      for (const id of libraries) {
+        selectedLibraries.add(id);
+      }
+    }
+
+    for (const folder of integration.configuration.dataFolders) {
+      folders.add(folder);
+    }
+  });
+
+  const toggleLibrary = (id: string) => {
+    if (selectedLibraries.has(id)) {
+      selectedLibraries.delete(id);
+    } else {
+      selectedLibraries.add(id);
+    }
+  };
+
+  const available = $derived(
+    integrations.data?.immichState?.dataFolders ?? [],
+  );
+
+  const libraries = $derived(integrations.data?.immichState?.libraries ?? []);
+
+  const applicable = (group: Group) =>
+    group.folders.filter((folder) => available.includes(folder));
+
+  const isChecked = (group: Group) => {
+    const own = applicable(group);
+
+    return own.length > 0 && own.every((folder) => folders.has(folder));
+  };
+
+  const toggle = (group: Group) => {
+    const own = applicable(group);
+    const enabled = own.every((folder) => folders.has(folder));
+
+    for (const folder of own) {
+      if (enabled) {
+        folders.delete(folder);
+      } else {
+        folders.add(folder);
+      }
+    }
+  };
+
+  const onSave = () => {
+    folders.add("backups");
+
+    if (!integration || !repository || !schedule) {
+      return;
+    }
+
+    mutation.mutate({
+      name: repository.name,
+      worm: repository.worm,
+      cron: schedule.cron,
+      retentionPolicy: repository.configuration?.retentionPolicy ?? null,
+      dataFolders: [...folders],
+      backupConfiguration,
+      libraries:
+        librariesMode === "all"
+          ? "all"
+          : librariesMode === "none"
+            ? []
+            : [...selectedLibraries],
+    });
+  };
+</script>
+
+<OnEvents
+  {onIntegrationUpdate}
+  {onRepositoryCreate}
+  {onRepositoryUpdate}
+  {onRepositoryDelete}
+  {onScheduleCreate}
+  {onScheduleUpdate}
+  {onScheduleDelete}
+/>
+
+<Accordion
+  title="Backup Contents"
+  subtitle="Choose what Immich includes in each backup."
+  icon={mdiImageMultiple}
+>
+  <Stack gap={4} class="pt-2">
+    {#if isLoading}
+      <LoadingSpinner />
+    {:else}
+      {#each groups as group (group.key)}
+        {#if applicable(group).length > 0}
+          <Stack gap={1}>
+            <Field
+              label={group.label}
+              description={group.description}
+              readOnly={group.required}
+              required={group.required ? "indicator" : undefined}
+            >
+              <Switch
+                checked={group.required || isChecked(group)}
+                class={group.required
+                  ? "cursor-not-allowed opacity-38"
+                  : undefined}
+                onCheckedChange={() => toggle(group)}
+              />
+            </Field>
+
+            {#if group.warning && !group.required && !isChecked(group)}
+              <Text size="small" color={group.warningColor}>
+                {group.warning}
+              </Text>
+            {/if}
+          </Stack>
+        {/if}
+      {/each}
+
+      <Stack gap={1}>
+        <Field
+          label="Backup configuration"
+          description="Include these backup settings, so they survive a restore."
+        >
+          <Switch bind:checked={backupConfiguration} />
+        </Field>
+
+        {#if !backupConfiguration}
+          <Text size="small" color="warning">
+            You will need to reconfigure backups from scratch after restoring.
+          </Text>
+        {/if}
+      </Stack>
+
+      <Field
+        label="External libraries"
+        description="Libraries stored outside of Immich. New libraries are included automatically unless you choose specific ones."
+      >
+        <Select
+          options={libraryModes}
+          value={librariesMode}
+          onChange={(value) => (librariesMode = value as LibrariesMode)}
+        />
+      </Field>
+
+      {#if librariesMode === "some"}
+        {#if libraries.length === 0}
+          <Text size="small" color="muted">No external libraries found.</Text>
+        {:else}
+          <Stack gap={2} class="ps-1">
+            {#each libraries as library (library.id)}
+              <label class="flex select-none items-center gap-3">
+                <Checkbox
+                  checked={selectedLibraries.has(library.id)}
+                  onCheckedChange={() => toggleLibrary(library.id)}
+                />
+                <Text size="small">{library.name}</Text>
+              </label>
+            {/each}
+          </Stack>
+        {/if}
+      {:else if librariesMode === "all" && libraries.length > 0}
+        <Text size="small" color="muted">
+          Included: {libraries.map((library) => library.name).join(", ")}
+        </Text>
+      {/if}
+
+      <HStack class="justify-end">
+        <Button
+          shape="round"
+          loading={mutation.isPending}
+          onclick={onSave}
+        >
+          Save
+        </Button>
+      </HStack>
+    {/if}
+  </Stack>
+</Accordion>

package/dist/components/integrations/immich/settings/ImmichSettingsBackupContents.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ImmichSettingsBackupContents: import("svelte").Component<Record<string, never>, {}, "">;
+type ImmichSettingsBackupContents = ReturnType<typeof ImmichSettingsBackupContents>;
+export default ImmichSettingsBackupContents;