From 0aea9a9bf560f06ccfd3e770322c69cae85db505 Mon Sep 17 00:00:00 2001
From: Collin Barrett <6483057+collinbarrett@users.noreply.github.com>
Date: Sat, 28 Jun 2025 13:08:19 -0500
Subject: [PATCH] feat(web): add Syntaxes column

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

diff --git a/web/src/components/filterlist-table/columns.tsx b/web/src/components/filterlist-table/columns.tsx
index 472e28e72..c54e2425d 100644
--- a/web/src/components/filterlist-table/columns.tsx
+++ b/web/src/components/filterlist-table/columns.tsx
@@ -14,6 +14,27 @@ export const columns = [
   columnHelper.accessor((row) => row.description, {
     header: "Description",
   }),
+  columnHelper.accessor((row) => row.syntaxIds, {
+    header: "Syntaxes",
+    cell: (info) => {
+      const meta = info.table.options.meta as FilterListsTableMeta;
+      const syntaxes =
+        info.getValue()?.flatMap((id) => {
+          const syntax = meta.syntaxes.find((s) => s.id === id);
+          return syntax
+            ? [
+                {
+                  key: syntax.id,
+                  value: syntax.name,
+                  tooltip: syntax.description ?? undefined,
+                  href: syntax.url ?? undefined,
+                },
+              ]
+            : [];
+        }) ?? [];
+      return <BadgeCloud items={syntaxes} />;
+    },
+  }),
   columnHelper.accessor((row) => row.languageIds, {
     header: "Languages",
     cell: (info) => {
diff --git a/web/src/components/filterlist-table/index.tsx b/web/src/components/filterlist-table/index.tsx
index 4564c5903..ae4c6d3c2 100644
--- a/web/src/components/filterlist-table/index.tsx
+++ b/web/src/components/filterlist-table/index.tsx
@@ -30,6 +30,7 @@ import { Tag } from "@/services/get-tags";
 export interface FilterListsTableMeta extends TableMeta<FilterList> {
   languages: readonly Language[];
   licenses: readonly License[];
+  syntaxes: readonly Syntax[];
 }
 
 type FilterListTableProps = {
@@ -48,6 +49,7 @@ export function FilterListTable({
   initialFilterLists,
   languages,
   licenses,
+  syntaxes,
 }: FilterListTableProps) {
   const [data, setData] = useState<FilterList[]>(initialFilterLists);
   const [loading, setLoading] = useState(true);
@@ -71,6 +73,7 @@ export function FilterListTable({
     meta: {
       languages,
       licenses,
+      syntaxes,
     },
   });