@peaske7/readit 0.1.8 → 0.2.1

package/src/components/CommentInput.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+import { onMount } from "svelte";
+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";
+import Text from "./ui/Text.svelte";
+
+interface Props {
+  selectedText: string | null;
+  onsubmit: (commentText: string) => void;
+  oncancel: () => void;
+}
+
+let { selectedText, onsubmit, oncancel }: Props = $props();
+
+let commentText = $state("");
+let textareaEl: HTMLTextAreaElement | undefined = $state();
+
+let fontClass = $derived(
+  settings.fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif",
+);
+
+onMount(() => {
+  if (textareaEl && window.matchMedia("(pointer: fine)").matches) {
+    textareaEl.focus();
+  }
+});
+
+function handleSubmit() {
+  onsubmit(commentText.trim());
+  commentText = "";
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  if (e.key === "Enter" && e.metaKey) {
+    e.preventDefault();
+    handleSubmit();
+  }
+  if (e.key === "Escape") {
+    oncancel();
+  }
+}
+</script>
+
+{#if selectedText}
+  <div
+    data-comment-input
+    class="border-t border-zinc-200 dark:border-zinc-700 pt-3 pb-2"
+  >
+    <Text variant="caption" as="div" class="italic mb-2 line-clamp-2">
+      "{selectedText}"
+    </Text>
+    <textarea
+      bind:this={textareaEl}
+      bind:value={commentText}
+      placeholder={t("comment.placeholder")}
+      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",
+      )}
+      rows={2}
+      onkeydown={handleKeyDown}
+    ></textarea>
+    <div class="flex justify-end items-center gap-3 mt-2 text-sm">
+      <Button variant="ghost" size="sm" onclick={oncancel}>
+        {t("comment.cancel")}
+      </Button>
+      <Button variant="link" size="sm" onclick={handleSubmit} title="Cmd+Enter">
+        {commentText.trim() ? t("comment.addNote") : t("comment.highlight")}
+      </Button>
+    </div>
+  </div>
+{/if}

