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

package/dist/components/backups/snapshots-list/RepositorySnapshotsList.svelte.d.ts

@@ -2,6 +2,8 @@ import type { LocalRepositoryDto } from "../../../fetch-client";
 type Props = {
     repository: LocalRepositoryDto;
     immich?: boolean;
+    limit?: number;
+    onViewAll?: () => void;
 };
 declare const RepositorySnapshotsList: import("svelte").Component<Props, {}, "">;
 type RepositorySnapshotsList = ReturnType<typeof RepositorySnapshotsList>;

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

@@ -3,7 +3,9 @@
   import RelativeTime from "../../util/RelativeTime.svelte";
   import type { SnapshotDto } from "../../../fetch-client";
   import { getSnapshotActions } from "../../../services/snapshot.service";
-  import { FormatBytes, HStack, Text } from "@immich/ui";
+  import { FormatBytes, Icon } from "@immich/ui";
+  import { mdiHistory } from "@mdi/js";
+  import { DateTime } from "luxon";
 
   type Props = {
     repositoryId: string;
@@ -15,29 +17,29 @@
   const { Restore, Rollback, Delete } = $derived(
     getSnapshotActions(repositoryId, snapshot, immich),
   );
+
+  const title = $derived(
+    DateTime.fromISO(snapshot.time).toLocaleString(DateTime.DATE_FULL),
+  );
 </script>
 
-<StackListItem actions={[Restore, Rollback, Delete]}>
-  <HStack>
-    <RelativeTime time={snapshot.time} />
+<StackListItem {title} actions={[Restore, Rollback, Delete]}>
+  {#snippet icon()}
+    <Icon icon={mdiHistory} />
+  {/snippet}
 
-    {#if snapshot.summary}
-      <Text color="secondary">
-        &middot; {snapshot.summary.totalFiles.toLocaleString()}
-        {snapshot.summary.totalFiles > 1 ? "files" : "file"} &middot;
-        <FormatBytes bytes={snapshot.summary.totalBytes} />
-      </Text>
+  <RelativeTime time={snapshot.time} />
 
-      {#if snapshot.summary.filesNew > 0 || snapshot.summary.filesChanged > 0}
-        <Text color="muted" size="tiny">
-          {#if snapshot.summary.filesNew > 0}
-            &middot; {snapshot.summary.filesNew.toLocaleString()} new
-          {/if}
-          {#if snapshot.summary.filesChanged > 0}
-            &middot; {snapshot.summary.filesChanged.toLocaleString()} changed
-          {/if}
-        </Text>
-      {/if}
+  {#if snapshot.summary}
+    &middot; {snapshot.summary.totalFiles.toLocaleString()}
+    {snapshot.summary.totalFiles > 1 ? "files" : "file"} &middot;
+    <FormatBytes bytes={snapshot.summary.totalBytes} />
+
+    {#if snapshot.summary.filesNew > 0}
+      &middot; {snapshot.summary.filesNew.toLocaleString()} new
+    {/if}
+    {#if snapshot.summary.filesChanged > 0}
+      &middot; {snapshot.summary.filesChanged.toLocaleString()} changed
     {/if}
-  </HStack>
+  {/if}
 </StackListItem>

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

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import ListToolbar from "../../ui/ListToolbar.svelte";
+  import Pagination from "../../ui/Pagination.svelte";
+  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 type { LocalRepositoryDto, SnapshotDto } from "../../../fetch-client";
+  import {
+    useSnapshotEventHandler,
+    useSnapshots,
+  } from "../../../services/snapshot.service";
+  import { Stack, type ActionItem } from "@immich/ui";
+  import { mdiRadioboxBlank, mdiRadioboxMarked } from "@mdi/js";
+  import { DateTime } from "luxon";
+  import RepositorySnapshotsListItem from "./RepositorySnapshotsListItem.svelte";
+
+  type Props = {
+    repository: LocalRepositoryDto;
+    immich?: boolean;
+    pageSize?: number;
+  };
+
+  let { repository, immich = false, pageSize = 10 }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  const query = useSnapshots(repository.id);
+  const { onRunUpdate } = useSnapshotEventHandler();
+
+  let search = $state("");
+  let newestFirst = $state(true);
+  let page = $state(1);
+
+  const onSearch = (value: string) => {
+    search = value;
+    page = 1;
+  };
+
+  const sortOptions = [
+    { newest: true, title: "Newest first" },
+    { newest: false, title: "Oldest first" },
+  ];
+
+  const sort = $derived({
+    label: newestFirst ? "Newest first" : "Oldest first",
+    items: sortOptions.map(
+      (option): ActionItem => ({
+        title: option.title,
+        icon: newestFirst === option.newest
+          ? mdiRadioboxMarked
+          : mdiRadioboxBlank,
+        onAction: () => (newestFirst = option.newest),
+      }),
+    ),
+  });
+
+  const matches = (snapshot: SnapshotDto) => {
+    const term = search.trim().toLowerCase();
+
+    if (!term) {
+      return true;
+    }
+
+    const date = DateTime.fromISO(snapshot.time).toLocaleString(
+      DateTime.DATE_FULL,
+    );
+
+    return [date, ...snapshot.paths, ...(snapshot.tags ?? [])]
+      .join(" ")
+      .toLowerCase()
+      .includes(term);
+  };
+
+  const filtered = $derived(
+    (query.data ?? [])
+      .filter(matches)
+      .toSorted((a, b) =>
+        newestFirst
+          ? +new Date(b.time) - +new Date(a.time)
+          : +new Date(a.time) - +new Date(b.time),
+      ),
+  );
+
+  const pageCount = $derived(
+    Math.max(Math.ceil(filtered.length / pageSize), 1),
+  );
+  const current = $derived(Math.min(page, pageCount));
+  const visible = $derived(
+    filtered.slice((current - 1) * pageSize, current * pageSize),
+  );
+</script>
+
+<OnEvents {onRunUpdate} />
+
+<Stack gap={4}>
+  <ListToolbar placeholder="Search snapshots" {search} {onSearch} {sort} />
+
+  <StackList>
+    <Suspense {query}>
+      {#each visible as snapshot (snapshot.id)}
+        <RepositorySnapshotsListItem
+          repositoryId={repository.id}
+          {snapshot}
+          {immich}
+        />
+      {/each}
+
+      {#if filtered.length === 0}
+        <StackListPlaceholder>No snapshots found</StackListPlaceholder>
+      {/if}
+    </Suspense>
+  </StackList>
+
+  <Pagination page={current} {pageCount} onChange={(next) => (page = next)} />
+</Stack>

package/dist/components/backups/snapshots-list/RepositorySnapshotsPage.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { LocalRepositoryDto } from "../../../fetch-client";
+type Props = {
+    repository: LocalRepositoryDto;
+    immich?: boolean;
+    pageSize?: number;
+};
+declare const RepositorySnapshotsPage: import("svelte").Component<Props, {}, "">;
+type RepositorySnapshotsPage = ReturnType<typeof RepositorySnapshotsPage>;
+export default RepositorySnapshotsPage;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { LocalRepositoryDto } from "../../../fetch-client";
   import { Modal, ModalBody } from "@immich/ui";
-  import RepositorySnapshotsList from "./RepositorySnapshotsList.svelte";
+  import RepositorySnapshotsPage from "./RepositorySnapshotsPage.svelte";
 
   type Props = {
     repository: LocalRepositoryDto;
@@ -13,6 +13,6 @@
 
 <Modal title={`Snapshots for ${repository.name}`} size="giant" {onClose}>
   <ModalBody>
-    <RepositorySnapshotsList {repository} />
+    <RepositorySnapshotsPage {repository} />
   </ModalBody>
 </Modal>

package/dist/components/dashboard/Dashboard.svelte

@@ -18,10 +18,10 @@
   type Props = {
     local?: boolean;
     initialData?: RepositoryListResponseDto;
-    onNavigate?: (route: string) => void;
+    onViewBackups?: () => void;
   };
 
-  const { local, initialData, onNavigate }: Props = $props();
+  const { local, initialData, onViewBackups }: Props = $props();
 
   // svelte-ignore state_referenced_locally
   const query = useRepositories(initialData?.repositories);
@@ -36,12 +36,19 @@
 {:else if query.isError}
   <Alert color="danger">{getReadableErrorMessage(query.error)}</Alert>
 {:else if query.isSuccess}
-  <Stack>
-    <Stack direction="row">
-      <DashboardBackupHealth repositories={query.data} {local} {onNavigate} />
-      <DashboardInstall />
+  <Stack gap={6}>
+    <Stack direction="row" gap={4}>
+      <DashboardBackupHealth
+        repositories={query.data}
+        {local}
+        {onViewBackups}
+      />
+
+      {#if !local}
+        <DashboardInstall />
+      {/if}
     </Stack>
-    <Stack direction="row">
+    <Stack direction="row" gap={4}>
       <DashboardAvgBackupTime repositories={query.data} />
       <DashboardDailyBackupTime repositories={query.data} />
       <DashboardTotalStored repositories={query.data} />

package/dist/components/dashboard/Dashboard.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RepositoryListResponseDto } from "../../fetch-client";
 type Props = {
     local?: boolean;
     initialData?: RepositoryListResponseDto;
-    onNavigate?: (route: string) => void;
+    onViewBackups?: () => void;
 };
 declare const Dashboard: import("svelte").Component<Props, {}, "">;
 type Dashboard = ReturnType<typeof Dashboard>;

package/dist/components/dashboard/DashboardAvgBackupTime.svelte

@@ -24,7 +24,7 @@
   );
 </script>
 
-<Card>
+<Card class="border-primary-100 shadow-none">
   <CardBody>
     <VisualisationGauge
       title="Avg. Backup Time"

package/dist/components/dashboard/DashboardBackupHealth.svelte

@@ -13,10 +13,10 @@
   type Props = {
     repositories: LocalRepositoryDto[];
     local?: boolean;
-    onNavigate?: (route: string) => void;
+    onViewBackups?: () => void;
   };
 
-  const { repositories, local, onNavigate }: Props = $props();
+  const { repositories, local, onViewBackups }: Props = $props();
 
   const total = $derived(repositories.length);
 
@@ -41,16 +41,12 @@
   );
 </script>
 
-<Card>
+<Card class="border-primary-100 shadow-none">
   <CardHeader>
     <HStack class="justify-between">
       <CardTitle>Your Backups</CardTitle>
-      {#if onNavigate}
-        <Button
-          variant="outline"
-          size="tiny"
-          onclick={() => onNavigate("backups")}
-        >
+      {#if onViewBackups}
+        <Button variant="outline" size="tiny" onclick={onViewBackups}>
           View all
         </Button>
       {/if}

package/dist/components/dashboard/DashboardBackupHealth.svelte.d.ts

@@ -2,7 +2,7 @@ import type { LocalRepositoryDto } from "../../fetch-client";
 type Props = {
     repositories: LocalRepositoryDto[];
     local?: boolean;
-    onNavigate?: (route: string) => void;
+    onViewBackups?: () => void;
 };
 declare const DashboardBackupHealth: import("svelte").Component<Props, {}, "">;
 type DashboardBackupHealth = ReturnType<typeof DashboardBackupHealth>;

package/dist/components/dashboard/DashboardCurrentUsage.svelte

@@ -3,7 +3,7 @@
   import VisualisationGauge from "../ui/VisualisationGauge.svelte";
 </script>
 
-<Card>
+<Card class="border-primary-100 shadow-none">
   <CardBody>
     <VisualisationGauge title="Current Usage" content="$-/mo" />
   </CardBody>

package/dist/components/dashboard/DashboardDailyBackupTime.svelte

@@ -21,7 +21,7 @@
   );
 </script>
 
-<Card>
+<Card class="border-primary-100 shadow-none">
   <CardBody>
     <VisualisationGauge
       title="Daily Backup Time"

package/dist/components/dashboard/DashboardInstall.svelte

@@ -2,7 +2,7 @@
   import { Button, Card, CardBody, CardHeader, CardTitle, Logo } from "@immich/ui";
 </script>
 
-<Card>
+<Card class="border-primary-100 shadow-none">
   <CardHeader>
     <CardTitle>Install FUTO Backups</CardTitle>
   </CardHeader>

package/dist/components/dashboard/DashboardRecentBackups.svelte

@@ -1,25 +1,16 @@
 <script lang="ts">
   import type { LocalRepositoryDto } from "../../fetch-client";
+  import { Icon, modalManager, type ActionItem } from "@immich/ui";
   import {
-    Card,
-    CardBody,
-    CardHeader,
-    CardTitle,
-    ContextMenuButton,
-    HStack,
-    Icon,
-    modalManager,
-    Text,
-    type ActionItem,
-  } from "@immich/ui";
-  import {
-    mdiAlertCircleOutline,
-    mdiCheckCircleOutline,
-    mdiDotsVertical,
+    mdiCloudCheckOutline,
+    mdiCloudOffOutline,
     mdiHistory,
   } from "@mdi/js";
-  import RelativeTime from "../util/RelativeTime.svelte";
   import MetricsHistoryModal from "../backups/metrics-history/MetricsHistoryModal.svelte";
+  import StackList from "../ui/StackList.svelte";
+  import StackListPlaceholder from "../ui/StackListPlaceholder.svelte";
+  import StackListItem from "../ui/StackListItem.svelte";
+  import RelativeTime from "../util/RelativeTime.svelte";
 
   type Props = {
     repositories: LocalRepositoryDto[];
@@ -38,67 +29,45 @@
       .slice(0, 5),
   );
 
-  const getActions = (repository: LocalRepositoryDto): ActionItem[] => [
-    {
-      title: "View history",
-      icon: mdiHistory,
-      onAction: () =>
-        void modalManager.open(MetricsHistoryModal, { repository }),
-    },
-  ];
+  const getActions = (repository: LocalRepositoryDto): ActionItem[] =>
+    local
+      ? []
+      : [
+          {
+            title: "View history",
+            icon: mdiHistory,
+            onAction: () =>
+              void modalManager.open(MetricsHistoryModal, { repository }),
+          },
+        ];
 </script>
 
-<Card>
-  <CardHeader>
-    <CardTitle>Recent Backups</CardTitle>
-  </CardHeader>
-  <CardBody>
-    {#if recentAttempts.length === 0}
-      <Text color="secondary">
-        Completed backups will appear here once your first backup runs.
-      </Text>
-    {:else}
-      <div>
-        {#each recentAttempts as repo, index (repo.id)}
-          {#if index > 0}
-            <hr
-              style="border: none; border-top: 1px solid var(--immich-ui-default-border);"
-            />
-          {/if}
-          <HStack class="justify-between py-2">
-            <HStack class="gap-2">
-              {#if repo.metrics.lastBackup === repo.metrics.lastSuccessfulBackup}
-                <Icon
-                  icon={mdiCheckCircleOutline}
-                  size="16"
-                  class="text-success-500"
-                />
-              {:else}
-                <Icon
-                  icon={mdiAlertCircleOutline}
-                  size="16"
-                  class="text-danger-500"
-                />
-              {/if}
-              <Text>{repo.name}</Text>
-            </HStack>
-            <HStack class="gap-1">
-              <Text color="secondary" size="small">
-                <RelativeTime time={repo.metrics.lastBackup!} />
-              </Text>
-              {#if !local}
-                <ContextMenuButton
-                  icon={mdiDotsVertical}
-                  aria-label="Options"
-                  items={getActions(repo)}
-                  variant="ghost"
-                  color="secondary"
-                />
-              {/if}
-            </HStack>
-          </HStack>
-        {/each}
-      </div>
-    {/if}
-  </CardBody>
-</Card>
+<StackList>
+  {#snippet title()}
+    Recent backups
+  {/snippet}
+
+  {#if recentAttempts.length === 0}
+    <StackListPlaceholder>
+      Completed backups will appear here once your first backup runs.
+    </StackListPlaceholder>
+  {/if}
+
+  {#each recentAttempts as repository (repository.id)}
+    {@const successful =
+      repository.metrics.lastBackup === repository.metrics.lastSuccessfulBackup}
+
+    <StackListItem
+      title={repository.name}
+      color={successful ? "success" : "danger"}
+      actions={getActions(repository)}
+    >
+      {#snippet icon()}
+        <Icon icon={successful ? mdiCloudCheckOutline : mdiCloudOffOutline} />
+      {/snippet}
+
+      {successful ? "Backed up" : "Attempted"}
+      <RelativeTime time={repository.metrics.lastBackup!} />
+    </StackListItem>
+  {/each}
+</StackList>

package/dist/components/dashboard/DashboardTotalStored.svelte

@@ -18,7 +18,7 @@
   );
 </script>
 
-<Card>
+<Card class="border-primary-100 shadow-none">
   <CardBody>
     <VisualisationGauge
       title="Total Stored"

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Container } from "@immich/ui";
+  import ImmichSettingsBackupContents from "./settings/ImmichSettingsBackupContents.svelte";
+  import ImmichSettingsSchedule from "./settings/ImmichSettingsSchedule.svelte";
+  import ImmichSettingsStorage from "./settings/ImmichSettingsStorage.svelte";
+</script>
+
+<Container size="large" center>
+  <ImmichSettingsBackupContents />
+  <ImmichSettingsSchedule />
+  <ImmichSettingsStorage />
+</Container>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ImmichBackupSettings: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ImmichBackupSettings = InstanceType<typeof ImmichBackupSettings>;
+export default ImmichBackupSettings;

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

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import RelativeTime from "../../util/RelativeTime.svelte";
+  import { FormatBytes, Icon, Stack, Text } from "@immich/ui";
+  import { mdiChevronRight, mdiCloudAlertOutline, mdiCloudUpload } from "@mdi/js";
+
+  type Props = {
+    configured: boolean;
+    lastBackup?: string;
+    failed?: boolean;
+    sizeBytes?: number;
+    href?: string;
+    onclick?: () => void;
+    class?: string;
+  };
+
+  const {
+    configured,
+    lastBackup,
+    failed = false,
+    sizeBytes,
+    href,
+    onclick,
+    class: className,
+  }: Props = $props();
+
+  const shell =
+    "border-primary/25 hover:bg-primary/5 flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-start transition-colors";
+</script>
+
+{#snippet body()}
+  <Icon
+    icon={failed ? mdiCloudAlertOutline : mdiCloudUpload}
+    size="2em"
+    class="{failed ? 'text-danger' : 'text-primary'} shrink-0"
+  />
+
+  {#if !configured}
+    <Text color="primary" fontWeight="medium" class="flex-1 whitespace-nowrap">
+      Set up Backups
+    </Text>
+  {:else}
+    <Stack gap={0} class="min-w-0 flex-1">
+      <Text fontWeight="medium" color={failed ? "danger" : "primary"}>
+        {failed ? "Backup failed" : "Last Backup"}
+      </Text>
+
+      <Text size="small" color="muted" class="truncate">
+        {#if lastBackup}
+          <RelativeTime time={lastBackup} />
+          {#if sizeBytes !== undefined}
+            &nbsp;&middot; <FormatBytes bytes={sizeBytes} />
+          {/if}
+        {:else}
+          No backups yet
+        {/if}
+      </Text>
+    </Stack>
+
+    <Icon icon={mdiChevronRight} size="1.4em" class="text-muted shrink-0" />
+  {/if}
+{/snippet}
+
+<div class={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/ImmichBackupsCard.svelte.d.ts

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