revamp the settings

Author: medyo

src/App.tsx

@@ -1,9 +1,6 @@
 import { useEffect, useLayoutEffect, useState } from 'react'
-import 'react-contexify/dist/ReactContexify.css'
-import 'src/assets/App.css'
-import { DNDLayout, Header } from 'src/components/Layout'
+import { DNDLayout } from 'src/components/Layout'
 import { MarketingBanner } from 'src/features/MarketingBanner'
-import { BookmarksSidebar } from 'src/features/bookmarks'
 import { setupAnalytics, setupIdentification, trackPageView } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { AppContentLayout } from './components/Layout'
@@ -22,8 +19,6 @@ const intersectionCallback = (entries: IntersectionObserverEntry[]) => {
 }
 
 export const App = () => {
-  const [showSideBar, setShowSideBar] = useState(false)
-  const [showSettings, setShowSettings] = useState(false)
   const [showOnboarding, setShowOnboarding] = useState(true)
   const { onboardingCompleted, maxVisibleCards, isDNDModeActive, DNDDuration, setDNDDuration } =
     useUserPreferences()
@@ -65,23 +60,13 @@ export const App = () => {
   return (
     <>
       <MarketingBanner />
+      {!onboardingCompleted && isWebOrExtensionVersion() === 'extension' && (
+        <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
+      )}
 
-      <div className="App">
-        {!onboardingCompleted && isWebOrExtensionVersion() === 'extension' && (
-          <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
-        )}
-        <Header
-          setShowSideBar={setShowSideBar}
-          showSideBar={showSideBar}
-          showSettings={showSettings}
-          setShowSettings={setShowSettings}
-        />
-
-        <div className="layoutLayers hideScrollBar">
-          {isDNDModeActive() && <DNDLayout />}
-          <AppContentLayout setShowSettings={setShowSettings} />
-        </div>
-        <BookmarksSidebar showSidebar={showSideBar} onClose={() => setShowSideBar(false)} />
+      <div className="layoutLayers hideScrollBar">
+        {isDNDModeActive() && <DNDLayout />}
+        <AppContentLayout />
       </div>
     </>
   )

src/assets/App.css

@@ -976,6 +976,10 @@ Producthunt item
   .blockHeader {
     display: none;
   }
+
+  .tags {
+    display: none;
+  }
 }
 
 @keyframes cardPlaceholderPulse {

src/assets/variables.css

@@ -94,6 +94,9 @@ html.dark {
   --settings-input-border-focus-color: #6b7b90;
   --settings-input-placeholder-color: #42474e;
   --settings-input-text-color: #fff;
+
+  --horizontal-tabs-layout-active-color: white;
+  --horizontal-tabs-layout-text-color: #798595;
 }
 
 html.light {
@@ -176,4 +179,7 @@ html.light {
   --settings-input-border-focus-color: #c4d6df;
   --settings-input-placeholder-color: #97a6ad;
   --settings-input-text-color: #253b53;
+
+  --horizontal-tabs-layout-active-color: #0366d6;
+  --horizontal-tabs-layout-text-color: #3c5065;
 }

src/components/Elements/BottomNavigation/BottomNavigation.tsx

@@ -1,22 +1,19 @@
 import { AiOutlineMenu } from 'react-icons/ai'
 import { BsRssFill } from 'react-icons/bs'
+import { useNavigate } from 'react-router-dom'
 import { SUPPORTED_CARDS } from 'src/config/supportedCards'
 import { useUserPreferences } from 'src/stores/preferences'
 import { SelectedCard } from 'src/types'
 
 type BottomNavigationProps = {
   selectedCard: SelectedCard
   setSelectedCard: (card: SelectedCard) => void
-  setShowSettings: (value: boolean | ((prevVar: boolean) => boolean)) => void
 }
 
-export const BottomNavigation = ({
-  selectedCard,
-  setSelectedCard,
-  setShowSettings,
-}: BottomNavigationProps) => {
+export const BottomNavigation = ({ selectedCard, setSelectedCard }: BottomNavigationProps) => {
   const { cards, userCustomCards } = useUserPreferences()
   const AVAILABLE_CARDS = [...SUPPORTED_CARDS, ...userCustomCards]
+  const navigate = useNavigate()
 
   return (
     <div className="bottomNavigation">
@@ -40,7 +37,9 @@ export const BottomNavigation = ({
         <button
           aria-label="Open settings"
           className={'navigationItem '}
-          onClick={() => setShowSettings((prev: boolean) => !prev)}>
+          onClick={() => {
+            navigate('/settings/general')
+          }}>
           {<AiOutlineMenu />}
         </button>
       }

src/components/Elements/UserTags/UserTags.tsx

@@ -1,11 +1,8 @@
 import { TiPlus } from 'react-icons/ti'
+import { Link } from 'react-router-dom'
 import { useUserPreferences } from 'src/stores/preferences'
 
-type UserTagsProps = {
-  onAddClicked: () => void
-}
-
-export const UserTags = ({ onAddClicked }: UserTagsProps) => {
+export const UserTags = () => {
   const { userSelectedTags } = useUserPreferences()
 
   return (
@@ -15,9 +12,9 @@ export const UserTags = ({ onAddClicked }: UserTagsProps) => {
           {tag.value}
         </span>
       ))}
-      <button aria-label="Open settings" className="tag tagHoverable" onClick={onAddClicked}>
+      <Link to="/settings/topics" className="tag tagHoverable" aria-label="Open settings">
         <TiPlus className="tagIcon" />
-      </button>
+      </Link>
     </div>
   )
 }

src/components/Layout/AppContentLayout.tsx

@@ -6,11 +6,7 @@ import { ScrollCardsNavigator } from './'
 import { DesktopCards } from './DesktopCards'
 import { MobileCards } from './MobileCards'
 
-export const AppContentLayout = ({
-  setShowSettings,
-}: {
-  setShowSettings: (value: boolean | ((prevVar: boolean) => boolean)) => void
-}) => {
+export const AppContentLayout = () => {
   const { cards, userCustomCards } = useUserPreferences()
   const [selectedCard, setSelectedCard] = useState(cards[0])
 
@@ -26,11 +22,7 @@ export const AppContentLayout = ({
           </div>
         )}
       </main>
-      <BottomNavigation
-        selectedCard={selectedCard}
-        setSelectedCard={setSelectedCard}
-        setShowSettings={setShowSettings}
-      />
+      <BottomNavigation selectedCard={selectedCard} setSelectedCard={setSelectedCard} />
     </>
   )
 }

src/components/Layout/AppLayout.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import 'react-contexify/dist/ReactContexify.css'
+import { Outlet } from 'react-router-dom'
+import { BeatLoader } from 'react-spinners'
+import 'src/assets/App.css'
+import { MarketingBanner } from 'src/features/MarketingBanner'
+import { Header } from './Header'
+
+export const AppLayout = () => {
+  return (
+    <>
+      <MarketingBanner />
+
+      <div className="App">
+        <Header />
+        <React.Suspense
+          fallback={
+            <div className="appLoading">
+              <BeatLoader color={'#A9B2BD'} loading={true} size={15} />
+            </div>
+          }>
+          <Outlet />
+        </React.Suspense>
+      </div>
+    </>
+  )
+}

src/components/Layout/Header.tsx

@@ -3,31 +3,20 @@ import { BsFillBookmarksFill, BsFillGearFill, BsMoonFill } from 'react-icons/bs'
 import { CgTab } from 'react-icons/cg'
 import { IoMdSunny } from 'react-icons/io'
 import { MdDoDisturbOff } from 'react-icons/md'
+import { Link, useNavigate } from 'react-router-dom'
 import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
 import { SearchBar } from 'src/components/Elements/SearchBar'
 import { UserTags } from 'src/components/Elements/UserTags'
 import { Changelog } from 'src/features/changelog'
-import { SettingsModal } from 'src/features/settings'
 import { identifyUserTheme, trackDNDDisable, trackThemeSelect } from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
 import { useUserPreferences } from 'src/stores/preferences'
 
-type HeaderProps = {
-  showSideBar: boolean
-  setShowSideBar: (show: boolean) => void
-  showSettings: boolean
-  setShowSettings: (show: boolean) => void
-}
-
-export const Header = ({
-  showSideBar,
-  setShowSideBar,
-  showSettings,
-  setShowSettings,
-}: HeaderProps) => {
+export const Header = () => {
   const [themeIcon, setThemeIcon] = useState(<BsMoonFill />)
   const { theme, setTheme, setDNDDuration, isDNDModeActive } = useUserPreferences()
   const { userBookmarks } = useBookmarks()
+  const navigate = useNavigate()
 
   useEffect(() => {
     document.documentElement.classList.add(theme)
@@ -52,7 +41,7 @@ export const Header = ({
   }
 
   const onSettingsClick = () => {
-    setShowSettings(true)
+    navigate('/settings/general')
   }
 
   const BookmarksBadgeCount = () => {
@@ -72,14 +61,14 @@ export const Header = ({
 
   return (
     <>
-      <SettingsModal showSettings={showSettings} setShowSettings={setShowSettings} />
-
       <header className="AppHeader">
         <span className="AppName">
           <i className="logo">
             <CgTab />
           </i>{' '}
-          <HackertabLogo aria-label="hackertab.dev" className="logoText" />
+          <Link to="/">
+            <HackertabLogo aria-label="hackertab.dev" className="logoText" />
+          </Link>
           <Changelog />
         </span>
         <SearchBar />
@@ -99,15 +88,14 @@ export const Header = ({
             onClick={onThemeChange}>
             {themeIcon}
           </button>
-          <button
-            aria-label="Open bookmarks"
-            className="extraBtn"
-            onClick={() => setShowSideBar(!showSideBar)}>
-            <BsFillBookmarksFill />
-            <BookmarksBadgeCount />
-          </button>
+          <Link to="/settings/bookmarks" className="extraBtn" aria-label="Open bookmarks">
+            <>
+              <BsFillBookmarksFill />
+              <BookmarksBadgeCount />
+            </>
+          </Link>
         </div>
-        <UserTags onAddClicked={onSettingsClick} />
+        <UserTags />
       </header>
     </>
   )

src/components/Layout/SettingsContentLayout/SettingsContentLayout.tsx

@@ -0,0 +1,23 @@
+import './settingsContentLayout.css'
+
+type SettingsContentLayoutProps = {
+  title: string
+  description: string
+  children: React.ReactNode
+}
+
+export const SettingsContentLayout = ({
+  title,
+  description,
+  children,
+}: SettingsContentLayoutProps) => {
+  return (
+    <div className="settingsContent">
+      <header>
+        <h1 className="title">{title}</h1>
+        <p className="description">{description}</p>
+      </header>
+      <main className="settingsBody scrollable">{children}</main>
+    </div>
+  )
+}

src/components/Layout/SettingsContentLayout/index.ts

@@ -0,0 +1 @@
+export * from './SettingsContentLayout'