le8i2digy: Add a refresh button to the Home feed header and singularize one comment

src/components/Feed.tsx

@@ -25,6 +25,7 @@ export function Feed({
   const [status, setStatus] = useState<FeedStatus>("loading");
   const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [loadingMore, setLoadingMore] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
   const [loadMoreFailed, setLoadMoreFailed] = useState(false);
   const [pending, setPending] = useState<CardPost[]>([]);
   const [likeBusy, setLikeBusy] = useState<ReadonlySet<string>>(new Set());
@@ -54,10 +55,12 @@ export function Feed({
     [onSignedOut],
   );
 
-  const loadFirst = useCallback(async () => {
+  // quiet: a refresh keeps the list on screen instead of swapping in the spinner.
+  const loadFirst = useCallback(async (quiet = false) => {
     if (busy.current) return;
     busy.current = true;
-    setStatus("loading");
+    if (quiet) setRefreshing(true);
+    else setStatus("loading");
     setLoadMoreFailed(false);
     try {
       const page = await fetchFeedPage(null);
@@ -70,6 +73,7 @@ export function Feed({
       setStatus("error");
     } finally {
       busy.current = false;
+      setRefreshing(false);
     }
   }, [fail]);
 
@@ -240,6 +244,13 @@ export function Feed({
     list.current?.scrollTo({ top: 0, behavior: calm ? "auto" : "smooth" });
   }
 
+  function refresh() {
+    if (busy.current) return;
+    const calm = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    list.current?.scrollTo({ top: 0, behavior: calm ? "auto" : "smooth" });
+    void loadFirst(true);
+  }
+
   return (
     <FeedView
       posts={posts}
@@ -249,6 +260,8 @@ export function Feed({
       newCount={pending.length}
       onRetry={() => (status === "error" ? void loadFirst() : void loadMore())}
       onShowNew={showNew}
+      onRefresh={refresh}
+      refreshing={refreshing}
       onToggleLike={(p) => void toggleLike(p)}
       likeBusy={likeBusy}
       likeErrors={likeErrors}

src/components/FeedView.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode, Ref } from "react";
 import { canDelete, type CardPost } from "@/lib/feed-model";
 import { Composer, type ComposerProps } from "./Composer";
-import { GrowButton } from "./Buttons";
+import { GrowButton, IconButton } from "./Buttons";
 import { PostCard } from "./PostCard";
 
 export type FeedStatus = "loading" | "ready" | "error";
@@ -14,6 +14,9 @@ export interface FeedViewProps {
   newCount: number;
   onRetry: () => void;
   onShowNew: () => void;
+  /** Reloads the first page; the header shows the button when it is given. */
+  onRefresh?: () => void;
+  refreshing?: boolean;
   onToggleLike?: (post: CardPost) => void;
   likeBusy?: ReadonlySet<string>;
   likeErrors?: ReadonlySet<string>;
@@ -52,11 +55,44 @@ function SkeletonCard() {
   );
 }
 
-function FeedPanel({ children, composer }: { children: ReactNode; composer?: ReactNode }) {
+function RefreshIcon({ spinning }: { spinning: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={spinning ? "refresh-icon refresh-icon-spin" : "refresh-icon"}
+    >
+      <path d="M21 12a9 9 0 1 1-2.64-6.36" />
+      <path d="M21 3v6h-6" />
+    </svg>
+  );
+}
+
+export function RefreshButton({ onRefresh, busy }: { onRefresh: () => void; busy?: boolean }) {
+  return (
+    <IconButton
+      label="Refresh feed"
+      shape="round"
+      size="sm"
+      icon={<RefreshIcon spinning={!!busy} />}
+      disabled={busy}
+      aria-busy={busy || undefined}
+      onClick={onRefresh}
+    />
+  );
+}
+
+function FeedPanel({ children, composer, onRefresh, busy }: { children: ReactNode; composer?: ReactNode; onRefresh?: () => void; busy?: boolean }) {
   return (
     <section className="tile panel feed" aria-labelledby="h-feed">
       <div className="panel-head feed-head">
         <h2 id="h-feed" className="type-title type-title-strong">Home feed</h2>
+        {onRefresh ? <RefreshButton onRefresh={onRefresh} busy={busy} /> : null}
       </div>
       {composer}
       {children}
@@ -67,7 +103,7 @@ function FeedPanel({ children, composer }: { children: ReactNode; composer?: Rea
 export function FeedView(p: FeedViewProps) {
   if (p.status === "loading") {
     return (
-      <FeedPanel>
+      <FeedPanel onRefresh={p.onRefresh} busy>
         <div className="feed-center">
           <Spinner />
         </div>
@@ -76,7 +112,7 @@ export function FeedView(p: FeedViewProps) {
   }
   if (p.status === "error") {
     return (
-      <FeedPanel>
+      <FeedPanel onRefresh={p.onRefresh}>
         <div className="feed-message" role="alert">
           <p>The feed did not load.</p>
           <button type="button" onClick={p.onRetry}>Try again</button>
@@ -85,7 +121,7 @@ export function FeedView(p: FeedViewProps) {
     );
   }
   return (
-    <FeedPanel composer={p.composer ? <Composer {...p.composer} /> : null}>
+    <FeedPanel composer={p.composer ? <Composer {...p.composer} /> : null} onRefresh={p.onRefresh} busy={p.refreshing}>
       <div ref={p.listRef} className="feed-list panel-scroll fade-edges">
         {p.newCount > 0 ? (
           <div className="feed-pill">

src/components/PostCard.tsx

@@ -5,7 +5,7 @@ import { HexAvatar } from "@/components/HexAvatar";
 import { CommentsSection } from "@/components/CommentsSection";
 import { VideoPlayer } from "@/components/VideoPlayer";
 import { IconButton, SweepButton } from "@/components/Buttons";
-import { formatDuration, relativeTime, type CardMedia, type CardPost } from "@/lib/feed-model";
+import { commentsLabel, formatDuration, relativeTime, type CardMedia, type CardPost } from "@/lib/feed-model";
 
 export interface PostCardProps {
   post: CardPost;
@@ -206,7 +206,7 @@ export function PostCard({ post, now, index = 0, onToggleLike, likeBusy, likeErr
           onClick={() => setOpen((o) => !o)}
         >
           <CommentIcon />
-          {post.commentsCount} comments
+          {commentsLabel(post.commentsCount)}
         </button>
         {likeError ? (
           <span className="post-error" role="alert">Could not update like.</span>

src/dev/FeedPreview.tsx

@@ -29,6 +29,7 @@ export function FeedPreview() {
   // Fixture switches for the new-posts pill and the loading-more skeleton.
   const [newCount, setNewCount] = useState(0);
   const [loadingMore, setLoadingMore] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
   const list = useRef<HTMLDivElement | null>(null);
 
   // The comments calls answer from the fixtures; the preview never reaches the network.
@@ -99,6 +100,15 @@ export function FeedPreview() {
             setNewCount(0);
             list.current?.scrollTo({ top: 0, behavior: "smooth" });
           }}
+          refreshing={refreshing}
+          onRefresh={() => {
+            list.current?.scrollTo({ top: 0, behavior: "smooth" });
+            setRefreshing(true);
+            window.setTimeout(() => {
+              setPosts(toCardPosts(FIXTURE_FEED_ITEMS));
+              setRefreshing(false);
+            }, 600);
+          }}
           onToggleLike={toggleLike}
           feedUserId={FIXTURE_PERSON.feedUserId}
           onDelete={(post) => setPosts((cur) => cur.filter((p) => p.key !== post.key))}

src/lib/feed-model.ts

@@ -194,6 +194,11 @@ export function upgradeVideos(current: CardPost[], fresh: CardPost[]): CardPost[
   return changed ? next : current;
 }
 
+/** "1 comment", "0 comments", "2 comments". */
+export function commentsLabel(count: number): string {
+  return count === 1 ? "1 comment" : `${count} comments`;
+}
+
 export function relativeTime(publishedAt: string | null, now: number = Date.now()): string {
   const t = publishedAt ? Date.parse(publishedAt) : NaN;
   if (!Number.isFinite(t)) return "";

src/styles/feed.css

@@ -61,3 +61,11 @@
 .feed-skel-w80 { width: 80%; }
 .feed-skel-w100 { width: 100%; }
 .feed-skel-media { display: block; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--tile-3); }
+
+/* Refresh button in the feed header. Its disabled state keeps full opacity, so
+   the spinning icon is the only sign that a reload is running. */
+.refresh-icon { display: block; }
+.refresh-icon-spin { animation: spin .8s linear infinite; }
+@media (prefers-reduced-motion: reduce) {
+  .refresh-icon-spin { animation: none !important; }
+}