From 6232cc58f0bbdbe9161aee984e15eecd3b6f0f01 Mon Sep 17 00:00:00 2001
From: Valknar XXX <sexy@pivoine.art>
Date: Tue, 28 Oct 2025 11:21:42 +0100
Subject: [PATCH] fix: add null safety to logout button component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added null checks for user.name property to prevent SSR errors when
the property is undefined. Made name and avatar properties optional
in the User interface and added fallbacks to use email when name is
not available.

Fixes TypeError: Cannot read properties of undefined (reading 'split')
that was occurring during server-side rendering.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../lib/components/logout-button/logout-button.svelte  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/lib/components/logout-button/logout-button.svelte b/packages/frontend/src/lib/components/logout-button/logout-button.svelte
index 97ed1fb..6db2e15 100644
--- a/packages/frontend/src/lib/components/logout-button/logout-button.svelte
+++ b/packages/frontend/src/lib/components/logout-button/logout-button.svelte
@@ -3,9 +3,9 @@ import { Avatar, AvatarFallback, AvatarImage } from "$lib/components/ui/avatar";
 import { getUserInitials } from "$lib/utils";
 
 interface User {
-	name: string;
+	name?: string;
 	email: string;
-	avatar: string;
+	avatar?: string;
 }
 
 interface Props {
@@ -124,13 +124,13 @@ $effect(() => {
 	<!-- Sliding user info -->
 	<button class="cursor-grab absolute left-0 top-0 h-full flex items-center gap-3 px-2 transition-all duration-200 ease-out rounded-full bg-background/80 backdrop-blur-sm border border-border/50 bg-background/90 border-primary/20 {isDragging ? '' : 'transition-all duration-300 ease-out'}" style="transform: translateX({slidePosition}px); width: calc(100% - {slidePosition}px);" onmousedown={handleMouseDown} ontouchstart={handleTouchStart}>
         <Avatar class="h-7 w-7 ring-2 ring-accent/20 transition-all duration-200 {isNearThreshold ? 'ring-destructive/40' : ''}" style="opacity: {Math.max(0.1, 1 - slideProgress * 1.8)}">
-			<AvatarImage src={user.avatar} alt={user.name} />
+			<AvatarImage src={user.avatar} alt={user.name || user.email} />
 			<AvatarFallback class="bg-gradient-to-br from-primary to-accent text-primary-foreground text-xs font-semibold transition-all duration-200 {isNearThreshold ? 'from-destructive to-destructive/80' : ''}">
-				{getUserInitials(user.name)}
+				{getUserInitials(user.name || user.email)}
 			</AvatarFallback>
 		</Avatar>
 		<div class="text-left flex flex-col min-w-0 flex-1">
-			<span class="text-sm font-medium text-foreground leading-none truncate transition-all duration-200 {isNearThreshold ? 'text-destructive' : ''}" style="opacity: {Math.max(0.15, 1 - slideProgress * 1.5)}">{user.name ? user.name.split(" ")[0] : "User"}</span>
+			<span class="text-sm font-medium text-foreground leading-none truncate transition-all duration-200 {isNearThreshold ? 'text-destructive' : ''}" style="opacity: {Math.max(0.15, 1 - slideProgress * 1.5)}">{user?.name ? user.name.split(" ")[0] : "User"}</span>
 			<span class="text-xs text-muted-foreground leading-none transition-all duration-200 {isNearThreshold ? 'text-destructive/70' : ''}" style="opacity: {Math.max(0.1, 1 - slideProgress * 1.8)}">
 				{slideProgress > 0.3 ? "Logout" : "Online"}
 			</span>