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

package/dist/components/backends/BackendItem.svelte

@@ -64,7 +64,7 @@
   {backend.description ?? BackendDescriptions[backend.type]}
 
   {#snippet trailing()}
-    <Badge color={online ? "primary" : "danger"} size="small">
+    <Badge color={online ? "success" : "danger"} size="small">
       {#if !backend.isOnline}
         Offline
       {:else if repositoryBackend}

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

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { useRollbackSnapshot } from "../../../services/snapshot.service";
+  import {
+    Button,
+    HStack,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+
+  type Props = {
+    repository: string;
+    snapshot: string;
+    onClose: () => void;
+  };
+
+  const { repository, snapshot, onClose }: Props = $props();
+
+  const mutation = useRollbackSnapshot();
+
+  const onConfirm = () =>
+    mutation.mutate(
+      { repositoryId: repository, snapshotId: snapshot },
+      { onSuccess: () => onClose() },
+    );
+</script>
+
+<Modal title="Rollback to this snapshot?" size="small" {onClose}>
+  <ModalBody>
+    <Stack gap={4}>
+      <Text>
+        Your instance will return to how it was when this snapshot was taken.
+      </Text>
+
+      <Stack gap={2}>
+        <Text>This will:</Text>
+        <ul class="list-disc ps-6">
+          <li><Text>Restore files from the snapshot</Text></li>
+          <li><Text>Restore the Immich database</Text></li>
+          <li><Text>Restart the server during rollback</Text></li>
+        </ul>
+      </Stack>
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button color="danger" loading={mutation.isPending} onclick={onConfirm}>
+        Confirm rollback
+      </Button>
+      <Button variant="ghost" onclick={onClose}>Cancel</Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

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

@@ -0,0 +1,8 @@
+type Props = {
+    repository: string;
+    snapshot: string;
+    onClose: () => void;
+};
+declare const RollbackSnapshotModal: import("svelte").Component<Props, {}, "">;
+type RollbackSnapshotModal = ReturnType<typeof RollbackSnapshotModal>;
+export default RollbackSnapshotModal;

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import OnEvents from "../../util/OnEvents.svelte";
+  import {
+    useIntegrationEventHandler,
+    useIntegrations,
+  } from "../../../services/integrations.service";
+  import { page } from "$app/state";
+  import { Icon, Text } from "@immich/ui";
+  import { mdiCloudUpload, mdiCloudUploadOutline } from "@mdi/js";
+
+  type Props = {
+    href: string;
+  };
+
+  const { href }: Props = $props();
+
+  const active = $derived(page.url.pathname.startsWith(href));
+
+  const integrations = useIntegrations();
+  const { onIntegrationUpdate } = useIntegrationEventHandler();
+
+  const configured = $derived(
+    integrations.data ? Boolean(integrations.data.immichIntegration) : true,
+  );
+
+  const shell = $derived(
+    configured
+      ? `hover:bg-subtle hover:text-primary flex w-full cursor-pointer place-items-center gap-4 rounded-e-full ps-5 py-3 text-start ${active ? "bg-primary/10 text-primary" : ""}`
+      : "border-primary/40 from-white via-blue-100 to-purple-100 dark:from-transparent dark:via-blue-500/10 dark:to-purple-500/15 flex w-full cursor-pointer place-items-center gap-4 rounded-xl border bg-gradient-to-r px-4 py-2.5 text-start",
+  );
+</script>
+
+<OnEvents {onIntegrationUpdate} />
+
+<div class={configured ? "" : "mx-4 mb-2"}>
+  <a {href} class={shell}>
+    <Icon
+      icon={configured ? mdiCloudUploadOutline : mdiCloudUpload}
+      size="1.375em"
+      class="{configured ? '' : 'text-primary'} shrink-0"
+    />
+
+    <Text
+      size="small"
+      fontWeight="medium"
+      color={configured && !active ? undefined : "primary"}
+      class="flex-1 truncate"
+    >
+      {configured ? "Backups" : "Set up Backups"}
+    </Text>
+  </a>
+</div>

package/dist/components/integrations/immich/ImmichBackupsAdminNavButton.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    href: string;
+};
+declare const ImmichBackupsAdminNavButton: import("svelte").Component<Props, {}, "">;
+type ImmichBackupsAdminNavButton = ReturnType<typeof ImmichBackupsAdminNavButton>;
+export default ImmichBackupsAdminNavButton;

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import OnEvents from "../../util/OnEvents.svelte";
+  import RelativeTime from "../../util/RelativeTime.svelte";
   import {
     useIntegrationEventHandler,
     useIntegrations,
@@ -16,15 +17,22 @@
     useScheduleEventHandler,
     useSchedules,
   } from "../../../services/schedule.service";
-  import ImmichBackupsCard from "./ImmichBackupsCard.svelte";
+  import { HStack, Icon, Text } from "@immich/ui";
+  import {
+    mdiChevronRight,
+    mdiCloudAlertOutline,
+    mdiCloudCheckVariantOutline,
+    mdiCloudOffOutline,
+    mdiCloudUploadOutline,
+  } from "@mdi/js";
+
+  type Color = "primary" | "success" | "warning" | "danger";
 
   type Props = {
-    href?: string;
-    onclick?: () => void;
-    class?: string;
+    href: string;
   };
 
-  const { href = "/backups", onclick, class: className }: Props = $props();
+  const { href }: Props = $props();
 
   // TODO: this should probably be condensed into one big request - since this loads on every initial Immich page load (in the future)
 
@@ -74,6 +82,36 @@
   const loading = $derived(
     integrations.isLoading || repositories.isLoading || schedules.isLoading,
   );
+
+  const configured = $derived(Boolean(repository));
+  const running = $derived(latestBackupRun?.status === "incomplete");
+
+  const status = $derived.by(() => {
+    if (running) {
+      return { color: "primary", icon: mdiCloudUploadOutline } as const;
+    }
+
+    if (failed) {
+      return { color: "danger", icon: mdiCloudOffOutline } as const;
+    }
+
+    if (paused) {
+      return { color: "warning", icon: mdiCloudAlertOutline } as const;
+    }
+
+    if (!configured || !lastBackup) {
+      return { color: "warning", icon: mdiCloudOffOutline } as const;
+    }
+
+    return { color: "success", icon: mdiCloudCheckVariantOutline } as const;
+  });
+
+  const tints: Record<Color, string> = {
+    primary: "bg-primary-50 text-primary",
+    success: "bg-success-50 text-success-700",
+    warning: "bg-warning-50 text-warning-800",
+    danger: "bg-danger-50 text-danger-700",
+  };
 </script>
 
 <OnEvents
@@ -89,14 +127,41 @@
 />
 
 {#if !loading}
-  <ImmichBackupsCard
+  <a
     {href}
-    {failed}
-    {paused}
-    {onclick}
-    {lastBackup}
-    class={className}
-    configured={Boolean(repository)}
-    running={latestBackupRun?.status === "incomplete"}
-  />
+    class="flex w-full cursor-pointer items-center gap-2 px-3 py-3 text-start text-sm {tints[
+      status.color
+    ]}"
+  >
+    <Icon color={status.color} icon={status.icon} size="1.25em" class="shrink-0" />
+
+    <Text size="tiny" color={status.color} class="flex-1 truncate">
+      {#if running}
+        Backing up now
+      {:else if failed}
+        Backup failed
+      {:else if paused}
+        Backups paused
+      {:else if !configured}
+        Not backed up
+      {:else if lastBackup}
+        Last backup <RelativeTime time={lastBackup} />
+      {:else}
+        Finish setting up backups
+      {/if}
+    </Text>
+
+    <HStack gap={0}>
+      {#if !configured}
+        <Text size="tiny" color="primary" class="shrink-0">Set up</Text>
+      {/if}
+
+      <Icon
+        color={configured ? status.color : "primary5"}
+        icon={mdiChevronRight}
+        size="1.25em"
+        class="shrink-0"
+      />
+    </HStack>
+  </a>
 {/if}

package/dist/components/integrations/immich/ImmichBackupsSidebarItem.svelte.d.ts

@@ -1,7 +1,5 @@
 type Props = {
-    href?: string;
-    onclick?: () => void;
-    class?: string;
+    href: string;
 };
 declare const ImmichBackupsSidebarItem: import("svelte").Component<Props, {}, "">;
 type ImmichBackupsSidebarItem = ReturnType<typeof ImmichBackupsSidebarItem>;

package/dist/components/test/ImmichTestUi.svelte

@@ -36,20 +36,15 @@
   } from "@mdi/js";
   import { options } from "../../options";
   import { onDestroy } from "svelte";
-  import ImmichBackupsNavButton from "../integrations/immich/ImmichBackupsNavButton.svelte";
-  import ImmichBackupsCard from "../integrations/immich/ImmichBackupsCard.svelte";
+  import ImmichBackupsAdminNavButton from "../integrations/immich/ImmichBackupsAdminNavButton.svelte";
+  import ImmichBackupsSidebarItem from "../integrations/immich/ImmichBackupsSidebarItem.svelte";
   import MockImmichPhotos from "./immich/MockImmichPhotos.svelte";
   import MockImmichServerStatus from "./immich/MockImmichServerStatus.svelte";
   import MockImmichPurchaseInfo from "./immich/MockImmichPurchaseInfo.svelte";
   import MockImmichStorageSpace from "./immich/MockImmichStorageSpace.svelte";
   import ImmichBackupsPage from "../integrations/immich/ImmichBackupsPage.svelte";
   import ImmichOnboardingRestoreFlow from "../integrations/immich/ImmichOnboardingRestoreFlow.svelte";
-  import OnEvents from "../util/OnEvents.svelte";
   import MockImmichHideBackupsReminder from "./immich/MockImmichHideBackupsReminder.svelte";
-  import {
-    useIntegrationEventHandler,
-    useIntegrations,
-  } from "../../services/integrations.service";
 
   type Props = {
     onExit: () => void;
@@ -60,11 +55,6 @@
 
   let route = $state<"photos" | "settings">("photos");
 
-  const integrations = useIntegrations();
-  const { onIntegrationUpdate } = useIntegrationEventHandler();
-  const configured = $derived(Boolean(integrations.data?.immichIntegration));
-  const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString();
-
   const sampleQuestions = [
     {
       title: "Is FUTO Backups the same as an Immich product key?",
@@ -87,8 +77,6 @@
   setProvider(orchestrationApiProvider);
 </script>
 
-<OnEvents {onIntegrationUpdate} />
-
 {#snippet hideReminder()}
   <MockImmichHideBackupsReminder />
 {/snippet}
@@ -203,11 +191,7 @@
   <AppShellSidebar class="relative">
     <div class="flex h-full flex-col pt-4 pr-2">
       {#if route === "settings"}
-        <ImmichBackupsNavButton
-          {configured}
-          active
-          onclick={() => {}}
-        />
+        <ImmichBackupsAdminNavButton href="#" />
 
         <NavbarItem
           href="#"
@@ -260,11 +244,7 @@
 
       <Stack gap={4} class="mt-auto p-4">
         <MockImmichStorageSpace>
-          <ImmichBackupsCard
-            {configured}
-            lastBackup={configured ? twoHoursAgo : undefined}
-            onclick={() => (route = "settings")}
-          />
+          <ImmichBackupsSidebarItem href="#" />
         </MockImmichStorageSpace>
 
         {#if route !== "settings"}

package/dist/components/ui/PathListField.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
-  import StackList from "./StackList.svelte";
-  import StackListItem from "./StackListItem.svelte";
   import type { FilesystemListingResponseDto } from "../../fetch-client";
   import {
     Button,
+    Heading,
+    HStack,
     IconButton,
     modalManager,
+    Stack,
     Text,
   } from "@immich/ui";
   import { mdiClose } from "@mdi/js";
   import type { Snippet } from "svelte";
   import type { SvelteSet } from "svelte/reactivity";
   import PathPickerModal from "./PathPickerModal.svelte";
+  import StackList from "./StackList.svelte";
+  import StackListItem from "./StackListItem.svelte";
 
   type Props = {
     paths: SvelteSet<string>;
@@ -51,36 +54,34 @@
     });
 </script>
 
-<StackList>
-  {#snippet title()}
-    {@render label?.()}
-  {/snippet}
+<Stack>
+  <Heading size="tiny">{@render label?.()}</Heading>
 
   {#if paths.size > 0}
-    {#each [...paths] as path (path)}
-      <StackListItem>
-        <Text class="grow truncate" title={path}>{path}</Text>
+    <StackList>
+      {#each [...paths] as path (path)}
+        <StackListItem>
+          <Text class="grow truncate" title={path}>{path}</Text>
 
-        {#snippet trailing()}
-          <IconButton
-            icon={mdiClose}
-            aria-label="Remove"
-            size="tiny"
-            variant="ghost"
-            onclick={() => paths.delete(path)}
-          />
-        {/snippet}
-      </StackListItem>
-    {/each}
+          {#snippet trailing()}
+            <IconButton
+              icon={mdiClose}
+              aria-label="Remove"
+              size="tiny"
+              variant="ghost"
+              onclick={() => paths.delete(path)}
+            />
+          {/snippet}
+        </StackListItem>
+      {/each}
+    </StackList>
   {:else if empty}
-    <StackListItem>
+    <HStack>
       <Text color="secondary">{@render empty()}</Text>
-    </StackListItem>
+    </HStack>
   {/if}
 
-  <StackListItem>
-    <Button size="small" variant="ghost" onclick={openPicker}>
-      {paths.size > 0 ? addLabel : manageLabel}
-    </Button>
-  </StackListItem>
-</StackList>
+  <Button class="w-fit" size="small" variant="ghost" onclick={openPicker}>
+    {paths.size > 0 ? addLabel : manageLabel}
+  </Button>
+</Stack>

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { default as BackendsList } from './components/backends/BackendsList.svel
 export { default as BackupsList } from './components/backups/BackupsList.svelte';
 export { default as ViewStatusModal } from './components/backups/dialogs/ViewStatusModal.svelte';
 export { default as Dashboard } from './components/dashboard/Dashboard.svelte';
-export { default as ImmichBackupsNavButton } from './components/integrations/immich/ImmichBackupsNavButton.svelte';
+export { default as ImmichBackupsAdminNavButton } from './components/integrations/immich/ImmichBackupsAdminNavButton.svelte';
 export { default as ImmichBackupsPage } from './components/integrations/immich/ImmichBackupsPage.svelte';
 export { default as ImmichBackupsSidebarItem } from './components/integrations/immich/ImmichBackupsSidebarItem.svelte';
 export { default as ImmichManageBackup } from './components/integrations/immich/ImmichManageBackup.svelte';

package/dist/index.js

@@ -2,7 +2,7 @@ export { default as BackendsList } from './components/backends/BackendsList.svel
 export { default as BackupsList } from './components/backups/BackupsList.svelte';
 export { default as ViewStatusModal } from './components/backups/dialogs/ViewStatusModal.svelte';
 export { default as Dashboard } from './components/dashboard/Dashboard.svelte';
-export { default as ImmichBackupsNavButton } from './components/integrations/immich/ImmichBackupsNavButton.svelte';
+export { default as ImmichBackupsAdminNavButton } from './components/integrations/immich/ImmichBackupsAdminNavButton.svelte';
 export { default as ImmichBackupsPage } from './components/integrations/immich/ImmichBackupsPage.svelte';
 export { default as ImmichBackupsSidebarItem } from './components/integrations/immich/ImmichBackupsSidebarItem.svelte';
 export { default as ImmichManageBackup } from './components/integrations/immich/ImmichManageBackup.svelte';

package/dist/services/snapshot.service.js

@@ -1,5 +1,6 @@
 import { sdk } from '..';
 import RestoreSnapshotModal from '../components/backups/dialogs/RestoreSnapshotModal.svelte';
+import RollbackSnapshotModal from '../components/backups/dialogs/RollbackSnapshotModal.svelte';
 import { SocketEvent } from '../events';
 import { getSnapshots, } from '../fetch-client';
 import { queryClient } from '../query-client';
@@ -83,9 +84,8 @@ export const handleGetSnapshotListing = async (id, snapshotId, path) => {
 };
 export const getSnapshotActions = (repositoryId, snapshot, immich) => {
     const removeSnapshot = useRemoveSnapshot(repositoryId);
-    const rollback = useRollbackSnapshot();
     const Restore = {
-        title: 'Restore',
+        title: 'Restore files',
         icon: mdiBackupRestore,
         onAction: () => void modalManager.open(RestoreSnapshotModal, {
             repository: repositoryId,
@@ -93,9 +93,12 @@ export const getSnapshotActions = (repositoryId, snapshot, immich) => {
         }),
     };
     const Rollback = {
-        title: 'Rollback',
+        title: 'Rollback snapshot',
         icon: mdiHistory,
-        onAction: () => rollback.mutate({ repositoryId, snapshotId: snapshot.id }),
+        onAction: () => void modalManager.open(RollbackSnapshotModal, {
+            repository: repositoryId,
+            snapshot: snapshot.id,
+        }),
         $if: () => immich === true,
     };
     const Delete = {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@futo-org/backups-orchestrator-ui",
   "repository": "https://github.com/immich-app/yucca",
   "description": "Backups orchestrator (UI library)",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "license": "Source First License 1.1",
   "files": [
     "dist",
@@ -64,7 +64,7 @@
     "lodash.debounce": "^4.0.8",
     "luxon": "^3.7.2",
     "socket.io-client": "^4.8.3",
-    "@futo-org/backups-api-client": "^0.30.0"
+    "@futo-org/backups-api-client": "^0.31.0"
   },
   "scripts": {
     "dev": "vite dev --port 5174",

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

@@ -1,109 +0,0 @@
-<script lang="ts">
-  import RelativeTime from "../../util/RelativeTime.svelte";
-  import { Icon, Text } from "@immich/ui";
-  import {
-    mdiChevronRight,
-    mdiCloudAlertOutline,
-    mdiCloudCheckVariantOutline,
-    mdiCloudOffOutline,
-    mdiCloudUploadOutline,
-  } from "@mdi/js";
-
-  type Color = "primary" | "success" | "warning" | "danger";
-
-  type Props = {
-    configured: boolean;
-    lastBackup?: string;
-    failed?: boolean;
-    paused?: boolean;
-    running?: boolean;
-    href?: string;
-    onclick?: () => void;
-    class?: string;
-  };
-
-  const {
-    configured,
-    lastBackup,
-    failed = false,
-    paused = false,
-    running = false,
-    href,
-    onclick,
-    class: className,
-  }: Props = $props();
-
-  const status = $derived.by(() => {
-    if (running) {
-      return { color: "primary", icon: mdiCloudUploadOutline } as const;
-    }
-
-    if (failed) {
-      return { color: "danger", icon: mdiCloudOffOutline } as const;
-    }
-
-    if (paused) {
-      return { color: "warning", icon: mdiCloudAlertOutline } as const;
-    }
-
-    if (!configured || !lastBackup) {
-      return { color: "warning", icon: mdiCloudOffOutline } as const;
-    }
-
-    return { color: "success", icon: mdiCloudCheckVariantOutline } as const;
-  });
-
-  const tints: Record<Color, string> = {
-    primary: "bg-primary-50 text-primary",
-    success: "bg-success-50 text-success-700",
-    warning: "bg-warning-50 text-warning-800",
-    danger: "bg-danger-50 text-danger-700",
-  };
-
-  const shell = $derived(
-    `flex w-full cursor-pointer items-center gap-2 px-3 py-3 text-start text-sm ${tints[status.color]} ${className ?? ""}`,
-  );
-</script>
-
-{#snippet body()}
-  <Icon icon={status.icon} size="1.25em" class="shrink-0" />
-
-  <Text
-    size="small"
-    color={status.color}
-    fontWeight="medium"
-    class="flex-1 truncate"
-  >
-    {#if running}
-      Backing up now
-    {:else if failed}
-      Backup failed
-    {:else if paused}
-      Backups paused
-    {:else if !configured}
-      Not backed up
-    {:else if lastBackup}
-      Last backup <RelativeTime time={lastBackup} />
-    {:else}
-      Finish setting up backups
-    {/if}
-  </Text>
-
-  {#if !configured}
-    <Text size="small" color="primary" fontWeight="medium" class="shrink-0">
-      Set up
-    </Text>
-  {/if}
-
-  <Icon icon={mdiChevronRight} size="1.25em" class="shrink-0" />
-{/snippet}
-
-{#if href}
-  <a {href} {onclick} class={shell}>
-    {@render body()}
-  </a>
-{:else}
-  <button type="button" {onclick} class={shell}>
-    {@render body()}
-  </button>
-{/if}

package/dist/components/integrations/immich/ImmichBackupsCard.svelte.d.ts

@@ -1,13 +0,0 @@
-type Props = {
-    configured: boolean;
-    lastBackup?: string;
-    failed?: boolean;
-    paused?: boolean;
-    running?: boolean;
-    href?: string;
-    onclick?: () => void;
-    class?: string;
-};
-declare const ImmichBackupsCard: import("svelte").Component<Props, {}, "">;
-type ImmichBackupsCard = ReturnType<typeof ImmichBackupsCard>;
-export default ImmichBackupsCard;

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

@@ -1,55 +0,0 @@
-<script lang="ts">
-  import { Icon, Text } from "@immich/ui";
-  import { mdiCloudUpload, mdiCloudUploadOutline } from "@mdi/js";
-
-  type Props = {
-    configured: boolean;
-    active?: boolean;
-    href?: string;
-    onclick?: () => void;
-    class?: string;
-  };
-
-  const {
-    configured,
-    active = false,
-    href,
-    onclick,
-    class: className,
-  }: Props = $props();
-
-  const shell = $derived(
-    configured
-      ? `hover:bg-subtle hover:text-primary flex w-full cursor-pointer place-items-center gap-4 rounded-e-full ps-5 py-3 text-start ${active ? "bg-primary/10 text-primary" : ""}`
-      : "border-primary/40 from-white via-blue-100 to-purple-100 dark:from-transparent dark:via-blue-500/10 dark:to-purple-500/15 flex w-full cursor-pointer place-items-center gap-4 rounded-xl border bg-gradient-to-r px-4 py-2.5 text-start",
-  );
-</script>
-
-{#snippet body()}
-  <Icon
-    icon={configured ? mdiCloudUploadOutline : mdiCloudUpload}
-    size="1.375em"
-    class="{configured ? '' : 'text-primary'} shrink-0"
-  />
-
-  <Text
-    size="small"
-    fontWeight="medium"
-    color={configured && !active ? undefined : "primary"}
-    class="flex-1 truncate"
-  >
-    {configured ? "Backups" : "Set up Backups"}
-  </Text>
-{/snippet}
-
-<div class="{configured ? '' : 'mx-4 mb-2'} {className ?? ''}">
-  {#if href}
-    <a {href} {onclick} class={shell}>
-      {@render body()}
-    </a>
-  {:else}
-    <button type="button" {onclick} class={shell}>
-      {@render body()}
-    </button>
-  {/if}
-</div>

package/dist/components/integrations/immich/ImmichBackupsNavButton.svelte.d.ts

@@ -1,10 +0,0 @@
-type Props = {
-    configured: boolean;
-    active?: boolean;
-    href?: string;
-    onclick?: () => void;
-    class?: string;
-};
-declare const ImmichBackupsNavButton: import("svelte").Component<Props, {}, "">;
-type ImmichBackupsNavButton = ReturnType<typeof ImmichBackupsNavButton>;
-export default ImmichBackupsNavButton;