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

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

@@ -0,0 +1,218 @@
+<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,
+    Field,
+    HStack,
+    LoadingSpinner,
+    Select,
+    Stack,
+    Switch,
+    Text,
+  } from "@immich/ui";
+  import { mdiClockOutline } from "@mdi/js";
+  import cronstrue from "cronstrue";
+
+  type Frequency = "daily" | "weekly" | "monthly";
+
+  const frequencies = [
+    { value: "daily", label: "Daily" },
+    { value: "weekly", label: "Weekly" },
+    { value: "monthly", label: "Monthly" },
+  ];
+
+  const startTimes = Array.from({ length: 24 }, (_, hour) => ({
+    value: String(hour),
+    label: `${String(hour).padStart(2, "0")}:00`,
+  }));
+
+  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,
+  );
+
+  let frequency = $state<Frequency>("daily");
+  let startTime = $state("3");
+  let enabled = $state(true);
+  let loaded = false;
+
+  const parse = (cron: string) => {
+    // notes
+    // cron rewritten on write
+    // - minute discarded
+    // - weekly/monthly forced to set date
+    //   => need server-determined date for load distribution
+    const [minute, hour, day, , weekday] = cron.split(" ");
+
+    return {
+      hour: /^\d+$/.test(hour ?? "") ? hour : "3",
+      minute: /^\d+$/.test(minute ?? "") ? Number(minute) : 0,
+      frequency: (day !== "*"
+        ? "monthly"
+        : weekday !== "*"
+          ? "weekly"
+          : "daily") as Frequency,
+    };
+  };
+
+  const load = () => {
+    if (!schedule) {
+      return;
+    }
+
+    const parsed = parse(schedule.cron);
+    frequency = parsed.frequency;
+    startTime = parsed.hour;
+    enabled = !schedule.paused;
+  };
+
+  $effect(() => {
+    if (loaded || !schedule) {
+      return;
+    }
+
+    loaded = true;
+    load();
+  });
+
+  const cron = $derived.by(() => {
+    const hour = Number(startTime);
+
+    switch (frequency) {
+      case "weekly": {
+        return `0 ${hour} * * 0`;
+      }
+      case "monthly": {
+        return `0 ${hour} 1 * *`;
+      }
+      default: {
+        return `0 ${hour} * * *`;
+      }
+    }
+  });
+
+  const onSave = () => {
+    if (!integration || !repository || !schedule) {
+      return;
+    }
+
+    mutation.mutate({
+      name: repository.name,
+      worm: repository.worm,
+      dataFolders: integration.configuration.dataFolders,
+      backupConfiguration: integration.configuration.backupConfiguration,
+      libraries: integration.configuration.libraries,
+      retentionPolicy: repository.configuration?.retentionPolicy ?? null,
+      cron,
+      paused: !enabled,
+    });
+  };
+</script>
+
+<OnEvents
+  {onIntegrationUpdate}
+  {onRepositoryCreate}
+  {onRepositoryUpdate}
+  {onRepositoryDelete}
+  {onScheduleCreate}
+  {onScheduleUpdate}
+  {onScheduleDelete}
+/>
+
+<Accordion
+  title="Schedule"
+  subtitle="Manage when backups run."
+  icon={mdiClockOutline}
+>
+  <Stack gap={4} class="pt-2">
+    {#if isLoading}
+      <LoadingSpinner />
+    {:else}
+      <Field
+        label="Run backups automatically"
+        description="Back up your library on a recurring schedule."
+        color="primary"
+      >
+        <Switch bind:checked={enabled} />
+      </Field>
+
+      <Field
+        label="Frequency"
+        description="How often backups should run."
+        color="primary"
+        required="indicator"
+        disabled={!enabled}
+      >
+        <Select options={frequencies} bind:value={frequency} />
+      </Field>
+
+      <Field
+        label="Start time"
+        description="When the scheduled backup starts."
+        color="primary"
+        required="indicator"
+        disabled={!enabled}
+      >
+        <Select options={startTimes} bind:value={startTime} />
+      </Field>
+
+      <Text size="small" color="muted">
+        Backups will run <span class="lowercase"
+          >{cronstrue.toString(cron, { verbose: true })}</span
+        >.
+      </Text>
+
+      <HStack gap={2} class="justify-end">
+        <Button
+          shape="round"
+          color="secondary"
+          disabled={mutation.isPending}
+          onclick={load}
+        >
+          Reset
+        </Button>
+        <Button shape="round" loading={mutation.isPending} onclick={onSave}>
+          Save
+        </Button>
+      </HStack>
+    {/if}
+  </Stack>
+</Accordion>

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

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

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

@@ -0,0 +1,207 @@
+<script lang="ts">
+  import BackendsList from "../../../backends/BackendsList.svelte";
+  import Accordion from "../../../ui/Accordion.svelte";
+  import OnEvents from "../../../util/OnEvents.svelte";
+  import type { RetentionPolicyDto } from "../../../../fetch-client";
+  import {
+    useConfigureImmichIntegration,
+    useIntegrationEventHandler,
+    useIntegrations,
+  } from "../../../../services/integrations.service";
+  import {
+    useRepositories,
+    useRepositoryEventHandler,
+  } from "../../../../services/repository.service";
+  import {
+    useScheduleEventHandler,
+    useSchedules,
+  } from "../../../../services/schedule.service";
+  import {
+    Button,
+    Field,
+    HStack,
+    Input,
+    LoadingSpinner,
+    Select,
+    Stack,
+    Switch,
+  } from "@immich/ui";
+  import { mdiDownloadBox } from "@mdi/js";
+
+  type RetentionChoice = {
+    key: string;
+    label: string;
+    policy: RetentionPolicyDto | null;
+  };
+
+  const retentionChoices: RetentionChoice[] = [
+    { key: "15d", label: "After 15 days", policy: { keepWithin: "15d" } },
+    { key: "30d", label: "After 30 days", policy: { keepWithin: "30d" } },
+    { key: "60d", label: "After 60 days", policy: { keepWithin: "60d" } },
+    { key: "90d", label: "After 90 days", policy: { keepWithin: "90d" } },
+    { key: "2", label: "Keep latest two backups", policy: { keepLast: 2 } },
+    { key: "never", label: "Never (keep all backups)", policy: null },
+  ];
+
+  const defaultRetentionKey = "60d";
+
+  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,
+  );
+
+  let name = $state("");
+  let worm = $state(false);
+  let retentionKey = $state(defaultRetentionKey);
+  let loaded = false;
+
+  const load = () => {
+    if (!repository) {
+      return;
+    }
+
+    name = repository.name;
+    worm = repository.worm;
+
+    const policy = repository.configuration?.retentionPolicy ?? null;
+    retentionKey =
+      retentionChoices.find(
+        (choice) => JSON.stringify(choice.policy) === JSON.stringify(policy),
+      )?.key ?? defaultRetentionKey;
+  };
+
+  $effect(() => {
+    if (loaded || !repository) {
+      return;
+    }
+
+    loaded = true;
+    load();
+  });
+
+  const onSave = () => {
+    if (!integration || !repository || !schedule) {
+      return;
+    }
+
+    mutation.mutate({
+      name,
+      cron: schedule.cron,
+      dataFolders: integration.configuration.dataFolders,
+      backupConfiguration: integration.configuration.backupConfiguration,
+      libraries: integration.configuration.libraries,
+      worm,
+      retentionPolicy: worm
+        ? null
+        : (retentionChoices.find((choice) => choice.key === retentionKey)
+            ?.policy ?? null),
+    });
+  };
+</script>
+
+<OnEvents
+  {onIntegrationUpdate}
+  {onRepositoryCreate}
+  {onRepositoryUpdate}
+  {onRepositoryDelete}
+  {onScheduleCreate}
+  {onScheduleUpdate}
+  {onScheduleDelete}
+/>
+
+<Accordion
+  title="Storage"
+  subtitle="Manage the backup name, where it is stored, and how long backups are kept."
+  icon={mdiDownloadBox}
+>
+  <Stack gap={4} class="pt-2">
+    {#if isLoading}
+      <LoadingSpinner />
+    {:else}
+      <Field
+        label="Backup name"
+        description="How this backup is labelled across FUTO Backups."
+        required="indicator"
+      >
+        <Input bind:value={name} />
+      </Field>
+
+      <BackendsList {repository} />
+
+      {#if repository?.worm}
+        <Field
+          label="Write-only"
+          description="Once written, backups can't be removed. This can't be turned off again."
+          readOnly // @immich/ui forces enabled={false} when disabled={true}
+        >
+          <Switch checked class="cursor-not-allowed opacity-38" />
+        </Field>
+      {:else}
+        <Field
+          label="Write-only"
+          description="Once written, backups can't be removed. This can't be turned off again."
+        >
+          <Switch bind:checked={worm} />
+        </Field>
+      {/if}
+
+      <Field
+        label="Delete old backups"
+        description="Older snapshots are pruned automatically."
+        disabled={worm}
+      >
+        <Select
+          options={retentionChoices.map(({ key, label }) => ({
+            value: key,
+            label,
+          }))}
+          value={worm ? "never" : retentionKey}
+          onChange={(value) => (retentionKey = value)}
+        />
+      </Field>
+
+      <HStack gap={2} class="justify-end">
+        <Button
+          shape="round"
+          color="secondary"
+          disabled={mutation.isPending}
+          onclick={load}
+        >
+          Reset
+        </Button>
+        <Button
+          shape="round"
+          disabled={name.trim().length === 0}
+          loading={mutation.isPending}
+          onclick={onSave}
+        >
+          Save
+        </Button>
+      </HStack>
+    {/if}
+  </Stack>
+</Accordion>

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

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

package/dist/components/onboarding/RecoveryKeyDisplay.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
+  import { Button, Card, CardBody, HStack, Text, VStack } from "@immich/ui";
   import {
-    Button,
-    Card,
-    CardBody,
-    HStack,
-    VStack,
-  } from "@immich/ui";
-  import { mdiAsterisk, mdiContentCopy, mdiFile, mdiPrinter } from "@mdi/js";
+    mdiAsterisk,
+    mdiContentCopy,
+    mdiDownloadOutline,
+    mdiPrinterOutline,
+  } from "@mdi/js";
 
   type Props = {
     code: string;
@@ -69,29 +68,44 @@
   };
 </script>
 
-<Card class="bg-primary-50 shadow-none">
+<Card color="primary" class="shadow-none">
   <CardBody class="flex justify-center">
-    <pre><code>{code}</code></pre>
+    <Text size="large" fontWeight="semi-bold"
+      ><pre><code>{code}</code></pre></Text
+    >
   </CardBody>
 </Card>
 
 <VStack>
-  <HStack>
-    <Button leadingIcon={mdiPrinter} variant="outline" onclick={print}>
-      Print
-    </Button>
-    <Button leadingIcon={mdiFile} variant="outline" onclick={saveFile}>
-      Save as file
-    </Button>
-  </HStack>
   <Button
-    leadingIcon={mdiContentCopy}
+    shape="round"
     variant="outline"
+    leadingIcon={mdiContentCopy}
     onclick={copyToClipboard}
   >
-    Copy to clipboard
+    Copy recovery key
   </Button>
-  {#if PasswordCredential}
+
+  <HStack>
+    <Button
+      leadingIcon={mdiDownloadOutline}
+      variant="ghost"
+      shape="round"
+      onclick={saveFile}
+    >
+      Download
+    </Button>
+    <Button
+      leadingIcon={mdiPrinterOutline}
+      variant="ghost"
+      shape="round"
+      onclick={print}
+    >
+      Print
+    </Button>
+  </HStack>
+
+  {#if /* intentionally hide this to not overcrowd the modal */ PasswordCredential && false}
     <Button
       leadingIcon={mdiAsterisk}
       variant="outline"

package/dist/components/onboarding/SampleOnboarding.svelte

@@ -1,20 +1,23 @@
 <script lang="ts">
   import type { OnboardingStatusResponseDto } from "../../fetch-client";
+  import {
+    handleSetupLocalStorage,
+    handleStartYuccaLogin,
+  } from "../../services/backend.service";
   import {
     handleConfirmRecoveryKey,
     handleCurrentRecoveryKey,
     handleSkipOnboardingExtraConfig,
   } from "../../services/onboarding.service";
+  import { Modal, ModalBody } from "@immich/ui";
   import { onMount } from "svelte";
   import CreateFirstBackup from "./stages/SampleCreateFirstBackup.svelte";
   import CreateFirstSchedule from "./stages/SampleCreateFirstSchedule.svelte";
-  import BackupOptions from "./stages/OnboardingStageBackupServices.svelte";
-  import ConfirmKey from "./stages/OnboardingStageKeyConfirm.svelte";
   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";
+  import StepFinishSetup from "./steps/OnboardingStep1FinishSetup.svelte";
+  import StepConnectAccount from "./steps/OnboardingStep2ConnectAccount.svelte";
+  import StepSaveRecoveryKey from "./steps/OnboardingStep3SaveRecoveryKey.svelte";
 
   type Props = {
     status: OnboardingStatusResponseDto;
@@ -25,21 +28,23 @@
   const { status, onFinish, onCancel }: Props = $props();
 
   let code = $state("");
+  let confirming = $state(false);
 
   // svelte-ignore state_referenced_locally
   let stage:
-    | "welcome"
+    | "intro"
     | "telemetry"
-    | `key-${"intro" | "save" | "confirm" | "import"}`
-    | "backup-service"
+    | "key"
+    | "key-import"
+    | "connect"
     | "backup-create"
     | "schedule-create" = $state(
     !status.hasOnboardedKey
-      ? "welcome"
+      ? "intro"
       : status.hasTelemetry === "none"
         ? "telemetry"
         : !status.hasBackend
-          ? "backup-service"
+          ? "connect"
           : !status.hasBackup
             ? "backup-create"
             : "schedule-create",
@@ -57,56 +62,70 @@
   };
 
   const onConfirmKey = async () => {
-    await handleConfirmRecoveryKey();
+    confirming = true;
+
+    try {
+      await handleConfirmRecoveryKey();
 
-    if (status.hasBackend) {
-      onFinish();
-    } else {
-      stage = "backup-service";
+      if (status.hasBackend) {
+        onFinish();
+      } else {
+        stage = "connect";
+      }
+    } finally {
+      confirming = false;
     }
   };
+
+  const onBackendReady = () => (stage = "backup-create");
 </script>
 
-{#if stage === "welcome"}
-  <Welcome
-    onNext={() => (stage = status.hasTelemetry === "none" ? "telemetry" : "key-intro")}
-    onImportKey={() => (stage = "key-import")}
-    {onCancel}
-  />
+{#if stage === "intro"}
+  <Modal size="small" title="FUTO Backups" onClose={onCancel}>
+    <ModalBody>
+      <StepFinishSetup
+        onContinue={() =>
+          (stage = status.hasTelemetry === "none" ? "telemetry" : "key")}
+        onImportKey={() => (stage = "key-import")}
+      />
+    </ModalBody>
+  </Modal>
 {:else if stage === "telemetry"}
   <Telemetry
     onContinue={() =>
       (stage = !status.hasOnboardedKey
-        ? "key-intro"
+        ? "key"
         : !status.hasBackend
-          ? "backup-service"
+          ? "connect"
           : !status.hasBackup
             ? "backup-create"
             : "schedule-create")}
     {onCancel}
   />
-{:else if stage === "key-intro"}
-  <KeyIntro onNext={() => (stage = "key-save")} {onCancel} />
-{:else if stage === "key-save"}
-  <SaveKey {code} onNext={() => (stage = "key-confirm")} {onCancel} />
-{:else if stage === "key-confirm"}
-  <ConfirmKey
-    {code}
-    {onConfirmKey}
-    onBack={() => (stage = "key-save")}
-    {onCancel}
-  />
+{:else if stage === "key"}
+  <Modal size="small" title="FUTO Backups" onClose={onCancel}>
+    <ModalBody>
+      <StepSaveRecoveryKey {code} onContinue={onConfirmKey} loading={confirming} />
+    </ModalBody>
+  </Modal>
 {:else if stage === "key-import"}
   <ImportKey
-    onStart={() => (stage = "welcome")}
+    onStart={() => (stage = "intro")}
     onImported={(key) => {
       code = key;
-      stage = "key-save";
+      stage = "key";
     }}
     {onCancel}
   />
-{:else if stage === "backup-service"}
-  <BackupOptions onNext={() => (stage = "backup-create")} {onCancel} />
+{:else if stage === "connect"}
+  <Modal size="small" title="FUTO Backups" onClose={onCancel}>
+    <ModalBody>
+      <StepConnectAccount
+        onConnect={() => handleStartYuccaLogin(onBackendReady)}
+        onLocalStorage={() => handleSetupLocalStorage(onBackendReady)}
+      />
+    </ModalBody>
+  </Modal>
 {:else if stage === "backup-create"}
   <CreateFirstBackup onNext={() => (stage = "schedule-create")} {onSkip} />
 {:else if stage === "schedule-create"}