@peaske7/readit 0.1.4 → 0.1.6

package/src/components/ui/Dialog.tsx

@@ -0,0 +1,156 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { use } from "react";
+import { LayoutContext } from "../../contexts/LayoutContext";
+import { cn } from "../../lib/utils";
+import { FontFamilies } from "../../types";
+import { buttonVariants } from "./Button";
+import { textVariants } from "./Text";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/20 dark:bg-black/40 backdrop-blur-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2",
+          "bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm shadow-lg border border-zinc-200/40 dark:border-zinc-700/40 rounded-xl",
+          "flex flex-col animate-in",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className={cn(
+              buttonVariants({ variant: "ghost", size: "icon" }),
+              "absolute top-3 right-3 size-7",
+            )}
+          >
+            <X className="w-4 h-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn(
+        "flex items-center justify-between pl-4 pr-12 py-3 border-b border-zinc-100 dark:border-zinc-800",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  const layout = use(LayoutContext);
+  const fontClass = layout
+    ? layout.fontFamily === FontFamilies.SANS_SERIF
+      ? "font-sans"
+      : "font-serif"
+    : undefined;
+
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(textVariants({ variant: "section" }), fontClass, className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(textVariants({ variant: "caption" }), "text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogBody({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-body"
+      className={cn("flex-1 overflow-auto p-4", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/src/components/ui/DropdownMenu.tsx

@@ -0,0 +1,114 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../lib/utils";
+import { textVariants } from "./Text";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-xl py-1",
+          "bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm shadow-lg border border-zinc-200/40 dark:border-zinc-700/40",
+          "animate-in",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-variant={variant}
+      className={cn(
+        "w-full px-3 py-1.5 text-left text-sm outline-none select-none transition-colors duration-150 flex items-center gap-2 cursor-default",
+        "data-[variant=default]:text-zinc-600 dark:data-[variant=default]:text-zinc-400 data-[variant=default]:focus:bg-zinc-50 dark:data-[variant=default]:focus:bg-zinc-800 data-[variant=default]:focus:text-zinc-900 dark:data-[variant=default]:focus:text-zinc-100",
+        "data-[variant=destructive]:text-red-600 dark:data-[variant=destructive]:text-red-400 data-[variant=destructive]:focus:bg-red-50 dark:data-[variant=destructive]:focus:bg-red-950 data-[variant=destructive]:focus:text-red-700 dark:data-[variant=destructive]:focus:text-red-300",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("my-1 h-px bg-zinc-100 dark:bg-zinc-800", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label>) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      className={cn(
+        "px-3 py-1.5 font-medium",
+        textVariants({ variant: "caption" }),
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+};

package/src/components/ui/SeparatorDot.tsx

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

package/src/components/ui/Text.tsx

@@ -0,0 +1,54 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { use } from "react";
+import { LayoutContext } from "../../contexts/LayoutContext";
+import { cn } from "../../lib/utils";
+import { FontFamilies } from "../../types";
+
+const textVariants = cva("", {
+  variants: {
+    variant: {
+      title:
+        "text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-100",
+      section: "text-sm font-medium text-zinc-900 dark:text-zinc-100",
+      subsection: "text-xs font-medium text-zinc-700 dark:text-zinc-300",
+      overline:
+        "text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider",
+      body: "text-sm text-zinc-600 dark:text-zinc-400",
+      caption: "text-xs text-zinc-500 dark:text-zinc-400",
+      micro: "text-[10px] text-zinc-400 dark:text-zinc-500",
+    },
+  },
+  defaultVariants: {
+    variant: "body",
+  },
+});
+
+function Text({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"p"> &
+  VariantProps<typeof textVariants> & {
+    asChild?: boolean;
+  }) {
+  const layout = use(LayoutContext);
+  const fontClass = layout
+    ? layout.fontFamily === FontFamilies.SANS_SERIF
+      ? "font-sans"
+      : "font-serif"
+    : undefined;
+
+  const Comp = asChild ? Slot : "p";
+
+  return (
+    <Comp
+      data-slot="text"
+      className={cn(fontClass, textVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Text, textVariants };

package/src/contexts/CommentContext.tsx

@@ -0,0 +1,222 @@
+import {
+  createContext,
+  type ReactNode,
+  use,
+  useCallback,
+  useEffect,
+  useMemo,
+} from "react";
+import { toast } from "sonner";
+import { useCommentNavigation } from "../hooks/useCommentNavigation";
+import { useComments } from "../hooks/useComments";
+import { useReanchorMode } from "../hooks/useReanchorMode";
+import { extractContext, formatForLLM } from "../lib/context";
+import { generatePrompt } from "../lib/export";
+import { truncate } from "../lib/utils";
+import { useAppStore } from "../store";
+import type { Comment, DocumentType } from "../types";
+
+interface CommentContextValue {
+  // From useComments
+  comments: Comment[];
+  commentCount: number;
+  addComment: (
+    selectedText: string,
+    comment: string,
+    startOffset: number,
+    endOffset: number,
+  ) => void;
+  editComment: (id: string, newText: string) => void;
+  deleteComment: (id: string) => void;
+  deleteAll: () => void;
+  reanchorComment: (
+    id: string,
+    selectedText: string,
+    startOffset: number,
+    endOffset: number,
+  ) => void;
+  // Derived
+  sortedComments: Comment[];
+  // From useCommentNavigation
+  currentIndex: number;
+  hoveredCommentId: string | undefined;
+  setHoveredCommentId: (id: string | undefined) => void;
+  navigateToComment: (commentId: string) => void;
+  navigatePrevious: () => void;
+  navigateNext: () => void;
+  // From useReanchorMode
+  reanchorTarget: { commentId: string } | null;
+  startReanchor: (commentId: string) => void;
+  cancelReanchor: () => void;
+  // Copy operations
+  copyCommentRaw: (comment: Comment) => void;
+  copyCommentForLLM: (comment: Comment) => void;
+  copyAllForLLM: () => void;
+  // Scroll to highlight
+  scrollToHighlight: (commentId: string) => void;
+}
+
+export const CommentContext = createContext<CommentContextValue | null>(null);
+
+export function useCommentContext(): CommentContextValue {
+  const value = use(CommentContext);
+  if (!value) {
+    throw new Error("useCommentContext must be used within a CommentProvider");
+  }
+  return value;
+}
+
+interface CommentProviderProps {
+  filePath: string;
+  clean: boolean;
+  documentContent: string;
+  fileName: string;
+  documentType: DocumentType;
+  children: ReactNode;
+}
+
+export function CommentProvider({
+  filePath,
+  clean,
+  documentContent,
+  fileName,
+  documentType,
+  children,
+}: CommentProviderProps) {
+  const {
+    comments,
+    error: commentsError,
+    addComment,
+    deleteComment,
+    deleteAll,
+    editComment,
+    reanchorComment,
+  } = useComments(filePath, { clean });
+
+  // sortedComments from store (already sorted by setComments)
+  const sortedComments = useAppStore(
+    (s) => s.documents.get(filePath)?.sortedComments ?? [],
+  );
+
+  const {
+    currentIndex,
+    hoveredCommentId,
+    setHoveredCommentId,
+    navigateToComment,
+    navigatePrevious,
+    navigateNext,
+  } = useCommentNavigation(sortedComments);
+
+  const { reanchorTarget, startReanchor, cancelReanchor } = useReanchorMode();
+
+  // Show comments errors as toast
+  useEffect(() => {
+    if (commentsError) {
+      toast.error(commentsError);
+    }
+  }, [commentsError]);
+
+  const copyCommentRaw = useCallback((comment: Comment) => {
+    const raw = `${comment.selectedText}\n\n${comment.comment}`;
+    navigator.clipboard.writeText(raw);
+    toast.success(`Copied: "${truncate(comment.comment)}"`);
+  }, []);
+
+  const copyCommentForLLM = useCallback(
+    (comment: Comment) => {
+      const context = extractContext({
+        content: documentContent,
+        startOffset: comment.startOffset,
+        endOffset: comment.endOffset,
+      });
+      const formatted = formatForLLM({
+        context,
+        fileName,
+        comment: comment.comment,
+      });
+
+      navigator.clipboard.writeText(formatted);
+      toast.success(`Copied for LLM: "${truncate(comment.comment)}"`);
+    },
+    [documentContent, fileName],
+  );
+
+  const copyAllForLLM = useCallback(() => {
+    const prompt = generatePrompt(comments, fileName);
+    navigator.clipboard.writeText(prompt);
+    toast.success("Copied all comments");
+  }, [comments, fileName]);
+
+  const scrollToHighlight = useCallback(
+    (commentId: string) => {
+      if (documentType === "html") {
+        const iframe = window.document.querySelector("iframe");
+        iframe?.contentWindow?.postMessage(
+          { type: "scrollToHighlight", commentId },
+          "*",
+        );
+      } else {
+        const mark = window.document.querySelector(
+          `mark[data-comment-id="${commentId}"]`,
+        );
+        if (mark) {
+          mark.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+      }
+    },
+    [documentType],
+  );
+
+  const commentCount = comments.length;
+
+  const value = useMemo<CommentContextValue>(
+    () => ({
+      comments,
+      commentCount,
+      addComment,
+      editComment,
+      deleteComment,
+      deleteAll,
+      reanchorComment,
+      sortedComments,
+      currentIndex,
+      hoveredCommentId,
+      setHoveredCommentId,
+      navigateToComment,
+      navigatePrevious,
+      navigateNext,
+      reanchorTarget,
+      startReanchor,
+      cancelReanchor,
+      copyCommentRaw,
+      copyCommentForLLM,
+      copyAllForLLM,
+      scrollToHighlight,
+    }),
+    [
+      comments,
+      commentCount,
+      addComment,
+      editComment,
+      deleteComment,
+      deleteAll,
+      reanchorComment,
+      sortedComments,
+      currentIndex,
+      hoveredCommentId,
+      setHoveredCommentId,
+      navigateToComment,
+      navigatePrevious,
+      navigateNext,
+      reanchorTarget,
+      startReanchor,
+      cancelReanchor,
+      copyCommentRaw,
+      copyCommentForLLM,
+      copyAllForLLM,
+      scrollToHighlight,
+    ],
+  );
+
+  return <CommentContext value={value}>{children}</CommentContext>;
+}

package/src/contexts/LayoutContext.tsx

@@ -0,0 +1,76 @@
+import { createContext, type ReactNode, use, useMemo } from "react";
+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 { FontFamily, ShortcutBinding, ThemeMode } from "../types";
+
+interface LayoutContextValue {
+  isFullscreen: boolean;
+  toggleLayoutMode: () => void;
+  fontFamily: FontFamily;
+  setFontFamily: (font: FontFamily) => 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 {
+  filePath: string;
+  children: ReactNode;
+}
+
+export function LayoutProvider({ filePath, children }: LayoutProviderProps) {
+  const { isFullscreen, toggleLayoutMode } = useLayoutMode();
+  const { fontFamily, setFontFamily } = useFontPreference(filePath);
+  const { themeMode, setThemeMode } = useThemePreference();
+  const {
+    shortcuts,
+    updateBinding,
+    toggleEnabled: toggleShortcutEnabled,
+    resetToDefaults: resetShortcutsToDefaults,
+  } = useKeybindings(filePath);
+
+  const value = useMemo<LayoutContextValue>(
+    () => ({
+      isFullscreen,
+      toggleLayoutMode,
+      fontFamily,
+      setFontFamily,
+      themeMode,
+      setThemeMode,
+      shortcuts,
+      updateBinding,
+      toggleShortcutEnabled,
+      resetShortcutsToDefaults,
+    }),
+    [
+      isFullscreen,
+      toggleLayoutMode,
+      fontFamily,
+      setFontFamily,
+      themeMode,
+      setThemeMode,
+      shortcuts,
+      updateBinding,
+      toggleShortcutEnabled,
+      resetShortcutsToDefaults,
+    ],
+  );
+
+  return <LayoutContext value={value}>{children}</LayoutContext>;
+}

package/src/hooks/useClickOutside.ts

@@ -0,0 +1,35 @@
+import { type RefObject, useEffect } from "react";
+
+/**
+ * Close a dropdown/popover when clicking outside or pressing Escape.
+ * Only attaches listeners when `active` is true.
+ */
+export function useClickOutside(
+  ref: RefObject<HTMLElement | null>,
+  onClose: () => void,
+  active: boolean,
+): void {
+  useEffect(() => {
+    if (!active) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [ref, onClose, active]);
+}