@peaske7/readit 0.1.8 → 0.2.1

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>

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/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>

package/src/components/ReanchorConfirm.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+import { t } from "../stores/locale.svelte";
+import Button from "./ui/Button.svelte";
+import Text from "./ui/Text.svelte";
+
+interface Props {
+  selectionText: string;
+  onconfirm: () => void;
+  oncancel: () => void;
+}
+
+let { selectionText, onconfirm, oncancel }: Props = $props();
+</script>
+
+<div class="border-t border-zinc-200 dark:border-zinc-700 pt-2 pb-3 pl-6">
+  <Text variant="body" class="mb-2">
+    {t("reanchor.question")}
+  </Text>
+  <Text variant="caption" class="italic line-clamp-2 mb-2">
+    "{selectionText}"
+  </Text>
+  <div class="flex gap-3 text-sm">
+    <Button variant="link" size="sm" onclick={onconfirm}>
+      {t("reanchor.confirm")}
+    </Button>
+    <Button variant="ghost" size="sm" onclick={oncancel}>
+      {t("reanchor.cancel")}
+    </Button>
+  </div>
+</div>