le8i2digy: Keep the posts and show an inline error when a refresh fails

src/components/FeedView.tsx

@@ -17,6 +17,8 @@ export interface FeedViewProps {
   /** Reloads the first page; the header shows the button when it is given. */
   onRefresh?: () => void;
   refreshing?: boolean;
+  /** The last refresh failed; the posts stay and a small message shows in the header. */
+  refreshFailed?: boolean;
   onToggleLike?: (post: CardPost) => void;
   likeBusy?: ReadonlySet<string>;
   likeErrors?: ReadonlySet<string>;
@@ -87,11 +89,12 @@ export function RefreshButton({ onRefresh, busy }: { onRefresh: () => void; busy
   );
 }
 
-function FeedPanel({ children, composer, onRefresh, busy }: { children: ReactNode; composer?: ReactNode; onRefresh?: () => void; busy?: boolean }) {
+function FeedPanel({ children, composer, onRefresh, busy, refreshFailed }: { children: ReactNode; composer?: ReactNode; onRefresh?: () => void; busy?: boolean; refreshFailed?: 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>
+        {refreshFailed ? <span className="feed-refresh-error" role="alert">Could not refresh. Try again.</span> : null}
         {onRefresh ? <RefreshButton onRefresh={onRefresh} busy={busy} /> : null}
       </div>
       {composer}
@@ -121,7 +124,7 @@ export function FeedView(p: FeedViewProps) {
     );
   }
   return (
-    <FeedPanel composer={p.composer ? <Composer {...p.composer} /> : null} onRefresh={p.onRefresh} busy={p.refreshing}>
+    <FeedPanel composer={p.composer ? <Composer {...p.composer} /> : null} onRefresh={p.onRefresh} busy={p.refreshing} refreshFailed={p.refreshFailed}>
       <div ref={p.listRef} className="feed-list panel-scroll fade-edges">
         {p.newCount > 0 ? (
           <div className="feed-pill">