apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-28 10:26:33 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

feat: shifted the theme selection to user profile sidebar

Browse source
This commit is contained in:
Anish Sarkar 2026-01-20 16:04:56 +05:30
parent 24049345a2
commit 459a354e0f
9 changed files with 108 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

20
surfsense_web/components/layout/ui/header/Header.tsx
View file

@ -1,21 +1,14 @@
"use client";
import { Moon, Sun } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { NotificationButton } from "@/components/notifications/NotificationButton";
interface HeaderProps {
breadcrumb?: React.ReactNode;
theme?: string;
onToggleTheme?: () => void;
mobileMenuTrigger?: React.ReactNode;
}
export function Header({
breadcrumb,
theme,
onToggleTheme,
mobileMenuTrigger,
}: HeaderProps) {
return (
@ -30,19 +23,6 @@ export function Header({
<div className="flex items-center gap-2">
{/* Notifications */}
<NotificationButton />
{/* Theme toggle */}
{onToggleTheme && (
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline" size="icon" onClick={onToggleTheme} className="h-8 w-8">
{theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
<span className="sr-only">Toggle theme</span>
</Button>
</TooltipTrigger>
<TooltipContent>{theme === "dark" ? "Light mode" : "Dark mode"}</TooltipContent>
</Tooltip>
)}
</div>
</header>
);

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

@ -36,7 +36,7 @@ interface LayoutShellProps {
pageUsage?: PageUsage;
breadcrumb?: React.ReactNode;
theme?: string;
onToggleTheme?: () => void;
setTheme?: (theme: "light" | "dark" | "system") => void;
defaultCollapsed?: boolean;
isChatPage?: boolean;
children: React.ReactNode;
@ -69,7 +69,7 @@ export function LayoutShell({
pageUsage,
breadcrumb,
theme,
onToggleTheme,
setTheme,
defaultCollapsed = false,
isChatPage = false,
children,
@ -86,8 +86,6 @@ export function LayoutShell({
<div className={cn("flex h-screen w-full flex-col bg-background", className)}>
<Header
breadcrumb={breadcrumb}
theme={theme}
onToggleTheme={onToggleTheme}
mobileMenuTrigger={<MobileSidebarTrigger onClick={() => setMobileMenuOpen(true)} />}
/>
@ -117,6 +115,8 @@ export function LayoutShell({
onUserSettings={onUserSettings}
onLogout={onLogout}
pageUsage={pageUsage}
theme={theme}
setTheme={setTheme}
/>
<main className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
@ -163,14 +163,14 @@ export function LayoutShell({
onUserSettings={onUserSettings}
onLogout={onLogout}
pageUsage={pageUsage}
theme={theme}
setTheme={setTheme}
className="hidden md:flex border-r shrink-0"
/>
<main className="flex-1 flex flex-col min-w-0">
<Header
breadcrumb={breadcrumb}
theme={theme}
onToggleTheme={onToggleTheme}
/>
<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>

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

@ -33,6 +33,8 @@ interface MobileSidebarProps {
onUserSettings?: () => void;
onLogout?: () => void;
pageUsage?: PageUsage;
theme?: string;
setTheme?: (theme: "light" | "dark" | "system") => void;
}
export function MobileSidebarTrigger({ onClick }: { onClick: () => void }) {
@ -70,6 +72,8 @@ export function MobileSidebar({
onUserSettings,
onLogout,
pageUsage,
theme,
setTheme,
}: MobileSidebarProps) {
const handleSearchSpaceSelect = (id: number) => {
onSearchSpaceSelect(id);
@ -145,6 +149,8 @@ export function MobileSidebar({
onUserSettings={onUserSettings}
onLogout={onLogout}
pageUsage={pageUsage}
theme={theme}
setTheme={setTheme}
className="w-full border-none"
/>
</div>

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

@ -35,6 +35,8 @@ interface SidebarProps {
onUserSettings?: () => void;
onLogout?: () => void;
pageUsage?: PageUsage;
theme?: string;
setTheme?: (theme: "light" | "dark" | "system") => void;
className?: string;
}
@ -58,6 +60,8 @@ export function Sidebar({
onUserSettings,
onLogout,
pageUsage,
theme,
setTheme,
className,
}: SidebarProps) {
const t = useTranslations("sidebar");
@ -241,6 +245,8 @@ export function Sidebar({
onUserSettings={onUserSettings}
onLogout={onLogout}
isCollapsed={isCollapsed}
theme={theme}
setTheme={setTheme}
/>
</div>
</div>

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

@ -1,6 +1,6 @@
"use client";
import { ChevronUp, Languages, LogOut, Settings } from "lucide-react";
import { Check, ChevronUp, Laptop, Languages, LogOut, Moon, Settings, Sun } from "lucide-react";
import { useTranslations } from "next-intl";
import {
DropdownMenu,
@ -25,11 +25,20 @@ const LANGUAGES = [
{ code: "zh" as const, name: "简体中文", flag: "🇨🇳" },
];
// Supported themes configuration
const THEMES = [
{ value: "light" as const, name: "Light", icon: Sun },
{ value: "dark" as const, name: "Dark", icon: Moon },
{ value: "system" as const, name: "System", icon: Laptop },
];
interface SidebarUserProfileProps {
user: User;
onUserSettings?: () => void;
onLogout?: () => void;
isCollapsed?: boolean;
theme?: string;
setTheme?: (theme: "light" | "dark" | "system") => void;
}
/**
@ -110,6 +119,8 @@ export function SidebarUserProfile({
onUserSettings,
onLogout,
isCollapsed = false,
theme,
setTheme,
}: SidebarUserProfileProps) {
const t = useTranslations("sidebar");
const { locale, setLocale } = useLocaleContext();
@ -121,6 +132,10 @@ export function SidebarUserProfile({
setLocale(newLocale);
};
const handleThemeChange = (newTheme: "light" | "dark" | "system") => {
setTheme?.(newTheme);
};
// Collapsed view - just show avatar with dropdown
if (isCollapsed) {
return (
@ -164,6 +179,38 @@ export function SidebarUserProfile({
{t("user_settings")}
</DropdownMenuItem>
{setTheme && (
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Sun className="mr-2 h-4 w-4" />
{t("theme")}
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent className="gap-1">
{THEMES.map((themeOption) => {
const Icon = themeOption.icon;
const isSelected = theme === themeOption.value;
return (
<DropdownMenuItem
key={themeOption.value}
onClick={() => handleThemeChange(themeOption.value)}
className={cn(
"mb-1 last:mb-0",
!isSelected && "focus:bg-transparent hover:bg-transparent",
isSelected && "bg-accent focus:!bg-accent hover:!bg-accent"
)}
>
<Icon className="mr-2 h-4 w-4" />
<span className="flex-1">{t(themeOption.value)}</span>
{isSelected && <Check className="ml-2 h-4 w-4" />}
</DropdownMenuItem>
);
})}
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
)}
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Languages className="mr-2 h-4 w-4" />
@ -249,6 +296,38 @@ export function SidebarUserProfile({
{t("user_settings")}
</DropdownMenuItem>
{setTheme && (
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Sun className="mr-2 h-4 w-4" />
{t("theme")}
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent className="gap-1">
{THEMES.map((themeOption) => {
const Icon = themeOption.icon;
const isSelected = theme === themeOption.value;
return (
<DropdownMenuItem
key={themeOption.value}
onClick={() => handleThemeChange(themeOption.value)}
className={cn(
"mb-1 last:mb-0",
!isSelected && "focus:bg-transparent hover:bg-transparent",
isSelected && "bg-accent focus:!bg-accent hover:!bg-accent"
)}
>
<Icon className="mr-2 h-4 w-4" />
<span className="flex-1">{t(themeOption.value)}</span>
{isSelected && <Check className="ml-2 h-4 w-4" />}
</DropdownMenuItem>
);
})}
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
)}
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Languages className="mr-2 h-4 w-4" />