apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-23 19:05:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: replace button elements with Button component for improved consistency and styling across multiple UI components

Browse source
This commit is contained in:
Anish Sarkar 2026-05-14 14:17:44 +05:30
parent 23e05acc7c
commit 3d42712b3f
27 changed files with 401 additions and 424 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -85,42 +85,47 @@ export function FolderPickerDialog({
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 hover:text-accent-foreground",
isDisabled && "cursor-not-allowed opacity-40"
)}
style={{ paddingLeft: `${depth * 16 + 8}px` }}
onClick={() => {
if (!isDisabled) setSelectedId(f.id);
}}
>
{hasChildren ? (
<button
<div key={f.id} className="relative w-full">
{hasChildren && (
<Button
type="button"
className="flex h-4 w-4 shrink-0 items-center justify-center"
variant="ghost"
size="icon"
disabled={isDisabled}
className="absolute top-1/2 z-10 size-4 -translate-y-1/2 p-0"
style={{ left: `${depth * 16 + 8}px` }}
aria-label={isExpanded ? `Collapse ${f.name}` : `Expand ${f.name}`}
onClick={(e) => {
e.stopPropagation();
toggleExpand(f.id);
}}
>
{isExpanded ? (
<ChevronDown className="h-3.5 w-3.5" />
<ChevronDown data-icon="inline-start" />
) : (
<ChevronRight className="h-3.5 w-3.5" />
<ChevronRight data-icon="inline-start" />
)}
</button>
) : (
<span className="h-4 w-4 shrink-0" />
</Button>
)}
<FolderIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
<span className="truncate">{f.name}</span>
</button>,
<Button
type="button"
variant="ghost"
disabled={isDisabled}
className={cn(
"h-auto w-full justify-start gap-1.5 px-2 py-1.5 text-sm font-normal",
isSelected && "bg-accent text-accent-foreground",
isDisabled && "cursor-not-allowed opacity-40"
)}
style={{ paddingLeft: `${depth * 16 + 8}px` }}
onClick={() => {
if (!isDisabled) setSelectedId(f.id);
}}
>
<span className="size-4 shrink-0" />
<FolderIcon data-icon="inline-start" className="text-muted-foreground" />
<span className="truncate">{f.name}</span>
</Button>
</div>,
...(isExpanded ? renderPickerLevel(f.id, depth + 1) : []),
];
});
@ -143,19 +148,19 @@ export function FolderPickerDialog({
</DialogHeader>
<div className="max-h-[300px] overflow-y-auto rounded-md border p-1">
<button
<Button
type="button"
variant="ghost"
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 hover:text-accent-foreground"
"h-auto w-full justify-start gap-1.5 px-2 py-1.5 text-sm font-normal",
selectedId === null && "bg-accent text-accent-foreground"
)}
onClick={() => setSelectedId(null)}
>
<span className="h-4 w-4 shrink-0" />
<Home className="h-4 w-4 shrink-0 text-muted-foreground" />
<span className="size-4 shrink-0" />
<Home data-icon="inline-start" className="text-muted-foreground" />
<span>Root</span>
</button>
</Button>
{renderPickerLevel(null, 1)}
</div>