@futo-org/backups-orchestrator-ui 0.1.71 → 0.3.1

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,

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/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>

package/dist/components/ui/StackListItem.svelte.d.ts

@@ -6,6 +6,7 @@ type Props = {
     children: Snippet;
     trailing?: Snippet;
     actions?: ActionItem[];
+    disabled?: boolean;
     onclick?: () => void;
 };
 declare const StackListItem: import("svelte").Component<Props, {}, "">;

package/dist/fetch-client.d.ts

@@ -17,6 +17,7 @@ export type BackendType = "yucca" | "local" | "s3";
 export type BackendDto = {
     id: string;
     "type": BackendType;
+    description: string;
     isOnline: boolean;
     error?: string;
 };
@@ -105,6 +106,11 @@ export type RepositoryMetricsDto = {
     lastBackupDuration?: number;
     sizeBytes: number;
 };
+export type RepositoryMeterDto = {
+    sizeBytes: number;
+    objectCount: number;
+    lastUpdated?: string;
+};
 export type RepositoryBackendDto = {
     id: string;
     "type": BackendType;
@@ -123,6 +129,7 @@ export type LocalRepositoryDto = {
     worm: boolean;
     name: string;
     metrics: RepositoryMetricsDto;
+    meter?: RepositoryMeterDto;
     backends?: RepositoryBackendsDto;
     configuration?: RepositoryConfigurationDto;
 };
@@ -151,6 +158,7 @@ export type InspectedLocalRepositoryDto = {
     worm: boolean;
     name: string;
     metrics: RepositoryMetricsDto;
+    meter?: RepositoryMeterDto;
     backends?: RepositoryBackendsDto;
     configuration?: RepositoryConfigurationDto;
     snapshots: SnapshotDto[];
@@ -172,6 +180,9 @@ export type LogResponseDto = {
 export type RepositoryCheckImportResponseDto = {
     readable: boolean;
 };
+export type RepositoryPrimaryBackendReconfigureRequestDto = {
+    backendId: string;
+};
 export type RunStatus = "incomplete" | "complete" | "failed";
 export type RunType = "schedule" | "restore" | "backup" | "forget";
 export type RunDto = {
@@ -262,7 +273,9 @@ export declare function createRepository(repositoryCreateRequestDto: RepositoryC
     backend?: string;
 }, opts?: Oazapfts.RequestOpts): Promise<RepositoryCreateResponseDto>;
 export declare function getRepositories(opts?: Oazapfts.RequestOpts): Promise<RepositoryListResponseDto>;
-export declare function inspectRepositories(opts?: Oazapfts.RequestOpts): Promise<RepositoryInspectResponseDto>;
+export declare function inspectRepositories({ backend }?: {
+    backend?: string;
+}, opts?: Oazapfts.RequestOpts): Promise<RepositoryInspectResponseDto>;
 export declare function updateRepository(id: string, repositoryUpdateRequestDto: RepositoryUpdateRequestDto, { backend }?: {
     backend?: string;
 }, opts?: Oazapfts.RequestOpts): Promise<RepositoryUpdateResponseDto>;
@@ -270,6 +283,7 @@ export declare function deleteRepository(id: string, opts?: Oazapfts.RequestOpts
 export declare function createBackup(id: string, opts?: Oazapfts.RequestOpts): Promise<LogResponseDto>;
 export declare function checkImportRepository(id: string, backend: string, opts?: Oazapfts.RequestOpts): Promise<RepositoryCheckImportResponseDto>;
 export declare function importRepository(id: string, backend: string, opts?: Oazapfts.RequestOpts): Promise<RepositoryCreateResponseDto>;
+export declare function reconfigureRepositoryPrimaryBackend(id: string, repositoryPrimaryBackendReconfigureRequestDto: RepositoryPrimaryBackendReconfigureRequestDto, opts?: Oazapfts.RequestOpts): Promise<RepositoryCreateResponseDto>;
 export declare function getRunHistory(id: string, opts?: Oazapfts.RequestOpts): Promise<RunHistoryResponseDto>;
 export declare function getSnapshots(id: string, opts?: Oazapfts.RequestOpts): Promise<ListSnapshotsResponseDto>;
 export declare function pruneRepository(id: string, opts?: Oazapfts.RequestOpts): Promise<LogResponseDto>;

package/dist/fetch-client.js

@@ -99,8 +99,10 @@ export function getRepositories(opts) {
         ...opts
     }));
 }
-export function inspectRepositories(opts) {
-    return oazapfts.ok(oazapfts.fetchJson("/api/yucca/repository/inspect", {
+export function inspectRepositories({ backend } = {}, opts) {
+    return oazapfts.ok(oazapfts.fetchJson(`/api/yucca/repository/inspect${QS.query(QS.explode({
+        backend
+    }))}`, {
         ...opts
     }));
 }
@@ -140,6 +142,13 @@ export function importRepository(id, backend, opts) {
         method: "POST"
     }));
 }
+export function reconfigureRepositoryPrimaryBackend(id, repositoryPrimaryBackendReconfigureRequestDto, opts) {
+    return oazapfts.ok(oazapfts.fetchJson(`/api/yucca/repository/${encodeURIComponent(id)}/backend`, oazapfts.json({
+        ...opts,
+        method: "PUT",
+        body: repositoryPrimaryBackendReconfigureRequestDto
+    })));
+}
 export function getRunHistory(id, opts) {
     return oazapfts.ok(oazapfts.fetchJson(`/api/yucca/repository/${encodeURIComponent(id)}/runs`, {
         ...opts

package/dist/services/backend.service.d.ts

@@ -1,5 +1,5 @@
 import { SocketEvent } from '../events';
-import { type BackendDto, type CreateLocalBackendRequestDto } from '../fetch-client';
+import { type BackendDto, type CreateLocalBackendRequestDto, type LocalRepositoryDto, type RepositoryBackendDto } from '../fetch-client';
 import { type ActionItem } from '@immich/ui';
 export declare const backendKeys: {
     all: readonly ["backends"];
@@ -13,6 +13,12 @@ export declare const useBackendEventHandler: () => {
 export declare const handleYuccaLogin: (onCreate?: (backendId: string) => void) => Promise<void>;
 export declare const handleSetupLocalStorage: (onCreate?: (backendId: string) => void) => void;
 export declare const useCreateLocalBackend: () => import("@tanstack/svelte-query").CreateMutationResult<import("../fetch-client").BackendResponseDto, Error, CreateLocalBackendRequestDto, unknown>;
-export declare const getBackendActions: (backend: BackendDto) => {
+export declare const handleReconfigureRepositoryBackend: (repository: LocalRepositoryDto) => Promise<void>;
+export declare const handleRemoveRepositoryBackend: (_backend: BackendDto, _repositoryBackend: RepositoryBackendDto) => void;
+export declare const getBackendActions: (repository: LocalRepositoryDto | undefined, backend: BackendDto, repositoryBackend?: RepositoryBackendDto & {
+    primary?: boolean;
+}) => {
     LoginAgain: ActionItem;
+    Reconfigure: ActionItem;
+    Remove: ActionItem;
 };

package/dist/services/backend.service.js

@@ -1,5 +1,6 @@
-import CreateLocalBackend from '../components/backends/CreateLocalBackend.svelte';
-import OAuthDeviceFlow from '../components/backends/OAuthDeviceFlow.svelte';
+import CreateLocalBackend from '../components/backends/dialogs/CreateLocalBackendModal.svelte';
+import OAuthDeviceFlow from '../components/backends/dialogs/OAuthDeviceFlowModal.svelte';
+import ReconfigureRepositoryBackendModal from '../components/backups/dialogs/ReconfigureRepositoryBackendModal.svelte';
 import { SocketEvent } from '../events';
 import { createLocalBackend, getBackends, oidcDeviceFlow, } from '../fetch-client';
 import { queryClient } from '../query-client';
@@ -47,15 +48,42 @@ export const handleSetupLocalStorage = (onCreate) => {
 };
 export const useCreateLocalBackend = () => createMutation(() => ({
     mutationFn: (dto) => createLocalBackend(dto),
-    onSuccess: () => void queryClient.invalidateQueries({ queryKey: backendKeys.all }),
     onError: (error) => handleError(error, 'Failed to create local backend'),
 }), () => queryClient);
-export const getBackendActions = (backend) => {
+export const handleReconfigureRepositoryBackend = async (repository) => {
+    await modalManager.show(ReconfigureRepositoryBackendModal, {
+        repository,
+    });
+};
+export const handleRemoveRepositoryBackend = (_backend, _repositoryBackend) => {
+    alert('TODO: implement me when multi-repository-backend support is added');
+};
+export const getBackendActions = (repository, backend, repositoryBackend) => {
     const LoginAgain = {
         icon: mdiLogin,
         title: 'Login again',
         onAction: () => void handleYuccaLogin(),
         $if: () => backend.type === 'yucca' && !backend.isOnline,
     };
-    return { LoginAgain };
+    const Reconfigure = {
+        icon: mdiLogin,
+        title: 'Reconfigure',
+        onAction: () => void handleReconfigureRepositoryBackend(repository),
+        $if: () => repositoryBackend
+            ? backend.isOnline &&
+                !repositoryBackend.online &&
+                repositoryBackend.primary === true
+            : false,
+    };
+    const Remove = {
+        icon: mdiLogin,
+        title: 'Remove',
+        onAction: () => void handleRemoveRepositoryBackend(backend, repositoryBackend),
+        $if: () => repositoryBackend
+            ? backend.isOnline &&
+                !repositoryBackend.online &&
+                repositoryBackend.primary === false
+            : false,
+    };
+    return { LoginAgain, Reconfigure, Remove };
 };

package/dist/services/integrations.service.js

@@ -17,7 +17,6 @@ export const useIntegrationEventHandler = () => ({
 });
 export const useConfigureImmichIntegration = () => createMutation(() => ({
     mutationFn: (dto) => configureImmichIntegration(dto),
-    onSuccess: () => void queryClient.invalidateQueries({ queryKey: integrationsKeys.all }),
     onError: (error) => handleError(error, 'Failed to save backup settings'),
 }), () => queryClient);
 export const useConfigureImmichDefaults = () => createMutation(() => ({
@@ -35,8 +34,5 @@ export const useConfigureImmichDefaults = () => createMutation(() => ({
             libraries: 'all',
         });
     },
-    onSuccess: () => {
-        void queryClient.invalidateQueries({ queryKey: integrationsKeys.all });
-    },
     onError: (error) => handleError(error, 'Failed to create backup'),
 }), () => queryClient);

package/dist/services/repository.service.d.ts

@@ -4,10 +4,11 @@ import { type InspectedLocalRepositoryDto, type LocalRepositoryDto, type Reposit
 import { type ActionItem } from '@immich/ui';
 export declare const repositoryKeys: {
     all: readonly ["repositories"];
-    inspectAll: readonly ["repositories", "inspect"];
+    inspect: (backendId?: string) => readonly ["repositories", "inspect", string | undefined];
+    checkImport: (id: string, backendId: string) => readonly ["repositories", string, "check-import", string];
 };
 export declare const useRepositories: (initialData?: LocalRepositoryDto[]) => import("@tanstack/svelte-query").CreateQueryResult<sdk.LocalRepositoryDto[], Error>;
-export declare const useInspectRepositories: (initialData?: InspectedLocalRepositoryDto[]) => import("@tanstack/svelte-query").CreateQueryResult<sdk.InspectedLocalRepositoryDto[], Error>;
+export declare const useInspectRepositories: (backendId?: string, initialData?: InspectedLocalRepositoryDto[]) => import("@tanstack/svelte-query").CreateQueryResult<sdk.InspectedLocalRepositoryDto[], Error>;
 export declare const useRepositoryEventHandler: () => {
     onRepositoryCreate(event: SocketEvent<{
         repository: LocalRepositoryDto;
@@ -16,9 +17,11 @@ export declare const useRepositoryEventHandler: () => {
         repositoryId: string;
         repository: Partial<LocalRepositoryDto>;
     }>): void;
-    onRepositoryDelete(): void;
+    onRepositoryDelete(event: SocketEvent<{
+        repositoryId: string;
+    }>): void;
 };
-export declare const handleCheckImportRepository: (id: string, backendId: string) => Promise<sdk.RepositoryCheckImportResponseDto>;
+export declare const useCheckImportRepository: (id: string, backendId: string) => import("@tanstack/svelte-query").CreateQueryResult<sdk.RepositoryCheckImportResponseDto, Error>;
 export declare const useCreateRepository: () => import("@tanstack/svelte-query").CreateMutationResult<sdk.RepositoryCreateResponseDto, Error, sdk.RepositoryCreateRequestDto, unknown>;
 export declare const useImportRepository: () => import("@tanstack/svelte-query").CreateMutationResult<sdk.RepositoryCreateResponseDto, Error, {
     id: string;
@@ -29,6 +32,10 @@ export declare const useUpdateRepository: () => import("@tanstack/svelte-query")
     dto: RepositoryUpdateRequestDto;
     local?: boolean;
 }, unknown>;
+export declare const useReconfigureRepositoryPrimaryBackend: () => import("@tanstack/svelte-query").CreateMutationResult<sdk.RepositoryCreateResponseDto, Error, {
+    id: string;
+    backendId: string;
+}, unknown>;
 export declare const useRemoveRepository: () => import("@tanstack/svelte-query").CreateMutationResult<never, Error, {
     id: string;
     local?: boolean;

package/dist/services/repository.service.js

@@ -6,7 +6,7 @@ import MetricsHistoryModal from '../components/backups/metrics-history/MetricsHi
 import RunHistoryModal from '../components/backups/run-history/RunHistoryModal.svelte';
 import SnapshotsListModal from '../components/backups/snapshots-list/SnapshotsListModal.svelte';
 import { SocketEvent } from '../events';
-import { deleteRepository, inspectRepositories, updateRepository, } from '../fetch-client';
+import { deleteRepository, inspectRepositories, reconfigureRepositoryPrimaryBackend, updateRepository, } from '../fetch-client';
 import { getProvider } from '../providers';
 import { queryClient } from '../query-client';
 import { handleError } from '../utils/handle-error';
@@ -15,7 +15,8 @@ import { mdiCog, mdiFormatListBulletedType, mdiHistory, mdiImport, mdiListStatus
 import { createMutation, createQuery } from '@tanstack/svelte-query';
 export const repositoryKeys = {
     all: ['repositories'],
-    inspectAll: ['repositories', 'inspect'],
+    inspect: (backendId) => ['repositories', 'inspect', backendId],
+    checkImport: (id, backendId) => ['repositories', id, 'check-import', backendId],
 };
 export const useRepositories = (initialData) => createQuery(() => ({
     queryKey: repositoryKeys.all,
@@ -24,9 +25,9 @@ export const useRepositories = (initialData) => createQuery(() => ({
         .then(({ repositories }) => repositories),
     initialData,
 }), () => queryClient);
-export const useInspectRepositories = (initialData) => createQuery(() => ({
-    queryKey: repositoryKeys.inspectAll,
-    queryFn: () => inspectRepositories().then(({ repositories }) => repositories),
+export const useInspectRepositories = (backendId, initialData) => createQuery(() => ({
+    queryKey: repositoryKeys.inspect(backendId),
+    queryFn: () => inspectRepositories({ backend: backendId }).then(({ repositories }) => repositories),
     initialData,
 }), () => queryClient);
 export const useRepositoryEventHandler = () => {
@@ -50,42 +51,33 @@ export const useRepositoryEventHandler = () => {
                     : void 0;
             });
         },
-        onRepositoryDelete() {
-            queryClient
-                .invalidateQueries({
-                queryKey: repositoryKeys.all,
-            })
-                .catch(() => void 0);
+        onRepositoryDelete(event) {
+            queryClient.setQueryData(repositoryKeys.all, (data) => data?.filter((entry) => entry.id !== event.data.repositoryId));
         },
     };
 };
-export const handleCheckImportRepository = async (id, backendId) => {
-    try {
-        return await sdk.checkImportRepository(id, backendId);
-    }
-    catch (error) {
-        handleError(error, 'Failed to check repository');
-        throw error;
-    }
-};
+export const useCheckImportRepository = (id, backendId) => createQuery(() => ({
+    queryKey: repositoryKeys.checkImport(id, backendId),
+    queryFn: () => sdk.checkImportRepository(id, backendId),
+}), () => queryClient);
 export const useCreateRepository = () => createMutation(() => ({
     mutationFn: (dto) => sdk.createRepository(dto),
-    onSuccess: () => void queryClient.invalidateQueries({ queryKey: repositoryKeys.all }),
     onError: (error) => handleError(error, 'Failed to create repository'),
 }), () => queryClient);
 export const useImportRepository = () => createMutation(() => ({
     mutationFn: ({ id, backendId }) => sdk.importRepository(id, backendId),
-    onSuccess: () => void queryClient.invalidateQueries({ queryKey: repositoryKeys.all }),
     onError: (error) => handleError(error, 'Failed to import repository'),
 }), () => queryClient);
 export const useUpdateRepository = () => createMutation(() => ({
     mutationFn: ({ id, dto, local = false, }) => (local ? sdk.updateRepository(id, dto) : updateRepository(id, dto)),
-    onSuccess: () => void queryClient.invalidateQueries({ queryKey: repositoryKeys.all }),
     onError: (error) => handleError(error, 'Failed to update repository'),
 }), () => queryClient);
+export const useReconfigureRepositoryPrimaryBackend = () => createMutation(() => ({
+    mutationFn: ({ id, backendId }) => reconfigureRepositoryPrimaryBackend(id, { backendId }),
+    onError: (error) => handleError(error, 'Failed to reconfigure backend'),
+}), () => queryClient);
 export const useRemoveRepository = () => createMutation(() => ({
     mutationFn: ({ id, local = false }) => local ? sdk.deleteRepository(id) : deleteRepository(id),
-    onSuccess: () => void queryClient.invalidateQueries({ queryKey: repositoryKeys.all }),
     onError: (error) => handleError(error, 'Failed to delete repository'),
 }), () => queryClient);
 export const handleCreateBackup = async (id) => {

package/dist/services/schedule.service.js

@@ -50,12 +50,10 @@ export const handleGetSchedules = async () => {
 };
 export const useCreateSchedule = () => createMutation(() => ({
     mutationFn: (dto) => sdk.createSchedule(dto),
-    onSuccess: () => void queryClient.invalidateQueries({ queryKey: scheduleKeys.all }),
     onError: (error) => handleError(error, 'Failed to create schedule'),
 }), () => queryClient);
 export const useUpdateSchedule = () => createMutation(() => ({
     mutationFn: ({ id, dto, }) => sdk.updateSchedule(id, dto),
-    onSuccess: () => void queryClient.invalidateQueries({ queryKey: scheduleKeys.all }),
     onError: (error) => handleError(error, 'Failed to update schedule'),
 }), () => queryClient);
 export const handlePauseSchedule = async (id, name) => {

package/package.json

@@ -1,6 +1,8 @@
 {
   "name": "@futo-org/backups-orchestrator-ui",
-  "version": "0.1.71",
+  "repository": "https://github.com/immich-app/yucca",
+  "description": "Backups orchestrator (UI library)",
+  "version": "0.3.1",
   "license": "Source First License 1.1",
   "files": [
     "dist",
@@ -27,7 +29,7 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.57.0",
+    "@playwright/test": "1.59.1",
     "@sveltejs/adapter-auto": "^7.0.0",
     "@sveltejs/kit": "^2.50.1",
     "@sveltejs/package": "^2.5.7",
@@ -38,7 +40,7 @@
     "@types/luxon": "^3.7.1",
     "@vitest/browser-playwright": "^4.0.18",
     "oazapfts": "^7.0.1",
-    "playwright": "^1.57.0",
+    "playwright": "1.59.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.17",
     "svelte": "^5.48.2",
@@ -62,7 +64,7 @@
     "lodash.debounce": "^4.0.8",
     "luxon": "^3.7.2",
     "socket.io-client": "^4.8.3",
-    "@futo-org/backups-api-client": "^0.1.71"
+    "@futo-org/backups-api-client": "^0.3.1"
   },
   "scripts": {
     "dev": "vite dev --port 5174",

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

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

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

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