apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-06 22:12:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: update sidebar and chat components with consistent dark mode styling, enhancing visual coherence and user experience

Browse source
This commit is contained in:
Anish Sarkar 2026-03-07 01:55:32 +05:30
parent c9d92ee5a0
commit 454d94bec7
5 changed files with 26 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -51,7 +51,7 @@ export function SidebarHeader({
<ChevronsUpDown className="h-4 w-4 shrink-0 text-muted-foreground" /> <ChevronsUpDown className="h-4 w-4 shrink-0 text-muted-foreground" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-48"> <DropdownMenuContent align="start" className="w-48 bg-muted dark:border dark:border-neutral-700">
<DropdownMenuItem onClick={onManageMembers}> <DropdownMenuItem onClick={onManageMembers}>
<UserPen className="h-4 w-4" /> <UserPen className="h-4 w-4" />
{t("manage_members")} {t("manage_members")}

12
surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
View file

@ -177,7 +177,7 @@ export function SidebarUserProfile({
<TooltipContent side="right">{displayName}</TooltipContent> <TooltipContent side="right">{displayName}</TooltipContent>
</Tooltip> </Tooltip>
<DropdownMenuContent className="w-48" side="right" align="center" sideOffset={8}> <DropdownMenuContent className="w-48 bg-muted dark:border dark:border-neutral-700" side="right" align="center" sideOffset={8}>
<DropdownMenuLabel className="font-normal"> <DropdownMenuLabel className="font-normal">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} /> <UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
@ -202,7 +202,7 @@ export function SidebarUserProfile({
{t("theme")} {t("theme")}
</DropdownMenuSubTrigger> </DropdownMenuSubTrigger>
<DropdownMenuPortal> <DropdownMenuPortal>
<DropdownMenuSubContent className="gap-1"> <DropdownMenuSubContent className="gap-1 bg-muted dark:border dark:border-neutral-700">
{THEMES.map((themeOption) => { {THEMES.map((themeOption) => {
const Icon = themeOption.icon; const Icon = themeOption.icon;
const isSelected = theme === themeOption.value; const isSelected = theme === themeOption.value;
@ -233,7 +233,7 @@ export function SidebarUserProfile({
{t("language")} {t("language")}
</DropdownMenuSubTrigger> </DropdownMenuSubTrigger>
<DropdownMenuPortal> <DropdownMenuPortal>
<DropdownMenuSubContent className="gap-1"> <DropdownMenuSubContent className="gap-1 bg-muted dark:border dark:border-neutral-700">
{LANGUAGES.map((language) => { {LANGUAGES.map((language) => {
const isSelected = locale === language.code; const isSelected = locale === language.code;
return ( return (
@ -299,7 +299,7 @@ export function SidebarUserProfile({
</button> </button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="w-48" side="top" align="center" sideOffset={4}> <DropdownMenuContent className="w-48 bg-muted dark:border dark:border-neutral-700" side="top" align="center" sideOffset={4}>
<DropdownMenuLabel className="font-normal"> <DropdownMenuLabel className="font-normal">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} /> <UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
@ -324,7 +324,7 @@ export function SidebarUserProfile({
{t("theme")} {t("theme")}
</DropdownMenuSubTrigger> </DropdownMenuSubTrigger>
<DropdownMenuPortal> <DropdownMenuPortal>
<DropdownMenuSubContent className="gap-1"> <DropdownMenuSubContent className="gap-1 bg-muted dark:border dark:border-neutral-700">
{THEMES.map((themeOption) => { {THEMES.map((themeOption) => {
const Icon = themeOption.icon; const Icon = themeOption.icon;
const isSelected = theme === themeOption.value; const isSelected = theme === themeOption.value;
@ -355,7 +355,7 @@ export function SidebarUserProfile({
{t("language")} {t("language")}
</DropdownMenuSubTrigger> </DropdownMenuSubTrigger>
<DropdownMenuPortal> <DropdownMenuPortal>
<DropdownMenuSubContent className="gap-1"> <DropdownMenuSubContent className="gap-1 bg-muted dark:border dark:border-neutral-700">
{LANGUAGES.map((language) => { {LANGUAGES.map((language) => {
const isSelected = locale === language.code; const isSelected = locale === language.code;
return ( return (

2
surfsense_web/components/new-chat/chat-share-button.tsx
View file

@ -177,7 +177,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
</Tooltip> </Tooltip>
<PopoverContent <PopoverContent
className="w-[280px] md:w-[320px] p-0 rounded-lg shadow-lg border-border/60 dark:bg-muted dark:border dark:border-neutral-700 select-none" className="w-[280px] md:w-[320px] p-0 rounded-lg shadow-lg border-border/60 dark:bg-neutral-900 dark:border dark:border-white/5 select-none"
align="end" align="end"
sideOffset={8} sideOffset={8}
onCloseAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()}

32
surfsense_web/components/new-chat/model-selector.tsx
View file

@ -291,7 +291,7 @@ export function ModelSelector({
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
className="w-[280px] md:w-[360px] p-0 rounded-lg shadow-lg border-border/60 dark:bg-muted dark:border dark:border-neutral-700 select-none" className="w-[280px] md:w-[360px] p-0 rounded-lg shadow-lg border-border/60 dark:bg-neutral-900 dark:border dark:border-white/5 select-none"
align="start" align="start"
sideOffset={8} sideOffset={8}
> >
@ -300,7 +300,7 @@ export function ModelSelector({
onValueChange={(v) => setActiveTab(v as "llm" | "image")} onValueChange={(v) => setActiveTab(v as "llm" | "image")}
className="w-full" className="w-full"
> >
<div className="border-b border-border/80 dark:border-white/5"> <div className="border-b border-border/80 dark:border-neutral-800">
<TabsList className="w-full grid grid-cols-2 rounded-none rounded-t-lg bg-transparent h-11 p-0 gap-0"> <TabsList className="w-full grid grid-cols-2 rounded-none rounded-t-lg bg-transparent h-11 p-0 gap-0">
<TabsTrigger <TabsTrigger
value="llm" value="llm"
@ -323,7 +323,7 @@ export function ModelSelector({
<TabsContent value="llm" className="mt-0"> <TabsContent value="llm" className="mt-0">
<Command <Command
shouldFilter={false} shouldFilter={false}
className="rounded-none rounded-b-lg relative dark:bg-muted [&_[data-slot=command-input-wrapper]]:border-0 [&_[data-slot=command-input-wrapper]]:px-0 [&_[data-slot=command-input-wrapper]]:gap-2" className="rounded-none rounded-b-lg relative dark:bg-neutral-900 [&_[data-slot=command-input-wrapper]]:border-0 [&_[data-slot=command-input-wrapper]]:px-0 [&_[data-slot=command-input-wrapper]]:gap-2"
> >
{totalLLMModels > 3 && ( {totalLLMModels > 3 && (
<div className="px-2 md:px-3 py-1.5 md:py-2"> <div className="px-2 md:px-3 py-1.5 md:py-2">
@ -368,8 +368,8 @@ export function ModelSelector({
onSelect={() => handleSelectLLM(config)} onSelect={() => handleSelectLLM(config)}
className={cn( className={cn(
"mx-2 rounded-lg mb-1 cursor-pointer group transition-all", "mx-2 rounded-lg mb-1 cursor-pointer group transition-all",
"hover:bg-accent/50 dark:hover:bg-white/10", "hover:bg-accent/50 dark:hover:bg-white/[0.06]",
isSelected && "bg-accent/80 dark:bg-white/10", isSelected && "bg-accent/80 dark:bg-white/[0.06]",
isAutoMode && "" isAutoMode && ""
)} )}
> >
@ -444,8 +444,8 @@ export function ModelSelector({
onSelect={() => handleSelectLLM(config)} onSelect={() => handleSelectLLM(config)}
className={cn( className={cn(
"mx-2 rounded-lg mb-1 cursor-pointer group transition-all", "mx-2 rounded-lg mb-1 cursor-pointer group transition-all",
"hover:bg-accent/50 dark:hover:bg-white/10", "hover:bg-accent/50 dark:hover:bg-white/[0.06]",
isSelected && "bg-accent/80 dark:bg-white/10" isSelected && "bg-accent/80 dark:bg-white/[0.06]"
)} )}
> >
<div className="flex items-center justify-between w-full gap-2"> <div className="flex items-center justify-between w-full gap-2">
@ -489,11 +489,11 @@ export function ModelSelector({
)} )}
{/* Add New LLM Config */} {/* Add New LLM Config */}
<div className="p-2 bg-muted/20 dark:bg-muted"> <div className="p-2 bg-muted/20 dark:bg-neutral-900">
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="w-full justify-start gap-2 h-9 rounded-lg hover:bg-accent/50 dark:hover:bg-white/10" className="w-full justify-start gap-2 h-9 rounded-lg hover:bg-accent/50 dark:hover:bg-white/[0.06]"
onClick={() => { onClick={() => {
setOpen(false); setOpen(false);
onAddNewLLM(); onAddNewLLM();
@ -511,7 +511,7 @@ export function ModelSelector({
<TabsContent value="image" className="mt-0"> <TabsContent value="image" className="mt-0">
<Command <Command
shouldFilter={false} shouldFilter={false}
className="rounded-none rounded-b-lg dark:bg-muted [&_[data-slot=command-input-wrapper]]:border-0 [&_[data-slot=command-input-wrapper]]:px-0 [&_[data-slot=command-input-wrapper]]:gap-2" className="rounded-none rounded-b-lg dark:bg-neutral-900 [&_[data-slot=command-input-wrapper]]:border-0 [&_[data-slot=command-input-wrapper]]:px-0 [&_[data-slot=command-input-wrapper]]:gap-2"
> >
{totalImageModels > 3 && ( {totalImageModels > 3 && (
<div className="px-2 md:px-3 py-1.5 md:py-2"> <div className="px-2 md:px-3 py-1.5 md:py-2">
@ -553,8 +553,8 @@ export function ModelSelector({
value={`img-g-${config.id}`} value={`img-g-${config.id}`}
onSelect={() => handleSelectImage(config.id)} onSelect={() => handleSelectImage(config.id)}
className={cn( className={cn(
"mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50 dark:hover:bg-white/10", "mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50 dark:hover:bg-white/[0.06]",
isSelected && "bg-accent/80 dark:bg-white/10", isSelected && "bg-accent/80 dark:bg-white/[0.06]",
isAuto && "" isAuto && ""
)} )}
> >
@ -618,8 +618,8 @@ export function ModelSelector({
value={`img-u-${config.id}`} value={`img-u-${config.id}`}
onSelect={() => handleSelectImage(config.id)} onSelect={() => handleSelectImage(config.id)}
className={cn( className={cn(
"mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50 dark:hover:bg-white/10", "mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50 dark:hover:bg-white/[0.06]",
isSelected && "bg-accent/80 dark:bg-white/10" isSelected && "bg-accent/80 dark:bg-white/[0.06]"
)} )}
> >
<div className="flex items-center gap-3 min-w-0 flex-1"> <div className="flex items-center gap-3 min-w-0 flex-1">
@ -659,11 +659,11 @@ export function ModelSelector({
{/* Add New Image Config */} {/* Add New Image Config */}
{onAddNewImage && ( {onAddNewImage && (
<div className="p-2 bg-muted/20 dark:bg-muted"> <div className="p-2 bg-muted/20 dark:bg-neutral-900">
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="w-full justify-start gap-2 h-9 rounded-lg hover:bg-accent/50 dark:hover:bg-white/10" className="w-full justify-start gap-2 h-9 rounded-lg hover:bg-accent/50 dark:hover:bg-white/[0.06]"
onClick={() => { onClick={() => {
setOpen(false); setOpen(false);
onAddNewImage(); onAddNewImage();

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

@ -334,7 +334,7 @@ function ReportPanelContent({
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
align="start" align="start"
className={`min-w-[180px] bg-muted dark:border dark:border-neutral-700${insideDrawer ? " z-[100]" : ""}`} className={`min-w-[180px] dark:bg-neutral-900 dark:border dark:border-white/5${insideDrawer ? " z-[100]" : ""}`}
> >
<DropdownMenuItem onClick={() => handleExport("md")}> <DropdownMenuItem onClick={() => handleExport("md")}>
Download Markdown Download Markdown
@ -371,7 +371,7 @@ function ReportPanelContent({
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
align="start" align="start"
className={`min-w-[120px] bg-muted dark:border dark:border-neutral-700${insideDrawer ? " z-[100]" : ""}`} className={`min-w-[120px] dark:bg-neutral-900 dark:border dark:border-white/5${insideDrawer ? " z-[100]" : ""}`}
> >
{versions.map((v, i) => ( {versions.map((v, i) => (
<DropdownMenuItem <DropdownMenuItem