@lapis-notes/history 0.1.2 → 0.2.0

package/dist/repository/components/backup/BackupField.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  // Adapted from jj-store StoreWorkField.svelte (Apache-2.0).
+  import * as Field from "@lapismd/design-core/shadcn/field";
+  import type { Snippet } from "svelte";
+  let {
+    id,
+    label,
+    description,
+    children,
+  }: { id: string; label: string; description?: string; children: Snippet } =
+    $props();
+</script>
+
+<Field.Field class="backup-field">
+  <div class="backup-field-copy">
+    <Field.Label for={id}>{label}</Field.Label>
+    {#if description}<Field.Description>{description}</Field.Description>{/if}
+  </div>
+  <div class="backup-field-control">{@render children()}</div>
+</Field.Field>
+
+<style>
+  :global(.backup-field) {
+    display: grid;
+    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
+    gap: 1rem;
+    align-items: start;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .backup-field-copy {
+    display: grid;
+    gap: 0.35rem;
+    min-width: 0;
+  }
+  .backup-field-control {
+    min-width: 0;
+  }
+  @media (max-width: 40rem) {
+    :global(.backup-field) {
+      grid-template-columns: minmax(0, 1fr);
+      gap: 0.65rem;
+    }
+  }
+</style>

package/dist/repository/components/backup/BackupField.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    id: string;
+    label: string;
+    description?: string;
+    children: Snippet;
+};
+declare const BackupField: import("svelte").Component<$$ComponentProps, {}, "">;
+type BackupField = ReturnType<typeof BackupField>;
+export default BackupField;

package/dist/repository/components/backup/BackupSelect.svelte

@@ -0,0 +1,71 @@
+<script lang="ts" generics="T extends string | null">
+  // Adapted from jj-store StoreSettingsSelect.svelte (Apache-2.0).
+  import * as Select from "@lapismd/design-core/shadcn/select";
+  let {
+    id,
+    value = $bindable(),
+    options,
+    disabled = false,
+    "aria-label": ariaLabel,
+    onValueChange,
+  }: {
+    id?: string;
+    value: T;
+    options: readonly { value: T; label: string; disabled?: boolean }[];
+    disabled?: boolean;
+    "aria-label"?: string;
+    onValueChange?: (value: T) => void;
+  } = $props();
+  // Encode null/default choices without reserving a domain value.
+  const selected = $derived(
+    options.findIndex((option) => option.value === value),
+  );
+  const display = $derived(
+    options[selected]?.label ?? value ?? "Choose an option",
+  );
+</script>
+
+<Select.Root
+  type="single"
+  value={selected < 0 ? "" : String(selected)}
+  {disabled}
+  onValueChange={(next) => {
+    const option = next === "" ? undefined : options[Number(next)];
+    if (!option || option.disabled) return;
+    value = option.value;
+    onValueChange?.(value);
+  }}
+>
+  <Select.Trigger
+    {id}
+    aria-label={ariaLabel ? `${ariaLabel}: ${display}` : undefined}
+    style="width:100%"
+  >
+    <span class="selected-label">{display}</span>
+  </Select.Trigger>
+  <Select.Content
+    aria-label={ariaLabel}
+    aria-labelledby={ariaLabel ? undefined : id ? `${id}-label` : undefined}
+  >
+    <Select.Group>
+      {#each options as option, index (option.value)}
+        <Select.Item
+          value={String(index)}
+          label={option.label}
+          disabled={option.disabled}
+        >
+          {option.label}
+        </Select.Item>
+      {/each}
+    </Select.Group>
+  </Select.Content>
+</Select.Root>
+
+<style>
+  .selected-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

package/dist/repository/components/backup/BackupSelect.svelte.d.ts

@@ -0,0 +1,35 @@
+declare function $$render<T extends string | null>(): {
+    props: {
+        id?: string;
+        value: T;
+        options: readonly {
+            value: T;
+            label: string;
+            disabled?: boolean;
+        }[];
+        disabled?: boolean;
+        "aria-label"?: string;
+        onValueChange?: (value: T) => void;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | null> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string | null>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string | null>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const BackupSelect: $$IsomorphicComponent;
+type BackupSelect<T extends string | null> = InstanceType<typeof BackupSelect<T>>;
+export default BackupSelect;

package/dist/repository/components/backup/BackupSettings.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import RepositoryShell from "../RepositoryShell.svelte";
+  import * as Dialog from "@lapismd/design-core/shadcn/dialog";
+  import type { SyncController } from "../../controllers/sync-controller.js";
+  import SyncConflictEditor from "./SyncConflictEditor.svelte";
+  import SyncSettings from "./SyncSettings.svelte";
+  import ForgeAccounts from "./ForgeAccounts.svelte";
+  import RemoteSettings from "./RemoteSettings.svelte";
+  import AdoptionSettings from "./AdoptionSettings.svelte";
+  import type { AdoptionController } from "../../controllers/adoption-controller.js";
+  import StorageSettings from "./StorageSettings.svelte";
+  import type { StorageController } from "../../controllers/storage-controller.js";
+  import RepositoryRestoreDialog from "../RepositoryRestoreDialog.svelte";
+  import type { ForgeController } from "../../controllers/forge-controller.js";
+  import type { RemoteController } from "../../controllers/remote-controller.js";
+  import type { RestoreController } from "../../controllers/restore.js";
+  let {
+    controller,
+    remote,
+    restore,
+    sync,
+    setSyncEnabled,
+    storage,
+    adoption,
+  }: {
+    controller: ForgeController;
+    remote?: RemoteController;
+    restore?: RestoreController;
+    sync?: SyncController;
+    setSyncEnabled?: (enabled: boolean) => Promise<void>;
+    storage?: StorageController;
+    adoption?: AdoptionController;
+  } = $props();
+  let conflictsOpen = $state(false);
+  let syncBusy = $state(false);
+  onMount(() => {
+    let active = false;
+    return sync?.subscribe((snapshot) => {
+      syncBusy = snapshot.busy;
+      if (active && !snapshot.busy) void remote?.refresh();
+      active = snapshot.busy;
+    });
+  });
+</script>
+
+<div class="backup-settings-content">
+  <ForgeAccounts {controller}>
+    {#snippet remoteSettings()}
+      {#if storage}<StorageSettings controller={storage} />{/if}
+      {#if adoption}<AdoptionSettings controller={adoption} />{/if}
+      {#if sync && setSyncEnabled}<SyncSettings
+          controller={sync}
+          setEnabled={setSyncEnabled}
+          onReview={() => (conflictsOpen = true)}
+        />{/if}
+      {#if remote}<RemoteSettings
+          controller={remote}
+          accounts={controller}
+          {restore}
+        />{/if}
+    {/snippet}
+  </ForgeAccounts>
+  {#if restore}<RepositoryRestoreDialog controller={restore} />{/if}
+</div>
+{#if sync && conflictsOpen}
+  <Dialog.Root
+    open={conflictsOpen}
+    onOpenChange={(value) => {
+      if (value || !syncBusy) conflictsOpen = value;
+    }}
+  >
+    <Dialog.Content
+      class="backup-conflicts-dialog"
+      showCloseButton={false}
+      onEscapeKeydown={(event) => {
+        if (syncBusy) event.preventDefault();
+      }}
+    >
+      <Dialog.Title class="visually-hidden"
+        >Resolve backup synchronization conflicts</Dialog.Title
+      >
+      <Dialog.Description class="visually-hidden"
+        >Review and resolve retained local and remote changes.</Dialog.Description
+      >
+      <RepositoryShell>
+        {#snippet surface()}<SyncConflictEditor
+            controller={sync}
+            open={conflictsOpen}
+            onClose={() => (conflictsOpen = false)}
+          />{/snippet}
+        <div></div>
+      </RepositoryShell>
+    </Dialog.Content>
+  </Dialog.Root>
+{/if}
+
+<style>
+  .backup-settings-content {
+    display: grid;
+    gap: 1rem;
+    min-width: 0;
+    width: 100%;
+  }
+  :global(.backup-conflicts-dialog) {
+    width: 100dvw;
+    max-width: 100dvw;
+    height: 100dvh;
+    max-height: 100dvh;
+    padding: 0;
+    gap: 0;
+    border: 0;
+    border-radius: 0;
+  }
+  :global(.backup-conflicts-dialog .visually-hidden) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+</style>

package/dist/repository/components/backup/BackupSettings.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { SyncController } from "../../controllers/sync-controller.js";
+import type { AdoptionController } from "../../controllers/adoption-controller.js";
+import type { StorageController } from "../../controllers/storage-controller.js";
+import type { ForgeController } from "../../controllers/forge-controller.js";
+import type { RemoteController } from "../../controllers/remote-controller.js";
+import type { RestoreController } from "../../controllers/restore.js";
+type $$ComponentProps = {
+    controller: ForgeController;
+    remote?: RemoteController;
+    restore?: RestoreController;
+    sync?: SyncController;
+    setSyncEnabled?: (enabled: boolean) => Promise<void>;
+    storage?: StorageController;
+    adoption?: AdoptionController;
+};
+declare const BackupSettings: import("svelte").Component<$$ComponentProps, {}, "">;
+type BackupSettings = ReturnType<typeof BackupSettings>;
+export default BackupSettings;

package/dist/repository/components/backup/BackupSettingsField.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { onDestroy, untrack } from "svelte";
+  import type { WorkspaceCustomSettingProps } from "@lapis-notes/api";
+  import type { BackupSettingsFieldDefinition } from "./backup-settings.js";
+  import BackupSettings from "./BackupSettings.svelte";
+  let { field }: Pick<WorkspaceCustomSettingProps, "field"> = $props();
+  const panel = untrack(() =>
+    (field as BackupSettingsFieldDefinition).openPanel(),
+  );
+  onDestroy(() => void panel.close().catch(panel.report));
+</script>
+
+<BackupSettings {...panel.props} />

package/dist/repository/components/backup/BackupSettingsField.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { WorkspaceCustomSettingProps } from "@lapis-notes/api";
+declare const BackupSettingsField: import("svelte").Component<Pick<WorkspaceCustomSettingProps<unknown>, "field">, {}, "">;
+type BackupSettingsField = ReturnType<typeof BackupSettingsField>;
+export default BackupSettingsField;

package/dist/repository/components/backup/ForgeAccounts.svelte

@@ -0,0 +1,231 @@
+<script lang="ts">
+  // Adapted from jj-store StoreIntegrations.svelte (Apache-2.0).
+  import { onMount, tick, type Snippet } from "svelte";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as Menu from "@lapismd/design-core/shadcn/dropdown-menu";
+  import * as Empty from "@lapismd/design-core/shadcn/empty";
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import { Badge } from "@lapismd/design-core/shadcn/badge";
+  import Plus from "@lucide/svelte/icons/plus";
+  import Trash2 from "@lucide/svelte/icons/trash-2";
+  import KeyRound from "@lucide/svelte/icons/key-round";
+  import RefreshCw from "@lucide/svelte/icons/refresh-cw";
+  import RepositoryAuthorAvatar from "../RepositoryAuthorAvatar.svelte";
+  import ForgeAuthorization from "./ForgeAuthorization.svelte";
+  import ForgeIcon from "./ForgeIcon.svelte";
+  import BackupCard from "./BackupCard.svelte";
+  import type { ForgeController } from "../../controllers/forge-controller.js";
+  import type { ForgeState } from "../../controllers/forge-accounts.js";
+  let {
+    controller,
+    remoteSettings,
+  }: { controller: ForgeController; remoteSettings?: Snippet } = $props();
+  let snapshot = $state<ForgeState>({ busy: true, flow: "" });
+  let menu = $state(false);
+  onMount(() => {
+    const unsubscribe = controller.subscribe((value) => (snapshot = value));
+    void controller.refresh();
+    return unsubscribe;
+  });
+  async function choose(method: "oauth" | "pat" | "enterprise" | "forgejo") {
+    menu = false;
+    await tick();
+    if (method === "oauth") await controller.begin();
+    else controller.tokenFlow(method);
+  }
+</script>
+
+<section
+  class="backup-settings"
+  aria-label="Repository backup settings"
+  aria-busy={snapshot.busy}
+>
+  <BackupCard
+    title="GitHub and Forgejo"
+    description="Connect an account for remote vault backup."
+    padded={false}
+  >
+    {#snippet icon()}<ForgeIcon provider="github" />{/snippet}
+    {#snippet actions()}
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        disabled={snapshot.busy}
+        aria-label="Refresh forge accounts"
+        onclick={() => controller.refresh()}><RefreshCw /></Button
+      >
+    {/snippet}
+    {#if !snapshot.inventory && snapshot.busy}<div
+        class="account-row"
+        role="status"
+        aria-label="Loading forge accounts"
+      >
+        <Skeleton style="height:2.5rem;width:2.5rem" /><Skeleton
+          style="height:1rem;width:60%"
+        />
+      </div>
+    {:else if !snapshot.inventory}<Empty.Root
+        ><Empty.Header
+          ><Empty.Media variant="icon"><KeyRound /></Empty.Media><Empty.Title
+            >Accounts unavailable</Empty.Title
+          ><Empty.Description
+            >Refresh to load your forge accounts.</Empty.Description
+          ></Empty.Header
+        ></Empty.Root
+      >
+    {:else}
+      {#each snapshot.inventory.accounts as account (account.id)}<div
+          class="account-row"
+        >
+          <RepositoryAuthorAvatar
+            name={account.name || account.login}
+            avatarUrl={account.avatar_url || undefined}
+            email={account.email || ""}
+            handle={account.login}
+            size="md"
+          />
+          <div class="account-identity">
+            <div>
+              <ForgeIcon
+                provider={account.api_url.includes("/api/v1")
+                  ? "forgejo"
+                  : "github"}
+              /><strong>{account.login}</strong><Badge variant="secondary"
+                >{account.method === "oauth"
+                  ? "OAuth"
+                  : account.method === "enterprise"
+                    ? "Enterprise PAT"
+                    : "PAT"}</Badge
+              >
+            </div>
+            {#if account.email}<span>{account.email}</span>{/if}<span
+              >{new URL(account.api_url).host} · {account.available
+                ? "Connected"
+                : "Reconnect required"}</span
+            >
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={snapshot.busy || Boolean(snapshot.flow)}
+            aria-label={`Forget ${account.login} ${account.method} account`}
+            onclick={() => controller.forget(account.id)}
+            >Forget<Trash2 data-icon="inline-end" /></Button
+          >
+        </div>{/each}
+      {#if !snapshot.inventory.accounts.length}<p class="guidance">
+          Connect an account to choose a remote backup repository.
+        </p>{/if}
+    {/if}
+    {#snippet footer()}
+      <span class="guidance"
+        ><ForgeIcon provider="github" /><ForgeIcon provider="forgejo" />Forge
+        account access</span
+      >
+      <Menu.Root bind:open={menu}
+        ><Menu.Trigger
+          >{#snippet child({ props })}<Button
+              {...props}
+              variant="outline"
+              disabled={snapshot.busy || Boolean(snapshot.flow)}
+              aria-label="Add forge account"
+              >Add forge account<Plus data-icon="inline-end" /></Button
+            >{/snippet}</Menu.Trigger
+        >
+        <Menu.Content
+          align="end"
+          style="width:max-content;min-width:14rem;max-width:calc(100dvw - 1rem);white-space:nowrap"
+          ><Menu.Group>
+            <Menu.Item
+              disabled={!snapshot.inventory?.oauth_available}
+              onSelect={() => void choose("oauth")}
+              ><ForgeIcon provider="github" decorative />Authorize GitHub
+              Account</Menu.Item
+            >
+            <Menu.Item onSelect={() => void choose("pat")}
+              ><KeyRound />Add Personal Access Token</Menu.Item
+            >
+            <Menu.Item onSelect={() => void choose("enterprise")}
+              ><ForgeIcon provider="github" decorative />Add GitHub Enterprise
+              Account</Menu.Item
+            >
+            <Menu.Item onSelect={() => void choose("forgejo")}
+              ><ForgeIcon provider="forgejo" decorative />Add Forgejo Account</Menu.Item
+            >
+          </Menu.Group></Menu.Content
+        >
+      </Menu.Root>
+    {/snippet}
+  </BackupCard>
+  {#if snapshot.inventory && !snapshot.inventory.oauth_available}<p
+      class="guidance"
+    >
+      Device sign-in uses the public OAuth client ID configured for jj-store.
+      Configure that ID or connect with a personal token.
+    </p>{/if}
+  <ForgeAuthorization manager={controller} {snapshot} />
+  {@render remoteSettings?.()}
+  <p class="guidance">
+    <KeyRound />Credentials are saved locally in your OS credential store.
+  </p>
+</section>
+
+<style>
+  .backup-settings {
+    display: grid;
+    gap: 1rem;
+    min-width: 0;
+    color: var(--foreground);
+  }
+  .account-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.85rem 1rem;
+    min-width: 0;
+  }
+  .account-identity {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.2rem;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .account-identity > div {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+  .account-row + .account-row {
+    border-top: 1px solid var(--border);
+  }
+  p.guidance {
+    padding: 1rem;
+  }
+  .account-identity > span,
+  .guidance {
+    font-size: 0.8rem;
+    color: var(--muted-foreground);
+  }
+  .guidance {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0;
+  }
+  .guidance :global(svg) {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+  @media (max-width: 40rem) {
+    .account-row {
+      flex-wrap: wrap;
+    }
+    .account-identity {
+      min-width: 50%;
+    }
+  }
+</style>

package/dist/repository/components/backup/ForgeAccounts.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from "svelte";
+import type { ForgeController } from "../../controllers/forge-controller.js";
+type $$ComponentProps = {
+    controller: ForgeController;
+    remoteSettings?: Snippet;
+};
+declare const ForgeAccounts: import("svelte").Component<$$ComponentProps, {}, "">;
+type ForgeAccounts = ReturnType<typeof ForgeAccounts>;
+export default ForgeAccounts;