feat(components): enhance tag color computation for problem badges

apps/docs/components/ProblemBadges.astro

@@ -17,9 +17,10 @@
  *   `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,
+ *   (`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)
+ *   no two tags share one, and tags that share problem pages are spread
- *   stays gray and iconless.
+ *   furthest apart. 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
@@ -62,11 +63,25 @@ const walk = (nodes: NavNode[]) => {
 };
 walk(data.navigation.sidebar);
 
-// Every tag with a page: the ones a landing teaches, plus every served guide.
+// Every tag with a page — the ones a landing teaches, plus every served guide —
-const colors = tagColors([
+// coloured against how problem pages (`<num>. <name>` titles, the shape sync
+// writes) combine them. Only a page with tags needs the answer.
+const colors = tags.length
+  ? tagColors(
+      [
         ...Object.keys(TOPIC_LANDINGS),
         ...[...served].flatMap((path) => path.match(/^\/guides\/([^/]+)$/u)?.slice(1) ?? []),
-]);
+      ],
+      await Promise.all(
+        data.routes
+          .filter((r: { title: string }) => /^\d+\.\s/u.test(r.title))
+          .map(async (r: { collection: string; entryId: string }) => {
+            const page = await getEntry(r.collection, r.entryId);
+            return (page?.data.topics ?? []).map((t: TopicTag) => t.slug);
+          }),
+      ),
+    )
+  : new Map<string, string>();
 
 const badges = tags.map((tag) => {
   const target = tagTarget(tag, { route, tags }, served);