discord-rpg-concept/tickets/2026-01-07-move-status-to-footer.md

2026-01-07-move-status-to-footer

Status: Done Created: 2026-01-07 Tags: ui, layout, enhancement

1. Context & User Story

• As a: User of the Web Interface
• I want to: see the system status and uptime information in the footer of every page
• So that: the main content area is less cluttered and status information is globally available.

2. Technical Requirements

Data Model Changes

• N/A

API / Interface

• Home Page: Remove the "Status" card from the main content.
• Layout: Update BaseLayout (or layout.ts) to accept or calculate uptime/status information and render it in the <footer>.

3. Constraints & Validations (CRITICAL)

• Visuals: The footer should remain clean and not be overcrowded.
• Functionality: The existing client-side uptime counter (via #uptime-display in script.js) must continue to work. Ensure the ID or data attributes it relies on are preserved in the new location.

4. Acceptance Criteria

1. The "Status" card is removed from the Home page content.
2. The Footer displays "System Operational" and the running Uptime counter.
3. navigation to other pages (if any) still shows the status in the footer.

5. Implementation Plan

• Edit src/web/routes/home.ts to remove the Status card.
• Edit src/web/views/layout.ts to add the Status HTML structure to the footer.
• Verify script.js selector targets the new element correctly.

Implementation Notes

• Moved Status/Uptime logic from home.ts to layout.ts (footer).
• Calculated server-side uptime for initial rendering to prevent flash.
• Preserved id="uptime-display" and data-start-timestamp for script.js compatibility.
• Updated tests to verify uptime presence in global layout.