feat: Implement dramatic ANSI art terminal redesign - Phase 1-3
This commit implements the complete HTML restructuring with nested ASCII box-drawing architecture, providing heavy decorations, elaborate framing, and visual hierarchy through box-drawing characters (╔╗╚╝ ═══ ├┤ ┌┐└┘).
## Phase 1: CSS Foundation
- Added comprehensive nested ASCII frame system to dashboard.css
- Created .ascii-frame-outer class with heavy double borders (╔╗╚╝)
- Created .ascii-frame-inner class with single borders (┌┐)
- Added .ascii-section-header with ╠═══ decoration
- Added .ascii-subsection-header with ├─── decoration
- Added .ascii-divider with ╞═══╡ connectors
- Added .ascii-content wrapper class
- Implemented priority-based color variants (P1-P5) for all frames
## Phase 2: Dashboard Restructuring
- Wrapped entire dashboard in nested ASCII frames (ascii-frame-outer)
- Created 5 major vertical sections with elaborate headers:
* Dashboard Control Center (header + new ticket button)
* Search & Filter (search form + results)
* Table Controls (count + pagination + settings)
* Bulk Operations (admin-only, conditional)
* Ticket List (main table)
- Added ASCII dividers (╞═══╡) between all sections
- Nested each section in ascii-content > ascii-frame-inner
- Added ╚╝ bottom corner characters as separate elements
- Maintained all existing functionality (search, sort, filter, bulk ops)
## Phase 3: Ticket View Restructuring
- Wrapped ticket-container in nested ASCII frames
- Created 3 major vertical sections:
* Ticket Information (header + metadata)
* Content Sections (tab navigation)
* Content Display (tab content area)
- Added subsection headers (├───) for Description, Comments, Activity
- Nested comment form and comment list in separate sub-frames
- Added ASCII dividers between sections
- Updated ticket.css for nested frame compatibility:
* Removed border from .comments-section (frame handles it)
* Added corner decorations (┌┐) to individual comments
* Fixed padding/margin conflicts with nested structure
## Visual Impact
- Every major section now has elaborate ASCII box frames
- Section headers display as: ╠═══ SECTION NAME ═══╣
- Dividers show as: ╞═══════════════════════════╡
- 3+ levels of nesting creates strong visual hierarchy
- Heavy decorations (╔╗╚╝) for outer containers
- Light decorations (┌┐└┘) for inner sections
- All priority colors preserved and applied to frames
## Technical Details
- 229 lines added to dashboard.css (frame system)
- DashboardView.php: Complete HTML restructuring (lines 104-316)
- TicketView.php: Complete HTML restructuring (lines 148-334)
- ticket.css: Added 34 lines of compatibility rules
- All existing JavaScript event handlers preserved
- All PHP backend logic unchanged
- Zero breaking changes to functionality
## Files Modified
- assets/css/dashboard.css: +229 lines (frame system + priority variants)
- assets/css/ticket.css: +34 lines (compatibility rules)
- views/DashboardView.php: Restructured with nested frames
- views/TicketView.php: Restructured with nested frames
## Next Steps
- Phase 4: Restructure CreateTicketView.php
- Phase 5: Update hamburger menu & modals JavaScript
- Phase 6: Add responsive design breakpoints
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Jared Vititoe
aff2b92bea