Fixed some small bugs

flightscore/src/components/ui-badge.ts

@@ -1,6 +1,6 @@
 // components/ui-badge.ts
 import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 
 export type BadgeVariant = 'accent' | 'success' | 'warning' | 'error' | 'muted';
 
@@ -11,30 +11,37 @@ export class UiBadge extends LitElement {
       display: inline-flex;
     }
 
-    .badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.4rem;
-      padding: 0.3rem 0.75rem;
-      font-size: 0.75rem;
-      font-weight: 600;
-      letter-spacing: 0.03em;
-      text-transform: uppercase;
-      border-radius: 2rem;
-      border: 1px solid transparent;
-      white-space: nowrap;
-    }
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.35rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  border-radius: 2rem;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  line-height: 1;
+}
 
-    .icon {
-      display: inline-flex;
-      align-items: center;
-    }
+.icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
 
-    .icon ::slotted(svg) {
-      width: 0.85rem;
-      height: 0.85rem;
-      flex-shrink: 0;
-    }
+.icon ::slotted(svg) {
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  padding-top: 0.05em;
+}
 
     .badge.accent {
       color: var(--color-accent);
@@ -68,13 +75,25 @@ export class UiBadge extends LitElement {
   `;
 
   @property() variant: BadgeVariant = 'accent';
+  @state() private hasIcon = false;
+
+  private handleSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    this.hasIcon = slot.assignedNodes().length > 0;
+  }
 
   render() {
     return html`
-      <span class="badge ${this.variant}">
-        <span class="icon"><slot name="icon"></slot></span>
+    <span class="badge ${this.variant}">
+      ${this.hasIcon
+      ? html`<span class="icon">
+        <slot name="icon" @slotchange=${this.handleSlotChange}></slot>
+      </span>`
+      : html`<slot name="icon" @slotchange=${this.handleSlotChange} style="display:none"></slot>`}
+      <span class="label">
         <slot></slot>
       </span>
-    `;
+    </span>
+  `;
   }
 }