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

refactor(ui): standardize header styles across panels; adjust button sizes and spacing for improved layout consistency

Browse source
This commit is contained in:
Anish Sarkar 2026-05-04 03:06:01 +05:30
parent c1c34eb916
commit 5c77864b14
5 changed files with 37 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

3
surfsense_web/components/assistant-ui/chat-viewport.tsx
View file

@ -9,8 +9,7 @@ const ChatScrollToBottom: FC = () => (
<ThreadPrimitive.ScrollToBottom asChild>
<TooltipIconButton
tooltip="Scroll to bottom"
variant="outline"
className="aui-thread-scroll-to-bottom -top-12 absolute z-10 self-center rounded-full p-4 disabled:invisible dark:bg-main-panel dark:hover:bg-accent"
className="aui-thread-scroll-to-bottom -top-12 absolute z-10 self-center rounded-full border-0 bg-muted p-4 text-foreground hover:bg-muted/80 disabled:invisible"
>
<ArrowDownIcon />
</TooltipIconButton>

17
surfsense_web/components/citation-panel/citation-panel.tsx
View file

@ -94,19 +94,24 @@ export const CitationPanelContent: FC<CitationPanelContentProps> = ({ chunkId, o
return (
<>
<div className="shrink-0 border-b">
<div className="flex h-14 items-center justify-between px-4">
<h2 className="text-lg font-medium text-muted-foreground select-none">Citation</h2>
<div className="shrink-0">
<div className="shrink-0 flex h-12 items-center justify-between px-3 border-b">
<h2 className="select-none text-lg font-semibold">Citation</h2>
<div className="flex items-center gap-1 shrink-0">
{onClose && (
<Button variant="ghost" size="icon" onClick={onClose} className="size-7 shrink-0">
<XIcon className="size-4" />
<Button
variant="ghost"
size="icon"
onClick={onClose}
className="h-8 w-8 rounded-full shrink-0"
>
<XIcon className="h-4 w-4 text-muted-foreground" />
<span className="sr-only">Close citation panel</span>
</Button>
)}
</div>
</div>
<div className="flex h-10 items-center justify-between gap-2 border-t px-4">
<div className="flex h-10 items-center justify-between gap-2 border-b px-4">
<div className="min-w-0 flex flex-1 items-center gap-2">
<p className="truncate text-sm text-muted-foreground">
{data?.title ?? (isLoading ? "Loading…" : `Chunk #${chunkId}`)}

19
surfsense_web/components/editor-panel/editor-panel.tsx
View file

@ -448,17 +448,22 @@ export function EditorPanelContent({
return (
<>
{showDesktopHeader ? (
<div className="shrink-0 border-b">
<div className="flex h-14 items-center justify-between px-4">
<h2 className="text-lg font-medium text-muted-foreground select-none">File</h2>
<div className="shrink-0">
<div className="shrink-0 flex h-12 items-center justify-between px-3 border-b">
<h2 className="select-none text-lg font-semibold">File</h2>
<div className="flex items-center gap-1 shrink-0">
<Button variant="ghost" size="icon" onClick={onClose} className="size-7 shrink-0">
<XIcon className="size-4" />
<Button
variant="ghost"
size="icon"
onClick={onClose}
className="h-8 w-8 rounded-full shrink-0"
>
<XIcon className="h-4 w-4 text-muted-foreground" />
<span className="sr-only">Close editor panel</span>
</Button>
</div>
</div>
<div className="flex h-10 items-center justify-between gap-2 border-t px-4">
<div className="flex h-10 items-center justify-between gap-2 border-b px-4">
<div className="min-w-0 flex flex-1 items-center gap-2">
<p className="truncate text-sm text-muted-foreground">{displayTitle}</p>
</div>
@ -667,7 +672,7 @@ export function EditorPanelContent({
placeholder="Start writing..."
editorVariant="default"
allowModeToggle={false}
reserveToolbarSpace
reserveToolbarSpace={isEditing}
defaultEditing={isEditing}
className="**:[[role=toolbar]]:bg-sidebar!"
// Render `[citation:N]` badges in view mode only.

19
surfsense_web/components/report-panel/report-panel.tsx
View file

@ -446,21 +446,26 @@ export function ReportPanelContent({
<>
{showDesktopHeader ? (
<>
{/* Header — matches the editor panel "File" header pattern */}
<div className="flex h-14 items-center justify-between px-4 shrink-0">
<h2 className="text-lg font-medium text-muted-foreground select-none">
{/* Header — matches the Documents panel header pattern */}
<div className="shrink-0 flex h-12 items-center justify-between px-3 border-b">
<h2 className="select-none text-lg font-semibold">
{isResume ? "Resume" : "Report"}
</h2>
{onClose && (
<Button variant="ghost" size="icon" onClick={onClose} className="size-7 shrink-0">
<XIcon className="size-4" />
<Button
variant="ghost"
size="icon"
onClick={onClose}
className="h-8 w-8 rounded-full shrink-0"
>
<XIcon className="h-4 w-4 text-muted-foreground" />
<span className="sr-only">Close report panel</span>
</Button>
)}
</div>
{!isResume && (
<div className="flex h-10 items-center justify-between gap-2 border-t border-b px-4 shrink-0">
<div className="flex h-10 items-center justify-between gap-2 border-b px-4 shrink-0">
<div className="min-w-0 flex-1">
<p className="truncate text-sm text-muted-foreground">
{reportContent?.title || title}
@ -528,7 +533,7 @@ export function ReportPanelContent({
placeholder="Report content..."
editorVariant="default"
allowModeToggle={false}
reserveToolbarSpace
reserveToolbarSpace={isEditing}
defaultEditing={isEditing}
className="[&_[role=toolbar]]:!bg-sidebar"
// Show citation badges in view mode; raw `[citation:N]`

2
surfsense_web/components/ui/fixed-toolbar.tsx
View file

@ -14,7 +14,7 @@ export function FixedToolbar({
return (
<Toolbar
className={cn(
"scrollbar-hide sticky top-0 left-0 z-10 w-full justify-between overflow-x-auto border-b bg-background/95 p-1 backdrop-blur supports-backdrop-filter:bg-background/60",
"scrollbar-hide absolute top-0 left-0 z-[60] w-full justify-between overflow-x-auto border-b bg-background p-1",
className
)}
{...props}