feat: cmp icon button

log-viewer/src/components/IconButton.ts

@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2025 Certinia Inc. All rights reserved.
+ */
+import { provideVSCodeDesignSystem, vsCodeBadge, vsCodeButton } from '@vscode/webview-ui-toolkit';
+import { LitElement, css, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+// styles
+import codiconStyles from '../styles/codicon.css';
+import { globalStyles } from '../styles/global.styles.js';
+
+provideVSCodeDesignSystem().register(vsCodeButton(), vsCodeBadge());
+
+@customElement('icon-button')
+export class IconButton extends LitElement {
+  static styles = [
+    globalStyles,
+    unsafeCSS(codiconStyles),
+    css`
+      vscode-button {
+        height: 22px;
+        width: 22px;
+      }
+
+      .badge-indicator::part(control) {
+        --design-unit: 0;
+        --border-width: 0;
+
+        color: rgb(255, 255, 255);
+        background-color: rgb(0, 120, 212);
+        position: absolute;
+        top: 10px;
+        right: 0;
+        font-size: 9px;
+        font-weight: 600;
+        min-width: 12px;
+        height: 12px;
+        line-height: 12px;
+        padding: 0 2px;
+        border-radius: 16px;
+        text-align: center;
+        display: inline-block;
+        box-sizing: border-box;
+      }
+    `,
+  ];
+
+  @property()
+  icon: string = '';
+
+  @property()
+  badgeCount: number | null | undefined = null;
+
+  @property()
+  ariaLabel: string = 'Icon Button';
+
+  @property()
+  title: string = 'Icon Button';
+
+  render() {
+    console.log('Rendering IconButton with badgeCount:', this.badgeCount);
+    const indicator =
+      this.badgeCount !== null && this.badgeCount !== undefined
+        ? html`<vscode-badge class="badge-indicator">${this.badgeCount}</vscode-badge> `
+        : ``;
+
+    return html`<div class="menu-container">
+      <vscode-button appearance="icon" aria-label="${this.ariaLabel}" title="${this.title}">
+        <span class="codicon ${this.icon}"></span>
+        ${indicator}
+      </vscode-button>
+    </div>`;
+  }
+}

log-viewer/src/components/IconButtonSkeleton.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2025 Certinia Inc. All rights reserved.
+ */
+import { LitElement, css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// styles
+import { globalStyles } from '../styles/global.styles.js';
+import { skeletonStyles } from '../styles/skeleton.styles.js';
+
+@customElement('icon-button-skeleton')
+export class IconButton extends LitElement {
+  static styles = [
+    globalStyles,
+    skeletonStyles,
+    css`
+      :host {
+        display: inline-flex;
+      }
+      .skeleton {
+        width: 16px;
+        height: 16px;
+      }
+    `,
+  ];
+
+  render() {
+    return html` <span class="skeleton"></span>`;
+  }
+}

log-viewer/src/components/LogProblems.ts

@@ -2,13 +2,12 @@
  * Copyright (c) 2023 Certinia Inc. All rights reserved.
  */
 import { provideVSCodeDesignSystem, vsCodeBadge, vsCodeButton } from '@vscode/webview-ui-toolkit';
-import { LitElement, css, html, unsafeCSS, type TemplateResult } from 'lit';
+import { LitElement, css, html, type TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
 import { goToRow } from '../features/call-tree/components/CalltreeView.js';
 
 // styles
-import codiconStyles from '../styles/codicon.css';
 import { globalStyles } from '../styles/global.styles.js';
 import { notificationStyles } from '../styles/notification.styles.js';
 import { skeletonStyles } from '../styles/skeleton.styles.js';
@@ -17,6 +16,8 @@ import { skeletonStyles } from '../styles/skeleton.styles.js';
 import '../features/notifications/components/NotificationPanel.js';
 import './BadgeBase.js';
 import './Divider.js';
+import './IconButton.js';
+import './IconButtonSkeleton.js';
 
 provideVSCodeDesignSystem().register(vsCodeButton(), vsCodeBadge());
 
@@ -51,7 +52,6 @@ export class NotificationTag extends LitElement {
 
   static styles = [
     globalStyles,
-    unsafeCSS(codiconStyles),
     skeletonStyles,
     css`
       :host {
@@ -60,27 +60,11 @@ export class NotificationTag extends LitElement {
         flex: 0 0 auto;
       }
 
-      .icon {
-        position: relative;
-        width: 22px;
-        height: 22px;
-      }
-
-      .codicon.icon {
-        font-size: 22px;
-        width: 20px;
-        height: 20px;
-      }
-
       .problems-container {
         position: relative;
         display: inline-flex;
       }
 
-      .problems-icon {
-        color: var(--vscode-descriptionForeground);
-      }
-
       .problems-panel {
         position: absolute;
         top: calc(100% + 10px);
@@ -97,25 +81,6 @@ export class NotificationTag extends LitElement {
         border-radius: 4px;
       }
 
-      .badge-indicator::part(control) {
-        --design-unit: 0;
-        --border-width: 0;
-
-        color: rgb(255, 255, 255);
-        background-color: rgb(0, 120, 212);
-        position: absolute;
-        top: 10px;
-        right: 0;
-        font-size: 9px;
-        font-weight: 600;
-        min-width: 12px;
-        height: 12px;
-        line-height: 12px;
-        padding: 0 2px;
-        border-radius: 16px;
-        text-align: center;
-      }
-
       .text-container {
         padding: 8px 0px 0px 0px;
       }
@@ -147,27 +112,22 @@ export class NotificationTag extends LitElement {
 
   render() {
     if (!this.notifications) {
-      // todo: create icon skeleton component
-      return html` <span class="skeleton"></span>`;
+      return html`<icon-button-skeleton />`;
     }
 
-    const count = this.notifications.length;
-    const badge =
-      count > 0 ? html`<vscode-badge class="badge-indicator">${count}</vscode-badge>` : '';
+    const count = this.notifications.length || null;
     const title = count === 0 ? 'No Problems' : `${count} Problem${count === 1 ? '' : 's'}`;
-
     const messages = this._renderNotificationMessages();
 
     return html` <div class="problems-container">
-      <vscode-button
-        appearance="icon"
-        aria-label="${title}"
+      <icon-button
+        ariaLabel="${title}"
         title="${title}"
+        icon="codicon-warning"
+        .badgeCount="${count}"
         @click=${this._togglePanel}
-      >
-        <span class="codicon codicon-warning problems-icon"></span>
-        ${badge}
-      </vscode-button>
+      ></icon-button>
+
       <notification-panel class="problems-panel" .open="${this.open}">
         ${messages.length ? html`<div slot="items">${messages}</div>` : html``}
       </notification-panel>

log-viewer/src/features/notifications/components/NotificationButton.ts

@@ -7,11 +7,10 @@ import {
   vsCodeButton,
   vsCodeDivider,
 } from '@vscode/webview-ui-toolkit';
-import { LitElement, css, html, unsafeCSS, type TemplateResult } from 'lit';
+import { LitElement, css, html, type TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
 // styles
-import codiconStyles from '../../../styles/codicon.css';
 import { globalStyles } from '../../../styles/global.styles.js';
 import { notificationStyles } from '../../../styles/notification.styles.js';
 
@@ -45,38 +44,11 @@ export class NotificationButton extends LitElement {
 
   static styles = [
     globalStyles,
-    unsafeCSS(codiconStyles),
     css`
       :host {
         ${notificationStyles}
       }
 
-      vscode-button {
-        height: 22px;
-        width: 22px;
-      }
-
-      .badge-indicator::part(control) {
-        --design-unit: 0;
-        --border-width: 0;
-
-        color: rgb(255, 255, 255);
-        background-color: rgb(0, 120, 212);
-        position: absolute;
-        top: 10px;
-        right: 0;
-        font-size: 9px;
-        font-weight: 600;
-        min-width: 12px;
-        height: 12px;
-        line-height: 12px;
-        padding: 0 2px;
-        border-radius: 16px;
-        text-align: center;
-        display: inline-block;
-        box-sizing: border-box;
-      }
-
       .notification-panel {
         position: absolute;
         top: calc(100% + 10px);
@@ -145,21 +117,16 @@ export class NotificationButton extends LitElement {
       }
     });
 
-    const indicator =
-      this.notifications.length > 0
-        ? html`<vscode-badge class="badge-indicator">${this.notifications.length}</vscode-badge> `
-        : html``;
-
+    const count = this.notifications.length || null;
     return html`<div class="menu-container">
-      <vscode-button
-        appearance="icon"
-        aria-label="Notifications"
+      <icon-button
+        ariaLabel="Notifications"
         title="Notifications"
-        @click="${this._toggleNotifications}"
-      >
-        <span class="codicon codicon-bell"></span>
-        ${indicator}
-      </vscode-button>
+        icon="codicon-bell"
+        .badgeCount="${count}"
+        @click=${this._toggleNotifications}
+      ></icon-button>
+
       <notification-panel class="notification-panel" .open="${this.open}">
         ${messages.length ? html`<div slot="items">${messages}</div>` : html``}
       </notification-panel>