Unified · Split
| @@ -16,11 +16,11 @@ import { · 15 unmodified lines | ||
| 16 | 16 | } from "lucide-react"; |
| 17 | 17 | import { Button } from "@/components/ui/button"; |
| 18 | 18 | import { Sheet, SheetContent, SheetTrigger, SheetTitle } from "@/components/ui/sheet"; |
| 19 | −import { Separator } from "@/components/ui/separator"; | |
| 20 | 19 | import { |
| 21 | 20 | DropdownMenu, |
| 22 | 21 | DropdownMenuContent, |
| 23 | 22 | DropdownMenuItem, |
| 23 | + DropdownMenuLabel, | |
| 24 | 24 | DropdownMenuSeparator, |
| 25 | 25 | DropdownMenuTrigger, |
| 26 | 26 | } from "@/components/ui/dropdown-menu"; |
| @@ -255,57 +255,68 @@ function SessionInfo() { · 228 unmodified lines | ||
| 255 | 255 | |
| 256 | 256 | if (loading) { |
| 257 | 257 | return ( |
| 258 | − <div className="px-3 space-y-3"> | |
| 259 | − <Separator /> | |
| 258 | + <div className="border-t border-border px-3 py-2"> | |
| 260 | 259 | <span className="text-[11px] font-mono text-muted-foreground">Loading session...</span> |
| 261 | 260 | </div> |
| 262 | 261 | ); |
| 263 | 262 | } |
| 264 | 263 | |
| 265 | 264 | return ( |
| 266 | − <div className="px-3 space-y-3"> | |
| 267 | − <Separator /> | |
| 268 | − <div className="space-y-2 rounded-md border border-border/70 bg-card/30 p-2.5"> | |
| 265 | + <div className="border-t border-border"> | |
| 269 | 266 | {isSignedInToWorkos ? ( |
| 270 | − <div className="flex items-center gap-2 rounded-md bg-background/60 px-2 py-1.5"> | |
| 271 | − {avatarUrl ? ( | |
| 272 | − <img | |
| 273 | − src={avatarUrl} | |
| 274 | − alt={avatarLabel} | |
| 275 | − className="h-6 w-6 rounded-full border border-border object-cover" | |
| 276 | − /> | |
| 277 | − ) : ( | |
| 278 | − <div className="h-6 w-6 rounded-full border border-border bg-muted text-[10px] font-mono text-muted-foreground flex items-center justify-center"> | |
| 279 | − {avatarInitial} | |
| 280 | − </div> | |
| 281 | − )} | |
| 282 | − <div className="min-w-0"> | |
| 283 | − <p className="text-[11px] font-medium truncate">{avatarLabel}</p> | |
| 284 | − {workosProfile?.email ? ( | |
| 285 | − <p className="text-[10px] text-muted-foreground truncate">{workosProfile.email}</p> | |
| 286 | − ) : null} | |
| 287 | − </div> | |
| 288 | − </div> | |
| 267 | + <DropdownMenu> | |
| 268 | + <DropdownMenuTrigger asChild> | |
| 269 | + <Button | |
| 270 | + variant="ghost" | |
| 271 | + className="h-14 w-full justify-between rounded-none border-0 bg-transparent px-3 py-0 text-left shadow-none hover:bg-accent/40" | |
| 272 | + > | |
| 273 | + <span className="flex items-center gap-2 min-w-0"> | |
| 274 | + {avatarUrl ? ( | |
| 275 | + <img | |
| 276 | + src={avatarUrl} | |
| 277 | + alt={avatarLabel} | |
| 278 | + className="h-6 w-6 rounded-full border border-border object-cover" | |
| 279 | + /> | |
| 280 | + ) : ( | |
| 281 | + <span className="h-6 w-6 rounded-full border border-border bg-muted text-[10px] font-mono text-muted-foreground flex items-center justify-center"> | |
| 282 | + {avatarInitial} | |
| 283 | + </span> | |
| 284 | + )} | |
| 285 | + <span className="min-w-0"> | |
| 286 | + <span className="text-[11px] font-medium truncate block">{avatarLabel}</span> | |
| 287 | + {workosProfile?.email ? ( | |
| 288 | + <span className="text-[10px] text-muted-foreground truncate block">{workosProfile.email}</span> | |
| 289 | + ) : null} | |
| 290 | + </span> | |
| 291 | + </span> | |
| 292 | + <ChevronsUpDown className="h-3.5 w-3.5 text-muted-foreground" /> | |
| 293 | + </Button> | |
| 294 | + </DropdownMenuTrigger> | |
| 295 | + <DropdownMenuContent align="end" className="w-64"> | |
| 296 | + <DropdownMenuLabel className="text-xs"> | |
| 297 | + Account | |
| 298 | + </DropdownMenuLabel> | |
| 299 | + <DropdownMenuSeparator /> | |
| 300 | + <DropdownMenuItem asChild className="text-xs"> | |
| 301 | + <Link href="/sign-out">Sign out</Link> | |
| 302 | + </DropdownMenuItem> | |
| 303 | + </DropdownMenuContent> | |
| 304 | + </DropdownMenu> | |
| 289 | 305 | ) : ( |
| 290 | − <p className="text-[11px] text-muted-foreground px-1">Guest mode</p> | |
| 306 | + <div className="px-3 py-2"> | |
| 307 | + <p className="text-[11px] text-muted-foreground">Guest mode</p> | |
| 308 | + </div> | |
| 291 | 309 | )} |
| 292 | 310 | |
| 293 | 311 | {!isSignedInToWorkos && workosEnabled ? ( |
| 294 | − <Link href="/sign-in" className="inline-flex"> | |
| 295 | − <Button variant="outline" size="sm" className="h-7 text-[11px]"> | |
| 296 | − Sign in | |
| 297 | − </Button> | |
| 298 | − </Link> | |
| 299 | − ) : null} | |
| 300 | − | |
| 301 | − {isSignedInToWorkos ? ( | |
| 302 | − <Link href="/sign-out" className="inline-flex"> | |
| 303 | − <Button variant="ghost" size="sm" className="h-7 text-[11px] text-muted-foreground hover:text-foreground"> | |
| 304 | − Sign out | |
| 305 | − </Button> | |
| 306 | − </Link> | |
| 312 | + <div className="px-3 pb-3"> | |
| 313 | + <Link href="/sign-in" className="inline-flex"> | |
| 314 | + <Button variant="outline" size="sm" className="h-7 text-[11px]"> | |
| 315 | + Sign in | |
| 316 | + </Button> | |
| 317 | + </Link> | |
| 318 | + </div> | |
| 307 | 319 | ) : null} |
| 308 | − </div> | |
| 309 | 320 | </div> |
| 310 | 321 | ); |
| 311 | 322 | } |