doclific 0.1.0

package/frontend/src/components/app-sidebar.tsx

@@ -0,0 +1,393 @@
+import { ChevronRight, EllipsisVertical, FileIcon, Plus, UserCircle, Search, X } from "lucide-react";
+import * as Icons from "lucide-react";
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarHeader,
+    SidebarMenuSub,
+    SidebarMenuSubItem,
+    SidebarMenuSubButton,
+} from "@/components/ui/sidebar"
+import { orpcTs } from "@/lib/orpc"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { useState, useRef, useEffect } from "react"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuGroup } from "@/components/ui/dropdown-menu"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { useSidebar } from "@/components/ui/sidebar"
+import type { FolderStructure } from "@/types/docs"
+import { DynamicIcon, type LucideIconName } from "./ui/dynamic-icon"
+import { useNavigate } from "react-router"
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import React from "react"
+
+function CreateDocDialog({
+    parentPath,
+    isNested,
+}: {
+    parentPath: string
+    isNested: boolean
+}) {
+    const [open, setOpen] = useState(false)
+    const [title, setTitle] = useState("")
+    const [selectedIcon, setSelectedIcon] = useState<string>("")
+    const [iconSearch, setIconSearch] = useState("")
+    const [showIconPicker, setShowIconPicker] = useState(false)
+    const iconPickerRef = useRef<HTMLDivElement>(null)
+    const queryClient = useQueryClient()
+
+    // Close icon picker when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (iconPickerRef.current && !iconPickerRef.current.contains(event.target as Node)) {
+                setShowIconPicker(false)
+            }
+        }
+        if (showIconPicker) {
+            document.addEventListener("mousedown", handleClickOutside)
+            return () => document.removeEventListener("mousedown", handleClickOutside)
+        }
+    }, [showIconPicker])
+    const createDocMutation = useMutation({
+        ...orpcTs.docs.createDoc.mutationOptions(),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: orpcTs.docs.getDocs.queryKey() })
+            setOpen(false)
+            setTitle("")
+            setSelectedIcon("")
+            setIconSearch("")
+            setShowIconPicker(false)
+        },
+    })
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault()
+        createDocMutation.mutate({
+            filePath: parentPath,
+            title,
+            icon: selectedIcon || undefined,
+        })
+    }
+
+    const iconNames = Object.keys(Icons).filter((iconName) => iconName.endsWith("Icon") && iconName !== "createLucideIcon").map((iconName) => iconName.replace("Icon", ""))
+
+    const IconComponent = selectedIcon ? <DynamicIcon name={selectedIcon as LucideIconName} /> : null
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                {isNested ? (
+                    <SidebarMenuSubButton className="text-muted-foreground hover:text-foreground">
+                        <Plus className="size-4 !stroke-current" />
+                        <span className="truncate">New doc</span>
+                    </SidebarMenuSubButton>
+                ) : (
+                    <SidebarMenuButton className="text-muted-foreground stroke-muted-foreground hover:text-foreground hover:stroke-foreground">
+                        <Plus className="size-4 !stroke-current" />
+                        <span className="truncate">New doc</span>
+                    </SidebarMenuButton>
+                )}
+            </DialogTrigger>
+            <DialogContent className="max-w-md">
+                <DialogHeader>
+                    <DialogTitle>Create New Document</DialogTitle>
+                </DialogHeader>
+                <form onSubmit={handleSubmit}>
+                    <div className="grid gap-4 py-4">
+                        <div className="grid gap-2">
+                            <label htmlFor="title" className="text-sm font-medium">
+                                Title
+                            </label>
+                            <Input
+                                id="title"
+                                value={title}
+                                onChange={(e) => setTitle(e.target.value)}
+                                placeholder="Document title"
+                                required
+                            />
+                        </div>
+                        <div className="grid gap-2">
+                            <label className="text-sm font-medium">Icon (optional)</label>
+                            <div className="relative">
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    className="w-full justify-start"
+                                    onClick={() => setShowIconPicker(!showIconPicker)}
+                                >
+                                    {IconComponent ? (
+                                        <>
+                                            <DynamicIcon name={selectedIcon as LucideIconName} className="size-4 mr-2" />
+                                            <span>{selectedIcon}</span>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <FileIcon className="size-4 mr-2" />
+                                            <span>Select icon</span>
+                                        </>
+                                    )}
+                                </Button>
+                                {selectedIcon && (
+                                    <button
+                                        type="button"
+                                        onClick={(e) => {
+                                            e.stopPropagation()
+                                            setSelectedIcon("")
+                                        }}
+                                        className="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-muted rounded"
+                                    >
+                                        <X className="size-3" />
+                                    </button>
+                                )}
+                                {showIconPicker && (
+                                    <div ref={iconPickerRef} className="absolute z-10 w-full mt-1 bg-background border rounded-lg shadow-lg p-2 overflow-hidden">
+                                        <div className="relative mb-2">
+                                            <Search className="absolute left-2 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+                                            <Input
+                                                placeholder="Search icons..."
+                                                value={iconSearch}
+                                                onChange={(e) => setIconSearch(e.target.value)}
+                                                className="pl-8"
+                                            />
+                                        </div>
+                                        <div className="grid grid-cols-6 gap-2 max-h-64 h-full overflow-y-auto">
+                                            {iconNames.filter((iconName) => iconSearch === "" || iconName.toLowerCase().includes(iconSearch.toLowerCase())).map((iconName) => {
+                                                try {
+                                                    return (
+                                                        <button
+                                                            key={iconName}
+                                                            type="button"
+                                                            onClick={() => {
+                                                                setSelectedIcon(iconName)
+                                                                setShowIconPicker(false)
+                                                                setIconSearch("")
+                                                            }}
+                                                            className={`p-2 rounded hover:bg-muted transition-colors ${selectedIcon === iconName ? "bg-primary/10 border border-primary" : ""
+                                                                }`}
+                                                            title={iconName}
+                                                        >
+                                                            <DynamicIcon name={iconName as LucideIconName} className="size-4 mx-auto" />
+                                                        </button>
+                                                    )
+                                                } catch {
+                                                    return <></>
+                                                }
+                                            })}
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+                            Cancel
+                        </Button>
+                        <Button type="submit" disabled={createDocMutation.isPending}>
+                            {createDocMutation.isPending ? "Creating..." : "Create"}
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+export function AppSidebar() {
+    const navigate = useNavigate()
+    const sidebarData = useQuery({
+        ...orpcTs.git.getRepoInfo.queryOptions(),
+        enabled: true,
+    })
+    const { isMobile } = useSidebar()
+    const docsQuery = useQuery({
+        ...orpcTs.docs.getDocs.queryOptions(),
+        enabled: true,
+    })
+
+    const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set())
+
+    const toggleExpanded = (name: string) => {
+        setExpandedItems((prev) => {
+            const next = new Set(prev)
+            if (next.has(name)) {
+                next.delete(name)
+            } else {
+                next.add(name)
+            }
+            return next
+        })
+    }
+
+    const renderDocItem = (
+        doc: FolderStructure,
+        fullPath: string,
+        isNested: boolean = false,
+        index: number = 0,
+        totalSiblings: number = 0
+    ) => {
+        const isExpanded = expandedItems.has(fullPath)
+        const isLast = index === totalSiblings - 1
+
+        if (isNested) {
+            return (
+                <>
+                    <SidebarMenuSubItem key={fullPath}>
+                        <SidebarMenuSubButton
+                            className="group cursor-pointer"
+                            onClick={() => navigate(`/${fullPath}`)}
+                        >
+                            <ChevronRight
+                                onClick={(e) => {
+                                    e.stopPropagation()
+                                    toggleExpanded(fullPath)
+                                }}
+                                className={`size-4 transition-transform ${isExpanded ? "rotate-90" : ""}`}
+                            />
+                            {doc.icon ? <DynamicIcon name={doc.icon as LucideIconName} /> : <FileIcon />}
+                            <span className="truncate">{doc.title}</span>
+                        </SidebarMenuSubButton>
+                        {isExpanded && (
+                            <SidebarMenuSub>
+                                {doc.children.map((child, childIndex) => {
+                                    const childPath = `${fullPath}/${child.name}`
+                                    return renderDocItem(child, childPath, true, childIndex, doc.children.length)
+                                })}
+                                <SidebarMenuSubItem>
+                                    <CreateDocDialog parentPath={fullPath} isNested={true} />
+                                </SidebarMenuSubItem>
+                            </SidebarMenuSub>
+                        )}
+                    </SidebarMenuSubItem>
+                </>
+            )
+        }
+
+        return (
+            <React.Fragment key={fullPath}>
+                <SidebarMenuItem key={fullPath}>
+                    <SidebarMenuButton
+                        className="group cursor-pointer"
+                        onClick={() => navigate(`/${fullPath}`)}
+                    >
+                        <ChevronRight
+                            onClick={(e) => {
+                                e.stopPropagation()
+                                toggleExpanded(fullPath)
+                            }}
+                            className={`size-4 transition-transform ${isExpanded ? "rotate-90" : ""}`}
+                        />
+                        {doc.icon ? <DynamicIcon name={doc.icon as LucideIconName} /> : <FileIcon />}
+                        <span className="truncate font-medium">{doc.title}</span>
+                    </SidebarMenuButton>
+                    {isExpanded && (
+                        <SidebarMenuSub>
+                            {doc.children.map((child, childIndex) => {
+                                const childPath = `${fullPath}/${child.name}`
+                                return renderDocItem(child, childPath, true, childIndex, doc.children.length)
+                            })}
+                            <SidebarMenuSubItem>
+                                <CreateDocDialog parentPath={fullPath} isNested={true} />
+                            </SidebarMenuSubItem>
+                        </SidebarMenuSub>
+                    )}
+                </SidebarMenuItem>
+                {isLast && (
+                    <SidebarMenuItem>
+                        <CreateDocDialog parentPath="" isNested={false} />
+                    </SidebarMenuItem>
+                )}
+            </React.Fragment>
+        )
+    }
+
+    const docsMenu = (docs: FolderStructure[]): React.ReactNode[] => {
+        return docs.map((doc, index) => renderDocItem(doc, doc.name, false, index, docs.length))
+    }
+
+
+    return (
+        <Sidebar variant="inset">
+            <SidebarHeader>
+                <span className="text-2xl font-extrabold italic" style={{ fontFamily: 'Google Sans Code' }}>Doclific</span>
+            </SidebarHeader>
+            <SidebarContent>
+                <SidebarGroup>
+                    <SidebarGroupLabel>{sidebarData.data?.repositoryName} ({sidebarData.data?.repositoryBranch})</SidebarGroupLabel>
+                    <SidebarGroupContent>
+                        <SidebarMenu>
+                            {docsMenu(docsQuery.data ?? [])}
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter>
+                <SidebarMenu>
+                    <SidebarMenuItem>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <SidebarMenuButton
+                                    size="lg"
+                                    className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                                >
+                                    <Avatar className="h-8 w-8 rounded-lg grayscale">
+                                        <AvatarFallback className="rounded-lg">{sidebarData.data?.user?.charAt(0).toUpperCase()}</AvatarFallback>
+                                    </Avatar>
+                                    <div className="grid flex-1 text-left text-sm leading-tight">
+                                        <span className="truncate font-medium">{sidebarData.data?.user}</span>
+                                        <span className="text-muted-foreground truncate text-xs">
+                                            {sidebarData.data?.userEmail ?? sidebarData.data?.user}
+                                        </span>
+                                    </div>
+                                    <EllipsisVertical className="ml-auto size-4" />
+                                </SidebarMenuButton>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent
+                                className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+                                side={isMobile ? "bottom" : "right"}
+                                align="end"
+                                sideOffset={4}
+                            >
+                                <DropdownMenuLabel className="p-0 font-normal">
+                                    <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                        <Avatar className="h-8 w-8 rounded-lg">
+                                            <AvatarFallback className="rounded-lg">{sidebarData.data?.user?.charAt(0).toUpperCase()}</AvatarFallback>
+                                        </Avatar>
+                                        <div className="grid flex-1 text-left text-sm leading-tight">
+                                            <span className="truncate font-medium">{sidebarData.data?.user}</span>
+                                            <span className="text-muted-foreground truncate text-xs">
+                                                {sidebarData.data?.userEmail ?? sidebarData.data?.user}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </DropdownMenuLabel>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuGroup>
+                                    <DropdownMenuItem>
+                                        <UserCircle className="mr-2 size-4" />
+                                        Account
+                                    </DropdownMenuItem>
+                                </DropdownMenuGroup>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+            </SidebarFooter>
+        </Sidebar>
+    )
+}

package/frontend/src/components/editor/editor-base-kit.tsx

@@ -0,0 +1,43 @@
+import { BaseAlignKit } from './plugins/align-base-kit';
+import { BaseBasicBlocksKit } from './plugins/basic-blocks-base-kit';
+import { BaseBasicMarksKit } from './plugins/basic-marks-base-kit';
+import { BaseCalloutKit } from './plugins/callout-base-kit';
+import { BaseCodeBlockKit } from './plugins/code-block-base-kit';
+import { BaseColumnKit } from './plugins/column-base-kit';
+import { BaseCommentKit } from './plugins/comment-base-kit';
+import { BaseDateKit } from './plugins/date-base-kit';
+import { BaseFontKit } from './plugins/font-base-kit';
+import { BaseLineHeightKit } from './plugins/line-height-base-kit';
+import { BaseLinkKit } from './plugins/link-base-kit';
+import { BaseListKit } from './plugins/list-base-kit';
+import { MarkdownKit } from './plugins/markdown-kit';
+import { BaseMathKit } from './plugins/math-base-kit';
+import { BaseMediaKit } from './plugins/media-base-kit';
+import { BaseMentionKit } from './plugins/mention-base-kit';
+import { BaseSuggestionKit } from './plugins/suggestion-base-kit';
+import { BaseTableKit } from './plugins/table-base-kit';
+import { BaseTocKit } from './plugins/toc-base-kit';
+import { BaseToggleKit } from './plugins/toggle-base-kit';
+
+export const BaseEditorKit = [
+  ...BaseBasicBlocksKit,
+  ...BaseCodeBlockKit,
+  ...BaseTableKit,
+  ...BaseToggleKit,
+  ...BaseTocKit,
+  ...BaseMediaKit,
+  ...BaseCalloutKit,
+  ...BaseColumnKit,
+  ...BaseMathKit,
+  ...BaseDateKit,
+  ...BaseLinkKit,
+  ...BaseMentionKit,
+  ...BaseBasicMarksKit,
+  ...BaseFontKit,
+  ...BaseListKit,
+  ...BaseAlignKit,
+  ...BaseLineHeightKit,
+  ...BaseCommentKit,
+  ...BaseSuggestionKit,
+  ...MarkdownKit,
+];

package/frontend/src/components/editor/editor-kit.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { type Value, TrailingBlockPlugin } from 'platejs';
+import { type TPlateEditor, useEditorRef } from 'platejs/react';
+
+import { AlignKit } from './plugins/align-kit';
+import { AutoformatKit } from './plugins/autoformat-kit';
+import { BasicBlocksKit } from './plugins/basic-blocks-kit';
+import { BasicMarksKit } from './plugins/basic-marks-kit';
+import { BlockMenuKit } from './plugins/block-menu-kit';
+import { BlockPlaceholderKit } from './plugins/block-placeholder-kit';
+import { CalloutKit } from './plugins/callout-kit';
+import { CodeBlockKit } from './plugins/code-block-kit';
+import { ColumnKit } from './plugins/column-kit';
+import { CommentKit } from './plugins/comment-kit';
+import { CursorOverlayKit } from './plugins/cursor-overlay-kit';
+import { DateKit } from './plugins/date-kit';
+import { DiscussionKit } from './plugins/discussion-kit';
+import { DndKit } from './plugins/dnd-kit';
+import { DocxKit } from './plugins/docx-kit';
+import { EmojiKit } from './plugins/emoji-kit';
+import { ExitBreakKit } from './plugins/exit-break-kit';
+import { FloatingToolbarKit } from './plugins/floating-toolbar-kit';
+import { FontKit } from './plugins/font-kit';
+import { LineHeightKit } from './plugins/line-height-kit';
+import { LinkKit } from './plugins/link-kit';
+import { ListKit } from './plugins/list-kit';
+import { MarkdownKit } from './plugins/markdown-kit';
+import { MathKit } from './plugins/math-kit';
+import { MediaKit } from './plugins/media-kit';
+import { MentionKit } from './plugins/mention-kit';
+import { SlashKit } from './plugins/slash-kit';
+import { SuggestionKit } from './plugins/suggestion-kit';
+import { TableKit } from './plugins/table-kit';
+import { TocKit } from './plugins/toc-kit';
+import { ToggleKit } from './plugins/toggle-kit';
+import { CodebaseSnippetPlugin } from './plugins/codebase-kit';
+
+export const EditorKit = [
+  ...BlockMenuKit,
+
+  // Elements
+  ...BasicBlocksKit,
+  ...CodeBlockKit,
+  ...TableKit,
+  ...ToggleKit,
+  ...TocKit,
+  ...MediaKit,
+  ...CalloutKit,
+  ...ColumnKit,
+  ...MathKit,
+  ...DateKit,
+  ...LinkKit,
+  ...MentionKit,
+
+  // Marks
+  ...BasicMarksKit,
+  ...FontKit,
+
+  // Block Style
+  ...ListKit,
+  ...AlignKit,
+  ...LineHeightKit,
+
+  // Collaboration
+  ...DiscussionKit,
+  ...CommentKit,
+  ...SuggestionKit,
+
+  // Editing
+  ...SlashKit,
+  ...AutoformatKit,
+  ...CursorOverlayKit,
+  ...DndKit,
+  ...EmojiKit,
+  ...ExitBreakKit,
+  TrailingBlockPlugin,
+
+  // Parsers
+  ...DocxKit,
+  ...MarkdownKit,
+
+  // UI
+  ...BlockPlaceholderKit,
+  ...FloatingToolbarKit,
+
+  // Custom
+  CodebaseSnippetPlugin,
+];
+
+export type MyEditor = TPlateEditor<Value, (typeof EditorKit)[number]>;
+
+export const useEditor = () => useEditorRef<MyEditor>();

package/frontend/src/components/editor/plugins/align-base-kit.tsx

@@ -0,0 +1,16 @@
+import { BaseTextAlignPlugin } from '@platejs/basic-styles';
+import { KEYS } from 'platejs';
+
+export const BaseAlignKit = [
+  BaseTextAlignPlugin.configure({
+    inject: {
+      nodeProps: {
+        defaultNodeValue: 'start',
+        nodeKey: 'align',
+        styleKey: 'textAlign',
+        validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
+      },
+      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.img, KEYS.mediaEmbed],
+    },
+  }),
+];

package/frontend/src/components/editor/plugins/align-kit.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { TextAlignPlugin } from '@platejs/basic-styles/react';
+import { KEYS } from 'platejs';
+
+export const AlignKit = [
+  TextAlignPlugin.configure({
+    inject: {
+      nodeProps: {
+        defaultNodeValue: 'start',
+        nodeKey: 'align',
+        styleKey: 'textAlign',
+        validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
+      },
+      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.img, KEYS.mediaEmbed],
+    },
+  }),
+];