@@ -8,12 +8,14 @@ import {
8
8
ChevronRightIcon ,
9
9
FileCode2Icon ,
10
10
LogOutIcon ,
11
- PaletteIcon ,
11
+ MoonIcon ,
12
12
PlusIcon ,
13
+ SunIcon ,
13
14
} from "lucide-react" ;
14
15
import { useTheme } from "next-themes" ;
15
16
import Link from "next/link" ;
16
17
import { toast } from "sonner" ;
18
+ import { useIsClientMounted } from "../../../../components/ClientOnly/ClientOnly" ;
17
19
import { doNebulaLogout } from "../../login/auth-actions" ;
18
20
import type { TruncatedSessionInfo } from "../api/types" ;
19
21
import { useNewChatPageLink } from "../hooks/useNewChatPageLink" ;
@@ -30,7 +32,6 @@ export function ChatSidebar(props: {
30
32
const sessions = useSessionsWithLocalOverrides ( props . sessions ) ;
31
33
const sessionsToShow = sessions . slice ( 0 , 10 ) ;
32
34
const newChatPage = useNewChatPageLink ( ) ;
33
- const { theme, setTheme } = useTheme ( ) ;
34
35
const router = useDashboardRouter ( ) ;
35
36
const logoutMutation = useMutation ( {
36
37
mutationFn : doNebulaLogout ,
@@ -39,9 +40,9 @@ export function ChatSidebar(props: {
39
40
return (
40
41
< div className = "flex h-full flex-col" >
41
42
< div className = "flex items-center justify-start gap-3 p-4 lg:justify-between" >
42
- < Link href = "/" className = "flex items-center gap-2 " >
43
+ < Link href = "/" className = "flex items-center gap-1 " >
43
44
< NebulaIcon className = "size-6 text-foreground" aria-label = "Nebula" />
44
- < span className = "font-semibold text-lg tracking-tight " > Nebula</ span >
45
+ < span className = "font-medium text-lg" > Nebula</ span >
45
46
</ Link >
46
47
47
48
< Badge variant = "secondary" className = "gap-1 py-1" >
@@ -54,8 +55,8 @@ export function ChatSidebar(props: {
54
55
< div className = "flex flex-col gap-2 px-4" >
55
56
< Button
56
57
asChild
57
- variant = "outline "
58
- className = "w-full gap-2 rounded-lg bg-muted/50 "
58
+ variant = "pink "
59
+ className = "w-full gap-2 rounded-lg border-nebula-pink-foreground "
59
60
>
60
61
< Link href = { newChatPage } >
61
62
< PlusIcon className = "size-4" />
@@ -104,13 +105,7 @@ export function ChatSidebar(props: {
104
105
target = "_blank"
105
106
/>
106
107
107
- < SidebarIconButton
108
- onClick = { ( ) => {
109
- setTheme ( theme === "light" ? "dark" : "light" ) ;
110
- } }
111
- icon = { PaletteIcon }
112
- label = "Theme"
113
- />
108
+ < ToggleThemeButton />
114
109
115
110
< SidebarIconButton
116
111
onClick = { async ( ) => {
@@ -133,6 +128,23 @@ export function ChatSidebar(props: {
133
128
) ;
134
129
}
135
130
131
+ function ToggleThemeButton ( ) {
132
+ const { theme, setTheme } = useTheme ( ) ;
133
+ const isClientMounted = useIsClientMounted ( ) ;
134
+
135
+ return (
136
+ < SidebarIconButton
137
+ onClick = { ( ) => {
138
+ setTheme ( theme === "light" ? "dark" : "light" ) ;
139
+ } }
140
+ icon = {
141
+ isClientMounted ? ( theme === "light" ? SunIcon : MoonIcon ) : Spinner
142
+ }
143
+ label = "Theme"
144
+ />
145
+ ) ;
146
+ }
147
+
136
148
function SidebarIconLink ( props : {
137
149
icon : React . FC < { className ?: string } > ;
138
150
label : string ;
0 commit comments