@peaske7/readit 0.1.8 → 0.2.0

package/src/components/comments/CommentInput.tsx

@@ -1,9 +1,8 @@
-import { BotMessageSquare, Copy } from "lucide-react";
 import { use, useEffect, useRef, useState } from "react";
-import { LayoutContext } from "../../contexts/LayoutContext";
 import { useLocale } from "../../contexts/LocaleContext";
+import { SettingsContext } from "../../contexts/SettingsContext";
 import { cn } from "../../lib/utils";
-import { FontFamilies } from "../../types";
+import { FontFamilies } from "../../schema";
 import { Button } from "../ui/Button";
 import { Text } from "../ui/Text";
 
@@ -11,21 +10,17 @@ interface CommentInputProps {
   selectedText: string | null;
   onSubmit: (commentText: string) => void;
   onCancel: () => void;
-  onCopyRaw: () => void;
-  onCopyForLLM: () => void;
 }
 
 export function CommentInput({
   selectedText,
   onSubmit,
   onCancel,
-  onCopyRaw,
-  onCopyForLLM,
 }: CommentInputProps) {
   const { t } = useLocale();
-  const layout = use(LayoutContext);
-  const fontClass = layout
-    ? layout.fontFamily === FontFamilies.SANS_SERIF
+  const settings = use(SettingsContext);
+  const fontClass = settings
+    ? settings.fontFamily === FontFamilies.SANS_SERIF
       ? "font-sans"
       : "font-serif"
     : undefined;
@@ -34,7 +29,6 @@ export function CommentInput({
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
-    // Only auto-focus on devices with precise pointing (desktop)
     if (textareaRef.current && window.matchMedia("(pointer: fine)").matches) {
       textareaRef.current.focus();
     }
@@ -64,8 +58,8 @@ export function CommentInput({
       data-comment-input
       className="border-t border-zinc-200 dark:border-zinc-700 pt-3 pb-2"
     >
-      <Text variant="caption" asChild>
-        <div className="italic mb-2 line-clamp-2">"{selectedText}"</div>
+      <Text variant="caption" as="div" className="italic mb-2 line-clamp-2">
+        "{selectedText}"
       </Text>
       <textarea
         ref={textareaRef}
@@ -80,28 +74,6 @@ export function CommentInput({
         onKeyDown={handleKeyDown}
       />
       <div className="flex justify-end items-center gap-3 mt-2 text-sm">
-        <div className="flex gap-1">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-7 text-zinc-300 dark:text-zinc-600 hover:text-zinc-500 dark:hover:text-zinc-400"
-            onClick={onCopyRaw}
-            title={t("comment.copyRawTitle")}
-            aria-label={t("comment.copyRawLabel")}
-          >
-            <Copy size={14} />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-7 text-zinc-300 dark:text-zinc-600 hover:text-zinc-500 dark:hover:text-zinc-400"
-            onClick={onCopyForLLM}
-            title={t("comment.copyLLMTitle")}
-            aria-label={t("comment.copyLLMLabel")}
-          >
-            <BotMessageSquare size={14} />
-          </Button>
-        </div>
         <Button variant="ghost" size="sm" onClick={onCancel}>
           {t("comment.cancel")}
         </Button>

package/src/components/comments/CommentListItem.tsx

@@ -2,15 +2,13 @@ import { useState } from "react";
 import { useCommentContext } from "../../contexts/CommentContext";
 import { useLocale } from "../../contexts/LocaleContext";
 import { cn } from "../../lib/utils";
-import type { Comment } from "../../types";
+import type { Comment } from "../../schema";
 import { InlineEditor } from "../InlineEditor";
-import { ActionBar } from "../ui/ActionBar";
 import { ActionLink } from "../ui/ActionLink";
 import { Text } from "../ui/Text";
 
 interface CommentListItemProps {
   comment: Comment;
-  /** Called after navigation actions (Go to, Re-anchor) to close parent dropdown */
   onAction?: () => void;
 }
 
@@ -42,12 +40,12 @@ export function CommentListItem({ comment, onAction }: CommentListItemProps) {
       )}
     >
       <div className="flex items-center gap-1.5 mb-1">
-        <Text variant="caption" asChild>
-          <span className="italic line-clamp-1">"{comment.selectedText}"</span>
+        <Text variant="caption" as="span" className="italic line-clamp-1">
+          "{comment.selectedText}"
         </Text>
         {isUnresolved && (
-          <Text variant="caption" asChild>
-            <span className="shrink-0">· {t("commentList.unresolved")}</span>
+          <Text variant="caption" as="span" className="shrink-0">
+            · {t("commentList.unresolved")}
           </Text>
         )}
       </div>
@@ -63,11 +61,11 @@ export function CommentListItem({ comment, onAction }: CommentListItemProps) {
         />
       ) : (
         <>
-          <Text variant="body" asChild>
-            <p className="line-clamp-2">{comment.comment}</p>
+          <Text variant="body" className="line-clamp-2">
+            {comment.comment}
           </Text>
 
-          <ActionBar className="gap-3 mt-1.5">
+          <div className="flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity gap-3 mt-1.5">
             <ActionLink onClick={() => setIsEditing(true)}>
               {t("commentList.edit")}
             </ActionLink>
@@ -84,7 +82,7 @@ export function CommentListItem({ comment, onAction }: CommentListItemProps) {
                 {t("commentList.reanchor")}
               </ActionLink>
             )}
-          </ActionBar>
+          </div>
         </>
       )}
     </div>

package/src/components/comments/CommentManager.tsx

@@ -1,7 +1,13 @@
 import { Copy, Trash2 } from "lucide-react";
-import { useState } from "react";
-import { useCommentContext } from "../../contexts/CommentContext";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import {
+  useCommentActions,
+  useCommentData,
+} from "../../contexts/CommentContext";
 import { useLocale } from "../../contexts/LocaleContext";
+import { generatePrompt } from "../../lib/export";
+import { useAppStore } from "../../store";
 import { Button } from "../ui/Button";
 import { Text } from "../ui/Text";
 import { CommentListItem } from "./CommentListItem";
@@ -12,7 +18,17 @@ interface CommentManagerProps {
 
 export function CommentManager({ onClose }: CommentManagerProps) {
   const { t } = useLocale();
-  const { comments, copyAllForLLM, deleteAll } = useCommentContext();
+  const { comments } = useCommentData();
+  const { deleteAll } = useCommentActions();
+  const fileName = useAppStore(
+    (s) => s.getActiveDocumentState()?.document.fileName ?? "",
+  );
+
+  const copyAll = useCallback(() => {
+    const text = generatePrompt(comments, fileName);
+    navigator.clipboard.writeText(text);
+    toast.success(t("toast.copiedAllComments"));
+  }, [comments, fileName, t]);
   const [confirmingDelete, setConfirmingDelete] = useState(false);
 
   const unresolvedCount = comments.filter(
@@ -58,45 +74,45 @@ export function CommentManager({ onClose }: CommentManagerProps) {
           </div>
         </div>
       ) : (
-        <Text variant="caption" asChild>
-          <div className="flex items-center justify-between px-3 py-2 border-b border-zinc-100">
-            <span>
-              {resolvedCount}
-              {unresolvedCount > 0 && (
-                <span>
-                  {" "}
-                  · {unresolvedCount} {t("commentManager.unresolved")}
-                </span>
-              )}
-            </span>
-            <span className="flex items-center gap-1">
-              <button
-                type="button"
-                className="p-1 rounded hover:bg-zinc-100 text-zinc-400 hover:text-zinc-600 transition-colors"
-                onClick={copyAllForLLM}
-                title={t("commentManager.copyAllTitle")}
-              >
-                <Copy size={13} />
-              </button>
-              <button
-                type="button"
-                className="p-1 rounded hover:bg-zinc-100 text-zinc-400 hover:text-red-500 transition-colors"
-                onClick={() => setConfirmingDelete(true)}
-                title={t("commentManager.deleteAllTitle")}
-              >
-                <Trash2 size={13} />
-              </button>
-            </span>
-          </div>
+        <Text
+          variant="caption"
+          as="div"
+          className="flex items-center justify-between px-3 py-2 border-b border-zinc-100"
+        >
+          <span>
+            {resolvedCount}
+            {unresolvedCount > 0 && (
+              <span>
+                {" "}
+                · {unresolvedCount} {t("commentManager.unresolved")}
+              </span>
+            )}
+          </span>
+          <span className="flex items-center gap-1">
+            <button
+              type="button"
+              className="p-1 rounded hover:bg-zinc-100 text-zinc-400 hover:text-zinc-600 transition-colors"
+              onClick={copyAll}
+              title={t("commentManager.copyAllTitle")}
+            >
+              <Copy size={13} />
+            </button>
+            <button
+              type="button"
+              className="p-1 rounded hover:bg-zinc-100 text-zinc-400 hover:text-red-500 transition-colors"
+              onClick={() => setConfirmingDelete(true)}
+              title={t("commentManager.deleteAllTitle")}
+            >
+              <Trash2 size={13} />
+            </button>
+          </span>
         </Text>
       )}
 
       <div className="overflow-y-auto max-h-80">
         {sortedComments.length === 0 ? (
-          <Text variant="caption" asChild>
-            <div className="px-3 py-4 text-center">
-              {t("commentManager.noComments")}
-            </div>
+          <Text variant="caption" as="div" className="px-3 py-4 text-center">
+            {t("commentManager.noComments")}
           </Text>
         ) : (
           sortedComments.map((comment) => (

package/src/components/comments/CommentNav.tsx

@@ -74,20 +74,20 @@ export function CommentNav() {
           <ChevronLeft className="w-4 h-4" />
         </Button>
 
-        <Text variant="body" asChild>
-          <span
-            className={cn(
-              "px-3 tabular-nums select-none min-w-[4rem] text-center",
-              "transition-transform duration-200 ease-out",
-              animating === "prev" && "-translate-x-0.5",
-              animating === "next" && "translate-x-0.5",
-            )}
-          >
-            {t("commentNav.of", {
-              current: currentIndex + 1,
-              total: totalComments,
-            })}
-          </span>
+        <Text
+          variant="body"
+          as="span"
+          className={cn(
+            "px-3 tabular-nums select-none min-w-[4rem] text-center",
+            "transition-transform duration-200 ease-out",
+            animating === "prev" && "-translate-x-0.5",
+            animating === "next" && "translate-x-0.5",
+          )}
+        >
+          {t("commentNav.of", {
+            current: currentIndex + 1,
+            total: totalComments,
+          })}
         </Text>
 
         <Button

package/src/components/ui/ActionLink.tsx

@@ -1,32 +1,28 @@
-import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
-const actionLinkVariants = cva(
-  "cursor-pointer transition-colors duration-150",
-  {
-    variants: {
-      variant: {
-        default: "hover:text-zinc-600",
-        destructive: "hover:text-red-500",
-      },
-    },
-    defaultVariants: { variant: "default" },
-  },
-);
+const variantStyles = {
+  default: "hover:text-zinc-600",
+  destructive: "hover:text-red-500",
+} as const;
+
+type ActionLinkVariant = keyof typeof variantStyles;
 
 function ActionLink({
   className,
-  variant,
+  variant = "default",
   ...props
-}: React.ComponentProps<"button"> & VariantProps<typeof actionLinkVariants>) {
+}: React.ComponentProps<"button"> & { variant?: ActionLinkVariant }) {
   return (
     <button
       type="button"
-      data-slot="action-link"
-      className={cn(actionLinkVariants({ variant, className }))}
+      className={cn(
+        "cursor-pointer transition-colors duration-150",
+        variantStyles[variant],
+        className,
+      )}
       {...props}
     />
   );
 }
 
-export { ActionLink, actionLinkVariants };
+export { ActionLink };

package/src/components/ui/Button.tsx

@@ -1,55 +1,54 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium transition-colors duration-150 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-blue-600 text-white hover:bg-blue-700",
-        secondary:
-          "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 hover:bg-zinc-200 dark:hover:bg-zinc-700",
-        outline:
-          "border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800",
-        ghost:
-          "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100",
-        destructive: "bg-red-600 text-white hover:bg-red-700",
-        link: "text-zinc-600 dark:text-zinc-400 underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4",
-        sm: "h-8 px-3 text-xs",
-        lg: "h-10 px-6",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
+const baseStyles =
+  "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium transition-colors duration-150 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+const variantStyles = {
+  default: "bg-blue-600 text-white hover:bg-blue-700",
+  secondary:
+    "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 hover:bg-zinc-200 dark:hover:bg-zinc-700",
+  outline:
+    "border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800",
+  ghost:
+    "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100",
+  destructive: "bg-red-600 text-white hover:bg-red-700",
+  link: "text-zinc-600 dark:text-zinc-400 underline-offset-4 hover:underline",
+} as const;
+
+const sizeStyles = {
+  default: "h-9 px-4",
+  sm: "h-8 px-3 text-xs",
+  lg: "h-10 px-6",
+  icon: "size-9",
+} as const;
+
+type ButtonVariant = keyof typeof variantStyles;
+type ButtonSize = keyof typeof sizeStyles;
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
 
 function Button({
   className,
-  variant,
-  size,
-  asChild = false,
+  variant = "default",
+  size = "default",
   ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
+}: ButtonProps) {
   return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+    <button
+      type="button"
+      className={cn(
+        baseStyles,
+        variantStyles[variant],
+        sizeStyles[size],
+        className,
+      )}
       {...props}
     />
   );
 }
 
-export { Button, buttonVariants };
+export type { ButtonProps, ButtonSize, ButtonVariant };
+export { Button };

package/src/components/ui/Dialog.tsx

@@ -1,95 +1,84 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
-import { use } from "react";
-import { LayoutContext } from "../../contexts/LayoutContext";
+import { useEffect, useRef } from "react";
 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} />;
+interface DialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
 }
 
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
+function Dialog({ open, onOpenChange, children }: DialogProps) {
+  const ref = useRef<HTMLDialogElement>(null);
 
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
+  useEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
 
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
+
+    const handleClose = () => onOpenChange(false);
+    dialog.addEventListener("close", handleClose);
+    return () => dialog.removeEventListener("close", handleClose);
+  }, [onOpenChange]);
+
+  const handleClick = (e: React.MouseEvent<HTMLDialogElement>) => {
+    if (e.target === ref.current) onOpenChange(false);
+  };
 
-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}
-    />
+    <dialog
+      ref={ref}
+      onClick={handleClick}
+      className="backdrop:bg-black/20 dark:backdrop:bg-black/40 backdrop:backdrop-blur-sm bg-transparent p-0 m-auto max-w-none"
+    >
+      {open ? children : null}
+    </dialog>
   );
 }
 
 function DialogContent({
   className,
   children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
+  onClose,
+}: {
+  className?: string;
+  children: React.ReactNode;
+  onClose?: () => void;
 }) {
   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>
+    <div
+      className={cn(
+        "w-full 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",
+        className,
+      )}
+    >
+      {children}
+      {onClose && (
+        <button
+          type="button"
+          onClick={onClose}
+          className="absolute top-3 right-3 size-7 inline-flex items-center justify-center rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
+    </div>
   );
 }
 
 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,
@@ -101,56 +90,27 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 
 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>) {
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
   return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn(textVariants({ variant: "caption" }), "text-sm", className)}
-      {...props}
-    />
+    <h2
+      className={cn(
+        "text-sm font-medium text-zinc-900 dark:text-zinc-100",
+        className,
+      )}
+    >
+      {children}
+    </h2>
   );
 }
 
 function DialogBody({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="dialog-body"
-      className={cn("flex-1 overflow-auto p-4", className)}
-      {...props}
-    />
+    <div className={cn("flex-1 overflow-auto p-4", className)} {...props} />
   );
 }
 
-export {
-  Dialog,
-  DialogBody,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};
+export { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle };