From 5f0bfa56e6cbced67511d8466e0903b246e22d5e Mon Sep 17 00:00:00 2001
From: Collin Barrett <6483057+collinbarrett@users.noreply.github.com>
Date: Sat, 28 Jun 2025 13:25:43 -0500
Subject: [PATCH] feat(web): add Tags column

---
 .../components/filterlist-table/columns.tsx   | 20 +++++++++++++++++++
 web/src/components/filterlist-table/index.tsx |  3 +++
 2 files changed, 23 insertions(+)

diff --git a/web/src/components/filterlist-table/columns.tsx b/web/src/components/filterlist-table/columns.tsx
index c54e2425d..071d0a895 100644
--- a/web/src/components/filterlist-table/columns.tsx
+++ b/web/src/components/filterlist-table/columns.tsx
@@ -55,6 +55,26 @@ export const columns = [
       return <BadgeCloud items={languages} />;
     },
   }),
+  columnHelper.accessor((row) => row.tagIds, {
+    header: "Tags",
+    cell: (info) => {
+      const meta = info.table.options.meta as FilterListsTableMeta;
+      const tags =
+        info.getValue()?.flatMap((id) => {
+          const tag = meta.tags.find((s) => s.id === id);
+          return tag
+            ? [
+                {
+                  key: tag.id,
+                  value: tag.name,
+                  tooltip: tag.description ?? undefined,
+                },
+              ]
+            : [];
+        }) ?? [];
+      return <BadgeCloud items={tags} />;
+    },
+  }),
   columnHelper.accessor((row) => row.licenseId, {
     header: "License",
     cell: (info) => {
diff --git a/web/src/components/filterlist-table/index.tsx b/web/src/components/filterlist-table/index.tsx
index ae4c6d3c2..2b1586813 100644
--- a/web/src/components/filterlist-table/index.tsx
+++ b/web/src/components/filterlist-table/index.tsx
@@ -31,6 +31,7 @@ export interface FilterListsTableMeta extends TableMeta<FilterList> {
   languages: readonly Language[];
   licenses: readonly License[];
   syntaxes: readonly Syntax[];
+  tags: readonly Tag[];
 }
 
 type FilterListTableProps = {
@@ -50,6 +51,7 @@ export function FilterListTable({
   languages,
   licenses,
   syntaxes,
+  tags,
 }: FilterListTableProps) {
   const [data, setData] = useState<FilterList[]>(initialFilterLists);
   const [loading, setLoading] = useState(true);
@@ -74,6 +76,7 @@ export function FilterListTable({
       languages,
       licenses,
       syntaxes,
+      tags,
     },
   });