Documentation

The docs now include dark mode, the sidebar on mobile and a expanded
ticket lifecycle

README.md

@@ -248,6 +248,10 @@ classDiagram
     class SidebarShellProps {
         +children: Children
     }
+    class SidebarComponentProps {
+        +is_open: bool
+        +on_close: Callback~()~
+    }
     class AdminCheckWrapperProps {
         +children: Children
     }
@@ -255,6 +259,7 @@ classDiagram
     RoomTotalsProps --> TicketPartial
     UserTotalProps --> UserPartial
     UserTotalProps --> TicketPartial
+    SidebarShellProps ..> SidebarComponentProps
 
 ```
 
@@ -351,6 +356,15 @@ sequenceDiagram
     DB-->>BE: Success
     BE-->>FE: HTTP 200 OK {"status": "success"}
     FE-->>Admin: Update ticket status in UI
+
+    Note over Admin, DB: Ticket Archiving Flow (Admin Only Route)
+    Admin->>FE: Open Archived Tickets page
+    FE->>BE: GET /api/tickets/archive (Includes 'token' cookie)
+    Note over BE: validate_admin middleware verifies token & admin role
+    BE->>DB: SELECT * FROM tickets WHERE status = 'Archived'
+    DB-->>BE: Return archived tickets
+    BE-->>FE: HTTP 200 OK [Archived Tickets]
+    FE-->>Admin: Render historical archive board
 ```
 
 ## Usage of AI

frontend/src/dark_mode.rs

@@ -2,6 +2,15 @@ use gloo_storage::{LocalStorage, Storage};
 use web_sys::window;
 use yew::prelude::*;
 
+/// A persistent, floating toggle button to switch the user interface theme between Dark Mode and Light Mode.
+///
+/// # Functionality
+/// 1. **System Preference Check**: If the user hasn't explicitly set a preference, detects the operating system theme 
+///    preference using browser `match_media("(prefers-color-scheme: dark)")` query.
+/// 2. **Session Persistence**: Caches the selected theme choice under the `"dark-mode"` key in the browser's `LocalStorage` 
+///    so that user preferences persist across page reloads.
+/// 3. **Dynamic Style Swapping**: Injects or removes the `.theme-dark` / `.theme-light` classes directly on the document 
+///    `body` element, triggering the theme change via globally defined CSS variables.
 #[function_component(DarkModeToggle)]
 pub fn dark_mode_toggle() -> Html {
     // 1. Initialize state from LocalStorage or system preference

frontend/src/lib.rs

@@ -70,8 +70,15 @@ pub struct SidebarShellProps {
 /// This component is designed to wrap page-specific content, ensuring that the sidebar
 /// is always present for navigation. Integrates with [`crate::pages::sidebar::Sidebar`] for navigation.
 ///
+/// # Mobile Support
+/// On mobile displays, the sidebar is hidden by default and can be toggled:
+/// - **Menu Toggle Button**: Renders a floating menu button to slide the sidebar open.
+/// - **Dark Mode Toggle**: Floating button to change theme.
+/// - **Overlay Backdrop**: Dims the screen when the sidebar is open. Clicking it closes the sidebar.
+/// - **Auto-Close on Navigation**: Automatically closes the sidebar when navigating to a new route.
+///
 /// # Components
-/// - [`crate::pages::sidebar::Sidebar`]: The navigation sidebar component.
+/// - [`crate::pages::sidebar::Sidebar`]: The navigation sidebar component, accepting mobile open state.
 /// - Main content area: Renders the `children` passed to this component.
 ///
 /// # Example

frontend/src/pages/sidebar.rs

@@ -319,6 +319,11 @@ pub fn users_menu() -> Html {
 /// and administrative status. It fetches the current user's details via `/api/users/current`
 /// to determine what menu items to display.
 ///
+/// # Mobile Support
+/// On small screens:
+/// - Slides into view from the left when `props.is_open` is `true`.
+/// - Renders a close button (`✕`) in the header that emits `props.on_close`.
+///
 /// # Structure
 /// - Wraps its content in a [`SidebarStateProvider`] to allow nested menus to manage their state.
 /// - Contains a navigation (`<nav>`) element with an unordered list (`<ul>`) of menu items.
@@ -337,10 +342,16 @@ pub fn users_menu() -> Html {
 /// # Logout Functionality
 /// The "Logout" button sends a GET request to `/api/logout`, clears the user's session,
 /// and then redirects the user to the login page (`crate::Route::Login`).
+/// Properties for the [`Sidebar`] component.
+///
+/// These properties enable managing and controlling the responsive mobile sidebar
+/// layout and its visibility settings.
 #[derive(Properties, PartialEq)]
 pub struct SidebarComponentProps {
+    /// A boolean flag indicating whether the mobile sidebar is currently slid open (`true`) or hidden (`false`).
     #[prop_or_default]
     pub is_open: bool,
+    /// A callback emitted when the user requests to close/hide the mobile sidebar.
     #[prop_or_default]
     pub on_close: Callback<()>,
 }