@lapis-notes/history 0.1.2 → 0.2.0

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

@@ -0,0 +1,288 @@
+<script lang="ts">
+  // Adapted from jj-store StoreForgeRepositoryAccess.svelte (Apache-2.0).
+  import { onMount } from "svelte";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import { Badge } from "@lapismd/design-core/shadcn/badge";
+  import BackupCard from "./BackupCard.svelte";
+  import * as Field from "@lapismd/design-core/shadcn/field";
+  import * as Empty from "@lapismd/design-core/shadcn/empty";
+  import RefreshCw from "@lucide/svelte/icons/refresh-cw";
+  import CloudDownload from "@lucide/svelte/icons/cloud-download";
+  import KeyRound from "@lucide/svelte/icons/key-round";
+  import History from "@lucide/svelte/icons/history";
+  import PublicationRecovery from "./PublicationRecovery.svelte";
+  import BackupField from "./BackupField.svelte";
+  import BackupSelect from "./BackupSelect.svelte";
+  import type { ForgeController } from "../../controllers/forge-controller.js";
+  import type { ForgeState } from "../../controllers/forge-accounts.js";
+  import type { RemoteController } from "../../controllers/remote-controller.js";
+  import type { RemoteViewState } from "../../controllers/remote.js";
+  import type { RestoreController } from "../../controllers/restore.js";
+  let {
+    controller,
+    accounts,
+    restore,
+  }: {
+    controller: RemoteController;
+    accounts: ForgeController;
+    restore?: RestoreController;
+  } = $props();
+  let snapshot = $state<RemoteViewState>({ busy: true, phase: "loading" });
+  let inventory = $state<ForgeState>({ busy: true, flow: "" });
+  let account = $state("");
+  let project = $state("");
+  let branch = $state("");
+  let initialized = false;
+  const id = $props.id();
+  const available = $derived(
+    inventory.inventory?.accounts.filter((value) => value.available) ?? [],
+  );
+  $effect(() => {
+    if (!available.some((value) => value.id === account))
+      account = available.length === 1 ? available[0].id : "";
+  });
+  onMount(() => {
+    const stopRemote = controller.subscribe((value) => {
+      snapshot = value;
+      if (!initialized && value.data) {
+        initialized = true;
+        const config = value.data.configuration;
+        if (config) {
+          account = config.account;
+          project = config.project;
+          branch = config.target.branch;
+        }
+      }
+    });
+    const stopAccounts = accounts.subscribe((value) => (inventory = value));
+    void controller.refresh();
+    return () => {
+      stopRemote();
+      stopAccounts();
+    };
+  });
+  async function connect() {
+    if (await controller.configure(account, project, branch)) {
+      const config = snapshot.data?.configuration;
+      if (config) {
+        account = config.account;
+        project = config.project;
+        branch = config.target.branch;
+      }
+    }
+  }
+</script>
+
+<section aria-label="Remote vault backup" aria-busy={snapshot.busy}>
+  <BackupCard
+    title="Remote backup"
+    Icon={CloudDownload}
+    padded={false}
+    description={snapshot.data?.configuration
+      ? `${snapshot.data.configuration.project} · ${snapshot.data.configuration.target.branch}`
+      : "Connect a GitHub or Forgejo repository to back up or restore this vault."}
+  >
+    {#snippet actions()}<Button
+        variant="ghost"
+        size="icon-sm"
+        disabled={snapshot.busy}
+        aria-label="Refresh remote settings"
+        onclick={() => controller.refresh()}><RefreshCw /></Button
+      >{/snippet}
+    {#if !snapshot.data && snapshot.busy}
+      <div
+        class="remote-loading"
+        role="status"
+        aria-label="Loading remote backup"
+      >
+        <Skeleton style="height:1rem;width:30%" /><Skeleton
+          style="height:2.25rem;width:100%"
+        />
+        <Skeleton style="height:1rem;width:40%" /><Skeleton
+          style="height:2.25rem;width:100%"
+        />
+      </div>
+    {:else if !snapshot.data}
+      <Empty.Root
+        ><Empty.Header
+          ><Empty.Media variant="icon"><CloudDownload /></Empty.Media
+          ><Empty.Title>Remote settings unavailable</Empty.Title
+          ><Empty.Description
+            >Refresh to read your saved connection.</Empty.Description
+          ></Empty.Header
+        ></Empty.Root
+      >
+    {:else if !available.length}
+      <Empty.Root
+        ><Empty.Header
+          ><Empty.Media variant="icon"><KeyRound /></Empty.Media><Empty.Title
+            >{snapshot.data.configuration
+              ? "Reconnect to fetch updates"
+              : "Connect an account first"}</Empty.Title
+          ><Empty.Description
+            >{snapshot.data.configuration
+              ? "Your cached backup remains available. Reconnect an account above to fetch more history."
+              : "Add a forge account above to choose a remote backup repository."}</Empty.Description
+          ></Empty.Header
+        >
+        {#if snapshot.data.configuration}<Empty.Content
+            ><Button
+              variant="outline"
+              disabled={snapshot.busy}
+              onclick={() => controller.disconnect()}>Disconnect remote</Button
+            ></Empty.Content
+          >{/if}
+        {#if snapshot.data.checkpoint && restore}<Empty.Content
+            ><Button
+              variant="outline"
+              disabled={snapshot.busy}
+              onclick={() =>
+                restore?.prepareVault(snapshot.data!.checkpoint!.commit)}
+              ><History data-icon="inline-start" />Review restore</Button
+            ></Empty.Content
+          >{/if}
+      </Empty.Root>
+    {:else}
+      <form
+        onsubmit={(event) => {
+          event.preventDefault();
+          void connect();
+        }}
+      >
+        <Field.Group style="gap:0">
+          <BackupField label="Forge account" id={`${id}-account`}>
+            <BackupSelect
+              id={`${id}-account`}
+              aria-label="Forge account"
+              bind:value={account}
+              disabled={snapshot.busy}
+              options={available.map((value) => ({
+                value: value.id,
+                label: `${value.login} · ${new URL(value.api_url).host}`,
+              }))}
+            />
+          </BackupField>
+          <BackupField
+            label="Remote repository"
+            id={`${id}-project`}
+            description="Use an existing repository in owner/repository form."
+          >
+            <Input
+              id={`${id}-project`}
+              bind:value={project}
+              required
+              placeholder="owner/notes"
+              disabled={snapshot.busy}
+            />
+          </BackupField>
+          <BackupField
+            label="Backup branch"
+            id={`${id}-branch`}
+            description="Leave empty to use the repository's default branch."
+          >
+            <Input
+              id={`${id}-branch`}
+              bind:value={branch}
+              placeholder="Repository default"
+              disabled={snapshot.busy}
+            />
+          </BackupField>
+        </Field.Group>
+        <div class="remote-actions">
+          <Button
+            type="submit"
+            disabled={snapshot.busy || !account || !project.trim()}
+            >{snapshot.data.configuration
+              ? "Save connection"
+              : "Connect repository"}</Button
+          >
+          {#if snapshot.data.configuration}<Button
+              type="button"
+              variant="outline"
+              disabled={snapshot.busy}
+              onclick={() => controller.disconnect()}>Disconnect</Button
+            >{/if}
+        </div>
+      </form>
+      {#if snapshot.data.configuration}
+        <div class="remote-history">
+          {#if !snapshot.data.configuration.canPush}<Badge variant="secondary"
+              >Read-only access</Badge
+            >{/if}
+          <p>
+            Fetch remote history without changing local files. Review a
+            checkpoint to restore it safely, including into a new empty vault.
+          </p>
+          <div class="remote-actions">
+            <Button
+              variant="outline"
+              disabled={snapshot.busy ||
+                !available.some(
+                  (value) => value.id === snapshot.data?.configuration?.account,
+                )}
+              onclick={() => controller.fetch()}
+              ><CloudDownload data-icon="inline-start" />Fetch remote history</Button
+            >
+            {#if snapshot.data.checkpoint && restore}<Button
+                variant="outline"
+                disabled={snapshot.busy}
+                onclick={() =>
+                  restore?.prepareVault(snapshot.data!.checkpoint!.commit)}
+                ><History data-icon="inline-start" />Review restore</Button
+              >{/if}
+          </div>
+          {#if snapshot.data.checkpoint}<p
+              class="checkpoint"
+              title={snapshot.data.checkpoint.description}
+            >
+              Latest remote checkpoint: {snapshot.data.checkpoint.description.split(
+                "\n",
+              )[0] || "Untitled checkpoint"}
+            </p>{/if}
+        </div>
+      {/if}
+    {/if}
+    {#if snapshot.data?.publication && controller.service.publication}<PublicationRecovery
+        pending={snapshot.data.publication}
+        busy={snapshot.busy}
+        canObserve={available.some(
+          (value) => value.id === snapshot.data?.configuration?.account,
+        )}
+        onObserve={(id) => controller.observePublication(id)}
+        onStop={(id) => controller.stopPublication(id)}
+      />{/if}
+  </BackupCard>
+</section>
+
+<style>
+  .remote-loading {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1rem;
+  }
+  .remote-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.85rem 1rem;
+    justify-content: flex-end;
+  }
+  .remote-history {
+    padding: 1rem;
+    border-top: 1px solid var(--border);
+  }
+  p {
+    font-size: 0.8rem;
+    color: var(--muted-foreground);
+    margin: 0.5rem 0;
+  }
+  .checkpoint {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+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: RemoteController;
+    accounts: ForgeController;
+    restore?: RestoreController;
+};
+declare const RemoteSettings: import("svelte").Component<$$ComponentProps, {}, "">;
+type RemoteSettings = ReturnType<typeof RemoteSettings>;
+export default RemoteSettings;

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import {
+    AppSettingsRoot,
+    AppSettingsSection,
+    type WorkspaceSettingsPageProps,
+  } from "@lapismd/design-core/workspace/settings";
+  import { BACKUP_SETTINGS } from "./backup-settings.js";
+  import BackupSettingsField from "./BackupSettingsField.svelte";
+  let { controller, app, section }: WorkspaceSettingsPageProps = $props();
+  const titleId = $props.id();
+  const backup = $derived(
+    section.fields?.find((field) => field.id === BACKUP_SETTINGS),
+  );
+  const general = $derived({
+    ...section,
+    fields: section.fields?.filter((field) => field.id !== BACKUP_SETTINGS),
+  });
+</script>
+
+<div class="repository-settings-page">
+  <AppSettingsRoot {controller} {app}>
+    <AppSettingsSection section={general} />
+  </AppSettingsRoot>
+  {#if backup?.type === "custom"}
+    <section
+      class="repository-backup-section"
+      aria-labelledby={titleId}
+      data-setting-id={BACKUP_SETTINGS}
+    >
+      <h2 id={titleId}>Backup and synchronisation</h2>
+      <BackupSettingsField field={backup} />
+    </section>
+  {/if}
+</div>
+
+<style>
+  .repository-settings-page {
+    display: grid;
+    gap: 1.75rem;
+    min-width: 0;
+  }
+  .repository-backup-section {
+    min-width: 0;
+  }
+  h2 {
+    margin: 0 0 0.85rem;
+    font-size: var(--ui-workspace-settings-heading-size, 1rem);
+    font-weight: var(--ui-workspace-settings-heading-weight, 600);
+    line-height: 1.25;
+  }
+</style>

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

@@ -0,0 +1,4 @@
+import { type WorkspaceSettingsPageProps } from "@lapismd/design-core/workspace/settings";
+declare const RepositorySettingsPage: import("svelte").Component<WorkspaceSettingsPageProps, {}, "">;
+type RepositorySettingsPage = ReturnType<typeof RepositorySettingsPage>;
+export default RepositorySettingsPage;

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

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import BackupCard from "./BackupCard.svelte";
+  import * as Field from "@lapismd/design-core/shadcn/field";
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import FolderOpen from "@lucide/svelte/icons/folder-open";
+  import FolderCog from "@lucide/svelte/icons/folder-cog";
+  import RefreshCw from "@lucide/svelte/icons/refresh-cw";
+  import type { StorageController } from "../../controllers/storage-controller.js";
+  import type {
+    StorageState,
+    StorageLocation,
+  } from "../../controllers/storage.js";
+  let { controller }: { controller: StorageController } = $props();
+  let snapshot = $state<StorageState>({
+    busy: true,
+    phase: "loading",
+    needsReload: false,
+  });
+  let selected = $state<StorageLocation>("external");
+  onMount(() => {
+    const stop = controller.subscribe((value) => {
+      snapshot = value;
+      if (value.data) selected = value.data.location;
+    });
+    void controller.refresh();
+    return stop;
+  });
+</script>
+
+<section aria-label="History storage" aria-busy={snapshot.busy}>
+  <BackupCard
+    title="History storage"
+    Icon={FolderCog}
+    description="Keep automatic history in application data, or store it in the vault’s root .jj directory."
+  >
+    {#snippet actions()}<Button
+        variant="ghost"
+        size="icon-sm"
+        disabled={snapshot.busy}
+        aria-label="Refresh history storage"
+        onclick={() => controller.refresh()}><RefreshCw /></Button
+      >{/snippet}
+    {#if !snapshot.data && snapshot.busy}
+      <div
+        class="storage-loading"
+        role="status"
+        aria-label="Loading history storage"
+      >
+        <Skeleton style="height:2rem;width:14rem;max-width:100%" /><Skeleton
+          style="height:1rem;width:80%"
+        />
+      </div>
+    {:else if snapshot.data?.pending}
+      <p>
+        A history storage move is unfinished. Resume the original move, or keep
+        the previous location if installation has not completed.
+      </p>
+      <div class="storage-actions">
+        <Button disabled={snapshot.busy} onclick={() => controller.recover()}
+          >Resume move and reload</Button
+        ><Button
+          variant="outline"
+          disabled={snapshot.busy}
+          onclick={() => controller.rollback()}>Keep previous location</Button
+        >
+      </div>
+    {:else if snapshot.data}
+      {#if snapshot.data.location === "external" && snapshot.data.repositoryPath}
+        <div class="repository-location">
+          <strong>Repository location</strong>
+          <code>{snapshot.data.repositoryPath}</code>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={snapshot.busy ||
+              !snapshot.data.canReveal ||
+              snapshot.needsReload}
+            onclick={() => controller.reveal()}
+            ><FolderOpen data-icon="inline-start" />Show in file manager</Button
+          >
+        </div>
+      {/if}
+      <Field.Field data-disabled={snapshot.busy || undefined}>
+        <Field.Label>Repository metadata location</Field.Label>
+        <ToggleGroup.Root
+          type="single"
+          variant="outline"
+          size="sm"
+          aria-label="Repository metadata location"
+          value={selected}
+          disabled={snapshot.busy || snapshot.needsReload}
+          onValueChange={(value) => {
+            if (value === "external" || value === "colocated") selected = value;
+          }}
+        >
+          <ToggleGroup.Item value="external">Application data</ToggleGroup.Item>
+          <ToggleGroup.Item value="colocated">Vault root (.jj)</ToggleGroup.Item
+          >
+        </ToggleGroup.Root>
+        <Field.Description
+          >{selected === "external"
+            ? "Default. No JJ or Git metadata is added to the vault."
+            : "Advanced. The vault contains its own .jj metadata. Existing repository data is preserved and will not be overwritten."}</Field.Description
+        >
+      </Field.Field>
+      {#if snapshot.needsReload}<div class="storage-actions">
+          <Button disabled={snapshot.busy} onclick={() => controller.reload()}
+            ><RefreshCw data-icon="inline-start" />Reload vault</Button
+          >
+        </div>
+      {:else if selected !== snapshot.data.location}<div
+          class="storage-actions"
+        >
+          <Button
+            disabled={snapshot.busy}
+            onclick={() => controller.change(selected)}
+            ><FolderCog data-icon="inline-start" />Move history and reload</Button
+          >
+        </div>{/if}
+    {:else}<p>Refresh to load the vault’s history storage settings.</p>{/if}
+    {#snippet footer()}<p>
+        Moving preserves local history and recovery records. The vault reloads
+        after the move.
+      </p>{/snippet}
+  </BackupCard>
+</section>
+
+<style>
+  .repository-location {
+    display: grid;
+    justify-items: start;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    font-size: 0.8125rem;
+  }
+  .repository-location code {
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
+  .storage-actions,
+  .storage-loading {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    margin-top: 0.75rem;
+  }
+  .storage-loading {
+    flex-direction: column;
+  }
+  p {
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: 0.8rem;
+  }
+</style>

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

@@ -0,0 +1,7 @@
+import type { StorageController } from "../../controllers/storage-controller.js";
+type $$ComponentProps = {
+    controller: StorageController;
+};
+declare const StorageSettings: import("svelte").Component<$$ComponentProps, {}, "">;
+type StorageSettings = ReturnType<typeof StorageSettings>;
+export default StorageSettings;

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

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import { onMount, untrack } from "svelte";
+  import { MediaQuery } from "svelte/reactivity";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import RepositoryConflictSurface from "../conflicts/RepositoryConflictSurface.svelte";
+  import RepositoryConflictText from "../conflicts/RepositoryConflictText.svelte";
+  import RepositorySkeleton from "../RepositorySkeleton.svelte";
+  import type { SyncController } from "../../controllers/sync-controller.js";
+  import type { SyncState } from "../../controllers/sync.js";
+  let {
+    controller,
+    open,
+    onClose,
+  }: { controller: SyncController; open: boolean; onClose(): void } = $props();
+  let snapshot = $state<SyncState>({
+    busy: false,
+    phase: "ready",
+    enabled: true,
+    recovery: false,
+  });
+  let active = $state("");
+  let browserOpen = $state(true);
+  let draft = $state("");
+  let seed = $state("");
+  let resolved = $state(false);
+  let loaded = "";
+  let requested = $state("");
+  const compact = new MediaQuery("(max-width: 700px)");
+  const files = $derived(
+    snapshot.proposal?.conflicts.map((path) => ({ path })) ?? [],
+  );
+  const detail = $derived(
+    snapshot.conflict?.path === active ? snapshot.conflict : undefined,
+  );
+  const text = $derived(
+    detail?.terms.length === 3 &&
+      detail.terms.every(
+        (term) =>
+          term.kind === "text" &&
+          term.executable === detail.terms[0].executable,
+      ),
+  );
+  onMount(() => controller.subscribe((next) => (snapshot = next)));
+  $effect(() => {
+    if (!open || snapshot.busy || !files.length) return;
+    const path = files.some((file) => file.path === active)
+      ? active
+      : files[0].path;
+    if (active !== path) active = path;
+    if (detail) {
+      const key = `${snapshot.proposal?.candidate?.commit}:${path}`;
+      if (loaded !== key) {
+        loaded = key;
+        draft = detail.terms[1]?.text ?? "";
+        seed = draft;
+        resolved = false;
+      }
+    } else {
+      const key = `${snapshot.proposal?.candidate?.commit}:${path}`;
+      if (requested !== key) {
+        requested = key;
+        untrack(() => void controller.inspect(path));
+      }
+    }
+  });
+  $effect(() => {
+    if (compact.current) browserOpen = false;
+  });
+  $effect(() => {
+    if (open && !snapshot.busy && !files.length) untrack(onClose);
+  });
+</script>
+
+<RepositoryConflictSurface
+  {open}
+  label="Resolve backup synchronization conflicts"
+  busy={snapshot.busy}
+  locked={snapshot.busy}
+  bind:browserOpen
+  compact={compact.current}
+  {files}
+  activePath={active}
+  onSelect={(path) => {
+    active = path;
+    if (compact.current) browserOpen = false;
+  }}
+  {onClose}
+>
+  {#snippet actions()}
+    {#if detail}<Button
+        size="sm"
+        disabled={snapshot.busy || !text || !resolved}
+        onclick={() =>
+          controller.resolve(active, {
+            kind: "text",
+            text: draft,
+            executable: detail?.terms[0].executable ?? false,
+          })}>Save resolution</Button
+      >
+      <Button
+        variant="outline"
+        size="sm"
+        disabled={snapshot.busy}
+        onclick={() => controller.resolve(active, { kind: "delete" })}
+        >Delete file</Button
+      >{/if}
+  {/snippet}
+  {#if !detail}
+    {#if snapshot.busy}<RepositorySkeleton
+        kind="conflicts"
+        label="Loading synchronization conflict"
+      />
+    {:else}<section class="unsupported">
+        <p>Conflict details are unavailable.</p>
+        <Button
+          variant="outline"
+          size="sm"
+          onclick={() => controller.inspect(active)}
+          >Retry conflict details</Button
+        >
+      </section>{/if}
+  {:else if text}<RepositoryConflictText
+      path={active}
+      left={detail.terms[0].text ?? ""}
+      base={seed}
+      right={detail.terms[2].text ?? ""}
+      editable
+      onResolvedChange={({ content, resolved: complete }) => {
+        draft = content;
+        resolved = complete;
+      }}
+    />
+  {:else}<section class="unsupported">
+      <p>Choose a retained version for this file.</p>
+      {#each detail.terms.filter((term) => term.role === "add") as term}<Button
+          variant="outline"
+          size="sm"
+          disabled={snapshot.busy || term.kind === "unsupported"}
+          onclick={() =>
+            controller.resolve(active, { kind: "term", id: term.id })}
+          >Use {term.id === 0 ? "local" : "remote"} version ({term.kind})</Button
+        >{/each}
+    </section>{/if}
+</RepositoryConflictSurface>
+
+<style>
+  .unsupported {
+    padding: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  p {
+    flex-basis: 100%;
+    font-size: 0.8rem;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { SyncController } from "../../controllers/sync-controller.js";
+type $$ComponentProps = {
+    controller: SyncController;
+    open: boolean;
+    onClose(): void;
+};
+declare const SyncConflictEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type SyncConflictEditor = ReturnType<typeof SyncConflictEditor>;
+export default SyncConflictEditor;