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

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

@@ -0,0 +1,55 @@
+<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

@@ -0,0 +1,10 @@
+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;

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

@@ -1,14 +1,27 @@
 <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 | Snippet;
+  };
+
   type Props = {
-    onExit: () => void;
+    price: string;
+    includedStorage: string;
+    questions: Question[];
   };
 
-  const { onExit }: Props = $props();
+  const { price, includedStorage, questions }: Props = $props();
 </script>
 
-<ImmichOnboardingSetupFlow {onExit}>
+<ImmichOnboardingSetupFlow>
+  {#snippet fallback(onStart)}
+    <UpsellPage {price} {includedStorage} {questions} onGetStarted={onStart} />
+  {/snippet}
+
   <ImmichManageBackup />
 </ImmichOnboardingSetupFlow>

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

@@ -1,5 +1,12 @@
+import type { Snippet } from "svelte";
+type Question = {
+    title: string;
+    answer: string | Snippet;
+};
 type Props = {
-    onExit: () => void;
+    price: string;
+    includedStorage: string;
+    questions: Question[];
 };
 declare const ImmichBackupsPage: import("svelte").Component<Props, {}, "">;
 type ImmichBackupsPage = ReturnType<typeof ImmichBackupsPage>;

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

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import OnEvents from "../../util/OnEvents.svelte";
+  import {
+    useIntegrationEventHandler,
+    useIntegrations,
+  } from "../../../services/integrations.service";
+  import {
+    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 = {
+    href?: string;
+    onclick?: () => void;
+    class?: string;
+  };
+
+  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 integration = $derived(integrations.data?.immichIntegration);
+
+  const repository = $derived(
+    integration
+      ? repositories.data?.find((entry) => entry.id === integration.id)
+      : 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);
+
+  const failed = $derived(
+    Boolean(
+      lastBackup && lastBackup !== repository?.metrics.lastSuccessfulBackup,
+    ),
+  );
+
+  const loading = $derived(
+    integrations.isLoading || repositories.isLoading || schedules.isLoading,
+  );
+</script>
+
+<OnEvents
+  {onIntegrationUpdate}
+  {onRepositoryCreate}
+  {onRepositoryUpdate}
+  {onRepositoryDelete}
+  {onScheduleCreate}
+  {onScheduleUpdate}
+  {onScheduleDelete}
+  {onRunCreate}
+  {onRunUpdate}
+/>
+
+{#if !loading}
+  <ImmichBackupsCard
+    {href}
+    {failed}
+    {paused}
+    {onclick}
+    {lastBackup}
+    class={className}
+    configured={Boolean(repository)}
+    running={latestBackupRun?.status === "incomplete"}
+  />
+{/if}

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

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

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

@@ -17,6 +17,9 @@
     useScheduleEventHandler,
     useSchedules,
   } from "../../../services/schedule.service";
+  import RepositoryRunHistoryPage from "../../backups/run-history/RepositoryRunHistoryPage.svelte";
+  import RepositorySnapshotsPage from "../../backups/snapshots-list/RepositorySnapshotsPage.svelte";
+  import ImmichBackupSettings from "./ImmichBackupSettings.svelte";
   import { Container, Stack } from "@immich/ui";
   import ImmichManageBackupOverview from "./ImmichManageBackupOverview.svelte";
 
@@ -48,8 +51,12 @@
       : undefined,
   );
 
-  const { ViewRecoveryKey, Configure, BackUpNow } = $derived(
-    getBackupPageActions(repository?.id),
+  let view = $state<"overview" | "attempts" | "snapshots" | "settings">(
+    "overview",
+  );
+
+  const { ViewRecoveryKey, Configure } = $derived(
+    getBackupPageActions(repository?.id, () => (view = "settings")),
   );
 </script>
 
@@ -63,15 +70,47 @@
   {onIntegrationUpdate}
 />
 
-<PageLayout title="Backups" actions={[ViewRecoveryKey, Configure, BackUpNow]}>
-  <Container size="large" center>
-    {#if repository && schedule}
-      <Stack class="mt-4" gap={8}>
-        <ImmichManageBackupOverview {repository} {schedule} />
-        <BackendsList {repository} />
-        <RepositoryRunHistory {repository} />
-        <RepositorySnapshotsList {repository} immich />
-      </Stack>
-    {/if}
-  </Container>
-</PageLayout>
+{#if view === "attempts" && repository}
+  <PageLayout title="Backup attempts" onBack={() => (view = "overview")}>
+    <Container size="medium" center>
+      <div class="mt-4">
+        <RepositoryRunHistoryPage {repository} />
+      </div>
+    </Container>
+  </PageLayout>
+{:else if view === "settings"}
+  <PageLayout title="Backup settings" onBack={() => (view = "overview")}>
+    <div class="mt-4">
+      <ImmichBackupSettings />
+    </div>
+  </PageLayout>
+{:else if view === "snapshots" && repository}
+  <PageLayout title="Snapshots" onBack={() => (view = "overview")}>
+    <Container size="medium" center>
+      <div class="mt-4">
+        <RepositorySnapshotsPage {repository} immich />
+      </div>
+    </Container>
+  </PageLayout>
+{:else}
+  <PageLayout title="Backups" actions={[ViewRecoveryKey, Configure]}>
+    <Container size="medium" center>
+      {#if repository && schedule}
+        <Stack class="mt-4" gap={6}>
+          <ImmichManageBackupOverview {repository} {schedule} />
+          <BackendsList {repository} />
+          <RepositoryRunHistory
+            {repository}
+            onViewAll={() => (view = "attempts")}
+          />
+          <RepositorySnapshotsList
+            {repository}
+            immich
+            limit={5}
+            onViewAll={() => (view = "snapshots")}
+          />
+        </Stack>
+      {/if}
+    </Container>
+  </PageLayout>
+{/if}

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

@@ -3,26 +3,14 @@
   import StackListItem from "../../ui/StackListItem.svelte";
   import RelativeTime from "../../util/RelativeTime.svelte";
   import type { LocalRepositoryDto, ScheduleDto } from "../../../fetch-client";
-  import {
-    handlePauseSchedule,
-    handleResumeSchedule,
-  } from "../../../services/schedule.service";
-  import {
-    FormatBytes,
-    Heading,
-    HStack,
-    Icon,
-    IconButton,
-    Stack,
-    Text,
-  } from "@immich/ui";
+  import { handleCreateBackup } from "../../../services/repository.service";
+  import { Button, FormatBytes, Icon } from "@immich/ui";
   import {
     mdiAlert,
     mdiArchiveOutline,
     mdiCheck,
+    mdiCloudUploadOutline,
     mdiInformation,
-    mdiPauseCircleOutline,
-    mdiPlayCircleOutline,
   } from "@mdi/js";
   import cronstrue from "cronstrue";
 
@@ -33,72 +21,58 @@
 
   const { repository, schedule }: Props = $props();
 
-  function togglePause() {
-    if (schedule!.paused) {
-      handleResumeSchedule(schedule!.id, "Immich");
-    } else {
-      handlePauseSchedule(schedule!.id, "Immich");
+  const status = $derived.by(() => {
+    if (!repository.metrics.lastBackup) {
+      return { color: "warning", icon: mdiInformation } as const;
     }
-  }
+
+    return repository.metrics.lastBackup !==
+      repository.metrics.lastSuccessfulBackup
+      ? ({ color: "danger", icon: mdiAlert } as const)
+      : ({ color: "success", icon: mdiCheck } as const);
+  });
+
 </script>
 
 <StackList>
-  <StackListItem>
+  <StackListItem title="Your library" footerColor={status.color}>
     {#snippet icon()}
-      <Icon icon={mdiArchiveOutline} size="32px" />
+      <Icon icon={mdiArchiveOutline} />
     {/snippet}
 
-    <HStack gap={4}>
-      <Stack gap={0}>
-        <Heading size="tiny">Your library</Heading>
-        <Text>
-          {#if repository.meter}
-            <FormatBytes bytes={repository.meter.sizeBytes} />
-          {:else}
-            Estimated <FormatBytes bytes={repository.metrics.sizeBytes} />
-          {/if} &middot;
-          <span class="lowercase"
-            >{cronstrue.toString(schedule.cron, {
-              verbose: true,
-            })}</span
-          >
-        </Text>
-      </Stack>
-    </HStack>
+    {#if repository.meter}
+      <FormatBytes bytes={repository.meter.sizeBytes} />
+    {:else}
+      Estimated <FormatBytes bytes={repository.metrics.sizeBytes} />
+    {/if} &middot;
+    <span class="lowercase">
+      {cronstrue.toString(schedule.cron, { verbose: true })}
+    </span>
 
     {#snippet trailing()}
-      <IconButton
+      <Button
         variant="ghost"
-        onclick={togglePause}
-        aria-label={schedule.paused ? "Resume backups" : "Pause backups"}
-        icon={schedule.paused ? mdiPlayCircleOutline : mdiPauseCircleOutline}
-      />
+        size="small"
+        class="whitespace-nowrap"
+        leadingIcon={mdiCloudUploadOutline}
+        onclick={() => void handleCreateBackup(repository.id)}
+      >
+        Back up now
+      </Button>
     {/snippet}
-  </StackListItem>
 
-  {#if repository.metrics.lastBackup}
-    {#if repository.metrics.lastBackup !== repository.metrics.lastSuccessfulBackup}
-      <StackListItem class="bg-danger-100">
-        <HStack>
-          <Icon icon={mdiAlert} /> Last backup failed <RelativeTime
-            time={repository.metrics.lastBackup}
-          />
-        </HStack>
-      </StackListItem>
-    {:else}
-      <StackListItem class="bg-success-50">
-        <HStack>
-          <Icon icon={mdiCheck} /> Last backup successful <RelativeTime
-            time={repository.metrics.lastBackup}
-          />
-        </HStack>
-      </StackListItem>
-    {/if}
-  {:else}
-    <StackListItem class="bg-warning-50">
-      <HStack>
-        <Icon icon={mdiInformation} /> Backup is yet to run.
-      </HStack>
-    </StackListItem>
-  {/if}
+    {#snippet footer()}
+      <Icon icon={status.icon} />
+
+      {#if !repository.metrics.lastBackup}
+        Backup is yet to run.
+      {:else if status.color === "danger"}
+        Last backup failed <RelativeTime time={repository.metrics.lastBackup} />
+      {:else}
+        Last backup successful <RelativeTime
+          time={repository.metrics.lastBackup}
+        />
+      {/if}
+    {/snippet}
+  </StackListItem>
 </StackList>