@futo-org/backups-orchestrator-ui 0.1.71

package/dist/components/onboarding/stages/OnboardingStageWelcome.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    onNext: () => void;
+    onImportKey: () => void;
+    onCancel: () => void;
+    icon?: boolean;
+};
+declare const OnboardingStageWelcome: import("svelte").Component<Props, {}, "">;
+type OnboardingStageWelcome = ReturnType<typeof OnboardingStageWelcome>;
+export default OnboardingStageWelcome;

package/dist/components/onboarding/stages/SampleCreateFirstBackup.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { Checkbox, Field, FormModal, Input, Stack } from "@immich/ui";
+  import { useCreateRepository } from "../../../services/repository.service";
+  import { SvelteSet } from "svelte/reactivity";
+
+  type Props = {
+    onNext: () => void;
+    onSkip: () => void;
+  };
+
+  let { onNext, onSkip }: Props = $props();
+
+  let name = $state("");
+  let worm = $state(false);
+  let paths = new SvelteSet([]);
+
+  const mutation = useCreateRepository();
+
+  const onSubmit = () =>
+    mutation.mutate(
+      { name, worm, paths: [...paths] },
+      { onSuccess: () => onSkip() },
+    );
+</script>
+
+<FormModal
+  title="Create Your First Backup"
+  disabled={name.length === 0 || mutation.isPending}
+  onClose={onSkip}
+  {onSubmit}
+>
+  <Stack gap={4}>
+    <Field label="Name" description="A memorable name for this backup">
+      <Input bind:value={name} />
+    </Field>
+    <Field
+      label="Write once (WORM)"
+      description="Prevent anything being deleted"
+    >
+      <Checkbox bind:checked={worm} />
+    </Field>
+  </Stack>
+</FormModal>

package/dist/components/onboarding/stages/SampleCreateFirstBackup.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    onNext: () => void;
+    onSkip: () => void;
+};
+declare const SampleCreateFirstBackup: import("svelte").Component<Props, {}, "">;
+type SampleCreateFirstBackup = ReturnType<typeof SampleCreateFirstBackup>;
+export default SampleCreateFirstBackup;

package/dist/components/onboarding/stages/SampleCreateFirstSchedule.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { Field, FormModal, Input, Stack } from "@immich/ui";
+  import validate from "cron-validate";
+  import { useCreateSchedule } from "../../../services/schedule.service";
+  import { useRepositories } from "../../../services/repository.service";
+
+  type Props = {
+    onFinish: () => void;
+    onSkip: () => void;
+  };
+
+  const { onFinish, onSkip }: Props = $props();
+
+  const query = useRepositories();
+  const repositories = $derived(
+    (query.data ?? []).filter((repository) => repository.configuration),
+  );
+
+  let name = $state("");
+  let cron = $state("*/15 * * * *");
+
+  const mutation = useCreateSchedule();
+
+  const onSubmit = () =>
+    mutation.mutate(
+      {
+        name,
+        cron,
+        repositories: repositories.map((repository) => repository.id),
+      },
+      { onSuccess: () => onFinish() },
+    );
+</script>
+
+<FormModal
+  title="Create First Schedule"
+  disabled={name.length === 0 || validate(cron).isError() || mutation.isPending}
+  onClose={onSkip}
+  {onSubmit}
+>
+  <Stack gap={4}>
+    <Field label="Name" description="Give this schedule a name">
+      <Input bind:value={name} />
+    </Field>
+    <Field label="Schedule" description="Uses cron syntax">
+      <Input bind:value={cron} />
+    </Field>
+  </Stack>
+</FormModal>

package/dist/components/onboarding/stages/SampleCreateFirstSchedule.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    onFinish: () => void;
+    onSkip: () => void;
+};
+declare const SampleCreateFirstSchedule: import("svelte").Component<Props, {}, "">;
+type SampleCreateFirstSchedule = ReturnType<typeof SampleCreateFirstSchedule>;
+export default SampleCreateFirstSchedule;

