This document describes the page components and routing architecture in the Memos frontend application. It covers the layout hierarchy, major page implementations, the navigation system, and responsive design patterns.
The application utilizes React Router's nested route structure. Layout components provide shared UI elements and context providers, while Outlet renders specific page components.
The router defines the following tree in web/src/router/index.tsx42-122 It incorporates several route guards: RequireAuthRoute, RequireGuestRoute, and RequireInstanceInitializationRoute.
Route Constants
Routes are centralized in web/src/router/routes.ts and referenced via the ROUTES object.
| Route Constant | Path | Purpose |
|---|---|---|
Routes.AUTH | /auth | Authentication entry point web/src/router/index.tsx49 |
Routes.HOME | / | Primary memo feed (formerly /home) web/src/router/index.tsx71-80 |
Routes.EXPLORE | /explore | Discovery for public/protected memos web/src/router/index.tsx86 |
Routes.ARCHIVED | /archived | View and restore archived memos web/src/router/index.tsx91 |
Routes.ATTACHMENTS | /attachments | Resource library management web/src/router/index.tsx108 |
Routes.INBOX | /inbox | User notifications and mentions web/src/router/index.tsx109 |
Routes.SETTING | /setting | User and Instance configuration web/src/router/index.tsx110 |
Sources: web/src/router/index.tsx42-122 web/src/router/routes.ts1-20
The Navigation component web/src/components/Navigation.tsx26 handles site-wide links. It adapts dynamically based on the user's role and authentication status.
NavLink for active state styling web/src/components/Navigation.tsx103-133useNotifications and displays a badge web/src/components/Navigation.tsx31-69UserMenu component at the bottom for account actions web/src/components/Navigation.tsx136-140The application uses a "Mobile-First" strategy via Tailwind and the useMediaQuery hook web/src/hooks/useMediaQuery.ts
RootLayout when screen width is above the sm breakpoint web/src/layouts/RootLayout.tsx61-71MobileHeader component web/src/components/MobileHeader.tsx11 provides a NavigationDrawer on small screens web/src/components/MobileHeader.tsx40MemoDetail, a sidebar is persistent on desktop (md breakpoint) but converts to a drawer on mobile web/src/pages/MemoDetail.tsx100-147Sources: web/src/components/Navigation.tsx26-145 web/src/layouts/RootLayout.tsx60-78 web/src/components/MobileHeader.tsx30-46
The default landing page for authenticated users web/src/pages/Home.tsx14
NewMemoProvider web/src/pages/Home.tsx33 to handle immediate UI updates of new memos.useMemoFilters to scope memos to creatorName: user?.name web/src/pages/Home.tsx20-24MemoEditor into the renderLeading slot of PagedMemoList web/src/pages/Home.tsx41-48A public-facing feed for discovery web/src/pages/Explore.tsx8
Visibility.PUBLIC and Visibility.PROTECTED for logged-in users, and only Visibility.PUBLIC for guests web/src/pages/Explore.tsx11-15Displays a user's identity and their publicly shared memos web/src/pages/UserProfile.tsx49
useSearchParams to toggle between "memos" and "map" views web/src/pages/UserProfile.tsx52-83UserMemoMap to optimize bundle size web/src/pages/UserProfile.tsx20-127A deep-linkable page for a single memo web/src/pages/MemoDetail.tsx20
useMemo for standard access and useSharedMemo for token-based public sharing web/src/pages/MemoDetail.tsx33-44withShareAttachmentLinks to append share tokens to attachment URLs, enabling unauthorized resource access web/src/pages/MemoDetail.tsx89-92The configuration hub web/src/pages/Setting.tsx21
component defined in SETTINGS_SECTIONS based on the URL hash web/src/pages/Setting.tsx42-70Sources: web/src/pages/Home.tsx14-53 web/src/pages/Explore.tsx8-39 web/src/pages/UserProfile.tsx49-140 web/src/pages/MemoDetail.tsx20-152 web/src/pages/Setting.tsx21-130
The standard component for all memo feeds web/src/components/PagedMemoList/PagedMemoList.tsx114
useAutoFetchWhenNotScrollable: Ensures that if the first page of memos is too short to create a scrollbar, the next page is automatically fetched web/src/components/PagedMemoList/PagedMemoList.tsx50-112getMemoKey: Generates a unique key using name and updateTime to ensure UI refreshes on edit web/src/components/PagedMemoList/PagedMemoList.tsx25hoistMemoToFront: A utility that ensures a newly created memo (identified by newMemoName) appears at the top of the list regardless of sort order until a refresh occurs web/src/components/PagedMemoList/PagedMemoList.tsx168-171Sources: web/src/components/PagedMemoList/PagedMemoList.tsx25-171 web/src/hooks/useMemoQueries.ts1-100
Refresh this wiki
This wiki was recently refreshed. Please wait 6 days to refresh again.