feat: enhance layout handling with dynamic class names and integrate Feed component

Author: medyo

src/App.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { useEffect, useLayoutEffect, useState } from 'react'
 import { DNDLayout } from 'src/components/Layout'
 import {
@@ -30,6 +31,7 @@ export const App = () => {
     maxVisibleCards,
     setAdvStatus,
     isDNDModeActive,
+    layout,
     DNDDuration,
     setDNDDuration,
   } = useUserPreferences()
@@ -80,7 +82,11 @@ export const App = () => {
         <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
       )}
 
-      <div className="layoutLayers hideScrollBar">
+      <div
+        className={clsx(
+          'layoutLayers',
+          layout === 'cards' ? 'cardsLayout hideScrollBar' : 'gridLayout scrollable'
+        )}>
         {isDNDModeActive() && <DNDLayout />}
         <AppContentLayout />
       </div>

src/assets/App.css

@@ -411,10 +411,13 @@ a {
 }
 .rowCover {
   border-radius: 4px;
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   min-height: auto;
   object-fit: cover;
+
   aspect-ratio: 16/9;
   background-color: var(--placeholder-background-color);
   margin-bottom: 12px;
@@ -1235,11 +1238,18 @@ Producthunt item
     justify-content: center;
   }
 
-  .layoutLayers {
+  .layoutLayers.cardsLayout {
     margin-left: 1%;
     margin-right: 1%;
   }
 
+  .layoutLayers.gridLayout {
+    margin-left: 1%;
+    padding-right: 1%;
+    margin-top: 1%;
+    box-shadow: 0px -10px 20px -15px var(--card-border-color);
+  }
+
   .Cards {
     padding-bottom: 20px;
   }

src/components/Layout/AppContentLayout.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { Feed } from 'src/features/feed'
 import { DesktopBreakpoint } from 'src/providers/DesktopBreakpoint'
 import { MobileBreakpoint } from 'src/providers/MobileBreakpoint'
 import { useUserPreferences } from 'src/stores/preferences'
@@ -8,21 +9,27 @@ import { MobileCards } from './MobileCards'
 import { ScrollCardsNavigator } from './ScrollCardsNavigator'
 
 export const AppContentLayout = () => {
-  const { cards, userCustomCards } = useUserPreferences()
+  const { cards, userCustomCards, layout } = useUserPreferences()
   const [selectedCard, setSelectedCard] = useState(cards[0])
 
   return (
     <>
       <main className="AppContent">
-        <ScrollCardsNavigator />
-        <DesktopBreakpoint>
-          <DesktopCards cards={cards} userCustomCards={userCustomCards} />
-        </DesktopBreakpoint>
-        <MobileBreakpoint>
-          <div className="Cards HorizontalScroll">
-            <MobileCards selectedCard={selectedCard} />
-          </div>
-        </MobileBreakpoint>
+        {layout === 'grid' ? (
+          <Feed />
+        ) : (
+          <>
+            <ScrollCardsNavigator />
+            <DesktopBreakpoint>
+              <DesktopCards cards={cards} userCustomCards={userCustomCards} />
+            </DesktopBreakpoint>
+            <MobileBreakpoint>
+              <div className="Cards HorizontalScroll">
+                <MobileCards selectedCard={selectedCard} />
+              </div>
+            </MobileBreakpoint>
+          </>
+        )}
       </main>
       <BottomNavigation selectedCard={selectedCard} setSelectedCard={setSelectedCard} />
     </>