mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-05 13:52:40 +02:00
feat: add folder management features including creation, deletion, and organization of documents within folders
This commit is contained in:
DESKTOP-RTLN3BA\$punk
parent
95bb522220
commit
685ad0c02d
41 changed files with 7475 additions and 4330 deletions
94
surfsense_web/components/documents/CreateFolderDialog.tsx
Normal file
94
surfsense_web/components/documents/CreateFolderDialog.tsx
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
"use client";
|
||||
|
||||
import { FolderPlus } from "lucide-react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
interface CreateFolderDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
parentFolderName?: string | null;
|
||||
onConfirm: (name: string) => void;
|
||||
}
|
||||
|
||||
export function CreateFolderDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
parentFolderName,
|
||||
onConfirm,
|
||||
}: CreateFolderDialogProps) {
|
||||
const [name, setName] = useState("");
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setName("");
|
||||
setTimeout(() => inputRef.current?.focus(), 0);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
(e?: React.FormEvent) => {
|
||||
e?.preventDefault();
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) return;
|
||||
onConfirm(trimmed);
|
||||
onOpenChange(false);
|
||||
},
|
||||
[name, onConfirm, onOpenChange],
|
||||
);
|
||||
|
||||
const isSubfolder = !!parentFolderName;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<FolderPlus className="size-5 text-muted-foreground" />
|
||||
{isSubfolder ? "New subfolder" : "New folder"}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isSubfolder
|
||||
? `Create a new folder inside "${parentFolderName}".`
|
||||
: "Create a new folder at the root level."}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="folder-name">Folder name</Label>
|
||||
<Input
|
||||
ref={inputRef}
|
||||
id="folder-name"
|
||||
placeholder="e.g. Research, Notes, Archive…"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
maxLength={255}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={!name.trim()}>
|
||||
Create
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
192
surfsense_web/components/documents/DocumentNode.tsx
Normal file
192
surfsense_web/components/documents/DocumentNode.tsx
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
"use client";
|
||||
|
||||
import {
|
||||
Eye,
|
||||
MoreHorizontal,
|
||||
Move,
|
||||
Pencil,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import React, { useCallback, useRef } from "react";
|
||||
import { useDrag } from "react-dnd";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuTrigger,
|
||||
} from "@/components/ui/context-menu";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { getDocumentTypeIcon } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
|
||||
import type { DocumentTypeEnum } from "@/contracts/types/document.types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { DND_TYPES } from "./FolderNode";
|
||||
|
||||
export interface DocumentNodeDoc {
|
||||
id: number;
|
||||
title: string;
|
||||
document_type: string;
|
||||
folderId: number | null;
|
||||
status?: { state: string; reason?: string | null };
|
||||
}
|
||||
|
||||
interface DocumentNodeProps {
|
||||
doc: DocumentNodeDoc;
|
||||
depth: number;
|
||||
isMentioned: boolean;
|
||||
onToggleChatMention: (doc: DocumentNodeDoc, isMentioned: boolean) => void;
|
||||
onPreview: (doc: DocumentNodeDoc) => void;
|
||||
onEdit: (doc: DocumentNodeDoc) => void;
|
||||
onDelete: (doc: DocumentNodeDoc) => void;
|
||||
onMove: (doc: DocumentNodeDoc) => void;
|
||||
}
|
||||
|
||||
export const DocumentNode = React.memo(function DocumentNode({
|
||||
doc,
|
||||
depth,
|
||||
isMentioned,
|
||||
onToggleChatMention,
|
||||
onPreview,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onMove,
|
||||
}: DocumentNodeProps) {
|
||||
const statusState = doc.status?.state ?? "ready";
|
||||
const isSelectable = statusState !== "pending" && statusState !== "processing";
|
||||
const isEditable =
|
||||
doc.document_type === "NOTE" &&
|
||||
statusState !== "pending" &&
|
||||
statusState !== "processing";
|
||||
|
||||
const handleCheckChange = useCallback(() => {
|
||||
if (isSelectable) {
|
||||
onToggleChatMention(doc, isMentioned);
|
||||
}
|
||||
}, [doc, isMentioned, isSelectable, onToggleChatMention]);
|
||||
|
||||
const [{ isDragging }, drag] = useDrag(
|
||||
() => ({
|
||||
type: DND_TYPES.DOCUMENT,
|
||||
item: { id: doc.id },
|
||||
collect: (monitor) => ({ isDragging: monitor.isDragging() }),
|
||||
}),
|
||||
[doc.id],
|
||||
);
|
||||
|
||||
const isProcessing = statusState === "pending" || statusState === "processing";
|
||||
|
||||
return (
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger asChild>
|
||||
<div
|
||||
ref={drag}
|
||||
className={cn(
|
||||
"group flex h-8 items-center gap-1.5 rounded-md px-1 text-sm hover:bg-accent/50 cursor-pointer select-none",
|
||||
isMentioned && "bg-accent/30",
|
||||
isDragging && "opacity-40",
|
||||
)}
|
||||
style={{ paddingLeft: `${depth * 16 + 4}px` }}
|
||||
onClick={handleCheckChange}
|
||||
>
|
||||
{isSelectable ? (
|
||||
<Checkbox
|
||||
checked={isMentioned}
|
||||
onCheckedChange={handleCheckChange}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="h-3.5 w-3.5 shrink-0"
|
||||
/>
|
||||
) : (
|
||||
<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
|
||||
<span
|
||||
className={cn(
|
||||
"h-2 w-2 rounded-full",
|
||||
statusState === "processing" && "animate-pulse bg-amber-500",
|
||||
statusState === "pending" && "bg-muted-foreground/40",
|
||||
statusState === "failed" && "bg-destructive",
|
||||
)}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
|
||||
<span className="flex-1 min-w-0 truncate">{doc.title}</span>
|
||||
|
||||
<span className="shrink-0">
|
||||
{getDocumentTypeIcon(doc.document_type as DocumentTypeEnum, "h-3.5 w-3.5 text-muted-foreground")}
|
||||
</span>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<MoreHorizontal className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-44">
|
||||
<DropdownMenuItem onClick={() => onPreview(doc)}>
|
||||
<Eye className="mr-2 h-4 w-4" />
|
||||
Preview
|
||||
</DropdownMenuItem>
|
||||
{isEditable && (
|
||||
<DropdownMenuItem onClick={() => onEdit(doc)}>
|
||||
<Pencil className="mr-2 h-4 w-4" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem onClick={() => onMove(doc)}>
|
||||
<Move className="mr-2 h-4 w-4" />
|
||||
Move to...
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="text-destructive focus:text-destructive"
|
||||
disabled={isProcessing}
|
||||
onClick={() => onDelete(doc)}
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</ContextMenuTrigger>
|
||||
|
||||
<ContextMenuContent className="w-44">
|
||||
<ContextMenuItem onClick={() => onPreview(doc)}>
|
||||
<Eye className="mr-2 h-4 w-4" />
|
||||
Preview
|
||||
</ContextMenuItem>
|
||||
{isEditable && (
|
||||
<ContextMenuItem onClick={() => onEdit(doc)}>
|
||||
<Pencil className="mr-2 h-4 w-4" />
|
||||
Edit
|
||||
</ContextMenuItem>
|
||||
)}
|
||||
<ContextMenuItem onClick={() => onMove(doc)}>
|
||||
<Move className="mr-2 h-4 w-4" />
|
||||
Move to...
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuItem
|
||||
className="text-destructive focus:text-destructive"
|
||||
disabled={isProcessing}
|
||||
onClick={() => onDelete(doc)}
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</ContextMenuItem>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
);
|
||||
});
|
||||
333
surfsense_web/components/documents/FolderNode.tsx
Normal file
333
surfsense_web/components/documents/FolderNode.tsx
Normal file
|
|
@ -0,0 +1,333 @@
|
|||
"use client";
|
||||
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Folder,
|
||||
FolderOpen,
|
||||
FolderPlus,
|
||||
MoreHorizontal,
|
||||
Move,
|
||||
Pencil,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useDrag, useDrop } from "react-dnd";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuTrigger,
|
||||
} from "@/components/ui/context-menu";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const DND_TYPES = {
|
||||
FOLDER: "FOLDER",
|
||||
DOCUMENT: "DOCUMENT",
|
||||
} as const;
|
||||
|
||||
type DropZone = "top" | "middle" | "bottom";
|
||||
|
||||
export interface FolderDisplay {
|
||||
id: number;
|
||||
name: string;
|
||||
position: string;
|
||||
parentId: number | null;
|
||||
searchSpaceId: number;
|
||||
}
|
||||
|
||||
interface FolderNodeProps {
|
||||
folder: FolderDisplay;
|
||||
depth: number;
|
||||
isExpanded: boolean;
|
||||
isRenaming: boolean;
|
||||
childCount: number;
|
||||
onToggleExpand: (folderId: number) => void;
|
||||
onRename: (folder: FolderDisplay, newName: string) => void;
|
||||
onStartRename: (folderId: number) => void;
|
||||
onCancelRename: () => void;
|
||||
onDelete: (folder: FolderDisplay) => void;
|
||||
onMove: (folder: FolderDisplay) => void;
|
||||
onCreateSubfolder: (parentId: number) => void;
|
||||
onDropIntoFolder?: (itemType: "folder" | "document", itemId: number, targetFolderId: number) => void;
|
||||
onReorderFolder?: (folderId: number, beforePos: string | null, afterPos: string | null) => void;
|
||||
siblingPositions?: { before: string | null; after: string | null };
|
||||
disabledDropIds?: Set<number>;
|
||||
}
|
||||
|
||||
function getDropZone(monitor: { getClientOffset: () => { y: number } | null }, element: HTMLElement): DropZone {
|
||||
const offset = monitor.getClientOffset();
|
||||
if (!offset) return "middle";
|
||||
const rect = element.getBoundingClientRect();
|
||||
const y = offset.y - rect.top;
|
||||
const pct = y / rect.height;
|
||||
if (pct < 0.25) return "top";
|
||||
if (pct > 0.75) return "bottom";
|
||||
return "middle";
|
||||
}
|
||||
|
||||
export const FolderNode = React.memo(function FolderNode({
|
||||
folder,
|
||||
depth,
|
||||
isExpanded,
|
||||
isRenaming,
|
||||
childCount,
|
||||
onToggleExpand,
|
||||
onRename,
|
||||
onStartRename,
|
||||
onCancelRename,
|
||||
onDelete,
|
||||
onMove,
|
||||
onCreateSubfolder,
|
||||
onDropIntoFolder,
|
||||
onReorderFolder,
|
||||
siblingPositions,
|
||||
disabledDropIds,
|
||||
}: FolderNodeProps) {
|
||||
const [renameValue, setRenameValue] = useState(folder.name);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const rowRef = useRef<HTMLDivElement>(null);
|
||||
const [dropZone, setDropZone] = useState<DropZone | null>(null);
|
||||
|
||||
const [{ isDragging }, drag] = useDrag(
|
||||
() => ({
|
||||
type: DND_TYPES.FOLDER,
|
||||
item: { id: folder.id, position: folder.position, parentId: folder.parentId },
|
||||
collect: (monitor) => ({ isDragging: monitor.isDragging() }),
|
||||
}),
|
||||
[folder.id, folder.position, folder.parentId],
|
||||
);
|
||||
|
||||
const [{ isOver, canDrop }, drop] = useDrop(
|
||||
() => ({
|
||||
accept: [DND_TYPES.FOLDER, DND_TYPES.DOCUMENT],
|
||||
canDrop: (item: { id: number }) => {
|
||||
if (item.id === folder.id) return false;
|
||||
if (disabledDropIds?.has(item.id)) return false;
|
||||
return true;
|
||||
},
|
||||
hover: (_item, monitor) => {
|
||||
if (!rowRef.current || !monitor.isOver({ shallow: true })) {
|
||||
setDropZone(null);
|
||||
return;
|
||||
}
|
||||
setDropZone(getDropZone(monitor, rowRef.current));
|
||||
},
|
||||
drop: (item: { id: number }, monitor) => {
|
||||
if (!rowRef.current) return;
|
||||
const zone = getDropZone(monitor, rowRef.current);
|
||||
const type = monitor.getItemType();
|
||||
|
||||
if (zone === "middle") {
|
||||
if (type === DND_TYPES.FOLDER) {
|
||||
onDropIntoFolder?.("folder", item.id, folder.id);
|
||||
} else {
|
||||
onDropIntoFolder?.("document", item.id, folder.id);
|
||||
}
|
||||
} else if (type === DND_TYPES.FOLDER && onReorderFolder && siblingPositions) {
|
||||
if (zone === "top") {
|
||||
onReorderFolder(item.id, siblingPositions.before, folder.position);
|
||||
} else {
|
||||
onReorderFolder(item.id, folder.position, siblingPositions.after);
|
||||
}
|
||||
}
|
||||
setDropZone(null);
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isOver: monitor.isOver({ shallow: true }),
|
||||
canDrop: monitor.canDrop(),
|
||||
}),
|
||||
}),
|
||||
[folder.id, folder.position, disabledDropIds, onDropIntoFolder, onReorderFolder, siblingPositions],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOver) setDropZone(null);
|
||||
}, [isOver]);
|
||||
|
||||
const attachRef = useCallback(
|
||||
(node: HTMLDivElement | null) => {
|
||||
rowRef.current = node;
|
||||
drag(drop(node));
|
||||
},
|
||||
[drag, drop],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isRenaming && inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
inputRef.current.select();
|
||||
}
|
||||
}, [isRenaming]);
|
||||
|
||||
const handleRenameSubmit = useCallback(() => {
|
||||
const trimmed = renameValue.trim();
|
||||
if (trimmed && trimmed !== folder.name) {
|
||||
onRename(folder, trimmed);
|
||||
}
|
||||
onCancelRename();
|
||||
}, [renameValue, folder, onRename, onCancelRename]);
|
||||
|
||||
const handleRenameKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleRenameSubmit();
|
||||
} else if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
setRenameValue(folder.name);
|
||||
onCancelRename();
|
||||
}
|
||||
},
|
||||
[handleRenameSubmit, folder.name, onCancelRename],
|
||||
);
|
||||
|
||||
const startRename = useCallback(() => {
|
||||
setRenameValue(folder.name);
|
||||
onStartRename(folder.id);
|
||||
}, [folder, onStartRename]);
|
||||
|
||||
const FolderIcon = isExpanded ? FolderOpen : Folder;
|
||||
|
||||
return (
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger asChild disabled={isRenaming}>
|
||||
<div
|
||||
ref={attachRef}
|
||||
className={cn(
|
||||
"group relative flex h-8 items-center gap-1 rounded-md px-1 text-sm hover:bg-accent/50 cursor-pointer select-none",
|
||||
isExpanded && "font-medium",
|
||||
isDragging && "opacity-40",
|
||||
isOver && canDrop && dropZone === "middle" && "bg-accent ring-1 ring-primary/40",
|
||||
isOver && canDrop && dropZone === "top" && "border-t-2 border-primary",
|
||||
isOver && canDrop && dropZone === "bottom" && "border-b-2 border-primary",
|
||||
isOver && !canDrop && "cursor-not-allowed",
|
||||
)}
|
||||
style={{ paddingLeft: `${depth * 16 + 4}px` }}
|
||||
onClick={() => onToggleExpand(folder.id)}
|
||||
onDoubleClick={(e) => {
|
||||
e.stopPropagation();
|
||||
startRename();
|
||||
}}
|
||||
>
|
||||
<span className="flex h-4 w-4 shrink-0 items-center justify-center">
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
)}
|
||||
</span>
|
||||
|
||||
<FolderIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
|
||||
{isRenaming ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={renameValue}
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
onBlur={handleRenameSubmit}
|
||||
onKeyDown={handleRenameKeyDown}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="flex-1 min-w-0 rounded border border-primary bg-background px-1 py-0.5 text-sm outline-none"
|
||||
/>
|
||||
) : (
|
||||
<span className="flex-1 min-w-0 truncate">{folder.name}</span>
|
||||
)}
|
||||
|
||||
{!isRenaming && childCount > 0 && (
|
||||
<span className="shrink-0 text-[10px] text-muted-foreground tabular-nums">
|
||||
{childCount}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!isRenaming && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<MoreHorizontal className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48">
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onCreateSubfolder(folder.id);
|
||||
}}
|
||||
>
|
||||
<FolderPlus className="mr-2 h-4 w-4" />
|
||||
New subfolder
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
startRename();
|
||||
}}
|
||||
>
|
||||
<Pencil className="mr-2 h-4 w-4" />
|
||||
Rename
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onMove(folder);
|
||||
}}
|
||||
>
|
||||
<Move className="mr-2 h-4 w-4" />
|
||||
Move to...
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="text-destructive focus:text-destructive"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete(folder);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
</ContextMenuTrigger>
|
||||
|
||||
{!isRenaming && (
|
||||
<ContextMenuContent className="w-48">
|
||||
<ContextMenuItem onClick={() => onCreateSubfolder(folder.id)}>
|
||||
<FolderPlus className="mr-2 h-4 w-4" />
|
||||
New subfolder
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem onClick={() => startRename()}>
|
||||
<Pencil className="mr-2 h-4 w-4" />
|
||||
Rename
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem onClick={() => onMove(folder)}>
|
||||
<Move className="mr-2 h-4 w-4" />
|
||||
Move to...
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuItem className="text-destructive focus:text-destructive" onClick={() => onDelete(folder)}>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</ContextMenuItem>
|
||||
</ContextMenuContent>
|
||||
)}
|
||||
</ContextMenu>
|
||||
);
|
||||
});
|
||||
157
surfsense_web/components/documents/FolderPickerDialog.tsx
Normal file
157
surfsense_web/components/documents/FolderPickerDialog.tsx
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
"use client";
|
||||
|
||||
import { ChevronDown, ChevronRight, Folder, FolderOpen, Home } from "lucide-react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { FolderDisplay } from "./FolderNode";
|
||||
|
||||
interface FolderPickerDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
folders: FolderDisplay[];
|
||||
title: string;
|
||||
description?: string;
|
||||
disabledFolderIds?: Set<number>;
|
||||
onSelect: (folderId: number | null) => void;
|
||||
}
|
||||
|
||||
export function FolderPickerDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
folders,
|
||||
title,
|
||||
description,
|
||||
disabledFolderIds,
|
||||
onSelect,
|
||||
}: FolderPickerDialogProps) {
|
||||
const [selectedId, setSelectedId] = useState<number | null>(null);
|
||||
const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setSelectedId(null);
|
||||
setExpandedIds(new Set());
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const foldersByParent = useMemo(() => {
|
||||
const map: Record<string, FolderDisplay[]> = {};
|
||||
for (const f of folders) {
|
||||
const key = f.parentId ?? "root";
|
||||
(map[key] ??= []).push(f);
|
||||
}
|
||||
return map;
|
||||
}, [folders]);
|
||||
|
||||
const toggleExpand = useCallback((id: number) => {
|
||||
setExpandedIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleConfirm = useCallback(() => {
|
||||
onSelect(selectedId);
|
||||
onOpenChange(false);
|
||||
}, [selectedId, onSelect, onOpenChange]);
|
||||
|
||||
function renderPickerLevel(parentId: number | null, depth: number): React.ReactNode[] {
|
||||
const key = parentId ?? "root";
|
||||
const children = (foldersByParent[key] ?? [])
|
||||
.slice()
|
||||
.sort((a, b) => a.position.localeCompare(b.position));
|
||||
|
||||
return children.flatMap((f) => {
|
||||
const isDisabled = disabledFolderIds?.has(f.id) ?? false;
|
||||
const isExpanded = expandedIds.has(f.id);
|
||||
const hasChildren = (foldersByParent[f.id] ?? []).length > 0;
|
||||
const isSelected = selectedId === f.id;
|
||||
const FolderIcon = isExpanded ? FolderOpen : Folder;
|
||||
|
||||
return [
|
||||
<button
|
||||
key={f.id}
|
||||
type="button"
|
||||
disabled={isDisabled}
|
||||
className={cn(
|
||||
"flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors",
|
||||
isSelected && "bg-accent text-accent-foreground",
|
||||
!isSelected && !isDisabled && "hover:bg-accent/50",
|
||||
isDisabled && "cursor-not-allowed opacity-40",
|
||||
)}
|
||||
style={{ paddingLeft: `${depth * 16 + 8}px` }}
|
||||
onClick={() => {
|
||||
if (!isDisabled) setSelectedId(f.id);
|
||||
}}
|
||||
>
|
||||
{hasChildren ? (
|
||||
<span
|
||||
className="flex h-4 w-4 shrink-0 items-center justify-center"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleExpand(f.id);
|
||||
}}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<ChevronRight className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="h-4 w-4 shrink-0" />
|
||||
)}
|
||||
<FolderIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<span className="truncate">{f.name}</span>
|
||||
</button>,
|
||||
...(isExpanded ? renderPickerLevel(f.id, depth + 1) : []),
|
||||
];
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
{description && <DialogDescription>{description}</DialogDescription>}
|
||||
</DialogHeader>
|
||||
|
||||
<div className="max-h-[300px] overflow-y-auto rounded-md border p-1">
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors",
|
||||
selectedId === null && "bg-accent text-accent-foreground",
|
||||
selectedId !== null && "hover:bg-accent/50",
|
||||
)}
|
||||
onClick={() => setSelectedId(null)}
|
||||
>
|
||||
<span className="h-4 w-4 shrink-0" />
|
||||
<Home className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<span>Root</span>
|
||||
</button>
|
||||
{renderPickerLevel(null, 1)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleConfirm}>Move here</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
216
surfsense_web/components/documents/FolderTreeView.tsx
Normal file
216
surfsense_web/components/documents/FolderTreeView.tsx
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
"use client";
|
||||
|
||||
import { useAtom } from "jotai";
|
||||
import { TreePine } from "lucide-react";
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { DndProvider } from "react-dnd";
|
||||
import { HTML5Backend } from "react-dnd-html5-backend";
|
||||
import { renamingFolderIdAtom } from "@/atoms/documents/folder.atoms";
|
||||
import type { DocumentTypeEnum } from "@/contracts/types/document.types";
|
||||
import { DocumentNode, type DocumentNodeDoc } from "./DocumentNode";
|
||||
import { FolderNode, type FolderDisplay } from "./FolderNode";
|
||||
|
||||
interface FolderTreeViewProps {
|
||||
folders: FolderDisplay[];
|
||||
documents: DocumentNodeDoc[];
|
||||
expandedIds: Set<number>;
|
||||
onToggleExpand: (folderId: number) => void;
|
||||
mentionedDocIds: Set<number>;
|
||||
onToggleChatMention: (doc: { id: number; title: string; document_type: string }, isMentioned: boolean) => void;
|
||||
onRenameFolder: (folder: FolderDisplay, newName: string) => void;
|
||||
onDeleteFolder: (folder: FolderDisplay) => void;
|
||||
onMoveFolder: (folder: FolderDisplay) => void;
|
||||
onCreateFolder: (parentId: number | null) => void;
|
||||
onPreviewDocument: (doc: DocumentNodeDoc) => void;
|
||||
onEditDocument: (doc: DocumentNodeDoc) => void;
|
||||
onDeleteDocument: (doc: DocumentNodeDoc) => void;
|
||||
onMoveDocument: (doc: DocumentNodeDoc) => void;
|
||||
activeTypes: DocumentTypeEnum[];
|
||||
onDropIntoFolder?: (itemType: "folder" | "document", itemId: number, targetFolderId: number | null) => void;
|
||||
onReorderFolder?: (folderId: number, beforePos: string | null, afterPos: string | null) => void;
|
||||
}
|
||||
|
||||
function groupBy<T>(items: T[], keyFn: (item: T) => string | number): Record<string | number, T[]> {
|
||||
const result: Record<string | number, T[]> = {};
|
||||
for (const item of items) {
|
||||
const key = keyFn(item);
|
||||
(result[key] ??= []).push(item);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export function FolderTreeView({
|
||||
folders,
|
||||
documents,
|
||||
expandedIds,
|
||||
onToggleExpand,
|
||||
mentionedDocIds,
|
||||
onToggleChatMention,
|
||||
onRenameFolder,
|
||||
onDeleteFolder,
|
||||
onMoveFolder,
|
||||
onCreateFolder,
|
||||
onPreviewDocument,
|
||||
onEditDocument,
|
||||
onDeleteDocument,
|
||||
onMoveDocument,
|
||||
activeTypes,
|
||||
onDropIntoFolder,
|
||||
onReorderFolder,
|
||||
}: FolderTreeViewProps) {
|
||||
const foldersByParent = useMemo(
|
||||
() => groupBy(folders, (f) => f.parentId ?? "root"),
|
||||
[folders],
|
||||
);
|
||||
|
||||
const docsByFolder = useMemo(
|
||||
() => groupBy(documents, (d) => d.folderId ?? "root"),
|
||||
[documents],
|
||||
);
|
||||
|
||||
const folderChildCounts = useMemo(() => {
|
||||
const counts: Record<number, number> = {};
|
||||
for (const f of folders) {
|
||||
const children = foldersByParent[f.id] ?? [];
|
||||
const docs = docsByFolder[f.id] ?? [];
|
||||
counts[f.id] = children.length + docs.length;
|
||||
}
|
||||
return counts;
|
||||
}, [folders, foldersByParent, docsByFolder]);
|
||||
|
||||
// Single subscription for rename state — derived boolean passed to each FolderNode
|
||||
const [renamingFolderId, setRenamingFolderId] = useAtom(renamingFolderIdAtom);
|
||||
const handleStartRename = useCallback(
|
||||
(folderId: number) => setRenamingFolderId(folderId),
|
||||
[setRenamingFolderId],
|
||||
);
|
||||
const handleCancelRename = useCallback(
|
||||
() => setRenamingFolderId(null),
|
||||
[setRenamingFolderId],
|
||||
);
|
||||
|
||||
const hasDescendantMatch = useMemo(() => {
|
||||
if (activeTypes.length === 0) return null;
|
||||
const match: Record<number, boolean> = {};
|
||||
|
||||
function check(folderId: number): boolean {
|
||||
if (match[folderId] !== undefined) return match[folderId];
|
||||
const childDocs = (docsByFolder[folderId] ?? []).some((d) =>
|
||||
activeTypes.includes(d.document_type as DocumentTypeEnum),
|
||||
);
|
||||
if (childDocs) {
|
||||
match[folderId] = true;
|
||||
return true;
|
||||
}
|
||||
const childFolders = foldersByParent[folderId] ?? [];
|
||||
for (const cf of childFolders) {
|
||||
if (check(cf.id)) {
|
||||
match[folderId] = true;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
match[folderId] = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
for (const f of folders) {
|
||||
check(f.id);
|
||||
}
|
||||
return match;
|
||||
}, [folders, docsByFolder, foldersByParent, activeTypes]);
|
||||
|
||||
function renderLevel(parentId: number | null, depth: number): React.ReactNode[] {
|
||||
const key = parentId ?? "root";
|
||||
const childFolders = (foldersByParent[key] ?? [])
|
||||
.slice()
|
||||
.sort((a, b) => a.position.localeCompare(b.position));
|
||||
const visibleFolders = hasDescendantMatch
|
||||
? childFolders.filter((f) => hasDescendantMatch[f.id])
|
||||
: childFolders;
|
||||
const childDocs = (docsByFolder[key] ?? [])
|
||||
.filter(
|
||||
(d) => activeTypes.length === 0 || activeTypes.includes(d.document_type as DocumentTypeEnum),
|
||||
);
|
||||
|
||||
const nodes: React.ReactNode[] = [];
|
||||
|
||||
for (let i = 0; i < visibleFolders.length; i++) {
|
||||
const f = visibleFolders[i];
|
||||
const siblingPositions = {
|
||||
before: i > 0 ? visibleFolders[i - 1].position : null,
|
||||
after: i < visibleFolders.length - 1 ? visibleFolders[i + 1].position : null,
|
||||
};
|
||||
|
||||
nodes.push(
|
||||
<FolderNode
|
||||
key={`folder-${f.id}`}
|
||||
folder={f}
|
||||
depth={depth}
|
||||
isExpanded={expandedIds.has(f.id)}
|
||||
isRenaming={renamingFolderId === f.id}
|
||||
childCount={folderChildCounts[f.id] ?? 0}
|
||||
onToggleExpand={onToggleExpand}
|
||||
onRename={onRenameFolder}
|
||||
onStartRename={handleStartRename}
|
||||
onCancelRename={handleCancelRename}
|
||||
onDelete={onDeleteFolder}
|
||||
onMove={onMoveFolder}
|
||||
onCreateSubfolder={onCreateFolder}
|
||||
onDropIntoFolder={onDropIntoFolder}
|
||||
onReorderFolder={onReorderFolder}
|
||||
siblingPositions={siblingPositions}
|
||||
/>,
|
||||
);
|
||||
|
||||
if (expandedIds.has(f.id)) {
|
||||
nodes.push(...renderLevel(f.id, depth + 1));
|
||||
}
|
||||
}
|
||||
|
||||
for (const d of childDocs) {
|
||||
nodes.push(
|
||||
<DocumentNode
|
||||
key={`doc-${d.id}`}
|
||||
doc={d}
|
||||
depth={depth}
|
||||
isMentioned={mentionedDocIds.has(d.id)}
|
||||
onToggleChatMention={onToggleChatMention}
|
||||
onPreview={onPreviewDocument}
|
||||
onEdit={onEditDocument}
|
||||
onDelete={onDeleteDocument}
|
||||
onMove={onMoveDocument}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
const treeNodes = renderLevel(null, 0);
|
||||
|
||||
if (treeNodes.length === 0 && folders.length === 0 && documents.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-1 flex-col items-center justify-center gap-3 px-4 py-12 text-muted-foreground">
|
||||
<TreePine className="h-10 w-10" />
|
||||
<p className="text-sm">No documents yet</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (treeNodes.length === 0 && activeTypes.length > 0) {
|
||||
return (
|
||||
<div className="flex flex-1 flex-col items-center justify-center gap-3 px-4 py-12 text-muted-foreground">
|
||||
<TreePine className="h-10 w-10" />
|
||||
<p className="text-sm">No matching documents</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<div className="flex-1 min-h-0 overflow-y-auto px-2 py-1">
|
||||
{treeNodes}
|
||||
</div>
|
||||
</DndProvider>
|
||||
);
|
||||
}
|
||||
|
|
@ -14,6 +14,7 @@ import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
|
|||
import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
|
||||
import { deleteSearchSpaceMutationAtom } from "@/atoms/search-spaces/search-space-mutation.atoms";
|
||||
import { searchSpacesAtom } from "@/atoms/search-spaces/search-space-query.atoms";
|
||||
import { resetTabsAtom, syncChatTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
|
||||
import {
|
||||
morePagesDialogAtom,
|
||||
searchSpaceSettingsDialogAtom,
|
||||
|
|
@ -100,6 +101,8 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
|
|||
const { mutateAsync: deleteSearchSpace } = useAtomValue(deleteSearchSpaceMutationAtom);
|
||||
const currentThreadState = useAtomValue(currentThreadAtom);
|
||||
const resetCurrentThread = useSetAtom(resetCurrentThreadAtom);
|
||||
const syncChatTab = useSetAtom(syncChatTabAtom);
|
||||
const resetTabs = useSetAtom(resetTabsAtom);
|
||||
|
||||
// State for handling new chat navigation when router is out of sync
|
||||
const [pendingNewChat, setPendingNewChat] = useState(false);
|
||||
|
|
@ -264,10 +267,11 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
|
|||
}
|
||||
}, [pendingNewChat, params?.chat_id, router, searchSpaceId, resetCurrentThread]);
|
||||
|
||||
// Reset transient slide-out panels when switching search spaces.
|
||||
// Reset transient slide-out panels and tabs when switching search spaces.
|
||||
useEffect(() => {
|
||||
setActiveSlideoutPanel(null);
|
||||
}, [searchSpaceId]);
|
||||
resetTabs();
|
||||
}, [searchSpaceId, resetTabs]);
|
||||
|
||||
const searchSpaces: SearchSpace[] = useMemo(() => {
|
||||
if (!searchSpacesData || !Array.isArray(searchSpacesData)) return [];
|
||||
|
|
@ -307,6 +311,20 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
|
|||
router,
|
||||
]);
|
||||
|
||||
// Sync current chat route with tab state
|
||||
useEffect(() => {
|
||||
const chatId = currentChatId ?? null;
|
||||
const chatUrl = chatId
|
||||
? `/dashboard/${searchSpaceId}/new-chat/${chatId}`
|
||||
: `/dashboard/${searchSpaceId}/new-chat`;
|
||||
const thread = threadsData?.threads?.find((t) => t.id === chatId);
|
||||
syncChatTab({
|
||||
chatId,
|
||||
title: thread?.title || (chatId ? `Chat ${chatId}` : "New Chat"),
|
||||
chatUrl,
|
||||
});
|
||||
}, [currentChatId, searchSpaceId, threadsData?.threads, syncChatTab]);
|
||||
|
||||
// Transform and split chats into private and shared based on visibility
|
||||
const { myChats, sharedChats } = useMemo(() => {
|
||||
if (!threadsData?.threads) return { myChats: [], sharedChats: [] };
|
||||
|
|
@ -473,6 +491,17 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
|
|||
}
|
||||
}, [searchSpaceToLeave, refetchSearchSpaces, searchSpaceId, router, t]);
|
||||
|
||||
const handleTabSwitch = useCallback(
|
||||
(tab: Tab) => {
|
||||
if (tab.type === "chat") {
|
||||
const url = tab.chatUrl || `/dashboard/${searchSpaceId}/new-chat`;
|
||||
router.push(url);
|
||||
}
|
||||
// Document tabs are handled in-place by LayoutShell — no navigation needed
|
||||
},
|
||||
[router, searchSpaceId]
|
||||
);
|
||||
|
||||
const handleNavItemClick = useCallback(
|
||||
(item: NavItem) => {
|
||||
if (item.url === "#inbox") {
|
||||
|
|
@ -738,6 +767,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
|
|||
isDocked: isDocumentsDocked,
|
||||
onDockedChange: setIsDocumentsDocked,
|
||||
}}
|
||||
onTabSwitch={handleTabSwitch}
|
||||
>
|
||||
<Fragment key={chatResetKey}>{children}</Fragment>
|
||||
</LayoutShell>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { reportPanelAtom } from "@/atoms/chat/report-panel.atom";
|
|||
import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
|
||||
import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
|
||||
import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
|
||||
import { activeTabAtom } from "@/atoms/tabs/tabs.atom";
|
||||
import { ChatHeader } from "@/components/new-chat/chat-header";
|
||||
import { ChatShareButton } from "@/components/new-chat/chat-share-button";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
|
@ -23,12 +24,14 @@ export function Header({ mobileMenuTrigger }: HeaderProps) {
|
|||
const pathname = usePathname();
|
||||
const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
|
||||
const isMobile = useIsMobile();
|
||||
const activeTab = useAtomValue(activeTabAtom);
|
||||
|
||||
const isChatPage = pathname?.includes("/new-chat") ?? false;
|
||||
const isDocumentTab = activeTab?.type === "document";
|
||||
|
||||
const currentThreadState = useAtomValue(currentThreadAtom);
|
||||
|
||||
const hasThread = isChatPage && currentThreadState.id !== null;
|
||||
const hasThread = isChatPage && !isDocumentTab && currentThreadState.id !== null;
|
||||
|
||||
const threadForButton: ThreadRecord | null =
|
||||
hasThread && currentThreadState.id !== null
|
||||
|
|
@ -58,7 +61,7 @@ export function Header({ mobileMenuTrigger }: HeaderProps) {
|
|||
{/* Left side - Mobile menu trigger + Model selector */}
|
||||
<div className="flex flex-1 items-center gap-2 min-w-0">
|
||||
{mobileMenuTrigger}
|
||||
{isChatPage && searchSpaceId && (
|
||||
{isChatPage && !isDocumentTab && searchSpaceId && (
|
||||
<ChatHeader searchSpaceId={Number(searchSpaceId)} className="md:h-9 md:px-4 md:text-sm" />
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
"use client";
|
||||
|
||||
import { useAtomValue } from "jotai";
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { activeTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import type { InboxItem } from "@/hooks/use-inbox";
|
||||
import { useIsMobile } from "@/hooks/use-mobile";
|
||||
|
|
@ -23,6 +25,8 @@ import {
|
|||
Sidebar,
|
||||
} from "../sidebar";
|
||||
import { SidebarSlideOutPanel } from "../sidebar/SidebarSlideOutPanel";
|
||||
import { DocumentTabContent } from "../tabs/DocumentTabContent";
|
||||
import { TabBar } from "../tabs/TabBar";
|
||||
|
||||
// Per-tab data source
|
||||
interface TabDataSource {
|
||||
|
|
@ -97,6 +101,44 @@ interface LayoutShellProps {
|
|||
isDocked?: boolean;
|
||||
onDockedChange?: (docked: boolean) => void;
|
||||
};
|
||||
onTabSwitch?: (tab: Tab) => void;
|
||||
}
|
||||
|
||||
function MainContentPanel({
|
||||
isChatPage,
|
||||
onTabSwitch,
|
||||
onNewChat,
|
||||
children,
|
||||
}: {
|
||||
isChatPage: boolean;
|
||||
onTabSwitch?: (tab: Tab) => void;
|
||||
onNewChat?: () => void;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const activeTab = useAtomValue(activeTabAtom);
|
||||
const isDocumentTab = activeTab?.type === "document";
|
||||
|
||||
return (
|
||||
<div className="relative flex flex-1 flex-col rounded-xl border bg-main-panel overflow-hidden min-w-0">
|
||||
<TabBar onTabSwitch={onTabSwitch} onNewChat={onNewChat} />
|
||||
<Header />
|
||||
|
||||
{isDocumentTab && activeTab.documentId && activeTab.searchSpaceId ? (
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<DocumentTabContent
|
||||
key={activeTab.documentId}
|
||||
documentId={activeTab.documentId}
|
||||
searchSpaceId={activeTab.searchSpaceId}
|
||||
title={activeTab.title}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LayoutShell({
|
||||
|
|
@ -138,6 +180,7 @@ export function LayoutShell({
|
|||
allSharedChatsPanel,
|
||||
allPrivateChatsPanel,
|
||||
documentsPanel,
|
||||
onTabSwitch,
|
||||
}: LayoutShellProps) {
|
||||
const isMobile = useIsMobile();
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
|
@ -454,14 +497,14 @@ export function LayoutShell({
|
|||
/>
|
||||
)}
|
||||
|
||||
{/* Main content panel */}
|
||||
<div className="relative flex flex-1 flex-col rounded-xl border bg-main-panel overflow-hidden min-w-0">
|
||||
<Header />
|
||||
|
||||
<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
{/* Main content panel */}
|
||||
<MainContentPanel
|
||||
isChatPage={isChatPage}
|
||||
onTabSwitch={onTabSwitch}
|
||||
onNewChat={onNewChat}
|
||||
>
|
||||
{children}
|
||||
</MainContentPanel>
|
||||
|
||||
{/* Right panel — tabbed Sources/Report (desktop only) */}
|
||||
{documentsPanel && (
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useAtom, useAtomValue, useSetAtom } from "jotai";
|
||||
import { openDocumentTabAtom } from "@/atoms/tabs/tabs.atom";
|
||||
import { ChevronLeft, ChevronRight, Unplug } from "lucide-react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
|
@ -15,15 +16,24 @@ import { sidebarSelectedDocumentsAtom } from "@/atoms/chat/mentioned-documents.a
|
|||
import { connectorDialogOpenAtom } from "@/atoms/connector-dialog/connector-dialog.atoms";
|
||||
import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
|
||||
import { deleteDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
|
||||
import { expandedFolderIdsAtom } from "@/atoms/documents/folder.atoms";
|
||||
import { CreateFolderDialog } from "@/components/documents/CreateFolderDialog";
|
||||
import type { DocumentNodeDoc } from "@/components/documents/DocumentNode";
|
||||
import { FolderPickerDialog } from "@/components/documents/FolderPickerDialog";
|
||||
import type { FolderDisplay } from "@/components/documents/FolderNode";
|
||||
import { FolderTreeView } from "@/components/documents/FolderTreeView";
|
||||
import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
|
||||
import type { DocumentTypeEnum } from "@/contracts/types/document.types";
|
||||
import { foldersApiService } from "@/lib/apis/folders-api.service";
|
||||
import { useDebouncedValue } from "@/hooks/use-debounced-value";
|
||||
import { useDocumentSearch } from "@/hooks/use-document-search";
|
||||
import { useDocuments } from "@/hooks/use-documents";
|
||||
import { useMediaQuery } from "@/hooks/use-media-query";
|
||||
import { useQuery } from "@rocicorp/zero/react";
|
||||
import { queries } from "@/zero/queries/index";
|
||||
import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
|
||||
|
||||
const SHOWCASE_CONNECTORS = [
|
||||
|
|
@ -63,6 +73,7 @@ export function DocumentsSidebar({
|
|||
const isMobile = !useMediaQuery("(min-width: 640px)");
|
||||
const searchSpaceId = Number(params.search_space_id);
|
||||
const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom);
|
||||
const openDocumentTab = useSetAtom(openDocumentTabAtom);
|
||||
const { data: connectors } = useAtomValue(connectorsAtom);
|
||||
const connectorCount = connectors?.length ?? 0;
|
||||
|
||||
|
|
@ -76,6 +87,219 @@ export function DocumentsSidebar({
|
|||
const [sidebarDocs, setSidebarDocs] = useAtom(sidebarSelectedDocumentsAtom);
|
||||
const mentionedDocIds = useMemo(() => new Set(sidebarDocs.map((d) => d.id)), [sidebarDocs]);
|
||||
|
||||
// Folder state
|
||||
const [expandedFolderMap, setExpandedFolderMap] = useAtom(expandedFolderIdsAtom);
|
||||
const expandedIds = useMemo(
|
||||
() => new Set(expandedFolderMap[searchSpaceId] ?? []),
|
||||
[expandedFolderMap, searchSpaceId],
|
||||
);
|
||||
const toggleFolderExpand = useCallback(
|
||||
(folderId: number) => {
|
||||
setExpandedFolderMap((prev) => {
|
||||
const current = new Set(prev[searchSpaceId] ?? []);
|
||||
if (current.has(folderId)) current.delete(folderId);
|
||||
else current.add(folderId);
|
||||
return { ...prev, [searchSpaceId]: [...current] };
|
||||
});
|
||||
},
|
||||
[searchSpaceId, setExpandedFolderMap],
|
||||
);
|
||||
|
||||
// Zero queries for tree data
|
||||
const [zeroFolders] = useQuery(queries.folders.bySpace({ searchSpaceId }));
|
||||
const [zeroAllDocs] = useQuery(queries.documents.bySpace({ searchSpaceId }));
|
||||
|
||||
const treeFolders: FolderDisplay[] = useMemo(
|
||||
() =>
|
||||
(zeroFolders ?? []).map((f) => ({
|
||||
id: f.id,
|
||||
name: f.name,
|
||||
position: f.position,
|
||||
parentId: f.parentId ?? null,
|
||||
searchSpaceId: f.searchSpaceId,
|
||||
})),
|
||||
[zeroFolders],
|
||||
);
|
||||
|
||||
const treeDocuments: DocumentNodeDoc[] = useMemo(
|
||||
() =>
|
||||
(zeroAllDocs ?? [])
|
||||
.filter((d) => d.title && d.title.trim() !== "")
|
||||
.map((d) => ({
|
||||
id: d.id,
|
||||
title: d.title,
|
||||
document_type: d.documentType,
|
||||
folderId: (d as { folderId?: number | null }).folderId ?? null,
|
||||
status: d.status as { state: string; reason?: string | null } | undefined,
|
||||
})),
|
||||
[zeroAllDocs],
|
||||
);
|
||||
|
||||
const foldersByParent = useMemo(() => {
|
||||
const map: Record<string, FolderDisplay[]> = {};
|
||||
for (const f of treeFolders) {
|
||||
const key = String(f.parentId ?? "root");
|
||||
(map[key] ??= []).push(f);
|
||||
}
|
||||
return map;
|
||||
}, [treeFolders]);
|
||||
|
||||
// Folder actions
|
||||
const [folderPickerOpen, setFolderPickerOpen] = useState(false);
|
||||
const [folderPickerTarget, setFolderPickerTarget] = useState<{
|
||||
type: "folder" | "document";
|
||||
id: number;
|
||||
disabledIds?: Set<number>;
|
||||
} | null>(null);
|
||||
|
||||
// Create-folder dialog state
|
||||
const [createFolderOpen, setCreateFolderOpen] = useState(false);
|
||||
const [createFolderParentId, setCreateFolderParentId] = useState<number | null>(null);
|
||||
|
||||
const createFolderParentName = useMemo(() => {
|
||||
if (createFolderParentId === null) return null;
|
||||
return treeFolders.find((f) => f.id === createFolderParentId)?.name ?? null;
|
||||
}, [createFolderParentId, treeFolders]);
|
||||
|
||||
const handleCreateFolder = useCallback(
|
||||
(parentId: number | null) => {
|
||||
setCreateFolderParentId(parentId);
|
||||
setCreateFolderOpen(true);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleCreateFolderConfirm = useCallback(
|
||||
async (name: string) => {
|
||||
try {
|
||||
await foldersApiService.createFolder({
|
||||
name,
|
||||
parent_id: createFolderParentId,
|
||||
search_space_id: searchSpaceId,
|
||||
});
|
||||
toast.success("Folder created");
|
||||
if (createFolderParentId !== null) {
|
||||
setExpandedFolderMap((prev) => {
|
||||
const current = new Set(prev[searchSpaceId] ?? []);
|
||||
current.add(createFolderParentId);
|
||||
return { ...prev, [searchSpaceId]: [...current] };
|
||||
});
|
||||
}
|
||||
} catch (e: any) {
|
||||
toast.error(e?.message || "Failed to create folder");
|
||||
}
|
||||
},
|
||||
[createFolderParentId, searchSpaceId, setExpandedFolderMap],
|
||||
);
|
||||
|
||||
const handleRenameFolder = useCallback(
|
||||
async (folder: FolderDisplay, newName: string) => {
|
||||
try {
|
||||
await foldersApiService.updateFolder(folder.id, { name: newName });
|
||||
toast.success("Folder renamed");
|
||||
} catch (e: any) {
|
||||
toast.error(e?.message || "Failed to rename folder");
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleDeleteFolder = useCallback(
|
||||
async (folder: FolderDisplay) => {
|
||||
if (!confirm(`Delete folder "${folder.name}" and all its contents?`)) return;
|
||||
try {
|
||||
await foldersApiService.deleteFolder(folder.id);
|
||||
toast.success("Folder deleted");
|
||||
} catch (e: any) {
|
||||
toast.error(e?.message || "Failed to delete folder");
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleMoveFolder = useCallback(
|
||||
(folder: FolderDisplay) => {
|
||||
const subtreeIds = new Set<number>();
|
||||
function collectSubtree(id: number) {
|
||||
subtreeIds.add(id);
|
||||
for (const child of foldersByParent[String(id)] ?? []) {
|
||||
collectSubtree(child.id);
|
||||
}
|
||||
}
|
||||
collectSubtree(folder.id);
|
||||
setFolderPickerTarget({
|
||||
type: "folder",
|
||||
id: folder.id,
|
||||
disabledIds: subtreeIds,
|
||||
});
|
||||
setFolderPickerOpen(true);
|
||||
},
|
||||
[foldersByParent],
|
||||
);
|
||||
|
||||
const handleMoveDocument = useCallback((doc: DocumentNodeDoc) => {
|
||||
setFolderPickerTarget({ type: "document", id: doc.id });
|
||||
setFolderPickerOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleFolderPickerSelect = useCallback(
|
||||
async (targetFolderId: number | null) => {
|
||||
if (!folderPickerTarget) return;
|
||||
try {
|
||||
if (folderPickerTarget.type === "folder") {
|
||||
await foldersApiService.moveFolder(folderPickerTarget.id, {
|
||||
new_parent_id: targetFolderId,
|
||||
});
|
||||
toast.success("Folder moved");
|
||||
} else {
|
||||
await foldersApiService.moveDocument(folderPickerTarget.id, {
|
||||
folder_id: targetFolderId,
|
||||
});
|
||||
toast.success("Document moved");
|
||||
}
|
||||
} catch (e: any) {
|
||||
toast.error(e?.message || "Failed to move item");
|
||||
}
|
||||
setFolderPickerTarget(null);
|
||||
},
|
||||
[folderPickerTarget],
|
||||
);
|
||||
|
||||
const handleDropIntoFolder = useCallback(
|
||||
async (itemType: "folder" | "document", itemId: number, targetFolderId: number | null) => {
|
||||
try {
|
||||
if (itemType === "folder") {
|
||||
await foldersApiService.moveFolder(itemId, {
|
||||
new_parent_id: targetFolderId,
|
||||
});
|
||||
toast.success("Folder moved");
|
||||
} else {
|
||||
await foldersApiService.moveDocument(itemId, {
|
||||
folder_id: targetFolderId,
|
||||
});
|
||||
toast.success("Document moved");
|
||||
}
|
||||
} catch (e: any) {
|
||||
toast.error(e?.message || "Failed to move item");
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleReorderFolder = useCallback(
|
||||
async (folderId: number, beforePos: string | null, afterPos: string | null) => {
|
||||
try {
|
||||
await foldersApiService.reorderFolder(folderId, {
|
||||
before_position: beforePos,
|
||||
after_position: afterPos,
|
||||
});
|
||||
} catch (e: any) {
|
||||
toast.error(e?.message || "Failed to reorder folder");
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleToggleChatMention = useCallback(
|
||||
(doc: { id: number; title: string; document_type: string }, isMentioned: boolean) => {
|
||||
if (isMentioned) {
|
||||
|
|
@ -123,14 +347,14 @@ export function DocumentsSidebar({
|
|||
const loadingMore = isSearchMode ? searchLoadingMore : realtimeLoadingMore;
|
||||
const onLoadMore = isSearchMode ? searchLoadMore : realtimeLoadMore;
|
||||
|
||||
const onToggleType = (type: DocumentTypeEnum, checked: boolean) => {
|
||||
const onToggleType = useCallback((type: DocumentTypeEnum, checked: boolean) => {
|
||||
setActiveTypes((prev) => {
|
||||
if (checked) {
|
||||
return prev.includes(type) ? prev : [...prev, type];
|
||||
}
|
||||
return prev.filter((t) => t !== type);
|
||||
});
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleDeleteDocument = useCallback(
|
||||
async (id: number): Promise<boolean> => {
|
||||
|
|
@ -340,27 +564,83 @@ export function DocumentsSidebar({
|
|||
searchValue={search}
|
||||
onToggleType={onToggleType}
|
||||
activeTypes={activeTypes}
|
||||
onCreateFolder={() => handleCreateFolder(null)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DocumentsTableShell
|
||||
documents={displayDocs}
|
||||
loading={!!loading}
|
||||
error={!!error}
|
||||
sortKey={sortKey}
|
||||
sortDesc={sortDesc}
|
||||
onSortChange={handleSortChange}
|
||||
deleteDocument={handleDeleteDocument}
|
||||
bulkDeleteDocuments={handleBulkDeleteDocuments}
|
||||
searchSpaceId={String(searchSpaceId)}
|
||||
hasMore={hasMore}
|
||||
loadingMore={loadingMore}
|
||||
onLoadMore={onLoadMore}
|
||||
mentionedDocIds={mentionedDocIds}
|
||||
onToggleChatMention={handleToggleChatMention}
|
||||
isSearchMode={isSearchMode || activeTypes.length > 0}
|
||||
/>
|
||||
{isSearchMode ? (
|
||||
<DocumentsTableShell
|
||||
documents={displayDocs}
|
||||
loading={!!loading}
|
||||
error={!!error}
|
||||
sortKey={sortKey}
|
||||
sortDesc={sortDesc}
|
||||
onSortChange={handleSortChange}
|
||||
deleteDocument={handleDeleteDocument}
|
||||
bulkDeleteDocuments={handleBulkDeleteDocuments}
|
||||
searchSpaceId={String(searchSpaceId)}
|
||||
hasMore={hasMore}
|
||||
loadingMore={loadingMore}
|
||||
onLoadMore={onLoadMore}
|
||||
mentionedDocIds={mentionedDocIds}
|
||||
onToggleChatMention={handleToggleChatMention}
|
||||
isSearchMode={isSearchMode || activeTypes.length > 0}
|
||||
/>
|
||||
) : (
|
||||
<FolderTreeView
|
||||
folders={treeFolders}
|
||||
documents={treeDocuments}
|
||||
expandedIds={expandedIds}
|
||||
onToggleExpand={toggleFolderExpand}
|
||||
mentionedDocIds={mentionedDocIds}
|
||||
onToggleChatMention={handleToggleChatMention}
|
||||
onRenameFolder={handleRenameFolder}
|
||||
onDeleteFolder={handleDeleteFolder}
|
||||
onMoveFolder={handleMoveFolder}
|
||||
onCreateFolder={handleCreateFolder}
|
||||
onPreviewDocument={(doc) => {
|
||||
openDocumentTab({
|
||||
documentId: doc.id,
|
||||
searchSpaceId,
|
||||
title: doc.title,
|
||||
});
|
||||
}}
|
||||
onEditDocument={(doc) => {
|
||||
openDocumentTab({
|
||||
documentId: doc.id,
|
||||
searchSpaceId,
|
||||
title: doc.title,
|
||||
});
|
||||
}}
|
||||
onDeleteDocument={(doc) => handleDeleteDocument(doc.id)}
|
||||
onMoveDocument={handleMoveDocument}
|
||||
activeTypes={activeTypes}
|
||||
onDropIntoFolder={handleDropIntoFolder}
|
||||
onReorderFolder={handleReorderFolder}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<FolderPickerDialog
|
||||
open={folderPickerOpen}
|
||||
onOpenChange={setFolderPickerOpen}
|
||||
folders={treeFolders}
|
||||
title={
|
||||
folderPickerTarget?.type === "folder"
|
||||
? "Move folder to..."
|
||||
: "Move document to..."
|
||||
}
|
||||
description="Select a destination folder, or choose Root to move to the top level."
|
||||
disabledFolderIds={folderPickerTarget?.disabledIds}
|
||||
onSelect={handleFolderPickerSelect}
|
||||
/>
|
||||
|
||||
<CreateFolderDialog
|
||||
open={createFolderOpen}
|
||||
onOpenChange={setCreateFolderOpen}
|
||||
parentFolderName={createFolderParentName}
|
||||
onConfirm={handleCreateFolderConfirm}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
|
|
|
|||
237
surfsense_web/components/layout/ui/tabs/DocumentTabContent.tsx
Normal file
237
surfsense_web/components/layout/ui/tabs/DocumentTabContent.tsx
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
"use client";
|
||||
|
||||
import { AlertCircle, Pencil } from "lucide-react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { PlateEditor } from "@/components/editor/plate-editor";
|
||||
import { MarkdownViewer } from "@/components/markdown-viewer";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
|
||||
|
||||
interface DocumentContent {
|
||||
document_id: number;
|
||||
title: string;
|
||||
document_type?: string;
|
||||
source_markdown: string;
|
||||
}
|
||||
|
||||
function DocumentSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6 p-8 max-w-4xl mx-auto">
|
||||
<div className="h-8 w-3/4 rounded-md bg-muted/60 animate-pulse" />
|
||||
<div className="space-y-3">
|
||||
<div className="h-4 w-full rounded-md bg-muted/60 animate-pulse" />
|
||||
<div className="h-4 w-[95%] rounded-md bg-muted/60 animate-pulse [animation-delay:100ms]" />
|
||||
<div className="h-4 w-[88%] rounded-md bg-muted/60 animate-pulse [animation-delay:200ms]" />
|
||||
<div className="h-4 w-[60%] rounded-md bg-muted/60 animate-pulse [animation-delay:300ms]" />
|
||||
</div>
|
||||
<div className="h-6 w-2/5 rounded-md bg-muted/60 animate-pulse [animation-delay:400ms]" />
|
||||
<div className="space-y-3">
|
||||
<div className="h-4 w-full rounded-md bg-muted/60 animate-pulse [animation-delay:500ms]" />
|
||||
<div className="h-4 w-[92%] rounded-md bg-muted/60 animate-pulse [animation-delay:600ms]" />
|
||||
<div className="h-4 w-[75%] rounded-md bg-muted/60 animate-pulse [animation-delay:700ms]" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface DocumentTabContentProps {
|
||||
documentId: number;
|
||||
searchSpaceId: number;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export function DocumentTabContent({ documentId, searchSpaceId, title }: DocumentTabContentProps) {
|
||||
const [doc, setDoc] = useState<DocumentContent | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [editedMarkdown, setEditedMarkdown] = useState<string | null>(null);
|
||||
const markdownRef = useRef<string>("");
|
||||
const initialLoadDone = useRef(false);
|
||||
const changeCountRef = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
setDoc(null);
|
||||
setIsEditing(false);
|
||||
setEditedMarkdown(null);
|
||||
initialLoadDone.current = false;
|
||||
changeCountRef.current = 0;
|
||||
|
||||
const fetchContent = async () => {
|
||||
const token = getBearerToken();
|
||||
if (!token) {
|
||||
redirectToLogin();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await authenticatedFetch(
|
||||
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${documentId}/editor-content`,
|
||||
{ method: "GET" }
|
||||
);
|
||||
|
||||
if (cancelled) return;
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response
|
||||
.json()
|
||||
.catch(() => ({ detail: "Failed to fetch document" }));
|
||||
throw new Error(errorData.detail || "Failed to fetch document");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.source_markdown === undefined || data.source_markdown === null) {
|
||||
setError("This document does not have viewable content.");
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
markdownRef.current = data.source_markdown;
|
||||
setDoc(data);
|
||||
initialLoadDone.current = true;
|
||||
} catch (err) {
|
||||
if (cancelled) return;
|
||||
console.error("Error fetching document:", err);
|
||||
setError(err instanceof Error ? err.message : "Failed to fetch document");
|
||||
} finally {
|
||||
if (!cancelled) setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchContent();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [documentId, searchSpaceId]);
|
||||
|
||||
const handleMarkdownChange = useCallback((md: string) => {
|
||||
markdownRef.current = md;
|
||||
if (!initialLoadDone.current) return;
|
||||
changeCountRef.current += 1;
|
||||
if (changeCountRef.current <= 1) return;
|
||||
setEditedMarkdown(md);
|
||||
}, []);
|
||||
|
||||
const handleSave = useCallback(async () => {
|
||||
const token = getBearerToken();
|
||||
if (!token) {
|
||||
toast.error("Please login to save");
|
||||
redirectToLogin();
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
const response = await authenticatedFetch(
|
||||
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${documentId}/save`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ source_markdown: markdownRef.current }),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response
|
||||
.json()
|
||||
.catch(() => ({ detail: "Failed to save document" }));
|
||||
throw new Error(errorData.detail || "Failed to save document");
|
||||
}
|
||||
|
||||
setDoc((prev) => (prev ? { ...prev, source_markdown: markdownRef.current } : prev));
|
||||
setEditedMarkdown(null);
|
||||
toast.success("Document saved! Reindexing in background...");
|
||||
} catch (err) {
|
||||
console.error("Error saving document:", err);
|
||||
toast.error(err instanceof Error ? err.message : "Failed to save document");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}, [documentId, searchSpaceId]);
|
||||
|
||||
if (isLoading) return <DocumentSkeleton />;
|
||||
|
||||
if (error || !doc) {
|
||||
return (
|
||||
<div className="flex flex-1 flex-col items-center justify-center gap-3 p-6 text-center">
|
||||
<AlertCircle className="size-10 text-destructive" />
|
||||
<div>
|
||||
<p className="font-medium text-foreground text-lg">Failed to load document</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{error || "An unknown error occurred"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-hidden">
|
||||
<div className="flex items-center justify-between px-6 py-3 border-b shrink-0">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h1 className="text-base font-semibold truncate">
|
||||
{doc.title || title || "Untitled"}
|
||||
</h1>
|
||||
{editedMarkdown !== null && (
|
||||
<p className="text-xs text-muted-foreground">Unsaved changes</p>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setIsEditing(false);
|
||||
setEditedMarkdown(null);
|
||||
changeCountRef.current = 0;
|
||||
}}
|
||||
>
|
||||
Done editing
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<PlateEditor
|
||||
key={`edit-${documentId}`}
|
||||
preset="full"
|
||||
markdown={doc.source_markdown}
|
||||
onMarkdownChange={handleMarkdownChange}
|
||||
readOnly={false}
|
||||
placeholder="Start writing..."
|
||||
editorVariant="default"
|
||||
onSave={handleSave}
|
||||
hasUnsavedChanges={editedMarkdown !== null}
|
||||
isSaving={saving}
|
||||
defaultEditing={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-hidden">
|
||||
<div className="flex items-center justify-between px-6 py-3 border-b shrink-0">
|
||||
<h1 className="text-base font-semibold truncate flex-1 min-w-0">
|
||||
{doc.title || title || "Untitled"}
|
||||
</h1>
|
||||
{doc.document_type === "NOTE" && (
|
||||
<Button variant="outline" size="sm" onClick={() => setIsEditing(true)} className="gap-1.5">
|
||||
<Pencil className="size-3.5" />
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto">
|
||||
<div className="max-w-4xl mx-auto px-6 py-6">
|
||||
<MarkdownViewer content={doc.source_markdown} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
129
surfsense_web/components/layout/ui/tabs/TabBar.tsx
Normal file
129
surfsense_web/components/layout/ui/tabs/TabBar.tsx
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
"use client";
|
||||
|
||||
import { useAtomValue, useSetAtom } from "jotai";
|
||||
import { FileText, MessageSquare, Plus, X } from "lucide-react";
|
||||
import { useCallback, useRef, useEffect } from "react";
|
||||
import {
|
||||
activeTabIdAtom,
|
||||
closeTabAtom,
|
||||
switchTabAtom,
|
||||
tabsAtom,
|
||||
type Tab,
|
||||
} from "@/atoms/tabs/tabs.atom";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface TabBarProps {
|
||||
onTabSwitch?: (tab: Tab) => void;
|
||||
onNewChat?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) {
|
||||
const tabs = useAtomValue(tabsAtom);
|
||||
const activeTabId = useAtomValue(activeTabIdAtom);
|
||||
const switchTab = useSetAtom(switchTabAtom);
|
||||
const closeTab = useSetAtom(closeTabAtom);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleTabClick = useCallback(
|
||||
(tab: Tab) => {
|
||||
if (tab.id === activeTabId) return;
|
||||
switchTab(tab.id);
|
||||
onTabSwitch?.(tab);
|
||||
},
|
||||
[activeTabId, switchTab, onTabSwitch]
|
||||
);
|
||||
|
||||
const handleTabClose = useCallback(
|
||||
(e: React.MouseEvent, tabId: string) => {
|
||||
e.stopPropagation();
|
||||
const fallback = closeTab(tabId);
|
||||
if (fallback) {
|
||||
onTabSwitch?.(fallback);
|
||||
}
|
||||
},
|
||||
[closeTab, onTabSwitch]
|
||||
);
|
||||
|
||||
// Scroll active tab into view
|
||||
useEffect(() => {
|
||||
if (!scrollRef.current || !activeTabId) return;
|
||||
const activeEl = scrollRef.current.querySelector(`[data-tab-id="${activeTabId}"]`);
|
||||
if (activeEl) {
|
||||
activeEl.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
||||
}
|
||||
}, [activeTabId]);
|
||||
|
||||
// Only show tab bar when there's more than one tab
|
||||
if (tabs.length <= 1) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center shrink-0 border-b bg-main-panel",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className="flex items-center flex-1 overflow-x-auto scrollbar-none"
|
||||
>
|
||||
{tabs.map((tab) => {
|
||||
const isActive = tab.id === activeTabId;
|
||||
const Icon = tab.type === "document" ? FileText : MessageSquare;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
type="button"
|
||||
data-tab-id={tab.id}
|
||||
onClick={() => handleTabClick(tab)}
|
||||
className={cn(
|
||||
"group relative flex items-center gap-1.5 px-3 h-9 min-w-0 max-w-[200px] text-xs font-medium border-r transition-colors shrink-0",
|
||||
isActive
|
||||
? "bg-main-panel text-foreground"
|
||||
: "bg-muted/30 text-muted-foreground hover:bg-muted/60 hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
{isActive && (
|
||||
<span className="absolute bottom-0 left-0 right-0 h-[2px] bg-primary" />
|
||||
)}
|
||||
<Icon className="size-3.5 shrink-0" />
|
||||
<span className="truncate">{tab.title}</span>
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => handleTabClose(e, tab.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
handleTabClose(e as unknown as React.MouseEvent, tab.id);
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
"ml-auto shrink-0 rounded-sm p-0.5 transition-colors",
|
||||
isActive
|
||||
? "opacity-60 hover:opacity-100 hover:bg-muted"
|
||||
: "opacity-0 group-hover:opacity-60 hover:opacity-100! hover:bg-muted"
|
||||
)}
|
||||
>
|
||||
<X className="size-3" />
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{onNewChat && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onNewChat}
|
||||
className="flex items-center justify-center size-9 shrink-0 text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors"
|
||||
title="New Chat"
|
||||
>
|
||||
<Plus className="size-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue