apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-25 00:36:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: improve UI components for folder and document management

Browse source
This commit is contained in:
Anish Sarkar 2026-03-27 23:11:13 +05:30
parent 17091edb77
commit ddccba0df8
5 changed files with 56 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

46
surfsense_web/components/documents/CreateFolderDialog.tsx
View file

@ -1,6 +1,5 @@
"use client";
import { FolderPlus } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import {
@ -52,22 +51,25 @@ export function CreateFolderDialog({
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>
<DialogContent className="select-none max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none">
<DialogHeader className="space-y-2 pb-2">
<div className="flex items-center gap-2 sm:gap-3">
<div className="flex-1 min-w-0">
<DialogTitle className="text-base sm:text-lg">
{isSubfolder ? "New subfolder" : "New folder"}
</DialogTitle>
<DialogDescription className="text-xs sm:text-sm mt-0.5">
{isSubfolder
? `Create a new folder inside "${parentFolderName}".`
: "Create a new folder at the root level."}
</DialogDescription>
</div>
</div>
</DialogHeader>
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
<form onSubmit={handleSubmit} className="flex flex-col gap-3 sm:gap-4">
<div className="flex flex-col gap-2">
<Label htmlFor="folder-name">Folder name</Label>
<Label htmlFor="folder-name" className="text-sm">Folder name</Label>
<Input
ref={inputRef}
id="folder-name"
@ -76,14 +78,24 @@ export function CreateFolderDialog({
onChange={(e) => setName(e.target.value)}
maxLength={255}
autoComplete="off"
className="text-sm h-9 sm:h-10"
/>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
<DialogFooter className="flex-row justify-end gap-2 pt-2 sm:pt-3">
<Button
type="button"
variant="secondary"
onClick={() => onOpenChange(false)}
className="h-8 sm:h-9 text-xs sm:text-sm"
>
Cancel
</Button>
<Button type="submit" disabled={!name.trim()}>
<Button
type="submit"
disabled={!name.trim()}
className="h-8 sm:h-9 text-xs sm:text-sm"
>
Create
</Button>
</DialogFooter>

6
surfsense_web/components/documents/DocumentNode.tsx
View file

@ -84,7 +84,7 @@ export const DocumentNode = React.memo(function DocumentNode({
role="button"
tabIndex={0}
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",
"group flex h-8 items-center gap-2.5 rounded-md px-1 text-sm hover:bg-accent/50 cursor-pointer select-none",
isMentioned && "bg-accent/30",
isDragging && "opacity-40"
)}
@ -137,7 +137,7 @@ export const DocumentNode = React.memo(function DocumentNode({
<MoreHorizontal className="h-3.5 w-3.5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-44">
<DropdownMenuContent align="end" className="w-40">
<DropdownMenuItem onClick={() => onPreview(doc)}>
<Eye className="mr-2 h-4 w-4" />
Open
@ -166,7 +166,7 @@ export const DocumentNode = React.memo(function DocumentNode({
</div>
</ContextMenuTrigger>
<ContextMenuContent className="w-44">
<ContextMenuContent className="w-40">
<ContextMenuItem onClick={() => onPreview(doc)}>
<Eye className="mr-2 h-4 w-4" />
Open

4
surfsense_web/components/documents/FolderNode.tsx
View file

@ -285,7 +285,7 @@ export const FolderNode = React.memo(function FolderNode({
<MoreHorizontal className="h-3.5 w-3.5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48">
<DropdownMenuContent align="end" className="w-40">
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation();
@ -331,7 +331,7 @@ export const FolderNode = React.memo(function FolderNode({
</ContextMenuTrigger>
{!isRenaming && (
<ContextMenuContent className="w-48">
<ContextMenuContent className="w-40">
<ContextMenuItem onClick={() => onCreateSubfolder(folder.id)}>
<FolderPlus className="mr-2 h-4 w-4" />
New subfolder

28
surfsense_web/components/documents/FolderPickerDialog.tsx
View file

@ -124,10 +124,18 @@ export function FolderPickerDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-sm">
<DialogHeader>
<DialogTitle>{title}</DialogTitle>
{description && <DialogDescription>{description}</DialogDescription>}
<DialogContent className="select-none max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none">
<DialogHeader className="space-y-2 pb-2">
<div className="flex items-center gap-2 sm:gap-3">
<div className="flex-1 min-w-0">
<DialogTitle className="text-base sm:text-lg">{title}</DialogTitle>
{description && (
<DialogDescription className="text-xs sm:text-sm mt-0.5">
{description}
</DialogDescription>
)}
</div>
</div>
</DialogHeader>
<div className="max-h-[300px] overflow-y-auto rounded-md border p-1">
@ -147,11 +155,17 @@ export function FolderPickerDialog({
{renderPickerLevel(null, 1)}
</div>
<DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>
<DialogFooter className="flex-row justify-end gap-2 pt-2 sm:pt-3">
<Button
variant="secondary"
onClick={() => onOpenChange(false)}
className="h-8 sm:h-9 text-xs sm:text-sm"
>
Cancel
</Button>
<Button onClick={handleConfirm}>Move here</Button>
<Button onClick={handleConfirm} className="h-8 sm:h-9 text-xs sm:text-sm">
Move here
</Button>
</DialogFooter>
</DialogContent>
</Dialog>

2
surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
View file

@ -617,7 +617,7 @@ export function DocumentsSidebar({
open={folderPickerOpen}
onOpenChange={setFolderPickerOpen}
folders={treeFolders}
title={folderPickerTarget?.type === "folder" ? "Move folder to..." : "Move document to..."}
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}