doclific 0.1.0

package/frontend/src/components/ui/file-selector.tsx

@@ -0,0 +1,339 @@
+import { useState, useMemo } from "react";
+import { ChevronRight, ChevronDown, File, Folder, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { orpcTs } from "@/lib/orpc";
+
+interface FileNode {
+    name: string;
+    path: string;
+    type: "file" | "directory";
+    children?: FileNode[];
+}
+
+interface FileSelectorProps {
+    open: boolean;
+    onClose: () => void;
+    onSelect: (filePath: string, startLine: number, endLine: number) => void;
+    currentFilePath?: string;
+    currentStartLine?: string;
+    currentEndLine?: string;
+}
+
+export function FileSelector({
+    open,
+    onClose,
+    onSelect,
+    currentFilePath,
+    currentStartLine,
+    currentEndLine,
+}: FileSelectorProps) {
+    const queryClient = useQueryClient();
+    const [expandedDirs, setExpandedDirs] = useState<Set<string>>(new Set());
+    const [selectedFile, setSelectedFile] = useState<string>(currentFilePath || "");
+    const [startLineInput, setStartLineInput] = useState<string>(
+        currentStartLine || ""
+    );
+    const [endLineInput, setEndLineInput] = useState<string>(
+        currentEndLine || ""
+    );
+    const [folderContents, setFolderContents] = useState<Map<string, FileNode[]>>(new Map());
+
+    const rootFolderQuery = useQuery({
+        ...orpcTs.codebase.getFolderContents.queryOptions({
+            input: { filePath: "" },
+        }),
+        enabled: open,
+    });
+
+    // Merge all folder contents for rendering (includes root folder)
+    const allFolderContents = useMemo(() => {
+        const merged = new Map(folderContents);
+        if (rootFolderQuery.data) {
+            merged.set("", rootFolderQuery.data);
+        }
+        return merged;
+    }, [folderContents, rootFolderQuery.data]);
+
+    const fileContentQuery = useQuery({
+        ...orpcTs.codebase.getFileContents.queryOptions({
+            input: { filePath: selectedFile },
+        }),
+        enabled: open && !!selectedFile,
+    });
+
+    const fileContent = fileContentQuery.data?.contents || "";
+    const lineCount = fileContent.split("\n").length;
+
+    // Convert inputs to numbers for calculations, with defaults
+    const startLine = startLineInput === "" ? 1 : Math.max(1, parseInt(startLineInput) || 1);
+    const endLine = endLineInput === ""
+        ? (fileContentQuery.data && lineCount > 0 ? Math.min(50, lineCount) : 1)
+        : Math.min(lineCount, Math.max(startLine, parseInt(endLineInput) || lineCount));
+
+    const toggleExpanded = async (path: string) => {
+        const newExpanded = new Set(expandedDirs);
+        if (newExpanded.has(path)) {
+            newExpanded.delete(path);
+        } else {
+            newExpanded.add(path);
+            // Fetch folder contents if not already loaded
+            if (!folderContents.has(path)) {
+                try {
+                    const data = await queryClient.fetchQuery(
+                        orpcTs.codebase.getFolderContents.queryOptions({
+                            input: { filePath: path },
+                        })
+                    );
+                    setFolderContents((prev) => {
+                        const newMap = new Map(prev);
+                        newMap.set(path, data || []);
+                        return newMap;
+                    });
+                } catch (error) {
+                    console.error("Failed to fetch folder contents:", error);
+                }
+            }
+        }
+        setExpandedDirs(newExpanded);
+    };
+
+    const handleSelectFile = (filePath: string) => {
+        setSelectedFile(filePath);
+        setStartLineInput("");
+        setEndLineInput("");
+        fileContentQuery.refetch();
+    };
+
+    const handleConfirm = () => {
+        if (selectedFile) {
+            onSelect(selectedFile, startLine, endLine);
+            onClose();
+        }
+    };
+
+    const renderFileTree = (nodes: FileNode[], depth = 0) => {
+        return (
+            <div>
+                {nodes.map((node) => {
+                    const children = node.type === "directory" ? allFolderContents.get(node.path) : undefined;
+                    const isLoading = node.type === "directory" && expandedDirs.has(node.path) && !allFolderContents.has(node.path);
+
+                    return (
+                        <div key={node.path}>
+                            <div
+                                className={cn(
+                                    "flex items-center gap-1 px-2 py-1.5 hover:bg-muted transition-colors cursor-pointer rounded text-sm",
+                                    selectedFile === node.path && node.type === "file"
+                                        ? "bg-primary/10"
+                                        : ""
+                                )}
+                                style={{ paddingLeft: `${depth * 16 + 8}px` }}
+                            >
+                                {node.type === "directory" ? (
+                                    <>
+                                        <button
+                                            onClick={() => toggleExpanded(node.path)}
+                                            className="flex items-center justify-center w-4 h-4 p-0"
+                                            disabled={isLoading}
+                                        >
+                                            {isLoading ? (
+                                                <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+                                            ) : expandedDirs.has(node.path) ? (
+                                                <ChevronDown className="w-4 h-4" />
+                                            ) : (
+                                                <ChevronRight className="w-4 h-4" />
+                                            )}
+                                        </button>
+                                        <Folder className="w-4 h-4 text-blue-500 flex-shrink-0" />
+                                        <span className="text-foreground">{node.name}</span>
+                                    </>
+                                ) : (
+                                    <>
+                                        <div className="w-4" />
+                                        <File className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                                        <button
+                                            onClick={() => handleSelectFile(node.path)}
+                                            className="text-foreground hover:text-primary"
+                                        >
+                                            {node.name}
+                                        </button>
+                                    </>
+                                )}
+                            </div>
+                            {node.type === "directory" &&
+                                expandedDirs.has(node.path) &&
+                                children && (
+                                    <>{renderFileTree(children, depth + 1)}</>
+                                )}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    if (!open) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+            {/* Backdrop */}
+            <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+
+            {/* Modal */}
+            <div className="relative z-50 w-full max-w-4xl min-h-[80vh] max-h-[calc(100vh-2rem)] mx-4 bg-background rounded-lg shadow-xl flex flex-col overflow-hidden border">
+                {/* Header */}
+                <div className="flex items-center justify-between px-6 py-4 border-b">
+                    <div>
+                        <h2 className="text-lg font-semibold">Select File and Lines</h2>
+                        <p className="text-sm text-muted-foreground">
+                            Choose a file and specify the line range you want to display
+                        </p>
+                    </div>
+                    <button
+                        onClick={onClose}
+                        className="p-1 hover:bg-muted rounded"
+                    >
+                        <X className="w-6 h-6" />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="flex gap-4 flex-1 overflow-hidden p-6">
+                    {/* File browser */}
+                    <div className="flex-1 border rounded-lg overflow-y-auto bg-muted/50 p-2">
+                        {rootFolderQuery.isLoading ? (
+                            <div className="p-4 text-sm text-muted-foreground">
+                                Loading files...
+                            </div>
+                        ) : (
+                            renderFileTree(allFolderContents.get("") || [])
+                        )}
+                    </div>
+
+                    {/* Preview and line selection */}
+                    <div className="flex-1 flex flex-col gap-4">
+                        {selectedFile ? (
+                            <>
+                                <div>
+                                    <p className="text-sm font-semibold mb-2">
+                                        Selected:{" "}
+                                        <span className="text-primary">{selectedFile}</span>
+                                    </p>
+                                    <p className="text-xs text-muted-foreground">
+                                        Total lines: {lineCount}
+                                    </p>
+                                </div>
+
+                                {/* Line range inputs */}
+                                <div className="flex gap-4">
+                                    <div className="flex-1">
+                                        <label className="text-xs font-medium text-muted-foreground block mb-1">
+                                            Start Line
+                                        </label>
+                                        <input
+                                            type="text"
+                                            inputMode="numeric"
+                                            value={startLineInput}
+                                            onChange={(e) => {
+                                                const value = e.target.value;
+                                                // Allow empty string or valid numbers
+                                                if (value === "" || /^\d+$/.test(value)) {
+                                                    setStartLineInput(value);
+                                                }
+                                            }}
+                                            onBlur={(e) => {
+                                                // Validate on blur - set to 1 if empty or invalid
+                                                const num = parseInt(e.target.value);
+                                                if (isNaN(num) || num < 1) {
+                                                    setStartLineInput("");
+                                                } else if (num > lineCount) {
+                                                    setStartLineInput(String(lineCount));
+                                                }
+                                            }}
+                                            className="w-full px-2 py-1 border rounded text-sm bg-background text-foreground"
+                                            placeholder="1"
+                                        />
+                                    </div>
+                                    <div className="flex-1">
+                                        <label className="text-xs font-medium text-muted-foreground block mb-1">
+                                            End Line
+                                        </label>
+                                        <input
+                                            type="text"
+                                            inputMode="numeric"
+                                            value={endLineInput}
+                                            onChange={(e) => {
+                                                const value = e.target.value;
+                                                // Allow empty string or valid numbers
+                                                if (value === "" || /^\d+$/.test(value)) {
+                                                    setEndLineInput(value);
+                                                }
+                                            }}
+                                            onBlur={(e) => {
+                                                // Validate on blur
+                                                const num = parseInt(e.target.value);
+                                                if (isNaN(num) || num < startLine) {
+                                                    setEndLineInput("");
+                                                } else if (num > lineCount) {
+                                                    setEndLineInput(String(lineCount));
+                                                }
+                                            }}
+                                            className="w-full px-2 py-1 border rounded text-sm bg-background text-foreground"
+                                            placeholder={String(lineCount)}
+                                        />
+                                    </div>
+                                </div>
+
+                                {/* Preview */}
+                                <div className="flex-1 flex flex-col">
+                                    <p className="text-xs font-medium text-muted-foreground mb-1">
+                                        Preview
+                                    </p>
+                                    <div className="flex-1 relative">
+                                        <div className="bg-muted rounded border p-2 overflow-y-auto absolute inset-0 text-xs font-mono">
+                                            {fileContentQuery.isLoading ? (
+                                                <p className="text-muted-foreground">Loading...</p>
+                                            ) : (
+                                                fileContent
+                                                    .split("\n")
+                                                    .slice(startLine - 1, endLine)
+                                                    .map((line, idx) => (
+                                                        <div
+                                                            key={idx}
+                                                            className="flex gap-2 text-foreground"
+                                                        >
+                                                            <span className="text-muted-foreground w-8 text-right flex-shrink-0">
+                                                                {startLine + idx}
+                                                            </span>
+                                                            <span>{line}</span>
+                                                        </div>
+                                                    ))
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            </>
+                        ) : (
+                            <div className="flex items-center justify-center h-full text-muted-foreground">
+                                <p>Select a file to begin</p>
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {/* Footer */}
+                <div className="flex justify-end gap-2 px-6 py-4 border-t bg-muted/50">
+                    <Button variant="outline" onClick={onClose}>
+                        Cancel
+                    </Button>
+                    <Button onClick={handleConfirm} disabled={!selectedFile}>
+                        Insert Code
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}
+

package/frontend/src/components/ui/floating-toolbar-buttons.tsx

@@ -0,0 +1,73 @@
+
+
+import {
+  BoldIcon,
+  Code2Icon,
+  ItalicIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+} from 'lucide-react';
+import { KEYS } from 'platejs';
+import { useEditorReadOnly } from 'platejs/react';
+
+import { CommentToolbarButton } from './comment-toolbar-button';
+import { InlineEquationToolbarButton } from './equation-toolbar-button';
+import { LinkToolbarButton } from './link-toolbar-button';
+import { MarkToolbarButton } from './mark-toolbar-button';
+import { MoreToolbarButton } from './more-toolbar-button';
+import { SuggestionToolbarButton } from './suggestion-toolbar-button';
+import { ToolbarGroup } from './toolbar';
+import { TurnIntoToolbarButton } from './turn-into-toolbar-button';
+
+export function FloatingToolbarButtons() {
+  const readOnly = useEditorReadOnly();
+
+  return (
+    <>
+      {!readOnly && (
+        <>
+          <ToolbarGroup>
+            <TurnIntoToolbarButton />
+
+            <MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)">
+              <BoldIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton nodeType={KEYS.italic} tooltip="Italic (⌘+I)">
+              <ItalicIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton
+              nodeType={KEYS.underline}
+              tooltip="Underline (⌘+U)"
+            >
+              <UnderlineIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton
+              nodeType={KEYS.strikethrough}
+              tooltip="Strikethrough (⌘+⇧+M)"
+            >
+              <StrikethroughIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton nodeType={KEYS.code} tooltip="Code (⌘+E)">
+              <Code2Icon />
+            </MarkToolbarButton>
+
+            <InlineEquationToolbarButton />
+
+            <LinkToolbarButton />
+          </ToolbarGroup>
+        </>
+      )}
+
+      <ToolbarGroup>
+        <CommentToolbarButton />
+        <SuggestionToolbarButton />
+
+        {!readOnly && <MoreToolbarButton />}
+      </ToolbarGroup>
+    </>
+  );
+}

package/frontend/src/components/ui/floating-toolbar.tsx

@@ -0,0 +1,85 @@
+
+
+import {
+  type FloatingToolbarState,
+  flip,
+  offset,
+  useFloatingToolbar,
+  useFloatingToolbarState,
+} from '@platejs/floating';
+import { useComposedRef } from '@udecode/cn';
+import { KEYS } from 'platejs';
+import {
+  useEditorId,
+  useEventEditorValue,
+  usePluginOption,
+} from 'platejs/react';
+
+import { cn } from '@/lib/utils';
+
+import { Toolbar } from './toolbar';
+
+export function FloatingToolbar({
+  children,
+  className,
+  state,
+  ...props
+}: React.ComponentProps<typeof Toolbar> & {
+  state?: FloatingToolbarState;
+}) {
+  const editorId = useEditorId();
+  const focusedEditorId = useEventEditorValue('focus');
+  const isFloatingLinkOpen = !!usePluginOption({ key: KEYS.link }, 'mode');
+  const isAIChatOpen = usePluginOption({ key: KEYS.aiChat }, 'open');
+
+  const floatingToolbarState = useFloatingToolbarState({
+    editorId,
+    focusedEditorId,
+    hideToolbar: isFloatingLinkOpen || isAIChatOpen,
+    ...state,
+    floatingOptions: {
+      middleware: [
+        offset(12),
+        flip({
+          fallbackPlacements: [
+            'top-start',
+            'top-end',
+            'bottom-start',
+            'bottom-end',
+          ],
+          padding: 12,
+        }),
+      ],
+      placement: 'top',
+      ...state?.floatingOptions,
+    },
+  });
+
+  const {
+    clickOutsideRef,
+    hidden,
+    props: rootProps,
+    ref: floatingRef,
+  } = useFloatingToolbar(floatingToolbarState);
+
+  const ref = useComposedRef<HTMLDivElement>(props.ref, floatingRef);
+
+  if (hidden) return null;
+
+  return (
+    <div ref={clickOutsideRef}>
+      <Toolbar
+        {...props}
+        {...rootProps}
+        ref={ref}
+        className={cn(
+          'scrollbar-hide absolute z-50 overflow-x-auto whitespace-nowrap rounded-md border bg-popover p-1 opacity-100 shadow-md print:hidden',
+          'max-w-[80vw]',
+          className
+        )}
+      >
+        {children}
+      </Toolbar>
+    </div>
+  );
+}