From 19d29cbfc66714d37d177ac6974f86b6c55d41d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Fri, 6 Mar 2026 17:26:14 +0100
Subject: [PATCH] fix: replace flyout profile card with logout slider, i18n
 auth errors

- Replace static account card in mobile flyout with swipe-to-logout widget
- Remove redundant logout button from flyout bottom
- Make LogoutButton full-width via class prop and dynamic maxSlide
- Extract clean GraphQL error messages instead of raw JSON in all auth forms
- Add i18n keys for known backend errors (invalid credentials, email taken, invalid token)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/header/header.svelte   | 55 ++++---------------
 .../logout-button/logout-button.svelte        |  9 ++-
 packages/frontend/src/lib/i18n/locales/en.ts  |  3 +
 .../frontend/src/routes/login/+page.svelte    |  3 +-
 packages/frontend/src/routes/me/+page.svelte  |  4 +-
 .../frontend/src/routes/password/+page.svelte |  2 +-
 .../src/routes/password/reset/+page.svelte    |  4 +-
 .../frontend/src/routes/signup/+page.svelte   |  3 +-
 8 files changed, 29 insertions(+), 54 deletions(-)

diff --git a/packages/frontend/src/lib/components/header/header.svelte b/packages/frontend/src/lib/components/header/header.svelte
index 422455b..0c3e0ce 100644
--- a/packages/frontend/src/lib/components/header/header.svelte
+++ b/packages/frontend/src/lib/components/header/header.svelte
@@ -8,8 +8,6 @@
   import { getAssetUrl } from "$lib/api";
   import LogoutButton from "../logout-button/logout-button.svelte";
   import Separator from "../ui/separator/separator.svelte";
-  import { Avatar, AvatarFallback, AvatarImage } from "$lib/components/ui/avatar";
-  import { getUserInitials } from "$lib/utils";
   import BurgerMenuButton from "../burger-menu-button/burger-menu-button.svelte";
   import Logo from "../logo/logo.svelte";
 
@@ -180,34 +178,17 @@
   </div>
 
   <div class="flex-1 py-6 px-5 space-y-6">
-    <!-- User Profile Card -->
+    <!-- User logout slider -->
     {#if authStatus.authenticated}
-      <div
-        class="relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-br from-card to-card/50 p-4"
-      >
-        <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5"></div>
-        <div class="relative flex items-center gap-3">
-          <Avatar class="h-9 w-9 ring-2 ring-primary/30">
-            <AvatarImage
-              src={getAssetUrl(authStatus.user!.avatar, "mini")}
-              alt={authStatus.user!.artist_name}
-            />
-            <AvatarFallback
-              class="bg-gradient-to-br from-primary to-accent text-primary-foreground font-semibold"
-            >
-              {getUserInitials(authStatus.user!.artist_name)}
-            </AvatarFallback>
-          </Avatar>
-          <div class="flex flex-1 flex-col min-w-0">
-            <p class="text-sm font-semibold text-foreground truncate">
-              {authStatus.user!.artist_name || authStatus.user!.email.split("@")[0]}
-            </p>
-            <p class="text-xs text-muted-foreground truncate">
-              {authStatus.user!.email}
-            </p>
-          </div>
-        </div>
-      </div>
+      <LogoutButton
+        user={{
+          name: authStatus.user!.artist_name || authStatus.user!.email.split("@")[0] || "User",
+          avatar: getAssetUrl(authStatus.user!.avatar, "mini")!,
+          email: authStatus.user!.email,
+        }}
+        onLogout={handleLogout}
+        class="w-full"
+      />
     {/if}
 
     <!-- Navigation -->
@@ -340,21 +321,5 @@
       </div>
     </div>
 
-    {#if authStatus.authenticated}
-      <button
-        class="cursor-pointer flex w-full items-center gap-3 rounded-xl border border-destructive/20 bg-destructive/5 px-4 py-3 transition-all duration-200 hover:bg-destructive/10 hover:border-destructive/30 group"
-        onclick={handleLogout}
-      >
-        <div
-          class="flex h-8 w-8 items-center justify-center rounded-lg bg-destructive/10 group-hover:bg-destructive/20 transition-colors"
-        >
-          <span class="icon-[ri--logout-circle-r-line] h-4 w-4 text-destructive"></span>
-        </div>
-        <div class="flex flex-1 flex-col gap-0.5 text-left">
-          <span class="text-sm font-medium text-foreground">{$_("header.logout")}</span>
-          <span class="text-xs text-muted-foreground">{$_("header.logout_hint")}</span>
-        </div>
-      </button>
-    {/if}
   </div>
 </div>
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 bab1368..bbcafab 100644
--- a/packages/frontend/src/lib/components/logout-button/logout-button.svelte
+++ b/packages/frontend/src/lib/components/logout-button/logout-button.svelte
@@ -11,15 +11,17 @@
   interface Props {
     user: User;
     onLogout: () => void;
+    class?: string;
   }
 
-  let { user, onLogout }: Props = $props();
+  let { user, onLogout, class: className = "" }: Props = $props();
 
+  let container: HTMLDivElement;
   let isDragging = $state(false);
   let slidePosition = $state(0);
   let startX = 0;
   let currentX = 0;
-  let maxSlide = 117; // Maximum slide distance
+  let maxSlide = $derived(container ? container.offsetWidth - 40 : 117);
   let threshold = 0.75; // 70% threshold to trigger logout
 
   // Calculate slide progress (0 to 1)
@@ -102,9 +104,10 @@
 </script>
 
 <div
+  bind:this={container}
   class="relative h-10 w-40 rounded-full bg-muted/30 overflow-hidden select-none transition-all duration-300 bg-muted/40 shadow-lg shadow-accent/10 {isDragging
     ? 'cursor-grabbing'
-    : ''}"
+    : ''} {className}"
   style="background: linear-gradient(90deg, 
 		oklch(var(--primary) / 0.3) 0%, 
 		oklch(var(--primary) / 0.3) {(1 - slideProgress) * 100}%, 
