v3: added multiple stylesheets, improved user profiles

src/pages/UserUpvoted.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Link, useParams } from "react-router";
 import { t } from "@lingui/core/macro";
-import { Plural, Trans } from "@lingui/react/macro";
+import { Trans } from "@lingui/react/macro";
 
 import { API_URL } from "../config/api.ts";
 import type { Dump } from "../model.ts";
@@ -145,20 +145,9 @@ export function UserUpvoted() {
   );
 
   return (
-    <PageShell>
-      <ProfileSubpageHeader
-        username={username!}
-        profileUser={profileUser}
-        title={t`Upvoted`}
-      />
-
-      {visibleDumps.length === 0
-        ? (
-          <p className="empty-state">
-            <Trans>Nothing here yet.</Trans>
-          </p>
-        )
-        : (
+    <PageShell
+      feed={visibleDumps.length > 0 && (
+        <>
           <ul className="dump-feed">
             {visibleDumps.map((dump) => {
               const phase = fading[dump.id];
@@ -182,25 +171,28 @@ export function UserUpvoted() {
               );
             })}
           </ul>
-        )}
-
-      <div ref={sentinelRef} />
-      {loadingMore && (
-        <p className="feed-loading-more">
-          <Trans>Loading more…</Trans>
-        </p>
+          {hasMore && <div ref={sentinelRef} />}
+          {loadingMore && (
+            <p className="feed-loading-more">
+              <Trans>Loading more…</Trans>
+            </p>
+          )}
+          {!hasMore && (
+            <p className="feed-end">
+              <Trans>You've reached the end.</Trans>
+            </p>
+          )}
+        </>
       )}
-      {!hasMore && visibleDumps.length > 0 && (
-        <p className="index-status">
-          <Trans>
-            All{" "}
-            <Plural
-              value={votes.length}
-              one="# upvoted dump"
-              other="# upvoted dumps"
-            />{" "}
-            loaded.
-          </Trans>
+    >
+      <ProfileSubpageHeader
+        username={username!}
+        profileUser={profileUser}
+        title={t`Upvoted`}
+      />
+      {visibleDumps.length === 0 && (
+        <p className="empty-state">
+          <Trans>Nothing here yet.</Trans>
         </p>
       )}
     </PageShell>