Codebase Health: Build Cleanup, Dark Theme System, and 7 UI Fixes

A housekeeping session that tackled three related problems: an unreadable build output, recurring dark-theme colour bugs, and seven specific UI issues across the forum, messenger, and user tasks pages. The build went from 821 warning lines to a clean output, and a colour system was created to prevent the theme bugs from recurring.

Vite Build Cleanup

The Problem

Running npm run build in the admin project produced 821 lines of warnings. The build succeeded every time, but the wall of output made it impossible to spot a genuine error if one appeared.

Root Cause

The admin site is a hybrid -- some pages have been converted to the Vite/ES module pattern (data-page-module), while others still use the original template's <script> tags for jQuery, Bootstrap, and demo JS. Vite correctly warns about every <script> tag it cannot bundle, which is 5+ warnings per unconverted page across 60+ pages.

What Was Done

16 HTML pages cleaned: Pages that had been converted to data-page-module but still carried leftover demo <script> tags in their {{> script pageJs='...'}} block had those references removed. The demo scripts (page-data-management.demo.js, dashboard.demo.js, sidebar-scrollspy.demo.js, pos-customer-order.demo.js, page-scrum-board.demo.js, etc.) were template placeholders doing nothing on converted pages.

Pages with legitimate plugin scripts left alone: Profile (summernote, blueimp-file-upload, lity), gallery (photoswipe), calendar (fullcalendar), billing/analytics (apexcharts, chart.js) -- these pages actively use those libraries and the script tags must stay until the plugins are migrated to ES module imports.

Vite customLogger filter added: Three categories of known harmless warnings are now suppressed at the Vite logger level:

• "can't be bundled without type=module" -- global plugins from the shared partial
• "didn't resolve at build time" -- runtime API URLs and template demo images
• "doesn't exist at build time" -- CSS files that load at runtime from static mounts

Real warnings and errors pass through unfiltered.

Result

Build output went from 821 lines to just the build progress, file manifest, and any genuine warnings. The only remaining warning is about large chunk sizes (pdfmake at 1.3MB) which is a real, useful warning.

Dark Theme Colour System

The Problem

The site uses a dark theme, but bugs kept appearing where elements were invisible (white text on white background, white dropdowns, light-coloured badges washed out). Each time one was fixed, a similar bug appeared elsewhere because there was no documented standard for which colours to use.

What Was Built

Approved colour palette: Eight badge/tag colour combinations (success, danger, warning, info, teal, purple, pink, neutral) tested and documented with exact RGB values for background, border, and text.

Live showcase page: The page_inventory page (Data Management in the sidebar) was repurposed as a visual colour reference. It renders all approved combinations, reaction badge styles, surface colours, and includes bad examples showing what NOT to do. Any agent or developer doing UI work can open this page and copy-paste the correct values.

Mandatory rules in task helper: The 00_task_helper_header.md now includes a "Dark Theme Colour Rules" section that every coding agent reads before starting work. It lists banned patterns (bg-white, text-dark, #fff, etc.) and provides the approved alternatives.

7 UI Bug Fixes

Bug	Page	Fix
Reply preview bar white-on-white	Forum	Replaced with rgba(255,255,255,0.06) surface
Reply preview bar white-on-white	Messenger	Same fix
Action buttons misaligned on right-side messages	Messenger	Corrected alignment for sent messages
Reaction emoji badges washed out	Messenger	Applied dark-safe badge colours with proper contrast
@mention autocomplete dropdown white	Forum	Dark background with light text
@mention autocomplete dropdown white	Messenger	Same fix
Context menu (right-click) white	Messenger	Dark surface colours
Project creation 400 error	User Tasks	Fixed inverted Content-Type condition in fetchJson()

All fixes use inline RGB values rather than Bootstrap utility classes, because the Bootstrap classes map to light-theme colours on this template.

Quick Reference

What	Where
Colour palette showcase	Data Management page (sidebar) or admin/src/js/pages/page_inventory.js
Colour rules	admin/tasks/helpers/00_task_helper_header.md → Dark Theme Colour Rules
Vite warning filter	admin/vite.config.js → customLogger
Cleaned HTML pages	16 pages in admin/src/html/ (demo script references removed)

-- Reginald