@peaske7/readit 0.1.8 → 0.2.1

package/src/components/SettingsModal.tsx

@@ -1,310 +0,0 @@
-import { Check, ChevronDown, ExternalLink } from "lucide-react";
-import { useLayoutContext } from "../contexts/LayoutContext";
-import { useLocale } from "../contexts/LocaleContext";
-import { type Locale, Locales } from "../lib/i18n";
-import { cn } from "../lib/utils";
-import {
-  type EditorScheme,
-  EditorSchemes,
-  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 LOCALE_OPTIONS = [
-  { value: Locales.JA, label: "日本語" },
-  { value: Locales.EN, label: "English" },
-] 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 ──────────────────────────────────────────── */
-
-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,
-    editorScheme,
-    setEditorScheme,
-    themeMode,
-    setThemeMode,
-    shortcuts,
-    updateBinding,
-    toggleShortcutEnabled,
-    resetShortcutsToDefaults,
-  } = useLayoutContext();
-  const { locale, setLocale, t } = useLocale();
-
-  const themeOptions = [
-    { value: ThemeModes.SYSTEM, label: t("settings.theme.system") },
-    { value: ThemeModes.LIGHT, label: t("settings.theme.light") },
-    { value: ThemeModes.DARK, label: t("settings.theme.dark") },
-  ];
-
-  const fontOptions = [
-    {
-      value: FontFamilies.SERIF,
-      label: t("settings.font.serif"),
-      fontClass: "font-serif",
-    },
-    {
-      value: FontFamilies.SANS_SERIF,
-      label: t("settings.font.sansSerif"),
-      fontClass: "font-sans",
-    },
-  ];
-
-  const editorOptions = [
-    { value: EditorSchemes.NONE, label: t("settings.editor.none") },
-    { value: EditorSchemes.VSCODE, label: t("settings.editor.vscode") },
-    {
-      value: EditorSchemes.VSCODE_INSIDERS,
-      label: t("settings.editor.vscodeInsiders"),
-    },
-    { value: EditorSchemes.CURSOR, label: t("settings.editor.cursor") },
-  ];
-
-  const activeTheme =
-    themeOptions.find((o) => o.value === themeMode) ?? themeOptions[0];
-  const activeFont =
-    fontOptions.find((o) => o.value === fontFamily) ?? fontOptions[0];
-  const activeEditor =
-    editorOptions.find((o) => o.value === editorScheme) ?? editorOptions[0];
-  const activeLocale =
-    LOCALE_OPTIONS.find((o) => o.value === locale) ?? LOCALE_OPTIONS[0];
-
-  return (
-    <Dialog
-      open={isOpen}
-      onOpenChange={(open) => {
-        if (!open) onClose();
-      }}
-    >
-      <DialogContent className="max-w-md">
-        <DialogHeader>
-          <DialogTitle>{t("settings.title")}</DialogTitle>
-        </DialogHeader>
-
-        <DialogBody className="space-y-4">
-          <div>
-            <Text variant="overline" asChild>
-              <h3 className="mb-3">{t("settings.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]">
-                {themeOptions.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">{t("settings.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]">
-                {fontOptions.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-3">{t("settings.language")}</h3>
-            </Text>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <button type="button" className={triggerClassName}>
-                  <span>{activeLocale.label}</span>
-                  <ChevronDown className="size-3 text-zinc-400 dark:text-zinc-500" />
-                </button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="min-w-[160px]">
-                {LOCALE_OPTIONS.map((option) => (
-                  <DropdownMenuItem
-                    key={option.value}
-                    onSelect={() => setLocale(option.value as Locale)}
-                    className="flex items-center gap-2"
-                  >
-                    <span className="flex-1">{option.label}</span>
-                    {locale === 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">{t("settings.editor")}</h3>
-            </Text>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <button type="button" className={triggerClassName}>
-                  <ExternalLink className="size-3 text-zinc-400 dark:text-zinc-500" />
-                  <span>{activeEditor.label}</span>
-                  <ChevronDown className="size-3 text-zinc-400 dark:text-zinc-500" />
-                </button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="min-w-[160px]">
-                {editorOptions.map((option) => (
-                  <DropdownMenuItem
-                    key={option.value}
-                    onSelect={() =>
-                      setEditorScheme(option.value as EditorScheme)
-                    }
-                    className="flex items-center gap-2"
-                  >
-                    <span className="flex-1">{option.label}</span>
-                    {editorScheme === 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">{t("settings.keyboardShortcuts")}</h3>
-            </Text>
-            <p className="text-xs text-zinc-400 dark:text-zinc-500 mb-3">
-              {t("settings.clickToRebind")}
-            </p>
-            <ShortcutList
-              shortcuts={shortcuts}
-              onUpdateBinding={updateBinding}
-              onToggleEnabled={toggleShortcutEnabled}
-              onResetToDefaults={resetShortcutsToDefaults}
-            />
-          </div>
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ShortcutCapture.tsx

@@ -1,48 +0,0 @@
-import { useCallback, useEffect } from "react";
-import { useLocale } from "../contexts/LocaleContext";
-import {
-  eventToBinding,
-  isReservedBinding,
-  type ShortcutBinding,
-} from "../lib/shortcut-registry";
-
-interface ShortcutCaptureProps {
-  onCapture: (binding: ShortcutBinding) => void;
-  onCancel: () => void;
-}
-
-export function ShortcutCapture({ onCapture, onCancel }: ShortcutCaptureProps) {
-  const { t } = useLocale();
-
-  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">
-      {t("shortcutCapture.pressKeys")}
-    </span>
-  );
-}

package/src/components/ShortcutList.tsx

@@ -1,198 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-import { useLocale } from "../contexts/LocaleContext";
-import type { TranslationKey } from "../lib/i18n";
-import {
-  bindingsEqual,
-  formatBinding,
-  type ShortcutAction,
-  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 = [
-  {
-    labelKey: "shortcutGroup.copy" as const,
-    ids: ["copyAll", "copyAllRaw", "copySelectionRaw", "copySelectionLLM"],
-  },
-  {
-    labelKey: "shortcutGroup.navigate" as const,
-    ids: ["navigateNext", "navigatePrevious"],
-  },
-  { labelKey: "shortcutGroup.other" as const, ids: ["clearSelection"] },
-] as const;
-
-const SHORTCUT_LABEL_KEYS: Record<
-  ShortcutAction,
-  { label: TranslationKey; description: TranslationKey }
-> = {
-  copyAll: {
-    label: "shortcut.copyAll.label",
-    description: "shortcut.copyAll.description",
-  },
-  copyAllRaw: {
-    label: "shortcut.copyAllRaw.label",
-    description: "shortcut.copyAllRaw.description",
-  },
-  navigateNext: {
-    label: "shortcut.navigateNext.label",
-    description: "shortcut.navigateNext.description",
-  },
-  navigatePrevious: {
-    label: "shortcut.navigatePrevious.label",
-    description: "shortcut.navigatePrevious.description",
-  },
-  copySelectionRaw: {
-    label: "shortcut.copySelectionRaw.label",
-    description: "shortcut.copySelectionRaw.description",
-  },
-  copySelectionLLM: {
-    label: "shortcut.copySelectionLLM.label",
-    description: "shortcut.copySelectionLLM.description",
-  },
-  clearSelection: {
-    label: "shortcut.clearSelection.label",
-    description: "shortcut.clearSelection.description",
-  },
-};
-
-const isMac =
-  typeof navigator !== "undefined" &&
-  /Mac|iPod|iPhone|iPad/.test(navigator.platform);
-
-export function ShortcutList({
-  shortcuts,
-  onUpdateBinding,
-  onToggleEnabled,
-  onResetToDefaults,
-}: ShortcutListProps) {
-  const { t } = useLocale();
-  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.labelKey}>
-            <span className="text-[11px] font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wider">
-              {t(group.labelKey)}
-            </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={t(SHORTCUT_LABEL_KEYS[shortcut.id].description)}
-                  >
-                    {t(SHORTCUT_LABEL_KEYS[shortcut.id].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={t("shortcuts.enableDisable")}
-                      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"
-        }
-      >
-        {t("shortcuts.resetToDefaults")}
-      </button>
-    </div>
-  );
-}

package/src/components/TabBar.tsx

@@ -1,60 +0,0 @@
-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>
-  );
-}