@peaske7/readit 0.3.0-rc.0 → 0.3.0-rc.2

package/src/components/MermaidEnhancer.svelte

@@ -1,218 +0,0 @@
-<script lang="ts">
-import { Code2, Image as ImageIcon, Maximize2 } from "lucide-svelte";
-import { mount, unmount } from "svelte";
-import { localeState, t } from "../stores/locale.svelte";
-import MermaidModal from "./MermaidModal.svelte";
-
-interface Props {
-  /** The article element that contains all rendered mermaid containers. */
-  root: HTMLElement | undefined;
-  /** Bumped whenever document content is re-rendered (rescan triggers). */
-  contentVersion: number;
-  /** Called after an inline toggle so margin notes / positions can recache. */
-  notifyContentChanged?: () => void;
-}
-
-let { root, contentVersion, notifyContentChanged }: Props = $props();
-
-let modalOpen = $state(false);
-let modalSvg = $state("");
-let modalSource = $state("");
-
-const ENHANCED_FLAG = "readitMermaidEnhanced";
-
-function decodeSource(container: HTMLElement): string {
-  const encoded = container.dataset.mermaidSource ?? "";
-  try {
-    return decodeURIComponent(encoded);
-  } catch {
-    return encoded;
-  }
-}
-
-function openModal(container: HTMLElement) {
-  const svgEl = container.querySelector("svg");
-  modalSvg = svgEl ? svgEl.outerHTML : "";
-  modalSource = decodeSource(container);
-  modalOpen = true;
-}
-
-function ensureSourceView(container: HTMLElement, source: string): HTMLElement {
-  let pre = container.querySelector<HTMLElement>(".mermaid-source-view");
-  if (pre) return pre;
-  pre = document.createElement("pre");
-  pre.className = "mermaid-source-view";
-  const codeEl = document.createElement("code");
-  codeEl.className = "language-mermaid";
-  codeEl.textContent = source;
-  pre.appendChild(codeEl);
-  pre.style.display = "none";
-  // Insert before the toolbar so the toolbar stays the last child.
-  const toolbar = container.querySelector(".mermaid-toolbar");
-  container.insertBefore(pre, toolbar);
-  return pre;
-}
-
-function toggleInline(container: HTMLElement, source: string): void {
-  const svg = container.querySelector<SVGElement>("svg");
-  const pre = ensureSourceView(container, source);
-  const showingCode = container.dataset.mermaidView === "code";
-  const next = showingCode ? "graph" : "code";
-
-  if (svg) svg.style.display = next === "code" ? "none" : "";
-  pre.style.display = next === "code" ? "block" : "none";
-  container.dataset.mermaidView = next;
-
-  const toolbar = container.querySelector<HTMLElement>(".mermaid-toolbar");
-  const toggleBtn = toolbar?.querySelector<HTMLButtonElement>(
-    '[data-action="toggle"]',
-  );
-  toggleBtn?.setAttribute(
-    "aria-label",
-    next === "code" ? t("mermaid.showDiagram") : t("mermaid.showSource"),
-  );
-  toggleBtn?.setAttribute("aria-pressed", next === "code" ? "true" : "false");
-
-  const handle = (
-    toolbar as (HTMLElement & { _readitHandle?: ToolbarHandle }) | null
-  )?._readitHandle;
-  handle?.remountToggleIcon(next);
-
-  notifyContentChanged?.();
-}
-
-interface ToolbarHandle {
-  cleanup: () => void;
-  remountToggleIcon: (view: "graph" | "code") => void;
-}
-
-function mountToggleIcon(target: HTMLElement, view: "graph" | "code") {
-  // Show "code" icon when graph is visible (click to see code), and vice versa.
-  const Icon = view === "graph" ? Code2 : ImageIcon;
-  return mount(Icon, { target, props: { size: 14 } });
-}
-
-function buildToolbar(container: HTMLElement): HTMLElement {
-  const toolbar = document.createElement("div");
-  toolbar.className = "mermaid-toolbar";
-  toolbar.setAttribute("contenteditable", "false");
-
-  const toggleBtn = document.createElement("button");
-  toggleBtn.type = "button";
-  toggleBtn.dataset.action = "toggle";
-  toggleBtn.setAttribute("aria-label", t("mermaid.showSource"));
-  toggleBtn.setAttribute("aria-pressed", "false");
-
-  const expandBtn = document.createElement("button");
-  expandBtn.type = "button";
-  expandBtn.dataset.action = "expand";
-  expandBtn.setAttribute("aria-label", t("mermaid.expand"));
-
-  toolbar.appendChild(toggleBtn);
-  toolbar.appendChild(expandBtn);
-
-  let toggleIcon = mountToggleIcon(toggleBtn, "graph");
-  const expandIcon = mount(Maximize2, {
-    target: expandBtn,
-    props: { size: 14 },
-  });
-
-  toggleBtn.addEventListener("click", (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    toggleInline(container, decodeSource(container));
-  });
-
-  expandBtn.addEventListener("click", (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    openModal(container);
-  });
-
-  const handle: ToolbarHandle = {
-    cleanup: () => {
-      void unmount(toggleIcon);
-      void unmount(expandIcon);
-    },
-    remountToggleIcon: (view) => {
-      void unmount(toggleIcon);
-      toggleIcon = mountToggleIcon(toggleBtn, view);
-    },
-  };
-  (toolbar as HTMLElement & { _readitHandle?: ToolbarHandle })._readitHandle =
-    handle;
-
-  return toolbar;
-}
-
-function enhance(target: HTMLElement) {
-  const containers = target.querySelectorAll<HTMLElement>(
-    ".mermaid-container[data-mermaid-source]",
-  );
-
-  for (const container of containers) {
-    if (container.dataset[ENHANCED_FLAG] === "true") continue;
-    container.dataset[ENHANCED_FLAG] = "true";
-
-    // Ensure the container can host the absolutely-positioned toolbar.
-    container.style.position = "relative";
-
-    const toolbar = buildToolbar(container);
-    container.appendChild(toolbar);
-  }
-}
-
-function cleanup(target: HTMLElement) {
-  const toolbars = target.querySelectorAll<HTMLElement>(".mermaid-toolbar");
-  for (const tb of toolbars) {
-    (
-      tb as HTMLElement & { _readitHandle?: ToolbarHandle }
-    )._readitHandle?.cleanup();
-    tb.remove();
-  }
-  const enhanced = target.querySelectorAll<HTMLElement>(
-    ".mermaid-container[data-readit-mermaid-enhanced]",
-  );
-  for (const c of enhanced) {
-    delete c.dataset[ENHANCED_FLAG];
-  }
-}
-
-$effect(() => {
-  if (!root) return;
-  // Re-scan whenever contentVersion changes; declared so Svelte tracks it.
-  void contentVersion;
-  enhance(root);
-  return () => {
-    if (root) cleanup(root);
-  };
-});
-
-// Refresh aria-labels on existing imperative toolbars when locale changes.
-$effect(() => {
-  if (!root) return;
-  void localeState.locale;
-  const toolbars = root.querySelectorAll<HTMLElement>(".mermaid-toolbar");
-  for (const tb of toolbars) {
-    const container = tb.closest<HTMLElement>(".mermaid-container");
-    const showingCode = container?.dataset.mermaidView === "code";
-    tb.querySelector<HTMLButtonElement>('[data-action="toggle"]')?.setAttribute(
-      "aria-label",
-      showingCode ? t("mermaid.showDiagram") : t("mermaid.showSource"),
-    );
-    tb.querySelector<HTMLButtonElement>('[data-action="expand"]')?.setAttribute(
-      "aria-label",
-      t("mermaid.expand"),
-    );
-  }
-});
-</script>
-
-<MermaidModal
-  bind:open={modalOpen}
-  svg={modalSvg}
-  source={modalSource}
-  onclose={() => {
-    modalOpen = false;
-  }}
-/>

