@futo-org/backups-orchestrator-ui 0.26.0 → 0.28.0

package/dist/components/backends/BackendItem.svelte

@@ -9,7 +9,7 @@
     getBackendActions,
     handleStartYuccaLogin,
   } from "../../services/backend.service";
-  import { Badge, Icon, Text } from "@immich/ui";
+  import { Badge, Icon } from "@immich/ui";
   import { mdiCloudOutline, mdiHarddisk, mdiShieldCheckOutline } from "@mdi/js";
   import StackListItem from "../ui/StackListItem.svelte";
 
@@ -33,6 +33,22 @@
     s3: "S3 Server",
   };
 
+  const BackendDescriptions: Record<BackendType, string> = {
+    yucca: "Hosted cloud backup storage",
+    local: "A folder on this computer",
+    s3: "An S3-compatible server",
+  };
+
+  const title = $derived(
+    repositoryBackend?.primary
+      ? `${BackendNames[backend.type]} (primary)`
+      : BackendNames[backend.type],
+  );
+
+  const online = $derived(
+    backend.isOnline && (!repositoryBackend || repositoryBackend.online),
+  );
+
   const { LoginAgain, Reconfigure } = $derived(
     getBackendActions(repository, backend, repositoryBackend, () =>
       handleStartYuccaLogin(),
@@ -40,34 +56,22 @@
   );
 </script>
 
-<StackListItem actions={[LoginAgain, Reconfigure]}>
+<StackListItem {title} actions={[LoginAgain, Reconfigure]}>
   {#snippet icon()}
     <Icon icon={BackendIcons[backend.type]} />
   {/snippet}
 
-  <Text>{BackendNames[backend.type]}</Text>
-
-  {#if repositoryBackend?.primary}
-    <Text size="small">(primary)</Text>
-  {/if}
+  {backend.description ?? BackendDescriptions[backend.type]}
 
   {#snippet trailing()}
-    {#if repositoryBackend}
-      <Badge
-        color={backend.isOnline && repositoryBackend.online
-          ? "success"
-          : "danger"}
-        size="small"
-        >{backend.isOnline
-          ? repositoryBackend.online
-            ? "Active"
-            : "Missing on service"
-          : "Offline"}</Badge
-      >
-    {:else}
-      <Badge color={backend.isOnline ? "success" : "danger"} size="small"
-        >{backend.isOnline ? "Online" : "Offline"}</Badge
-      >
-    {/if}
+    <Badge color={online ? "primary" : "danger"} size="small">
+      {#if !backend.isOnline}
+        Offline
+      {:else if repositoryBackend}
+        {repositoryBackend.online ? "Active" : "Missing on service"}
+      {:else}
+        Online
+      {/if}
+    </Badge>
   {/snippet}
 </StackListItem>

package/dist/components/backends/BackendsList.svelte

@@ -15,9 +15,10 @@
 
   type Props = {
     repository?: LocalRepositoryDto;
+    actions?: boolean;
   };
 
-  const { repository }: Props = $props();
+  const { repository, actions = false }: Props = $props();
 
   const { advanced } = options;
   const query = useBackends();
@@ -38,39 +39,37 @@
 
 <OnEvents {onBackendCreate} />
 
-<Suspense {query}>
-  <StackList>
-    {#snippet title()}
-      {#if repository}
-        Where your backup is stored
-      {:else}
-        Configured backends
-      {/if}
-    {/snippet}
+{#snippet heading()}
+  Where your backup is stored
+{/snippet}
 
-    {#each query.data as backend (backend.id)}
-      {@const repositoryBackend = repositoryBackends.find(
-        ({ id }) => backend.id === id,
-      )}
+<StackList title={repository ? heading : undefined}>
+  <Suspense {query}>
+    {#snippet children(backends)}
+      {#each backends as backend (backend.id)}
+        {@const repositoryBackend = repositoryBackends.find(
+          ({ id }) => backend.id === id,
+        )}
 
-      {#if typeof repository === typeof repositoryBackend}
-        <BackendItem {repository} {backend} {repositoryBackend} />
-      {/if}
-    {/each}
-  </StackList>
+        {#if typeof repository === typeof repositoryBackend}
+          <BackendItem {repository} {backend} {repositoryBackend} />
+        {/if}
+      {/each}
+    {/snippet}
+  </Suspense>
+</StackList>
 
-  {#if $advanced}
-    <HStack>
-      <Button
-        size="small"
-        variant="outline"
-        onclick={() => handleStartYuccaLogin()}>Login with FUTO Backups</Button
-      >
-      <Button
-        size="small"
-        variant="outline"
-        onclick={() => handleSetupLocalStorage()}>New local storage</Button
-      >
-    </HStack>
-  {/if}
-</Suspense>
+{#if actions || $advanced}
+  <HStack>
+    <Button
+      size="small"
+      variant="outline"
+      onclick={() => handleStartYuccaLogin()}>Login with FUTO Backups</Button
+    >
+    <Button
+      size="small"
+      variant="outline"
+      onclick={() => handleSetupLocalStorage()}>New local storage</Button
+    >
+  </HStack>
+{/if}

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

@@ -1,6 +1,7 @@
 import type { LocalRepositoryDto } from "../../fetch-client";
 type Props = {
     repository?: LocalRepositoryDto;
+    actions?: boolean;
 };
 declare const BackendsList: import("svelte").Component<Props, {}, "">;
 type BackendsList = ReturnType<typeof BackendsList>;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import StackList from "../../ui/StackList.svelte";
-  import StackListItem from "../../ui/StackListItem.svelte";
+  import StackListOption from "../../ui/StackListOption.svelte";
   import Suspense from "../../util/Suspense.svelte";
   import {
     handleSetupLocalStorage,
@@ -15,9 +15,8 @@
     ModalBody,
     ModalFooter,
     Stack,
-    Text,
   } from "@immich/ui";
-  import { mdiChevronRight, mdiHarddisk, mdiShieldCheck } from "@mdi/js";
+  import { mdiHarddisk, mdiShieldCheck } from "@mdi/js";
   import type { Snippet } from "svelte";
 
   type Props = {
@@ -61,62 +60,52 @@
     <Stack>
       {@render leadingContent?.()}
 
-      <Suspense query={backends}>
-        <StackList>
-          <StackListItem {disabled} onclick={onFutoBackups}>
-            {#snippet icon()}
-              <Icon icon={mdiShieldCheck} size="36px" />
-            {/snippet}
+      <StackList>
+        <StackListOption
+          {disabled}
+          title="FUTO Backups"
+          onclick={onFutoBackups}
+        >
+          {#snippet icon()}
+            <Icon icon={mdiShieldCheck} />
+          {/snippet}
 
-            <Stack gap={0}>
-              <Text class="font-bold">FUTO Backups</Text>
-              <Text>Simple, hosted backups.</Text>
-            </Stack>
+          Simple, hosted backups.
+        </StackListOption>
+        <StackListOption
+          {disabled}
+          title="Local Storage"
+          onclick={onLocalBackups}
+        >
+          {#snippet icon()}
+            <Icon icon={mdiHarddisk} />
+          {/snippet}
 
-            {#snippet trailing()}
-              <Icon icon={mdiChevronRight} />
-            {/snippet}
-          </StackListItem>
-          <StackListItem {disabled} onclick={onLocalBackups}>
-            {#snippet icon()}
-              <Icon icon={mdiHarddisk} size="36px" />
-            {/snippet}
+          A folder on this computer.
+        </StackListOption>
 
-            <Stack gap={0}>
-              <Text class="font-bold">Local Storage</Text>
-              <Text>A folder on this computer.</Text>
-            </Stack>
+        <Suspense query={backends}>
+          {#snippet children(available)}
+            {#each available as backend (backend.id)}
+              {#if backend.type === "local"}
+                <StackListOption
+                  {disabled}
+                  title="Existing Local Storage"
+                  onclick={() => {
+                    onSelect(backend.id);
+                  }}
+                >
+                  {#snippet icon()}
+                    <Icon icon={mdiHarddisk} />
+                  {/snippet}
 
-            {#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>
+                  {backend.description}
+                </StackListOption>
+              {/if}
+            {/each}
+          {/snippet}
+        </Suspense>
+      </StackList>
     </Stack>
   </ModalBody>
   <ModalFooter>

package/dist/components/backups/BackupItem.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { LocalRepositoryDto } from "../../fetch-client";
   import { getRepositoryActions } from "../../services/repository.service";
-  import { Badge, FormatBytes, Text } from "@immich/ui";
+  import { Badge, FormatBytes, Icon } from "@immich/ui";
+  import { mdiArchiveOutline } from "@mdi/js";
   import StackListItem from "../ui/StackListItem.svelte";
   import RelativeTime from "../util/RelativeTime.svelte";
 
@@ -11,48 +12,54 @@
 
   const { repository }: Props = $props();
 
+  const BackendNames = {
+    yucca: "FUTO Backups",
+    local: "Local Storage",
+    s3: "S3 Server",
+  };
+
+  const failed = $derived(
+    repository.metrics.lastBackup &&
+      (!repository.metrics.lastSuccessfulBackup ||
+        +new Date(repository.metrics.lastBackup) >
+          +new Date(repository.metrics.lastSuccessfulBackup)),
+  );
+
   const { BackupNow, Snapshots, History, Configure, Import, MetricsHistory } =
     $derived(getRepositoryActions(repository));
 </script>
 
 <StackListItem
+  title={repository.name}
+  color={failed ? "danger" : "primary"}
   actions={[BackupNow, Snapshots, History, Configure, Import, MetricsHistory]}
 >
-  <Text>{repository.name}</Text>
+  {#snippet icon()}
+    <Icon icon={mdiArchiveOutline} />
+  {/snippet}
 
   {#if repository.backends}
-    <Badge size="tiny" color="info">
-      {#if repository.backends.primary.type === "yucca"}
-        FUTO Backups
-      {:else if repository.backends.primary.type === "local"}
-        Local Storage
-      {:else}
-        S3 Server
-      {/if}
-    </Badge>
-    {#if !repository.backends.primary.online}
-      <Badge size="tiny" color="danger">Offline</Badge>
-    {/if}
-  {/if}
-
-  {#if repository.worm}
-    <Badge size="tiny" color="info">WORM</Badge>
+    {BackendNames[repository.backends.primary.type]} &middot;
   {/if}
 
   {#if repository.meter}
-    <Badge size="tiny" color="secondary">
-      <FormatBytes bytes={repository.meter?.sizeBytes} />
-    </Badge>
+    <FormatBytes bytes={repository.meter.sizeBytes} />
   {:else}
-    <Badge size="tiny" color="secondary">
-      Estimated <FormatBytes bytes={repository.metrics.sizeBytes} />
-    </Badge>
+    Estimated <FormatBytes bytes={repository.metrics.sizeBytes} />
+  {/if}
+
+  {#if repository.worm}
+    &middot; write-only
   {/if}
 
   {#snippet trailing()}
-    {#if repository.metrics.lastBackup && (!repository.metrics.lastSuccessfulBackup || +new Date(repository.metrics.lastBackup) > +new Date(repository.metrics.lastSuccessfulBackup))}
+    {#if repository.backends && !repository.backends.primary.online}
+      <Badge size="tiny" color="danger">Offline</Badge>
+    {/if}
+
+    {#if failed}
       <Badge size="tiny" color="danger">
-        Failed <RelativeTime time={repository.metrics.lastBackup} />
+        Failed <RelativeTime time={repository.metrics.lastBackup!} />
       </Badge>
     {:else if repository.metrics.lastSuccessfulBackup}
       <Badge size="tiny" color="success">

package/dist/components/backups/BackupStatus.svelte

@@ -0,0 +1,200 @@
+<script module lang="ts">
+  export type BackupStatusType = "backup" | "restore" | "forget";
+
+  export type BackupStatusState =
+    | "connecting"
+    | "running"
+    | "complete"
+    | "failed";
+</script>
+
+<script lang="ts">
+  import RelativeTime from "../util/RelativeTime.svelte";
+  import {
+    Alert,
+    Button,
+    Heading,
+    HStack,
+    ProgressBar,
+    Scrollable,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    title: string;
+    type: BackupStatusType;
+    state: BackupStatusState;
+    progress?: number;
+    start?: string;
+    duration?: string;
+    errors?: string[];
+    details?: Snippet;
+    currentFiles?: string[];
+    advanced?: Snippet;
+    onRetry?: () => void;
+  };
+
+  const {
+    title,
+    type,
+    state: backupState,
+    progress = 0,
+    start,
+    duration,
+    errors = [],
+    details,
+    currentFiles = [],
+    advanced,
+    onRetry,
+  }: Props = $props();
+
+  let showErrors = $state(false);
+
+  const phases: Record<BackupStatusType, [string, string, string]> = {
+    backup: ["Preparing backup", "Backing up", "Finalizing backup"],
+    restore: ["Preparing restore", "Restoring", "Finalizing restore"],
+    forget: ["Preparing prune", "Pruning", "Finalizing prune"],
+  };
+
+  const succeeded: Record<BackupStatusType, string> = {
+    backup: "Your library was backed up successfully",
+    restore: "Your library was restored successfully",
+    forget: "Old backups were pruned successfully",
+  };
+
+  const failed: Record<BackupStatusType, string> = {
+    backup: "Your library could not be backed up",
+    restore: "Your library could not be restored",
+    forget: "Old backups could not be pruned",
+  };
+
+  const reassurance: Record<BackupStatusType, string> = {
+    backup: "No changes were made to your existing backups.",
+    restore: "Your backups are untouched — nothing was lost.",
+    forget: "No backups were removed.",
+  };
+
+  const running: Record<BackupStatusType, string> = {
+    backup:
+      "You can close this window and the backup will continue in the background.",
+    restore:
+      "You can close this window and the restore will continue in the background.",
+    forget:
+      "You can close this window and the prune will continue in the background.",
+  };
+
+  const phase = $derived(
+    progress <= 0
+      ? phases[type][0]
+      : progress >= 0.95
+        ? phases[type][2]
+        : phases[type][1],
+  );
+
+  const headline = $derived.by(() => {
+    switch (backupState) {
+      case "connecting": {
+        return "Connecting…";
+      }
+      case "failed": {
+        return failed[type];
+      }
+      case "complete": {
+        return succeeded[type];
+      }
+      default: {
+        return `${phase} · ${Math.round(progress * 100)}%`;
+      }
+    }
+  });
+
+  const titleColor = $derived(
+    backupState === "complete" ? "success" : backupState === "failed" ? "danger" : "primary",
+  );
+
+  const terminal = $derived(backupState === "complete" || backupState === "failed");
+</script>
+
+<Stack gap={4}>
+  <Stack gap={2}>
+    <Heading size="medium" color={titleColor} fontWeight="bold">{title}</Heading>
+
+    <Stack gap={1}>
+      <Heading size="small">{headline}</Heading>
+
+      {#if backupState === "running" && start}
+        <Text color="muted">Started <RelativeTime time={start} /></Text>
+      {:else if backupState === "failed"}
+        <Text color="muted">{reassurance[type]}</Text>
+      {:else if duration}
+        <Text color="muted">Completed in {duration}</Text>
+      {/if}
+
+      {#if backupState === "complete" && errors.length > 0}
+        <Text color="warning">
+          Completed with {errors.length}
+          {errors.length === 1 ? "warning" : "warnings"}.
+        </Text>
+      {/if}
+    </Stack>
+  </Stack>
+
+  {#if !terminal}
+    <ProgressBar
+      {progress}
+      shape="round"
+      size="tiny"
+      class="bg-primary-100 border-none"
+    />
+  {/if}
+
+  {#if terminal && (errors.length > 0 || (backupState === "failed" && onRetry))}
+    <HStack gap={4} class="items-center">
+      {#if backupState === "failed" && onRetry}
+        <Button shape="round" onclick={onRetry}>Try again</Button>
+      {/if}
+
+      {#if errors.length > 0}
+        <Button
+          variant="ghost"
+          shape="round"
+          onclick={() => (showErrors = !showErrors)}
+        >
+          {showErrors ? "Hide details" : "View details"}
+        </Button>
+      {/if}
+    </HStack>
+
+    {#if showErrors}
+      <Scrollable class="max-h-32">
+        <Stack gap={1}>
+          {#each errors as error, index (index)}
+            <Alert color={backupState === "failed" ? "danger" : "warning"}>
+              {error}
+            </Alert>
+          {/each}
+        </Stack>
+      </Scrollable>
+    {/if}
+  {/if}
+
+  {#if backupState === "running"}
+    <Text color="muted">{running[type]}</Text>
+  {:else if backupState === "complete" && details}
+    <Text color="muted">{@render details()}</Text>
+  {/if}
+
+  {#if backupState === "running" && currentFiles.length > 0}
+    <Stack gap={1}>
+      {#each currentFiles.slice(0, 3) as file, index (index)}
+        <Text size="small" color="muted" class="truncate" title={file}>
+          {file}
+        </Text>
+      {/each}
+    </Stack>
+  {/if}
+
+  {@render advanced?.()}
+</Stack>

package/dist/components/backups/BackupStatus.svelte.d.ts

@@ -0,0 +1,19 @@
+export type BackupStatusType = "backup" | "restore" | "forget";
+export type BackupStatusState = "connecting" | "running" | "complete" | "failed";
+import type { Snippet } from "svelte";
+type Props = {
+    title: string;
+    type: BackupStatusType;
+    state: BackupStatusState;
+    progress?: number;
+    start?: string;
+    duration?: string;
+    errors?: string[];
+    details?: Snippet;
+    currentFiles?: string[];
+    advanced?: Snippet;
+    onRetry?: () => void;
+};
+declare const BackupStatus: import("svelte").Component<Props, {}, "">;
+type BackupStatus = ReturnType<typeof BackupStatus>;
+export default BackupStatus;

package/dist/components/backups/BackupsList.svelte

@@ -4,9 +4,11 @@
     useRepositories,
     useRepositoryEventHandler,
   } from "../../services/repository.service";
-  import { Button, HStack, modalManager, Stack, Text } from "@immich/ui";
+  import { Button, HStack, modalManager, Stack } from "@immich/ui";
   import StackList from "../ui/StackList.svelte";
+  import StackListPlaceholder from "../ui/StackListPlaceholder.svelte";
   import OnEvents from "../util/OnEvents.svelte";
+  import Suspense from "../util/Suspense.svelte";
   import BackupItem from "./BackupItem.svelte";
   import CreateRepositoryModal from "./dialogs/CreateRepositoryModal.svelte";
 
@@ -39,18 +41,20 @@
 <Stack gap={6}>
   {#if local}
     <Stack gap={2}>
-      <StackList {query}>
+      <StackList>
         {#snippet title()}Backups on this machine{/snippet}
-        {#snippet children()}
+
+        <Suspense {query}>
           {#each localRepositories as repository (repository.id)}
             <BackupItem {repository} />
           {/each}
+
           {#if localRepositories.length === 0}
-            <Text class="text-center py-6" color="muted">
+            <StackListPlaceholder>
               No backups on this machine yet.
-            </Text>
+            </StackListPlaceholder>
           {/if}
-        {/snippet}
+        </Suspense>
       </StackList>
 
       <HStack>
@@ -64,19 +68,21 @@
     </Stack>
   {/if}
 
-  <StackList {query}>
+  <StackList>
     {#snippet title()}
       {local ? "Backups found elsewhere" : "Your Backups"}
     {/snippet}
-    {#snippet children()}
+
+    <Suspense {query}>
       {#each remoteRepositories as repository (repository.id)}
         <BackupItem {repository} />
       {/each}
+
       {#if remoteRepositories.length === 0}
-        <Text class="text-center py-6" color="muted">
+        <StackListPlaceholder>
           {local ? "No other backups found." : "No backups yet."}
-        </Text>
+        </StackListPlaceholder>
       {/if}
-    {/snippet}
+    </Suspense>
   </StackList>
 </Stack>