@peaske7/readit 0.1.8 → 0.2.0

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/comments/CommentMinimap.tsx

@@ -1,62 +0,0 @@
-import { useCommentContext } from "../../contexts/CommentContext";
-import { MINIMAP_HEADER_OFFSET_PX } from "../../lib/layout-constants";
-import { cn } from "../../lib/utils";
-
-interface CommentMinimapProps {
-  /** Absolute Y-positions from document top for each comment */
-  documentPositions: Record<string, number>;
-  documentHeight: number;
-  viewportHeight: number;
-}
-
-export function CommentMinimap({
-  documentPositions,
-  documentHeight,
-  viewportHeight,
-}: CommentMinimapProps) {
-  const { sortedComments, hoveredCommentId, navigateToComment } =
-    useCommentContext();
-
-  // Don't render if no comments or document height is 0
-  if (sortedComments.length === 0 || documentHeight === 0) {
-    return null;
-  }
-
-  // Minimap height is the viewport height minus header
-  const minimapHeight = viewportHeight - MINIMAP_HEADER_OFFSET_PX;
-
-  return (
-    <div
-      className="fixed right-0 top-12 w-3 z-40"
-      style={{ height: minimapHeight }}
-    >
-      {sortedComments.map((comment) => {
-        const position = documentPositions[comment.id];
-        if (position === undefined) return null;
-
-        // Scale absolute position to minimap height
-        const indicatorTop = (position / documentHeight) * minimapHeight;
-
-        const isHovered = hoveredCommentId === comment.id;
-
-        return (
-          <button
-            type="button"
-            key={comment.id}
-            className={cn(
-              "absolute left-0 right-0 h-1.5 rounded-l transition-all duration-150 cursor-pointer",
-              isHovered
-                ? "bg-amber-500 w-4 -translate-x-1"
-                : "bg-amber-500 hover:bg-amber-600 hover:w-4 hover:-translate-x-1",
-            )}
-            style={{
-              top: Math.max(0, Math.min(indicatorTop, minimapHeight - 6)),
-            }}
-            onClick={() => navigateToComment(comment.id)}
-            title={`"${comment.selectedText.slice(0, 30)}${comment.selectedText.length > 30 ? "..." : ""}"`}
-          />
-        );
-      })}
-    </div>
-  );
-}

package/src/components/ui/ActionBar.tsx

