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

package/dist/components/ui/StackListItem.svelte

@@ -1,43 +1,69 @@
 <script lang="ts">
   import { hasActions } from "../../utils/actions";
-  import { ContextMenuButton, HStack, type ActionItem } from "@immich/ui";
+  import {
+    ContextMenuButton,
+    HStack,
+    Stack,
+    Text,
+    type ActionItem,
+  } from "@immich/ui";
   import { mdiDotsVertical } from "@mdi/js";
   import type { Snippet } from "svelte";
 
+  type Color = "primary" | "success" | "warning" | "danger";
+
   type Props = {
     class?: string;
+    title?: string;
+    color?: Color;
     icon?: Snippet;
     children: Snippet;
     trailing?: Snippet;
+    footer?: Snippet;
+    footerColor?: Color;
     actions?: ActionItem[];
-    disabled?: boolean;
-    onclick?: () => void;
   };
 
   const {
     class: className,
+    title,
+    color = "primary",
     icon,
     children,
     trailing,
+    footer,
+    footerColor = "primary",
     actions = [],
-    disabled = false,
-    onclick,
   }: Props = $props();
+
+  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>
 
-{#snippet body()}
-  <HStack gap={4} class={`${className} items-center px-4 py-3`}>
+<div>
+  <HStack gap={4} class={`${className} items-center px-5 py-4`}>
     {#if icon}
       <div
-        class="flex p-2 items-center justify-center rounded-lg bg-subtle text-lg"
+        class={`flex size-10 shrink-0 items-center justify-center rounded-lg text-xl ${tints[color]}`}
       >
-        {@render icon?.()}
+        {@render icon()}
       </div>
     {/if}
 
-    <HStack gap={1} class="flex-1 items-baseline">
-      {@render children()}
-    </HStack>
+    {#if title}
+      <Stack gap={0} class="flex-1 min-w-0">
+        <Text class="truncate">{title}</Text>
+        <Text size="small" color="muted">{@render children()}</Text>
+      </Stack>
+    {:else}
+      <HStack gap={1} class="flex-1 items-baseline">
+        {@render children()}
+      </HStack>
+    {/if}
 
     {@render trailing?.()}
 
@@ -51,17 +77,13 @@
       />
     {/if}
   </HStack>
-{/snippet}
 
-{#if onclick}
-  <button
-    {onclick}
-    {disabled}
-    type="button"
-    class="block w-full text-left rounded-lg hover:bg-subtle focus-visible:outline-2 focus-visible:outline-primary-500 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60"
-  >
-    {@render body()}
-  </button>
-{:else}
-  {@render body()}
-{/if}
+  {#if footer}
+    <HStack
+      gap={2}
+      class={`items-center border-t px-5 py-3 ${tints[footerColor]}`}
+    >
+      {@render footer()}
+    </HStack>
+  {/if}
+</div>

package/dist/components/ui/StackListItem.svelte.d.ts

@@ -1,13 +1,16 @@
 import { type ActionItem } from "@immich/ui";
 import type { Snippet } from "svelte";
+type Color = "primary" | "success" | "warning" | "danger";
 type Props = {
     class?: string;
+    title?: string;
+    color?: Color;
     icon?: Snippet;
     children: Snippet;
     trailing?: Snippet;
+    footer?: Snippet;
+    footerColor?: Color;
     actions?: ActionItem[];
-    disabled?: boolean;
-    onclick?: () => void;
 };
 declare const StackListItem: import("svelte").Component<Props, {}, "">;
 type StackListItem = ReturnType<typeof StackListItem>;

package/dist/components/ui/StackListOption.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Icon } from "@immich/ui";
+  import { mdiChevronRight } from "@mdi/js";
+  import type { Snippet } from "svelte";
+  import StackListItem from "./StackListItem.svelte";
+
+  type Props = {
+    title: string;
+    icon?: Snippet;
+    children: Snippet;
+    disabled?: boolean;
+    onclick: () => void;
+  };
+
+  const { title, icon, children, disabled = false, onclick }: Props = $props();
+</script>
+
+<button
+  type="button"
+  {disabled}
+  {onclick}
+  class="block w-full cursor-pointer text-left hover:bg-subtle focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-500 disabled:cursor-not-allowed disabled:opacity-60"
+>
+  <StackListItem {title} {icon}>
+    {@render children()}
+
+    {#snippet trailing()}
+      {#if !disabled}
+        <Icon icon={mdiChevronRight} />
+      {/if}
+    {/snippet}
+  </StackListItem>
+</button>

package/dist/components/ui/StackListOption.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type Props = {
+    title: string;
+    icon?: Snippet;
+    children: Snippet;
+    disabled?: boolean;
+    onclick: () => void;
+};
+declare const StackListOption: import("svelte").Component<Props, {}, "">;
+type StackListOption = ReturnType<typeof StackListOption>;
+export default StackListOption;

package/dist/components/ui/StackListPlaceholder.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Text } from "@immich/ui";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    children: Snippet;
+  };
+
+  const { children }: Props = $props();
+</script>
+
+<Text class="block text-center py-8" color="muted">{@render children()}</Text>

package/dist/components/ui/StackListPlaceholder.svelte.d.ts

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

package/dist/components/ui/StepNumber.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  type Props = {
+    step: number;
+    size?: "small" | "medium";
+  };
+
+  const { step, size = "medium" }: Props = $props();
+
+  const sizes = {
+    small: "size-5 text-xs",
+    medium: "size-8 text-lg",
+  };
+</script>
+
+<span
+  class={`bg-primary text-light flex shrink-0 items-center justify-center rounded-full tabular-nums ${sizes[size]}`}
+  aria-hidden="true"
+>
+  {step}
+</span>

package/dist/components/ui/StepNumber.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    step: number;
+    size?: "small" | "medium";
+};
+declare const StepNumber: import("svelte").Component<Props, {}, "">;
+type StepNumber = ReturnType<typeof StepNumber>;
+export default StepNumber;

package/dist/components/util/Suspense.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T extends object">
   import { getReadableErrorMessage } from "../../utils/handle-error";
-  import { Alert, LoadingSpinner } from "@immich/ui";
+  import { Alert, HStack, LoadingSpinner } from "@immich/ui";
   import type { CreateQueryResult } from "@tanstack/svelte-query";
   import type { Snippet } from "svelte";
 
@@ -13,9 +13,13 @@
 </script>
 
 {#if query.isLoading}
-  <LoadingSpinner />
+  <HStack class="justify-center p-8">
+    <LoadingSpinner />
+  </HStack>
 {:else if query.isError}
-  <Alert color="danger">{getReadableErrorMessage(query.error)}</Alert>
+  <div class="p-4">
+    <Alert color="danger">{getReadableErrorMessage(query.error)}</Alert>
+  </div>
 {:else if query.isSuccess}
   {@render children(query.data)}
 {/if}

package/dist/components/util/YuccaContext.svelte

@@ -12,7 +12,7 @@
   const { baseUrl, children }: Props = $props();
 
   // svelte-ignore state_referenced_locally
-  if (baseUrl) {
+  if (typeof baseUrl === "string") {
     orchestrationDefaults.baseUrl = baseUrl;
   }
 

package/dist/events.js

@@ -10,7 +10,7 @@ export class SocketEvent extends Event {
     }
 }
 function createSocket() {
-    socket = io(defaults.baseUrl, {
+    socket = io(defaults.baseUrl || undefined, {
         path: '/api/yucca/socket.io',
         transports: ['websocket'],
         autoConnect: false,

package/dist/fetch-client.d.ts

@@ -81,6 +81,7 @@ export type ConfigureImmichIntegrationRequestDto = {
     backupConfiguration: boolean;
     libraries: "all" | string[];
     retentionPolicy?: (RetentionPolicyDto) | null;
+    paused?: boolean;
 };
 export type ImmichRollbackRequestDto = {
     repositoryId: string;
@@ -185,6 +186,7 @@ export type RepositoryInspectResponseDto = {
 };
 export type RepositoryUpdateRequestDto = {
     name?: string;
+    worm?: boolean;
     paths?: string[];
     retentionPolicy?: (RetentionPolicyDto) | null;
 };

package/dist/index.d.ts

@@ -1,13 +1,18 @@
 export { default as BackendsList } from './components/backends/BackendsList.svelte';
 export { default as BackupsList } from './components/backups/BackupsList.svelte';
-export { default as ViewLogModal } from './components/backups/dialogs/ViewLogModal.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 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';
 export { default as ImmichOnboardingRestoreFlow } from './components/integrations/immich/ImmichOnboardingRestoreFlow.svelte';
 export { default as ImmichOnboardingSetupFlow } from './components/integrations/immich/ImmichOnboardingSetupFlow.svelte';
 export { default as OnboardingGate } from './components/onboarding/OnboardingGate.svelte';
+export { default as UpsellModal } from './components/onboarding/upsell/UpsellModal.svelte';
+export { default as UpsellPage } from './components/onboarding/upsell/UpsellPage.svelte';
 export { default as ScheduleList } from './components/schedules/ScheduleList.svelte';
+export { default as GlobalSettings } from './components/settings/GlobalSettings.svelte';
 export { default as VisualisationGauge } from './components/ui/VisualisationGauge.svelte';
 export { default as VisualisationSegmentedBar } from './components/ui/VisualisationSegmentedBar.svelte';
 export { default as OnEvents } from './components/util/OnEvents.svelte';

package/dist/index.js

@@ -1,13 +1,18 @@
 export { default as BackendsList } from './components/backends/BackendsList.svelte';
 export { default as BackupsList } from './components/backups/BackupsList.svelte';
-export { default as ViewLogModal } from './components/backups/dialogs/ViewLogModal.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 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';
 export { default as ImmichOnboardingRestoreFlow } from './components/integrations/immich/ImmichOnboardingRestoreFlow.svelte';
 export { default as ImmichOnboardingSetupFlow } from './components/integrations/immich/ImmichOnboardingSetupFlow.svelte';
 export { default as OnboardingGate } from './components/onboarding/OnboardingGate.svelte';
+export { default as UpsellModal } from './components/onboarding/upsell/UpsellModal.svelte';
+export { default as UpsellPage } from './components/onboarding/upsell/UpsellPage.svelte';
 export { default as ScheduleList } from './components/schedules/ScheduleList.svelte';
+export { default as GlobalSettings } from './components/settings/GlobalSettings.svelte';
 export { default as VisualisationGauge } from './components/ui/VisualisationGauge.svelte';
 export { default as VisualisationSegmentedBar } from './components/ui/VisualisationSegmentedBar.svelte';
 export { default as OnEvents } from './components/util/OnEvents.svelte';

package/dist/services/backend.service.js

@@ -23,8 +23,11 @@ export const useDeviceFlow = (uid) => createQuery(() => ({
         window.open(response.verificationUri, '_blank');
         return response;
     },
+    gcTime: Infinity,
+    retry: 0,
     refetchOnReconnect: false,
     refetchOnWindowFocus: false,
+    refetchOnMount: true,
 }), () => queryClient);
 export const useBackendEventHandler = () => {
     return {

package/dist/services/immich.integration.service.d.ts

@@ -1,5 +1,5 @@
 import { type ActionItem } from '@immich/ui';
-export declare const getBackupPageActions: (repositoryId?: string) => {
+export declare const getBackupPageActions: (repositoryId: string | undefined, onConfigure: () => void) => {
     Configure: ActionItem;
     ViewRecoveryKey: ActionItem;
     BackUpNow: ActionItem;

package/dist/services/immich.integration.service.js

@@ -1,13 +1,12 @@
-import ImmichConfigureBackup from '../components/integrations/immich/ImmichConfigureBackup.svelte';
 import BackupsRecoveryKeyModal from '../components/onboarding/dialogs/BackupsRecoveryKeyModal.svelte';
 import { modalManager } from '@immich/ui';
 import { mdiCloudUploadOutline, mdiCogOutline, mdiKeyOutline } from '@mdi/js';
 import { handleCreateBackup } from './repository.service';
-export const getBackupPageActions = (repositoryId) => {
+export const getBackupPageActions = (repositoryId, onConfigure) => {
     const Configure = {
         title: 'Configure',
         icon: mdiCogOutline,
-        onAction: () => modalManager.show(ImmichConfigureBackup, {}),
+        onAction: onConfigure,
     };
     const ViewRecoveryKey = {
         title: 'View recovery key',

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

@@ -1,5 +1,6 @@
 import { SocketEvent } from '../events';
 import { type ConfigureImmichIntegrationRequestDto, type IntegrationsResponseDto } from '../fetch-client';
+export declare const IMMICH_DEFAULT_CRON = "0 3 * * *";
 export declare const integrationsKeys: {
     all: readonly ["integrations"];
 };

package/dist/services/integrations.service.js

@@ -3,6 +3,7 @@ import { configureImmichIntegration, getIntegrations, } from '../fetch-client';
 import { queryClient } from '../query-client';
 import { handleError } from '../utils/handle-error';
 import { createMutation, createQuery } from '@tanstack/svelte-query';
+export const IMMICH_DEFAULT_CRON = '0 3 * * *';
 export const integrationsKeys = {
     all: ['integrations'],
 };
@@ -28,7 +29,7 @@ export const useConfigureImmichDefaults = () => createMutation(() => ({
         await configureImmichIntegration({
             name: 'Immich',
             worm: false,
-            cron: '0 3 * * *',
+            cron: IMMICH_DEFAULT_CRON,
             dataFolders: immichState.dataFolders,
             backupConfiguration: true,
             libraries: 'all',

package/dist/services/log.service.svelte.d.ts

@@ -32,6 +32,14 @@ type LogEvent = SummaryEvent | {
 } | {
     message_type: 'raw';
     message: string;
+} | {
+    message_type: 'yucca_prune_kept';
+    id: string;
+    time: string;
+} | {
+    message_type: 'yucca_prune_removed';
+    id: string;
+    time: string;
 } | {
     message_type: 'status';
     percent_done: number;
@@ -50,6 +58,10 @@ export declare function createLogObserver(logId: string): {
     readonly errors: string[];
     readonly events: LogEvent[];
     readonly summary: SummaryEvent | undefined;
+    readonly pruned: {
+        kept: number;
+        removed: number;
+    };
     destroy(): void;
 };
 export {};

package/dist/services/log.service.svelte.js

@@ -18,6 +18,7 @@ export function createLogObserver(logId) {
         errors: [],
         events: [],
         summary: undefined,
+        pruned: { kept: 0, removed: 0 },
     });
     const buffer = [];
     const flush = debounce(() => {
@@ -68,13 +69,23 @@ export function createLogObserver(logId) {
                 flush.flush();
                 break;
             }
+            case 'yucca_prune_kept': {
+                state.pruned.kept++;
+                flush();
+                break;
+            }
+            case 'yucca_prune_removed': {
+                state.pruned.removed++;
+                flush();
+                break;
+            }
             default: {
                 flush();
                 break;
             }
         }
     };
-    const source = new EventSource(new URL(`/api/yucca/logs/${logId}/stream`, defaults.baseUrl));
+    const source = new EventSource(`${defaults.baseUrl}/api/yucca/logs/${logId}/stream`);
     source.addEventListener('message', ({ data }) => onEvent(JSON.parse(data)));
     return {
         get status() {
@@ -89,6 +100,9 @@ export function createLogObserver(logId) {
         get summary() {
             return state.summary;
         },
+        get pruned() {
+            return state.pruned;
+        },
         destroy() {
             flush.cancel();
             source.close();

package/dist/services/repository.service.js

@@ -1,7 +1,7 @@
 import { sdk } from '..';
 import ConfigureRepositoryModal from '../components/backups/dialogs/ConfigureRepositoryModal.svelte';
 import ImportRepositoryModal from '../components/backups/dialogs/ImportRepositoryModal.svelte';
-import ViewLogModal from '../components/backups/dialogs/ViewLogModal.svelte';
+import ViewStatusModal from '../components/backups/dialogs/ViewStatusModal.svelte';
 import MetricsHistoryModal from '../components/backups/metrics-history/MetricsHistoryModal.svelte';
 import RunHistoryModal from '../components/backups/run-history/RunHistoryModal.svelte';
 import SnapshotsListModal from '../components/backups/snapshots-list/SnapshotsListModal.svelte';
@@ -84,7 +84,10 @@ export const handleCreateBackup = async (id) => {
     try {
         toastManager.info('Started backup');
         const response = await sdk.createBackup(id);
-        void modalManager.open(ViewLogModal, { logId: response.logId });
+        void modalManager.open(ViewStatusModal, {
+            logId: response.logId,
+            onRetry: () => void handleCreateBackup(id),
+        });
         return response;
     }
     catch (error) {
@@ -96,7 +99,10 @@ export const handlePruneRepository = async (id) => {
     try {
         toastManager.info('Cleaning up old backups');
         const response = await sdk.pruneRepository(id);
-        void modalManager.open(ViewLogModal, { logId: response.logId });
+        void modalManager.open(ViewStatusModal, {
+            logId: response.logId,
+            onRetry: () => void handlePruneRepository(id),
+        });
         return response;
     }
     catch (error) {

package/dist/services/runHistory.service.js

@@ -1,5 +1,5 @@
 import { sdk } from '..';
-import ViewLogModal from '../components/backups/dialogs/ViewLogModal.svelte';
+import ViewStatusModal from '../components/backups/dialogs/ViewStatusModal.svelte';
 import { SocketEvent } from '../events';
 import { getRun, getRunHistory } from '../fetch-client';
 import { queryClient } from '../query-client';
@@ -48,7 +48,7 @@ export const handleGetRunHistory = async (id) => {
 export const getRunActions = (run) => {
     const ViewLog = {
         title: 'View Log',
-        onAction: () => void modalManager.open(ViewLogModal, { logId: run.id }),
+        onAction: () => void modalManager.open(ViewStatusModal, { logId: run.id }),
     };
     return { ViewLog };
 };

package/dist/utils/format.d.ts

@@ -1,2 +1,2 @@
-export declare const formatDuration: (ms: number) => string;
+export declare const formatDuration: (ms: number, unitDisplay?: "narrow" | "long") => string;
 export declare const humanizeBackupPath: (path: string) => string;

package/dist/utils/format.js

@@ -1,11 +1,11 @@
 import { Duration } from 'luxon';
-export const formatDuration = (ms) => {
+export const formatDuration = (ms, unitDisplay = 'narrow') => {
     const seconds = Math.round(ms / 1000);
     return seconds < 1
         ? '<1s'
         : Duration.fromMillis(seconds * 1000)
             .rescale()
-            .toHuman({ unitDisplay: 'narrow' });
+            .toHuman({ unitDisplay });
 };
 const IMMICH_FOLDER_LABELS = {
     upload: 'Photos and videos',

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.27.0",
+  "version": "0.28.0",
   "license": "Source First License 1.1",
   "files": [
     "dist",
@@ -55,7 +55,7 @@
     "svelte"
   ],
   "dependencies": {
-    "@immich/ui": "^0.59.0",
+    "@immich/ui": "^0.85.0",
     "@mdi/js": "^7.4.47",
     "@oazapfts/runtime": "^1.1.0",
     "@tanstack/svelte-query": "^6.1.3",
@@ -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.27.0"
+    "@futo-org/backups-api-client": "^0.28.0"
   },
   "scripts": {
     "dev": "vite dev --port 5174",