Phase 5: Update modals and hamburger menus with ASCII frames

## Hamburger Menu Updates
- Ticket page menu: Added ascii-subsection-header and ascii-frame-inner wrapper
- Dashboard menu: Added ascii-subsection-header and dashboard-filters wrapper
- Maintains all inline editing functionality for ticket fields
- Preserves all filter checkbox functionality for dashboard

## Settings Modal Enhancement
- Wrapped in ascii-frame-outer with ╚╝ bottom corners
- Added ascii-section-header for title
- Nested content in ascii-content → ascii-frame-inner
- Added ascii-divider before footer
- Moved close button to footer for better layout

## Bulk Operations Modals
- Bulk Assign Modal: Full ASCII frame structure with nested sections
- Bulk Priority Modal: Full ASCII frame structure with nested sections
- Both modals now have:
  * ascii-frame-outer with corner decorations
  * ascii-section-header for title
  * ascii-content and ascii-frame-inner for body
  * ascii-divider before footer
  * Consistent visual hierarchy with rest of app

## Code Quality
- All event handlers and functionality preserved
- No breaking changes to JavaScript logic
- Consistent frame structure across all dynamically generated UI
- All modals and menus now match the nested frame aesthetic

## Files Modified
- assets/js/dashboard.js: Updated 5 HTML generation functions
  * createHamburgerMenu() - ticket page version
  * createHamburgerMenu() - dashboard version
  * createSettingsModal()
  * showBulkAssignModal()
  * showBulkPriorityModal()

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

assets/js/dashboard.js

@@ -116,12 +116,14 @@ function createSettingsModal() {
     const backdrop = document.createElement('div');
     backdrop.className = 'settings-modal-backdrop';
     backdrop.innerHTML = `
-        <div class="settings-modal">
+        <div class="settings-modal ascii-frame-outer">
-            <div class="settings-modal-header">
+            <span class="bottom-left-corner">╚</span>
-                <h2>Dashboard Settings</h2>
+            <span class="bottom-right-corner">╝</span>
-                <button class="close-modal">×</button>
+
-            </div>
+            <div class="ascii-section-header">Dashboard Settings</div>
-            <div class="settings-modal-content">
+
+            <div class="ascii-content">
+                <div class="ascii-frame-inner">
                     <div class="setting-group">
                         <h3>Rows per Page</h3>
                         <select id="rows-per-page">
@@ -132,9 +134,16 @@ function createSettingsModal() {
                         </select>
                     </div>
                 </div>
+            </div>
+
+            <div class="ascii-divider"></div>
+
+            <div class="ascii-content">
                 <div class="settings-modal-footer">
                     <button class="save-settings">Save Settings</button>
                     <button class="cancel-settings">Cancel</button>
+                    <button class="close-modal">×</button>
+                </div>
             </div>
         </div>
     `;
@@ -387,7 +396,10 @@ function createHamburgerMenu() {
             <div class="hamburger-icon">☰</div>
             <div class="hamburger-content">
                 <div class="close-hamburger">☰</div>
-                <h3>Ticket Actions</h3>
+
+                <div class="ascii-subsection-header">Ticket Actions</div>
+
+                <div class="ascii-frame-inner">
                     <div class="ticket-info-editable">
                         <div class="editable-field" data-field="priority">
                             <label><strong>Priority:</strong></label>
@@ -442,6 +454,7 @@ function createHamburgerMenu() {
                         </div>
                     </div>
                 </div>
+            </div>
         `;
         
         console.log('Ticket hamburger menu HTML created');
@@ -456,7 +469,11 @@ function createHamburgerMenu() {
             <div class="hamburger-icon">☰</div>
             <div class="hamburger-content">
                 <div class="close-hamburger">☰</div>
-                <h3>Filters</h3>
+
+                <div class="ascii-subsection-header">Filters</div>
+
+                <div class="ascii-frame-inner">
+                    <div class="dashboard-filters">
                         <div class="filter-section">
                             <h4>Categories</h4>
                             <div id="category-filters"></div>
@@ -470,6 +487,8 @@ function createHamburgerMenu() {
                             <button id="clear-filters">Clear Filters</button>
                         </div>
                     </div>
+                </div>
+            </div>
         `;
 
         // Get current URL parameters
@@ -971,8 +990,14 @@ function showBulkAssignModal() {
     // Create modal HTML
     const modalHtml = `
         <div class="modal-overlay" id="bulkAssignModal">
-            <div class="modal-content">
+            <div class="modal-content ascii-frame-outer">
-                <h3>Assign ${ticketIds.length} Ticket(s)</h3>
+                <span class="bottom-left-corner">╚</span>
+                <span class="bottom-right-corner">╝</span>
+
+                <div class="ascii-section-header">Assign ${ticketIds.length} Ticket(s)</div>
+
+                <div class="ascii-content">
+                    <div class="ascii-frame-inner">
                         <div class="modal-body">
                             <label for="bulkAssignUser">Assign to:</label>
                             <select id="bulkAssignUser" class="editable">
@@ -980,12 +1005,19 @@ function showBulkAssignModal() {
                                 <!-- Users will be loaded dynamically -->
                             </select>
                         </div>
+                    </div>
+                </div>
+
+                <div class="ascii-divider"></div>
+
+                <div class="ascii-content">
                     <div class="modal-footer">
                         <button onclick="performBulkAssign()" class="btn btn-bulk">Assign</button>
                         <button onclick="closeBulkAssignModal()" class="btn btn-secondary">Cancel</button>
                     </div>
                 </div>
             </div>
+        </div>
     `;
 
     document.body.insertAdjacentHTML('beforeend', modalHtml);
@@ -1060,8 +1092,14 @@ function showBulkPriorityModal() {
 
     const modalHtml = `
         <div class="modal-overlay" id="bulkPriorityModal">
-            <div class="modal-content">
+            <div class="modal-content ascii-frame-outer">
-                <h3>Change Priority for ${ticketIds.length} Ticket(s)</h3>
+                <span class="bottom-left-corner">╚</span>
+                <span class="bottom-right-corner">╝</span>
+
+                <div class="ascii-section-header">Change Priority for ${ticketIds.length} Ticket(s)</div>
+
+                <div class="ascii-content">
+                    <div class="ascii-frame-inner">
                         <div class="modal-body">
                             <label for="bulkPriority">Priority:</label>
                             <select id="bulkPriority" class="editable">
@@ -1073,12 +1111,19 @@ function showBulkPriorityModal() {
                                 <option value="5">P5 - Minimal Impact</option>
                             </select>
                         </div>
+                    </div>
+                </div>
+
+                <div class="ascii-divider"></div>
+
+                <div class="ascii-content">
                     <div class="modal-footer">
                         <button onclick="performBulkPriority()" class="btn btn-bulk">Update</button>
                         <button onclick="closeBulkPriorityModal()" class="btn btn-secondary">Cancel</button>
                     </div>
                 </div>
             </div>
+        </div>
     `;
 
     document.body.insertAdjacentHTML('beforeend', modalHtml);