feat: add CardsNumberSettings and LayoutSettings components for user preferences

Author: medyo

src/features/settings/components/GeneralSettings/CardsNumberSettings.tsx

@@ -0,0 +1,60 @@
+import { ChipsSet } from 'src/components/Elements'
+import { identifyUserMaxVisibleCards, trackMaxVisibleCardsChange } from 'src/lib/analytics'
+import { useUserPreferences } from 'src/stores/preferences'
+import { Option } from 'src/types'
+
+export const CardsNumberSettings = () => {
+  const { maxVisibleCards, setMaxVisibleCards, layout } = useUserPreferences()
+
+  const onMaxVisibleCardsChange = (selectedChips: Option[]) => {
+    if (selectedChips.length) {
+      const maxVisibleCards = parseInt(selectedChips[0].value)
+      setMaxVisibleCards(maxVisibleCards)
+      identifyUserMaxVisibleCards(maxVisibleCards)
+      trackMaxVisibleCardsChange(maxVisibleCards)
+    }
+  }
+
+  if (layout === 'grid') {
+    return null // Hide this setting in grid layout
+  }
+
+  return (
+    <div className="settingRow">
+      <p className="settingTitle">Max number of cards to display</p>
+      <div className="settingContent">
+        <ChipsSet
+          className={'noMargin alternative-color'}
+          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) => {
+            onMaxVisibleCardsChange(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>
+  )
+}

src/features/settings/components/GeneralSettings/GeneralSettings.tsx

@@ -1,25 +1,23 @@
 import React from 'react'
 import Toggle from 'react-toggle'
 import 'react-toggle/style.css'
-import { ChipsSet } from 'src/components/Elements'
 import { Footer } from 'src/components/Layout'
 import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout'
 import {
   identifyUserLinksInNewTab,
   identifyUserListingMode,
-  identifyUserMaxVisibleCards,
   identifyUserTheme,
   trackListingModeSelect,
-  trackMaxVisibleCardsChange,
   trackTabTarget,
   trackThemeSelect,
 } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
-import { Option } from 'src/types'
 import { DeleteAccount } from '../UserSettings/DeleteAccount'
 import { UserInfo } from '../UserSettings/UserInfo'
+import { CardsNumberSettings } from './CardsNumberSettings'
 import { DNDSettings } from './DNDSettings'
 import './generalSettings.css'
+import { LayoutSettings } from './LayoutSettings'
 
 export const GeneralSettings = () => {
   const {
@@ -54,15 +52,6 @@ export const GeneralSettings = () => {
     identifyUserTheme(newTheme)
   }
 
-  const onMaxVisibleCardsChange = (selectedChips: Option[]) => {
-    if (selectedChips.length) {
-      const maxVisibleCards = parseInt(selectedChips[0].value)
-      setMaxVisibleCards(maxVisibleCards)
-      identifyUserMaxVisibleCards(maxVisibleCards)
-      trackMaxVisibleCardsChange(maxVisibleCards)
-    }
-  }
-
   return (
     <SettingsContentLayout
       title="General Settings"
@@ -71,42 +60,8 @@ export const GeneralSettings = () => {
       }>
       <div>
         <UserInfo />
-        <div className="settingRow">
-          <p className="settingTitle">Max number of cards to display</p>
-          <div className="settingContent">
-            <ChipsSet
-              className={'noMargin alternative-color'}
-              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) => {
-                onMaxVisibleCardsChange(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>
+        <LayoutSettings />
+        <CardsNumberSettings />
 
         <div className="settingRow">
           <p className="settingTitle">Dark Mode</p>

src/features/settings/components/GeneralSettings/LayoutSettings.tsx

@@ -0,0 +1,80 @@
+import { IoGridSharp } from 'react-icons/io5'
+import { TfiLayoutColumn4Alt } from 'react-icons/tfi'
+import Select, {
+  GroupBase,
+  OptionProps,
+  SingleValue,
+  SingleValueProps,
+  components,
+} from 'react-select'
+import { useUserPreferences } from 'src/stores/preferences'
+import { Layout } from 'src/types'
+
+type LayoutOption = {
+  label: string
+  value: Layout
+  icon: React.ReactNode
+}
+
+const Layouts: LayoutOption[] = [
+  { value: 'grid', label: 'Grid', icon: <IoGridSharp /> },
+  { value: 'cards', label: 'Cards', icon: <TfiLayoutColumn4Alt /> },
+]
+
+const IconOption = (props: OptionProps<LayoutOption, false, GroupBase<LayoutOption>>) => (
+  <components.Option {...props}>
+    <div className="optionIcon">
+      {props.data.icon}
+      {props.data.label}
+    </div>
+  </components.Option>
+)
+
+const SingleIconOption = (
+  props: SingleValueProps<LayoutOption, false, GroupBase<LayoutOption>>
+) => (
+  <components.SingleValue {...props}>
+    <div className="optionIcon">
+      {props.data.icon}
+      {props.data.label}
+    </div>
+  </components.SingleValue>
+)
+
+export const LayoutSettings = () => {
+  const { layout, setLayout } = useUserPreferences()
+
+  const onPeriodSelect = (selectedOption: SingleValue<LayoutOption>) => {
+    if (!selectedOption) {
+      return
+    }
+
+    setLayout(selectedOption.value)
+  }
+
+  const getDefaultValue = (): LayoutOption | undefined => {
+    return Layouts.find((e) => e.value === layout)
+  }
+
+  return (
+    <div className="settingRow">
+      <p className="settingTitle">Layout Style</p>
+      <div className="settingContent">
+        <div className="form">
+          <div style={{ flex: 1 }}>
+            <Select
+              options={Layouts}
+              components={{ Option: IconOption, SingleValue: SingleIconOption }}
+              isMulti={false}
+              isClearable={false}
+              isSearchable={false}
+              defaultValue={getDefaultValue()}
+              classNamePrefix={'hackertab'}
+              onChange={onPeriodSelect}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/features/settings/components/GeneralSettings/generalSettings.css

@@ -12,6 +12,11 @@
   align-items: center;
   justify-content: space-between;
 }
+.settingRow .optionIcon {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
 .settingRow:not(:last-child) {
   border-bottom: 1px solid var(--card-content-divider);
 }