Feat/drag system 2217 (koala73#2444)

* feat(panels): improve drag UX and add close buttons to live panels

* fix: address PR feedback from koala73 and SebastienMelki

* fix: replace unsafe any cast with type guard for fetchData

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

* feat(panels): add collapsible support to live news and webcams panels

- Add collapsible option to Panel base class with collapse/expand button
- Enable collapsible on LiveNewsPanel and LiveWebcamsPanel
- Add CSS to shrink panel to header height when collapsed
- Clean up debug console.logs from undo handler

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

* fix(panels): add aria-expanded, persist collapsed state, and add missing i18n keys

- Extract _applyCollapsed() helper to centralize DOM/state updates
- Set aria-expanded on collapse button and toggle it on click (accessibility)
- Persist collapsed state per panel in localStorage (worldmonitor-panel-collapsed)
  and restore it on page load after this.content is available
- Add collapsePanel and expandPanel keys to en.json (fallback strings were
  always used since the keys were undefined)

* fix(panels): update aria-label on toggle and fix isContentEditable null guard

- _applyCollapsed now also updates aria-label alongside aria-expanded so
  screen readers announce the correct action after toggling
- Add optional chaining to isContentEditable in the undo keyboard handler
  to match the existing ?.tagName guard on the same cast (Greptile P2)

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Elie Habib <elie.habib@gmail.com>

Author: 3 people

src/app/event-handlers.ts

@@ -152,8 +152,8 @@ export class EventHandlerManager implements AppModule {
 
     // Ensure restored panel fetches fresh data (otherwise it may show no content)
     const panel = this.ctx.panels[panelId];
-    if (panel && 'fetchData' in panel) {
-      (panel as any).fetchData();
+    if (panel && 'fetchData' in panel && typeof (panel as { fetchData: unknown }).fetchData === 'function') {
+      (panel as { fetchData: () => void }).fetchData();
     }
   }
 
@@ -430,8 +430,8 @@ export class EventHandlerManager implements AppModule {
     // undo via Ctrl/Cmd+Z
     this.boundUndoHandler = (e: KeyboardEvent) => {
       if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') {
-        const tag = (e.target as HTMLElement).tagName;
-        if (tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement).isContentEditable) return;
+        const tag = (e.target as HTMLElement)?.tagName ?? '';
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement)?.isContentEditable) return;
         e.preventDefault();
         this.performUndo();
       }

src/components/LiveNewsPanel.ts

