@peaske7/readit 0.2.0 → 0.2.1

package/src/components/MarginNote.tsx

@@ -1,185 +0,0 @@
-import { memo, useCallback, useState } from "react";
-import { useCommentActions } from "../contexts/CommentContext";
-import { useLocale } from "../contexts/LocaleContext";
-import { usePositions } from "../contexts/PositionsContext";
-import { useSettings } from "../contexts/SettingsContext";
-import { cn } from "../lib/utils";
-import { type Comment, FontFamilies } from "../schema";
-import { useUI } from "../store";
-import { InlineEditor } from "./InlineEditor";
-import { ActionLink } from "./ui/ActionLink";
-
-interface MarginNoteProps {
-  comment: Comment;
-  commentIndex?: number;
-}
-
-function selectedTextClass(hovered: boolean) {
-  return cn(
-    "text-sm italic mb-1 line-clamp-1 flex items-center gap-1 transition-colors duration-150",
-    hovered
-      ? "text-zinc-600 dark:text-zinc-400"
-      : "text-zinc-400 dark:text-zinc-500",
-  );
-}
-
-function commentTextClass(hovered: boolean) {
-  return cn(
-    "text-sm whitespace-pre-wrap transition-colors duration-150",
-    hovered
-      ? "text-zinc-800 dark:text-zinc-200"
-      : "text-zinc-500 dark:text-zinc-400",
-  );
-}
-
-function badgeClass(hovered: boolean) {
-  return cn(
-    "absolute -left-4 top-2 text-xs tabular-nums transition-colors duration-150",
-    hovered
-      ? "text-zinc-600 dark:text-zinc-400"
-      : "text-zinc-400 dark:text-zinc-500",
-  );
-}
-
-export const MarginNote = memo(function MarginNote({
-  comment,
-  commentIndex = 0,
-}: MarginNoteProps) {
-  const { fontFamily } = useSettings();
-  const { t } = useLocale();
-  const {
-    editComment,
-    deleteComment,
-    copyComment,
-    setHoveredCommentId,
-    scrollToHighlight,
-  } = useCommentActions();
-
-  const pos = usePositions();
-  const refCallback = useCallback(
-    (el: HTMLElement | null) => {
-      if (el) pos.register(comment.id, el);
-      else pos.unregister(comment.id);
-    },
-    [pos, comment.id],
-  );
-
-  const isHovered = useUI((s) => s.hoveredCommentId === comment.id);
-  const fontClass =
-    fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif";
-  const [isEditing, setIsEditing] = useState(false);
-
-  const hasNote = comment.comment.trim().length > 0;
-
-  const handleCopy = () => copyComment(comment);
-
-  const createdAtFormatted = new Date(comment.createdAt).toLocaleString();
-
-  // Highlight-only (no note): minimal em-dash marker
-  if (!hasNote && !isEditing) {
-    return (
-      <article
-        ref={refCallback}
-        className="absolute left-0 right-0 group"
-        style={{
-          visibility: "hidden",
-          contentVisibility: "auto",
-          containIntrinsicSize: "auto 80px",
-        }}
-        title={`Added: ${createdAtFormatted}`}
-        data-comment-id={comment.id}
-        onMouseEnter={() => setHoveredCommentId(comment.id)}
-        onMouseLeave={() => setHoveredCommentId(undefined)}
-      >
-        <span className={badgeClass(isHovered)}>—</span>
-
-        <div className="pt-2 pb-2 pl-3">
-          <div
-            className={cn(
-              "flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity",
-              "gap-1.5 duration-150",
-              isHovered && "opacity-100",
-            )}
-          >
-            <ActionLink onClick={() => setIsEditing(true)}>
-              {t("marginNote.addNote")}
-            </ActionLink>
-            <span aria-hidden="true">·</span>
-            <ActionLink
-              variant="destructive"
-              onClick={() => deleteComment(comment.id)}
-            >
-              {t("marginNote.delete")}
-            </ActionLink>
-          </div>
-        </div>
-      </article>
-    );
-  }
-
-  return (
-    <article
-      ref={refCallback}
-      className="absolute left-0 right-0 group"
-      style={{ visibility: "hidden" }}
-      title={`Added: ${createdAtFormatted}`}
-      data-comment-id={comment.id}
-      onMouseEnter={() => setHoveredCommentId(comment.id)}
-      onMouseLeave={() => setHoveredCommentId(undefined)}
-    >
-      <span className={badgeClass(isHovered)}>{commentIndex + 1}</span>
-
-      <div
-        className={cn(
-          "relative border-t border-zinc-100 dark:border-zinc-800 pt-3 pb-2 pl-3 transition-colors duration-150",
-          comment.anchorConfidence === "unresolved" && "opacity-60",
-        )}
-      >
-        {!isEditing && (
-          <div className={cn(fontClass, selectedTextClass(isHovered))}>
-            <button
-              type="button"
-              onClick={() => scrollToHighlight(comment.id)}
-              className="cursor-pointer hover:underline text-left"
-            >
-              "{comment.selectedText}"
-            </button>
-          </div>
-        )}
-
-        {isEditing ? (
-          <InlineEditor
-            initialText={comment.comment}
-            onSave={(text) => {
-              editComment(comment.id, text);
-              setIsEditing(false);
-            }}
-            onCancel={() => setIsEditing(false)}
-          />
-        ) : (
-          <>
-            <p className={cn(fontClass, commentTextClass(isHovered))}>
-              {comment.comment}
-            </p>
-            <div className="flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity gap-1.5 mt-2">
-              <ActionLink onClick={() => setIsEditing(true)}>
-                {t("marginNote.edit")}
-              </ActionLink>
-              <span aria-hidden="true">·</span>
-              <ActionLink
-                variant="destructive"
-                onClick={() => deleteComment(comment.id)}
-              >
-                {t("marginNote.delete")}
-              </ActionLink>
-              <span aria-hidden="true">·</span>
-              <ActionLink onClick={handleCopy}>
-                {t("marginNote.copy")}
-              </ActionLink>
-            </div>
-          </>
-        )}
-      </div>
-    </article>
-  );
-});

