@peaske7/readit 0.2.0 → 0.2.1

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>

package/src/components/SettingsModal.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+import { Check, ChevronDown } from "lucide-svelte";
+import { type Locale, Locales } from "../lib/i18n";
+import { cn } from "../lib/utils";
+import { FontFamilies, type FontFamily, ThemeModes } from "../schema";
+import { localeState, setLocale, t } from "../stores/locale.svelte";
+import {
+  settings,
+  updateFontFamily,
+  updateThemeMode,
+} from "../stores/settings.svelte";
+import ShortcutList from "./ShortcutList.svelte";
+import Dialog from "./ui/Dialog.svelte";
+import DropdownMenu from "./ui/DropdownMenu.svelte";
+import DropdownMenuItem from "./ui/DropdownMenuItem.svelte";
+import Text from "./ui/Text.svelte";
+
+interface Props {
+  open: boolean;
+  onclose: () => void;
+}
+
+let { open = $bindable(false), onclose }: Props = $props();
+
+const LOCALE_OPTIONS = [
+  { value: Locales.JA, label: "日本語" },
+  { value: Locales.EN, label: "English" },
+] as const;
+
+let themeOptions = $derived([
+  { value: ThemeModes.SYSTEM, label: t("settings.theme.system") },
+  { value: ThemeModes.LIGHT, label: t("settings.theme.light") },
+  { value: ThemeModes.DARK, label: t("settings.theme.dark") },
+]);
+
+let fontOptions = $derived([
+  {
+    value: FontFamilies.SERIF,
+    label: t("settings.font.serif"),
+    fontClass: "font-serif",
+  },
+  {
+    value: FontFamilies.SANS_SERIF,
+    label: t("settings.font.sansSerif"),
+    fontClass: "font-sans",
+  },
+]);
+
+let activeTheme = $derived(
+  themeOptions.find((o) => o.value === settings.themeMode) ?? themeOptions[0],
+);
+let activeFont = $derived(
+  fontOptions.find((o) => o.value === settings.fontFamily) ?? fontOptions[0],
+);
+let activeLocale = $derived(
+  LOCALE_OPTIONS.find((o) => o.value === localeState.locale) ??
+    LOCALE_OPTIONS[0],
+);
+
+const triggerClassName = cn(
+  "inline-flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-sm",
+  "border border-zinc-200 dark:border-zinc-700",
+  "bg-white dark:bg-zinc-800",
+  "text-zinc-700 dark:text-zinc-300",
+  "hover:bg-zinc-50 dark:hover:bg-zinc-700/50",
+  "transition-colors cursor-pointer",
+);
+
+let themeDropdownOpen = $state(false);
+let fontDropdownOpen = $state(false);
+let localeDropdownOpen = $state(false);
+</script>
+
+<Dialog bind:open {onclose} contentClass="max-w-md">
+  {#snippet header()}
+    {t("settings.title")}
+  {/snippet}
+
+  <div class="space-y-4">
+    <div>
+      <Text variant="overline" as="h3" class="mb-3">
+        {t("settings.theme")}
+      </Text>
+      <DropdownMenu bind:open={themeDropdownOpen} align="start" contentClass="min-w-[160px]">
+        {#snippet trigger()}
+          <button type="button" class={triggerClassName}>
+            {#if activeTheme.value === ThemeModes.SYSTEM}
+              <span
+                class="size-2.5 rounded-full bg-gradient-to-r from-amber-400 to-indigo-400"
+              ></span>
+            {:else}
+              <span
+                class={cn(
+                  "size-2.5 rounded-full",
+                  activeTheme.value === ThemeModes.LIGHT
+                    ? "bg-amber-400"
+                    : "bg-indigo-400",
+                )}
+              ></span>
+            {/if}
+            <span
+              class="text-[10px] font-semibold leading-none text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 rounded px-1 py-0.5"
+            >Aa</span>
+            <span>{activeTheme.label}</span>
+            <ChevronDown class="size-3 text-zinc-400 dark:text-zinc-500" />
+          </button>
+        {/snippet}
+
+        {#each themeOptions as option (option.value)}
+          <DropdownMenuItem
+            onselect={() => {
+              updateThemeMode(option.value);
+              themeDropdownOpen = false;
+            }}
+            class="flex items-center gap-2"
+          >
+            {#if option.value === ThemeModes.SYSTEM}
+              <span
+                class="size-2.5 rounded-full bg-gradient-to-r from-amber-400 to-indigo-400"
+              ></span>
+            {:else}
+              <span
+                class={cn(
+                  "size-2.5 rounded-full",
+                  option.value === ThemeModes.LIGHT
+                    ? "bg-amber-400"
+                    : "bg-indigo-400",
+                )}
+              ></span>
+            {/if}
+            <span
+              class="text-[10px] font-semibold leading-none text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 rounded px-1 py-0.5"
+            >Aa</span>
+            <span class="flex-1">{option.label}</span>
+            {#if settings.themeMode === option.value}
+              <Check class="size-3.5 text-zinc-500 dark:text-zinc-400" />
+            {/if}
+          </DropdownMenuItem>
+        {/each}
+      </DropdownMenu>
+    </div>
+
+    <div>
+      <Text variant="overline" as="h3" class="mb-3">
+        {t("settings.font")}
+      </Text>
+      <DropdownMenu bind:open={fontDropdownOpen} align="start" contentClass="min-w-[160px]">
+        {#snippet trigger()}
+          <button type="button" class={triggerClassName}>
+            <span
+              class={cn(
+                "text-[10px] font-semibold leading-none text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 rounded px-1 py-0.5",
+                activeFont.fontClass,
+              )}
+            >Aa</span>
+            <span>{activeFont.label}</span>
+            <ChevronDown class="size-3 text-zinc-400 dark:text-zinc-500" />
+          </button>
+        {/snippet}
+
+        {#each fontOptions as option (option.value)}
+          <DropdownMenuItem
+            onselect={() => {
+              updateFontFamily(option.value as FontFamily);
+              fontDropdownOpen = false;
+            }}
+            class="flex items-center gap-2"
+          >
+            <span
+              class={cn(
+                "text-[10px] font-semibold leading-none text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 rounded px-1 py-0.5",
+                option.fontClass,
+              )}
+            >Aa</span>
+            <span class="flex-1">{option.label}</span>
+            {#if settings.fontFamily === option.value}
+              <Check class="size-3.5 text-zinc-500 dark:text-zinc-400" />
+            {/if}
+          </DropdownMenuItem>
+        {/each}
+      </DropdownMenu>
+    </div>
+
+    <div>
+      <Text variant="overline" as="h3" class="mb-3">
+        {t("settings.language")}
+      </Text>
+      <DropdownMenu bind:open={localeDropdownOpen} align="start" contentClass="min-w-[160px]">
+        {#snippet trigger()}
+          <button type="button" class={triggerClassName}>
+            <span>{activeLocale.label}</span>
+            <ChevronDown class="size-3 text-zinc-400 dark:text-zinc-500" />
+          </button>
+        {/snippet}
+
+        {#each LOCALE_OPTIONS as option (option.value)}
+          <DropdownMenuItem
+            onselect={() => {
+              setLocale(option.value as Locale);
+              localeDropdownOpen = false;
+            }}
+            class="flex items-center gap-2"
+          >
+            <span class="flex-1">{option.label}</span>
+            {#if localeState.locale === option.value}
+              <Check class="size-3.5 text-zinc-500 dark:text-zinc-400" />
+            {/if}
+          </DropdownMenuItem>
+        {/each}
+      </DropdownMenu>
+    </div>
+
+    <div>
+      <Text variant="overline" as="h3" class="mb-3">
+        {t("shortcuts.title")}
+      </Text>
+      <ShortcutList />
+    </div>
+  </div>
+</Dialog>

package/src/components/ShortcutCapture.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+import { onMount } from "svelte";
+import {
+  eventToBinding,
+  formatBinding,
+  isReservedBinding,
+} from "../lib/shortcut-registry";
+import { cn } from "../lib/utils";
+import type { ShortcutBinding } from "../schema";
+import { t } from "../stores/locale.svelte";
+
+interface Props {
+  oncapture: (binding: ShortcutBinding) => void;
+  oncancel: () => void;
+}
+
+let { oncapture, oncancel }: Props = $props();
+
+let captureEl: HTMLDivElement | undefined = $state();
+let error = $state<string | null>(null);
+const isMac = navigator.platform.includes("Mac");
+
+function handleKeyDown(e: KeyboardEvent) {
+  e.preventDefault();
+  e.stopPropagation();
+
+  if (
+    e.key === "Alt" ||
+    e.key === "Shift" ||
+    e.key === "Control" ||
+    e.key === "Meta"
+  ) {
+    return;
+  }
+
+  if (e.key === "Escape" && !e.altKey && !e.metaKey && !e.shiftKey) {
+    oncancel();
+    return;
+  }
+
+  const binding = eventToBinding(e);
+
+  if (isReservedBinding(binding, isMac)) {
+    error = t("shortcutCapture.reserved", {
+      binding: formatBinding(binding, isMac),
+    });
+    return;
+  }
+
+  error = null;
+  oncapture(binding);
+}
+
+onMount(() => {
+  captureEl?.focus();
+});
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  role="button"
+  aria-label={t("shortcutCapture.ariaLabel")}
+  bind:this={captureEl}
+  tabindex={0}
+  onkeydown={handleKeyDown}
+  onblur={oncancel}
+  class={cn(
+    "inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium",
+    "bg-amber-50 dark:bg-amber-900/30",
+    "border border-amber-300 dark:border-amber-600",
+    "text-amber-700 dark:text-amber-300",
+    "outline-none ring-2 ring-amber-400/50",
+    "animate-pulse",
+  )}
+>
+  <span>{t("shortcutCapture.pressKeys")}</span>
+  {#if error}
+    <span class="text-red-500 dark:text-red-400 text-[10px] animate-none"
+      >{error}</span
+    >
+  {/if}
+</div>