@@ -409,8 +409,7 @@ export class LiveNewsPanel extends Panel {
   private idleCallbackId: number | ReturnType<typeof setTimeout> | null = null;
 
   constructor() {
-    // allow users to close the live news panel
-    super({ id: 'live-news', title: t('panels.liveNews'), className: 'panel-wide', closable: true });
+    super({ id: 'live-news', title: t('panels.liveNews'), className: 'panel-wide', closable: true, collapsible: true });
     this.insertLiveCountBadge(OPTIONAL_LIVE_CHANNELS.length);
     this.youtubeOrigin = LiveNewsPanel.resolveYouTubeOrigin();
     this.playerElementId = `live-news-player-${Date.now()}`;

src/components/LiveWebcamsPanel.ts

@@ -124,7 +124,7 @@ export class LiveWebcamsPanel extends Panel {
   private boundEmbedMessageHandler: (e: MessageEvent) => void;
 
   constructor() {
-    super({ id: 'live-webcams', title: t('panels.liveWebcams'), className: 'panel-wide', closable: true });
+    super({ id: 'live-webcams', title: t('panels.liveWebcams'), className: 'panel-wide', closable: true, collapsible: true });
     this.insertLiveCountBadge(WEBCAM_FEEDS.length);
 
     const prefs = loadWebcamPrefs(this.forceSingleView);

src/components/Panel.ts

@@ -16,6 +16,7 @@ export interface PanelOptions {
   infoTooltip?: string;
   premium?: 'locked' | 'enhanced';
   closable?: boolean;
+  collapsible?: boolean;
   defaultRowSpan?: number;
 }
 
@@ -60,6 +61,31 @@ function savePanelColSpan(panelId: string, span: number): void {
   localStorage.setItem(PANEL_COL_SPANS_KEY, JSON.stringify(spans));
 }
 
+const PANEL_COLLAPSED_KEY = 'worldmonitor-panel-collapsed';
+
+function loadPanelCollapsed(): Record<string, boolean> {
+  try {
+    const stored = localStorage.getItem(PANEL_COLLAPSED_KEY);
+    return stored ? JSON.parse(stored) : {};
+  } catch {
+    return {};
+  }
+}
+
+function savePanelCollapsed(panelId: string, collapsed: boolean): void {
+  const map = loadPanelCollapsed();
+  if (collapsed) {
+    map[panelId] = true;
+  } else {
+    delete map[panelId];
+  }
+  if (Object.keys(map).length === 0) {
+    localStorage.removeItem(PANEL_COLLAPSED_KEY);
+  } else {
+    localStorage.setItem(PANEL_COLLAPSED_KEY, JSON.stringify(map));
+  }
+}
+
 function clearPanelColSpan(panelId: string): void {
   const spans = loadPanelColSpans();
   if (!(panelId in spans)) return;
@@ -208,6 +234,8 @@ export class Panel {
   private retryAttempt = 0;
   private _fetching = false;
   private _locked = false;
+  private _collapsed = false;
+  private _collapseBtn: HTMLButtonElement | null = null;
 
   constructor(options: PanelOptions) {
     this.panelId = options.id;
@@ -274,6 +302,10 @@ export class Panel {
       this.header.appendChild(this.countEl);
     }
 
+    if (options.collapsible) {
+      this.appendCollapseButton();
+    }
+
     if (options.closable !== false) {
       this.appendCloseButton();
     }
@@ -285,6 +317,10 @@ export class Panel {
     this.element.appendChild(this.header);
     this.element.appendChild(this.content);
 
+    if (this._collapseBtn && loadPanelCollapsed()[this.panelId]) {
+      this._applyCollapsed(this._collapseBtn, true);
+    }
+
     this.content.addEventListener('click', (e) => {
       const target = (e.target as HTMLElement).closest('[data-panel-retry]');
       if (!target || this._fetching) return;
@@ -658,6 +694,35 @@ export class Panel {
     headerLeft.appendChild(badge);
   }
 
+  private _applyCollapsed(btn: HTMLButtonElement, collapsed: boolean): void {
+    this._collapsed = collapsed;
+    this.content.style.display = collapsed ? 'none' : '';
+    this.element.classList.toggle('panel-collapsed', collapsed);
+    btn.textContent = collapsed ? '▸' : '▾';
+    const label = collapsed
+      ? (t('components.panel.expandPanel') ?? 'Expand')
+      : (t('components.panel.collapsePanel') ?? 'Collapse');
+    btn.setAttribute('aria-expanded', String(!collapsed));
+    btn.setAttribute('aria-label', label);
+    btn.title = label;
+  }
+
+  protected appendCollapseButton(): void {
+    const btn = h('button', {
+      className: 'icon-btn panel-collapse-btn',
+      'aria-label': t('components.panel.collapsePanel') ?? 'Collapse',
+      'aria-expanded': 'true',
+      title: t('components.panel.collapsePanel') ?? 'Collapse',
+    }, '▾') as HTMLButtonElement;
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this._applyCollapsed(btn, !this._collapsed);
+      savePanelCollapsed(this.panelId, this._collapsed);
+    });
+    this._collapseBtn = btn;
+    this.header.appendChild(btn);
+  }
+
   protected appendCloseButton(): void {
     const closeBtn = h('button', {
       className: 'icon-btn panel-close-btn',

src/locales/en.json

@@ -1930,6 +1930,8 @@
       "dragToResize": "Drag to resize (double-click to reset)",
       "openSettings": "Open Settings",
       "closePanel": "Close panel",
+      "collapsePanel": "Collapse panel",
+      "expandPanel": "Expand panel",
       "addPanel": "Add Panel"
     },
     "languageSelector": {

src/styles/main.css

@@ -1544,6 +1544,35 @@ body.panel-resize-active iframe {
   }
 }
 
+/* ---- Collapse (▾) button on panels ---- */
+.panel-header .panel-collapse-btn {
+  font-size: 12px;
+  opacity: 0;
+  transition: opacity 0.15s ease, background 0.15s ease;
+  order: 998;
+}
+
+.panel:hover .panel-collapse-btn,
+.panel-collapse-btn:focus-visible {
+  opacity: 1;
+}
+
+.panel.panel-collapsed {
+  align-self: start;
+  height: auto !important;
+  min-height: 0 !important;
+}
+
+.panel-collapsed .panel-collapse-btn {
+  opacity: 0.7;
+}
+
+@media (hover: none) {
+  .panel-header .panel-collapse-btn {
+    opacity: 0.7;
+  }
+}
+
 /* ---- Add Panel (+) block ---- */
 .add-panel-block {
   display: flex;