diff --git a/packages/frontend/src/lib/i18n/locales/en.ts b/packages/frontend/src/lib/i18n/locales/en.ts
index 4ca21a8..c570838 100644
--- a/packages/frontend/src/lib/i18n/locales/en.ts
+++ b/packages/frontend/src/lib/i18n/locales/en.ts
@@ -168,6 +168,7 @@ export default {
       no_account: "Don't have an account?",
       sign_up_link: "Sign up now",
       error: "Heads Up!",
+      error_invalid_credentials: "Invalid email or password.",
     },
     signup: {
       title: "Create Account",
@@ -194,6 +195,7 @@ export default {
       have_account: "Already have an account?",
       sign_in_link: "Sign in here",
       error: "Heads Up!",
+      error_email_taken: "This email address is already registered.",
       agree_error: "You must confirm our terms of service and your age.",
       password_error: "The password has to match the confirmation password.",
       toast_register: "A verification email has been sent to {email}!",
@@ -221,6 +223,7 @@ export default {
       resetting: "Resetting...",
       reset: "Reset",
       error: "Heads Up!",
+      error_invalid_token: "This reset link is invalid or has expired.",
       password_error: "The password has to match the confirmation password.",
       toast_reset: "Your password has been reset!",
     },
diff --git a/packages/frontend/src/routes/login/+page.svelte b/packages/frontend/src/routes/login/+page.svelte
index 57ae856..475aa45 100644
--- a/packages/frontend/src/routes/login/+page.svelte
+++ b/packages/frontend/src/routes/login/+page.svelte
@@ -32,7 +32,8 @@
       await login(email, password);
       goto("/videos", { invalidateAll: true });
     } catch (err: any) {
-      error = err.message;
+      const raw = err.response?.errors?.[0]?.message ?? err.message;
+      error = raw === "Invalid credentials" ? $_("auth.login.error_invalid_credentials") : raw;
       isError = true;
     } finally {
       isLoading = false;
diff --git a/packages/frontend/src/routes/me/+page.svelte b/packages/frontend/src/routes/me/+page.svelte
index 4b30368..41f4fc0 100644
--- a/packages/frontend/src/routes/me/+page.svelte
+++ b/packages/frontend/src/routes/me/+page.svelte
@@ -87,7 +87,7 @@
       toast.success($_("me.settings.toast_update"));
       invalidateAll();
     } catch (err: any) {
-      profileError = err.message;
+      profileError = err.response?.errors?.[0]?.message ?? err.message;
       isProfileError = true;
     } finally {
       isProfileLoading = false;
@@ -111,7 +111,7 @@
       invalidateAll();
       password = confirmPassword = "";
     } catch (err: any) {
-      securityError = err.message;
+      securityError = err.response?.errors?.[0]?.message ?? err.message;
       isSecurityError = true;
     } finally {
       isSecurityLoading = false;
diff --git a/packages/frontend/src/routes/password/+page.svelte b/packages/frontend/src/routes/password/+page.svelte
index e5c68eb..54d56f4 100644
--- a/packages/frontend/src/routes/password/+page.svelte
+++ b/packages/frontend/src/routes/password/+page.svelte
@@ -31,7 +31,7 @@
       toast.success($_("auth.password_request.toast_request", { values: { email } }));
       goto("/login");
     } catch (err: any) {
-      error = err.message;
+      error = err.response?.errors?.[0]?.message ?? err.message;
       isError = true;
     } finally {
       isLoading = false;
diff --git a/packages/frontend/src/routes/password/reset/+page.svelte b/packages/frontend/src/routes/password/reset/+page.svelte
index 2becd51..9ae1830 100644
--- a/packages/frontend/src/routes/password/reset/+page.svelte
+++ b/packages/frontend/src/routes/password/reset/+page.svelte
@@ -40,7 +40,9 @@
       toast.success($_("auth.password_reset.toast_reset"));
       goto("/login");
     } catch (err: any) {
-      error = err.message;
+      const raw = err.response?.errors?.[0]?.message ?? err.message;
+      const tokenErrors = ["Invalid or expired reset token", "Reset token expired"];
+      error = tokenErrors.includes(raw) ? $_("auth.password_reset.error_invalid_token") : raw;
       isError = true;
     } finally {
       isLoading = false;
diff --git a/packages/frontend/src/routes/signup/+page.svelte b/packages/frontend/src/routes/signup/+page.svelte
index 7063c2f..636c418 100644
--- a/packages/frontend/src/routes/signup/+page.svelte
+++ b/packages/frontend/src/routes/signup/+page.svelte
@@ -48,7 +48,8 @@
       toast.success($_("auth.signup.toast_register", { values: { email } }));
       goto("/login");
     } catch (err: any) {
-      error = err.message;
+      const raw = err.response?.errors?.[0]?.message ?? err.message;
+      error = raw === "Email already registered" ? $_("auth.signup.error_email_taken") : raw;
       isError = true;
     } finally {
       isLoading = false;