feat(components): add GitHub issue badge to problem badges

apps/docs/components/ProblemBadges.astro

@@ -12,7 +12,7 @@
  * - `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 is filled; any other tag links to its guide
- *   page, `/guides/<slug>` (sync creates one per such tag), and is outlined.
+ *   page in the Appendix, `/appendix/<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. Each tag badge is a
  *   pill carrying the icon its target shows in the sidebar (the topic's
@@ -22,7 +22,10 @@
  *   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.
+ *   walkthrough's YouTube id, the red "Explanation" badge.
+ * - `issue:` (problem pages, written by sync) is the problem's GitHub issue
+ *   URL, a neutral "Issue #N" badge with the GitHub mark, right after
+ *   "Explanation" at the end of the row.
  * - `list:` (guide pages, written by sync on create) is the tag's LeetCode
  *   problem list, an orange "LeetCode list" badge.
  */
@@ -44,6 +47,7 @@ const entry = at ? await getEntry(at.collection, at.entryId) : undefined;
 const tags: TopicTag[] = entry?.data.topics ?? [];
 const video: string | undefined = entry?.data.video;
 const list: string | undefined = entry?.data.list;
+const issue: string | undefined = entry?.data.issue;
 
 const served = new Set<string>(data.routes.map((r: { path: string }) => r.path));
 
@@ -70,7 +74,7 @@ const colors = tags.length
   ? tagColors(
       [
         ...Object.keys(TOPIC_LANDINGS),
-        ...[...served].flatMap((path) => path.match(/^\/guides\/([^/]+)$/u)?.slice(1) ?? []),
+        ...[...served].flatMap((path) => path.match(/^\/appendix\/([^/]+)$/u)?.slice(1) ?? []),
       ],
       await Promise.all(
         data.routes
@@ -100,7 +104,7 @@ const linkClass = "no-underline transition-opacity hover:opacity-80";
 ---
 
 {
-  (badges.length > 0 || video || list) && (
+  (badges.length > 0 || video || list || issue) && (
     <div class="not-prose mb-6 flex flex-wrap gap-1.5">
       {badges.map((b) => (
         <a
@@ -121,6 +125,13 @@ const linkClass = "no-underline transition-opacity hover:opacity-80";
           </Badge>
         </a>
       )}
+      {issue && (
+        <a href={issue} target="_blank" rel="noopener" class={linkClass}>
+          <Badge icon="github" shape="pill">
+            Issue #{issue.slice(issue.lastIndexOf("/") + 1)}
+          </Badge>
+        </a>
+      )}
       {list && (
         <a href={list} target="_blank" rel="noopener" class={linkClass}>
           <Badge variant="warning" icon="list" shape="pill">