@peaske7/readit 0.2.0 → 0.3.0-rc.0

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>

package/src/components/ShortcutList.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+import {
+  bindingsEqual,
+  formatBinding,
+  SHORTCUT_GROUPS,
+  type ShortcutDefinition,
+} from "../lib/shortcut-registry";
+import { cn } from "../lib/utils";
+import type { ShortcutBinding } from "../schema";
+import { t } from "../stores/locale.svelte";
+import {
+  resetToDefaults,
+  shortcutState,
+  toggleEnabled,
+  updateBinding,
+} from "../stores/shortcuts.svelte";
+import ShortcutCapture from "./ShortcutCapture.svelte";
+import Button from "./ui/Button.svelte";
+import Text from "./ui/Text.svelte";
+
+const isMac = navigator.platform.includes("Mac");
+let capturingId = $state<string | null>(null);
+
+function handleCapture(id: string, binding: ShortcutBinding) {
+  capturingId = null;
+  updateBinding(id, binding);
+}
+
+function handleCancelCapture() {
+  capturingId = null;
+}
+
+function startCapture(id: string) {
+  capturingId = id;
+}
+
+function getShortcut(id: string): ShortcutDefinition | undefined {
+  return shortcutState.shortcuts.find((s) => s.id === id);
+}
+
+function isModified(shortcut: ShortcutDefinition): boolean {
+  return (
+    !shortcut.enabled ||
+    !bindingsEqual(shortcut.binding, shortcut.defaultBinding)
+  );
+}
+
+let hasModifications = $derived(
+  shortcutState.shortcuts.some((s) => isModified(s)),
+);
+</script>
+
+<div class="space-y-4">
+  {#each SHORTCUT_GROUPS as group (group.label)}
+    <div>
+      <Text variant="caption" as="div" class="mb-2 font-medium">
+        {t(group.label)}
+      </Text>
+
+      <div class="space-y-1">
+        {#each group.ids as id (id)}
+          {@const shortcut = getShortcut(id)}
+          {#if shortcut}
+            <div
+              class={cn(
+                "flex items-center gap-3 px-2 py-1.5 rounded-lg",
+                "hover:bg-zinc-50 dark:hover:bg-zinc-800/50",
+                !shortcut.enabled && "opacity-50",
+              )}
+            >
+              <div class="flex-1 min-w-0">
+                <div class="text-xs text-zinc-700 dark:text-zinc-300">
+                  {t(shortcut.label)}
+                </div>
+              </div>
+
+              <div class="flex items-center gap-2">
+                {#if capturingId === shortcut.id}
+                  <ShortcutCapture
+                    oncapture={(binding) =>
+                      handleCapture(shortcut.id, binding)}
+                    oncancel={handleCancelCapture}
+                  />
+                {:else}
+                  <button
+                    type="button"
+                    onclick={() => startCapture(shortcut.id)}
+                    class={cn(
+                      "inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[11px] font-mono",
+                      "bg-zinc-100 dark:bg-zinc-800",
+                      "border border-zinc-200 dark:border-zinc-700",
+                      "text-zinc-600 dark:text-zinc-400",
+                      "hover:bg-zinc-200 dark:hover:bg-zinc-700",
+                      "transition-colors cursor-pointer",
+                      isModified(shortcut) &&
+                        "ring-1 ring-blue-400/50 dark:ring-blue-500/50",
+                    )}
+                  >
+                    {formatBinding(shortcut.binding, isMac)}
+                  </button>
+                {/if}
+
+                <label
+                  class="relative inline-flex items-center cursor-pointer"
+                  title={t("shortcuts.enableDisable")}
+                >
+                  <input
+                    type="checkbox"
+                    checked={shortcut.enabled}
+                    onchange={() => toggleEnabled(shortcut.id)}
+                    class="sr-only peer"
+                  />
+                  <div
+                    class={cn(
+                      "w-7 h-4 rounded-full transition-colors",
+                      "bg-zinc-200 dark:bg-zinc-700",
+                      "peer-checked:bg-blue-500 dark:peer-checked:bg-blue-600",
+                      "after:content-[''] after:absolute after:top-0.5 after:start-[2px]",
+                      "after:bg-white after:rounded-full after:size-3",
+                      "after:transition-all after:duration-150",
+                      "peer-checked:after:translate-x-full peer-checked:after:translate-x-3",
+                    )}
+                  ></div>
+                </label>
+              </div>
+            </div>
+          {/if}
+        {/each}
+      </div>
+    </div>
+  {/each}
+
+  {#if hasModifications}
+    <div class="pt-2 border-t border-zinc-100 dark:border-zinc-800">
+      <Button
+        variant="ghost"
+        size="sm"
+        onclick={resetToDefaults}
+        class="text-xs"
+      >
+        {t("shortcuts.resetToDefaults")}
+      </Button>
+    </div>
+  {/if}
+</div>

package/src/components/TabBar.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+import { cn } from "../lib/utils";
+import { app, closeDocument, setActiveDocument } from "../stores/app.svelte";
+</script>
+
+{#if app.documentOrder.length > 1}
+  <div
+    class="flex border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 px-2 overflow-x-auto"
+    role="tablist"
+  >
+    {#each app.documentOrder as filePath (filePath)}
+      {@const docState = app.documents.get(filePath)}
+      {@const isActive = filePath === app.activeDocumentPath}
+
+      {#if docState}
+        <div
+          role="tab"
+          tabindex={isActive ? 0 : -1}
+          aria-selected={isActive}
+          class={cn(
+            "flex items-center gap-1.5 px-3 py-1.5 text-sm border-b-2 whitespace-nowrap cursor-pointer select-none",
+            isActive
+              ? "border-zinc-900 dark:border-zinc-100 text-zinc-900 dark:text-zinc-100"
+              : "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800",
+          )}
+          onclick={() => setActiveDocument(filePath)}
+          onkeydown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setActiveDocument(filePath);
+            }
+          }}
+        >
+          <span>{docState.document.fileName}</span>
+          <button
+            type="button"
+            aria-label="Close tab"
+            class="ml-1 rounded p-0.5 hover:bg-zinc-200 dark:hover:bg-zinc-700"
+            onclick={(e) => {
+              e.stopPropagation();
+              closeDocument(filePath);
+            }}
+          >
+            <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path d="M18 6 6 18M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+      {/if}
+    {/each}
+  </div>
+{/if}

package/src/components/TableOfContents.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+import type { Heading } from "../lib/headings";
+import { cn } from "../lib/utils";
+import { FontFamilies } from "../schema";
+import { settings } from "../stores/settings.svelte";
+
+interface Props {
+  headings: Heading[];
+  onheadingclick: (id: string) => void;
+}
+
+let { headings, onheadingclick }: Props = $props();
+
+let fontClass = $derived(
+  settings.fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif",
+);
+
+let expandedH2s = $state(new Set<string>());
+
+let h2sWithChildren = $derived.by(() => {
+  const result = new Set<string>();
+  let currentH2: string | null = null;
+
+  for (const heading of headings) {
+    if (heading.level === 2) {
+      currentH2 = heading.id;
+    } else if (heading.level > 2 && currentH2) {
+      result.add(currentH2);
+    } else if (heading.level === 1) {
+      currentH2 = null;
+    }
+  }
+  return result;
+});
+
+let visibleHeadings = $derived.by(() => {
+  let currentH2: string | null = null;
+
+  return headings.filter((heading) => {
+    if (heading.level <= 2) {
+      if (heading.level === 2) {
+        currentH2 = heading.id;
+      } else {
+        currentH2 = null;
+      }
+      return true;
+    }
+
+    return currentH2 !== null && expandedH2s.has(currentH2);
+  });
+});
+
+function toggleH2(id: string) {
+  const next = new Set(expandedH2s);
+  if (next.has(id)) {
+    next.delete(id);
+  } else {
+    next.add(id);
+  }
+  expandedH2s = next;
+}
+
+let observedActiveId = $state<string | null>(null);
+
+$effect(() => {
+  if (headings.length === 0) return;
+
+  const headingElements = headings
+    .map((h) => document.getElementById(h.id))
+    .filter((el): el is HTMLElement => el !== null);
+
+  if (headingElements.length === 0) return;
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          observedActiveId = entry.target.id;
+        }
+      }
+    },
+    {
+      rootMargin: "-80px 0px -60% 0px",
+      threshold: 0,
+    },
+  );
+
+  for (const el of headingElements) {
+    observer.observe(el);
+  }
+
+  return () => observer.disconnect();
+});
+
+let effectiveActiveId = $derived(observedActiveId);
+</script>
+
+{#if headings.length > 0}
+  <nav class={cn("toc", fontClass)} aria-label="Table of contents">
+    {#each visibleHeadings as heading (heading.id)}
+      {@const hasChildren =
+        heading.level === 2 && h2sWithChildren.has(heading.id)}
+      {@const isExpanded = expandedH2s.has(heading.id)}
+      <a
+        href={`#${heading.id}`}
+        title={heading.text}
+        class={`toc-item toc-level-${heading.level}${effectiveActiveId === heading.id ? " toc-active" : ""}`}
+        onclick={(e) => {
+          e.preventDefault();
+          if (hasChildren) {
+            toggleH2(heading.id);
+          }
+          onheadingclick(heading.id);
+        }}
+      >
+        {heading.text}
+        {#if hasChildren}
+          <span class="toc-toggle ml-1 opacity-40">
+            {isExpanded ? "\u25BE" : "\u25B8"}
+          </span>
+        {/if}
+      </a>
+    {/each}
+  </nav>
+{/if}

package/src/components/ui/ActionLink.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils";
+
+const variantStyles = {
+  default: "hover:text-zinc-600",
+  destructive: "hover:text-red-500",
+} as const;
+
+type ActionLinkVariant = keyof typeof variantStyles;
+
+interface Props {
+  variant?: ActionLinkVariant;
+  onclick?: (e: MouseEvent) => void;
+  class?: string;
+  disabled?: boolean;
+  children: Snippet;
+}
+
+let {
+  variant = "default",
+  onclick,
+  class: className,
+  disabled = false,
+  children,
+}: Props = $props();
+</script>
+
+<button
+  type="button"
+  {disabled}
+  class={cn(
+    "cursor-pointer transition-colors duration-150",
+    variantStyles[variant],
+    className,
+  )}
+  {onclick}
+>
+  {@render children()}
+</button>