From 7c1914eab4c7be7c074daee628a12f245a9801cd Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Tue, 17 Feb 2026 03:25:36 -0600
Subject: [PATCH] Hide sign up button on mobile top bar when signed out; add
 "Join" label to FAB

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/components/FloatingComposeButton.tsx | 4 ++--
 src/components/MobileTopBar.tsx          | 7 ++-----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/FloatingComposeButton.tsx b/src/components/FloatingComposeButton.tsx
index 513ba37b..5af697ca 100644
--- a/src/components/FloatingComposeButton.tsx
+++ b/src/components/FloatingComposeButton.tsx
@@ -29,10 +29,10 @@ export function FloatingComposeButton() {
     <>
       <Button
         onClick={() => setSignupOpen(true)}
-        className="fixed bottom-20 right-4 z-30 sidebar:hidden size-14 rounded-full shadow-lg bg-primary hover:bg-primary/90 text-primary-foreground"
-        size="icon"
+        className="fixed bottom-20 right-4 z-30 sidebar:hidden h-14 px-5 rounded-full shadow-lg bg-primary hover:bg-primary/90 text-primary-foreground flex items-center gap-2"
       >
         <UserPlus className="size-6" />
+        <span className="text-base font-bold">Join</span>
       </Button>
       <SignupDialog isOpen={signupOpen} onClose={() => setSignupOpen(false)} />
     </>
diff --git a/src/components/MobileTopBar.tsx b/src/components/MobileTopBar.tsx
index 6bade6e1..e4238862 100644
--- a/src/components/MobileTopBar.tsx
+++ b/src/components/MobileTopBar.tsx
@@ -1,7 +1,6 @@
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { MewLogo } from '@/components/MewLogo';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
-import { LoginArea } from '@/components/auth/LoginArea';
 
 interface MobileTopBarProps {
   onAvatarClick: () => void;
@@ -12,9 +11,9 @@ export function MobileTopBar({ onAvatarClick }: MobileTopBarProps) {
 
   return (
     <header className="sticky top-0 z-20 flex items-center px-3 h-10 bg-background/80 backdrop-blur-md border-b border-border sidebar:hidden">
-      {/* Left: user avatar or login */}
+      {/* Left: user avatar (empty when signed out) */}
       <div className="flex items-center justify-center w-7 shrink-0">
-        {user ? (
+        {user && (
           <button onClick={onAvatarClick} className="rounded-full focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 focus:ring-offset-background">
             <Avatar className="size-7">
               <AvatarImage src={metadata?.picture} alt={metadata?.name} />
@@ -23,8 +22,6 @@ export function MobileTopBar({ onAvatarClick }: MobileTopBarProps) {
               </AvatarFallback>
             </Avatar>
           </button>
-        ) : (
-          <LoginArea className="scale-75 origin-left" />
         )}
       </div>