@futo-org/backups-orchestrator-ui 0.1.71

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

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import StackList from "../../ui/StackList.svelte";
+  import RelativeTime from "../../util/RelativeTime.svelte";
+  import type {
+    InspectedLocalRepositoryDto,
+    SnapshotDto,
+  } from "../../../fetch-client";
+  import { humanizeBackupPath } from "../../../utils/format";
+  import {
+    Button,
+    FormatBytes,
+    HStack,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import RestorePointFlow3ConfirmRestore from "./RestorePointFlow3ConfirmRestore.svelte";
+
+  type Props = {
+    onBack: () => void;
+    onFinish: () => void;
+
+    repository: InspectedLocalRepositoryDto;
+  };
+
+  const { onBack, onFinish, repository }: Props = $props();
+
+  let selectedSnapshot: SnapshotDto | undefined = $state();
+</script>
+
+{#if selectedSnapshot}
+  <RestorePointFlow3ConfirmRestore
+    onBack={() => (selectedSnapshot = undefined)}
+    {onFinish}
+    {repository}
+    snapshot={selectedSnapshot}
+  />
+{:else}
+  <Modal
+    title={`Restore from ${repository.name}`}
+    size="medium"
+    onClose={onBack}
+  >
+    <ModalBody>
+      <StackList>
+        {#each repository.snapshots.toSorted((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime()) as snapshot (snapshot.id)}
+          <HStack gap={2} class="px-4 py-3">
+            <Stack gap={0} class="grow min-w-0">
+              <HStack
+                ><RelativeTime time={snapshot.time} />
+                {#if snapshot.summary}
+                  <Text size="small" color="secondary">
+                    &middot; <FormatBytes bytes={snapshot.summary.totalBytes} />
+                  </Text>
+                {/if}</HStack
+              >
+              <Text size="small" color="muted"
+                >{[...new Set(snapshot.paths.map(humanizeBackupPath))].join(
+                  ", ",
+                )}</Text
+              >
+            </Stack>
+            <Button onclick={() => (selectedSnapshot = snapshot)}>
+              Restore
+            </Button>
+          </HStack>
+        {/each}
+        {#if repository.snapshots.length === 0}
+          <Text class="text-center py-6" color="muted">
+            No snapshots in this repository.
+          </Text>
+        {/if}
+      </StackList>
+    </ModalBody>
+    <ModalFooter>
+      <HStack>
+        <Button variant="ghost" onclick={onBack}>Back</Button>
+      </HStack>
+    </ModalFooter>
+  </Modal>
+{/if}

package/dist/components/onboarding/restore-point-flow/RestorePointFlow2SelectSnapshot.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { InspectedLocalRepositoryDto } from "../../../fetch-client";
+type Props = {
+    onBack: () => void;
+    onFinish: () => void;
+    repository: InspectedLocalRepositoryDto;
+};
+declare const RestorePointFlow2SelectSnapshot: import("svelte").Component<Props, {}, "">;
+type RestorePointFlow2SelectSnapshot = ReturnType<typeof RestorePointFlow2SelectSnapshot>;
+export default RestorePointFlow2SelectSnapshot;

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

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import type {
+    InspectedLocalRepositoryDto,
+    SnapshotDto,
+  } from "../../../fetch-client";
+  import { handleRestoreFromPoint } from "../../../services/snapshot.service";
+  import {
+    Button,
+    Checkbox,
+    HStack,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Select,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { SvelteSet } from "svelte/reactivity";
+  import RestorePointFlow4Restore from "./RestorePointFlow4Restore.svelte";
+
+  type Props = {
+    onBack: () => void;
+    onFinish: () => void;
+
+    repository: InspectedLocalRepositoryDto;
+    snapshot: SnapshotDto;
+  };
+
+  const { onBack, onFinish, repository, snapshot }: Props = $props();
+
+  const yuccaConfigOptions = $derived(
+    snapshot.paths
+      .filter((path) => path.includes("yucca"))
+      .map((value) => ({
+        value,
+        label: value,
+      })),
+  );
+
+  // svelte-ignore state_referenced_locally
+  let yuccaConfig: string | undefined = $state(
+    snapshot.paths.find((path) => path.includes("yucca")),
+  );
+
+  // svelte-ignore state_referenced_locally
+  let includePaths = new SvelteSet<string>(
+    snapshot.paths.filter((path) => !path.includes("yucca")),
+  );
+
+  let logId: string | undefined = $state();
+
+  async function handleRestore() {
+    ({ logId } = await handleRestoreFromPoint(
+      repository.id,
+      snapshot.id,
+      repository.backends!.primary.id,
+      {
+        yuccaConfig,
+        include: [...includePaths].filter((path) => path !== yuccaConfig),
+      },
+    ));
+  }
+</script>
+
+{#if logId}
+  <RestorePointFlow4Restore {onFinish} {logId} taskId={repository.id} />
+{:else}
+  <Modal title="Confirm restore from snapshot" size="small" onClose={onBack}>
+    <ModalBody>
+      <Stack>
+        <Stack gap={2}>
+          <Text fontWeight="bold">Restore configuration</Text>
+          <HStack>
+            <Select
+              options={yuccaConfigOptions}
+              bind:value={yuccaConfig}
+              placeholder="Not restoring backup configuration"
+              class="flex-1"
+            />
+            {#if yuccaConfig}
+              <Button variant="ghost" onclick={() => (yuccaConfig = undefined)}>
+                Clear
+              </Button>
+            {/if}
+          </HStack>
+        </Stack>
+
+        <Stack gap={2}>
+          <Text fontWeight="bold">Backup includes</Text>
+          {#each snapshot.paths as path}
+            {@const forced = path === yuccaConfig}
+            <label class="select-none flex gap-2 items-center">
+              <Checkbox
+                checked={forced || includePaths.has(path)}
+                disabled={forced}
+                onCheckedChange={() =>
+                  includePaths.has(path)
+                    ? includePaths.delete(path)
+                    : includePaths.add(path)}
+              />
+              {path}
+            </label>
+          {/each}
+        </Stack>
+
+        <Text size="small" color="muted">
+          Files will be restored to their exact paths.
+        </Text>
+      </Stack>
+    </ModalBody>
+    <ModalFooter>
+      <HStack>
+        <Button variant="ghost" onclick={onBack}>Back</Button>
+        <Button onclick={handleRestore}>Restore</Button>
+      </HStack>
+    </ModalFooter>
+  </Modal>
+{/if}

package/dist/components/onboarding/restore-point-flow/RestorePointFlow3ConfirmRestore.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { InspectedLocalRepositoryDto, SnapshotDto } from "../../../fetch-client";
+type Props = {
+    onBack: () => void;
+    onFinish: () => void;
+    repository: InspectedLocalRepositoryDto;
+    snapshot: SnapshotDto;
+};
+declare const RestorePointFlow3ConfirmRestore: import("svelte").Component<Props, {}, "">;
+type RestorePointFlow3ConfirmRestore = ReturnType<typeof RestorePointFlow3ConfirmRestore>;
+export default RestorePointFlow3ConfirmRestore;

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

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import OnEvents from "../../util/OnEvents.svelte";
+  import type { SocketEvent } from "../../../events";
+  import { createLogObserver } from "../../../services/log.service.svelte";
+  import { Alert, Modal, ModalBody, ProgressBar, Stack, Text } from "@immich/ui";
+  import { onDestroy } from "svelte";
+
+  type Props = {
+    onFinish: () => void;
+
+    taskId: string;
+    logId: string;
+  };
+
+  const { onFinish, taskId, logId }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  const log = createLogObserver(logId);
+  onDestroy(() => log.destroy());
+
+  const onTaskEnd = (event: SocketEvent<{ parentId: string }>) => {
+    if (event.data.parentId === taskId && log.errors.length === 0) {
+      onFinish();
+    }
+  };
+</script>
+
+<OnEvents {onTaskEnd} />
+
+<Modal
+  title={log.errors.length > 0 ? "Restore failed" : "Restoring"}
+  size="small"
+  onClose={log.errors.length > 0 ? onFinish : undefined}
+>
+  <ModalBody>
+    <Stack gap={2}>
+      {#each log.errors as error}
+        <Alert color="danger">{error}</Alert>
+      {/each}
+
+      <ProgressBar progress={log.status.progress} size="large">
+        <Text
+          size="small"
+          class={log.status.progress > 0.5 ? "text-light" : "text-dark"}
+        >
+          {log.status.text}
+        </Text>
+      </ProgressBar>
+
+      {#if log.status.currentFiles.length > 0}
+        <Stack gap={1}>
+          {#each log.status.currentFiles as file}
+            <Text size="tiny" class="text-nowrap">{file}</Text>
+          {/each}
+        </Stack>
+      {/if}
+    </Stack>
+  </ModalBody>
+</Modal>

package/dist/components/onboarding/restore-point-flow/RestorePointFlow4Restore.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    onFinish: () => void;
+    taskId: string;
+    logId: string;
+};
+declare const RestorePointFlow4Restore: import("svelte").Component<Props, {}, "">;
+type RestorePointFlow4Restore = ReturnType<typeof RestorePointFlow4Restore>;
+export default RestorePointFlow4Restore;

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

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import StackList from "../../ui/StackList.svelte";
+  import StackListItem from "../../ui/StackListItem.svelte";
+  import {
+    handleSetupLocalStorage,
+    handleYuccaLogin,
+  } from "../../../services/backend.service";
+  import {
+    Button,
+    HStack,
+    Icon,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { mdiChevronRight, mdiHarddisk, mdiShieldCheck } from "@mdi/js";
+
+  type Props = {
+    restore?: boolean;
+    onNext: (backendId: string) => void;
+    onCancel: () => void;
+  };
+
+  const { restore = false, onNext, onCancel }: Props = $props();
+
+  function onFutoBackups() {
+    handleYuccaLogin(onNext);
+  }
+
+  function onLocalBackups() {
+    handleSetupLocalStorage(onNext);
+  }
+
+  // TODO: show existing backends if any configured!
+</script>
+
+<Modal
+  size="small"
+  title={restore ? "Where would you like to restore from?" : "Backup options"}
+  onClose={onCancel}
+  icon={false}
+>
+  <ModalBody>
+    <StackList>
+      <StackListItem onclick={onFutoBackups}>
+        {#snippet icon()}
+          <Icon icon={mdiShieldCheck} size="36px" />
+        {/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}>
+        {#snippet icon()}
+          <Icon icon={mdiHarddisk} size="36px" />
+        {/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>
+    </StackList>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button variant="ghost" onclick={onCancel}>Cancel</Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

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

@@ -0,0 +1,8 @@
+type Props = {
+    restore?: boolean;
+    onNext: (backendId: string) => void;
+    onCancel: () => void;
+};
+declare const OnboardingStageBackupServices: import("svelte").Component<Props, {}, "">;
+type OnboardingStageBackupServices = ReturnType<typeof OnboardingStageBackupServices>;
+export default OnboardingStageBackupServices;

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import {
+    Button,
+    Field,
+    HStack,
+    Input,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+
+  type Props = {
+    code: string;
+
+    onConfirmKey: () => Promise<void>;
+    onBack: () => void;
+    onCancel: () => void;
+  };
+
+  const { code, onConfirmKey, onBack, onCancel }: Props = $props();
+
+  let value = $state("");
+
+  const strip = (key: string) => {
+    return key.replace(/\s/g, "").toLowerCase().trim();
+  };
+</script>
+
+<Modal
+  size="small"
+  title="Confirm recovery key"
+  onClose={onCancel}
+  icon={false}
+>
+  <ModalBody>
+    <Stack>
+      <Text size="small" class="text-muted text-left"
+        >Ensure you've saved the key properly.</Text
+      >
+
+      <Field label="Recovery Key">
+        <Input bind:value />
+      </Field>
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button disabled={strip(code) !== strip(value)} onclick={onConfirmKey}
+        >Confirm</Button
+      >
+      <Button variant="ghost" onclick={onBack}>See the key again</Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

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

@@ -0,0 +1,9 @@
+type Props = {
+    code: string;
+    onConfirmKey: () => Promise<void>;
+    onBack: () => void;
+    onCancel: () => void;
+};
+declare const OnboardingStageKeyConfirm: import("svelte").Component<Props, {}, "">;
+type OnboardingStageKeyConfirm = ReturnType<typeof OnboardingStageKeyConfirm>;
+export default OnboardingStageKeyConfirm;

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { handleImportRecoveryKey } from "../../../services/onboarding.service";
+  import {
+    Button,
+    Field,
+    HStack,
+    Input,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    VStack,
+  } from "@immich/ui";
+
+  type Props = {
+    onImported: (key: string) => void;
+    onStart?: () => void;
+    onCancel: () => void;
+  };
+
+  const { onImported, onStart, onCancel }: Props = $props();
+
+  let value = $state("");
+
+  const strip = (key: string) => {
+    return key.replace(/\s/g, "").toLowerCase().trim();
+  };
+
+  const isValidValue = () => /^[a-f0-9]{64}$/.test(strip(value));
+
+  const onSave = async () => {
+    const recoveryKey = strip(value);
+
+    await handleImportRecoveryKey({ recoveryKey });
+
+    onImported(recoveryKey);
+  };
+</script>
+
+<Modal size="small" title="Import recovery key" onClose={onCancel}>
+  <ModalBody>
+    <VStack>
+      <Field label="Recovery Key">
+        <Input bind:value />
+      </Field>
+    </VStack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button disabled={!isValidValue()} onclick={onSave}>Save</Button>
+      {#if onStart}
+        <Button variant="ghost" onclick={onStart}>Back</Button>
+      {:else}
+        <Button variant="ghost" onclick={onCancel}>Cancel</Button>
+      {/if}
+    </HStack>
+  </ModalFooter>
+</Modal>

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

@@ -0,0 +1,8 @@
+type Props = {
+    onImported: (key: string) => void;
+    onStart?: () => void;
+    onCancel: () => void;
+};
+declare const OnboardingStageKeyImport: import("svelte").Component<Props, {}, "">;
+type OnboardingStageKeyImport = ReturnType<typeof OnboardingStageKeyImport>;
+export default OnboardingStageKeyImport;

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

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import TimedButton from "../../util/TimedButton.svelte";
+  import {
+    Button,
+    HStack,
+    Icon,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { mdiKey, mdiSecurity } from "@mdi/js";
+
+  type Props = {
+    onNext: () => void;
+    onCancel: () => void;
+  };
+
+  const { onNext, onCancel }: Props = $props();
+</script>
+
+<Modal
+  size="small"
+  title="Keeping your photos private"
+  onClose={onCancel}
+  icon={false}
+>
+  <ModalBody>
+    <Stack>
+      <HStack>
+        <Icon icon={mdiKey} class="shrink-0 place-self-start mt-1" />
+        <Text
+          >You are about to be given a code which you need to put in a safe
+          place.</Text
+        >
+      </HStack>
+      <HStack>
+        <Icon icon={mdiSecurity} class="shrink-0 place-self-start mt-1" />
+        <Text>If you lose the key, your backup is gone.</Text>
+      </HStack>
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <TimedButton text="Next" onclick={onNext} />
+      <Button variant="ghost" onclick={onCancel}>Cancel</Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

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

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

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import {
+    Button,
+    HStack,
+    LoadingSpinner,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import RecoveryKeyDisplay from "../RecoveryKeyDisplay.svelte";
+
+  type Props = {
+    code: string;
+
+    onNext: () => void;
+    onCancel: () => void;
+  };
+
+  const { code, onNext, onCancel }: Props = $props();
+</script>
+
+<Modal size="small" title="Your recovery key" onClose={onCancel} icon={false}>
+  <ModalBody>
+    <Stack gap={4}>
+      <Text size="small" class="text-muted text-left">
+        Save this key somewhere safe, it will be used to restore your backups.
+      </Text>
+
+      {#if code}
+        <RecoveryKeyDisplay {code} />
+      {:else}
+        <LoadingSpinner />
+      {/if}
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button onclick={onNext}>Next</Button>
+      <Button variant="ghost" onclick={onCancel}>Cancel</Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

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

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

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import {
+    Button,
+    HStack,
+    Icon,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { mdiImageAlbum, mdiInformation, mdiLock } from "@mdi/js";
+
+  type Props = {
+    onNext: () => void;
+    onImportKey: () => void;
+    onCancel: () => void;
+    icon?: boolean;
+  };
+
+  const { onNext, onImportKey, onCancel, icon = true }: Props = $props();
+</script>
+
+<Modal size="small" title="Welcome to FUTO Backups" onClose={onCancel} {icon}>
+  <ModalBody>
+    <Stack>
+      <HStack>
+        <Icon icon={mdiImageAlbum} class="shrink-0 place-self-start mt-1" />
+        <Text>
+          Keep your most precious memories safe and away from prying eyes.</Text
+        >
+      </HStack>
+      <HStack>
+        <Icon icon={mdiLock} class="shrink-0 place-self-start mt-1" />
+        <Text>
+          You will be guided through setting up a secure way to keep your photos
+          private.</Text
+        >
+      </HStack>
+      <HStack>
+        <Icon icon={mdiInformation} class="shrink-0 place-self-start mt-1" />
+        <Text>
+          You'll be able to choose to use our backups service or your own
+          storage.</Text
+        >
+      </HStack>
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button onclick={onNext}>Next</Button>
+      <Button variant="ghost" onclick={onImportKey}>Import Key</Button>
+      <Button variant="ghost" onclick={onCancel}>Cancel</Button>
+    </HStack>
+  </ModalFooter>
+</Modal>