@peaske7/readit 0.2.0 → 0.3.0-rc.0

package/src/components/InlineEditor.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+import { cn } from "../lib/utils";
+import { FontFamilies } from "../schema";
+import { t } from "../stores/locale.svelte";
+import { settings } from "../stores/settings.svelte";
+import Button from "./ui/Button.svelte";
+
+interface Props {
+  initialText: string;
+  onsave: (text: string) => void;
+  oncancel: () => void;
+  rows?: number;
+  class?: string;
+}
+
+let {
+  initialText,
+  onsave,
+  oncancel,
+  rows = 2,
+  class: className,
+}: Props = $props();
+
+let fontClass = $derived(
+  settings.fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif",
+);
+
+// svelte-ignore state_referenced_locally — intentionally capture initial prop value
+let editText = $state(initialText);
+let textareaEl: HTMLTextAreaElement | undefined = $state();
+
+$effect(() => {
+  textareaEl?.focus();
+});
+
+function handleSave() {
+  if (editText.trim()) {
+    onsave(editText);
+  }
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === "Enter" && e.metaKey) {
+    handleSave();
+  }
+  if (e.key === "Escape") {
+    oncancel();
+  }
+}
+</script>
+
+<div class="space-y-2">
+  <textarea
+    bind:this={textareaEl}
+    bind:value={editText}
+    class={cn(
+      fontClass,
+      "w-full px-2 py-1.5 text-sm border border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800 resize-none focus:outline-none focus:border-zinc-400 dark:focus:border-zinc-500",
+      className,
+    )}
+    {rows}
+    onkeydown={handleKeydown}
+  ></textarea>
+  <div class="flex gap-3 text-sm">
+    <Button variant="link" size="sm" onclick={handleSave}>
+      {t("editor.save")}
+    </Button>
+    <Button variant="ghost" size="sm" onclick={oncancel}>
+      {t("editor.cancel")}
+    </Button>
+  </div>
+</div>

