From e16d9e5ade005ebd0c0fce9174e5cd7f6751a48c Mon Sep 17 00:00:00 2001
From: iamdoubz <>
Date: Mon, 6 Jul 2026 15:38:14 -0500
Subject: [PATCH] feat(tags): add a GitHub-topics-style TagChip component

Rounded pill using the existing --accent-soft/--accent tokens.
Clicking the label filters the meeting list to this tag; an optional
'x' removes it from whatever list rendered it (the component doesn't
know or care what "remove" means to its caller).
---
 src/lib/components/TagChip.svelte | 92 +++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 src/lib/components/TagChip.svelte

diff --git a/src/lib/components/TagChip.svelte b/src/lib/components/TagChip.svelte
new file mode 100644
index 0000000..e404921
--- /dev/null
+++ b/src/lib/components/TagChip.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+  // GitHub-topic-style pill (T8.3, FR-SEARCH-2). Clicking the label filters
+  // the meeting list to this tag; the optional 'x' removes it from whatever
+  // list it's rendered in (not a global delete — the caller decides what
+  // "remove" means).
+  import { X } from "@lucide/svelte";
+
+  interface Props {
+    tag: string;
+    removable?: boolean;
+    onRemove?: () => void;
+    onClick?: () => void;
+  }
+  let { tag, removable = false, onRemove, onClick }: Props = $props();
+</script>
+
+<span class="chip" class:clickable={!!onClick}>
+  <button
+    type="button"
+    class="label"
+    onclick={onClick}
+    disabled={!onClick}
+    title={onClick ? `Filter meetings tagged "${tag}"` : undefined}
+  >
+    {tag}
+  </button>
+  {#if removable}
+    <button type="button" class="remove" onclick={onRemove} aria-label={`Remove tag ${tag}`}>
+      <X size={10} aria-hidden="true" />
+    </button>
+  {/if}
+</span>
+
+<style>
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    background: var(--accent-soft);
+    color: var(--accent);
+    border-radius: var(--radius-full);
+    font-size: 0.78rem;
+    font-weight: 500;
+  }
+  .label {
+    background: none;
+    border: none;
+    color: inherit;
+    font: inherit;
+    padding: 0.15rem 0.65rem;
+    border-radius: var(--radius-full);
+    cursor: default;
+  }
+  .label:disabled {
+    opacity: 1; /* a non-clickable chip should still read as fully legible */
+  }
+  .chip.clickable .label {
+    cursor: pointer;
+  }
+  .chip.clickable .label:hover {
+    background: var(--accent);
+    color: var(--accent-fg);
+  }
+  .label:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 1px;
+  }
+  .remove {
+    display: grid;
+    place-items: center;
+    width: 1.05rem;
+    height: 1.05rem;
+    margin: 0 0.3rem 0 -0.25rem;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: inherit;
+    opacity: 0.65;
+    cursor: pointer;
+    transition:
+      background-color 150ms ease-out,
+      opacity 150ms ease-out;
+  }
+  .remove:hover {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.18);
+  }
+  .remove:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 1px;
+  }
+</style>