@peaske7/readit 0.1.4 → 0.1.6

package/src/components/SettingsModal.tsx

@@ -0,0 +1,221 @@
+import { Check, ChevronDown } from "lucide-react";
+import { useLayoutContext } from "../contexts/LayoutContext";
+import { cn } from "../lib/utils";
+import {
+  FontFamilies,
+  type FontFamily,
+  type ThemeMode,
+  ThemeModes,
+} from "../types";
+import { ShortcutList } from "./ShortcutList";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/Dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/DropdownMenu";
+import { Text } from "./ui/Text";
+
+interface SettingsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const THEME_OPTIONS = [
+  { value: ThemeModes.SYSTEM, label: "System" },
+  { value: ThemeModes.LIGHT, label: "Light" },
+  { value: ThemeModes.DARK, label: "Dark" },
+] as const;
+
+function ThemeDot({
+  mode,
+  className,
+}: {
+  mode: ThemeMode;
+  className?: string;
+}) {
+  if (mode === ThemeModes.SYSTEM) {
+    return (
+      <span
+        className={cn(
+          "size-2.5 rounded-full bg-gradient-to-r from-amber-400 to-indigo-400",
+          className,
+        )}
+      />
+    );
+  }
+
+  return (
+    <span
+      className={cn(
+        "size-2.5 rounded-full",
+        mode === ThemeModes.LIGHT ? "bg-amber-400" : "bg-indigo-400",
+        className,
+      )}
+    />
+  );
+}
+
+function ThemePreviewBadge() {
+  return (
+    <span className="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>
+  );
+}
+
+/* ─── Font selector ──────────────────────────────────────────── */
+
+const FONT_OPTIONS = [
+  { value: FontFamilies.SERIF, label: "Serif", fontClass: "font-serif" },
+  {
+    value: FontFamilies.SANS_SERIF,
+    label: "Sans-serif",
+    fontClass: "font-sans",
+  },
+] as const;
+
+function FontPreviewBadge({ fontClass }: { fontClass: string }) {
+  return (
+    <span
+      className={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",
+        fontClass,
+      )}
+    >
+      Aa
+    </span>
+  );
+}
+
+/* ─── Shared trigger style ───────────────────────────────────── */
+
+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",
+);
+
+/* ─── Settings Modal ─────────────────────────────────────────── */
+
+export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
+  const {
+    fontFamily,
+    setFontFamily,
+    themeMode,
+    setThemeMode,
+    shortcuts,
+    updateBinding,
+    toggleShortcutEnabled,
+    resetShortcutsToDefaults,
+  } = useLayoutContext();
+
+  const activeTheme =
+    THEME_OPTIONS.find((o) => o.value === themeMode) ?? THEME_OPTIONS[0];
+  const activeFont =
+    FONT_OPTIONS.find((o) => o.value === fontFamily) ?? FONT_OPTIONS[0];
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Settings</DialogTitle>
+        </DialogHeader>
+
+        <DialogBody className="space-y-4">
+          <div>
+            <Text variant="overline" asChild>
+              <h3 className="mb-3">Theme</h3>
+            </Text>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button type="button" className={triggerClassName}>
+                  <ThemeDot mode={activeTheme.value} />
+                  <ThemePreviewBadge />
+                  <span>{activeTheme.label}</span>
+                  <ChevronDown className="size-3 text-zinc-400 dark:text-zinc-500" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="min-w-[160px]">
+                {THEME_OPTIONS.map((option) => (
+                  <DropdownMenuItem
+                    key={option.value}
+                    onSelect={() => setThemeMode(option.value)}
+                    className="flex items-center gap-2"
+                  >
+                    <ThemeDot mode={option.value} />
+                    <ThemePreviewBadge />
+                    <span className="flex-1">{option.label}</span>
+                    {themeMode === option.value && (
+                      <Check className="size-3.5 text-zinc-500 dark:text-zinc-400" />
+                    )}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+
+          <div>
+            <Text variant="overline" asChild>
+              <h3 className="mb-3">Font</h3>
+            </Text>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button type="button" className={triggerClassName}>
+                  <FontPreviewBadge fontClass={activeFont.fontClass} />
+                  <span>{activeFont.label}</span>
+                  <ChevronDown className="size-3 text-zinc-400 dark:text-zinc-500" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="min-w-[160px]">
+                {FONT_OPTIONS.map((option) => (
+                  <DropdownMenuItem
+                    key={option.value}
+                    onSelect={() => setFontFamily(option.value as FontFamily)}
+                    className="flex items-center gap-2"
+                  >
+                    <FontPreviewBadge fontClass={option.fontClass} />
+                    <span className="flex-1">{option.label}</span>
+                    {fontFamily === option.value && (
+                      <Check className="size-3.5 text-zinc-500 dark:text-zinc-400" />
+                    )}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+
+          <div>
+            <Text variant="overline" asChild>
+              <h3 className="mb-1">Keyboard Shortcuts</h3>
+            </Text>
+            <p className="text-xs text-zinc-400 dark:text-zinc-500 mb-3">
+              Click a key to rebind
+            </p>
+            <ShortcutList
+              shortcuts={shortcuts}
+              onUpdateBinding={updateBinding}
+              onToggleEnabled={toggleShortcutEnabled}
+              onResetToDefaults={resetShortcutsToDefaults}
+            />
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ShortcutCapture.tsx

@@ -0,0 +1,45 @@
+import { useCallback, useEffect } from "react";
+import {
+  eventToBinding,
+  isReservedBinding,
+  type ShortcutBinding,
+} from "../lib/shortcut-registry";
+
+interface ShortcutCaptureProps {
+  onCapture: (binding: ShortcutBinding) => void;
+  onCancel: () => void;
+}
+
+export function ShortcutCapture({ onCapture, onCancel }: ShortcutCaptureProps) {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (e.key === "Escape") {
+        onCancel();
+        return;
+      }
+
+      const binding = eventToBinding(e);
+      if (!binding) return;
+
+      if (isReservedBinding(binding)) return;
+
+      onCapture(binding);
+    },
+    [onCapture, onCancel],
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () =>
+      window.removeEventListener("keydown", handleKeyDown, { capture: true });
+  }, [handleKeyDown]);
+
+  return (
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-amber-50 border border-amber-200 text-amber-700 text-xs font-medium animate-pulse">
+      Press keys...
+    </span>
+  );
+}

package/src/components/ShortcutList.tsx

@@ -0,0 +1,157 @@
+import { useCallback, useMemo, useState } from "react";
+import {
+  bindingsEqual,
+  formatBinding,
+  type ShortcutBinding,
+  type ShortcutDefinition,
+} from "../lib/shortcut-registry";
+import { ShortcutCapture } from "./ShortcutCapture";
+
+interface ShortcutListProps {
+  shortcuts: ShortcutDefinition[];
+  onUpdateBinding: (id: string, binding: ShortcutBinding) => Promise<void>;
+  onToggleEnabled: (id: string) => Promise<void>;
+  onResetToDefaults: () => Promise<void>;
+}
+
+const SHORTCUT_GROUPS = [
+  {
+    label: "Copy",
+    ids: ["copyAll", "copyAllRaw", "copySelectionRaw", "copySelectionLLM"],
+  },
+  { label: "Navigate", ids: ["navigateNext", "navigatePrevious"] },
+  { label: "Other", ids: ["clearSelection"] },
+] as const;
+
+const isMac =
+  typeof navigator !== "undefined" &&
+  /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+
+export function ShortcutList({
+  shortcuts,
+  onUpdateBinding,
+  onToggleEnabled,
+  onResetToDefaults,
+}: ShortcutListProps) {
+  const [capturingId, setCapturingId] = useState<string | undefined>();
+
+  const hasOverrides = useMemo(
+    () =>
+      shortcuts.some(
+        (s) => !s.enabled || !bindingsEqual(s.binding, s.defaultBinding),
+      ),
+    [shortcuts],
+  );
+
+  const shortcutMap = useMemo(
+    () => new Map(shortcuts.map((s) => [s.id, s])),
+    [shortcuts],
+  );
+
+  const handleCapture = useCallback(
+    async (id: string, binding: ShortcutBinding) => {
+      const conflict = shortcuts.find(
+        (s) => s.id !== id && s.enabled && bindingsEqual(s.binding, binding),
+      );
+
+      if (conflict) {
+        const currentShortcut = shortcuts.find((s) => s.id === id);
+        if (currentShortcut) {
+          await onUpdateBinding(conflict.id, currentShortcut.binding);
+        }
+      }
+
+      await onUpdateBinding(id, binding);
+      setCapturingId(undefined);
+    },
+    [shortcuts, onUpdateBinding],
+  );
+
+  return (
+    <div className="space-y-4">
+      {SHORTCUT_GROUPS.map((group) => {
+        const groupShortcuts = group.ids
+          .map((id) => shortcutMap.get(id))
+          .filter((s): s is ShortcutDefinition => s !== undefined);
+
+        if (groupShortcuts.length === 0) return null;
+
+        return (
+          <div key={group.label}>
+            <span className="text-[11px] font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wider">
+              {group.label}
+            </span>
+            <div className="mt-1 space-y-0.5">
+              {groupShortcuts.map((shortcut) => (
+                <div
+                  key={shortcut.id}
+                  className="flex items-center gap-3 py-1.5"
+                >
+                  <span
+                    className="flex-1 text-sm text-zinc-700 dark:text-zinc-300 truncate"
+                    title={shortcut.description}
+                  >
+                    {shortcut.label}
+                  </span>
+
+                  <div className="flex items-center gap-2.5">
+                    {capturingId === shortcut.id ? (
+                      <ShortcutCapture
+                        onCapture={(binding) =>
+                          handleCapture(shortcut.id, binding)
+                        }
+                        onCancel={() => setCapturingId(undefined)}
+                      />
+                    ) : (
+                      <button
+                        type="button"
+                        onClick={() => setCapturingId(shortcut.id)}
+                        className="inline-flex items-center px-1.5 py-0.5 rounded bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 text-xs font-mono cursor-pointer hover:bg-zinc-200 hover:border-zinc-300 dark:hover:bg-zinc-700 dark:hover:border-zinc-600 transition-colors"
+                      >
+                        {formatBinding(shortcut.binding, isMac)}
+                      </button>
+                    )}
+
+                    <button
+                      type="button"
+                      role="switch"
+                      aria-checked={shortcut.enabled}
+                      onClick={() => onToggleEnabled(shortcut.id)}
+                      title="Enable/disable shortcut"
+                      className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors cursor-pointer ${
+                        shortcut.enabled
+                          ? "bg-zinc-600 dark:bg-zinc-400"
+                          : "bg-zinc-300 dark:bg-zinc-700"
+                      }`}
+                    >
+                      <span
+                        className={`inline-block size-3 rounded-full bg-white dark:bg-zinc-900 shadow-sm transition-transform ${
+                          shortcut.enabled
+                            ? "translate-x-3.5"
+                            : "translate-x-0.5"
+                        }`}
+                      />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+
+      <button
+        type="button"
+        onClick={hasOverrides ? onResetToDefaults : undefined}
+        disabled={!hasOverrides}
+        className={
+          hasOverrides
+            ? "text-xs text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors cursor-pointer"
+            : "text-xs text-zinc-300 dark:text-zinc-600 cursor-default"
+        }
+      >
+        Reset to defaults
+      </button>
+    </div>
+  );
+}

package/src/components/TabBar.tsx

@@ -0,0 +1,60 @@
+import { X } from "lucide-react";
+import { cn } from "../lib/utils";
+import { useAppStore } from "../store";
+
+export function TabBar() {
+  const documentOrder = useAppStore((s) => s.documentOrder);
+  const activeDocumentPath = useAppStore((s) => s.activeDocumentPath);
+  const documents = useAppStore((s) => s.documents);
+  const setActiveDocument = useAppStore((s) => s.setActiveDocument);
+  const closeDocument = useAppStore((s) => s.closeDocument);
+
+  if (documentOrder.length <= 1) return null;
+
+  return (
+    <div
+      className="flex border-b border-zinc-200 bg-zinc-50 px-2 overflow-x-auto"
+      role="tablist"
+    >
+      {documentOrder.map((filePath) => {
+        const docState = documents.get(filePath);
+        if (!docState) return null;
+        const isActive = filePath === activeDocumentPath;
+
+        return (
+          <div
+            key={filePath}
+            role="tab"
+            tabIndex={isActive ? 0 : -1}
+            aria-selected={isActive}
+            className={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 text-zinc-900"
+                : "border-transparent text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100",
+            )}
+            onClick={() => setActiveDocument(filePath)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setActiveDocument(filePath);
+              }
+            }}
+          >
+            <span>{docState.document.fileName}</span>
+            <button
+              type="button"
+              className="ml-1 rounded p-0.5 hover:bg-zinc-200"
+              onClick={(e) => {
+                e.stopPropagation();
+                closeDocument(filePath);
+              }}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/TableOfContents.tsx

@@ -0,0 +1,108 @@
+import { use, useMemo, useState } from "react";
+import { LayoutContext } from "../contexts/LayoutContext";
+import type { Heading } from "../hooks/useHeadings";
+import { cn } from "../lib/utils";
+import { FontFamilies } from "../types";
+
+interface TableOfContentsProps {
+  headings: Heading[];
+  activeId: string | null;
+  onHeadingClick: (id: string) => void;
+}
+
+export function TableOfContents({
+  headings,
+  activeId,
+  onHeadingClick,
+}: TableOfContentsProps) {
+  const layout = use(LayoutContext);
+  const fontClass = layout
+    ? layout.fontFamily === FontFamilies.SANS_SERIF
+      ? "font-sans"
+      : "font-serif"
+    : undefined;
+
+  const [expandedH2s, setExpandedH2s] = useState<Set<string>>(() => new Set());
+
+  const h2sWithChildren = useMemo(() => {
+    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;
+  }, [headings]);
+
+  const visibleHeadings = useMemo(() => {
+    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 && expandedH2s.has(currentH2);
+    });
+  }, [headings, expandedH2s]);
+
+  const toggleH2 = (id: string) => {
+    setExpandedH2s((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  if (headings.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav className={cn("toc", fontClass)} aria-label="Table of contents">
+      {visibleHeadings.map((heading) => {
+        const hasChildren =
+          heading.level === 2 && h2sWithChildren.has(heading.id);
+        const isExpanded = expandedH2s.has(heading.id);
+
+        return (
+          <a
+            key={heading.id}
+            href={`#${heading.id}`}
+            title={heading.text}
+            className={`toc-item toc-level-${heading.level}${activeId === heading.id ? " toc-active" : ""}`}
+            onClick={(e) => {
+              e.preventDefault();
+              if (hasChildren) {
+                toggleH2(heading.id);
+              }
+              onHeadingClick(heading.id);
+            }}
+          >
+            {heading.text}
+            {hasChildren && (
+              <span className="toc-toggle ml-1 opacity-40">
+                {isExpanded ? "▾" : "▸"}
+              </span>
+            )}
+          </a>
+        );
+      })}
+    </nav>
+  );
+}

package/src/components/comments/CommentBadge.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { useCommentContext } from "../../contexts/CommentContext";
+import { cn } from "../../lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "../ui/DropdownMenu";
+import { CommentManager } from "./CommentManager";
+
+export function CommentBadge() {
+  const { commentCount } = useCommentContext();
+
+  const [commentsOpen, setCommentsOpen] = useState(false);
+
+  if (commentCount === 0) return null;
+
+  return (
+    <DropdownMenu open={commentsOpen} onOpenChange={setCommentsOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className={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} comment${commentCount !== 1 ? "s" : ""}`}
+        >
+          <span className="text-zinc-300">·</span>
+          {commentCount}
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="w-80 max-h-96 overflow-hidden p-0"
+      >
+        <CommentManager onClose={() => setCommentsOpen(false)} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}