@@ -1,16 +0,0 @@
-import { cn } from "../../lib/utils";
-
-function ActionBar({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="action-bar"
-      className={cn(
-        "flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { ActionBar };

package/src/components/ui/SeparatorDot.tsx

@@ -1,9 +0,0 @@
-function SeparatorDot() {
-  return (
-    <span data-slot="separator-dot" aria-hidden="true">
-      ·
-    </span>
-  );
-}
-
-export { SeparatorDot };

package/src/contexts/LayoutContext.tsx

@@ -1,88 +0,0 @@
-import { createContext, type ReactNode, use, useMemo } from "react";
-import { useEditorScheme } from "../hooks/useEditorScheme";
-import { useFontPreference } from "../hooks/useFontPreference";
-import { useKeybindings } from "../hooks/useKeybindings";
-import { useLayoutMode } from "../hooks/useLayoutMode";
-import { useThemePreference } from "../hooks/useThemePreference";
-import type { ShortcutDefinition } from "../lib/shortcut-registry";
-import type {
-  EditorScheme,
-  FontFamily,
-  ShortcutBinding,
-  ThemeMode,
-} from "../types";
-
-interface LayoutContextValue {
-  isFullscreen: boolean;
-  toggleLayoutMode: () => void;
-  fontFamily: FontFamily;
-  setFontFamily: (font: FontFamily) => Promise<void>;
-  editorScheme: EditorScheme;
-  setEditorScheme: (scheme: EditorScheme) => Promise<void>;
-  themeMode: ThemeMode;
-  setThemeMode: (mode: ThemeMode) => void;
-  shortcuts: ShortcutDefinition[];
-  updateBinding: (id: string, binding: ShortcutBinding) => Promise<void>;
-  toggleShortcutEnabled: (id: string) => Promise<void>;
-  resetShortcutsToDefaults: () => Promise<void>;
-}
-
-export const LayoutContext = createContext<LayoutContextValue | null>(null);
-
-export function useLayoutContext(): LayoutContextValue {
-  const value = use(LayoutContext);
-  if (!value) {
-    throw new Error("useLayoutContext must be used within a LayoutProvider");
-  }
-  return value;
-}
-
-interface LayoutProviderProps {
-  children: ReactNode;
-}
-
-export function LayoutProvider({ children }: LayoutProviderProps) {
-  const { isFullscreen, toggleLayoutMode } = useLayoutMode();
-  const { fontFamily, setFontFamily } = useFontPreference();
-  const { editorScheme, setEditorScheme } = useEditorScheme();
-  const { themeMode, setThemeMode } = useThemePreference();
-  const {
-    shortcuts,
-    updateBinding,
-    toggleEnabled: toggleShortcutEnabled,
-    resetToDefaults: resetShortcutsToDefaults,
-  } = useKeybindings();
-
-  const value = useMemo<LayoutContextValue>(
-    () => ({
-      isFullscreen,
-      toggleLayoutMode,
-      fontFamily,
-      setFontFamily,
-      editorScheme,
-      setEditorScheme,
-      themeMode,
-      setThemeMode,
-      shortcuts,
-      updateBinding,
-      toggleShortcutEnabled,
-      resetShortcutsToDefaults,
-    }),
-    [
-      isFullscreen,
-      toggleLayoutMode,
-      fontFamily,
-      setFontFamily,
-      editorScheme,
-      setEditorScheme,
-      themeMode,
-      setThemeMode,
-      shortcuts,
-      updateBinding,
-      toggleShortcutEnabled,
-      resetShortcutsToDefaults,
-    ],
-  );
-
-  return <LayoutContext value={value}>{children}</LayoutContext>;
-}

package/src/hooks/useClipboard.ts

@@ -1,82 +0,0 @@
-import { useCallback } from "react";
-import { toast } from "sonner";
-import { extractContext, formatForLLM } from "../lib/context";
-import {
-  exportCommentsAsJson,
-  generatePrompt,
-  generateRawText,
-} from "../lib/export";
-import type { TranslationKey } from "../lib/i18n";
-import { truncate } from "../lib/utils";
-import type { Comment, Document, Selection } from "../types";
-
-interface UseClipboardParams {
-  comments: Comment[];
-  document: Document | undefined;
-  selection: Selection | undefined;
-  clearSelection: () => void;
-  t: (key: TranslationKey, params?: Record<string, string | number>) => string;
-}
-
-export function useClipboard({
-  comments,
-  document,
-  selection,
-  clearSelection,
-  t,
-}: UseClipboardParams) {
-  // Export handlers
-  const copyAll = useCallback(() => {
-    if (!document) return;
-    const prompt = generatePrompt(comments, document.fileName);
-    navigator.clipboard.writeText(prompt);
-    toast.success(t("toast.copiedAllComments"));
-  }, [comments, document, t]);
-
-  const copyAllRaw = useCallback(() => {
-    if (!document) return;
-    const raw = generateRawText(comments);
-    navigator.clipboard.writeText(raw);
-    toast.success(t("toast.copiedAllRaw"));
-  }, [comments, document, t]);
-
-  const exportJson = useCallback(() => {
-    if (!document) return;
-    exportCommentsAsJson(comments, document);
-  }, [comments, document]);
-
-  // Selection copy handlers
-  const copySelectionRaw = useCallback(() => {
-    if (!selection) return;
-
-    navigator.clipboard.writeText(selection.text);
-    toast.success(t("toast.copied", { text: truncate(selection.text) }));
-    clearSelection();
-  }, [selection, clearSelection, t]);
-
-  const copySelectionForLLM = useCallback(() => {
-    if (!selection || !document) return;
-
-    const context = extractContext({
-      content: document.content,
-      startOffset: selection.startOffset,
-      endOffset: selection.endOffset,
-    });
-    const formatted = formatForLLM({
-      context,
-      fileName: document.fileName,
-    });
-
-    navigator.clipboard.writeText(formatted);
-    toast.success(t("toast.copiedForLLM", { text: truncate(selection.text) }));
-    clearSelection();
-  }, [selection, document, clearSelection, t]);
-
-  return {
-    copyAll,
-    copyAllRaw,
-    exportJson,
-    copySelectionRaw,
-    copySelectionForLLM,
-  };
-}

package/src/hooks/useEditorScheme.ts

@@ -1,51 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { toast } from "sonner";
-import { type EditorScheme, EditorSchemes } from "../types";
-
-interface UseEditorSchemeResult {
-  editorScheme: EditorScheme;
-  setEditorScheme: (scheme: EditorScheme) => Promise<void>;
-}
-
-export function useEditorScheme(): UseEditorSchemeResult {
-  const [editorScheme, setEditorSchemeState] = useState<EditorScheme>(
-    EditorSchemes.NONE,
-  );
-
-  useEffect(() => {
-    const fetchSettings = async () => {
-      try {
-        const response = await fetch("/api/settings");
-        if (response.ok) {
-          const settings = await response.json();
-          setEditorSchemeState(settings.editorScheme || EditorSchemes.NONE);
-        }
-      } catch (err) {
-        console.error("Failed to fetch settings:", err);
-      }
-    };
-
-    fetchSettings();
-  }, []);
-
-  const setEditorScheme = useCallback(async (scheme: EditorScheme) => {
-    setEditorSchemeState(scheme);
-
-    try {
-      const response = await fetch("/api/settings", {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ editorScheme: scheme }),
-      });
-
-      if (!response.ok) {
-        throw new Error("Failed to save settings");
-      }
-    } catch (err) {
-      console.error("Failed to save editor scheme:", err);
-      toast.error("Failed to save editor scheme");
-    }
-  }, []);
-
-  return { editorScheme, setEditorScheme };
-}

package/src/hooks/useFontPreference.ts

@@ -1,59 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { toast } from "sonner";
-import { FontFamilies, type FontFamily } from "../types";
-
-interface UseFontPreferenceResult {
-  fontFamily: FontFamily;
-  setFontFamily: (font: FontFamily) => Promise<void>;
-  isLoading: boolean;
-}
-
-export function useFontPreference(): UseFontPreferenceResult {
-  const [fontFamily, setFontFamilyState] = useState<FontFamily>(
-    FontFamilies.SERIF,
-  );
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchSettings = async () => {
-      try {
-        const response = await fetch("/api/settings");
-        if (response.ok) {
-          const settings = await response.json();
-          setFontFamilyState(settings.fontFamily || FontFamilies.SERIF);
-        }
-      } catch (err) {
-        console.error("Failed to fetch settings:", err);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchSettings();
-  }, []);
-
-  const setFontFamily = useCallback(async (font: FontFamily) => {
-    setFontFamilyState(font);
-
-    try {
-      const response = await fetch("/api/settings", {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ fontFamily: font }),
-      });
-
-      if (!response.ok) {
-        throw new Error("Failed to save settings");
-      }
-    } catch (err) {
-      console.error("Failed to save font preference:", err);
-      toast.error("Failed to save font preference");
-    }
-  }, []);
-
-  return {
-    fontFamily,
-    setFontFamily,
-    isLoading,
-  };
-}

