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

package/dist/components/backups/run-history/RepositoryRunHistory.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import StackList from "../../ui/StackList.svelte";
   import StackListPlaceholder from "../../ui/StackListPlaceholder.svelte";
-  import Suspense from "../../util/Suspense.svelte";
   import OnEvents from "../../util/OnEvents.svelte";
+  import Suspense from "../../util/Suspense.svelte";
   import type { LocalRepositoryDto } from "../../../fetch-client";
   import {
     useRunEventHandler,
@@ -19,8 +19,7 @@
 
   let { repository, limit = 5, onViewAll }: Props = $props();
 
-  // svelte-ignore state_referenced_locally
-  const query = useRunHistory(repository.id);
+  const query = useRunHistory(() => repository.id);
   const { onRunCreate, onRunUpdate } = useRunEventHandler();
 </script>
 

package/dist/components/backups/run-history/RepositoryRunHistoryPage.svelte

@@ -21,8 +21,7 @@
 
   let { repository, pageSize = 10 }: Props = $props();
 
-  // svelte-ignore state_referenced_locally
-  const query = useRunHistory(repository.id);
+  const query = useRunHistory(() => repository.id);
   const { onRunCreate, onRunUpdate } = useRunEventHandler();
 
   let search = $state("");
@@ -101,7 +100,9 @@
       ),
   );
 
-  const pageCount = $derived(Math.max(Math.ceil(filtered.length / pageSize), 1));
+  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),

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

@@ -1,13 +1,22 @@
 <script lang="ts">
   import RelativeTime from "../../util/RelativeTime.svelte";
-  import { FormatBytes, Icon, Stack, Text } from "@immich/ui";
-  import { mdiChevronRight, mdiCloudAlertOutline, mdiCloudUpload } from "@mdi/js";
+  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;
-    sizeBytes?: number;
+    paused?: boolean;
+    running?: boolean;
     href?: string;
     onclick?: () => void;
     class?: string;
@@ -17,57 +26,84 @@
     configured,
     lastBackup,
     failed = false,
-    sizeBytes,
+    paused = false,
+    running = false,
     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";
+  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={failed ? mdiCloudAlertOutline : mdiCloudUpload}
-    size="2em"
-    class="{failed ? 'text-danger' : 'text-primary'} shrink-0"
-  />
+  <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 color="primary" fontWeight="medium" class="flex-1 whitespace-nowrap">
-      Set up Backups
+    <Text size="small" color="primary" fontWeight="medium" class="shrink-0">
+      Set up
     </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}
