@peaske7/readit 0.2.0 → 0.3.0-rc.0

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,233 @@
+<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";
+import MermaidEnhancer from "./MermaidEnhancer.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 = $state();
+let containerEl: HTMLDivElement | undefined = $state();
+let adapter: Highlighter | null = null;
+let renderedContent = "";
+let contentVersion = $state(0);
+
+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.dataset.mermaidSource = encodeURIComponent(code);
+          // eslint-disable-next-line -- trusted mermaid render output
+          wrapper.innerHTML = svg;
+          preEl.replaceWith(wrapper);
+        } catch {}
+      }
+      contentVersion++;
+      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;
+  contentVersion++;
+
+  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;
+    contentVersion++;
+    void hydrateMermaid(contentEl);
+  }
+});
+</script>
+
+<div bind:this={containerEl} class="flex-1 min-w-0">
+</div>
+
+<MermaidEnhancer
+  root={contentEl}
+  {contentVersion}
+  notifyContentChanged={() => {
+    if (isActive) requestAnimationFrame(() => positions.cache());
+  }}
+/>

package/src/components/FloatingComment.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+import { cn } from "../lib/utils";
+import { type Comment, FontFamilies } from "../schema";
+import { t } from "../stores/locale.svelte";
+import { settings } from "../stores/settings.svelte";
+import { setActiveCommentId, ui } from "../stores/ui.svelte";
+import InlineEditor from "./InlineEditor.svelte";
+import ActionLink from "./ui/ActionLink.svelte";
+import Text from "./ui/Text.svelte";
+
+interface Props {
+  comment: Comment;
+  onedit: (id: string, text: string) => void;
+  ondelete: (id: string) => void;
+  oncopy: (comment: Comment) => void;
+  onnavigate: (commentId: string) => void;
+}
+
+let { comment, onedit, ondelete, oncopy, onnavigate }: Props = $props();
+
+let isEditing = $state(false);
+let fontClass = $derived(
+  settings.fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif",
+);
+let hasNote = $derived(comment.comment.trim().length > 0);
+
+function dismiss() {
+  setActiveCommentId(undefined);
+}
+
+function handleWindowKeydown(e: KeyboardEvent) {
+  if (ui.activeCommentId && e.key === "Escape") {
+    dismiss();
+  }
+}
+</script>
+
+<svelte:window onkeydown={handleWindowKeydown} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- Backdrop -->
+<div
+  class="fixed inset-0 z-40 lg:hidden"
+  onclick={dismiss}
+></div>
+
+<!-- Floating panel -->
+<div
+  class="fixed bottom-16 left-4 right-4 z-50 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded-lg shadow-lg p-4 lg:hidden"
+>
+  <!-- Selected text -->
+  <div class={cn(fontClass, "text-sm italic text-zinc-500 dark:text-zinc-400 mb-2 line-clamp-2")}>
+    <button
+      type="button"
+      onclick={() => {
+        onnavigate(comment.id);
+        dismiss();
+      }}
+      class="cursor-pointer hover:underline text-left"
+    >
+      "{comment.selectedText}"
+    </button>
+  </div>
+
+  {#if isEditing}
+    <InlineEditor
+      initialText={comment.comment}
+      onsave={(text) => {
+        onedit(comment.id, text);
+        isEditing = false;
+      }}
+      oncancel={() => (isEditing = false)}
+    />
+  {:else}
+    <!-- Comment text -->
+    {#if hasNote}
+      <p class={cn(fontClass, "text-sm text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap mb-3")}>
+        {comment.comment}
+      </p>
+    {:else}
+      <Text variant="caption" class="mb-3 italic">
+        {t("marginNote.addNote")}
+      </Text>
+    {/if}
+
+    <!-- Actions -->
+    <div class="flex items-center text-xs text-zinc-400 gap-3 pt-2 border-t border-zinc-100 dark:border-zinc-800">
+      <ActionLink onclick={() => (isEditing = true)}>
+        {hasNote ? t("marginNote.edit") : t("marginNote.addNote")}
+      </ActionLink>
+      <span aria-hidden="true">&middot;</span>
+      <ActionLink variant="destructive" onclick={() => { ondelete(comment.id); dismiss(); }}>
+        {t("marginNote.delete")}
+      </ActionLink>
+      {#if hasNote}
+        <span aria-hidden="true">&middot;</span>
+        <ActionLink onclick={() => oncopy(comment)}>
+          {t("marginNote.copy")}
+        </ActionLink>
+      {/if}
+      <span class="flex-1"></span>
+      <ActionLink onclick={dismiss}>
+        {t("comment.cancel")}
+      </ActionLink>
+    </div>
+  {/if}
+</div>

package/src/components/Header.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+import type { Comment } from "../schema";
+import { t } from "../stores/locale.svelte";
+import ActionsMenu from "./ActionsMenu.svelte";
+import CommentBadge from "./CommentBadge.svelte";
+import Text from "./ui/Text.svelte";
+
+interface Props {
+  fileName: string;
+  comments: Comment[];
+  hasReanchorTarget: boolean;
+  oncopyall: () => void;
+  onexportjson: () => void;
+  onreload: () => void;
+  onedit: (id: string, newText: string) => void;
+  ondelete: (id: string) => void;
+  ondeleteall: () => void;
+  onnavigate: (id: string) => void;
+  onstartreanchor: (id: string) => void;
+}
+
+let {
+  fileName,
+  comments,
+  hasReanchorTarget,
+  oncopyall,
+  onexportjson,
+  onreload,
+  onedit,
+  ondelete,
+  ondeleteall,
+  onnavigate,
+  onstartreanchor,
+}: Props = $props();
+
+let commentCount = $derived(comments.length);
+</script>
+
+<header class="sticky top-0 z-50 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm border-b border-zinc-100 dark:border-zinc-800">
+  <div class="px-6 py-3 flex items-center justify-between max-w-7xl mx-auto">
+    <div class="flex items-center gap-3">
+      <Text variant="title" as="h1">
+        readit
+      </Text>
+      <span class="text-zinc-200 dark:text-zinc-700 font-light">&mdash;</span>
+      <Text variant="caption" as="span" class="truncate max-w-[200px]">
+        {fileName}
+      </Text>
+    </div>
+
+    <div class="flex items-center gap-3">
+      {#if hasReanchorTarget}
+        <Text variant="caption" as="span" class="italic">
+          {t("header.selectTextToReanchor")}
+        </Text>
+      {/if}
+
+      <CommentBadge
+        {comments}
+        {fileName}
+        {onedit}
+        {ondelete}
+        {ondeleteall}
+        {onnavigate}
+        {onstartreanchor}
+      />
+
+      <ActionsMenu
+        {commentCount}
+        {oncopyall}
+        {onexportjson}
+        {onreload}
+      />
+    </div>
+  </div>
+</header>