package/src/hooks/useKeybindings.ts

@@ -1,108 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { toast } from "sonner";
-import {
-  resolveShortcuts,
-  type ShortcutDefinition,
-} from "../lib/shortcut-registry";
-import type { KeybindingOverride, ShortcutBinding } from "../types";
-
-interface UseKeybindingsResult {
-  shortcuts: ShortcutDefinition[];
-  updateBinding: (id: string, binding: ShortcutBinding) => Promise<void>;
-  toggleEnabled: (id: string) => Promise<void>;
-  resetToDefaults: () => Promise<void>;
-  isLoading: boolean;
-}
-
-export function useKeybindings(): UseKeybindingsResult {
-  const [overrides, setOverrides] = useState<KeybindingOverride[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchKeybindings = async () => {
-      try {
-        const response = await fetch("/api/settings");
-        if (response.ok) {
-          const settings = await response.json();
-          setOverrides(settings.keybindings ?? []);
-        }
-      } catch (err) {
-        console.error("Failed to fetch keybindings:", err);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchKeybindings();
-  }, []);
-
-  const persistOverrides = useCallback(
-    async (newOverrides: KeybindingOverride[]) => {
-      try {
-        const response = await fetch("/api/settings");
-        if (!response.ok) return;
-
-        const currentSettings = await response.json();
-        const updated = { ...currentSettings, keybindings: newOverrides };
-
-        const putResponse = await fetch("/api/settings", {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(updated),
-        });
-
-        if (!putResponse.ok) {
-          throw new Error("Failed to save keybindings");
-        }
-      } catch (err) {
-        console.error("Failed to save keybindings:", err);
-        toast.error("Failed to save keybindings");
-      }
-    },
-    [],
-  );
-
-  const updateBinding = useCallback(
-    async (id: string, binding: ShortcutBinding) => {
-      const newOverrides = overrides.filter((o) => o.id !== id);
-      newOverrides.push({ id, binding, enabled: true });
-
-      setOverrides(newOverrides);
-      await persistOverrides(newOverrides);
-    },
-    [overrides, persistOverrides],
-  );
-
-  const toggleEnabled = useCallback(
-    async (id: string) => {
-      const existing = overrides.find((o) => o.id === id);
-      const currentEnabled = existing?.enabled ?? true;
-      const newOverrides = overrides.filter((o) => o.id !== id);
-      newOverrides.push({
-        id,
-        binding: existing?.binding,
-        enabled: !currentEnabled,
-      });
-
-      setOverrides(newOverrides);
-      await persistOverrides(newOverrides);
-    },
-    [overrides, persistOverrides],
-  );
-
-  const resetToDefaults = useCallback(async () => {
-    setOverrides([]);
-    await persistOverrides([]);
-    toast.success("Keyboard shortcuts reset to defaults");
-  }, [persistOverrides]);
-
-  const shortcuts = resolveShortcuts(overrides);
-
-  return {
-    shortcuts,
-    updateBinding,
-    toggleEnabled,
-    resetToDefaults,
-    isLoading,
-  };
-}