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

src/dev/FeedPreview.tsx

@@ -23,6 +23,7 @@ import {
 export function FeedPreview() {
   const [posts, setPosts] = useState<CardPost[]>(() => toCardPosts(FIXTURE_FEED_ITEMS));
   const [draft, setDraft] = useState("");
+  const [file, setFile] = useState<File | null>(null);
   const [query, setQuery] = useState("");
   const [category, setCategory] = useState<string | null>(null);
 
@@ -84,7 +85,20 @@ export function FeedPreview() {
           onToggleLike={toggleLike}
           feedUserId={FIXTURE_PERSON.feedUserId}
           onDelete={(post) => setPosts((cur) => cur.filter((p) => p.key !== post.key))}
-          composer={{ value: draft, busy: false, error: false, onChange: setDraft, onSubmit: () => setDraft("") }}
+          composer={{
+            value: draft,
+            busy: false,
+            error: false,
+            file,
+            onChange: setDraft,
+            onFile: setFile,
+            // No network here: "publishing" just clears the composer.
+            onSubmit: () => {
+              setDraft("");
+              setFile(null);
+            },
+            person: FIXTURE_PERSON,
+          }}
           now={FIXTURE_NOW}
         />
       }