Unify reading layouts and site navigation

apps/web/src/app/(dynamicPages)/community/[community]/[tag]/loading.tsx

@@ -1,9 +1,5 @@
-import { EntryListLoadingItem } from "@/features/shared/entry-list-loading-item";
+import { ReadingListLoading } from "@/features/shared/reading-layout/reading-list-loading";
 
 export default function Loading() {
-  return (
-    <div className="flex flex-col gap-4">
-      <EntryListLoadingItem />
-    </div>
-  );
+  return <ReadingListLoading />;
 }

apps/web/src/app/(dynamicPages)/community/[community]/_components/community-menu/index.tsx

@@ -33,7 +33,10 @@ export const CommunityMenu = (props: Props) => {
     if (filter === EntryFilter.trending) {
       newLabel = i18next.t("community.posts");
     } else if (menuItems.some((item) => item === filter)) {
-      newLabel = i18next.t(`entry-filter.filter-${filter}`);
+      newLabel =
+        filter === EntryFilter.payout
+          ? i18next.t("g.payout")
+          : i18next.t(`entry-filter.filter-${filter}`);
     } else if (label && !newLabel) {
       newLabel = label;
     } else {
@@ -45,22 +48,23 @@ export const CommunityMenu = (props: Props) => {
   const isFilterInItems = () => menuItems.some((item) => filter === item);
 
   return (
-    <PageMenu className="pb-4 pt-4 md:pt-0">
+    <PageMenu className="reading-page-menu pb-4 pt-4 md:pt-0">
       <PageMenuMobileDropdown isSelected={isFilterInItems()} label={label}>
         {menuItems.map((x) => (
-            <DropdownItem
-                key={x}
-                href={`/${x}/${props.community.name}`}
-                selected={filter === x}
-            >
-              {i18next.t(`entry-filter.filter-${x}`)}
-            </DropdownItem>
+          <DropdownItem key={x} href={`/${x}/${props.community.name}`} selected={filter === x}>
+            {x === EntryFilter.payout
+              ? i18next.t("g.payout")
+              : i18next.t(`entry-filter.filter-${x}`)}
+          </DropdownItem>
         ))}
       </PageMenuMobileDropdown>
-      <PageMenuItems>
+      <PageMenuItems className="reading-page-tabs">
         {menuItems
           .map((x) => ({
-            label: i18next.t(`entry-filter.filter-${x}`),
+            label:
+              x === EntryFilter.payout
+                ? i18next.t("g.payout")
+                : i18next.t(`entry-filter.filter-${x}`),
             href: `/${x}/${props.community.name}`,
             selected: filter === x
           }))

apps/web/src/app/(dynamicPages)/community/[community]/community.scss

@@ -22,16 +22,5 @@
   .content-side {
     flex-grow: 1;
     padding-bottom: 60px;
-
-    @media (min-width: $lg-break) {
-      .entry-list {
-        .entry-list-body.grid-view {
-          align-content: stretch;
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: flex-start;
-        }
-      }
-    }
   }
 }

apps/web/src/app/(dynamicPages)/community/[community]/layout.tsx

@@ -1,3 +1,4 @@
+import "@/features/shared/reading-layout/reading-layout.scss";
 import { Feedback } from "@/features/shared/feedback";
 import { Navbar } from "@/features/shared/navbar";
 import { ScrollToTop } from "@/features/shared/scroll-to-top";
@@ -28,12 +29,12 @@ export default async function CommunityPageLayout({ children, params }: PropsWit
   ]);
 
   return (
-    <>
+    <div className="reading-page">
       <ScrollToTop />
       <Theme />
       <Feedback />
       <Navbar />
-      <div className="app-content community-page">
+      <div className="app-content community-page reading-list-layout">
         <div className="profile-side">
           {account && communityData && (
             <CommunityCard account={account} community={communityData} />
@@ -50,10 +51,12 @@ export default async function CommunityPageLayout({ children, params }: PropsWit
         )}
         <div className="content-side">
           {communityData && <CommunityMenu community={communityData} />}
-          {communityData && account && <CommunityCover account={account} community={communityData} />}
+          {communityData && account && (
+            <CommunityCover account={account} community={communityData} />
+          )}
           {children}
         </div>
       </div>
-    </>
+    </div>
   );
 }

apps/web/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/layout.tsx

@@ -11,7 +11,7 @@ export default function EntryPageLayout(props: PropsWithChildren) {
       <ScrollToTop />
       <Theme />
       <Feedback />
-      <Navbar experimental={true} />
+      <Navbar />
       {props.children}
     </>
   );

apps/web/src/app/(dynamicPages)/feed/[...sections]/entry-index.scss

@@ -13,7 +13,6 @@
     }
 
     @media (min-width: $lg-break) {
-
     }
   }
 
@@ -33,17 +32,6 @@
         border-bottom-color: transparent;
       }
     }
-
-    @media (min-width: $lg-break) {
-      .entry-list {
-        .entry-list-body.grid-view {
-          align-content: stretch;
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: flex-start;
-        }
-      }
-    }
   }
 
   .side-menu {
@@ -133,4 +121,4 @@
 
 .pt-6 {
   padding-top: 6rem !important;
-}
+}

apps/web/src/app/(dynamicPages)/feed/[...sections]/loading.tsx

@@ -1,13 +1,5 @@
-import { EntryListLoadingItem } from "@/features/shared/entry-list-loading-item";
-import { LinearProgress } from "@/features/shared/linear-progress";
+import { ReadingListLoading } from "@/features/shared/reading-layout/reading-list-loading";
 
 export default function Loading() {
-  return (
-    <div className="entry-list">
-      <div className="entry-list-body">
-        <LinearProgress />
-        <EntryListLoadingItem />
-      </div>
-    </div>
-  );
+  return <ReadingListLoading showProgress />;
 }