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