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(layout): implement background color management in DashboardClientLayout; streamline RightPanel and LayoutShell styles for consistency

Browse source
This commit is contained in:
Anish Sarkar 2026-05-04 02:05:20 +05:30
parent 147be71238
commit c1c34eb916
4 changed files with 23 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

22
surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx
View file

@ -144,6 +144,19 @@ export function DashboardClientLayout({
const electronAPI = useElectronAPI(); const electronAPI = useElectronAPI();
useEffect(() => {
const htmlBackground = document.documentElement.style.backgroundColor;
const bodyBackground = document.body.style.backgroundColor;
document.documentElement.style.backgroundColor = "var(--panel)";
document.body.style.backgroundColor = "var(--panel)";
return () => {
document.documentElement.style.backgroundColor = htmlBackground;
document.body.style.backgroundColor = bodyBackground;
};
}, []);
useEffect(() => { useEffect(() => {
if (!electronAPI?.onChatScreenCapture) return; if (!electronAPI?.onChatScreenCapture) return;
return electronAPI.onChatScreenCapture((dataUrl: string) => { return electronAPI.onChatScreenCapture((dataUrl: string) => {
@ -163,12 +176,13 @@ export function DashboardClientLayout({
setActiveSearchSpaceIdState(activeSeacrhSpaceId); setActiveSearchSpaceIdState(activeSeacrhSpaceId);
// Sync to Electron store if stored value is null (first navigation) // Sync to Electron store if stored value is null (first navigation)
if (electronAPI?.setActiveSearchSpace) { if (electronAPI?.getActiveSearchSpace && electronAPI.setActiveSearchSpace) {
const setActiveSearchSpace = electronAPI.setActiveSearchSpace;
electronAPI electronAPI
.getActiveSearchSpace?.() .getActiveSearchSpace()
.then((stored) => { .then((stored: string | null) => {
if (!stored) { if (!stored) {
electronAPI.setActiveSearchSpace!(activeSeacrhSpaceId); setActiveSearchSpace(activeSeacrhSpaceId);
} }
}) })
.catch(() => {}); .catch(() => {});

2
surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
View file

@ -203,7 +203,7 @@ export function RightPanel({ documentsPanel }: RightPanelProps) {
return ( return (
<aside <aside
style={{ width: targetWidth }} style={{ width: targetWidth }}
className="flex h-full shrink-0 flex-col border-l border-b bg-panel text-sidebar-foreground overflow-hidden transition-[width] duration-200 ease-out" className="flex h-full shrink-0 flex-col border-l bg-panel text-sidebar-foreground overflow-hidden transition-[width] duration-200 ease-out"
> >
<div className="relative flex-1 min-h-0 overflow-hidden"> <div className="relative flex-1 min-h-0 overflow-hidden">
{effectiveTab === "sources" && documentsOpen && documentsPanel && ( {effectiveTab === "sources" && documentsOpen && documentsPanel && (

4
surfsense_web/components/layout/ui/shell/LayoutShell.tsx
View file

@ -144,7 +144,7 @@ function MainContentPanel({
rightActions={<RightPanelExpandButton />} rightActions={<RightPanelExpandButton />}
className="min-w-0" className="min-w-0"
/> />
<div className="relative flex flex-1 flex-col border border-l-0 border-r-0 border-t-0 bg-panel overflow-hidden min-w-0"> <div className="relative flex flex-1 flex-col bg-panel overflow-hidden min-w-0">
<Header /> <Header />
{isDocumentTab && activeTab.documentId && activeTab.searchSpaceId ? ( {isDocumentTab && activeTab.documentId && activeTab.searchSpaceId ? (
@ -441,7 +441,7 @@ export function LayoutShell({
onPointerDown={onResizePointerDown} onPointerDown={onResizePointerDown}
style={{ touchAction: "none" }} style={{ touchAction: "none" }}
className={cn( className={cn(
"absolute top-0 right-0 h-full w-4 translate-x-1/2 z-50 select-none cursor-col-resize", "absolute top-0 right-0 h-full w-4 translate-x-1/2 z-50 m-0 border-0 bg-transparent p-0 select-none cursor-col-resize",
"after:content-[''] after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-transparent hover:after:bg-border/80 after:transition-colors", "after:content-[''] after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-transparent hover:after:bg-border/80 after:transition-colors",
isResizing && "after:bg-border" isResizing && "after:bg-border"
)} )}

4
surfsense_web/components/layout/ui/tabs/TabBar.tsx
View file

@ -170,11 +170,11 @@ export function TabBar({
{/* Hover-only gradient + close overlay (sidebar pattern) — keeps pill width fixed and avoids ellipsis shift. */} {/* Hover-only gradient + close overlay (sidebar pattern) — keeps pill width fixed and avoids ellipsis shift. */}
<div <div
className={cn( className={cn(
"pointer-events-none absolute right-0 top-0 bottom-0 flex items-center rounded-r-md pl-6 pr-2 opacity-0 transition-opacity duration-150", "pointer-events-none absolute right-0 top-0 bottom-0 flex items-center rounded-r-md pl-8 pr-2 opacity-0 transition-opacity duration-150",
"group-hover:opacity-100 group-focus-within:opacity-100", "group-hover:opacity-100 group-focus-within:opacity-100",
isActive isActive
? "bg-gradient-to-l from-muted from-60% to-transparent" ? "bg-gradient-to-l from-muted from-60% to-transparent"
: "bg-gradient-to-l from-muted/50 from-60% to-transparent" : "bg-gradient-to-l from-muted from-60% to-transparent"
)} )}
> >
{/* biome-ignore lint/a11y/useSemanticElements: cannot nest button inside button */} {/* biome-ignore lint/a11y/useSemanticElements: cannot nest button inside button */}