@futo-org/backups-orchestrator-ui 0.1.71

package/LICENSE

@@ -0,0 +1,41 @@
+Source First License 1.1
+
+Acceptance
+By using the software, you agree to all of the terms and conditions below.
+
+Copyright License
+FUTO Holdings, Inc. (the “Licensor”) grants you a non-exclusive, royalty-free, worldwide, non-sublicensable, non-transferable license to use, copy, distribute, make available, and prepare derivative works of the software, in each case subject to the limitations below.
+
+Limitations
+You may use or modify the software only for non-commercial purposes such as personal use for research, experiment, and testing for the benefit of public knowledge, personal study, private entertainment, hobby projects, amateur pursuits, or religious observance, all without any anticipated commercial application.
+You may distribute the software or provide it to others only if you do so free of charge for non-commercial purposes.
+Notwithstanding the above, you may not remove or obscure any functionality in the software related to payment to the Licensor in any copy you distribute to others.
+You may not alter, remove, or obscure any licensing, copyright, or other notices of the Licensor in the software. Any use of the Licensor’s trademarks is subject to applicable law.
+
+Patents
+If you make any written claim that the software infringes or contributes to infringement of any patent, your license for the software granted under these terms ends immediately. If your company makes such a claim, your license ends immediately for work on behalf of your company.
+
+Notices
+You must ensure that anyone who gets a copy of any part of the software from you also gets a copy of these terms. If you modify the software, you must include in any modified copies of the software a prominent notice stating that you have modified the software, such as but not limited to, a statement in a readme file or an in-application about section.
+
+Fair Use
+You may have "fair use" rights for the software under the law. These terms do not limit them.
+
+No Other Rights
+These terms do not allow you to sublicense or transfer any of your licenses to anyone else, or prevent the Licensor from granting licenses to anyone else. These terms do not imply any other licenses.
+
+Termination
+If you use the software in violation of these terms, such use is not licensed, and your license will automatically terminate. If the licensor provides you with a notice of your violation, and you cease all violation of this license no later than 30 days after you receive that notice, your license will be reinstated retroactively. However, if you violate these terms after such reinstatement, any additional violation of these terms will cause your license to terminate automatically and permanently.
+
+No Liability
+As far as the law allows, the software comes as is, without any warranty or condition, and the Licensor will not be liable to you for any damages arising out of these terms or the use or nature of the software, under any kind of legal claim.
+
+Definitions
+
+The “Licensor” is the entity offering these terms, FUTO Holdings, Inc.
+The “software” is the software the licensor makes available under these terms, including any portion of it.
+“You” refers to the individual or entity agreeing to these terms.
+“Your company” is any legal entity, sole proprietorship, or other kind of organization that you work for, plus all organizations that have control over, are under the control of, or are under common control with that organization. Control means ownership of substantially all the assets of an entity, or the power to direct its management and policies by vote, contract, or otherwise. Control can be direct or indirect.
+“Your license” is the license granted to you for the software under these terms.
+“Use” means anything you do with the software requiring your license.
+“Trademark” means trademarks, service marks, and similar rights.

