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

package/dist/components/backends/BackendItem.svelte

@@ -2,6 +2,7 @@
   import type {
     BackendDto,
     BackendType,
+    LocalRepositoryDto,
     RepositoryBackendDto,
   } from "../../fetch-client";
   import { getBackendActions } from "../../services/backend.service";
@@ -10,11 +11,12 @@
   import StackListItem from "../ui/StackListItem.svelte";
 
   type Props = {
+    repository?: LocalRepositoryDto;
     backend: BackendDto;
     repositoryBackend?: RepositoryBackendDto & { primary?: boolean };
   };
 
-  const { backend, repositoryBackend }: Props = $props();
+  const { repository, backend, repositoryBackend }: Props = $props();
 
   const BackendIcons: Record<BackendType, string> = {
     yucca: mdiShieldCheckOutline,
@@ -28,10 +30,12 @@
     s3: "S3 Server",
   };
 
-  const { LoginAgain } = $derived(getBackendActions(backend));
+  const { LoginAgain, Reconfigure } = $derived(
+    getBackendActions(repository, backend, repositoryBackend),
+  );
 </script>
 
-<StackListItem actions={[LoginAgain]}>
+<StackListItem actions={[LoginAgain, Reconfigure]}>
   {#snippet icon()}
     <Icon icon={BackendIcons[backend.type]} />
   {/snippet}

package/dist/components/backends/BackendItem.svelte.d.ts

@@ -1,5 +1,6 @@
-import type { BackendDto, RepositoryBackendDto } from "../../fetch-client";
+import type { BackendDto, LocalRepositoryDto, RepositoryBackendDto } from "../../fetch-client";
 type Props = {
+    repository?: LocalRepositoryDto;
     backend: BackendDto;
     repositoryBackend?: RepositoryBackendDto & {
         primary?: boolean;

package/dist/components/backends/BackendsList.svelte

@@ -49,12 +49,13 @@
     {/snippet}
 
     {#each query.data as backend (backend.id)}
-      <BackendItem
-        {backend}
-        repositoryBackend={repositoryBackends.find(
-          ({ id }) => backend.id === id,
-        )}
-      />
+      {@const repositoryBackend = repositoryBackends.find(
+        ({ id }) => backend.id === id,
+      )}
+
+      {#if typeof repository === typeof repositoryBackend}
+        <BackendItem {repository} {backend} {repositoryBackend} />
+      {/if}
     {/each}
   </StackList>
 

package/dist/components/backends/{CreateLocalBackend.svelte → dialogs/CreateLocalBackendModal.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import PathPickerField from "../ui/PathPickerField.svelte";
-  import { useCreateLocalBackend } from "../../services/backend.service";
+  import PathPickerField from "../../ui/PathPickerField.svelte";
+  import { useCreateLocalBackend } from "../../../services/backend.service";
   import { FormModal, Stack } from "@immich/ui";
 
   type Props = {

package/dist/components/backends/dialogs/CreateLocalBackendModal.svelte.d.ts

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

package/dist/components/backends/{OAuthDeviceFlow.svelte → dialogs/OAuthDeviceFlowModal.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { SocketEvent } from "../../events";
-  import type { BackendDto } from "../../fetch-client";
-  import { useBackendEventHandler } from "../../services/backend.service";
+  import type { SocketEvent } from "../../../events";
+  import type { BackendDto } from "../../../fetch-client";
+  import { useBackendEventHandler } from "../../../services/backend.service";
   import {
     Button,
     Code,
@@ -16,7 +16,7 @@
     VStack,
   } from "@immich/ui";
   import { mdiContentCopy } from "@mdi/js";
-  import OnEvents from "../util/OnEvents.svelte";
+  import OnEvents from "../../util/OnEvents.svelte";
 
   type Props = {
     userCode: string;

package/dist/components/backends/dialogs/OAuthDeviceFlowModal.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    userCode: string;
+    verificationUri: string;
+    onCreate?: (backendId: string) => void;
+    onClose: () => void;
+};
+declare const OAuthDeviceFlowModal: import("svelte").Component<Props, {}, "">;
+type OAuthDeviceFlowModal = ReturnType<typeof OAuthDeviceFlowModal>;
+export default OAuthDeviceFlowModal;

package/dist/components/backends/dialogs/SelectBackendModal.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import StackList from "../../ui/StackList.svelte";
+  import StackListItem from "../../ui/StackListItem.svelte";
+  import Suspense from "../../util/Suspense.svelte";
+  import {
+    handleSetupLocalStorage,
+    handleYuccaLogin,
+    useBackends,
+  } from "../../../services/backend.service";
+  import {
+    Button,
+    HStack,
+    Icon,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { mdiChevronRight, mdiHarddisk, mdiShieldCheck } from "@mdi/js";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    title?: string;
+    leadingContent?: Snippet;
+    disabled?: boolean;
+    onSelect: (backendId: string) => void;
+    onCancel: () => void;
+  };
+
+  const {
+    title,
+    leadingContent,
+    disabled = false,
+    onSelect,
+    onCancel,
+  }: Props = $props();
+
+  const backends = useBackends();
+
+  const onFutoBackups = () => {
+    const futoBackend = backends.data!.find(
+      (backend) => backend.type === "yucca" && backend.isOnline,
+    );
+
+    if (futoBackend) {
+      onSelect(futoBackend.id);
+    } else {
+      handleYuccaLogin(onSelect);
+    }
+  };
+
+  const onLocalBackups = () => {
+    handleSetupLocalStorage(onSelect);
+    onCancel();
+  };
+</script>
+
+<Modal size="small" {title} onClose={onCancel} icon={false}>
+  <ModalBody>
+    <Stack>
+      {@render leadingContent?.()}
+
+      <Suspense query={backends}>
+        <StackList>
+          <StackListItem {disabled} 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 {disabled} 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>
+
+          {#each backends.data as backend}
+            {#if backend.type === "local"}
+              <StackListItem
+                {disabled}
+                onclick={() => {
+                  onSelect(backend.id);
+                }}
+              >
+                {#snippet icon()}
+                  <Icon icon={mdiHarddisk} size="36px" />
+                {/snippet}
+
+                <Stack gap={0}>
+                  <Text class="font-bold">Existing Local Storage</Text>
+                  <Text>{backend.description}</Text>
+                </Stack>
+
+                {#snippet trailing()}
+                  <Icon icon={mdiChevronRight} />
+                {/snippet}
+              </StackListItem>
+            {/if}
+          {/each}
+        </StackList>
+      </Suspense>
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button variant="ghost" {disabled} onclick={onCancel}>Cancel</Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

package/dist/components/backends/dialogs/SelectBackendModal.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type Props = {
+    title?: string;
+    leadingContent?: Snippet;
+    disabled?: boolean;
+    onSelect: (backendId: string) => void;
+    onCancel: () => void;
+};
+declare const SelectBackendModal: import("svelte").Component<Props, {}, "">;
+type SelectBackendModal = ReturnType<typeof SelectBackendModal>;
+export default SelectBackendModal;

package/dist/components/backups/BackupItem.svelte

@@ -2,8 +2,8 @@
   import type { LocalRepositoryDto } from "../../fetch-client";
   import { getRepositoryActions } from "../../services/repository.service";
   import { Badge, FormatBytes, Text } from "@immich/ui";
-  import RelativeTime from "../util/RelativeTime.svelte";
   import StackListItem from "../ui/StackListItem.svelte";
+  import RelativeTime from "../util/RelativeTime.svelte";
 
   type Props = {
     repository: LocalRepositoryDto;
@@ -39,9 +39,15 @@
     <Badge size="tiny" color="info">WORM</Badge>
   {/if}
 
-  <Badge size="tiny" color="secondary">
-    <FormatBytes bytes={repository.metrics.sizeBytes} />
-  </Badge>
+  {#if repository.meter}
+    <Badge size="tiny" color="secondary">
+      <FormatBytes bytes={repository.meter?.sizeBytes} />
+    </Badge>
+  {:else}
+    <Badge size="tiny" color="secondary">
+      Estimated <FormatBytes bytes={repository.metrics.sizeBytes} />
+    </Badge>
+  {/if}
 
   {#snippet trailing()}
     {#if repository.metrics.lastBackup && (!repository.metrics.lastSuccessfulBackup || +new Date(repository.metrics.lastBackup) > +new Date(repository.metrics.lastSuccessfulBackup))}
@@ -50,7 +56,9 @@
       </Badge>
     {:else if repository.metrics.lastSuccessfulBackup}
       <Badge size="tiny" color="success">
-        Successful <RelativeTime time={repository.metrics.lastSuccessfulBackup} />
+        Successful <RelativeTime
+          time={repository.metrics.lastSuccessfulBackup}
+        />
       </Badge>
     {:else}
       <Badge size="tiny" color="warning">Never backed up</Badge>

package/dist/components/backups/dialogs/ImportRepositoryModal.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
+  import Suspense from "../../util/Suspense.svelte";
   import { type LocalRepositoryDto } from "../../../fetch-client";
   import {
-    handleCheckImportRepository,
+    useCheckImportRepository,
     useImportRepository,
   } from "../../../services/repository.service";
-  import { FormModal, LoadingSpinner, modalManager, Text } from "@immich/ui";
-  import { onMount } from "svelte";
+  import { FormModal, modalManager, Text } from "@immich/ui";
   import ConfigureRepositoryModal from "./ConfigureRepositoryModal.svelte";
 
   type Props = {
@@ -14,16 +14,12 @@
   };
 
   let { onClose, repository }: Props = $props();
-  let readable: boolean | undefined = $state();
 
-  onMount(async () => {
-    const check = await handleCheckImportRepository(
-      repository.id,
-      repository.backends!.primary.id,
-    );
-
-    readable = check.readable;
-  });
+  // svelte-ignore state_referenced_locally
+  const check = useCheckImportRepository(
+    repository.id,
+    repository.backends!.primary.id,
+  );
 
   const mutation = useImportRepository();
 
@@ -48,15 +44,15 @@
 <FormModal
   title={`Import ${repository.name}`}
   submitText="Import"
-  disabled={readable !== true || mutation.isPending}
+  disabled={check.data?.readable !== true || mutation.isPending}
   {onSubmit}
   {onClose}
 >
-  {#if readable === undefined}
-    <LoadingSpinner />
-  {:else if readable}
-    <Text>Repository is readable and accessible!</Text>
-  {:else}
-    <Text>Can't read repository.</Text>
-  {/if}
+  <Suspense query={check}>
+    {#if check.data?.readable}
+      <Text>Repository is readable and accessible!</Text>
+    {:else}
+      <Text>Can't read repository.</Text>
+    {/if}
+  </Suspense>
 </FormModal>

package/dist/components/backups/dialogs/ReconfigureRepositoryBackendModal.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import SelectBackendModal from "../../backends/dialogs/SelectBackendModal.svelte";
+  import type { LocalRepositoryDto } from "../../../fetch-client";
+  import { useReconfigureRepositoryPrimaryBackend } from "../../../services/repository.service";
+  import { Text } from "@immich/ui";
+
+  type Props = {
+    repository: LocalRepositoryDto;
+    onClose: () => void;
+  };
+
+  const { repository, onClose }: Props = $props();
+
+  const reconfigure = useReconfigureRepositoryPrimaryBackend();
+
+  function onSelectBackend(backendId: string) {
+    reconfigure.mutate(
+      { id: repository.id, backendId },
+      { onSuccess: onClose },
+    );
+  }
+</script>
+
+<SelectBackendModal
+  title="Select new service"
+  disabled={reconfigure.isPending}
+  onSelect={onSelectBackend}
+  onCancel={onClose}
+>
+  {#snippet leadingContent()}
+    {#if repository.backends?.secondary.length}
+      TODO: UI for promoting a secondary
+    {/if}
+
+    <Text
+      >You may reset and reconfigure your backups by selecting one of the
+      following.</Text
+    >
+  {/snippet}
+</SelectBackendModal>

package/dist/components/backups/dialogs/ReconfigureRepositoryBackendModal.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { LocalRepositoryDto } from "../../../fetch-client";
+type Props = {
+    repository: LocalRepositoryDto;
+    onClose: () => void;
+};
+declare const ReconfigureRepositoryBackendModal: import("svelte").Component<Props, {}, "">;
+type ReconfigureRepositoryBackendModal = ReturnType<typeof ReconfigureRepositoryBackendModal>;
+export default ReconfigureRepositoryBackendModal;

package/dist/components/backups/dialogs/RestoreSnapshotModal.svelte

@@ -54,13 +54,12 @@
       },
     );
   };
-
 </script>
 
 <FormModal
   title="Restore Backup"
   submitText="Restore"
-  disabled={mutation.isPending}
+  disabled={(inPlace && !target.trim()) || mutation.isPending}
   {onSubmit}
   {onClose}
 >

package/dist/components/backups/dialogs/SelectRepositoryModal.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import StackList from "../../ui/StackList.svelte";
+  import StackListItem from "../../ui/StackListItem.svelte";
+  import { useInspectRepositories } from "../../../services/repository.service";
+  import {
+    Button,
+    HStack,
+    Icon,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { mdiChevronRight } from "@mdi/js";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    title?: string;
+    backendId?: string;
+
+    leadingContent?: Snippet;
+    footerContent?: Snippet;
+
+    onSelect: (repositoryId: string) => void;
+    onCancel: () => void;
+  };
+
+  const {
+    title = "Select Backup",
+    backendId,
+    leadingContent,
+    footerContent,
+    onSelect,
+    onCancel,
+  }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  const query = useInspectRepositories(backendId);
+
+  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"));
+    }),
+  );
+</script>
+
+<Modal {title} size="small" onClose={onCancel}>
+  <ModalBody>
+    <Stack>
+      {@render leadingContent?.()}
+
+      <StackList {query}>
+        {#each sortedRepositories ?? [] as repository (repository.id)}
+          {@const accessible = repository.snapshots !== undefined}
+
+          <StackListItem
+            onclick={accessible ? () => onSelect(repository.id) : undefined}
+          >
+            <Stack gap={0} class="grow min-w-0">
+              <Text>{repository.name}</Text>
+              <Text size="small" color={accessible ? "secondary" : "danger"}>
+                {#if !accessible}
+                  Can't access, is your recovery key correct?
+                {:else if repository.snapshots.length}
+                  Last backup: {new Date(
+                    repository.snapshots[0].time,
+                  ).toLocaleDateString()}
+                {:else}
+                  No backups yet
+                {/if}
+              </Text>
+            </Stack>
+
+            {#snippet trailing()}
+              {#if accessible}
+                <Icon icon={mdiChevronRight} />
+              {/if}
+            {/snippet}
+          </StackListItem>
+        {/each}
+
+        {#if (sortedRepositories ?? []).length === 0}
+          <StackListItem>
+            <Text color="muted">No backups found.</Text>
+          </StackListItem>
+        {/if}
+      </StackList>
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button variant="ghost" onclick={onCancel}>Cancel</Button>
+      {@render footerContent?.()}
+    </HStack>
+  </ModalFooter>
+</Modal>

package/dist/components/backups/dialogs/SelectRepositoryModal.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+type Props = {
+    title?: string;
+    backendId?: string;
+    leadingContent?: Snippet;
+    footerContent?: Snippet;
+    onSelect: (repositoryId: string) => void;
+    onCancel: () => void;
+};
+declare const SelectRepositoryModal: import("svelte").Component<Props, {}, "">;
+type SelectRepositoryModal = ReturnType<typeof SelectRepositoryModal>;
+export default SelectRepositoryModal;

package/dist/components/backups/snapshots-list/RepositorySnapshotsListItem.svelte

@@ -22,7 +22,8 @@
 
     {#if snapshot.summary}
       <Text color="secondary">
-        &middot; {snapshot.summary.totalFiles.toLocaleString()} files &middot;
+        &middot; {snapshot.summary.totalFiles.toLocaleString()}
+        {snapshot.summary.totalFiles > 1 ? "files" : "file"} &middot;
         <FormatBytes bytes={snapshot.summary.totalBytes} />
       </Text>
 

package/dist/components/dashboard/DashboardTotalStored.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { LocalRepositoryDto } from "../../fetch-client";
-  import { Card, CardBody, getByteUnitString } from "@immich/ui";
+  import { Badge, Card, CardBody, getByteUnitString } from "@immich/ui";
   import VisualisationGauge from "../ui/VisualisationGauge.svelte";
 
   type Props = {
@@ -10,10 +10,11 @@
   const { repositories }: Props = $props();
 
   const totalStored = $derived(
-    repositories.reduce(
-      (sum, repo) => sum + (repo.metrics?.sizeBytes ?? 0),
-      0,
-    ),
+    repositories.reduce((sum, repo) => sum + (repo.meter?.sizeBytes ?? 0), 0),
+  );
+
+  const estimatedStored = $derived(
+    repositories.reduce((sum, repo) => sum + (repo.metrics?.sizeBytes ?? 0), 0),
   );
 </script>
 
@@ -22,6 +23,11 @@
     <VisualisationGauge
       title="Total Stored"
       content={getByteUnitString(totalStored)}
-    />
+    >
+      {#snippet subtitle()}
+        <Badge size="tiny">Estimated {getByteUnitString(estimatedStored)}</Badge
+        >
+      {/snippet}
+    </VisualisationGauge>
   </CardBody>
 </Card>

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

@@ -203,7 +203,8 @@
 <FormModal
   title="Backup settings"
   size="large"
-  disabled={!validateCron(effectiveCron) ||
+  disabled={(scheduleMode === "custom" &&
+    !validateCron(effectiveCron).isError()) ||
     name.length === 0 ||
     mutation.isPending}
   onClose={() => {

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

@@ -52,7 +52,11 @@
       <Stack gap={0}>
         <Heading size="tiny">Your library</Heading>
         <Text>
-          <FormatBytes bytes={repository.metrics.sizeBytes} /> &middot;
+          {#if repository.meter}
+            Estimated <FormatBytes bytes={repository.meter.sizeBytes} />
+          {:else}
+            <FormatBytes bytes={repository.metrics.sizeBytes} />
+          {/if} &middot;
           <span class="lowercase"
             >{cronstrue.toString(schedule.cron, {
               verbose: true,