@futo-org/backups-orchestrator-ui 0.26.0 → 0.28.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,26 @@
 <script lang="ts">
+  import UpsellPage from "../../onboarding/upsell/UpsellPage.svelte";
   import ImmichManageBackup from "./ImmichManageBackup.svelte";
   import ImmichOnboardingSetupFlow from "./ImmichOnboardingSetupFlow.svelte";
 
+  type Question = {
+    title: string;
+    answer: string;
+  };
+
   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,11 @@
+type Question = {
+    title: string;
+    answer: string;
+};
 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,66 @@
+<script lang="ts">
+  import OnEvents from "../../util/OnEvents.svelte";
+  import {
+    useIntegrationEventHandler,
+    useIntegrations,
+  } from "../../../services/integrations.service";
+  import {
+    useRepositories,
+    useRepositoryEventHandler,
+  } from "../../../services/repository.service";
+  import ImmichBackupsCard from "./ImmichBackupsCard.svelte";
+
+  type Props = {
+    href?: string;
+    onclick?: () => void;
+    class?: string;
+  };
+
+  const { href = "/backups", onclick, class: className }: Props = $props();
+
+  const integrations = useIntegrations();
+  const repositories = useRepositories();
+
+  const { onIntegrationUpdate } = useIntegrationEventHandler();
+  const { onRepositoryCreate, onRepositoryUpdate, onRepositoryDelete } =
+    useRepositoryEventHandler();
+
+  const repository = $derived.by(() => {
+    const integration = integrations.data?.immichIntegration;
+
+    return integration
+      ? repositories.data?.find((entry) => entry.id === integration.id)
+      : undefined;
+  });
+
+  const lastBackup = $derived(repository?.metrics.lastBackup ?? undefined);
+
+  const failed = $derived(
+    Boolean(
+      lastBackup && lastBackup !== repository?.metrics.lastSuccessfulBackup,
+    ),
+  );
+
+  const sizeBytes = $derived(
+    repository?.meter?.sizeBytes ?? repository?.metrics.sizeBytes,
+  );
+</script>
+
+<OnEvents
+  {onIntegrationUpdate}
+  {onRepositoryCreate}
+  {onRepositoryUpdate}
+  {onRepositoryDelete}
+/>
+
+{#if !integrations.isLoading && !repositories.isLoading}
+  <ImmichBackupsCard
+    configured={Boolean(repository)}
+    {lastBackup}
+    {failed}
+    {sizeBytes}
+    {href}
+    {onclick}
+    class={className}
+  />
+{/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>

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

@@ -1,39 +1,56 @@
 <script lang="ts">
   import OnboardingBootstrapError from "../../onboarding/OnboardingBootstrapError.svelte";
-  import OnboardingStageBackupServices from "../../onboarding/stages/OnboardingStageBackupServices.svelte";
-  import OnboardingStageKeyConfirm from "../../onboarding/stages/OnboardingStageKeyConfirm.svelte";
   import OnboardingStageKeyImport from "../../onboarding/stages/OnboardingStageKeyImport.svelte";
-  import OnboardingStageKeyIntro from "../../onboarding/stages/OnboardingStageKeyIntro.svelte";
-  import OnboardingStageSaveKey from "../../onboarding/stages/OnboardingStageKeySave.svelte";
   import OnboardingStageTelemetry from "../../onboarding/stages/OnboardingStageTelemetry.svelte";
-  import OnboardingStageWelcome from "../../onboarding/stages/OnboardingStageWelcome.svelte";
+  import OnboardingStepFinishSetup from "../../onboarding/steps/OnboardingStep1FinishSetup.svelte";
+  import OnboardingStepConnectAccount from "../../onboarding/steps/OnboardingStep2ConnectAccount.svelte";
+  import OnboardingStepSaveRecoveryKey from "../../onboarding/steps/OnboardingStep3SaveRecoveryKey.svelte";
+  import OnboardingStepFirstBackup from "../../onboarding/steps/OnboardingStep4FirstBackup.svelte";
   import type { OnboardingStatusResponseDto } from "../../../fetch-client";
+  import {
+    handleSetupLocalStorage,
+    handleStartYuccaLogin,
+  } from "../../../services/backend.service";
+  import {
+    IMMICH_DEFAULT_CRON,
+    useConfigureImmichDefaults,
+  } from "../../../services/integrations.service";
   import {
     handleConfirmRecoveryKey,
     handleCurrentRecoveryKey,
     handleOnboardingStatus,
   } from "../../../services/onboarding.service";
-  import { LoadingSpinner } from "@immich/ui";
+  import { LoadingSpinner, Modal, ModalBody } from "@immich/ui";
+  import cronstrue from "cronstrue";
   import { onMount, type Snippet } from "svelte";
-  import ImmichConfigureBackup from "./ImmichConfigureBackup.svelte";
-  import ImmichConfirmDefaultBackup from "./ImmichConfirmDefaultBackup.svelte";
+
+  type Stage =
+    | "idle"
+    | "intro"
+    | "telemetry"
+    | "connect"
+    | "key-import"
+    | "key"
+    | "backup"
+    | "finished";
 
   type Props = {
-    onExit: () => void;
+    fallback: Snippet<[() => void]>;
     children: Snippet;
   };
 
-  const { onExit, children }: Props = $props();
+  const { fallback, children }: Props = $props();
 
   let code = $state("");
-  let backendId = $state("");
+  let storageLocation = $state("FUTO Backups");
   let status: OnboardingStatusResponseDto | undefined = $state();
-  let stage:
-    | `welcome`
-    | `telemetry`
-    | `key-${"intro" | "save" | "confirm" | "import"}`
-    | `backup-${"service" | "confirm" | "create"}`
-    | `finished` = $state("welcome");
+  let stage: Stage = $state("idle");
+  let resume: Stage = $state("intro");
+  let confirming = $state(false);
+
+  const defaults = useConfigureImmichDefaults();
+
+  const schedule = cronstrue.toString(IMMICH_DEFAULT_CRON, { verbose: true });
 
   onMount(() => {
     handleOnboardingStatus().then(async (data) => {
@@ -44,12 +61,12 @@
       }
 
       if (data.hasOnboardedKey) {
-        stage =
-          data.hasTelemetry === "none"
-            ? "telemetry"
-            : data.hasBackup
-              ? "finished"
-              : "backup-service";
+        if (data.hasBackup) {
+          stage = "finished";
+          return;
+        }
+
+        resume = data.hasTelemetry === "none" ? "telemetry" : "connect";
       } else {
         const { recoveryKey } = await handleCurrentRecoveryKey();
         code = recoveryKey;
@@ -57,75 +74,99 @@
     });
   });
 
-  const onConfirmKey = async () => {
-    await handleConfirmRecoveryKey();
-    stage = "backup-service";
+  const onStart = () => (stage = resume);
+  const onCancel = () => (stage = "idle");
+
+  const afterTelemetry = () =>
+    (stage = status?.hasOnboardedKey && status.hasBackup
+      ? "finished"
+      : "connect");
+
+  const onBackendReady = () => (stage = status?.hasOnboardedKey ? "backup" : "key");
+
+  const onConnect = () => {
+    storageLocation = "FUTO Backups";
+    handleStartYuccaLogin(onBackendReady);
+  };
+
+  const onLocalStorage = () => {
+    storageLocation = "Local Storage";
+    handleSetupLocalStorage(onBackendReady);
   };
 
-  const onSelectBackend = (id: string) => {
-    backendId = id;
-    stage = "backup-confirm";
+  const onConfirmKey = async () => {
+    confirming = true;
+
+    try {
+      await handleConfirmRecoveryKey();
+      stage = "backup";
+    } finally {
+      confirming = false;
+    }
   };
+
+  const onStartBackup = () =>
+    defaults.mutate(undefined, { onSuccess: () => (stage = "finished") });
 </script>
 
 {#if status === undefined || status.status === "not-ready"}
-  <LoadingSpinner />
-{:else if status.status === "error"}
-  <OnboardingBootstrapError error={status.error} onQuit={onExit} />
+  <div class="flex h-full items-center justify-center p-8">
+    <LoadingSpinner />
+  </div>
 {:else if stage === "finished"}
   {@render children()}
-{:else if stage === "welcome"}
-  <OnboardingStageWelcome
-    onNext={() => (stage = status?.hasTelemetry === "none" ? "telemetry" : "key-intro")}
-    onImportKey={() => (stage = "key-import")}
-    onCancel={onExit}
-  />
+{:else}
+  {@render fallback(onStart)}
+{/if}
+
+{#if status?.status === "error" && stage !== "idle"}
+  <OnboardingBootstrapError error={status.error} onQuit={onCancel} />
+{:else if stage === "intro"}
+  <Modal size="small" title="FUTO Backups" onClose={onCancel}>
+    <ModalBody>
+      <OnboardingStepFinishSetup
+        onContinue={() =>
+          (stage = status?.hasTelemetry === "none" ? "telemetry" : "connect")}
+        onImportKey={() => (stage = "key-import")}
+      />
+    </ModalBody>
+  </Modal>
 {:else if stage === "telemetry"}
-  <OnboardingStageTelemetry
-    onContinue={() =>
-      (stage = status?.hasOnboardedKey
-        ? status.hasBackup
-          ? "finished"
-          : "backup-service"
-        : "key-intro")}
-    onCancel={onExit}
-  />
+  <OnboardingStageTelemetry onContinue={afterTelemetry} {onCancel} />
+{:else if stage === "connect"}
+  <Modal size="small" title="FUTO Backups" onClose={onCancel}>
+    <ModalBody>
+      <OnboardingStepConnectAccount {onConnect} {onLocalStorage} />
+    </ModalBody>
+  </Modal>
 {:else if stage === "key-import"}
   <OnboardingStageKeyImport
-    onStart={() => (stage = "welcome")}
-    onImported={() => (stage = "key-confirm")}
-    onCancel={onExit}
-  />
-{:else if stage === "key-intro"}
-  <OnboardingStageKeyIntro
-    onNext={() => (stage = "key-save")}
-    onCancel={onExit}
-  />
-{:else if stage === "key-save"}
-  <OnboardingStageSaveKey
-    {code}
-    onNext={() => (stage = "key-confirm")}
-    onCancel={onExit}
-  />
-{:else if stage === "key-confirm"}
-  <OnboardingStageKeyConfirm
-    {code}
-    onBack={() => (stage = "key-save")}
-    onCancel={onExit}
-    {onConfirmKey}
-  />
-{:else if stage === "backup-service"}
-  <OnboardingStageBackupServices onNext={onSelectBackend} onCancel={onExit} />
-{:else if stage === "backup-confirm"}
-  <ImmichConfirmDefaultBackup
-    onCustomize={() => (stage = "backup-create")}
-    onConfirm={() => (stage = "finished")}
-    onCancel={onExit}
-  />
-{:else if stage === "backup-create"}
-  <ImmichConfigureBackup
-    onFinish={() => (stage = "finished")}
-    onCancel={onExit}
-    {backendId}
+    onStart={() => (stage = "intro")}
+    onImported={(key) => {
+      code = key;
+      stage = "connect";
+    }}
+    {onCancel}
   />
+{:else if stage === "key"}
+  <Modal size="small" title="FUTO Backups" onClose={onCancel}>
+    <ModalBody>
+      <OnboardingStepSaveRecoveryKey
+        {code}
+        onContinue={onConfirmKey}
+        loading={confirming}
+      />
+    </ModalBody>
+  </Modal>
+{:else if stage === "backup"}
+  <Modal size="small" title="FUTO Backups" onClose={onCancel}>
+    <ModalBody>
+      <OnboardingStepFirstBackup
+        {schedule}
+        {storageLocation}
+        {onStartBackup}
+        loading={defaults.isPending}
+      />
+    </ModalBody>
+  </Modal>
 {/if}