package/src/components/MarginNotes.tsx

@@ -1,23 +0,0 @@
-import { memo } from "react";
-import type { Comment } from "../schema";
-import { MarginNote } from "./MarginNote";
-
-interface MarginNotesProps {
-  sortedComments: Comment[];
-}
-
-export const MarginNotes = memo(function MarginNotes({
-  sortedComments,
-}: MarginNotesProps) {
-  if (sortedComments.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="relative w-64">
-      {sortedComments.map((comment, index) => (
-        <MarginNote key={comment.id} comment={comment} commentIndex={index} />
-      ))}
-    </div>
-  );
-});

package/src/components/RawModal.tsx

@@ -1,144 +0,0 @@
-import { Copy } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
-import { toast } from "sonner";
-import { useLocale } from "../contexts/LocaleContext";
-import { useAppStore } from "../store";
-import { Button } from "./ui/Button";
-import {
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "./ui/Dialog";
-import { Text } from "./ui/Text";
-
-interface RawModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-type ModalState =
-  | { status: "idle" }
-  | { status: "loading" }
-  | { status: "error"; error: string }
-  | { status: "empty"; path: string }
-  | { status: "success"; content: string; path: string };
-
-export function RawModal({ isOpen, onClose }: RawModalProps) {
-  const { t } = useLocale();
-  const [state, setState] = useState<ModalState>({ status: "idle" });
-  const activeDocumentPath = useAppStore((s) => s.activeDocumentPath);
-
-  // Fetch raw comments when modal opens
-  useEffect(() => {
-    if (!isOpen) {
-      setState({ status: "idle" });
-      return;
-    }
-
-    setState({ status: "loading" });
-
-    const fetchRawComments = async () => {
-      try {
-        const query = activeDocumentPath
-          ? `?path=${encodeURIComponent(activeDocumentPath)}`
-          : "";
-        const response = await fetch(`/api/comments/raw${query}`);
-        if (!response.ok) {
-          throw new Error("Failed to fetch raw comments");
-        }
-        const result = await response.json();
-        if (result.content === null) {
-          setState({ status: "empty", path: result.path });
-        } else {
-          setState({
-            status: "success",
-            content: result.content,
-            path: result.path,
-          });
-        }
-      } catch (err) {
-        setState({
-          status: "error",
-          error: err instanceof Error ? err.message : "Unknown error",
-        });
-      }
-    };
-
-    fetchRawComments();
-  }, [isOpen, activeDocumentPath]);
-
-  const handleCopy = useCallback(async () => {
-    if (state.status !== "success") return;
-
-    try {
-      await navigator.clipboard.writeText(state.content);
-      toast.success(t("rawModal.copiedToClipboard"));
-    } catch {
-      toast.error(t("rawModal.failedToCopy"));
-    }
-  }, [state, t]);
-
-  return (
-    <Dialog
-      open={isOpen}
-      onOpenChange={(open) => {
-        if (!open) onClose();
-      }}
-    >
-      <DialogContent className="max-w-2xl max-h-[80vh]" onClose={onClose}>
-        <DialogHeader>
-          <DialogTitle>{t("rawModal.title")}</DialogTitle>
-          {state.status === "success" && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="size-7"
-              onClick={handleCopy}
-              title={t("rawModal.copyTitle")}
-            >
-              <Copy className="w-4 h-4" />
-            </Button>
-          )}
-        </DialogHeader>
-
-        {(state.status === "success" || state.status === "empty") && (
-          <div className="px-4 py-2 border-b border-zinc-50 dark:border-zinc-800 text-xs text-zinc-400 dark:text-zinc-500 font-mono truncate">
-            {state.path}
-          </div>
-        )}
-
-        <DialogBody>
-          {state.status === "loading" && (
-            <Text variant="caption" className="text-center py-8">
-              {t("rawModal.loading")}
-            </Text>
-          )}
-
-          {state.status === "error" && (
-            <Text variant="body" className="text-red-500 text-center py-8">
-              {state.error}
-            </Text>
-          )}
-
-          {state.status === "empty" && (
-            <Text variant="caption" className="text-center py-8">
-              {t("rawModal.noComments")}
-            </Text>
-          )}
-
-          {state.status === "success" && (
-            <Text
-              variant="body"
-              as="pre"
-              className="text-xs font-mono whitespace-pre-wrap break-words leading-relaxed"
-            >
-              {state.content}
-            </Text>
-          )}
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ReanchorConfirm.tsx

@@ -1,36 +0,0 @@
-import { useLocale } from "../contexts/LocaleContext";
-import { Button } from "./ui/Button";
-import { Text } from "./ui/Text";
-
-interface ReanchorConfirmProps {
-  selectionText: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-}
-
-export function ReanchorConfirm({
-  selectionText,
-  onConfirm,
-  onCancel,
-}: ReanchorConfirmProps) {
-  const { t } = useLocale();
-
-  return (
-    <div className="border-t border-zinc-200 dark:border-zinc-700 pt-2 pb-3 pl-6">
-      <Text variant="body" className="mb-2">
-        {t("reanchor.question")}
-      </Text>
-      <Text variant="caption" className="italic line-clamp-2 mb-2">
-        "{selectionText}"
-      </Text>
-      <div className="flex gap-3 text-sm">
-        <Button variant="link" size="sm" onClick={onConfirm}>
-          {t("reanchor.confirm")}
-        </Button>
-        <Button variant="ghost" size="sm" onClick={onCancel}>
-          {t("reanchor.cancel")}
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/components/SettingsModal.tsx

@@ -1,232 +0,0 @@
-import { Check, ChevronDown } from "lucide-react";
-import { useLocale } from "../contexts/LocaleContext";
-import { useSettings } from "../contexts/SettingsContext";
-import { type Locale, Locales } from "../lib/i18n";
-import { cn } from "../lib/utils";
-import {
-  FontFamilies,
-  type FontFamily,
-  type ThemeMode,
-  ThemeModes,
-} from "../schema";
-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>
-  );
-}
-
-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>
-  );
-}
-
-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",
-);
-
-export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
-  const { fontFamily, setFontFamily, themeMode, setThemeMode } = useSettings();
-  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 activeTheme =
-    themeOptions.find((o) => o.value === themeMode) ?? themeOptions[0];
-  const activeFont =
-    fontOptions.find((o) => o.value === fontFamily) ?? fontOptions[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" onClose={onClose}>
-        <DialogHeader>
-          <DialogTitle>{t("settings.title")}</DialogTitle>
-        </DialogHeader>
-
-        <DialogBody className="space-y-4">
-          <div>
-            <Text variant="overline" as="h3" className="mb-3">
-              {t("settings.theme")}
-            </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" as="h3" className="mb-3">
-              {t("settings.font")}
-            </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" as="h3" className="mb-3">
-              {t("settings.language")}
-            </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>
-        </DialogBody>
-      </DialogContent>
-    </Dialog>
-  );
-}

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 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 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 dark:border-zinc-100 text-zinc-900 dark:text-zinc-100"
-                : "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800",
-            )}
-            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 dark:hover:bg-zinc-700"
-              onClick={(e) => {
-                e.stopPropagation();
-                closeDocument(filePath);
-              }}
-            >
-              <X className="h-3 w-3" />
-            </button>
-          </div>
-        );
-      })}
-    </div>
-  );
-}