package/dist/components/schedules/RepositoryPicker.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { useRepositories } from "../../services/repository.service";
+  import { HStack, IconButton, Stack, Text } from "@immich/ui";
+  import { mdiArrowDown, mdiArrowUp, mdiClose, mdiPlus } from "@mdi/js";
+  import StackList from "../ui/StackList.svelte";
+
+  type Props = {
+    repositories: string[];
+  };
+
+  let { repositories = $bindable() }: Props = $props();
+
+  const repositoryQuery = useRepositories();
+
+  const nameById = $derived(
+    Object.fromEntries(
+      (repositoryQuery.data ?? []).map((repo) => [repo.id, repo.name]),
+    ),
+  );
+
+  const available = $derived(
+    (repositoryQuery.data ?? []).filter(
+      (repo) => !repositories.includes(repo.id),
+    ),
+  );
+
+  const move = (index: number, delta: number) => {
+    const target = index + delta;
+    if (target < 0 || target >= repositories.length) return;
+    const next = [...repositories];
+    [next[index], next[target]] = [next[target], next[index]];
+    repositories = next;
+  };
+
+  const remove = (id: string) => {
+    repositories = repositories.filter((entry) => entry !== id);
+  };
+
+  const add = (id: string) => {
+    repositories = [...repositories, id];
+  };
+</script>
+
+<Stack gap={4}>
+  <StackList>
+    {#snippet title()}Repositories{/snippet}
+
+    {#each repositories as id, index (id)}
+      <HStack gap={2} class="px-4 py-3">
+        <Text class="grow truncate" size="small">{nameById[id] ?? id}</Text>
+        <IconButton
+          icon={mdiArrowUp}
+          size="tiny"
+          variant="ghost"
+          aria-label="Move up"
+          disabled={index === 0}
+          onclick={() => move(index, -1)}
+        />
+        <IconButton
+          icon={mdiArrowDown}
+          size="tiny"
+          variant="ghost"
+          aria-label="Move down"
+          disabled={index === repositories.length - 1}
+          onclick={() => move(index, 1)}
+        />
+        <IconButton
+          icon={mdiClose}
+          size="tiny"
+          color="danger"
+          variant="ghost"
+          aria-label="Remove"
+          onclick={() => remove(id)}
+        />
+      </HStack>
+    {/each}
+
+    {#if repositories.length === 0}
+      <HStack class="px-4 py-3">
+        <Text color="secondary" size="small">
+          No repositories in this schedule yet.
+        </Text>
+      </HStack>
+    {/if}
+  </StackList>
+
+  {#if available.length > 0}
+    <StackList>
+      {#snippet title()}Available{/snippet}
+
+      {#each available as repo (repo.id)}
+        <HStack gap={2} class="px-4 py-3">
+          <Text class="grow truncate" size="small">{repo.name}</Text>
+          <IconButton
+            icon={mdiPlus}
+            size="tiny"
+            variant="ghost"
+            aria-label="Add"
+            onclick={() => add(repo.id)}
+          />
+        </HStack>
+      {/each}
+    </StackList>
+  {/if}
+</Stack>

package/dist/components/schedules/RepositoryPicker.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    repositories: string[];
+};
+declare const RepositoryPicker: import("svelte").Component<Props, {}, "repositories">;
+type RepositoryPicker = ReturnType<typeof RepositoryPicker>;
+export default RepositoryPicker;

package/dist/components/schedules/ScheduleItem.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import StackListItem from "../ui/StackListItem.svelte";
+  import RelativeTime from "../util/RelativeTime.svelte";
+  import type { ScheduleDto } from "../../fetch-client";
+  import { getScheduleActions } from "../../services/schedule.service";
+  import { Badge, HStack, Stack, Text } from "@immich/ui";
+
+  type Props = {
+    schedule: ScheduleDto;
+    repositoryNames: Record<string, string>;
+  };
+
+  const { schedule, repositoryNames }: Props = $props();
+
+  const { Resume, Pause, Configure, Delete } = $derived(
+    getScheduleActions(schedule),
+  );
+</script>
+
+<StackListItem actions={[Resume, Pause, Configure, Delete]}>
+  <Stack gap={0} class="min-w-0">
+    <HStack gap={1} class="items-baseline">
+      <Text>{schedule.name}</Text>
+      <Badge size="tiny" color="info">{schedule.cron}</Badge>
+      {#if schedule.paused}
+        <Badge size="tiny" color="warning">Paused</Badge>
+      {/if}
+      {#if schedule.lastRun}
+        <Badge size="tiny" color="success">
+          Ran <RelativeTime time={schedule.lastRun} />
+        </Badge>
+      {:else}
+        <Badge size="tiny" color="secondary">Never run</Badge>
+      {/if}
+    </HStack>
+
+    {#if schedule.repositories.length > 0}
+      <Text size="small" color="secondary">
+        {schedule.repositories
+          .map((repositoryId) => repositoryNames[repositoryId] ?? repositoryId)
+          .join(", ")}
+      </Text>
+    {:else}
+      <Text size="small" color="secondary">No backups in this schedule.</Text>
+    {/if}
+  </Stack>
+</StackListItem>

package/dist/components/schedules/ScheduleItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ScheduleDto } from "../../fetch-client";
+type Props = {
+    schedule: ScheduleDto;
+    repositoryNames: Record<string, string>;
+};
+declare const ScheduleItem: import("svelte").Component<Props, {}, "">;
+type ScheduleItem = ReturnType<typeof ScheduleItem>;
+export default ScheduleItem;

package/dist/components/schedules/ScheduleList.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { useRepositories } from "../../services/repository.service";
+  import {
+    useScheduleEventHandler,
+    useSchedules,
+  } from "../../services/schedule.service";
+  import { Button, HStack, modalManager, Stack, Text } from "@immich/ui";
+  import StackList from "../ui/StackList.svelte";
+  import OnEvents from "../util/OnEvents.svelte";
+  import CreateScheduleModal from "./dialogs/CreateScheduleModal.svelte";
+  import ScheduleItem from "./ScheduleItem.svelte";
+
+  const schedulesQuery = useSchedules();
+  const repositoriesQuery = useRepositories();
+
+  const { onScheduleCreate, onScheduleUpdate, onScheduleDelete } =
+    useScheduleEventHandler();
+
+  const repositoryNames = $derived(
+    Object.fromEntries(
+      repositoriesQuery.data?.map((repository) => [
+        repository.id,
+        repository.name,
+      ]) ?? [],
+    ),
+  );
+
+  const onCreate = () => modalManager.open(CreateScheduleModal, {});
+</script>
+
+<OnEvents {onScheduleCreate} {onScheduleUpdate} {onScheduleDelete} />
+
+<Stack gap={2}>
+  <StackList query={schedulesQuery}>
+    {#snippet title()}Schedules{/snippet}
+    {#snippet children(schedules)}
+      {#each schedules as schedule (schedule.id)}
+        <ScheduleItem {schedule} {repositoryNames} />
+      {/each}
+      {#if schedules.length === 0}
+        <Text class="text-center py-6" color="muted">No schedules yet.</Text>
+      {/if}
+    {/snippet}
+  </StackList>
+
+  <HStack>
+    <Button shape="round" size="tiny" variant="outline" onclick={onCreate}
+      >Create new schedule</Button
+    >
+  </HStack>
+</Stack>

package/dist/components/schedules/ScheduleList.svelte.d.ts

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

package/dist/components/schedules/dialogs/ConfigureScheduleModal.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { ScheduleDto } from "../../../fetch-client";
+  import { Field, FormModal, Input, Stack } from "@immich/ui";
+  import validate from "cron-validate";
+  import { useUpdateSchedule } from "../../../services/schedule.service";
+  import RepositoryPicker from "../RepositoryPicker.svelte";
+
+  type Props = {
+    onClose: () => void;
+    schedule: ScheduleDto;
+  };
+
+  const { onClose, schedule }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  let name = $state(schedule.name);
+  // svelte-ignore state_referenced_locally
+  let cron = $state(schedule.cron);
+  // svelte-ignore state_referenced_locally
+  let repositories = $state([...schedule.repositories]);
+
+  const mutation = useUpdateSchedule();
+
+  const onSubmit = () =>
+    mutation.mutate(
+      { id: schedule.id, dto: { name, cron, repositories } },
+      { onSuccess: () => onClose() },
+    );
+</script>
+
+<FormModal
+  title={`Edit ${schedule.name}`}
+  size="large"
+  disabled={name.length === 0 || validate(cron).isError() || mutation.isPending}
+  {onSubmit}
+  {onClose}
+>
+  <Stack gap={4}>
+    <Field label="Name">
+      <Input bind:value={name} />
+    </Field>
+    <Field label="Schedule" description="Uses cron syntax">
+      <Input bind:value={cron} />
+    </Field>
+
+    <RepositoryPicker bind:repositories />
+  </Stack>
+</FormModal>

package/dist/components/schedules/dialogs/ConfigureScheduleModal.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ScheduleDto } from "../../../fetch-client";
+type Props = {
+    onClose: () => void;
+    schedule: ScheduleDto;
+};
+declare const ConfigureScheduleModal: import("svelte").Component<Props, {}, "">;
+type ConfigureScheduleModal = ReturnType<typeof ConfigureScheduleModal>;
+export default ConfigureScheduleModal;

package/dist/components/schedules/dialogs/CreateScheduleModal.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { Field, FormModal, Input, Stack } from "@immich/ui";
+  import validate from "cron-validate";
+  import { useCreateSchedule } from "../../../services/schedule.service";
+  import RepositoryPicker from "../RepositoryPicker.svelte";
+
+  type Props = {
+    onClose: () => void;
+  };
+
+  const { onClose }: Props = $props();
+
+  let name = $state("");
+  let cron = $state("*/15 * * * *");
+  let repositories = $state<string[]>([]);
+
+  const mutation = useCreateSchedule();
+
+  const onSubmit = () =>
+    mutation.mutate(
+      { name, cron, repositories },
+      { onSuccess: () => onClose() },
+    );
+</script>
+
+<FormModal
+  title="Create A New Schedule"
+  size="large"
+  disabled={name.length === 0 || validate(cron).isError() || mutation.isPending}
+  {onSubmit}
+  {onClose}
+>
+  <Stack gap={4}>
+    <Field label="Name" description="Give this schedule a name">
+      <Input bind:value={name} />
+    </Field>
+    <Field label="Schedule" description="Uses cron syntax">
+      <Input bind:value={cron} />
+    </Field>
+
+    <RepositoryPicker bind:repositories />
+  </Stack>
+</FormModal>

package/dist/components/schedules/dialogs/CreateScheduleModal.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    onClose: () => void;
+};
+declare const CreateScheduleModal: import("svelte").Component<Props, {}, "">;
+type CreateScheduleModal = ReturnType<typeof CreateScheduleModal>;
+export default CreateScheduleModal;

package/dist/components/test/ImmichTestUi.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { orchestrationApiProvider, setProvider } from "../../providers";
+  import {
+    AppShell,
+    AppShellHeader,
+    AppShellSidebar,
+    Avatar,
+    Button,
+    IconButton,
+    Input,
+    Logo,
+    NavbarGroup,
+    NavbarItem,
+    ThemeSwitcher,
+  } from "@immich/ui";
+  import {
+    mdiAccountMultipleOutline,
+    mdiArchiveArrowDownOutline,
+    mdiBackupRestore,
+    mdiBellOutline,
+    mdiCastVariant,
+    mdiHeartOutline,
+    mdiImageAlbum,
+    mdiImageMultipleOutline,
+    mdiLockOutline,
+    mdiMagnify,
+    mdiMapOutline,
+    mdiMenu,
+    mdiToolboxOutline,
+    mdiTrashCanOutline,
+    mdiTrayArrowUp,
+    mdiTune,
+  } from "@mdi/js";
+  import { options } from "../../options";
+  import { onDestroy } from "svelte";
+  import ImmichManageBackup from "../integrations/immich/ImmichManageBackup.svelte";
+  import ImmichOnboardingRestoreFlow from "../integrations/immich/ImmichOnboardingRestoreFlow.svelte";
+  import ImmichOnboardingSetupFlow from "../integrations/immich/ImmichOnboardingSetupFlow.svelte";
+
+  type Props = {
+    onExit: () => void;
+  };
+
+  const { onExit }: Props = $props();
+  const { testUiRestore, demoPadding } = options;
+
+  demoPadding.set(true);
+  onDestroy(() => demoPadding.set(false));
+
+  // svelte-ignore state_referenced_locally
+  setProvider(orchestrationApiProvider);
+</script>
+
+<AppShell>
+  <AppShellHeader>
+    <div class="grid grid-cols-[--spacing(64)_auto] items-center w-full py-2">
+      <div class="flex flex-row gap-1 mx-4 items-center">
+        <IconButton
+          shape="round"
+          color="secondary"
+          variant="ghost"
+          size="medium"
+          aria-label="Main menu"
+          icon={mdiMenu}
+          onclick={() => {}}
+          class="sidebar:hidden"
+        />
+        <Logo variant="inline" class="h-12" />
+      </div>
+      <div class="flex justify-between gap-4 lg:gap-8 pe-6">
+        <div class="hidden w-full max-w-5xl flex-1 sm:block">
+          <Input
+            placeholder="Search your photos"
+            leadingIcon={mdiMagnify}
+            trailingIcon={mdiTune}
+            shape="round"
+            size="medium"
+          />
+        </div>
+
+        <section
+          class="flex place-items-center justify-end gap-1 md:gap-2 w-full sm:w-auto"
+        >
+          <IconButton
+            color="secondary"
+            shape="round"
+            variant="ghost"
+            size="medium"
+            icon={mdiMagnify}
+            href="#"
+            aria-label="Search"
+            class="sm:hidden"
+          />
+
+          <Button
+            leadingIcon={mdiTrayArrowUp}
+            onclick={() => {}}
+            class="hidden lg:flex"
+            variant="ghost"
+            size="medium"
+            color="secondary">Upload</Button
+          >
+          <IconButton
+            color="secondary"
+            shape="round"
+            variant="ghost"
+            size="medium"
+            onclick={() => {}}
+            title="Upload"
+            aria-label="Upload"
+            icon={mdiTrayArrowUp}
+            class="lg:hidden"
+          />
+
+          <ThemeSwitcher size="medium" color="secondary" />
+
+          <IconButton
+            shape="round"
+            color="secondary"
+            variant="ghost"
+            size="medium"
+            icon={mdiBellOutline}
+            onclick={() => {}}
+            aria-label="Notifications"
+          />
+
+          <IconButton
+            shape="round"
+            color="secondary"
+            variant="ghost"
+            size="medium"
+            icon={mdiCastVariant}
+            onclick={() => {}}
+            aria-label="Cast"
+          />
+
+          <button
+            type="button"
+            class="flex ps-2"
+            onclick={() => {}}
+            title="User"
+          >
+            <Avatar name="FUTO Backups" size="medium" color="primary" />
+          </button>
+        </section>
+      </div>
+    </div>
+  </AppShellHeader>
+
+  <AppShellSidebar>
+    <div class="pt-4 pr-2">
+      <NavbarItem href="#" title="Photos" icon={mdiImageMultipleOutline} />
+      <NavbarItem href="#" title="Explore" icon={mdiMagnify} />
+      <NavbarItem href="#" title="Map" icon={mdiMapOutline} />
+      <NavbarItem href="#" title="Sharing" icon={mdiAccountMultipleOutline} />
+
+      <NavbarGroup title="Library" size="tiny" />
+
+      <NavbarItem href="#" title="Favorites" icon={mdiHeartOutline} />
+      <NavbarItem
+        href="#"
+        title="Albums"
+        icon={{ icon: mdiImageAlbum, flipped: true }}
+      />
+      <NavbarItem href="#" title="Backups" icon={mdiBackupRestore} active />
+      <NavbarItem href="#" title="Utilities" icon={mdiToolboxOutline} />
+      <NavbarItem href="#" title="Archive" icon={mdiArchiveArrowDownOutline} />
+      <NavbarItem href="#" title="Locked folder" icon={mdiLockOutline} />
+      <NavbarItem href="#" title="Trash" icon={mdiTrashCanOutline} />
+    </div>
+  </AppShellSidebar>
+
+  {#if $testUiRestore}
+    <ImmichOnboardingRestoreFlow
+      {onExit}
+      onFinish={() => testUiRestore.set(false)}
+    />
+  {:else}
+    <ImmichOnboardingSetupFlow {onExit}>
+      <ImmichManageBackup />
+    </ImmichOnboardingSetupFlow>
+  {/if}
+</AppShell>

package/dist/components/test/ImmichTestUi.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    onExit: () => void;
+};
+declare const ImmichTestUi: import("svelte").Component<Props, {}, "">;
+type ImmichTestUi = ReturnType<typeof ImmichTestUi>;
+export default ImmichTestUi;