package/dist/components/backends/BackendItem.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type {
+    BackendDto,
+    BackendType,
+    RepositoryBackendDto,
+  } from "../../fetch-client";
+  import { getBackendActions } from "../../services/backend.service";
+  import { Badge, Icon, Text } from "@immich/ui";
+  import { mdiCloudOutline, mdiHarddisk, mdiShieldCheckOutline } from "@mdi/js";
+  import StackListItem from "../ui/StackListItem.svelte";
+
+  type Props = {
+    backend: BackendDto;
+    repositoryBackend?: RepositoryBackendDto & { primary?: boolean };
+  };
+
+  const { backend, repositoryBackend }: Props = $props();
+
+  const BackendIcons: Record<BackendType, string> = {
+    yucca: mdiShieldCheckOutline,
+    local: mdiHarddisk,
+    s3: mdiCloudOutline,
+  };
+
+  const BackendNames: Record<BackendType, string> = {
+    yucca: "FUTO Backups",
+    local: "Local Storage",
+    s3: "S3 Server",
+  };
+
+  const { LoginAgain } = $derived(getBackendActions(backend));
+</script>
+
+<StackListItem actions={[LoginAgain]}>
+  {#snippet icon()}
+    <Icon icon={BackendIcons[backend.type]} />
+  {/snippet}
+
+  <Text>{BackendNames[backend.type]}</Text>
+
+  {#if repositoryBackend?.primary}
+    <Text size="small">(primary)</Text>
+  {/if}
+
+  {#snippet trailing()}
+    {#if repositoryBackend}
+      <Badge
+        color={backend.isOnline && repositoryBackend.online
+          ? "success"
+          : "danger"}
+        size="small"
+        >{backend.isOnline
+          ? repositoryBackend.online
+            ? "Active"
+            : "Missing on service"
+          : "Offline"}</Badge
+      >
+    {:else}
+      <Badge color={backend.isOnline ? "success" : "danger"} size="small"
+        >{backend.isOnline ? "Online" : "Offline"}</Badge
+      >
+    {/if}
+  {/snippet}
+</StackListItem>

package/dist/components/backends/BackendItem.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { BackendDto, RepositoryBackendDto } from "../../fetch-client";
+type Props = {
+    backend: BackendDto;
+    repositoryBackend?: RepositoryBackendDto & {
+        primary?: boolean;
+    };
+};
+declare const BackendItem: import("svelte").Component<Props, {}, "">;
+type BackendItem = ReturnType<typeof BackendItem>;
+export default BackendItem;

package/dist/components/backends/BackendsList.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import type { LocalRepositoryDto } from "../../fetch-client";
+  import { options } from "../../options";
+  import {
+    handleSetupLocalStorage,
+    handleYuccaLogin,
+    useBackendEventHandler,
+    useBackends,
+  } from "../../services/backend.service";
+  import { Button, HStack } from "@immich/ui";
+  import StackList from "../ui/StackList.svelte";
+  import OnEvents from "../util/OnEvents.svelte";
+  import Suspense from "../util/Suspense.svelte";
+  import BackendItem from "./BackendItem.svelte";
+
+  type Props = {
+    repository?: LocalRepositoryDto;
+  };
+
+  const { repository }: Props = $props();
+
+  const { advanced } = options;
+  const query = useBackends();
+  const { onBackendCreate } = useBackendEventHandler();
+
+  const repositoryBackends = $derived(
+    repository?.backends
+      ? [
+          {
+            ...repository.backends.primary,
+            primary: true,
+          },
+          ...repository.backends.secondary,
+        ]
+      : [],
+  );
+</script>
+
+<OnEvents {onBackendCreate} />
+
+<Suspense {query}>
+  <StackList>
+    {#snippet title()}
+      {#if repository}
+        Where your backup is stored
+      {:else}
+        Configured backends
+      {/if}
+    {/snippet}
+
+    {#each query.data as backend (backend.id)}
+      <BackendItem
+        {backend}
+        repositoryBackend={repositoryBackends.find(
+          ({ id }) => backend.id === id,
+        )}
+      />
+    {/each}
+  </StackList>
+
+  {#if $advanced}
+    <HStack>
+      <Button size="small" variant="outline" onclick={() => handleYuccaLogin()}
+        >Login with FUTO Backups</Button
+      >
+      <Button
+        size="small"
+        variant="outline"
+        onclick={() => handleSetupLocalStorage()}>New local storage</Button
+      >
+    </HStack>
+  {/if}
+</Suspense>

package/dist/components/backends/BackendsList.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { LocalRepositoryDto } from "../../fetch-client";
+type Props = {
+    repository?: LocalRepositoryDto;
+};
+declare const BackendsList: import("svelte").Component<Props, {}, "">;
+type BackendsList = ReturnType<typeof BackendsList>;
+export default BackendsList;

package/dist/components/backends/CreateLocalBackend.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import PathPickerField from "../ui/PathPickerField.svelte";
+  import { useCreateLocalBackend } from "../../services/backend.service";
+  import { FormModal, Stack } from "@immich/ui";
+
+  type Props = {
+    onClose: () => void;
+    onCreate?: (backendId: string) => void;
+  };
+
+  let { onClose, onCreate }: Props = $props();
+
+  let path = $state("");
+
+  const mutation = useCreateLocalBackend();
+
+  const onSubmit = () =>
+    mutation.mutate(
+      { path },
+      {
+        onSuccess: ({ backend }) => {
+          onCreate?.(backend.id);
+          onClose();
+        },
+      },
+    );
+</script>
+
+<FormModal
+  size="small"
+  title="Create local backend"
+  disabled={path.length === 0 || mutation.isPending}
+  {onSubmit}
+  {onClose}
+>
+  <Stack gap={4}>
+    <PathPickerField
+      bind:value={path}
+      pickerTitle="Choose backend folder"
+      pickerDescription="Pick the local directory where backups will be stored."
+    >
+      {#snippet title()}Path{/snippet}
+      {#snippet description()}Local directory to store backups.{/snippet}
+    </PathPickerField>
+  </Stack>
+</FormModal>

package/dist/components/backends/CreateLocalBackend.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    onClose: () => void;
+    onCreate?: (backendId: string) => void;
+};
+declare const CreateLocalBackend: import("svelte").Component<Props, {}, "">;
+type CreateLocalBackend = ReturnType<typeof CreateLocalBackend>;
+export default CreateLocalBackend;

package/dist/components/backends/OAuthDeviceFlow.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type { SocketEvent } from "../../events";
+  import type { BackendDto } from "../../fetch-client";
+  import { useBackendEventHandler } from "../../services/backend.service";
+  import {
+    Button,
+    Code,
+    HStack,
+    IconButton,
+    LoadingSpinner,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+    VStack,
+  } from "@immich/ui";
+  import { mdiContentCopy } from "@mdi/js";
+  import OnEvents from "../util/OnEvents.svelte";
+
+  type Props = {
+    userCode: string;
+    verificationUri: string;
+    onCreate?: (backendId: string) => void;
+    onClose: () => void;
+  };
+
+  let { userCode, verificationUri, onCreate, onClose }: Props = $props();
+
+  const { onBackendCreate: onBackendCreateHandler } = useBackendEventHandler();
+
+  function onBackendCreate(event: SocketEvent<{ backend: BackendDto }>) {
+    onBackendCreateHandler(event);
+    onCreate?.(event.data.backend.id);
+    onClose();
+  }
+
+  function onOpen() {
+    window.open(verificationUri, "_blank");
+  }
+
+  function onCopy() {
+    navigator.clipboard.writeText(userCode);
+  }
+</script>
+
+<OnEvents {onBackendCreate} />
+
+<Modal title="Logging into FUTO Backups" icon={false} {onClose}>
+  <ModalBody>
+    <VStack>
+      <Text>You may be asked or shown the following code:</Text>
+      <Stack direction="row" align="center">
+        <Code class="text-3xl select-all">{userCode}</Code>
+        <IconButton
+          color="secondary"
+          variant="outline"
+          icon={mdiContentCopy}
+          onclick={onCopy}
+          aria-label="Copy code"
+        />
+      </Stack>
+
+      <HStack class="mt-4">
+        <LoadingSpinner />
+        <Text>Waiting for you to confirm login...</Text>
+      </HStack>
+    </VStack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack fullWidth>
+      <Button shape="round" color="secondary" fullWidth onclick={onClose}>
+        Cancel
+      </Button>
+      <Button shape="round" fullWidth onclick={onOpen}>Open login again</Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

package/dist/components/backends/OAuthDeviceFlow.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    userCode: string;
+    verificationUri: string;
+    onCreate?: (backendId: string) => void;
+    onClose: () => void;
+};
+declare const OAuthDeviceFlow: import("svelte").Component<Props, {}, "">;
+type OAuthDeviceFlow = ReturnType<typeof OAuthDeviceFlow>;
+export default OAuthDeviceFlow;

package/dist/components/backups/BackupItem.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { LocalRepositoryDto } from "../../fetch-client";
+  import { getRepositoryActions } from "../../services/repository.service";
+  import { Badge, FormatBytes, Text } from "@immich/ui";
+  import RelativeTime from "../util/RelativeTime.svelte";
+  import StackListItem from "../ui/StackListItem.svelte";
+
+  type Props = {
+    repository: LocalRepositoryDto;
+  };
+
+  const { repository }: Props = $props();
+
+  const { BackupNow, Snapshots, History, Configure, Import, MetricsHistory } =
+    $derived(getRepositoryActions(repository));
+</script>
+
+<StackListItem
+  actions={[BackupNow, Snapshots, History, Configure, Import, MetricsHistory]}
+>
+  <Text>{repository.name}</Text>
+
+  {#if repository.backends}
+    <Badge size="tiny" color="info">
+      {#if repository.backends.primary.type === "yucca"}
+        FUTO Backups
+      {:else if repository.backends.primary.type === "local"}
+        Local Storage
+      {:else}
+        S3 Server
+      {/if}
+    </Badge>
+    {#if !repository.backends.primary.online}
+      <Badge size="tiny" color="danger">Offline</Badge>
+    {/if}
+  {/if}
+
+  {#if repository.worm}
+    <Badge size="tiny" color="info">WORM</Badge>
+  {/if}
+
+  <Badge size="tiny" color="secondary">
+    <FormatBytes bytes={repository.metrics.sizeBytes} />
+  </Badge>
+
+  {#snippet trailing()}
+    {#if repository.metrics.lastBackup && (!repository.metrics.lastSuccessfulBackup || +new Date(repository.metrics.lastBackup) > +new Date(repository.metrics.lastSuccessfulBackup))}
+      <Badge size="tiny" color="danger">
+        Failed <RelativeTime time={repository.metrics.lastBackup} />
+      </Badge>
+    {:else if repository.metrics.lastSuccessfulBackup}
+      <Badge size="tiny" color="success">
+        Successful <RelativeTime time={repository.metrics.lastSuccessfulBackup} />
+      </Badge>
+    {:else}
+      <Badge size="tiny" color="warning">Never backed up</Badge>
+    {/if}
+  {/snippet}
+</StackListItem>

package/dist/components/backups/BackupItem.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { LocalRepositoryDto } from "../../fetch-client";
+type Props = {
+    repository: LocalRepositoryDto;
+};
+declare const BackupItem: import("svelte").Component<Props, {}, "">;
+type BackupItem = ReturnType<typeof BackupItem>;
+export default BackupItem;

package/dist/components/backups/BackupsList.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import type { RepositoryListResponseDto } from "../../fetch-client";
+  import {
+    useRepositories,
+    useRepositoryEventHandler,
+  } from "../../services/repository.service";
+  import { Button, HStack, modalManager, Stack, Text } from "@immich/ui";
+  import StackList from "../ui/StackList.svelte";
+  import OnEvents from "../util/OnEvents.svelte";
+  import BackupItem from "./BackupItem.svelte";
+  import CreateRepositoryModal from "./dialogs/CreateRepositoryModal.svelte";
+
+  type Props = {
+    local?: boolean;
+    initialData?: RepositoryListResponseDto;
+  };
+
+  const { local, initialData }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  const query = useRepositories(initialData?.repositories);
+
+  const { onRepositoryCreate, onRepositoryUpdate, onRepositoryDelete } =
+    useRepositoryEventHandler();
+
+  const localRepositories = $derived(
+    query.data?.filter((repository) => repository.configuration) ?? [],
+  );
+
+  const remoteRepositories = $derived(
+    query.data?.filter((repository) => !repository.configuration) ?? [],
+  );
+
+  const createNewBackup = () => modalManager.show(CreateRepositoryModal);
+</script>
+
+<OnEvents {onRepositoryCreate} {onRepositoryUpdate} {onRepositoryDelete} />
+
+<Stack gap={6}>
+  {#if local}
+    <Stack gap={2}>
+      <StackList {query}>
+        {#snippet title()}Backups on this machine{/snippet}
+        {#snippet children()}
+          {#each localRepositories as repository (repository.id)}
+            <BackupItem {repository} />
+          {/each}
+          {#if localRepositories.length === 0}
+            <Text class="text-center py-6" color="muted">
+              No backups on this machine yet.
+            </Text>
+          {/if}
+        {/snippet}
+      </StackList>
+
+      <HStack>
+        <Button
+          shape="round"
+          size="tiny"
+          variant="outline"
+          onclick={createNewBackup}>Create new backup</Button
+        >
+      </HStack>
+    </Stack>
+  {/if}
+
+  <StackList {query}>
+    {#snippet title()}
+      {local ? "Backups found elsewhere" : "Your Backups"}
+    {/snippet}
+    {#snippet children()}
+      {#each remoteRepositories as repository (repository.id)}
+        <BackupItem {repository} />
+      {/each}
+      {#if remoteRepositories.length === 0}
+        <Text class="text-center py-6" color="muted">
+          {local ? "No other backups found." : "No backups yet."}
+        </Text>
+      {/if}
+    {/snippet}
+  </StackList>
+</Stack>

package/dist/components/backups/BackupsList.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { RepositoryListResponseDto } from "../../fetch-client";
+type Props = {
+    local?: boolean;
+    initialData?: RepositoryListResponseDto;
+};
+declare const BackupsList: import("svelte").Component<Props, {}, "">;
+type BackupsList = ReturnType<typeof BackupsList>;
+export default BackupsList;

package/dist/components/backups/dialogs/ConfigureRepositoryModal.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import BackendsList from "../../backends/BackendsList.svelte";
+  import { type LocalRepositoryDto } from "../../../fetch-client";
+  import { options } from "../../../options";
+  import {
+    useRemoveRepository,
+    useUpdateRepository,
+  } from "../../../services/repository.service";
+  import PathListField from "../../ui/PathListField.svelte";
+  import {
+    Button,
+    Field,
+    FormModal,
+    Input,
+    modalManager,
+    Stack,
+  } from "@immich/ui";
+  import { SvelteSet } from "svelte/reactivity";
+
+  type Props = {
+    repository: LocalRepositoryDto;
+    onClose: () => void;
+  };
+
+  let { repository, onClose }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  let name = $state(repository.name);
+  // svelte-ignore state_referenced_locally
+  let paths = new SvelteSet(repository.configuration?.paths ?? []);
+
+  const local = $derived(typeof repository.configuration === "object");
+
+  const updateMutation = useUpdateRepository();
+  const removeMutation = useRemoveRepository();
+
+  const onSubmit = () =>
+    updateMutation.mutate(
+      { id: repository.id, dto: { name, paths: [...paths] }, local },
+      { onSuccess: () => onClose() },
+    );
+
+  const onRemove = async () => {
+    const confirm = await modalManager.showDialog({
+      confirmText: local ? "Remove" : "Delete",
+      title: local ? "Remove Repository" : "Delete Repository",
+      prompt: local
+        ? "Repository will be removed locally."
+        : "This repository will be removed.",
+    });
+
+    if (!confirm) return;
+
+    removeMutation.mutate(
+      { id: repository.id, local },
+      { onSuccess: () => onClose() },
+    );
+  };
+
+  const { advanced } = options;
+</script>
+
+<FormModal
+  disabled={name.length === 0 ||
+    updateMutation.isPending ||
+    removeMutation.isPending}
+  title={`Configure ${name}`}
+  size="large"
+  {onSubmit}
+  {onClose}
+>
+  <Stack gap={4}>
+    <Stack gap={2}>
+      <Field label="Name">
+        <Input bind:value={name} />
+      </Field>
+    </Stack>
+
+    {#if repository.configuration}
+      <PathListField
+        {paths}
+        addLabel="Add path"
+        manageLabel="Add first path"
+        pickerTitle="Backup Paths"
+        pickerDescription="Select files and folders to include in this backup."
+      >
+        {#snippet label()}Backup Paths{/snippet}
+        {#snippet empty()}No paths configured yet.{/snippet}
+      </PathListField>
+    {/if}
+
+    <Button
+      color="danger"
+      loading={removeMutation.isPending}
+      onclick={onRemove}>Remove Repository</Button
+    >
+
+    {#if advanced}
+      <BackendsList {repository} />
+    {/if}
+  </Stack>
+</FormModal>

package/dist/components/backups/dialogs/ConfigureRepositoryModal.svelte.d.ts

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

package/dist/components/backups/dialogs/CreateRepositoryModal.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { useCreateRepository } from "../../../services/repository.service";
+  import {
+    Checkbox,
+    Field,
+    FormModal,
+    Input,
+    modalManager,
+    Stack,
+  } from "@immich/ui";
+  import ConfigureRepositoryModal from "./ConfigureRepositoryModal.svelte";
+
+  type Props = {
+    onClose: () => void;
+  };
+
+  let { onClose }: Props = $props();
+
+  let name = $state("");
+  let worm = $state(false);
+
+  const mutation = useCreateRepository();
+
+  const onSubmit = () =>
+    mutation.mutate(
+      { name, worm },
+      {
+        onSuccess: ({ repository }) => {
+          onClose();
+
+          modalManager.open(ConfigureRepositoryModal, {
+            repository: {
+              ...repository,
+              configuration: repository.configuration!,
+            },
+          });
+        },
+      },
+    );
+</script>
+
+<FormModal
+  title="Create A New Backup"
+  disabled={name.length === 0 || mutation.isPending}
+  {onSubmit}
+  {onClose}
+>
+  <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/backups/dialogs/CreateRepositoryModal.svelte.d.ts

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