[WIP] feat(ux): Home page concept

packages/app/src/Router.tsx

@@ -85,17 +85,34 @@ const RouterInner = () => {
               <Headers />
               <ErrorBoundary FallbackComponent={ErrorFallbackRoutes}>
                 <Routes>
-                  {getPagesConfig(network, advancedMode).map((page, i) => (
-                    <Route
-                      key={`main_interface_page_${i}`}
-                      path={page.hash}
-                      element={<PageWithTitle page={page} />}
-                    />
-                  ))}
+                  {getPagesConfig(network, advancedMode).map((page, i) => {
+                    // Only allow home page and rewards page when in Easy mode (advancedMode is false)
+                    // Allow all pages when in Advanced mode (advancedMode is true)
+                    if (
+                      !advancedMode &&
+                      page.key !== 'home' &&
+                      page.key !== 'rewards'
+                    ) {
+                      return (
+                        <Route
+                          key={`main_interface_page_${i}`}
+                          path={page.hash}
+                          element={<Navigate to="/home" />}
+                        />
+                      )
+                    }
+                    return (
+                      <Route
+                        key={`main_interface_page_${i}`}
+                        path={page.hash}
+                        element={<PageWithTitle page={page} />}
+                      />
+                    )
+                  })}
                   <Route
                     key="main_interface_navigate"
                     path="*"
-                    element={<Navigate to="/overview" />}
+                    element={<Navigate to="/home" />}
                   />
                 </Routes>
               </ErrorBoundary>

packages/app/src/config/pages.ts

@@ -1,6 +1,7 @@
 // Copyright 2025 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
+import { Home } from 'pages/Home'
 import { Nominate } from 'pages/Nominate'
 import { Operators } from 'pages/Operators'
 import { Overview } from 'pages/Overview'
@@ -28,6 +29,15 @@ export const PageCategories: PageCategoryItems = [
 ]
 
 export const PagesConfig: PagesConfigItems = [
+  {
+    category: 1,
+    key: 'home',
+    uri: `${import.meta.env.BASE_URL}`,
+    hash: '/home',
+    Entry: Home,
+    lottie: 'home',
+    advanced: false,
+  },
   {
     category: 2,
     key: 'overview',

packages/app/src/library/Headers/ToggleMode.tsx

@@ -0,0 +1,96 @@
+// Copyright 2025 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { useState } from 'react'
+import styled from 'styled-components'
+
+const ToggleWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  margin-left: 0.8rem;
+  background: var(--button-primary-background);
+  border-radius: 999px;
+  box-shadow: var(--card-shadow);
+  border: 1.5px solid var(--accent-color-primary);
+  height: 2.8rem;
+  min-width: 220px;
+  width: 220px;
+  padding: 0;
+  overflow: hidden;
+`
+
+const Slider = styled.div<{ mode: 'easy' | 'advanced' }>`
+  position: absolute;
+  top: 0;
+  left: ${({ mode }) => (mode === 'easy' ? '0' : '50%')};
+  width: 50%;
+  height: 100%;
+  background: var(--accent-color-primary);
+  border-radius: 999px;
+  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+`
+
+const ToggleButton = styled.button<{ $active: boolean }>`
+  position: relative;
+  z-index: 2;
+  flex: 1 1 50%;
+  border: none !important;
+  outline: none !important;
+  background: transparent;
+  font-family: InterSemiBold, sans-serif;
+  font-size: 1.1rem;
+  padding: 0 1.2rem;
+  margin: 0;
+  cursor: pointer;
+  border-radius: 0;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ $active }) =>
+    $active ? 'white' : 'var(--text-color-secondary)'};
+  transition: color 0.2s;
+  height: 100%;
+  box-shadow: none;
+
+  &:focus {
+    outline: none !important;
+    border: none !important;
+    box-shadow: none;
+  }
+  &:focus-visible {
+    outline: none !important;
+    border: none !important;
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
+  }
+`
+
+export const ToggleMode = () => {
+  const [mode, setMode] = useState<'easy' | 'advanced'>('easy')
+
+  return (
+    <ToggleWrapper aria-label="Display mode toggle" role="group" tabIndex={0}>
+      <Slider mode={mode} aria-hidden />
+      <ToggleButton
+        $active={mode === 'easy'}
+        aria-pressed={mode === 'easy'}
+        aria-label="Easy mode"
+        onClick={() => setMode('easy')}
+        type="button"
+      >
+        Easy
+      </ToggleButton>
+      <ToggleButton
+        $active={mode === 'advanced'}
+        aria-pressed={mode === 'advanced'}
+        aria-label="Advanced mode"
+        onClick={() => setMode('advanced')}
+        type="button"
+      >
+        Advanced
+      </ToggleButton>
+    </ToggleWrapper>
+  )
+}

packages/app/src/library/Help/index.tsx

@@ -73,6 +73,9 @@ export const Help = () => {
 
   let definitions = meta?.definitions ?? []
 
+  // TODO: Integrate easy/advanced mode content from other PR
+  // When ready, use useUi() to get advancedMode and filter definitions accordingly
+
   const activeDefinitions = definitions
     .filter((d) => d !== definition)
     .map((d) => {

packages/app/src/library/SideMenu/AdvancedModeToggle.tsx

@@ -0,0 +1,144 @@
+// Copyright 2025 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import {
+  faChartLine,
+  faSlidersH,
+  faToggleOff,
+  faToggleOn,
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useUi } from 'contexts/UI'
+import type { UIContextInterface } from 'contexts/UI/types'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+const ToggleContainer = styled.div`
+  position: relative;
+  margin-top: auto;
+  padding: 0;
+  width: 100%;
+`
+
+const MinimizedToggle = styled.div<{ $active: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.15s;
+  padding: 0.75rem;
+  margin: 0.5rem 0;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 0.75rem;
+  background: ${({ $active }) =>
+    $active ? 'var(--button-secondary-background)' : 'transparent'};
+
+  &:hover {
+    background: var(--button-secondary-background);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+`
+
+const ToggleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.15s;
+  padding: 0.75rem 1rem;
+  margin: 0.5rem 0;
+  width: 100%;
+  box-sizing: border-box;
+  gap: 1.5rem;
+
+  &:active {
+    transform: scale(0.98);
+  }
+`
+
+const ToggleLabel = styled.div`
+  display: flex;
+  align-items: center;
+  font-family: InterSemiBold, sans-serif;
+  color: var(--text-color-secondary);
+  font-size: 1.1rem;
+
+  .icon {
+    width: 1.2rem;
+    height: 1.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0.75rem;
+    min-width: 1.2rem;
+    flex-shrink: 0;
+  }
+`
+
+export const AdvancedModeToggle = ({ minimised }: { minimised: boolean }) => {
+  const { t } = useTranslation('app')
+  const { advancedMode, setAdvancedMode }: UIContextInterface = useUi()
+
+  const toggleAdvancedMode = () => {
+    setAdvancedMode(!advancedMode)
+  }
+
+  // If the sidebar is minimized, show a compact version
+  if (minimised) {
+    return (
+      <ToggleContainer>
+        <MinimizedToggle
+          onClick={toggleAdvancedMode}
+          role="switch"
+          aria-checked={advancedMode}
+          aria-label={t('advanced')}
+          $active={advancedMode}
+        >
+          <FontAwesomeIcon
+            icon={faChartLine}
+            color={
+              advancedMode
+                ? 'var(--accent-color-primary)'
+                : 'var(--text-color-tertiary)'
+            }
+            transform="grow-2"
+          />
+        </MinimizedToggle>
+      </ToggleContainer>
+    )
+  }
+
+  return (
+    <ToggleContainer>
+      <ToggleWrapper
+        onClick={toggleAdvancedMode}
+        role="switch"
+        aria-checked={advancedMode}
+        aria-label={t('advanced')}
+      >
+        <ToggleLabel>
+          <span className="icon" style={{ color: 'var(--text-color-primary)' }}>
+            <FontAwesomeIcon icon={faSlidersH} />
+          </span>
+          {t('advanced')}
+        </ToggleLabel>
+        <FontAwesomeIcon
+          icon={advancedMode ? faToggleOn : faToggleOff}
+          color={
+            advancedMode
+              ? 'var(--accent-color-primary)'
+              : 'var(--text-color-tertiary)'
+          }
+          transform="grow-12"
+          style={{ marginTop: '1px' }}
+        />
+      </ToggleWrapper>
+    </ToggleContainer>
+  )
+}

packages/app/src/library/SideMenu/Main.tsx

@@ -90,29 +90,47 @@ export const Main = () => {
   return (
     <>
       {pageConfig.categories.map(
-        ({ id: categoryId, key: categoryKey }: PageCategory) => (
-          <div className="inner" key={`sidemenu_category_${categoryId}`}>
-            {categoryKey !== 'default' && (
-              <Heading title={t(categoryKey)} minimised={sideMenuMinimised} />
-            )}
-            {pagesToDisplay.map(
-              ({ category, hash, key, lottie, bullet }: PageItem) => (
-                <Fragment key={`sidemenu_page_${categoryId}_${key}`}>
-                  {category === categoryId && (
-                    <Primary
-                      name={t(key)}
-                      to={hash}
-                      active={hash === pathname}
-                      lottie={lottie}
-                      bullet={bullet}
-                      minimised={sideMenuMinimised}
-                    />
-                  )}
-                </Fragment>
-              )
-            )}
-          </div>
-        )
+        ({ id: categoryId, key: categoryKey }: PageCategory) => {
+          // In Easy mode (advancedMode is false), show default category (Home) and stake category for Rewards
+          if (
+            !advancedMode &&
+            categoryKey !== 'default' &&
+            categoryKey !== 'stake'
+          ) {
+            return null
+          }
+
+          return (
+            <div className="inner" key={`sidemenu_category_${categoryId}`}>
+              {categoryKey !== 'default' && advancedMode && (
+                <Heading title={t(categoryKey)} minimised={sideMenuMinimised} />
+              )}
+              {pagesToDisplay.map(
+                ({ category, hash, key, lottie, bullet }: PageItem) => {
+                  // In Easy mode, only show the Home page and Rewards page
+                  if (!advancedMode && key !== 'home' && key !== 'rewards') {
+                    return null
+                  }
+
+                  return (
+                    <Fragment key={`sidemenu_page_${categoryId}_${key}`}>
+                      {category === categoryId && (
+                        <Primary
+                          name={t(key)}
+                          to={hash}
+                          active={hash === pathname}
+                          lottie={lottie}
+                          bullet={bullet}
+                          minimised={sideMenuMinimised}
+                        />
+                      )}
+                    </Fragment>
+                  )
+                }
+              )}
+            </div>
+          )
+        }
       )}
     </>
   )