feat: explore (#85)

src/PageManager.tsx

@@ -14,6 +14,7 @@ import {
   useEffect,
   useState
 } from 'react'
+import ExplorePage from './pages/primary/ExplorePage'
 import MePage from './pages/primary/MePage'
 import NotificationListPage from './pages/primary/NotificationListPage'
 import { useScreenSize } from './providers/ScreenSizeProvider'
@@ -41,12 +42,14 @@ type TStackItem = {
 
 const PRIMARY_PAGE_REF_MAP = {
   home: createRef<TPageRef>(),
+  explore: createRef<TPageRef>(),
   notifications: createRef<TPageRef>(),
   me: createRef<TPageRef>()
 }
 
 const PRIMARY_PAGE_MAP = {
   home: <NoteListPage ref={PRIMARY_PAGE_REF_MAP.home} />,
+  explore: <ExplorePage ref={PRIMARY_PAGE_REF_MAP.explore} />,
   notifications: <NotificationListPage ref={PRIMARY_PAGE_REF_MAP.notifications} />,
   me: <MePage ref={PRIMARY_PAGE_REF_MAP.me} />
 }
@@ -283,18 +286,17 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
               <Separator orientation="vertical" className="z-50" />
             </div>
             <div>
-              {secondaryStack.length ? (
-                secondaryStack.map((item, index) => (
-                  <div
-                    key={item.index}
-                    style={{ display: index === secondaryStack.length - 1 ? 'block' : 'none' }}
-                  >
-                    {item.component}
-                  </div>
-                ))
-              ) : (
+              {secondaryStack.map((item, index) => (
+                <div
+                  key={item.index}
+                  style={{ display: index === secondaryStack.length - 1 ? 'block' : 'none' }}
+                >
+                  {item.component}
+                </div>
+              ))}
+              <div key="home" style={{ display: secondaryStack.length === 0 ? 'block' : 'none' }}>
                 <HomePage />
-              )}
+              </div>
             </div>
           </div>
         </div>