v3: added multiple stylesheets, improved user profiles

src/pages/UserDumps.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { t } from "@lingui/core/macro";
-import { Plural, Trans } from "@lingui/react/macro";
+import { Trans } from "@lingui/react/macro";
 import { Link, useParams } from "react-router";
 
 import { useAuth } from "../hooks/useAuth.ts";
@@ -70,33 +70,9 @@ export function UserDumps() {
   const { profileUser, items: dumps, hasMore, loadingMore } = state;
 
   return (
-    <PageShell>
-      <ProfileSubpageHeader
-        username={username!}
-        profileUser={profileUser}
-        title={t`Dumps`}
-        actions={isOwnProfile && (
-          <button
-            type="button"
-            className="new-playlist-toggle"
-            onClick={() => setCreateModalOpen(true)}
-          >
-            <Trans>+ New dump</Trans>
-          </button>
-        )}
-      />
-
-      {createModalOpen && (
-        <DumpCreateModal onClose={() => setCreateModalOpen(false)} />
-      )}
-
-      {dumps.length === 0
-        ? (
-          <p className="empty-state">
-            <Trans>Nothing here yet.</Trans>
-          </p>
-        )
-        : (
+    <PageShell
+      feed={dumps.length > 0 && (
+        <>
           <ul className="dump-feed">
             {dumps.map((dump) => (
               <DumpCard
@@ -111,21 +87,40 @@ export function UserDumps() {
               />
             ))}
           </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 && dumps.length > 0 && (
-        <p className="index-status">
-          <Trans>
-            All <Plural value={dumps.length} one="# dump" other="# dumps" />
-            {" "}
-            loaded.
-          </Trans>
+    >
+      <ProfileSubpageHeader
+        username={username!}
+        profileUser={profileUser}
+        title={t`Dumps`}
+        actions={isOwnProfile && (
+          <button
+            type="button"
+            className="new-playlist-toggle"
+            onClick={() => setCreateModalOpen(true)}
+          >
+            <Trans>+ New dump</Trans>
+          </button>
+        )}
+      />
+      {createModalOpen && (
+        <DumpCreateModal onClose={() => setCreateModalOpen(false)} />
+      )}
+      {dumps.length === 0 && (
+        <p className="empty-state">
+          <Trans>Nothing here yet.</Trans>
         </p>
       )}
     </PageShell>