docs(docs): add unique tag colours and pill‑styled badges for problem tags.

apps/docs/components/ProblemBadges.astro

@@ -11,10 +11,15 @@
  *
  * - `topics:` (problem pages, written by `apps/cli/sync.ts`) is LeetCode's own
  *   topic tags. A tag the campaign teaches (`topic-landings.ts`) links to that
- *   topic's landing page and reads accent; any other tag links to its guide
- *   page, `/guides/<slug>` (sync creates one per such tag), and reads neutral.
+ *   topic's landing page and is filled; any other tag links to its guide
+ *   page, `/guides/<slug>` (sync creates one per such tag), and is outlined.
  *   `tagTarget()` picks the route (and between two landings, e.g. DFS); the
- *   `PageFooter` backlinks list reads the same answer.
+ *   `PageFooter` backlinks list reads the same answer. Each tag badge is a
+ *   pill carrying the icon its target shows in the sidebar (the topic's
+ *   `meta.ts` icon, the guide's `icon:`) and the tag's own colour
+ *   (`lib/tag-colors.ts`), assigned over every tag the site has a page for,
+ *   so no two tags share one. A tag with no page (the LeetCode-list fallback)
+ *   stays gray and iconless.
  * - `video:` (problem pages, written by `apps/cli/videos.ts`) is the NeetCode
  *   walkthrough's YouTube id, the red "Explanation" badge at the end of the row.
  * - `list:` (guide pages, written by sync on create) is the tag's LeetCode
@@ -24,7 +29,8 @@ import { getEntry } from "astro:content";
 import data from "blume:data";
 import Badge from "blume/components/content/Badge.astro";
 import { stripBase, withBase } from "blume/components/islands/base-path.ts";
-import { tagTarget, type TopicTag } from "../topic-landings.ts";
+import { tagColors } from "../lib/tag-colors.ts";
+import { TOPIC_LANDINGS, tagTarget, type TopicTag } from "../topic-landings.ts";
 
 // `/sub/tree-dfs/invert-binary-tree/` (or `.../index.html` in a static build)
 // -> `/tree-dfs/invert-binary-tree`, the base-less shape of `data.routes`.
@@ -40,10 +46,39 @@ const list: string | undefined = entry?.data.list;
 
 const served = new Set<string>(data.routes.map((r: { path: string }) => r.path));
 
+// route → the icon its sidebar row shows: a page's own, or a topic group's
+// (from its `meta.ts`) for the landing page the group row links to.
+interface NavNode {
+  route?: string;
+  icon?: string;
+  children?: NavNode[];
+}
+const icons = new Map<string, string>();
+const walk = (nodes: NavNode[]) => {
+  for (const node of nodes) {
+    if (node.route && node.icon && !icons.has(node.route)) icons.set(node.route, node.icon);
+    if (node.children) walk(node.children);
+  }
+};
+walk(data.navigation.sidebar);
+
+// Every tag with a page: the ones a landing teaches, plus every served guide.
+const colors = tagColors([
+  ...Object.keys(TOPIC_LANDINGS),
+  ...[...served].flatMap((path) => path.match(/^\/guides\/([^/]+)$/u)?.slice(1) ?? []),
+]);
+
 const badges = tags.map((tag) => {
   const target = tagTarget(tag, { route, tags }, served);
   const external = target.kind === "external";
-  return { name: tag.name, href: external ? target.href : withBase(target.href), accent: target.kind === "landing", external };
+  return {
+    name: tag.name,
+    href: external ? target.href : withBase(target.href),
+    external,
+    icon: external ? undefined : icons.get(target.href),
+    color: external ? undefined : colors.get(tag.slug),
+    stroke: target.kind !== "landing",
+  };
 });
 
 const linkClass = "no-underline transition-opacity hover:opacity-80";
@@ -59,19 +94,21 @@ const linkClass = "no-underline transition-opacity hover:opacity-80";
           rel={b.external ? "noopener" : undefined}
           class={linkClass}
         >
-          <Badge variant={b.accent ? "accent" : "default"}>{b.name}</Badge>
+          <Badge color={b.color} icon={b.icon} shape="pill" stroke={b.stroke}>
+            {b.name}
+          </Badge>
         </a>
       ))}
       {video && (
         <a href={`https://www.youtube.com/watch?v=${video}`} target="_blank" rel="noopener" class={linkClass}>
-          <Badge variant="danger" icon="youtube">
+          <Badge variant="danger" icon="youtube" shape="pill">
             Explanation
           </Badge>
         </a>
       )}
       {list && (
         <a href={list} target="_blank" rel="noopener" class={linkClass}>
-          <Badge variant="warning" icon="list">
+          <Badge variant="warning" icon="list" shape="pill">
             LeetCode list
           </Badge>
         </a>