feat(log-levels): responsive header level chips with overflow menu

log-viewer/src/components/LogLevels.ts

@@ -1,81 +1,82 @@
 /*
  * Copyright (c) 2023 Certinia Inc. All rights reserved.
  */
-import '#vscode-elements/vscode-badge.js';
 import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import type { DebugLevel } from 'apex-log-parser';
 
+// web components
+import './OverflowList.js';
+import './VsChip.js';
+
 // styles
 import { globalStyles } from '../styles/global.styles.js';
 import { skeletonStyles } from '../styles/skeleton.styles.js';
 
+/**
+ * Read-only display of the log's captured debug levels in the app header: one chip per
+ * category (`CATEGORY LEVEL`), styled as a VS Code dropdown face. A thin adapter — the
+ * responsive overflow-into-a-menu behaviour lives in `<overflow-list>` and the chip face
+ * in `<vs-chip>`.
+ *
+ * MIGRATION TO FILTERS: each chip is read-only display. To make levels filterable, this
+ * template is the single seam that changes:
+ *   1. swap `<vs-chip>` for `<vs-select compact>` (chevron returns);
+ *   2. reintroduce level ordering + ceiling helpers (removed `logLevelsFormat.ts`:
+ *      `LEVEL_ORDER`/`rankOf`/`ceilingHint`) and the `VsSelect` compact + disabled-option
+ *      tooltip additions;
+ *   3. add a `filters` Map (per-category chosen level) + a `@change` handler that emits
+ *      `log-levels-change`, and have views subscribe to hide events above the threshold.
+ * `<overflow-list>` measures whatever it's given, so overflow + alignment are unaffected.
+ */
 @customElement('log-levels')
 export class LogLevels extends LitElement {
   @property()
   logSettings: DebugLevel[] | null = null;
 
-  constructor() {
-    super();
-  }
-
   static styles = [
     globalStyles,
     skeletonStyles,
     css`
       :host {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 4px;
-        align-items: center;
-        font-family: var(--vscode-editor-font-family);
-      }
-
-      vscode-badge {
-        --vscode-badge-background: var(--vscode-textBlockQuote-background);
-        --vscode-badge-foreground: var(--vscode-editor-foreground);
-        --vscode-font-family: var(--vscode-editor-font-family);
-
-        font-family: var(--vscode-editor-font-family);
-        font-size: 0.9rem;
-      }
-
-      .setting__title {
-        font-weight: 600;
-        opacity: 0.9;
+        display: block;
+        min-width: 0;
+        font-size: 11px;
       }
 
-      .setting__level {
-        color: var(--vscode-descriptionForeground, #808080);
-        font-weight: 500;
+      .skeletons {
+        display: flex;
+        gap: 6px;
       }
 
-      .setting-skeleton {
-        min-width: 5ch;
-        width: 100px;
-        height: 1.5rem;
+      .item-skeleton {
+        width: 92px;
+        height: 18px;
+        border-radius: 4px;
+        flex: 0 0 auto;
       }
     `,
   ];
 
   render() {
     if (!this.logSettings) {
-      const logLevels = [];
-      for (let i = 0; i < 8; i++) {
-        logLevels.push(html`<div class="setting-skeleton skeleton"></div>`);
-      }
-      return logLevels;
+      return html`<div class="skeletons">
+        ${repeat(
+          Array.from({ length: 6 }),
+          (_, i) => i,
+          () => html`<div class="item-skeleton skeleton"></div>`,
+        )}
+      </div>`;
     }
 
-    return html`${repeat(
-      this.logSettings,
-      ({ logCategory, logLevel }) =>
-        html`<vscode-badge>
-          <span class="setting__title">${logCategory}:</span>
-          <span class="setting__level">${logLevel}</span>
-        </vscode-badge>`,
-    )}`;
+    return html`<overflow-list menu-heading="Log levels">
+      ${repeat(
+        this.logSettings,
+        (s) => s.logCategory,
+        (s) => html`<vs-chip><span slot="lead">${s.logCategory}</span>${s.logLevel}</vs-chip>`,
+      )}
+    </overflow-list>`;
   }
 }

log-viewer/src/components/NavBar.ts

@@ -71,6 +71,12 @@ export class NavBar extends LitElement {
         flex: 1 1 auto;
       }
 
+      /* Cancel log-title's inner 6px so its text sits on the shared header left guide
+         (the hover background keeps its padding). */
+      .navbar--left > log-title {
+        margin-left: -6px;
+      }
+
       .navbar--left-meta {
         display: flex;
         align-items: center;
@@ -83,7 +89,6 @@ export class NavBar extends LitElement {
         display: flex;
         align-items: center;
         gap: 4px;
-        padding-right: 4px;
         flex: 0 0 auto;
       }
     `,