@lapis-notes/history 0.1.4 → 0.2.0

package/dist/repository/components/blame/RepositoryBlameCommitTitle.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+  import * as HoverCard from "@lapismd/design-core/shadcn/hover-card";
+  import { FileChangeStats } from "@lapismd/design-core/diff";
+  import { RelativeTime } from "@lapismd/design-core/shadcn/relative-time";
+  import GitCommitHorizontal from "@lucide/svelte/icons/git-commit-horizontal";
+  import RepositoryAuthorAvatar from "../RepositoryAuthorAvatar.svelte";
+  import type { BlameCommit } from "../../controllers/blame-model.js";
+  let {
+    commit,
+    continued = false,
+    now,
+    stats,
+    onOpen,
+  }: {
+    commit: BlameCommit;
+    continued?: boolean;
+    now?: number;
+    stats?: { additions: number; deletions: number };
+    onOpen?: (commit: string) => void;
+  } = $props();
+  const title = $derived(
+    commit.description.split(/\r?\n/u)[0] || "(no description)",
+  );
+  let open = $state(false);
+  function openCommit() {
+    open = false;
+    onOpen?.(commit.id);
+  }
+</script>
+
+<span class="commit-title">
+  <HoverCard.Root bind:open openDelay={250} closeDelay={150}>
+    <HoverCard.Trigger>
+      {#snippet child({ props })}
+        <button
+          {...props}
+          type="button"
+          class="commit-title__trigger"
+          aria-label={`${title} — ${commit.author.name}${continued ? " (continued)" : ""}`}
+          onclick={openCommit}>{title}</button
+        >
+      {/snippet}
+    </HoverCard.Trigger>
+    <HoverCard.Content
+      align="start"
+      side="bottom"
+      sideOffset={8}
+      style="width:min(26rem, calc(100vw - 2rem));padding:0;"
+    >
+      <section class="commit-card" aria-label="Commit details">
+        <div class="commit-card__summary">
+          <GitCommitHorizontal aria-hidden="true" />
+          <div class="commit-card__message">
+            <button
+              type="button"
+              class="commit-card__title"
+              aria-label={`Open commit details: ${title}`}
+              disabled={!onOpen}
+              onclick={openCommit}>{title}</button
+            >
+            {#if stats}
+              <div class="commit-card__stats">
+                <FileChangeStats
+                  additions={stats.additions}
+                  deletions={stats.deletions}
+                />
+                {#if stats.additions + stats.deletions > 0}
+                  <span class="commit-card__delta" aria-hidden="true">
+                    {#each Array(5) as _, index}
+                      <i
+                        data-added={index <
+                          Math.round(
+                            (5 * stats.additions) /
+                              (stats.additions + stats.deletions),
+                          ) || undefined}
+                      ></i>
+                    {/each}
+                  </span>
+                {/if}
+              </div>
+            {/if}
+          </div>
+        </div>
+        <footer>
+          <RepositoryAuthorAvatar
+            name={commit.committer.name}
+            email={commit.committer.email}
+            size="xs"
+          />
+          <span
+            ><b>{commit.committer.name}</b>
+            <span class="commit-card__time"
+              >committed <RelativeTime
+                timestamp={Number(commit.committer.timestamp.millis)}
+                {now}
+              /></span
+            ></span
+          >
+        </footer>
+      </section>
+    </HoverCard.Content>
+  </HoverCard.Root>
+</span>
+
+<style>
+  .commit-title {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+  }
+  .commit-title__trigger {
+    appearance: none;
+    border: 0;
+    padding: 0;
+    min-width: 0;
+    width: 100%;
+    color: inherit;
+    background: transparent;
+    text-align: left;
+    font: inherit;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .commit-title__trigger:hover {
+    color: var(--primary);
+    text-decoration: underline;
+  }
+  .commit-title__trigger:focus-visible {
+    outline: 2px solid var(--ring);
+  }
+  .commit-card {
+    font-family: var(--font-sans, sans-serif);
+  }
+  .commit-card__summary {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 1.25rem;
+  }
+  .commit-card__summary > :global(svg) {
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+    margin-top: 0.25rem;
+    color: var(--muted-foreground);
+  }
+  .commit-card__message {
+    flex: 1;
+    min-width: 0;
+  }
+  .commit-card__title {
+    appearance: none;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    text-align: left;
+    cursor: pointer;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    font-family: var(--font-mono, monospace);
+    font-size: 1rem;
+    line-height: 1.4;
+    font-weight: 600;
+  }
+  .commit-card__title:hover {
+    color: var(--primary);
+    text-decoration: underline;
+  }
+  .commit-card__title:focus-visible {
+    color: var(--primary);
+    outline: 2px solid var(--ring);
+  }
+  .commit-card__stats {
+    display: flex;
+    align-items: center;
+    margin-top: 0.75rem;
+    gap: 0.5rem;
+  }
+  .commit-card__delta {
+    display: inline-flex;
+    gap: 2px;
+  }
+  .commit-card__delta i {
+    width: 0.5rem;
+    height: 0.5rem;
+    background: var(--ui-diff-stat-removed);
+  }
+  .commit-card__delta i[data-added] {
+    background: var(--ui-diff-stat-added);
+  }
+  footer {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 1.25rem;
+    border-top: 1px solid var(--border);
+  }
+  footer > span {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .commit-card__time {
+    color: var(--muted-foreground);
+  }
+</style>

package/dist/repository/components/blame/RepositoryBlameCommitTitle.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { BlameCommit } from "../../controllers/blame-model.js";
+type $$ComponentProps = {
+    commit: BlameCommit;
+    continued?: boolean;
+    now?: number;
+    stats?: {
+        additions: number;
+        deletions: number;
+    };
+    onOpen?: (commit: string) => void;
+};
+declare const RepositoryBlameCommitTitle: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryBlameCommitTitle = ReturnType<typeof RepositoryBlameCommitTitle>;
+export default RepositoryBlameCommitTitle;

package/dist/repository/components/blame/RepositoryBlameGroup.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import type { TokenLine } from "@lapismd/design-core/shadcn/code-block";
+  import type { BlameCommit } from "../../controllers/blame-model.js";
+  import RepositoryAuthorAvatar from "../RepositoryAuthorAvatar.svelte";
+  import { RelativeTime } from "@lapismd/design-core/shadcn/relative-time";
+  import type { BlameChunk } from "../../controllers/blame-chunks.js";
+  import RepositoryBlameCommitTitle from "./RepositoryBlameCommitTitle.svelte";
+  let {
+    chunk,
+    lines,
+    tokens,
+    commit,
+    now,
+    pending,
+    onOpen,
+    stats,
+    wrap,
+  }: {
+    chunk: BlameChunk;
+    lines: string[];
+    tokens: TokenLine[];
+    commit?: BlameCommit;
+    now?: number;
+    pending: boolean;
+    onOpen?: (commit: string) => void;
+    stats?: { additions: number; deletions: number };
+    wrap: boolean;
+  } = $props();
+</script>
+
+<div
+  class="blame-group"
+  data-continued={chunk.continued || undefined}
+  data-first={chunk.start === 1 || undefined}
+  data-wrap={wrap}
+>
+  {#if chunk.end === lines.length + 1}<div
+      class="blame-group__end-divider"
+      aria-hidden="true"
+    ></div>{/if}
+  <div class="blame-group__gutter">
+    <div
+      class="blame-group__origin"
+      aria-label={`Origin for lines ${chunk.start}–${chunk.end - 1}${chunk.continued ? " (continued)" : ""}`}
+    >
+      {#if commit}
+        <RepositoryAuthorAvatar
+          name={commit.author.name}
+          email={commit.author.email}
+          size="xs"
+        />
+        <span class="blame-group__author" title={commit.author.name}
+          >{commit.author.name}</span
+        >
+        <RepositoryBlameCommitTitle
+          {commit}
+          {stats}
+          {now}
+          {onOpen}
+          continued={chunk.continued}
+        />
+        <span class="blame-group__time"
+          ><RelativeTime
+            timestamp={Number(commit.author.timestamp.millis)}
+            {now}
+          /></span
+        >
+      {:else if pending}
+        <span
+          class="blame-group__loading"
+          role="status"
+          aria-label={`Loading origin for lines ${chunk.start}–${chunk.end - 1}`}
+          ><Skeleton style="width:100%;height:0.8rem" /></span
+        >
+      {:else}
+        <span class="blame-group__unknown">Origin unavailable</span>
+      {/if}
+    </div>
+  </div>
+  <div class="blame-group__source">
+    {#each lines.slice(chunk.start - 1, chunk.end - 1) as line, index (index)}
+      {@const number = chunk.start + index}
+      <div class="blame-group__line" data-line={number}>
+        <span class="blame-group__number" aria-label={`Line ${number}`}
+          >{number}</span
+        >
+        <code
+          >{#each tokens[number - 1] ?? [] as token, ti (ti)}{line.slice(
+              ti ? tokens[number - 1]![ti - 1]!.end : 0,
+              token.start,
+            )}<span class={`ui-code-token-${token.type}`}
+              >{line.slice(token.start, token.end)}</span
+            >{/each}{line.slice(tokens[number - 1]?.at(-1)?.end ?? 0) ||
+            (line ? "" : "\u200b")}</code
+        >
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .blame-group {
+    position: relative;
+    display: grid;
+    grid-template-columns: min(22rem, 45cqw) minmax(0, 1fr);
+  }
+  .blame-group__end-divider {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 2;
+    border-bottom: 1px solid var(--border);
+    pointer-events: none;
+  }
+  .blame-group__gutter {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background: var(--background);
+    box-shadow: inset 0 1px 0 var(--border);
+    font-family: var(--font-sans, sans-serif);
+  }
+  .blame-group__origin {
+    position: sticky;
+    top: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    height: 28px;
+    box-sizing: border-box;
+    padding: 0 0.5rem;
+  }
+  .blame-group__source {
+    min-width: 0;
+    box-shadow: inset 0 1px 0 var(--border);
+  }
+  .blame-group[data-first] .blame-group__gutter {
+    box-shadow: none;
+  }
+  .blame-group[data-first] .blame-group__source {
+    box-shadow: none;
+  }
+  .blame-group__author {
+    max-width: 4.5rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 0.75rem;
+  }
+  .blame-group__time {
+    flex: none;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+  }
+  .blame-group__loading {
+    width: 100%;
+    padding: 0 0.5rem;
+  }
+  .blame-group__unknown {
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+  }
+  .blame-group__line {
+    display: flex;
+    min-height: 28px;
+    line-height: 28px;
+    white-space: pre;
+  }
+  .blame-group__number {
+    width: max(3rem, calc(var(--blame-line-digits, 3) * 1ch + 1rem));
+    flex: none;
+    text-align: right;
+    padding-right: 0.75rem;
+    color: var(--muted-foreground);
+    user-select: none;
+  }
+  code {
+    min-width: 0;
+    flex: 1;
+    font: inherit;
+    tab-size: 4;
+    padding-right: 1rem;
+  }
+  .blame-group[data-wrap="true"] code {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+</style>

package/dist/repository/components/blame/RepositoryBlameGroup.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { TokenLine } from "@lapismd/design-core/shadcn/code-block";
+import type { BlameCommit } from "../../controllers/blame-model.js";
+import type { BlameChunk } from "../../controllers/blame-chunks.js";
+type $$ComponentProps = {
+    chunk: BlameChunk;
+    lines: string[];
+    tokens: TokenLine[];
+    commit?: BlameCommit;
+    now?: number;
+    pending: boolean;
+    onOpen?: (commit: string) => void;
+    stats?: {
+        additions: number;
+        deletions: number;
+    };
+    wrap: boolean;
+};
+declare const RepositoryBlameGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryBlameGroup = ReturnType<typeof RepositoryBlameGroup>;
+export default RepositoryBlameGroup;

package/dist/repository/components/blame/RepositoryBlamePanel.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+  import RepositorySkeleton from "../RepositorySkeleton.svelte";
+  import { onMount } from "svelte";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import RefreshCwIcon from "@lucide/svelte/icons/refresh-cw";
+  import WrapTextIcon from "@lucide/svelte/icons/wrap-text";
+  import { Toggle } from "@lapismd/design-core/shadcn/toggle";
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+  import {
+    readBlameWrap,
+    saveBlameWrap,
+  } from "../../controllers/blame-preferences.js";
+  import type { BlameController } from "../../controllers/blame-controller.js";
+  import type { BlameState } from "../../controllers/blame-model.js";
+  import RepositoryBlameView from "./RepositoryBlameView.svelte";
+  import RepositoryFileTitle from "../RepositoryFileTitle.svelte";
+  import RepositoryIdentifiers from "../RepositoryIdentifiers.svelte";
+  import { encodeJjChangeId } from "../../controllers/graph/repository-log-graph.js";
+  import RepositoryShell from "../RepositoryShell.svelte";
+  let {
+    controller,
+    copyText,
+    onOpen,
+    commitStats,
+  }: {
+    controller: BlameController;
+    copyText(value: string): Promise<void>;
+    onOpen(commit: string): void;
+    commitStats?: Readonly<
+      Record<string, { additions: number; deletions: number }>
+    >;
+  } = $props();
+  let viewState = $state<BlameState>({ status: "loading", busy: false });
+  let wrap = $state(readBlameWrap());
+  onMount(() =>
+    controller.subscribe((value) => {
+      viewState = value;
+    }),
+  );
+</script>
+
+<RepositoryShell>
+  <section
+    class="blame-panel"
+    aria-label="File blame"
+    aria-busy={viewState.busy}
+  >
+    <header>
+      <span class="file-title"
+        ><RepositoryFileTitle path={viewState.selection?.path} /></span
+      >
+      <RepositoryIdentifiers
+        {copyText}
+        commitId={viewState.selection?.commit}
+        changeId={encodeJjChangeId(
+          viewState.progress?.commits[viewState.selection?.commit ?? ""]
+            ?.change_id ?? "",
+        )}
+        placement="inline"
+      />
+      <Tooltip.Provider>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Toggle
+                {...props}
+                pressed={wrap}
+                onPressedChange={(pressed) => {
+                  wrap = pressed;
+                  saveBlameWrap(pressed);
+                }}
+                size="sm"
+                class="wrap-toggle"
+                aria-label="Wrap text"
+                ><WrapTextIcon aria-hidden="true" /></Toggle
+              >
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content role="tooltip">Wrap text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        aria-label="Refresh blame"
+        disabled={viewState.busy}
+        onclick={() => controller.refresh()}><RefreshCwIcon /></Button
+      >
+    </header>
+    {#if viewState.status === "failed"}<p role="status">
+        Blame is unavailable. Refresh to try again.
+      </p>{/if}
+    <div class="blame-body">
+      {#if viewState.contents === undefined && viewState.busy}<RepositorySkeleton
+          kind="blame"
+          label="Loading file blame…"
+        />
+      {:else if viewState.contents !== undefined}
+        <RepositoryBlameView
+          contents={viewState.contents}
+          path={viewState.selection?.path ?? ""}
+          view={viewState}
+          {onOpen}
+          {commitStats}
+          {wrap}
+        />
+      {/if}
+    </div>
+  </section>
+</RepositoryShell>
+
+<style>
+  .blame-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+    font-size: 0.875rem;
+  }
+  header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .file-title {
+    flex: 1;
+    min-width: 0;
+  }
+  header :global(.wrap-toggle) {
+    width: 1.75rem;
+    min-width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+  }
+  p {
+    padding: 0.75rem;
+    margin: 0;
+    color: var(--muted-foreground);
+  }
+  .blame-body {
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
+  }
+</style>

package/dist/repository/components/blame/RepositoryBlamePanel.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { BlameController } from "../../controllers/blame-controller.js";
+type $$ComponentProps = {
+    controller: BlameController;
+    copyText(value: string): Promise<void>;
+    onOpen(commit: string): void;
+    commitStats?: Readonly<Record<string, {
+        additions: number;
+        deletions: number;
+    }>>;
+};
+declare const RepositoryBlamePanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryBlamePanel = ReturnType<typeof RepositoryBlamePanel>;
+export default RepositoryBlamePanel;