@peaske7/readit 0.2.1 → 0.3.0-rc.1

package/src/components/ActionsMenu.svelte

@@ -1,95 +0,0 @@
-<script lang="ts">
-import {
-  ClipboardCopy,
-  FileDown,
-  FileText,
-  MoreHorizontal,
-  RefreshCw,
-  Settings,
-} from "lucide-svelte";
-import { t } from "../stores/locale.svelte";
-import RawModal from "./RawModal.svelte";
-import SettingsModal from "./SettingsModal.svelte";
-import Button from "./ui/Button.svelte";
-import DropdownMenu from "./ui/DropdownMenu.svelte";
-import DropdownMenuItem from "./ui/DropdownMenuItem.svelte";
-import DropdownMenuSeparator from "./ui/DropdownMenuSeparator.svelte";
-
-interface Props {
-  commentCount: number;
-  oncopyall: () => void;
-  onexportjson: () => void;
-  onreload: () => void;
-}
-
-let { commentCount, oncopyall, onexportjson, onreload }: Props = $props();
-
-let menuOpen = $state(false);
-let rawModalOpen = $state(false);
-let settingsOpen = $state(false);
-</script>
-
-<DropdownMenu bind:open={menuOpen} align="end" contentClass="min-w-[160px]">
-  {#snippet trigger()}
-    <Button
-      variant="ghost"
-      size="icon"
-      class="size-7"
-      title={t("actions.ariaLabel")}
-    >
-      <MoreHorizontal class="w-4 h-4" />
-    </Button>
-  {/snippet}
-
-  <DropdownMenuItem
-    onselect={() => {
-      settingsOpen = true;
-      menuOpen = false;
-    }}
-  >
-    <Settings />
-    {t("actions.settings")}
-  </DropdownMenuItem>
-  <DropdownMenuSeparator />
-  <DropdownMenuItem
-    onselect={() => {
-      onreload();
-      menuOpen = false;
-    }}
-  >
-    <RefreshCw />
-    {t("actions.reload")}
-  </DropdownMenuItem>
-  {#if commentCount > 0}
-    <DropdownMenuItem
-      onselect={() => {
-        oncopyall();
-        menuOpen = false;
-      }}
-    >
-      <ClipboardCopy />
-      {t("actions.copyAll")}
-    </DropdownMenuItem>
-    <DropdownMenuItem
-      onselect={() => {
-        onexportjson();
-        menuOpen = false;
-      }}
-    >
-      <FileDown />
-      {t("actions.exportJson")}
-    </DropdownMenuItem>
-    <DropdownMenuItem
-      onselect={() => {
-        rawModalOpen = true;
-        menuOpen = false;
-      }}
-    >
-      <FileText />
-      {t("actions.viewRaw")}
-    </DropdownMenuItem>
-  {/if}
-</DropdownMenu>
-
-<RawModal bind:open={rawModalOpen} onclose={() => (rawModalOpen = false)} />
-<SettingsModal bind:open={settingsOpen} onclose={() => (settingsOpen = false)} />

package/src/components/CommentBadge.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-import { cn } from "../lib/utils";
-import type { Comment } from "../schema";
-import { t } from "../stores/locale.svelte";
-import CommentManager from "./CommentManager.svelte";
-import DropdownMenu from "./ui/DropdownMenu.svelte";
-
-interface Props {
-  comments: Comment[];
-  fileName: string;
-  onedit: (id: string, newText: string) => void;
-  ondelete: (id: string) => void;
-  ondeleteall: () => void;
-  onnavigate: (id: string) => void;
-  onstartreanchor: (id: string) => void;
-}
-
-let {
-  comments,
-  fileName,
-  onedit,
-  ondelete,
-  ondeleteall,
-  onnavigate,
-  onstartreanchor,
-}: Props = $props();
-
-let commentsOpen = $state(false);
-let commentCount = $derived(comments.length);
-</script>
-
-{#if commentCount > 0}
-  <DropdownMenu
-    bind:open={commentsOpen}
-    align="end"
-    contentClass="w-80 max-h-96 overflow-hidden p-0"
-  >
-    {#snippet trigger()}
-      <button
-        type="button"
-        class={cn(
-          "inline-flex items-center gap-1 text-xs tabular-nums select-none transition-colors",
-          commentsOpen
-            ? "text-zinc-600"
-            : "text-zinc-400 hover:text-zinc-600",
-        )}
-        title={commentCount === 1
-          ? t("commentBadge.title", { count: commentCount })
-          : t("commentBadge.titlePlural", { count: commentCount })}
-      >
-        <span class="text-zinc-300">·</span>
-        {commentCount}
-      </button>
-    {/snippet}
-
-    <CommentManager
-      {comments}
-      {fileName}
-      onclose={() => (commentsOpen = false)}
-      {onedit}
-      {ondelete}
-      {ondeleteall}
-      {onnavigate}
-      {onstartreanchor}
-    />
-  </DropdownMenu>
-{/if}

package/src/components/CommentErrorBanner.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-import { AlertCircle, X } from "lucide-svelte";
-
-interface Props {
-  error: string | null;
-  ondismiss: () => void;
-}
-
-let { error, ondismiss }: Props = $props();
-</script>
-
-{#if error}
-  <div
-    role="alert"
-    aria-live="polite"
-    class="fixed top-24 left-1/2 -translate-x-1/2 z-40 w-full max-w-3xl px-4 pointer-events-none"
-  >
-    <div
-      class="flex items-start gap-3 px-4 py-2 text-sm bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-900 text-red-900 dark:text-red-200 rounded-lg shadow-lg pointer-events-auto"
-    >
-      <AlertCircle class="size-4 shrink-0 mt-0.5" />
-      <p class="flex-1 select-text break-words">{error}</p>
-      <button
-        type="button"
-        onclick={ondismiss}
-        aria-label="Dismiss"
-        class="shrink-0 rounded p-1 -mr-1 hover:bg-red-100 dark:hover:bg-red-900/40 transition-colors"
-      >
-        <X class="size-4" />
-      </button>
-    </div>
-  </div>
-{/if}

package/src/components/CommentInput.svelte

@@ -1,75 +0,0 @@
-<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

@@ -1,95 +0,0 @@
-<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

@@ -1,129 +0,0 @@
-<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

@@ -1,109 +0,0 @@
-<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}