package/src/components/MermaidModal.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-import { Code2, Image as ImageIcon } from "lucide-svelte";
-import { t } from "../stores/locale.svelte";
-import Dialog from "./ui/Dialog.svelte";
-
-interface Props {
-  open: boolean;
-  svg: string;
-  source: string;
-  onclose: () => void;
-}
-
-let { open = $bindable(false), svg, source, onclose }: Props = $props();
-
-type View = "graph" | "code";
-let view = $state<View>("graph");
-
-// Reset to graph view each time the modal opens so the user always
-// lands on the diagram first.
-$effect(() => {
-  if (open) view = "graph";
-});
-</script>
-
-<Dialog
-  bind:open
-  {onclose}
-  contentClass="w-[90vw] h-[90vh] max-w-[90vw]"
->
-  {#snippet header()}
-    {t("mermaid.modalTitle")}
-  {/snippet}
-
-  {#snippet headerActions()}
-    <div class="flex items-center gap-1 mr-8">
-      <button
-        type="button"
-        onclick={() => (view = "graph")}
-        aria-pressed={view === "graph"}
-        class="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 aria-pressed:bg-zinc-100 dark:aria-pressed:bg-zinc-800 aria-pressed:text-zinc-900 dark:aria-pressed:text-zinc-100"
-      >
-        <ImageIcon class="w-3.5 h-3.5" />
-        {t("mermaid.viewGraph")}
-      </button>
-      <button
-        type="button"
-        onclick={() => (view = "code")}
-        aria-pressed={view === "code"}
-        class="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 aria-pressed:bg-zinc-100 dark:aria-pressed:bg-zinc-800 aria-pressed:text-zinc-900 dark:aria-pressed:text-zinc-100"
-      >
-        <Code2 class="w-3.5 h-3.5" />
-        {t("mermaid.viewCode")}
-      </button>
-    </div>
-  {/snippet}
-
-  <div class="w-full h-full overflow-auto flex items-center justify-center">
-    {#if view === "graph"}
-      <!-- eslint-disable-next-line -- trusted mermaid render output -->
-      <div class="mermaid-container mermaid-modal-graph">{@html svg}</div>
-    {:else}
-      <pre
-        class="w-full h-full m-0 p-4 text-xs leading-relaxed font-mono text-zinc-800 dark:text-zinc-200 bg-zinc-50 dark:bg-zinc-950 rounded-lg overflow-auto whitespace-pre"
-      >{source}</pre>
-    {/if}
-  </div>
-</Dialog>

package/src/components/RawModal.svelte

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

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

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