apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-09 15:52:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: update report panel and toolbar components for improved layout and accessibility, including enhanced styling and conditional rendering

Browse source
This commit is contained in:
Anish Sarkar 2026-02-17 03:25:24 +05:30
parent d7118fba15
commit 2b2a4c858a
5 changed files with 102 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,7 @@ import { z } from "zod";
import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom"; import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom";
import { PlateEditor } from "@/components/editor/plate-editor"; import { PlateEditor } from "@/components/editor/plate-editor";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Drawer, DrawerContent, DrawerHandle } from "@/components/ui/drawer"; import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@ -499,8 +499,9 @@ function MobileReportDrawer() {
}} }}
shouldScaleBackground={false} shouldScaleBackground={false}
> >
<DrawerContent className="h-[90vh] max-h-[90vh] z-80" overlayClassName="z-80"> <DrawerContent className="h-[90vh] max-h-[90vh] z-80 !rounded-none border-none" overlayClassName="z-80">
<DrawerHandle /> <DrawerHandle />
<DrawerTitle className="sr-only">{panelState.title || "Report"}</DrawerTitle>
<div className="min-h-0 flex-1 flex flex-col overflow-hidden"> <div className="min-h-0 flex-1 flex flex-col overflow-hidden">
<ReportPanelContent <ReportPanelContent
reportId={panelState.reportId} reportId={panelState.reportId}

6
surfsense_web/components/ui/editor.tsx
View file

@ -77,9 +77,9 @@ const editorVariants = cva(
'max-h-[min(70vh,320px)] w-full overflow-y-auto px-3 py-2 text-base md:text-sm', 'max-h-[min(70vh,320px)] w-full overflow-y-auto px-3 py-2 text-base md:text-sm',
comment: cn('rounded-none border-none bg-transparent text-sm'), comment: cn('rounded-none border-none bg-transparent text-sm'),
default: default:
'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]', 'size-full px-6 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
demo: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]', demo: 'size-full px-6 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
fullWidth: 'size-full px-16 pt-4 pb-72 text-base sm:px-24', fullWidth: 'size-full px-6 pt-4 pb-72 text-base sm:px-24',
none: '', none: '',
select: 'px-3 py-2 text-base data-readonly:w-fit', select: 'px-3 py-2 text-base data-readonly:w-fit',
}, },

11
surfsense_web/components/ui/fixed-toolbar-buttons.tsx
View file

@ -32,7 +32,9 @@ export function FixedToolbarButtons() {
const { onSave, hasUnsavedChanges, isSaving, canToggleMode } = useEditorSave(); const { onSave, hasUnsavedChanges, isSaving, canToggleMode } = useEditorSave();
return ( return (
<div className="flex w-full flex-wrap"> <div className="flex w-full items-center">
{/* Scrollable editing buttons */}
<div className="flex flex-1 min-w-0 overflow-x-auto scrollbar-hide">
{!readOnly && ( {!readOnly && (
<> <>
<ToolbarGroup> <ToolbarGroup>
@ -100,12 +102,12 @@ export function FixedToolbarButtons() {
<ToolbarGroup> <ToolbarGroup>
<LinkToolbarButton /> <LinkToolbarButton />
</ToolbarGroup> </ToolbarGroup>
</> </>
)} )}
</div>
<div className="grow" /> {/* Fixed right-side buttons (Save + Mode) */}
<div className="flex shrink-0 items-center">
{/* Save button — only in edit mode with unsaved changes */} {/* Save button — only in edit mode with unsaved changes */}
{!readOnly && onSave && hasUnsavedChanges && ( {!readOnly && onSave && hasUnsavedChanges && (
<ToolbarGroup> <ToolbarGroup>
@ -131,5 +133,6 @@ export function FixedToolbarButtons() {
</ToolbarGroup> </ToolbarGroup>
)} )}
</div> </div>
</div>
); );
} }

2
surfsense_web/components/ui/insert-toolbar-button.tsx
View file

@ -195,7 +195,7 @@ export function InsertToolbarButton(props: DropdownMenuProps) {
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
className="flex max-h-[500px] min-w-0 flex-col overflow-y-auto dark:bg-neutral-800 dark:border dark:border-neutral-700" className="z-[100] flex max-h-[60vh] min-w-0 flex-col overflow-y-auto dark:bg-neutral-800 dark:border dark:border-neutral-700"
align="start" align="start"
> >
{groups.map(({ group, items }) => ( {groups.map(({ group, items }) => (

4
surfsense_web/components/ui/turn-into-toolbar-button.tsx
View file

@ -145,7 +145,7 @@ export function TurnIntoToolbarButton({ tooltip = 'Turn into', ...props }: Dropd
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}> <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<ToolbarButton <ToolbarButton
className="min-w-[125px]" className="min-w-[80px] sm:min-w-[125px]"
pressed={open} pressed={open}
tooltip={tooltip} tooltip={tooltip}
isDropdown isDropdown
@ -155,7 +155,7 @@ export function TurnIntoToolbarButton({ tooltip = 'Turn into', ...props }: Dropd
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
className="ignore-click-outside/toolbar min-w-0 max-h-[350px] overflow-y-scroll dark:bg-neutral-800 dark:border dark:border-neutral-700" className="z-[100] ignore-click-outside/toolbar min-w-0 max-h-[60vh] overflow-y-auto dark:bg-neutral-800 dark:border dark:border-neutral-700"
onCloseAutoFocus={(e) => { onCloseAutoFocus={(e) => {
e.preventDefault(); e.preventDefault();
editor.tf.focus(); editor.tf.focus();