icknpcyaf: Redesign the composer with toolbar, emoji popover, attachment row and flip Post

src/components/Feed.tsx

@@ -6,11 +6,21 @@ import { applyLikeOutcome, LikeError, sendLike } from "@/lib/like-client";
 import { mergePosts, toCardPosts, upgradeVideos, type CardPost } from "@/lib/feed-model";
 import { PostError, publishAndConfirm } from "@/lib/post-client";
 import { DeleteError, sendDelete } from "@/lib/delete-client";
+import type { ComposerProps } from "./Composer";
 import { FeedView, type FeedStatus } from "./FeedView";
 
 const POLL_MS = 45_000;
 
-export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; feedUserId?: string | null }) {
+export function Feed({
+  onSignedOut,
+  feedUserId,
+  person,
+}: {
+  onSignedOut: () => void;
+  feedUserId?: string | null;
+  /** The signed-in person, shown beside the composer. */
+  person?: ComposerProps["person"];
+}) {
   const [posts, setPosts] = useState<CardPost[]>([]);
   const [status, setStatus] = useState<FeedStatus>("loading");
   const [nextCursor, setNextCursor] = useState<string | null>(null);
@@ -246,7 +256,7 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
       deleteBusy={deleteBusy}
       deleteErrors={deleteErrors}
       onSignedOut={onSignedOut}
-      composer={{ value: draft, busy: posting, error: postFailed, file, onChange: changeDraft, onFile: changeFile, onSubmit: () => void publish() }}
+      composer={{ value: draft, busy: posting, error: postFailed, file, onChange: changeDraft, onFile: changeFile, onSubmit: () => void publish(), person }}
       sentinelRef={sentinel}
       listRef={list}
     />