From 2a6e10496aa77b7e9d6e08c75f59a71906ca0e2f Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Fri, 13 Feb 2026 14:19:53 +0800
Subject: [PATCH] feat(desktop): improve login page and add auth toasts

- Add tagline and animation to login page
- Add toast notification on login success
- Add toast notification on logout

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/desktop/src/renderer/src/pages/login.tsx | 29 ++++++++++---------
 apps/desktop/src/renderer/src/stores/auth.ts  |  3 ++
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/apps/desktop/src/renderer/src/pages/login.tsx b/apps/desktop/src/renderer/src/pages/login.tsx
index eafeb760..a1ac0b6a 100644
--- a/apps/desktop/src/renderer/src/pages/login.tsx
+++ b/apps/desktop/src/renderer/src/pages/login.tsx
@@ -30,24 +30,27 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="flex h-screen flex-col items-center justify-center bg-background p-8">
-      <div className="w-full max-w-xs space-y-6">
-        {/* Logo */}
-        <div className="flex items-center justify-center gap-2">
-          <MulticaIcon bordered noSpin size="md" />
-          <span className="text-base font-brand">Multica</span>
+    <div className="flex h-screen flex-col items-center justify-center bg-background p-8 animate-in fade-in duration-300">
+      <div className="w-full max-w-sm flex flex-col items-center text-center space-y-6">
+        {/* Brand */}
+        <div className="flex items-center gap-2.5">
+          <MulticaIcon animate className="size-5 text-muted-foreground/70" />
+          <h1 className="text-2xl tracking-wide font-brand">Multica</h1>
         </div>
 
+        {/* Tagline */}
+        <p className="text-sm text-muted-foreground leading-relaxed">
+          An AI assistant that gets things done — pulling data, running analysis,
+          and taking action. Talk to it like a team member.
+        </p>
+
         {/* Sign In */}
-        <div className="space-y-4 text-center">
-          <p className="text-base text-muted-foreground">Sign in to continue</p>
-          <Button onClick={startLogin} className="w-full" size="lg">
-            Sign In
-          </Button>
-        </div>
+        <Button onClick={startLogin} size="lg" className="px-8">
+          Sign In to Continue
+        </Button>
 
         {/* Helper */}
-        <p className="text-center text-xs text-muted-foreground/60">
+        <p className="text-xs text-muted-foreground/60">
           Opens browser for authentication
         </p>
       </div>
diff --git a/apps/desktop/src/renderer/src/stores/auth.ts b/apps/desktop/src/renderer/src/stores/auth.ts
index 5b0e4c69..2dd54121 100644
--- a/apps/desktop/src/renderer/src/stores/auth.ts
+++ b/apps/desktop/src/renderer/src/stores/auth.ts
@@ -3,6 +3,7 @@
  */
 
 import { create } from 'zustand'
+import { toast } from '@multica/ui/components/ui/sonner'
 import type { AuthUser } from '@multica/types'
 
 export type { AuthUser }
@@ -87,6 +88,7 @@ export const useAuthStore = create<AuthState>((set) => ({
         user: null,
         isAuthenticated: false,
       })
+      toast('Signed out')
       console.log('[AuthStore] Auth cleared')
     } catch (error) {
       console.error('[AuthStore] Failed to clear auth:', error)
@@ -113,6 +115,7 @@ export function setupAuthCallbackListener(): () => void {
         user: data.user,
         isAuthenticated: true,
       })
+      toast.success(`Welcome back, ${data.user.name}`)
     }
   })