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(styles): unify panel and sidebar colors for consistent theming; update hover effects for buttons in the right panel and sidebar

Browse source
This commit is contained in:
Anish Sarkar 2026-05-03 20:38:21 +05:30
parent 2e1367b00e
commit cdce6a8f14
7 changed files with 44 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

2
surfsense_web/components/assistant-ui/user-message.tsx
View file

@ -102,7 +102,7 @@ export const UserMessage: FC = () => {
<div className="col-start-2 min-w-0">
<div className="aui-user-message-content-wrapper flex items-end gap-2">
<div className="relative flex-1 min-w-0">
<div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground">
<div className="aui-user-message-content wrap-break-word rounded-xl bg-muted px-4 py-2.5 text-foreground">
<MessagePrimitive.Parts components={userMessageParts} />
</div>
<div className="absolute right-0 top-full mt-1 z-10 opacity-100 pointer-events-auto md:opacity-0 md:pointer-events-none md:transition-opacity md:duration-200 md:delay-300 md:group-hover/user-msg:opacity-100 md:group-hover/user-msg:delay-0 md:group-hover/user-msg:pointer-events-auto">

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

@ -61,7 +61,7 @@ function CollapseButton({ onClick }: { onClick: () => void }) {
variant="ghost"
size="icon"
onClick={onClick}
className="h-8 w-8 shrink-0 text-muted-foreground hover:text-muted-foreground hover:bg-muted/40"
className="h-8 w-8 shrink-0 text-muted-foreground hover:text-muted-foreground hover:bg-accent"
>
<PanelRight className="h-4 w-4" />
<span className="sr-only">Collapse panel</span>
@ -102,7 +102,7 @@ export function RightPanelExpandButton() {
variant="ghost"
size="icon"
onClick={() => startTransition(() => setCollapsed(false))}
className="h-8 w-8 shrink-0 -m-0.5 text-muted-foreground hover:text-muted-foreground hover:bg-muted/40"
className="h-8 w-8 shrink-0 -m-0.5 text-muted-foreground hover:text-muted-foreground hover:bg-accent"
>
<PanelRight className="h-4 w-4" />
<span className="sr-only">Expand panel</span>
@ -203,7 +203,7 @@ export function RightPanel({ documentsPanel }: RightPanelProps) {
return (
<aside
style={{ width: targetWidth }}
className="flex h-full shrink-0 flex-col border-l border-b bg-sidebar text-sidebar-foreground overflow-hidden transition-[width] duration-200 ease-out"
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"
>
<div className="relative flex-1 min-h-0 overflow-hidden">
{effectiveTab === "sources" && documentsOpen && documentsPanel && (

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

@ -144,7 +144,7 @@ function MainContentPanel({
rightActions={<RightPanelExpandButton />}
className="min-w-0"
/>
<div className="relative flex flex-1 flex-col border border-l-0 border-r-0 border-t-0 bg-main-panel overflow-hidden 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">
<Header />
{isDocumentTab && activeTab.documentId && activeTab.searchSpaceId ? (
@ -247,7 +247,7 @@ export function LayoutShell({
return (
<SidebarProvider value={sidebarContextValue}>
<TooltipProvider delayDuration={0}>
<div className={cn("flex h-screen w-full flex-col bg-main-panel", className)}>
<div className={cn("flex h-screen w-full flex-col bg-panel", className)}>
<Header
mobileMenuTrigger={<MobileSidebarTrigger onClick={() => setMobileMenuOpen(true)} />}
/>
@ -369,9 +369,12 @@ export function LayoutShell({
<SidebarProvider value={sidebarContextValue}>
<TooltipProvider delayDuration={0}>
<div
className={cn("flex h-screen w-full gap-2 px-2 py-0 overflow-hidden bg-muted/40", className)}
className={cn(
"flex h-screen w-full gap-2 px-2 py-0 overflow-hidden bg-rail",
className
)}
>
<div className="hidden md:flex overflow-hidden border-r border-border/60 -mr-2 pr-2">
<div className="hidden md:flex overflow-hidden border-r -mr-2 pr-2 bg-rail">
<IconRail
searchSpaces={searchSpaces}
activeSearchSpaceId={activeSearchSpaceId}
@ -396,8 +399,8 @@ export function LayoutShell({
{/* Sidebar + slide-out panels share one container; overflow visible so panels can overlay main content. Negative right margin closes the flex gap so the sidebar sits flush against the main panel, separated only by a border. */}
<div
className={cn(
"relative hidden md:flex shrink-0 z-20 -mr-2 border-r border-border/60",
!isCollapsed && "bg-sidebar"
"relative hidden md:flex shrink-0 z-20 -mr-2 border-r",
!isCollapsed && "bg-panel"
)}
>
{!isCollapsed && (
@ -437,13 +440,18 @@ export function LayoutShell({
/>
)}
{/* Invisible drag hit-area straddling the right border — provides resize affordance without any visible UI */}
{/* Drag hit-area straddling the right border — wider for a forgiving grab,
z-50 + pointer-events-auto to beat any neighboring stacking context. */}
{!isCollapsed && (
<button
type="button"
aria-label="Resize sidebar"
onMouseDown={onResizeMouseDown}
className="absolute top-0 right-0 h-full w-2 translate-x-1/2 cursor-col-resize z-30 bg-transparent border-0 p-0 focus:outline-none"
className={cn(
"absolute top-0 right-0 h-full w-4 translate-x-1/2 cursor-col-resize z-50 pointer-events-auto select-none bg-transparent border-0 p-0 focus:outline-none",
"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"
)}
/>
)}

6
surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
View file

@ -116,7 +116,7 @@ export function Sidebar({
return (
<div
className={cn(
"relative flex h-full flex-col bg-sidebar text-sidebar-foreground overflow-hidden select-none",
"relative flex h-full flex-col bg-panel text-sidebar-foreground overflow-hidden select-none",
isCollapsed ? "w-[60px] transition-[width] duration-200" : "",
!isCollapsed && !isResizing ? "transition-[width] duration-200" : "",
className
@ -296,7 +296,7 @@ export function Sidebar({
)}
{/* Footer */}
<div className="mt-auto border-t border-border/60">
<div className="mt-auto border-t">
{/* Platform navigation */}
{footerNavItems.length > 0 && (
<NavSection
@ -346,7 +346,7 @@ function SidebarUsageFooter({
const containerClass = cn(
"px-3 py-3 space-y-3",
hasNavSectionAbove && "border-t border-border/60"
hasNavSectionAbove && "border-t"
);
if (isAnonymous) {

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

@ -26,7 +26,7 @@ export function SidebarCollapseButton({
variant="ghost"
size="icon"
onClick={onToggle}
className="h-8 w-8 shrink-0 text-muted-foreground hover:text-muted-foreground hover:bg-muted/40"
className="h-8 w-8 shrink-0 text-muted-foreground hover:text-muted-foreground hover:bg-accent"
>
<PanelLeft className="h-4 w-4" />
<span className="sr-only">{isCollapsed ? t("expand_sidebar") : t("collapse_sidebar")}</span>

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

@ -139,7 +139,7 @@ export function TabBar({
return (
<div
className={cn(
"mb-0 flex h-12 items-center shrink-0 px-1 gap-0.5 select-none border-b border-border/60",
"mb-0 flex h-12 items-center shrink-0 px-1 gap-0.5 select-none border-b bg-panel",
className
)}
>
@ -195,9 +195,9 @@ export function TabBar({
className={cn(
// Solid bg + soft left-fade so tabs scrolling underneath the
// + button get visually masked into the bar's background.
"sticky right-0 z-10 flex h-full shrink-0 items-center bg-main-panel pl-3 pr-1",
"sticky right-0 z-10 flex h-full shrink-0 items-center bg-panel pl-3 pr-1",
"before:content-[''] before:absolute before:inset-y-0 before:-left-4 before:w-4 before:pointer-events-none",
"before:bg-gradient-to-r before:from-transparent before:to-main-panel"
"before:bg-gradient-to-r before:from-transparent before:to-panel"
)}
>
<button