Frontend Routing & Layouts
Relevant source files
The following files were used as context for generating this wiki page:
Archivum utilizes a React-based frontend built with Vite and managed via react-router-dom for navigation and routing. The system is designed around a core three-panel layout to facilitate a seamless knowledge management experience, allowing users to move between a file explorer, a central markdown editor, and contextual sidebars.
The routing architecture distinguishes between public-facing pages (e.g., shared wiki links) and protected application routes that require authentication. This ensures that while individual pages can be shared with the public, the core wiki management and ingestion features remain restricted to authenticated owners and collaborators.
Sources: archivum-prd-v1.0.md:845-853, apps/frontend/src/App.tsx:96-104
Routing Architecture
The routing system is split into two primary layers: high-level AppRoutes and conditional ProtectedRoutes. Public routes handle login and shareable content, while protected routes manage the library, wiki editor, and various "Life OS" workflows.
Public and Shared Routes
Unauthenticated users can access the login page and specific share tokens. Share links provide a read-only view of a page or query result, often served through a specialized renderer to prevent access to administrative features.
| Path | Component | Description |
|---|---|---|
/login | LoginPage | Authentication entry point. |
/share/:token | SharePage | Access to unguessable token-gated shared pages/queries. |
/public | PublicWikiPage | Entry point for the world-readable public wiki mode. |
/public/wiki/* | PublicWikiPage | Dynamic routing for individual public wiki pages using slugs. |
Sources: apps/frontend/src/App.tsx:96-104, apps/frontend/src/pages/PublicWikiPage.tsx:36-40, archivum-prd-v1.0.md:738-745
Protected Routing Logic
The ProtectedRoutes component handles session refreshing and page list fetching. If the session is invalid, the user is redirected to /login. Upon successful authentication, the root path / automatically redirects to the first available wiki page or the library.
Sources: apps/frontend/src/App.tsx:16-56
Layout & Workspace Structure
The application employs a standard three-panel workspace to maximize productivity and context awareness during research and editing.
The Three-Panel Layout
The core layout consists of a collapsible file sidebar, a main content area (the editor or active view), and a right-hand context panel for backlinks or metadata.
- File Sidebar: A collapsible tree for navigating the wiki hierarchy.
- Active View: The central area housing the CodeMirror 6 editor, graph view, or search results.
- Context Panel: Displays backlinks, AI-interaction logs, or specific note actions.
Sources: archivum-prd-v1.0.md:845-853, apps/frontend/src/components/NotesInteractionPanel.tsx:112-117
Navigation Groups
The layout includes grouped navigation for different functional areas of the "Life OS" implementation:
- Library: Core wiki and note access.
- Workflows: Specialized pages for Daily notes, Projects, Tasks, and Decisions.
- Tools: System utilities like the Knowledge Graph, Ingest panel, Linting, and Settings.
Sources: apps/frontend/src/life-pages.test.tsx:21-35, apps/frontend/src/App.tsx:71-80
Wiki Page Routing & Slugs
Wiki pages are routed using a wildcard slug system (/wiki/*). This allows for nested structures or complex identifiers.
Page Initialization
When a user navigates to a specific slug, the WikiPage component triggers several actions:
- State Synchronization: The current slug is set in the global store.
- Data Fetching: The component calls
getPage(slug)to retrieve markdown content, title, and tags. - Draft Initialization: Local state handles title and tag "drafts" to allow for auto-saving without immediate global re-renders.
Sources: apps/frontend/src/pages/WikiPage.tsx:49-65, apps/frontend/src/App.tsx:67-70
Public Wiki View
The PublicWikiPage component provides an alternative layout for unauthenticated external viewing. It features a simplified sidebar listing public summaries and an article view that renders sanitized HTML from markdown.
Routing and State Interaction
Routing is tightly coupled with the application's Redux-style store. Navigating to a page updates the currentSlug, which in turn informs components like the NotesInteractionPanel to highlight the active note.
| Interaction | Trigger | Result |
|---|---|---|
| Page Delete | handleDelete in WikiPage | Deletes page, updates store, and navigates to the next available page or /ingest. |
| Search Selection | Click "Open" in NotesInteractionPanel | Triggers navigate('/wiki/${slug}') and updates active status. |
| Link Click | wikilinkExtension in Editor | Detects [[slug]] clicks and navigates to the target page within the application. |
Sources: apps/frontend/src/pages/WikiPage.tsx:109-125, apps/frontend/src/components/NotesInteractionPanel.tsx:59-71, apps/frontend/src/components/Editor/Editor.tsx:82-84
Summary
Frontend Routing & Layouts in Archivum provide a robust framework for both private knowledge management and public sharing. By utilizing react-router-dom wildcards and a structured three-panel layout, the system ensures that complex wiki structures remain navigable while maintaining clear boundaries between authenticated workspaces and shared content.