+
+  <Icon icon={mdiChevronRight} size="1.25em" class="shrink-0" />
 {/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>
+{#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

@@ -2,7 +2,8 @@ type Props = {
     configured: boolean;
     lastBackup?: string;
     failed?: boolean;
-    sizeBytes?: number;
+    paused?: boolean;
+    running?: boolean;
     href?: string;
     onclick?: () => void;
     class?: string;

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

@@ -1,11 +1,12 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
   import UpsellPage from "../../onboarding/upsell/UpsellPage.svelte";
   import ImmichManageBackup from "./ImmichManageBackup.svelte";
   import ImmichOnboardingSetupFlow from "./ImmichOnboardingSetupFlow.svelte";
 
   type Question = {
     title: string;
-    answer: string;
+    answer: string | Snippet;
   };
 
   type Props = {

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

@@ -1,6 +1,7 @@
+import type { Snippet } from "svelte";
 type Question = {
     title: string;
-    answer: string;
+    answer: string | Snippet;
 };
 type Props = {
     price: string;

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

@@ -8,6 +8,14 @@
     useRepositories,
     useRepositoryEventHandler,
   } from "../../../services/repository.service";
+  import {
+    useRunEventHandler,
+    useRunHistory,
+  } from "../../../services/runHistory.service";
+  import {
+    useScheduleEventHandler,
+    useSchedules,
+  } from "../../../services/schedule.service";
   import ImmichBackupsCard from "./ImmichBackupsCard.svelte";
 
   type Props = {
@@ -18,20 +26,42 @@
 
   const { href = "/backups", onclick, class: className }: Props = $props();
 
+  // TODO: this should probably be condensed into one big request - since this loads on every initial Immich page load (in the future)
+
   const integrations = useIntegrations();
   const repositories = useRepositories();
+  const schedules = useSchedules();
 
   const { onIntegrationUpdate } = useIntegrationEventHandler();
   const { onRepositoryCreate, onRepositoryUpdate, onRepositoryDelete } =
     useRepositoryEventHandler();
+  const { onScheduleCreate, onScheduleUpdate, onScheduleDelete } =
+    useScheduleEventHandler();
+  const { onRunCreate, onRunUpdate } = useRunEventHandler();
 
-  const repository = $derived.by(() => {
-    const integration = integrations.data?.immichIntegration;
+  const integration = $derived(integrations.data?.immichIntegration);
 
-    return integration
+  const repository = $derived(
+    integration
       ? repositories.data?.find((entry) => entry.id === integration.id)
-      : undefined;
-  });
+      : undefined,
+  );
+
+  const runHistory = useRunHistory(() => repository?.id);
+
+  const latestBackupRun = $derived(
+    runHistory.data?.find(
+      (run) => run.type === "backup" || run.type === "schedule",
+    ),
+  );
+
+  const paused = $derived(
+    Boolean(
+      integration &&
+      schedules.data?.find((entry) => entry.id === integration.scheduleId)
+        ?.paused,
+    ),
+  );
 
   const lastBackup = $derived(repository?.metrics.lastBackup ?? undefined);
 
@@ -41,8 +71,8 @@
     ),
   );
 
-  const sizeBytes = $derived(
-    repository?.meter?.sizeBytes ?? repository?.metrics.sizeBytes,
+  const loading = $derived(
+    integrations.isLoading || repositories.isLoading || schedules.isLoading,
   );
 </script>
 
@@ -51,16 +81,22 @@
   {onRepositoryCreate}
   {onRepositoryUpdate}
   {onRepositoryDelete}
+  {onScheduleCreate}
+  {onScheduleUpdate}
+  {onScheduleDelete}
+  {onRunCreate}
+  {onRunUpdate}
 />
 
-{#if !integrations.isLoading && !repositories.isLoading}
+{#if !loading}
   <ImmichBackupsCard
-    configured={Boolean(repository)}
-    {lastBackup}
-    {failed}
-    {sizeBytes}
     {href}
+    {failed}
+    {paused}
     {onclick}
+    {lastBackup}
     class={className}
+    configured={Boolean(repository)}
+    running={latestBackupRun?.status === "incomplete"}
   />
 {/if}

package/dist/components/integrations/immich/settings/ImmichSettingsStorage.svelte

@@ -158,7 +158,7 @@
           description="Once written, backups can't be removed. This can't be turned off again."
           readOnly // @immich/ui forces enabled={false} when disabled={true}
         >
-          <Switch checked class="grayscale brightness-90" />
+          <Switch checked class="cursor-not-allowed opacity-38" />
         </Field>
       {:else}
         <Field

package/dist/components/onboarding/upsell/UpsellFrequentlyAskedQuestions.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import Accordion from "../../ui/Accordion.svelte";
   import { Stack, Text } from "@immich/ui";
+  import type { Snippet } from "svelte";
 
   type Question = {
     title: string;
-    answer: string;
+    answer: string | Snippet;
   };
 
   type Props = {
@@ -20,7 +21,11 @@
   <Stack gap={0}>
     {#each questions as { title, answer } (title)}
       <Accordion {title}>
-        <Text size="small" color="muted">{answer}</Text>
+        {#if typeof answer === "string"}
+          <Text size="small" color="muted">{answer}</Text>
+        {:else}
+          {@render answer()}
+        {/if}
       </Accordion>
     {/each}
   </Stack>

package/dist/components/onboarding/upsell/UpsellFrequentlyAskedQuestions.svelte.d.ts

@@ -1,6 +1,7 @@
+import type { Snippet } from "svelte";
 type Question = {
     title: string;
-    answer: string;
+    answer: string | Snippet;
 };
 type Props = {
     questions: Question[];

package/dist/components/onboarding/upsell/UpsellPage.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Card, CardBody, Container, HStack, Stack } from "@immich/ui";
+  import type { Snippet } from "svelte";
   import UpsellBackupFeaturesGrid from "./UpsellBackupFeaturesGrid.svelte";
   import UpsellExplainFutoBackups from "./UpsellExplainFutoBackups.svelte";
   import UpsellFrequentlyAskedQuestions from "./UpsellFrequentlyAskedQuestions.svelte";
@@ -7,7 +8,7 @@
 
   type Question = {
     title: string;
-    answer: string;
+    answer: string | Snippet;
   };
 
   type Props = {

package/dist/components/onboarding/upsell/UpsellPage.svelte.d.ts

@@ -1,6 +1,7 @@
+import type { Snippet } from "svelte";
 type Question = {
     title: string;
-    answer: string;
+    answer: string | Snippet;
 };
 type Props = {
     price: string;

package/dist/components/test/ImmichTestUi.svelte

@@ -6,14 +6,12 @@
     AppShellSidebar,
     Avatar,
     Button,
-    HStack,
     IconButton,
     Input,
     Logo,
     NavbarGroup,
     NavbarItem,
     Stack,
-    Text,
     ThemeSwitcher,
   } from "@immich/ui";
   import {
@@ -39,12 +37,15 @@
   import { options } from "../../options";
   import { onDestroy } from "svelte";
   import ImmichBackupsNavButton from "../integrations/immich/ImmichBackupsNavButton.svelte";
+  import ImmichBackupsCard from "../integrations/immich/ImmichBackupsCard.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,
@@ -62,6 +63,7 @@
   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 = [
     {
@@ -87,6 +89,10 @@
 
 <OnEvents {onIntegrationUpdate} />
 
+{#snippet hideReminder()}
+  <MockImmichHideBackupsReminder />
+{/snippet}
+
 <AppShell class="h-full">
   <AppShellHeader>
     <div class="grid grid-cols-[--spacing(64)_auto] items-center w-full py-2">
@@ -253,17 +259,19 @@
       {/if}
 
       <Stack gap={4} class="mt-auto p-4">
-        <MockImmichStorageSpace onBackups={() => (route = "settings")} />
+        <MockImmichStorageSpace>
+          <ImmichBackupsCard
+            {configured}
+            lastBackup={configured ? twoHoursAgo : undefined}
+            onclick={() => (route = "settings")}
+          />
+        </MockImmichStorageSpace>
 
         {#if route !== "settings"}
           <MockImmichPurchaseInfo />
         {/if}
 
-        <HStack gap={2}>
-          <span class="bg-success size-2 rounded-full"></span>
-          <Text size="small" class="flex-1">Server Online</Text>
-          <Text size="small" color="muted">v3.0.3</Text>
-        </HStack>
+        <MockImmichServerStatus />
       </Stack>
     </div>
   </AppShellSidebar>
@@ -277,7 +285,13 @@
     <ImmichBackupsPage
       price="$1"
       includedStorage="50 GB"
-      questions={sampleQuestions}
+      questions={[
+        {
+          title: "Already back up your library elsewhere?",
+          answer: hideReminder,
+        },
+        ...sampleQuestions,
+      ]}
     />
   {:else}
     <MockImmichPhotos />

package/dist/components/test/immich/MockImmichHideBackupsReminder.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Field, Switch } from "@immich/ui";
+
+  let hidden = $state(false);
+</script>
+
+<Field
+  label="Hide backups reminder"
+  description="If you already manage backups outside of Immich, you can hide the backup setup reminder."
+>
+  <Switch bind:checked={hidden} />
+</Field>

package/dist/components/test/immich/MockImmichHideBackupsReminder.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const MockImmichHideBackupsReminder: import("svelte").Component<Record<string, never>, {}, "">;
+type MockImmichHideBackupsReminder = ReturnType<typeof MockImmichHideBackupsReminder>;
+export default MockImmichHideBackupsReminder;

package/dist/components/test/immich/MockImmichServerStatus.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { HStack, Text } from "@immich/ui";
+</script>
+
+<HStack gap={2}>
+  <span class="bg-success size-2 rounded-full"></span>
+  <Text size="small" class="flex-1">Server Online</Text>
+  <Text size="small" color="muted">v3.0.3</Text>
+</HStack>

package/dist/components/test/immich/MockImmichServerStatus.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 MockImmichServerStatus: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MockImmichServerStatus = InstanceType<typeof MockImmichServerStatus>;
+export default MockImmichServerStatus;

package/dist/components/test/immich/MockImmichSidebar.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Stack } from "@immich/ui";
+  import type { Snippet } from "svelte";
+  import MockImmichServerStatus from "./MockImmichServerStatus.svelte";
+  import MockImmichStorageSpace from "./MockImmichStorageSpace.svelte";
+
+  type Props = {
+    children: Snippet;
+  };
+
+  const { children }: Props = $props();
+</script>
+
+<Stack gap={4} class="bg-light w-80 shrink-0 rounded-2xl border p-4">
+  <MockImmichStorageSpace>
+    {@render children()}
+  </MockImmichStorageSpace>
+
+  <MockImmichServerStatus />
+</Stack>

package/dist/components/test/immich/MockImmichSidebar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type Props = {
+    children: Snippet;
+};
+declare const MockImmichSidebar: import("svelte").Component<Props, {}, "">;
+type MockImmichSidebar = ReturnType<typeof MockImmichSidebar>;
+export default MockImmichSidebar;

package/dist/components/test/immich/MockImmichStorageSpace.svelte

@@ -1,37 +1,25 @@
 <script lang="ts">
-  import { Icon, Meter, Text } from "@immich/ui";
-  import { mdiChevronRight, mdiCloudCheckOutline } from "@mdi/js";
+  import { ProgressBar, Stack, Text } from "@immich/ui";
+  import type { Snippet } from "svelte";
 
   type Props = {
-    onBackups: () => void;
+    children?: Snippet;
   };
 
-  const { onBackups }: Props = $props();
+  const { children }: Props = $props();
 </script>
 
-<div class="bg-light-100 overflow-hidden rounded-lg text-sm">
-  <div class="p-4">
-    <Meter
+<div class="bg-subtle overflow-hidden rounded-xl border">
+  <Stack gap={1} class="p-4 border-b">
+    <Text fontWeight="medium">Storage space</Text>
+    <Text size="small" color="muted">22.1 GiB of 100 GiB used</Text>
+    <ProgressBar
+      progress={0.221}
+      shape="round"
       size="tiny"
-      class="bg-light-200"
-      containerClass="gap-2 leading-6"
-      label="Storage"
-      valueLabel="22.1 GiB of 100 GiB used"
-      value={0.221}
+      class="mt-2 border-none"
     />
-  </div>
+  </Stack>
 
-  <button
-    type="button"
-    onclick={onBackups}
-    class="bg-success-50 text-success-700 flex w-full cursor-pointer items-center gap-2 px-3 py-3 text-start"
-  >
-    <Icon icon={mdiCloudCheckOutline} size="1em" class="shrink-0" />
-
-    <Text size="small" color="success" class="flex-1 truncate">
-      Backed up 2 hours ago
-    </Text>
-
-    <Icon icon={mdiChevronRight} size="1em" class="shrink-0" />
-  </button>
+  {@render children?.()}
 </div>

package/dist/components/test/immich/MockImmichStorageSpace.svelte.d.ts

@@ -1,5 +1,6 @@
+import type { Snippet } from "svelte";
 type Props = {
-    onBackups: () => void;
+    children?: Snippet;
 };
 declare const MockImmichStorageSpace: import("svelte").Component<Props, {}, "">;
 type MockImmichStorageSpace = ReturnType<typeof MockImmichStorageSpace>;

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

@@ -8,7 +8,7 @@ export declare const runHistoryKeys: {
 export declare const runKeys: {
     byId: (id: string) => readonly ["run", string];
 };
-export declare const useRunHistory: (repositoryId: string) => import("@tanstack/svelte-query").CreateQueryResult<sdk.RunDto[], Error>;
+export declare const useRunHistory: (repositoryId: () => string | undefined) => import("@tanstack/svelte-query").CreateQueryResult<sdk.RunDto[], Error>;
 export declare const useRun: (logId: string) => import("@tanstack/svelte-query").CreateQueryResult<sdk.RunDto, Error>;
 export declare const useRunEventHandler: () => {
     onRunCreate(event: SocketEvent<{

package/dist/services/runHistory.service.js

@@ -13,8 +13,9 @@ export const runKeys = {
     byId: (id) => ['run', id],
 };
 export const useRunHistory = (repositoryId) => createQuery(() => ({
-    queryKey: runHistoryKeys.byRepository(repositoryId),
-    queryFn: () => getRunHistory(repositoryId).then(({ runs }) => runs.toSorted((a, b) => b.start.localeCompare(a.start))),
+    queryKey: runHistoryKeys.byRepository(repositoryId() ?? ''),
+    queryFn: () => getRunHistory(repositoryId()).then(({ runs }) => runs.toSorted((a, b) => b.start.localeCompare(a.start))),
+    enabled: repositoryId() !== undefined,
 }), () => queryClient);
 export const useRun = (logId) => createQuery(() => ({
     queryKey: runKeys.byId(logId),

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.28.0",
+  "version": "0.30.1",
   "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.28.0"
+    "@futo-org/backups-api-client": "^0.30.1"
   },
   "scripts": {
     "dev": "vite dev --port 5174",