package/src/components/MarginNote.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+import type { Positions } from "../lib/positions";
+import { cn } from "../lib/utils";
+import { type Comment, FontFamilies } from "../schema";
+import { t } from "../stores/locale.svelte";
+import { settings } from "../stores/settings.svelte";
+import { setHoveredCommentId, ui } from "../stores/ui.svelte";
+import InlineEditor from "./InlineEditor.svelte";
+import ActionLink from "./ui/ActionLink.svelte";
+
+interface Props {
+  comment: Comment;
+  commentIndex?: number;
+  positions: Positions;
+  onedit: (id: string, text: string) => void;
+  ondelete: (id: string) => void;
+  oncopy: (comment: Comment) => void;
+  onnavigate: (commentId: string) => void;
+}
+
+let {
+  comment,
+  commentIndex = 0,
+  positions,
+  onedit,
+  ondelete,
+  oncopy,
+  onnavigate,
+}: Props = $props();
+
+let isEditing = $state(false);
+let articleEl: HTMLElement | undefined = $state();
+
+let isHovered = $derived(ui.hoveredCommentId === comment.id);
+let fontClass = $derived(
+  settings.fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif",
+);
+let hasNote = $derived(comment.comment.trim().length > 0);
+
+$effect(() => {
+  if (articleEl) {
+    positions.register(comment.id, articleEl);
+  }
+
+  return () => {
+    positions.unregister(comment.id);
+  };
+});
+
+function selectedTextClass(hovered: boolean): string {
+  return cn(
+    "text-sm italic mb-1 line-clamp-1 flex items-center gap-1 transition-colors duration-150",
+    hovered
+      ? "text-zinc-600 dark:text-zinc-400"
+      : "text-zinc-400 dark:text-zinc-500",
+  );
+}
+
+function commentTextClass(hovered: boolean): string {
+  return cn(
+    "text-sm whitespace-pre-wrap transition-colors duration-150",
+    hovered
+      ? "text-zinc-800 dark:text-zinc-200"
+      : "text-zinc-500 dark:text-zinc-400",
+  );
+}
+
+function badgeClass(hovered: boolean): string {
+  return cn(
+    "absolute -left-4 top-2 text-xs tabular-nums transition-colors duration-150",
+    hovered
+      ? "text-zinc-600 dark:text-zinc-400"
+      : "text-zinc-400 dark:text-zinc-500",
+  );
+}
+</script>
+
+{#if !hasNote && !isEditing}
+  <!-- Highlight-only (no note): minimal em-dash marker -->
+  <article
+    bind:this={articleEl}
+    class="absolute left-0 right-0 group"
+    style="visibility: hidden; content-visibility: auto; contain-intrinsic-size: auto 80px;"
+    data-comment-id={comment.id}
+    onmouseenter={() => setHoveredCommentId(comment.id)}
+    onmouseleave={() => setHoveredCommentId(undefined)}
+  >
+    <span class={badgeClass(isHovered)}>&mdash;</span>
+
+    <div class="pt-2 pb-2 pl-3">
+      <div
+        class={cn(
+          "flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity",
+          "gap-1.5 duration-150",
+          isHovered && "opacity-100",
+        )}
+      >
+        <ActionLink onclick={() => (isEditing = true)}>
+          {t("marginNote.addNote")}
+        </ActionLink>
+        <span aria-hidden="true">&middot;</span>
+        <ActionLink variant="destructive" onclick={() => ondelete(comment.id)}>
+          {t("marginNote.delete")}
+        </ActionLink>
+      </div>
+    </div>
+  </article>
+{:else}
+  <!-- Comment with note -->
+  <article
+    bind:this={articleEl}
+    class="absolute left-0 right-0 group"
+    style="visibility: hidden"
+    data-comment-id={comment.id}
+    onmouseenter={() => setHoveredCommentId(comment.id)}
+    onmouseleave={() => setHoveredCommentId(undefined)}
+  >
+    <span class={badgeClass(isHovered)}>{commentIndex + 1}</span>
+
+    <div
+      class={cn(
+        "relative border-t border-zinc-100 dark:border-zinc-800 pt-3 pb-2 pl-3 transition-colors duration-150",
+        comment.anchorConfidence === "unresolved" && "opacity-60",
+      )}
+    >
+      {#if !isEditing}
+        <div class={cn(fontClass, selectedTextClass(isHovered))}>
+          <button
+            type="button"
+            onclick={() => onnavigate(comment.id)}
+            class="cursor-pointer hover:underline text-left"
+          >
+            "{comment.selectedText}"
+          </button>
+        </div>
+      {/if}
+
+      {#if isEditing}
+        <InlineEditor
+          initialText={comment.comment}
+          onsave={(text) => {
+            onedit(comment.id, text);
+            isEditing = false;
+          }}
+          oncancel={() => (isEditing = false)}
+        />
+      {:else}
+        <p class={cn(fontClass, commentTextClass(isHovered))}>
+          {comment.comment}
+        </p>
+        <div class="flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity gap-1.5 mt-2">
+          <ActionLink onclick={() => (isEditing = true)}>
+            {t("marginNote.edit")}
+          </ActionLink>
+          <span aria-hidden="true">&middot;</span>
+          <ActionLink variant="destructive" onclick={() => ondelete(comment.id)}>
+            {t("marginNote.delete")}
+          </ActionLink>
+          <span aria-hidden="true">&middot;</span>
+          <ActionLink onclick={() => oncopy(comment)}>
+            {t("marginNote.copy")}
+          </ActionLink>
+        </div>
+      {/if}
+    </div>
+  </article>
+{/if}

package/src/components/MarginNotesContainer.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+import type { Positions } from "../lib/positions";
+import type { Comment } from "../schema";
+import MarginNote from "./MarginNote.svelte";
+
+interface Props {
+  sortedComments: Comment[];
+  positions: Positions;
+  onedit: (id: string, text: string) => void;
+  ondelete: (id: string) => void;
+  oncopy: (comment: Comment) => void;
+  onnavigate: (commentId: string) => void;
+}
+
+let { sortedComments, positions, onedit, ondelete, oncopy, onnavigate }: Props =
+  $props();
+</script>
+
+{#if sortedComments.length > 0}
+  <div class="relative w-64">
+    {#each sortedComments as comment, index (comment.id)}
+      <MarginNote
+        {comment}
+        commentIndex={index}
+        {positions}
+        {onedit}
+        {ondelete}
+        {oncopy}
+        {onnavigate}
+      />
+    {/each}
+  </div>
+{/if}

package/src/components/MermaidEnhancer.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+import { Code2, Image as ImageIcon, Maximize2 } from "lucide-svelte";
+import { mount, unmount } from "svelte";
+import { localeState, t } from "../stores/locale.svelte";
+import MermaidModal from "./MermaidModal.svelte";
+
+interface Props {
+  /** The article element that contains all rendered mermaid containers. */
+  root: HTMLElement | undefined;
+  /** Bumped whenever document content is re-rendered (rescan triggers). */
+  contentVersion: number;
+  /** Called after an inline toggle so margin notes / positions can recache. */
+  notifyContentChanged?: () => void;
+}
+
+let { root, contentVersion, notifyContentChanged }: Props = $props();
+
+let modalOpen = $state(false);
+let modalSvg = $state("");
+let modalSource = $state("");
+
+const ENHANCED_FLAG = "readitMermaidEnhanced";
+
+function decodeSource(container: HTMLElement): string {
+  const encoded = container.dataset.mermaidSource ?? "";
+  try {
+    return decodeURIComponent(encoded);
+  } catch {
+    return encoded;
+  }
+}
+
+function openModal(container: HTMLElement) {
+  const svgEl = container.querySelector("svg");
+  modalSvg = svgEl ? svgEl.outerHTML : "";
+  modalSource = decodeSource(container);
+  modalOpen = true;
+}
+
+function ensureSourceView(container: HTMLElement, source: string): HTMLElement {
+  let pre = container.querySelector<HTMLElement>(".mermaid-source-view");
+  if (pre) return pre;
+  pre = document.createElement("pre");
+  pre.className = "mermaid-source-view";
+  const codeEl = document.createElement("code");
+  codeEl.className = "language-mermaid";
+  codeEl.textContent = source;
+  pre.appendChild(codeEl);
+  pre.style.display = "none";
+  // Insert before the toolbar so the toolbar stays the last child.
+  const toolbar = container.querySelector(".mermaid-toolbar");
+  container.insertBefore(pre, toolbar);
+  return pre;
+}
+
+function toggleInline(container: HTMLElement, source: string): void {
+  const svg = container.querySelector<SVGElement>("svg");
+  const pre = ensureSourceView(container, source);
+  const showingCode = container.dataset.mermaidView === "code";
+  const next = showingCode ? "graph" : "code";
+
+  if (svg) svg.style.display = next === "code" ? "none" : "";
+  pre.style.display = next === "code" ? "block" : "none";
+  container.dataset.mermaidView = next;
+
+  const toolbar = container.querySelector<HTMLElement>(".mermaid-toolbar");
+  const toggleBtn = toolbar?.querySelector<HTMLButtonElement>(
+    '[data-action="toggle"]',
+  );
+  toggleBtn?.setAttribute(
+    "aria-label",
+    next === "code" ? t("mermaid.showDiagram") : t("mermaid.showSource"),
+  );
+  toggleBtn?.setAttribute("aria-pressed", next === "code" ? "true" : "false");
+
+  const handle = (
+    toolbar as (HTMLElement & { _readitHandle?: ToolbarHandle }) | null
+  )?._readitHandle;
+  handle?.remountToggleIcon(next);
+
+  notifyContentChanged?.();
+}
+
+interface ToolbarHandle {
+  cleanup: () => void;
+  remountToggleIcon: (view: "graph" | "code") => void;
+}
+
+function mountToggleIcon(target: HTMLElement, view: "graph" | "code") {
+  // Show "code" icon when graph is visible (click to see code), and vice versa.
+  const Icon = view === "graph" ? Code2 : ImageIcon;
+  return mount(Icon, { target, props: { size: 14 } });
+}
+
+function buildToolbar(container: HTMLElement): HTMLElement {
+  const toolbar = document.createElement("div");
+  toolbar.className = "mermaid-toolbar";
+  toolbar.setAttribute("contenteditable", "false");
+
+  const toggleBtn = document.createElement("button");
+  toggleBtn.type = "button";
+  toggleBtn.dataset.action = "toggle";
+  toggleBtn.setAttribute("aria-label", t("mermaid.showSource"));
+  toggleBtn.setAttribute("aria-pressed", "false");
+
+  const expandBtn = document.createElement("button");
+  expandBtn.type = "button";
+  expandBtn.dataset.action = "expand";
+  expandBtn.setAttribute("aria-label", t("mermaid.expand"));
+
+  toolbar.appendChild(toggleBtn);
+  toolbar.appendChild(expandBtn);
+
+  let toggleIcon = mountToggleIcon(toggleBtn, "graph");
+  const expandIcon = mount(Maximize2, {
+    target: expandBtn,
+    props: { size: 14 },
+  });
+
+  toggleBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleInline(container, decodeSource(container));
+  });
+
+  expandBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    openModal(container);
+  });
+
+  const handle: ToolbarHandle = {
+    cleanup: () => {
+      void unmount(toggleIcon);
+      void unmount(expandIcon);
+    },
+    remountToggleIcon: (view) => {
+      void unmount(toggleIcon);
+      toggleIcon = mountToggleIcon(toggleBtn, view);
+    },
+  };
+  (toolbar as HTMLElement & { _readitHandle?: ToolbarHandle })._readitHandle =
+    handle;
+
+  return toolbar;
+}
+
+function enhance(target: HTMLElement) {
+  const containers = target.querySelectorAll<HTMLElement>(
+    ".mermaid-container[data-mermaid-source]",
+  );
+
+  for (const container of containers) {
+    if (container.dataset[ENHANCED_FLAG] === "true") continue;
+    container.dataset[ENHANCED_FLAG] = "true";
+
+    // Ensure the container can host the absolutely-positioned toolbar.
+    container.style.position = "relative";
+
+    const toolbar = buildToolbar(container);
+    container.appendChild(toolbar);
+  }
+}
+
+function cleanup(target: HTMLElement) {
+  const toolbars = target.querySelectorAll<HTMLElement>(".mermaid-toolbar");
+  for (const tb of toolbars) {
+    (
+      tb as HTMLElement & { _readitHandle?: ToolbarHandle }
+    )._readitHandle?.cleanup();
+    tb.remove();
+  }
+  const enhanced = target.querySelectorAll<HTMLElement>(
+    ".mermaid-container[data-readit-mermaid-enhanced]",
+  );
+  for (const c of enhanced) {
+    delete c.dataset[ENHANCED_FLAG];
+  }
+}
+
+$effect(() => {
+  if (!root) return;
+  // Re-scan whenever contentVersion changes; declared so Svelte tracks it.
+  void contentVersion;
+  enhance(root);
+  return () => {
+    if (root) cleanup(root);
+  };
+});
+
+// Refresh aria-labels on existing imperative toolbars when locale changes.
+$effect(() => {
+  if (!root) return;
+  void localeState.locale;
+  const toolbars = root.querySelectorAll<HTMLElement>(".mermaid-toolbar");
+  for (const tb of toolbars) {
+    const container = tb.closest<HTMLElement>(".mermaid-container");
+    const showingCode = container?.dataset.mermaidView === "code";
+    tb.querySelector<HTMLButtonElement>('[data-action="toggle"]')?.setAttribute(
+      "aria-label",
+      showingCode ? t("mermaid.showDiagram") : t("mermaid.showSource"),
+    );
+    tb.querySelector<HTMLButtonElement>('[data-action="expand"]')?.setAttribute(
+      "aria-label",
+      t("mermaid.expand"),
+    );
+  }
+});
+</script>
+
+<MermaidModal
+  bind:open={modalOpen}
+  svg={modalSvg}
+  source={modalSource}
+  onclose={() => {
+    modalOpen = false;
+  }}
+/>

package/src/components/MermaidModal.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+import { Code2, Image as ImageIcon } from "lucide-svelte";
+import { t } from "../stores/locale.svelte";
+import Dialog from "./ui/Dialog.svelte";
+
+interface Props {
+  open: boolean;
+  svg: string;
+  source: string;
+  onclose: () => void;
+}
+
+let { open = $bindable(false), svg, source, onclose }: Props = $props();
+
+type View = "graph" | "code";
+let view = $state<View>("graph");
+
+// Reset to graph view each time the modal opens so the user always
+// lands on the diagram first.
+$effect(() => {
+  if (open) view = "graph";
+});
+</script>
+
+<Dialog
+  bind:open
+  {onclose}
+  contentClass="w-[90vw] h-[90vh] max-w-[90vw]"
+>
+  {#snippet header()}
+    {t("mermaid.modalTitle")}
+  {/snippet}
+
+  {#snippet headerActions()}
+    <div class="flex items-center gap-1 mr-8">
+      <button
+        type="button"
+        onclick={() => (view = "graph")}
+        aria-pressed={view === "graph"}
+        class="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 aria-pressed:bg-zinc-100 dark:aria-pressed:bg-zinc-800 aria-pressed:text-zinc-900 dark:aria-pressed:text-zinc-100"
+      >
+        <ImageIcon class="w-3.5 h-3.5" />
+        {t("mermaid.viewGraph")}
+      </button>
+      <button
+        type="button"
+        onclick={() => (view = "code")}
+        aria-pressed={view === "code"}
+        class="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 aria-pressed:bg-zinc-100 dark:aria-pressed:bg-zinc-800 aria-pressed:text-zinc-900 dark:aria-pressed:text-zinc-100"
+      >
+        <Code2 class="w-3.5 h-3.5" />
+        {t("mermaid.viewCode")}
+      </button>
+    </div>
+  {/snippet}
+
+  <div class="w-full h-full overflow-auto flex items-center justify-center">
+    {#if view === "graph"}
+      <!-- eslint-disable-next-line -- trusted mermaid render output -->
+      <div class="mermaid-container mermaid-modal-graph">{@html svg}</div>
+    {:else}
+      <pre
+        class="w-full h-full m-0 p-4 text-xs leading-relaxed font-mono text-zinc-800 dark:text-zinc-200 bg-zinc-50 dark:bg-zinc-950 rounded-lg overflow-auto whitespace-pre"
+      >{source}</pre>
+    {/if}
+  </div>
+</Dialog>

package/src/components/RawModal.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+import { Copy } from "lucide-svelte";
+import { app } from "../stores/app.svelte";
+import { t } from "../stores/locale.svelte";
+import Button from "./ui/Button.svelte";
+import Dialog from "./ui/Dialog.svelte";
+import Text from "./ui/Text.svelte";
+
+interface Props {
+  open: boolean;
+  onclose: () => void;
+}
+
+let { open = $bindable(false), onclose }: Props = $props();
+
+type ModalState =
+  | { status: "idle" }
+  | { status: "loading" }
+  | { status: "error"; error: string }
+  | { status: "empty"; path: string }
+  | { status: "success"; content: string; path: string };
+
+let modalState = $state<ModalState>({ status: "idle" });
+
+$effect(() => {
+  if (!open) {
+    modalState = { status: "idle" };
+    return;
+  }
+
+  modalState = { status: "loading" };
+
+  const query = app.activeDocumentPath
+    ? `?path=${encodeURIComponent(app.activeDocumentPath)}`
+    : "";
+
+  fetch(`/api/comments/raw${query}`)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error("Failed to fetch raw comments");
+      }
+      return response.json();
+    })
+    .then((result) => {
+      if (result.content === null) {
+        modalState = { status: "empty", path: result.path };
+      } else {
+        modalState = {
+          status: "success",
+          content: result.content,
+          path: result.path,
+        };
+      }
+    })
+    .catch((err) => {
+      modalState = {
+        status: "error",
+        error: err instanceof Error ? err.message : "Unknown error",
+      };
+    });
+});
+
+async function handleCopy() {
+  if (modalState.status !== "success") return;
+
+  try {
+    await navigator.clipboard.writeText(modalState.content);
+  } catch {}
+}
+</script>
+
+<Dialog bind:open {onclose} contentClass="max-w-2xl max-h-[80vh]">
+  {#snippet header()}
+    {t("rawModal.title")}
+  {/snippet}
+
+  {#snippet headerActions()}
+    {#if modalState.status === "success"}
+      <Button
+        variant="ghost"
+        size="icon"
+        class="size-7"
+        onclick={handleCopy}
+        title={t("rawModal.copyTitle")}
+      >
+        <Copy class="w-4 h-4" />
+      </Button>
+    {/if}
+  {/snippet}
+
+  {#if modalState.status === "success" || modalState.status === "empty"}
+    <div
+      class="px-4 py-2 border-b border-zinc-50 dark:border-zinc-800 text-xs text-zinc-400 dark:text-zinc-500 font-mono truncate -mt-4 -mx-4 mb-4"
+    >
+      {modalState.path}
+    </div>
+  {/if}
+
+  {#if modalState.status === "loading"}
+    <Text variant="caption" class="text-center py-8">
+      {t("rawModal.loading")}
+    </Text>
+  {/if}
+
+  {#if modalState.status === "error"}
+    <Text variant="body" class="text-red-500 text-center py-8">
+      {modalState.error}
+    </Text>
+  {/if}
+
+  {#if modalState.status === "empty"}
+    <Text variant="caption" class="text-center py-8">
+      {t("rawModal.noComments")}
+    </Text>
+  {/if}
+
+  {#if modalState.status === "success"}
+    <Text
+      variant="body"
+      as="pre"
+      class="text-xs font-mono whitespace-pre-wrap break-words leading-relaxed"
+    >
+      {modalState.content}
+    </Text>
+  {/if}
+</Dialog>