[Feature] Complete UI Overhaul and Bootstrap 5.3 Migration

[chrismaddalena]

Summary

Modernize Ghostwriter’s interface with a consistent Bootstrap 5.3-based design system, refreshed application shell, improved navigation, updated forms and tables, and modernized rich-text editing workflows.

This work is implemented primarily in the feature/ui-refresh branch, with limited backend changes where required to support the new UI behavior.

Goals

• Establish a consistent, accessible, theme-aware visual language.
• Upgrade the interface from Bootstrap 4 to Bootstrap 5.3.
• Improve navigation between clients, projects, reports, findings, observations, infrastructure, and operational logs.
• Make working-report context clear and reliable.
• Modernize forms, tables, tabs, filters, modals, dashboards, and status controls.
• Replace legacy TinyMCE-based workflows with the packaged Tiptap editor stack.
• Preserve existing permissions, collaboration, sorting, filtering, reporting, and export behavior.

Scope

Application shell and navigation

• Add the refreshed sidebar and working-context bar.
• Support customizable sidebar sections, pinned work, active engagement context, and working-report switching.
• Improve narrow-window behavior, keyboard navigation, screen-reader labeling, and theme support.
• Add user workspace/sidebar preferences and supporting migrations.

Bootstrap and design system

• Upgrade to Bootstrap 5.3.8.
• Add shared semantic design tokens and reusable components.
• Refresh light and dark themes.
• Standardize cards, tables, tabs, tags, badges, buttons, forms, alerts, empty states, and modals.
• Remove obsolete Bootstrap 4 and legacy UI assets where appropriate.

Refreshed workflows

Update the primary presentation and interaction patterns for:

• Dashboard and management pages
• Clients and projects
• Reports and report templates
• Findings and observations
• Evidence and extra fields
• Domains, servers, VPS records, and checkouts
• Operation logs and imports
• User profiles, tokens, credentials, and administration
• Health/status pages

Reporting and collaboration

• Modernize report, finding, and observation editors.
• Improve collaborative editor connection/status messaging.
• Preserve WebSocket collaboration behavior and report synchronization.
• Improve CVSS and severity presentation.
• Add consistent report status, delivery status, target-date warnings, and toggle controls.
• Ensure delivering an incomplete report also marks it complete.
• Ensure read-only project users cannot select reports they cannot edit as working reports.

Forms and data presentation

• Improve field spacing, labels, help text, placeholders, and dark-theme readability.
• Add consistent extra-field count badges to tabs.
• Hide empty tag values instead of displaying None.
• Use neutral styling for metadata/type pills.
• Align severity pills with configured severity colors.
• Render CVSS vectors in a code-style format.
• Improve archive, delete, revoke, sanitize, and token-management modals.

Security and platform groundwork

• Add the report-only Content Security Policy baseline and supporting configuration.
• Preserve existing XSS protections for JavaScript, HTML, autocomplete, rich text, and modal content.
• Keep offline deployments fully supported by packaging frontend dependencies locally.

Acceptance criteria

Updated acceptance criteria status:

• Application runs with Bootstrap 5.3.8.
• Refreshed pages use shared design-system tokens and components.
• Light/dark themes manually reviewed across all major workflows.
• Sidebar navigation, working context, pinned work, and report switching work correctly.
• Users only see working reports they can edit.
• Read-only users cannot select reports that later return 403.
• Report status and delivery controls stay synchronized.
• Delivering an incomplete report marks it complete.
• Target due-date styling reflects delivery and urgency states.
• Extra Fields tabs consistently display counts.
• Empty tag cells remain blank.
• Finding types use neutral metadata styling.
• Finding severities use the configured severity-color scale.
• CVSS vectors use readable, wrap-safe code styling.
• Tiptap compatibility and form submission behavior are preserved.
• Existing permissions, filtering, sorting, drag-and-drop, report generation, and collaboration behavior are preserved.
• Report-only CSP headers are implemented.
• Django tests, migrations, system checks, frontend type checks, compatibility tests, and production builds pass.

Out of scope

• Enforcing a blocking CSP policy across all pages.
• Replacing the remaining Django/jQuery architecture with a full SPA.
• Redesigning collaborative persistence or conflict resolution.
• Changing report-generation formats or business rules beyond UI-required behavior.

Verification

Validation should include:

docker compose -f local.yml run --rm django python manage.py test --exclude-tag=GitHub
cd javascript && npm run check
cd javascript && npm run test:html-compatibility
cd javascript && npm run build-frontend-prod

Also perform a manual light/dark-theme review of the dashboard, client/project details, report details, findings/observations libraries, forms, editors, sidebar, working-context switcher, and narrow desktop windows.