@lapis-notes/history 0.1.2 → 0.2.0

package/dist/repository/components/RepositoryWorkingCopyStatus.svelte

@@ -0,0 +1,290 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import RepositoryUpstreamActions from "./RepositoryUpstreamActions.svelte";
+  import type { SyncController } from "../controllers/sync-controller.js";
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import { FileChangeStats } from "@lapismd/design-core/diff";
+  import { RelativeTime } from "@lapismd/design-core/shadcn/relative-time";
+  import RefreshCw from "@lucide/svelte/icons/refresh-cw";
+  import GitCommitHorizontal from "@lucide/svelte/icons/git-commit-horizontal";
+  import RepositoryAuthorAvatar from "./RepositoryAuthorAvatar.svelte";
+  import RepositoryIdentifiers from "./RepositoryIdentifiers.svelte";
+  import { encodeJjChangeId } from "../controllers/graph/repository-log-graph.js";
+  import type {
+    WorkingCopyController,
+    WorkingCopyState,
+  } from "../controllers/working-copy-controller.js";
+  let {
+    controller,
+    openRevision,
+    copyText,
+    upstream,
+  }: {
+    controller: WorkingCopyController;
+    openRevision(operation: string, revision: string): Promise<void>;
+    copyText(value: string): Promise<void>;
+    upstream?: SyncController;
+  } = $props();
+  let statusState: WorkingCopyState = $state({ busy: true, status: "loading" });
+  let open = $state(false);
+  onMount(() =>
+    controller.subscribe((next) => {
+      statusState = next;
+    }),
+  );
+  const value = $derived(statusState.value);
+  const summaryLabel = $derived(
+    value
+      ? `${value.files} ${value.files === 1 ? "file" : "files"} ${value.lines ? `+${value.lines.additions} -${value.lines.deletions}` : "line counts unavailable"}`
+      : statusState.status === "loading"
+        ? "Loading working copy"
+        : "Working copy unavailable",
+  );
+  async function inspect() {
+    if (!value) return;
+    open = false;
+    await openRevision(value.operation, value.revision);
+  }
+</script>
+
+<div
+  class="repository-working-status"
+  aria-label="Repository working copy"
+  aria-busy={statusState.busy}
+>
+  <Popover.Root bind:open>
+    <Popover.Trigger>
+      {#snippet child({ props })}
+        <button
+          {...props}
+          type="button"
+          class="summary"
+          aria-label={`Working copy details: ${summaryLabel}`}
+        >
+          <GitCommitHorizontal aria-hidden="true" />
+          {#if value}
+            <span>{value.files} {value.files === 1 ? "file" : "files"}</span>
+            {#if value.lines}<FileChangeStats
+                additions={value.lines.additions}
+                deletions={value.lines.deletions}
+              />{:else}<span>line counts unavailable</span>{/if}
+          {:else if statusState.status === "loading"}
+            <Skeleton style="height:.75rem;width:5.5rem" />
+          {:else}<span>Working copy unavailable</span>{/if}
+        </button>
+      {/snippet}
+    </Popover.Trigger>
+    <Popover.Content
+      side="top"
+      align="end"
+      collisionPadding={8}
+      sideOffset={6}
+      style="width:min(26rem,calc(100vw - 1rem));padding:0"
+    >
+      <section class="working-card" aria-label="Working copy details">
+        <header>
+          <GitCommitHorizontal aria-hidden="true" /><strong>Working copy</strong
+          >{#if value}<span class="workspace">{value.workspace}</span>{/if}
+          <RepositoryUpstreamActions
+            controller={upstream}
+            unavailable={statusState.busy}
+          />
+        </header>
+        {#if value}
+          <button type="button" class="subject" onclick={inspect}
+            >{value.description.split(/\r?\n/u)[0] ||
+              "(no description)"}</button
+          >
+          <div class="identifiers">
+            <RepositoryIdentifiers
+              {copyText}
+              placement="inline"
+              commitId={value.revision}
+              changeId={encodeJjChangeId(value.changeId)}
+            />
+          </div>
+          <div class="author">
+            <RepositoryAuthorAvatar
+              name={value.author.name}
+              email={value.author.email}
+              size="xs"
+            /><span>{value.author.name}</span><RelativeTime
+              timestamp={Number(value.author.timestamp.millis)}
+            />
+          </div>
+          <div class="totals">
+            <span
+              >{value.files} changed {value.files === 1
+                ? "file"
+                : "files"}</span
+            >{#if value.lines}<FileChangeStats
+                additions={value.lines.additions}
+                deletions={value.lines.deletions}
+              />{:else}<span
+                >Line totals unavailable for {value.uncounted}
+                {value.uncounted === 1 ? "file" : "files"}.</span
+              >{/if}
+          </div>
+          <p>
+            Includes unsnapshotted files and saved editor changes compared with
+            the working-copy parent. Editor changes appear after saving.
+          </p>
+          <button type="button" class="open-log" onclick={inspect}
+            >Open in JJ Log</button
+          >
+        {:else if statusState.status === "loading"}
+          <div class="loading" role="status" aria-label="Reading working copy">
+            <Skeleton style="height:1rem;width:90%" /><Skeleton
+              style="height:1rem;width:65%"
+            /><Skeleton style="height:1rem;width:80%" />
+          </div>
+        {:else}<p>
+            Status is unavailable. Refresh to read the current working copy.
+          </p>{/if}
+      </section>
+    </Popover.Content>
+  </Popover.Root>
+  <button
+    type="button"
+    class="refresh"
+    aria-label="Refresh working copy status"
+    title="Refresh working copy status"
+    disabled={statusState.busy}
+    onclick={() => controller.refresh()}
+    ><RefreshCw aria-hidden="true" /></button
+  >
+</div>
+
+<style>
+  .repository-working-status {
+    display: inline-flex;
+    min-height: 1.25rem;
+    align-items: stretch;
+    gap: 0;
+    border: 0;
+    background: color-mix(
+      in oklab,
+      var(--ui-workspace-muted-foreground) 6%,
+      var(--ui-workspace-panel)
+    );
+    border-radius: var(--radius);
+    font: inherit;
+    color: inherit;
+  }
+  button {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  button:hover {
+    background: var(--accent);
+    color: var(--accent-foreground);
+  }
+  button:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 1px;
+  }
+  button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  .summary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0 0.4rem;
+    border-radius: var(--radius) 0 0 var(--radius);
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .summary :global(svg),
+  .refresh :global(svg),
+  header :global(svg) {
+    width: 0.8rem;
+    height: 0.8rem;
+    flex: none;
+  }
+  .refresh {
+    display: flex;
+    align-items: center;
+    padding: 0 0.35rem;
+    background: color-mix(
+      in oklab,
+      var(--ui-workspace-muted-foreground) 12%,
+      var(--ui-workspace-panel)
+    );
+    border-radius: 0 var(--radius) var(--radius) 0;
+  }
+  .refresh:hover:not(:disabled) {
+    background: var(--accent);
+    color: var(--accent-foreground);
+  }
+  .working-card {
+    font-family: var(--font-sans, sans-serif);
+    font-size: 0.8125rem;
+    color: var(--foreground);
+  }
+  header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .workspace {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--muted-foreground);
+  }
+  .subject {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    text-align: left;
+    font-weight: 600;
+    margin: 0.75rem 1rem;
+    padding: 0;
+  }
+  .subject:hover {
+    color: var(--primary);
+    background: transparent;
+    text-decoration: underline;
+  }
+  .identifiers,
+  .author,
+  .totals {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0.75rem 1rem;
+    flex-wrap: wrap;
+  }
+  .author {
+    color: var(--muted-foreground);
+  }
+  p {
+    margin: 0.75rem 1rem;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    line-height: 1.5;
+  }
+  .open-log {
+    border-top: 1px solid var(--border);
+    padding: 0.65rem 1rem;
+    width: 100%;
+    text-align: left;
+  }
+  .loading {
+    display: grid;
+    gap: 0.75rem;
+    padding: 1rem;
+  }
+</style>

package/dist/repository/components/RepositoryWorkingCopyStatus.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SyncController } from "../controllers/sync-controller.js";
+import type { WorkingCopyController } from "../controllers/working-copy-controller.js";
+type $$ComponentProps = {
+    controller: WorkingCopyController;
+    openRevision(operation: string, revision: string): Promise<void>;
+    copyText(value: string): Promise<void>;
+    upstream?: SyncController;
+};
+declare const RepositoryWorkingCopyStatus: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryWorkingCopyStatus = ReturnType<typeof RepositoryWorkingCopyStatus>;
+export default RepositoryWorkingCopyStatus;

package/dist/repository/components/RepositoryWorkspacePicker.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as CommandView from "@lapismd/design-core/shadcn/command-view";
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import FolderGit2Icon from "@lucide/svelte/icons/folder-git-2";
+  import RepositoryPickerSearch from "./RepositoryPickerSearch.svelte";
+  import { encodeJjChangeId } from "../controllers/graph/repository-log-graph.js";
+  import type { RepositoryWorkspace } from "../controllers/workspaces.js";
+  let {
+    workspaces,
+    selected,
+    disabled = false,
+    onOpen,
+    onSelect,
+  }: {
+    workspaces: readonly RepositoryWorkspace[];
+    selected: string | null;
+    disabled?: boolean;
+    onOpen?(): void;
+    onSelect(workspace: string | null): void;
+  } = $props();
+  let open = $state(false),
+    query = $state(""),
+    highlighted = $state("");
+  let input = $state<HTMLInputElement | null>(null);
+  const options = $derived([
+    {
+      value: "overview",
+      name: "Repository overview",
+      description: "Browse without workspace context",
+      workspace: null,
+    },
+    ...workspaces.map(({ name, commit }) => ({
+      value: `workspace:${name}`,
+      name,
+      description: `${encodeJjChangeId(commit.change_id).slice(0, 12)} · ${commit.description.split("\n")[0] || "No description"}`,
+      workspace: name,
+    })),
+  ]);
+  const visible = $derived(
+    options.filter((option) =>
+      `${option.name} ${option.description}`
+        .toLocaleLowerCase()
+        .includes(query.trim().toLocaleLowerCase()),
+    ),
+  );
+</script>
+
+<Popover.Root
+  {open}
+  onOpenChange={(next) => {
+    open = next;
+    if (next) {
+      onOpen?.();
+      query = "";
+      highlighted = selected ? `workspace:${selected}` : "overview";
+    }
+  }}
+>
+  <Popover.Trigger
+    >{#snippet child({ props })}
+      <Button
+        {...props}
+        variant="outline"
+        size="sm"
+        class="repository-review-workspace-trigger"
+        role="combobox"
+        aria-label="Repository workspace"
+        title="Select workspace"
+        {disabled}
+      >
+        <FolderGit2Icon aria-hidden="true" /><span
+          >{selected ?? "Repository overview"}</span
+        >
+        <ChevronDownIcon aria-hidden="true" />
+      </Button>
+    {/snippet}</Popover.Trigger
+  >
+  <Popover.Content
+    align="end"
+    role="dialog"
+    aria-label="Select workspace"
+    style="--ui-popover-width:min(28rem,calc(100vw - 2rem));--ui-popover-padding:0;--ui-popover-gap:0"
+    onOpenAutoFocus={(event) => {
+      event.preventDefault();
+      input?.focus();
+    }}
+  >
+    <CommandView.Root
+      bind:value={highlighted}
+      label="Select workspace"
+      shouldFilter={false}
+      loop
+    >
+      <RepositoryPickerSearch
+        grid={false}
+        bind:inputRef={input}
+        bind:query
+        label="Search workspaces"
+        placeholder="Search loaded workspaces"
+        closeLabel="Close workspace selector"
+      />
+      <CommandView.List aria-label="Repository workspaces">
+        {#if !visible.length}<CommandView.Empty
+            >No matching workspaces.</CommandView.Empty
+          >
+        {:else}<CommandView.Group>
+            {#each visible as option (option.value)}
+              <CommandView.Item
+                value={option.value}
+                aria-label={option.name}
+                data-current={option.workspace === selected || undefined}
+                onSelect={() => {
+                  open = false;
+                  onSelect(option.workspace);
+                }}
+              >
+                <CommandView.ItemIcon
+                  >{#if option.workspace === selected}<CircleCheckIcon
+                      fill="var(--foreground)"
+                      stroke="var(--background)"
+                      aria-hidden="true"
+                    />
+                  {:else}<FolderGit2Icon
+                      aria-hidden="true"
+                    />{/if}</CommandView.ItemIcon
+                >
+                <CommandView.ItemLabel>{option.name}</CommandView.ItemLabel>
+                <CommandView.ItemDescription
+                  >{option.description}</CommandView.ItemDescription
+                >
+              </CommandView.Item>
+            {/each}
+          </CommandView.Group>{/if}
+      </CommandView.List>
+    </CommandView.Root>
+  </Popover.Content>
+</Popover.Root>
+
+<style>
+  :global(.repository-review-workspace-trigger[data-ui-component="button"]) {
+    min-width: 0;
+    max-width: 10.5rem;
+    flex: 0 1 auto;
+    height: 1.75rem;
+    padding-inline: 0.45rem;
+    font-size: 0.75rem;
+    --ui-button-radius: var(--radius);
+  }
+  :global(.repository-review-workspace-trigger > span) {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

package/dist/repository/components/RepositoryWorkspacePicker.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { RepositoryWorkspace } from "../controllers/workspaces.js";
+type $$ComponentProps = {
+    workspaces: readonly RepositoryWorkspace[];
+    selected: string | null;
+    disabled?: boolean;
+    onOpen?(): void;
+    onSelect(workspace: string | null): void;
+};
+declare const RepositoryWorkspacePicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryWorkspacePicker = ReturnType<typeof RepositoryWorkspacePicker>;
+export default RepositoryWorkspacePicker;

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

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import BackupCard from "./BackupCard.svelte";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import GitMerge from "@lucide/svelte/icons/git-merge";
+  import RefreshCw from "@lucide/svelte/icons/refresh-cw";
+  import type { AdoptionController } from "../../controllers/adoption-controller.js";
+  import type { AdoptionState } from "../../controllers/adoption.js";
+  let { controller }: { controller: AdoptionController } = $props();
+  let snapshot = $state<AdoptionState>({ busy: true, phase: "loading" });
+  onMount(() => {
+    const stop = controller.subscribe((value) => (snapshot = value));
+    void controller.refresh();
+    return stop;
+  });
+</script>
+
+<section aria-label="Original repository history" aria-busy={snapshot.busy}>
+  <BackupCard
+    title="Original repository history"
+    Icon={GitMerge}
+    description="Keep the vault’s existing JJ repository independent, or import its recorded Git ancestry into automatic history."
+  >
+    {#snippet actions()}<Button
+        variant="ghost"
+        size="icon-sm"
+        disabled={snapshot.busy}
+        aria-label="Refresh original history"
+        onclick={() => controller.refresh()}><RefreshCw /></Button
+      >{/snippet}
+    {#if !snapshot.data && snapshot.busy}<div
+        class="loading"
+        role="status"
+        aria-label="Loading original history"
+      >
+        <Skeleton style="height:2rem;width:70%" /><Skeleton
+          style="height:1rem;width:90%"
+        />
+      </div>
+    {:else if snapshot.request}<p>
+        An original import needs reconciliation. Resume that request or stop
+        tracking it. Stopping does not remove ancestry already imported.
+      </p>
+      <div class="actions">
+        <Button disabled={snapshot.busy} onclick={() => controller.resume()}
+          >Resume original import</Button
+        ><Button
+          variant="outline"
+          disabled={snapshot.busy}
+          onclick={() => controller.stop()}>Stop tracking import</Button
+        >
+      </div>
+    {:else if snapshot.data?.source_unavailable}<p>
+        Original history is unavailable. Refresh after the original repository
+        is accessible again.
+      </p>
+    {:else if snapshot.data?.source}<p>
+        Current vault files stay in place. The original repository’s operations
+        and evolution history remain available through the history source
+        selector.
+      </p>
+      <div class="actions">
+        <Button disabled={snapshot.busy} onclick={() => controller.adopt()}
+          ><GitMerge data-icon="inline-start" />Import recorded history</Button
+        >
+      </div>
+    {:else if snapshot.data}<p>
+        No separate original JJ repository was found in this vault.
+      </p>
+    {:else}<p>Refresh to discover recorded repository history.</p>{/if}
+    {#snippet footer()}<p>
+        This action requires automatic local history to be enabled. It does not
+        change remote synchronization settings.
+      </p>{/snippet}
+  </BackupCard>
+</section>
+
+<style>
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-top: 0.75rem;
+  }
+  .loading {
+    display: grid;
+    gap: 0.75rem;
+  }
+  p {
+    margin: 0;
+    font-size: 0.8rem;
+    color: var(--muted-foreground);
+  }
+</style>

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

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

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

@@ -0,0 +1,79 @@
+<script lang="ts">
+  // Adapted from jj-store StoreSettingsCard/Heading/Footer (Apache-2.0).
+  import type { Component, Snippet } from "svelte";
+  import * as Card from "@lapismd/design-core/shadcn/card";
+  let {
+    title,
+    description,
+    Icon,
+    icon,
+    actions,
+    footer,
+    children,
+    padded = true,
+  }: {
+    title: string;
+    description?: string;
+    Icon?: Component;
+    icon?: Snippet;
+    actions?: Snippet;
+    footer?: Snippet;
+    children: Snippet;
+    padded?: boolean;
+  } = $props();
+</script>
+
+<Card.Root
+  size="sm"
+  style="gap:0;padding:0;overflow:hidden;background:var(--background)"
+>
+  <div class="backup-card-header">
+    <Card.Header style="padding:0;display:flex;align-items:center;gap:.75rem">
+      {#if Icon || icon}<span class="backup-card-icon" aria-hidden="true">
+          {#if Icon}<Icon />{:else}{@render icon?.()}{/if}
+        </span>{/if}
+      <div class="backup-card-heading">
+        <Card.Title>{title}</Card.Title>
+        {#if description}<Card.Description>{description}</Card.Description>{/if}
+      </div>
+      {@render actions?.()}
+    </Card.Header>
+  </div>
+  <Card.Content
+    style={`padding:${padded ? ".85rem 1rem" : "0"};min-width:0;background:var(--background)`}
+    >{@render children()}</Card.Content
+  >
+  {#if footer}<Card.Footer
+      style="padding:.85rem 1rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;background:var(--background)"
+    >
+      {@render footer()}
+    </Card.Footer>{/if}
+</Card.Root>
+
+<style>
+  .backup-card-header {
+    padding: 0.85rem 1rem;
+    background: color-mix(in srgb, var(--muted) 35%, var(--card));
+    border-bottom: 1px solid var(--border);
+  }
+  .backup-card-heading {
+    flex: 1;
+    min-width: 0;
+    display: grid;
+    gap: 0.25rem;
+  }
+  .backup-card-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--muted) 60%, transparent);
+  }
+  .backup-card-icon :global(svg) {
+    width: 1.2rem;
+    height: 1.2rem;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Component, Snippet } from "svelte";
+type $$ComponentProps = {
+    title: string;
+    description?: string;
+    Icon?: Component;
+    icon?: Snippet;
+    actions?: Snippet;
+    footer?: Snippet;
+    children: Snippet;
+    padded?: boolean;
+};
+declare const BackupCard: Component<$$ComponentProps, {}, "">;
+type BackupCard = ReturnType<typeof BackupCard>;
+export default BackupCard;