Keep mention suggestions beneath the sticky feed header and redesign the global composer with unclipped in-flow suggestions, posting identity, and a refined premium surface

Hop-State: A_06FPG91R98C050VWTAKGRKG
Hop-Proposal: R_06FPG915QD4SR4VFHHX53D0
Hop-Task: T_06FPG7TG5B2731WFT0VWGW8
Hop-Attempt: AT_06FPG7TG58Z084M8ZE6VEP0

src/components/GlobalPostComposer.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { Plus, X } from 'lucide-react';
+import { PenLine, Plus, X } from 'lucide-react';
 import { Compose } from '@/components/Compose';
+import { AvatarImage } from '@/components/AvatarImage';
 import { signedAPI } from '@/lib/api/signed-fetch';
 import { useAuth } from '@/lib/contexts/AuthContext';
 import { useToast } from '@/lib/contexts/ToastContext';
@@ -10,7 +11,8 @@ import { useToast } from '@/lib/contexts/ToastContext';
 export function GlobalPostComposer() {
     const { user, did, handle } = useAuth();
     const { showToast } = useToast();
-    const [open, setOpen] = useState(false);
+    const [openForUserId, setOpenForUserId] = useState<string | null>(null);
+    const open = Boolean(user && openForUserId === user.id);
 
     useEffect(() => {
         if (!open) return;
@@ -19,7 +21,7 @@ export function GlobalPostComposer() {
         document.body.style.overflow = 'hidden';
 
         const handleKeyDown = (event: KeyboardEvent) => {
-            if (event.key === 'Escape') setOpen(false);
+            if (event.key === 'Escape') setOpenForUserId(null);
         };
         window.addEventListener('keydown', handleKeyDown);
 
@@ -29,10 +31,6 @@ export function GlobalPostComposer() {
         };
     }, [open]);
 
-    useEffect(() => {
-        if (!user) setOpen(false);
-    }, [user]);
-
     if (!user) return null;
 
     const handlePost = async (
@@ -78,7 +76,7 @@ export function GlobalPostComposer() {
                 <button
                     type="button"
                     className="global-compose-fab"
-                    onClick={() => setOpen(true)}
+                    onClick={() => setOpenForUserId(user.id)}
                     aria-label="Create a post"
                     title="Create a post"
                 >
@@ -90,7 +88,7 @@ export function GlobalPostComposer() {
                 <div
                     className="global-compose-overlay"
                     onMouseDown={(event) => {
-                        if (event.target === event.currentTarget) setOpen(false);
+                        if (event.target === event.currentTarget) setOpenForUserId(null);
                     }}
                 >
                     <section
@@ -98,23 +96,48 @@ export function GlobalPostComposer() {
                         role="dialog"
                         aria-modal="true"
                         aria-labelledby="global-compose-title"
+                        aria-describedby="global-compose-description"
                     >
                         <header className="global-compose-header">
-                            <h2 id="global-compose-title">Create post</h2>
+                            <div className="global-compose-heading">
+                                <span className="global-compose-heading-icon" aria-hidden="true">
+                                    <PenLine size={18} strokeWidth={2} />
+                                </span>
+                                <div>
+                                    <h2 id="global-compose-title">New post</h2>
+                                    <p id="global-compose-description">Share something with your network</p>
+                                </div>
+                            </div>
                             <button
                                 type="button"
                                 className="global-compose-close"
-                                onClick={() => setOpen(false)}
+                                onClick={() => setOpenForUserId(null)}
                                 aria-label="Close post composer"
                             >
                                 <X size={22} />
                             </button>
                         </header>
+                        <div className="global-compose-identity">
+                            <span className="global-compose-avatar">
+                                <AvatarImage
+                                    avatarUrl={user.avatarUrl}
+                                    seed={user.handle}
+                                    isNsfw={user.isNsfw}
+                                    alt=""
+                                />
+                            </span>
+                            <div className="global-compose-identity-copy">
+                                <span>{user.displayName || user.handle}</span>
+                                <small>@{user.handle}</small>
+                            </div>
+                            <span className="global-compose-audience">Public</span>
+                        </div>
                         <Compose
                             autoFocus
+                            placeholder="What do you want to share?"
                             onPost={handlePost}
                             onPosted={() => {
-                                setOpen(false);
+                                setOpenForUserId(null);
                                 showToast('Post published.', 'success');
                             }}
                         />