3dom4wf7p: Publish public text posts from a feed composer

src/components/Composer.tsx

@@ -0,0 +1,36 @@
+import type { FormEvent } from "react";
+
+export interface ComposerProps {
+  value: string;
+  busy: boolean;
+  error: boolean;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+}
+
+export function Composer({ value, busy, error, onChange, onSubmit }: ComposerProps) {
+  const empty = value.trim().length === 0;
+  function submit(e: FormEvent) {
+    e.preventDefault();
+    if (!empty && !busy) onSubmit();
+  }
+  return (
+    <form className="composer" onSubmit={submit}>
+      <label htmlFor="composer-text" className="composer-label">New post</label>
+      <textarea
+        id="composer-text"
+        value={value}
+        rows={3}
+        placeholder="Share something with the feed"
+        disabled={busy}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      {error ? (
+        <p className="error" role="alert">Publishing the post failed. Your text is still here.</p>
+      ) : null}
+      <button type="submit" className="composer-post" disabled={empty || busy}>
+        {busy ? "Posting" : "Post"}
+      </button>
+    </form>
+  );
+}

src/components/Feed.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { fetchFeedPage, FeedLoadError } from "@/lib/feed-client";
 import { applyLikeOutcome, LikeError, sendLike } from "@/lib/like-client";
 import { mergePosts, toCardPosts, type CardPost } from "@/lib/feed-model";
+import { PostError, publishAndConfirm } from "@/lib/post-client";
 import { FeedView, type FeedStatus } from "./FeedView";
 
 const POLL_MS = 45_000;
@@ -17,6 +18,12 @@ export function Feed({ onSignedOut }: { onSignedOut: () => void }) {
   const [pending, setPending] = useState<CardPost[]>([]);
   const [likeBusy, setLikeBusy] = useState<ReadonlySet<string>>(new Set());
   const [likeErrors, setLikeErrors] = useState<ReadonlySet<string>>(new Set());
+  const [draft, setDraft] = useState("");
+  const [posting, setPosting] = useState(false);
+  const [postFailed, setPostFailed] = useState(false);
+  // Id of a post already created but not yet seen on the first page. A retry
+  // re-checks the feed instead of creating a duplicate.
+  const unconfirmed = useRef<{ id: string | null }>({ id: null });
   const sentinel = useRef<HTMLDivElement | null>(null);
   const busy = useRef(false);
   const shown = useRef<Set<string>>(new Set());
@@ -149,6 +156,31 @@ export function Feed({ onSignedOut }: { onSignedOut: () => void }) {
     [fail],
   );
 
+  const publish = useCallback(async () => {
+    const text = draft.trim();
+    if (!text || posting) return;
+    setPosting(true);
+    setPostFailed(false);
+    try {
+      const page = await publishAndConfirm(text, unconfirmed.current);
+      setPosts(mergePosts(toCardPosts(page.items)));
+      setNextCursor(page.nextCursor);
+      setPending([]);
+      setDraft("");
+    } catch (e) {
+      if (e instanceof PostError && e.signedOut) onSignedOut();
+      setPostFailed(true);
+    } finally {
+      setPosting(false);
+    }
+  }, [draft, posting, onSignedOut]);
+
+  function changeDraft(v: string) {
+    // New text is a new post; forget a stale unconfirmed id.
+    if (v !== draft) unconfirmed.current = { id: null };
+    setDraft(v);
+  }
+
   function showNew() {
     setPosts((cur) => mergePosts(cur, pending));
     setPending([]);
@@ -167,6 +199,7 @@ export function Feed({ onSignedOut }: { onSignedOut: () => void }) {
       onToggleLike={(p) => void toggleLike(p)}
       likeBusy={likeBusy}
       likeErrors={likeErrors}
+      composer={{ value: draft, busy: posting, error: postFailed, onChange: changeDraft, onSubmit: () => void publish() }}
       sentinelRef={sentinel}
     />
   );

src/components/FeedView.tsx

@@ -1,5 +1,6 @@
 import type { Ref } from "react";
 import type { CardPost } from "@/lib/feed-model";
+import { Composer, type ComposerProps } from "./Composer";
 import { PostCard } from "./PostCard";
 
 export type FeedStatus = "loading" | "ready" | "error";
@@ -15,6 +16,7 @@ export interface FeedViewProps {
   onToggleLike?: (post: CardPost) => void;
   likeBusy?: ReadonlySet<string>;
   likeErrors?: ReadonlySet<string>;
+  composer?: ComposerProps;
   sentinelRef?: Ref<HTMLDivElement>;
   now?: number;
 }
@@ -45,6 +47,7 @@ export function FeedView(p: FeedViewProps) {
   }
   return (
     <section className="feed">
+      {p.composer ? <Composer {...p.composer} /> : null}
       {p.newCount > 0 ? (
         <button type="button" className="new-posts" onClick={p.onShowNew}>
           {p.newCount === 1 ? "1 new post" : `${p.newCount} new posts`}