fix: toast crash, notification dropdown, ticket detail editable, toolbar dropdowns

- Fix duplicate function showToast declaration causing infinite recursion
  (showToast declared twice → function hoisting → _origShowToast === self)
  Progress bar now inlined directly into _displayToast; Module 47 removed
- Notification bell now opens a proper dropdown panel with unread items,
  per-item click-to-read, "Mark all read", close on outside click/Esc
- Ticket detail drawer now has real editable fields (title, status,
  priority, assignee, description textarea, comment box) instead of
  read-only KV pairs; Save Changes and Post Comment buttons functional
- Advanced ▾ filter dropdown: status/priority/assignee selects + Apply/Reset
- Bulk Actions dropdown: Close/Reassign/Export/Delete with toast feedback
- Generic .lt-dropdown-trigger toggle system (works for any future dropdown)
- Add CSS sections 76 (notification panel) and 77 (dropdown widget + .lt-textarea)

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

base.css

@@ -4524,3 +4524,178 @@ body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s eas
   .lt-code-block { white-space: pre-wrap; word-break: break-all; }
   .lt-page-header { border-bottom: 2px solid #333; padding-bottom: 0.5rem; margin-bottom: 1rem; }
 }
+
+/* ----------------------------------------------------------------
+   76. NOTIFICATION DROPDOWN PANEL
+   ---------------------------------------------------------------- */
+.lt-notif-dropdown-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.lt-notif-panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  width: 300px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
+  z-index: 10020;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+  transform-origin: top right;
+  transform: scale(0.95);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.lt-notif-panel[aria-hidden="false"] {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+
+.lt-notif-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid var(--border-dim);
+  font-size: 0.72rem;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+.lt-notif-panel-clear {
+  background: none;
+  border: none;
+  color: var(--accent-cyan);
+  font-size: 0.68rem;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  padding: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.lt-notif-panel-clear:hover { text-decoration: underline; }
+
+.lt-notif-panel-list { max-height: 280px; overflow-y: auto; }
+
+.lt-notif-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid var(--border-dim);
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.lt-notif-item:hover { background: var(--bg-tertiary); }
+.lt-notif-item--unread { background: rgba(0, 212, 255, 0.04); }
+
+.lt-notif-dot {
+  flex-shrink: 0;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent-cyan);
+  margin-top: 4px;
+  box-shadow: 0 0 6px var(--accent-cyan);
+}
+.lt-notif-dot--read {
+  background: var(--border-color);
+  box-shadow: none;
+}
+
+.lt-notif-item-body { flex: 1; min-width: 0; }
+.lt-notif-item-title {
+  font-size: 0.76rem;
+  color: var(--text-primary);
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.lt-notif-item--unread .lt-notif-item-title { color: var(--text-primary); font-weight: 600; }
+.lt-notif-item-time {
+  font-size: 0.64rem;
+  color: var(--text-muted);
+  margin-top: 2px;
+  font-family: var(--font-mono);
+}
+
+.lt-notif-panel-footer {
+  padding: 0.5rem 0.75rem;
+  border-top: 1px solid var(--border-dim);
+}
+
+/* ----------------------------------------------------------------
+   77. GENERIC DROPDOWN WIDGET
+   ---------------------------------------------------------------- */
+.lt-dropdown-wrap {
+  position: relative;
+  display: inline-block;
+}
+
+.lt-dropdown-panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 160px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
+  z-index: 10020;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+  transform-origin: top left;
+  transform: scale(0.95);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.lt-dropdown-panel--right {
+  left: auto;
+  right: 0;
+  transform-origin: top right;
+}
+.lt-dropdown-panel[aria-hidden="false"] {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+
+.lt-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.85rem;
+  background: none;
+  border: none;
+  text-align: left;
+  font-size: 0.76rem;
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+  white-space: nowrap;
+}
+.lt-dropdown-item:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+.lt-dropdown-item--danger { color: var(--accent-red); }
+.lt-dropdown-item--danger:hover { background: rgba(255,45,85,0.1); color: var(--accent-red); }
+
+.lt-dropdown-divider {
+  height: 1px;
+  background: var(--border-dim);
+  margin: 0.25rem 0;
+}
+
+/* textarea utility */
+.lt-textarea {
+  min-height: 60px;
+  resize: vertical;
+  line-height: 1.5;
+}

base.html

@@ -117,10 +117,49 @@
       </div>
       <!-- Theme toggle -->
       <button class="lt-theme-btn" id="lt-theme-btn" aria-label="Switch to light mode" title="Switch to light mode">☀</button>
-      <!-- Notifications with badge -->
+      <!-- Notifications with badge + dropdown -->
-      <span class="lt-notif-wrap" id="lt-notif-bell" aria-label="Notifications">
+      <div class="lt-notif-dropdown-wrap" id="lt-notif-bell">
-        <button class="lt-btn lt-btn-sm" style="padding:0 0.5rem;min-height:32px;" aria-label="Open notifications">🔔</button>
+        <button class="lt-btn lt-btn-sm lt-notif-bell-btn" id="lt-notif-bell-btn" aria-label="Open notifications" aria-expanded="false" aria-haspopup="true" style="padding:0 0.5rem;min-height:32px;">🔔</button>
-      </span>
+        <div class="lt-notif-panel" id="lt-notif-panel" aria-hidden="true">
+          <div class="lt-notif-panel-header">
+            <span>Notifications</span>
+            <button class="lt-notif-panel-clear" id="lt-notif-clear-all">Mark all read</button>
+          </div>
+          <div class="lt-notif-panel-list">
+            <div class="lt-notif-item lt-notif-item--unread">
+              <span class="lt-notif-dot"></span>
+              <div class="lt-notif-item-body">
+                <div class="lt-notif-item-title">P1 alert: storage link-down</div>
+                <div class="lt-notif-item-time">5 min ago</div>
+              </div>
+            </div>
+            <div class="lt-notif-item lt-notif-item--unread">
+              <span class="lt-notif-dot"></span>
+              <div class="lt-notif-item-body">
+                <div class="lt-notif-item-title">Worker node-03 reconnected</div>
+                <div class="lt-notif-item-time">12 min ago</div>
+              </div>
+            </div>
+            <div class="lt-notif-item lt-notif-item--unread">
+              <span class="lt-notif-dot"></span>
+              <div class="lt-notif-item-body">
+                <div class="lt-notif-item-title">Export CSV complete — 42 rows</div>
+                <div class="lt-notif-item-time">1 hr ago</div>
+              </div>
+            </div>
+            <div class="lt-notif-item">
+              <span class="lt-notif-dot lt-notif-dot--read"></span>
+              <div class="lt-notif-item-body">
+                <div class="lt-notif-item-title">Scheduled maintenance completed</div>
+                <div class="lt-notif-item-time">3 hr ago</div>
+              </div>
+            </div>
+          </div>
+          <div class="lt-notif-panel-footer">
+            <button class="lt-btn lt-btn-sm lt-btn-ghost" style="width:100%;font-size:0.72rem">View all notifications</button>
+          </div>
+        </div>
+      </div>
       <!-- Current user -->
       <span class="lt-header-user">operator</span>
       <!-- Admin badge (only show for admins) -->
@@ -135,16 +174,64 @@
       <button class="lt-drawer-right-close" data-drawer-close aria-label="Close detail panel">✕</button>
     </div>
     <div class="lt-drawer-right-body">
-      <div class="lt-kv-grid">
+      <!-- Read-only meta row -->
+      <div class="lt-kv-grid" style="margin-bottom:1rem">
         <div class="lt-kv-row"><span class="lt-kv-label">ID</span><span class="lt-kv-value lt-text-cyan">#123456789</span></div>
-        <div class="lt-kv-row"><span class="lt-kv-label">Status</span><span class="lt-kv-value"><span class="lt-badge lt-badge-open">Open</span></span></div>
+        <div class="lt-kv-row"><span class="lt-kv-label">Created</span><span class="lt-kv-value lt-text-muted">2026-03-10 09:14 UTC</span></div>
-        <div class="lt-kv-row"><span class="lt-kv-label">Priority</span><span class="lt-kv-value"><span class="lt-badge lt-badge-p1">P1 Critical</span></span></div>
-        <div class="lt-kv-row"><span class="lt-kv-label">Assignee</span><span class="lt-kv-value" style="display:flex;align-items:center;gap:0.5rem"><span class="lt-avatar lt-avatar--sm lt-avatar--orange">JD</span>jdoe</span></div>
-        <div class="lt-kv-row"><span class="lt-kv-label">Created</span><span class="lt-kv-value">2026-03-10</span></div>
       </div>
-      <div class="lt-divider-label" style="margin:1rem 0">Description</div>
+
-      <p style="font-size:0.78rem;color:var(--text-secondary);line-height:1.6">Storage array link-down on compute-storage-01. Affects prod write path. Investigate RAID controller firmware.</p>
+      <!-- Editable fields -->
-      <div class="lt-divider-label" style="margin:1rem 0">Activity</div>
+      <div class="lt-form-group">
+        <label class="lt-label" for="td-title">Title</label>
+        <input id="td-title" class="lt-input" type="text" value="Storage array link-down on compute-storage-01">
+      </div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem">
+        <div class="lt-form-group">
+          <label class="lt-label" for="td-status">Status</label>
+          <select id="td-status" class="lt-select">
+            <option selected>Open</option>
+            <option>In Progress</option>
+            <option>Pending</option>
+            <option>Closed</option>
+          </select>
+        </div>
+        <div class="lt-form-group">
+          <label class="lt-label" for="td-priority">Priority</label>
+          <select id="td-priority" class="lt-select">
+            <option selected>P1 Critical</option>
+            <option>P2 High</option>
+            <option>P3 Medium</option>
+            <option>P4 Low</option>
+          </select>
+        </div>
+      </div>
+      <div class="lt-form-group">
+        <label class="lt-label" for="td-assignee">Assignee</label>
+        <select id="td-assignee" class="lt-select">
+          <option>Unassigned</option>
+          <option selected>jdoe</option>
+          <option>operator</option>
+          <option>admin</option>
+        </select>
+      </div>
+      <div class="lt-form-group">
+        <label class="lt-label" for="td-desc">Description</label>
+        <textarea id="td-desc" class="lt-input lt-textarea" rows="3" style="resize:vertical">Storage array link-down on compute-storage-01. Affects prod write path. Investigate RAID controller firmware.</textarea>
+      </div>
+
+      <!-- Add a comment -->
+      <div class="lt-divider-label" style="margin:1rem 0 0.75rem">Add Comment</div>
+      <div class="lt-form-group" style="margin-bottom:0.5rem">
+        <textarea id="td-comment" class="lt-input lt-textarea" rows="2" placeholder="Leave a comment…" style="resize:vertical"></textarea>
+      </div>
+      <button class="lt-btn lt-btn-sm" onclick="
+        const c=document.getElementById('td-comment');
+        if(c.value.trim()){lt.toast.success('Comment posted');c.value='';}
+        else lt.toast.warning('Comment is empty');
+      ">Post Comment</button>
+
+      <!-- Activity timeline -->
+      <div class="lt-divider-label" style="margin:1rem 0 0.75rem">Activity</div>
       <div class="lt-timeline">
         <div class="lt-timeline-item lt-timeline-item--orange">
           <div class="lt-timeline-meta"><span class="lt-timeline-actor">jdoe</span> assigned ticket<span class="lt-timeline-time">2h ago</span></div>
@@ -161,8 +248,8 @@
       </div>
     </div>
     <div class="lt-drawer-right-footer">
-      <button class="lt-btn lt-btn-sm" onclick="lt.rightDrawer.close('lt-detail-drawer')">Close</button>
+      <button class="lt-btn lt-btn-sm" onclick="lt.rightDrawer.close('lt-detail-drawer')">Cancel</button>
-      <button class="lt-btn lt-btn-primary lt-btn-sm">Save Changes</button>
+      <button class="lt-btn lt-btn-primary lt-btn-sm" onclick="lt.toast.success('Ticket #123456789 updated')">Save Changes</button>
     </div>
   </div>
   <div id="lt-detail-overlay" class="lt-drawer-right-overlay"></div>
@@ -293,14 +380,65 @@
         <div class="lt-toolbar">
           <div class="lt-toolbar-left">
             <div class="lt-search">
-              <input type="search" class="lt-input lt-search-input"
+              <input type="search" class="lt-input lt-search-input" id="ticket-search"
                      placeholder="Search tickets..." aria-label="Search">
             </div>
-            <button class="lt-btn lt-btn-sm">Advanced ▾</button>
+            <!-- Advanced filter dropdown -->
+            <div class="lt-dropdown-wrap" id="adv-filter-wrap">
+              <button class="lt-btn lt-btn-sm lt-dropdown-trigger" id="adv-filter-btn" aria-expanded="false" aria-haspopup="true">Advanced ▾</button>
+              <div class="lt-dropdown-panel" id="adv-filter-panel" aria-hidden="true">
+                <div style="padding:0.75rem;display:grid;gap:0.5rem;min-width:240px">
+                  <div class="lt-form-group" style="margin:0">
+                    <label class="lt-label" style="font-size:0.7rem">Status</label>
+                    <select class="lt-select" style="font-size:0.75rem">
+                      <option value="">All</option>
+                      <option>Open</option>
+                      <option>In Progress</option>
+                      <option>Pending</option>
+                      <option>Closed</option>
+                    </select>
+                  </div>
+                  <div class="lt-form-group" style="margin:0">
+                    <label class="lt-label" style="font-size:0.7rem">Priority</label>
+                    <select class="lt-select" style="font-size:0.75rem">
+                      <option value="">All</option>
+                      <option>P1 Critical</option>
+                      <option>P2 High</option>
+                      <option>P3 Medium</option>
+                      <option>P4 Low</option>
+                    </select>
+                  </div>
+                  <div class="lt-form-group" style="margin:0">
+                    <label class="lt-label" style="font-size:0.7rem">Assignee</label>
+                    <select class="lt-select" style="font-size:0.75rem">
+                      <option value="">Anyone</option>
+                      <option>Unassigned</option>
+                      <option>jdoe</option>
+                      <option>operator</option>
+                      <option>admin</option>
+                    </select>
+                  </div>
+                  <div style="display:flex;gap:0.5rem;margin-top:0.25rem">
+                    <button class="lt-btn lt-btn-sm lt-btn-primary" style="flex:1" onclick="lt.toast.info('Filters applied');document.getElementById('adv-filter-panel').setAttribute('aria-hidden','true');document.getElementById('adv-filter-btn').setAttribute('aria-expanded','false')">Apply</button>
+                    <button class="lt-btn lt-btn-sm lt-btn-ghost" onclick="lt.toast.info('Filters cleared')">Reset</button>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <div class="lt-toolbar-right">
-            <span class="lt-text-muted lt-text-xs">42 results</span>
+            <span class="lt-text-muted lt-text-xs" id="ticket-result-count">42 results</span>
-            <button class="lt-btn lt-btn-sm lt-btn-ghost">Bulk Actions</button>
+            <!-- Bulk actions dropdown -->
+            <div class="lt-dropdown-wrap" id="bulk-action-wrap">
+              <button class="lt-btn lt-btn-sm lt-btn-ghost lt-dropdown-trigger" id="bulk-action-btn" aria-expanded="false" aria-haspopup="true">Bulk Actions ▾</button>
+              <div class="lt-dropdown-panel lt-dropdown-panel--right" id="bulk-action-panel" aria-hidden="true">
+                <button class="lt-dropdown-item" onclick="lt.toast.success('Closed selected tickets');this.closest('.lt-dropdown-panel').setAttribute('aria-hidden','true')">✓ Close Selected</button>
+                <button class="lt-dropdown-item" onclick="lt.toast.info('Reassign dialog…');this.closest('.lt-dropdown-panel').setAttribute('aria-hidden','true')">↩ Reassign…</button>
+                <button class="lt-dropdown-item" onclick="lt.toast.info('Exporting selected…');this.closest('.lt-dropdown-panel').setAttribute('aria-hidden','true')">⤓ Export Selected</button>
+                <div class="lt-dropdown-divider"></div>
+                <button class="lt-dropdown-item lt-dropdown-item--danger" onclick="lt.toast.error('Deleted selected');this.closest('.lt-dropdown-panel').setAttribute('aria-hidden','true')">🗑 Delete Selected</button>
+              </div>
+            </div>
           </div>
         </div>
 
@@ -1721,6 +1859,86 @@ Storage array link-down on `compute-storage-01`.
       // Sidebar submenus (re-init for demo sidebar)
       lt.sidebarSubmenus.init(document.querySelector('.lt-section-body'));
 
+      // ----- Notification bell dropdown -----
+      (function() {
+        const btn   = document.getElementById('lt-notif-bell-btn');
+        const panel = document.getElementById('lt-notif-panel');
+        if (!btn || !panel) return;
+
+        function open() {
+          panel.setAttribute('aria-hidden', 'false');
+          btn.setAttribute('aria-expanded', 'true');
+          // Mark all as read visually
+        }
+        function close() {
+          panel.setAttribute('aria-hidden', 'true');
+          btn.setAttribute('aria-expanded', 'false');
+        }
+
+        btn.addEventListener('click', e => {
+          e.stopPropagation();
+          panel.getAttribute('aria-hidden') === 'false' ? close() : open();
+        });
+
+        // "Mark all read" button
+        const clearBtn = document.getElementById('lt-notif-clear-all');
+        if (clearBtn) clearBtn.addEventListener('click', () => {
+          panel.querySelectorAll('.lt-notif-item--unread').forEach(el => el.classList.remove('lt-notif-item--unread'));
+          panel.querySelectorAll('.lt-notif-dot').forEach(el => { el.classList.remove('lt-notif-dot'); el.classList.add('lt-notif-dot', 'lt-notif-dot--read'); });
+          lt.notif.clear('#lt-notif-bell');
+          lt.toast.info('All notifications marked as read');
+        });
+
+        // Individual item click
+        panel.querySelectorAll('.lt-notif-item').forEach(item => {
+          item.addEventListener('click', () => {
+            item.classList.remove('lt-notif-item--unread');
+            const dot = item.querySelector('.lt-notif-dot');
+            if (dot) { dot.classList.add('lt-notif-dot--read'); }
+            close();
+          });
+        });
+
+        // Close on outside click
+        document.addEventListener('click', e => {
+          if (!document.getElementById('lt-notif-bell').contains(e.target)) close();
+        });
+
+        // Esc close
+        document.addEventListener('keydown', e => { if (e.key === 'Escape') close(); });
+      }());
+
+      // ----- Generic dropdown toggle (Advanced filter + Bulk Actions) -----
+      document.querySelectorAll('.lt-dropdown-trigger').forEach(btn => {
+        const wrap  = btn.closest('.lt-dropdown-wrap');
+        const panel = wrap && wrap.querySelector('.lt-dropdown-panel');
+        if (!panel) return;
+
+        btn.addEventListener('click', e => {
+          e.stopPropagation();
+          const isOpen = panel.getAttribute('aria-hidden') === 'false';
+          // Close all other dropdowns first
+          document.querySelectorAll('.lt-dropdown-panel[aria-hidden="false"]').forEach(p => {
+            p.setAttribute('aria-hidden', 'true');
+            const t = p.closest('.lt-dropdown-wrap').querySelector('.lt-dropdown-trigger');
+            if (t) t.setAttribute('aria-expanded', 'false');
+          });
+          if (!isOpen) {
+            panel.setAttribute('aria-hidden', 'false');
+            btn.setAttribute('aria-expanded', 'true');
+          }
+        });
+      });
+
+      // Close dropdowns on outside click / Esc
+      document.addEventListener('click', () => {
+        document.querySelectorAll('.lt-dropdown-panel[aria-hidden="false"]').forEach(p => {
+          p.setAttribute('aria-hidden', 'true');
+          const t = p.closest('.lt-dropdown-wrap').querySelector('.lt-dropdown-trigger');
+          if (t) t.setAttribute('aria-expanded', 'false');
+        });
+      });
+
       // Tab bar switching
       document.querySelectorAll('.lt-tab-bar').forEach(bar => {
         bar.addEventListener('click', e => {

base.js

@@ -105,9 +105,14 @@
     closeEl.setAttribute('aria-label', 'Dismiss');
     closeEl.addEventListener('click', () => _dismissToast(toast));
 
+    const progressEl = document.createElement('div');
+    progressEl.className = 'lt-toast-progress';
+    progressEl.style.animationDuration = duration + 'ms';
+
     toast.appendChild(iconEl);
     toast.appendChild(msgEl);
     toast.appendChild(closeEl);
+    toast.appendChild(progressEl);
     container.appendChild(toast);
 
     const timer = setTimeout(() => _dismissToast(toast), duration);
@@ -2027,32 +2032,6 @@
     },
   };
 
-  /* ================================================================
-     MODULE 47 — TOAST ENHANCEMENTS
-     Adds a drain progress bar to each toast.
-     The original showToast already handles queuing (section 2).
-     ================================================================ */
-  // Patch showToast to inject a progress bar after each toast is created
-  const _origShowToast = showToast;
-  function showToast(message, type, duration) {
-    duration = duration || 4000;
-    const result = _origShowToast(message, type, duration);
-    // Inject drain bar into the most recently added toast
-    requestAnimationFrame(() => {
-      const container = document.getElementById('lt-toast-container');
-      if (!container) return;
-      const toasts = container.querySelectorAll('.lt-toast');
-      const last = toasts[toasts.length - 1];
-      if (last && !last.querySelector('.lt-toast-progress')) {
-        const bar = document.createElement('div');
-        bar.className = 'lt-toast-progress';
-        bar.style.animationDuration = duration + 'ms';
-        last.appendChild(bar);
-      }
-    });
-    return result;
-  }
-
   /* ================================================================
      MODULE 48 — SIDEBAR SUBMENUS
      Auto-inits .lt-sidebar-group elements.