package/src/components/CommentListItem.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+import { cn } from "../lib/utils";
+import type { Comment } from "../schema";
+import { t } from "../stores/locale.svelte";
+import InlineEditor from "./InlineEditor.svelte";
+import ActionLink from "./ui/ActionLink.svelte";
+import Text from "./ui/Text.svelte";
+
+interface Props {
+  comment: Comment;
+  onaction?: () => void;
+  onedit: (id: string, newText: string) => void;
+  ondelete: (id: string) => void;
+  onnavigate: (id: string) => void;
+  onstartreanchor: (id: string) => void;
+}
+
+let {
+  comment,
+  onaction,
+  onedit,
+  ondelete,
+  onnavigate,
+  onstartreanchor,
+}: Props = $props();
+
+let isEditing = $state(false);
+
+let isUnresolved = $derived(comment.anchorConfidence === "unresolved");
+let canGoTo = $derived(!isUnresolved);
+
+function handleGoTo() {
+  onnavigate(comment.id);
+  onaction?.();
+}
+
+function handleReanchor() {
+  onstartreanchor(comment.id);
+  onaction?.();
+}
+</script>
+
+<div
+  class={cn(
+    "group px-3 py-2 border-b border-zinc-100 dark:border-zinc-800 last:border-b-0",
+    isUnresolved && "opacity-50",
+  )}
+>
+  <div class="flex items-center gap-1.5 mb-1">
+    <Text variant="caption" as="span" class="italic line-clamp-1">
+      "{comment.selectedText}"
+    </Text>
+    {#if isUnresolved}
+      <Text variant="caption" as="span" class="shrink-0">
+        · {t("commentList.unresolved")}
+      </Text>
+    {/if}
+  </div>
+
+  {#if isEditing}
+    <InlineEditor
+      initialText={comment.comment}
+      onsave={(text) => {
+        onedit(comment.id, text);
+        isEditing = false;
+      }}
+      oncancel={() => (isEditing = false)}
+    />
+  {:else}
+    <Text variant="body" class="line-clamp-2">
+      {comment.comment}
+    </Text>
+
+    <div
+      class="flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-within:opacity-100 [@media(pointer:coarse)]:opacity-100 transition-opacity gap-3 mt-1.5"
+    >
+      <ActionLink onclick={() => (isEditing = true)}>
+        {t("commentList.edit")}
+      </ActionLink>
+      <ActionLink onclick={() => ondelete(comment.id)}>
+        {t("commentList.delete")}
+      </ActionLink>
+      {#if canGoTo}
+        <ActionLink onclick={handleGoTo}>
+          {t("commentList.goTo")}
+        </ActionLink>
+      {/if}
+      {#if isUnresolved}
+        <ActionLink onclick={handleReanchor}>
+          {t("commentList.reanchor")}
+        </ActionLink>
+      {/if}
+    </div>
+  {/if}
+</div>

package/src/components/CommentManager.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+import { Copy, Trash2 } from "lucide-svelte";
+import { generatePrompt } from "../lib/export";
+import type { Comment } from "../schema";
+import { t } from "../stores/locale.svelte";
+import CommentListItem from "./CommentListItem.svelte";
+import Button from "./ui/Button.svelte";
+import Text from "./ui/Text.svelte";
+
+interface Props {
+  comments: Comment[];
+  fileName: string;
+  onclose: () => void;
+  onedit: (id: string, newText: string) => void;
+  ondelete: (id: string) => void;
+  ondeleteall: () => void;
+  onnavigate: (id: string) => void;
+  onstartreanchor: (id: string) => void;
+}
+
+let {
+  comments,
+  fileName,
+  onclose,
+  onedit,
+  ondelete,
+  ondeleteall,
+  onnavigate,
+  onstartreanchor,
+}: Props = $props();
+
+let confirmingDelete = $state(false);
+
+let unresolvedCount = $derived(
+  comments.filter((c) => c.anchorConfidence === "unresolved").length,
+);
+let resolvedCount = $derived(comments.length - unresolvedCount);
+
+let sortedComments = $derived(
+  [...comments].sort((a, b) => {
+    const aUnresolved = a.anchorConfidence === "unresolved";
+    const bUnresolved = b.anchorConfidence === "unresolved";
+    if (aUnresolved === bUnresolved) return 0;
+    return aUnresolved ? 1 : -1;
+  }),
+);
+
+function copyAll() {
+  const text = generatePrompt(comments, fileName);
+  navigator.clipboard.writeText(text);
+}
+</script>
+
+{#if confirmingDelete}
+  <div class="px-3 py-2 border-b border-zinc-100">
+    <Text variant="caption" class="mb-1.5">
+      {t("commentManager.deleteAllConfirm", { count: comments.length })}
+    </Text>
+    <div class="flex gap-3">
+      <Button
+        variant="link"
+        size="sm"
+        class="text-red-600 hover:text-red-700 h-auto p-0 text-xs"
+        onclick={() => {
+          ondeleteall();
+          onclose();
+        }}
+      >
+        {t("commentManager.delete")}
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-auto p-0 text-xs"
+        onclick={() => (confirmingDelete = false)}
+      >
+        {t("commentManager.cancel")}
+      </Button>
+    </div>
+  </div>
+{:else}
+  <Text variant="caption" as="div" class="flex items-center justify-between px-3 py-2 border-b border-zinc-100">
+    <span>
+      {resolvedCount}
+      {#if unresolvedCount > 0}
+        <span>
+          {" "}· {unresolvedCount} {t("commentManager.unresolved")}
+        </span>
+      {/if}
+    </span>
+    <span class="flex items-center gap-1">
+      <button
+        type="button"
+        class="p-1 rounded hover:bg-zinc-100 text-zinc-400 hover:text-zinc-600 transition-colors"
+        onclick={copyAll}
+        title={t("commentManager.copyAllTitle")}
+      >
+        <Copy size={13} />
+      </button>
+      <button
+        type="button"
+        class="p-1 rounded hover:bg-zinc-100 text-zinc-400 hover:text-red-500 transition-colors"
+        onclick={() => (confirmingDelete = true)}
+        title={t("commentManager.deleteAllTitle")}
+      >
+        <Trash2 size={13} />
+      </button>
+    </span>
+  </Text>
+{/if}
+
+<div class="overflow-y-auto max-h-80">
+  {#if sortedComments.length === 0}
+    <Text variant="caption" as="div" class="px-3 py-4 text-center">
+      {t("commentManager.noComments")}
+    </Text>
+  {:else}
+    {#each sortedComments as comment (comment.id)}
+      <CommentListItem
+        {comment}
+        onaction={onclose}
+        {onedit}
+        {ondelete}
+        {onnavigate}
+        {onstartreanchor}
+      />
+    {/each}
+  {/if}
+</div>

package/src/components/CommentNav.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+import { ChevronLeft, ChevronRight } from "lucide-svelte";
+import { onDestroy } from "svelte";
+import { cn } from "../lib/utils";
+import type { Comment } from "../schema";
+import { t } from "../stores/locale.svelte";
+import Button from "./ui/Button.svelte";
+import Text from "./ui/Text.svelte";
+
+const ANIMATION_DURATION_MS = 200;
+
+interface Props {
+  sortedComments: Comment[];
+  currentIndex: number;
+  onprevious: () => void;
+  onnext: () => void;
+}
+
+let { sortedComments, currentIndex, onprevious, onnext }: Props = $props();
+
+let isHovered = $state(false);
+let animating = $state<"prev" | "next" | null>(null);
+let animationTimeout: ReturnType<typeof setTimeout> | undefined;
+
+onDestroy(() => {
+  clearTimeout(animationTimeout);
+});
+
+function handlePrevious() {
+  animating = "prev";
+  onprevious();
+  clearTimeout(animationTimeout);
+  animationTimeout = setTimeout(() => {
+    animating = null;
+  }, ANIMATION_DURATION_MS);
+}
+
+function handleNext() {
+  animating = "next";
+  onnext();
+  clearTimeout(animationTimeout);
+  animationTimeout = setTimeout(() => {
+    animating = null;
+  }, ANIMATION_DURATION_MS);
+}
+
+let totalComments = $derived(sortedComments.length);
+</script>
+
+{#if totalComments > 1}
+  <fieldset
+    class="fixed bottom-6 left-1/2 -translate-x-1/2 z-40"
+    onmouseenter={() => (isHovered = true)}
+    onmouseleave={() => (isHovered = false)}
+  >
+    <div
+      class={cn(
+        "inline-flex items-center gap-1 h-9 px-3 rounded-full",
+        "bg-white/90 dark:bg-zinc-900/90 backdrop-blur-md shadow-lg border border-zinc-200/60 dark:border-zinc-700/60",
+        "transition-opacity duration-150 ease-out",
+        isHovered ? "opacity-100" : "opacity-0",
+      )}
+    >
+      <Button
+        variant="ghost"
+        size="icon"
+        class={cn(
+          "size-7 rounded-full text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300",
+          animating === "prev" &&
+            "scale-90 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300",
+        )}
+        onclick={handlePrevious}
+        title={t("commentNav.previous")}
+      >
+        <ChevronLeft class="w-4 h-4" />
+      </Button>
+
+      <Text
+        variant="body"
+        as="span"
+        class={cn(
+          "px-3 tabular-nums select-none min-w-[4rem] text-center",
+          "transition-transform duration-200 ease-out",
+          animating === "prev" && "-translate-x-0.5",
+          animating === "next" && "translate-x-0.5",
+        )}
+      >
+        {t("commentNav.of", {
+          current: currentIndex + 1,
+          total: totalComments,
+        })}
+      </Text>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        class={cn(
+          "size-7 rounded-full text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300",
+          animating === "next" &&
+            "scale-90 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300",
+        )}
+        onclick={handleNext}
+        title={t("commentNav.next")}
+      >
+        <ChevronRight class="w-4 h-4" />
+      </Button>
+    </div>
+  </fieldset>
+{/if}

package/src/components/DocumentViewer.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+import { onDestroy, onMount } from "svelte";
+import {
+  createHighlighter,
+  type Highlighter,
+} from "../lib/highlight/highlighter";
+import type { HighlightComment } from "../lib/highlight/types";
+import type { Positions } from "../lib/positions";
+import { cn } from "../lib/utils";
+import { AnchorConfidences, type Comment, FontFamilies } from "../schema";
+import { settings } from "../stores/settings.svelte";
+
+let {
+  content,
+  comments,
+  isActive,
+  onTextSelect,
+  onHighlightHover,
+  onHighlightClick,
+  registerHighlighter,
+  unregisterHighlighter,
+  positions,
+}: {
+  content: string;
+  comments: Comment[];
+  isActive: boolean;
+  onTextSelect: (
+    text: string,
+    startOffset: number,
+    endOffset: number,
+    selectionTop: number,
+  ) => void;
+  onHighlightHover?: (commentId: string | undefined) => void;
+  onHighlightClick?: (commentId: string) => void;
+  registerHighlighter: (
+    setFocused: (id: string | undefined) => void,
+    scrollToComment: (id: string) => void,
+  ) => void;
+  unregisterHighlighter?: () => void;
+  positions: Positions;
+} = $props();
+
+let contentEl: HTMLElement | undefined;
+let containerEl: HTMLDivElement | undefined = $state();
+let adapter: Highlighter | null = null;
+let renderedContent = "";
+
+let proseClass = $derived(
+  settings.fontFamily === FontFamilies.SANS_SERIF
+    ? "prose-sans"
+    : "prose-serif",
+);
+
+let mermaidCounter = 0;
+
+async function hydrateMermaid(root: HTMLElement) {
+  const mermaidBlocks = root.querySelectorAll("pre code.language-mermaid");
+  if (mermaidBlocks.length === 0) return;
+
+  requestIdleCallback(async () => {
+    try {
+      const { default: mermaid } = await import("mermaid");
+      const { getMermaidInitConfig } = await import("../lib/mermaid-config");
+      mermaid.initialize(getMermaidInitConfig());
+
+      for (const codeEl of mermaidBlocks) {
+        const preEl = codeEl.parentElement;
+        if (!preEl) continue;
+        const code = codeEl.textContent ?? "";
+        try {
+          const { svg } = await mermaid.render(
+            `mermaid-${mermaidCounter++}`,
+            code,
+          );
+          const wrapper = document.createElement("div");
+          wrapper.className = "mermaid-container";
+          wrapper.innerHTML = svg;
+          preEl.replaceWith(wrapper);
+        } catch {}
+      }
+      if (isActive) requestAnimationFrame(() => positions.cache());
+    } catch {}
+  });
+}
+
+onMount(() => {
+  if (!containerEl) return;
+
+  const existingArticle = document.getElementById(
+    "document-content",
+  ) as HTMLElement | null;
+  if (existingArticle && !existingArticle.dataset.readitAdopted) {
+    existingArticle.dataset.readitAdopted = "true";
+    existingArticle.removeAttribute("id");
+    containerEl.appendChild(existingArticle);
+    contentEl = existingArticle;
+    existingArticle.className = cn("prose", proseClass);
+  } else if (!contentEl) {
+    const article = document.createElement("article");
+    article.className = cn("prose", proseClass);
+    article.innerHTML = content; // eslint-disable-line -- trusted server content
+    containerEl.appendChild(article);
+    contentEl = article;
+  }
+
+  adapter = createHighlighter({
+    root: contentEl!,
+    container: containerEl,
+    onSelect: onTextSelect,
+  });
+
+  registerHighlighter(adapter.setFocused, adapter.scrollToComment);
+
+  if (onHighlightHover) {
+    adapter.onHighlightHover(onHighlightHover);
+  }
+
+  if (onHighlightClick) {
+    adapter.onHighlightClick(onHighlightClick);
+  }
+
+  if (isActive && comments.length > 0) {
+    const hc: HighlightComment[] = comments
+      .filter((c) => c.anchorConfidence !== AnchorConfidences.UNRESOLVED)
+      .map((c) => ({
+        id: c.id,
+        selectedText: c.selectedText,
+        startOffset: c.startOffset,
+        endOffset: c.endOffset,
+      }));
+    adapter.applyHighlights(hc);
+  }
+
+  renderedContent = content;
+
+  void hydrateMermaid(contentEl!);
+
+  const handleTestSelect = (e: Event) => {
+    const { text, startOffset, endOffset } = (e as CustomEvent).detail;
+    onTextSelect(text, startOffset, endOffset, 0);
+  };
+  window.addEventListener("test:select-text", handleTestSelect);
+
+  document.documentElement.dataset.readitReady = "true";
+
+  return () => {
+    window.removeEventListener("test:select-text", handleTestSelect);
+  };
+});
+
+onDestroy(() => {
+  positions.detach();
+  adapter?.dispose();
+  adapter = null;
+  unregisterHighlighter?.();
+});
+
+// Intentionally capture initial value — skip first $effect when already active.
+// svelte-ignore state_referenced_locally
+let initialHighlightsDone = !isActive;
+$effect(() => {
+  if (!isActive || !adapter) return;
+
+  const _comments = comments;
+  void content;
+
+  if (!initialHighlightsDone) {
+    initialHighlightsDone = true;
+    return;
+  }
+
+  if (_comments.length === 0) {
+    adapter.clearHighlights();
+    return;
+  }
+
+  const hc: HighlightComment[] = _comments
+    .filter((c) => c.anchorConfidence !== AnchorConfidences.UNRESOLVED)
+    .map((c) => ({
+      id: c.id,
+      selectedText: c.selectedText,
+      startOffset: c.startOffset,
+      endOffset: c.endOffset,
+    }));
+  adapter.applyHighlights(hc);
+});
+
+$effect(() => {
+  if (!contentEl || !containerEl || !adapter) return;
+
+  if (isActive) {
+    positions.attach(contentEl, containerEl, adapter);
+    positions.cache();
+    return () => positions.detach();
+  }
+});
+
+$effect(() => {
+  const sorted = comments
+    .filter((c) => c.anchorConfidence !== AnchorConfidences.UNRESOLVED)
+    .sort((a, b) => a.startOffset - b.startOffset);
+  positions.setIds(sorted.map((c) => c.id));
+});
+
+$effect(() => {
+  if (!contentEl) return;
+  contentEl.className = cn("prose", proseClass);
+
+  if (renderedContent !== content) {
+    contentEl.innerHTML = content; // eslint-disable-line -- trusted server content
+    renderedContent = content;
+    void hydrateMermaid(contentEl);
+  }
+});
+</script>
+
+<div bind:this={containerEl} class="flex-1 min-w-0">
+</div>