implement: customizing the number of visible cards

Author: medyo

src/App.js

@@ -19,7 +19,8 @@ function App() {
   const [showSideBar, setShowSideBar] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
   const [showOnboarding, setShowOnboarding] = useState(true)
-  const { onboardingCompleted, firstSeenDate, markOnboardingAsCompleted } = useUserPreferences()
+  const { onboardingCompleted, firstSeenDate, markOnboardingAsCompleted, maxVisibleCards } =
+    useUserPreferences()
 
   useLayoutEffect(() => {
     if (!onboardingCompleted && getAppVersion() <= '1.15.9') {
@@ -31,6 +32,10 @@ function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onboardingCompleted, firstSeenDate])
 
+  useEffect(() => {
+    document.documentElement.style.setProperty('--max-visible-cards', maxVisibleCards)
+  }, [maxVisibleCards])
+
   useEffect(() => {
     setupAnalytics()
     setupIdentification()

src/assets/App.css

@@ -1043,18 +1043,21 @@ Producthunt item
   .floatingFilter {
     display: block;
   }
+  .block {
+    width: 100vw;
+  }
 }
 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
   .block {
-    width: calc(96vw / 2);
+    width: calc(96vw / min(2, var(--max-visible-cards)));
   }
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
   .block {
-    width: calc(96vw / 3);
+    width: calc(96vw / min(3, var(--max-visible-cards)));
   }
   .searchBarInput {
     width: 200px;
@@ -1064,7 +1067,7 @@ Producthunt item
 /* Large devices (desktops, 992px and up)*/
 @media only screen and (min-width: 992px) {
   .block {
-    width: calc(96vw / 3);
+    width: calc(96vw / min(3, var(--max-visible-cards)));
   }
 
   .searchBarInput {
@@ -1075,14 +1078,14 @@ Producthunt item
 /* X-Large devices (large desktops, 1200px and up)*/
 @media only screen and (min-width: 1200px) {
   .block {
-    width: calc(96vw / 4);
+    width: calc(96vw / min(4, var(--max-visible-cards)));
   }
 }
 
 /* XX-Large devices (larger desktops, 1400px and up)*/
 @media only screen and (min-width: 1400px) {
   .block {
-    width: calc(96vw / 4);
+    width: calc(96vw / min(4, var(--max-visible-cards)));
   }
 }
 
@@ -1093,7 +1096,9 @@ Producthunt item
     padding: 0;
   }
   .block {
-    width: calc((1800px - 12px * 4) / 4);
+    width: calc(
+      (1800px - 12px * min(5, var(--max-visible-cards))) / min(5, var(--max-visible-cards))
+    );
   }
 }
 
@@ -1120,3 +1125,6 @@ Producthunt item
   position: relative;
   vertical-align: middle;
 }
+.noMargin {
+  margin: 0 !important;
+}

src/assets/variables.css

@@ -10,6 +10,10 @@
   src: url('fonts/nunito/nunito-semibold.woff2') format('woff2');
 }
 
+html {
+  --max-visible-cards: 4;
+}
+
 html.dark {
   --app-name-text-color: #fff;
   --background-color: #0d1116;
@@ -89,7 +93,7 @@ html.dark {
   --settings-input-border-color: #3a4553;
   --settings-input-border-focus-color: #6b7b90;
   --settings-input-placeholder-color: #42474e;
-  --settings-input-text-color: #fff
+  --settings-input-text-color: #fff;
 }
 
 html.light {
@@ -171,6 +175,5 @@ html.light {
   --settings-input-border-color: #e9ebec;
   --settings-input-border-focus-color: #c4d6df;
   --settings-input-placeholder-color: #97a6ad;
-  --settings-input-text-color: #253b53
-
+  --settings-input-text-color: #253b53;
 }

src/components/Elements/ChipsSet/ChipsSet.tsx

@@ -1,7 +1,7 @@
+import clsx from 'clsx'
 import { useState } from 'react'
 import { Option } from 'src/types'
 import './chipset.css'
-
 type ChipProps = {
   option: Option
   onSelect: (option: Option) => void
@@ -19,12 +19,14 @@ const Chip = ({ option, onSelect, active = false }: ChipProps) => {
 type ChangeAction = 'ADD' | 'REMOVE'
 type ChipsSetProps = {
   options: Option[]
+  className?: string
   defaultValues?: string[]
   canSelectMultiple?: boolean
   onChange?: (action: ChangeAction, options: Option[]) => void
 }
 
 export const ChipsSet = ({
+  className,
   options,
   canSelectMultiple = false,
   onChange,
@@ -62,7 +64,7 @@ export const ChipsSet = ({
   }
 
   return (
-    <div className="chipsSet">
+    <div className={clsx('chipsSet', className)}>
       {options.map((option) => {
         return (
           <Chip

src/features/settings/components/SettingsModal.tsx

@@ -4,6 +4,7 @@ import ReactModal from 'react-modal'
 import Select, { ActionMeta, MultiValue, SingleValue } from 'react-select'
 import Toggle from 'react-toggle'
 import 'react-toggle/style.css'
+import { ChipsSet } from 'src/components/Elements'
 import { Footer } from 'src/components/Layout'
 import { SUPPORTED_CARDS, SUPPORTED_SEARCH_ENGINES, supportLink } from 'src/config'
 import { Tag, useRemoteConfigStore } from 'src/features/remoteConfig'
@@ -24,7 +25,7 @@ import {
   trackThemeSelect,
 } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
-import { SearchEngineType, SelectedCard } from 'src/types'
+import { Option, SearchEngineType, SelectedCard } from 'src/types'
 import { RssSetting } from './RssSetting'
 import './settings.css'
 
@@ -48,8 +49,10 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
     listingMode,
     theme,
     searchEngine,
+    maxVisibleCards,
     setTheme,
     setListingMode,
+    setMaxVisibleCards,
     setSearchEngine,
     setOpenLinksNewTab,
     setCards,
@@ -144,6 +147,12 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
     identifyUserTheme(newTheme)
   }
 
+  const onCardsCountChange = (selectedChips: Option[]) => {
+    if (selectedChips.length) {
+      setMaxVisibleCards(parseInt(selectedChips[0].value))
+    }
+  }
+
   return (
     <ReactModal
       isOpen={showSettings}
@@ -215,6 +224,43 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
 
         <RssSetting setSelectedCards={setSelectedCards} />
 
+        <div className="settingRow">
+          <p className="settingTitle">Max number of cards to display</p>
+          <div className="settingContent">
+            <ChipsSet
+              className={'noMargin'}
+              canSelectMultiple={false}
+              options={[
+                {
+                  label: '3 cards',
+                  value: '3',
+                },
+                {
+                  label: '4 cards',
+                  value: '4',
+                },
+                {
+                  label: '5 cards',
+                  value: '5',
+                },
+                {
+                  label: '6 cards',
+                  value: '6',
+                },
+              ]}
+              defaultValues={[maxVisibleCards.toString()]}
+              onChange={(_, selectedChips) => {
+                onCardsCountChange(selectedChips)
+              }}
+            />
+
+            <p className="settingHint">
+              To ensure a seamless experience, we may adjust the selected number to align with the
+              resolution of your screen.
+            </p>
+          </div>
+        </div>
+
         <div className="settingRow">
           <p className="settingTitle">Dark Mode</p>
           <div className="settingContent">

src/stores/preferences.ts

@@ -14,6 +14,7 @@ export type UserPreferencesState = {
   onboardingResult: Omit<Occupation, 'icon'> | null
   listingMode: ListingMode
   searchEngine: string
+  maxVisibleCards: number
   cards: SelectedCard[]
   cardsSettings: Record<string, CardSettingsType>
   firstSeenDate: number
@@ -28,6 +29,7 @@ type UserPreferencesStoreActions = {
   setListingMode: (listingMode: ListingMode) => void
   setCards: (selectedCards: SelectedCard[]) => void
   setTags: (selectedTags: Tag[]) => void
+  setMaxVisibleCards: (maxVisibleCards: number) => void
   setCardSettings: (card: string, settings: CardSettingsType) => void
   markOnboardingAsCompleted: (occupation: Omit<Occupation, 'icon'> | null) => void
   setUserCustomCards: (cards: SupportedCardType[]) => void
@@ -39,6 +41,7 @@ export const useUserPreferences = create(
     (set) => ({
       userSelectedTags: [],
       cardsSettings: {},
+      maxVisibleCards: 4,
       theme: 'dark',
       onboardingCompleted: false,
       onboardingResult: null,
@@ -59,6 +62,7 @@ export const useUserPreferences = create(
       setOpenLinksNewTab: (openLinksNewTab: boolean) => set({ openLinksNewTab: openLinksNewTab }),
       setCards: (selectedCards: SelectedCard[]) => set({ cards: selectedCards }),
       setTags: (selectedTags: Tag[]) => set({ userSelectedTags: selectedTags }),
+      setMaxVisibleCards: (maxVisibleCards: number) => set({ maxVisibleCards: maxVisibleCards }),
       initState: (newState: UserPreferencesState) =>
         set(() => {
           return { ...newState }