@lapis-notes/history 0.1.4 → 0.2.2

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

@@ -0,0 +1,129 @@
+<script lang="ts">
+  // Uses the maintained restore-dialog composition for an explicit local decision.
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as AlertDialog from "@lapismd/design-core/shadcn/alert-dialog";
+  import type { PendingPublication } from "../../controllers/remote.js";
+  let {
+    pending,
+    busy,
+    canObserve,
+    onObserve,
+    onStop,
+  }: {
+    pending: PendingPublication;
+    busy: boolean;
+    canObserve: boolean;
+    onObserve(id: string): Promise<boolean>;
+    onStop(id: string): Promise<boolean>;
+  } = $props();
+  let confirm = $state(false);
+  let selected = $state<PendingPublication>();
+  const terminal = $derived(
+    ["complete", "stale", "stopped"].includes(pending.outcome),
+  );
+  async function stop() {
+    if (selected && (await onStop(selected.request_id))) confirm = false;
+  }
+</script>
+
+<section class="publication-recovery" aria-label="Original backup push">
+  <strong>Previous push needs review</strong>
+  <p>
+    {terminal
+      ? "Its recorded result can be retained and the local recovery marker cleared."
+      : "The result of this original push has not been confirmed. Checking it never sends the push again."}
+  </p>
+  <dl>
+    <div>
+      <dt>Checkpoint</dt>
+      <dd><code title={pending.after}>{pending.after.slice(0, 12)}</code></dd>
+    </div>
+    <div>
+      <dt>Request</dt>
+      <dd><code>{pending.request_id}</code></dd>
+    </div>
+  </dl>
+  <div class="publication-actions">
+    <Button
+      variant="outline"
+      size="sm"
+      disabled={busy || !canObserve}
+      onclick={() => onObserve(pending.request_id)}>Check original push</Button
+    >
+    <Button
+      variant="outline"
+      size="sm"
+      disabled={busy}
+      onclick={() => {
+        if (terminal) void onStop(pending.request_id);
+        else {
+          selected = pending;
+          confirm = true;
+        }
+      }}>{terminal ? "Finish recovery" : "Stop tracking this push"}</Button
+    >
+  </div>
+  {#if !canObserve}<p>
+      Reconnect the account to check the remote result. You can stop tracking
+      this request locally.
+    </p>{/if}
+</section>
+<AlertDialog.Root
+  open={confirm}
+  onOpenChange={(open) => {
+    if (!busy) confirm = open;
+  }}
+>
+  <AlertDialog.Content>
+    <AlertDialog.Header
+      ><AlertDialog.Title>Stop tracking this push?</AlertDialog.Title
+      ><AlertDialog.Description>
+        Its outcome will remain unknown. This retains the original receipt and
+        all local history, and cannot cancel or undo a push that reached the
+        remote. The next synchronization must fetch and merge before publishing
+        a new request.
+      </AlertDialog.Description></AlertDialog.Header
+    >
+    <AlertDialog.Footer
+      ><AlertDialog.Cancel disabled={busy}>Keep tracking</AlertDialog.Cancel
+      ><Button disabled={busy} onclick={stop}>Stop tracking</Button
+      ></AlertDialog.Footer
+    >
+  </AlertDialog.Content>
+</AlertDialog.Root>
+
+<style>
+  .publication-recovery {
+    border-top: 1px solid var(--border);
+    margin-top: 1.25rem;
+    padding-top: 1rem;
+    font-size: 0.8rem;
+  }
+  p {
+    color: var(--muted-foreground);
+    margin: 0.5rem 0;
+  }
+  dl {
+    margin: 0.75rem 0;
+    display: grid;
+    gap: 0.4rem;
+  }
+  dl div {
+    display: flex;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+  dt {
+    color: var(--muted-foreground);
+  }
+  dd {
+    margin: 0;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .publication-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { PendingPublication } from "../../controllers/remote.js";
+type $$ComponentProps = {
+    pending: PendingPublication;
+    busy: boolean;
+    canObserve: boolean;
+    onObserve(id: string): Promise<boolean>;
+    onStop(id: string): Promise<boolean>;
+};
+declare const PublicationRecovery: import("svelte").Component<$$ComponentProps, {}, "">;
+type PublicationRecovery = ReturnType<typeof PublicationRecovery>;
+export default PublicationRecovery;

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;