From aaf6a241655c19586835a346da4aab66cd71bcc1 Mon Sep 17 00:00:00 2001
From: Lawrence Chen <54008264+lawrencecchen@users.noreply.github.com>
Date: Sun, 1 Mar 2026 19:07:20 -0800
Subject: [PATCH] Show GitHub star badge in mobile header (#735)

Removed the `hidden md:flex` wrapper so the GitHubStarsBadge renders on
all screen sizes. Made the component reusable with optional `location`
and `className` props. Replaced the plain "GitHub" text link in the
mobile drawer with the star badge component.
---
 web/app/components/github-stars.tsx | 34 +++++++++++++++++++----------
 web/app/components/site-header.tsx  | 15 ++-----------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/web/app/components/github-stars.tsx b/web/app/components/github-stars.tsx
index 1dc3adb4..45b2d626 100644
--- a/web/app/components/github-stars.tsx
+++ b/web/app/components/github-stars.tsx
@@ -11,7 +11,25 @@ function formatStars(count: number): string {
   return String(count);
 }
 
-export function GitHubStarsBadge() {
+const GITHUB_ICON = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
+  </svg>
+);
+
+export function GitHubStarsBadge({
+  location = "stars_badge",
+  className,
+}: {
+  location?: string;
+  className?: string;
+} = {}) {
   const [stars, setStars] = useState<number | null>(null);
 
   useEffect(() => {
@@ -31,19 +49,11 @@ export function GitHubStarsBadge() {
       target="_blank"
       rel="noopener noreferrer"
       onClick={() =>
-        posthog.capture("cmuxterm_github_clicked", { location: "stars_badge" })
+        posthog.capture("cmuxterm_github_clicked", { location })
       }
-      className="inline-flex items-center gap-1.5 pr-1 text-sm text-muted hover:text-foreground transition-colors animate-fade-in"
+      className={className ?? "inline-flex items-center gap-1.5 pr-1 text-sm text-muted hover:text-foreground transition-colors animate-fade-in"}
     >
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        aria-hidden="true"
-      >
-        <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
-      </svg>
+      {GITHUB_ICON}
       <span className="text-xs tabular-nums">{formatStars(stars)}</span>
     </a>
   );
diff --git a/web/app/components/site-header.tsx b/web/app/components/site-header.tsx
index 81742b99..bc868280 100644
--- a/web/app/components/site-header.tsx
+++ b/web/app/components/site-header.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import Link from "next/link";
-import posthog from "posthog-js";
 import { NavLinks } from "./nav-links";
 import { DownloadButton } from "./download-button";
 import { ThemeToggle } from "../theme";
@@ -58,9 +57,7 @@ export function SiteHeader({
 
           {/* Right: GitHub stars + Download + theme + mobile */}
           <div className="flex flex-1 items-center justify-end gap-3 min-w-0">
-            <div className="hidden md:flex items-center">
-              <GitHubStarsBadge />
-            </div>
+            <GitHubStarsBadge />
             <div className="hidden md:block">
               <DownloadButton size="sm" location="navbar" />
             </div>
@@ -137,15 +134,7 @@ export function SiteHeader({
           >
             Community
           </Link>
-          <a
-            href="https://github.com/manaflow-ai/cmux"
-            target="_blank"
-            rel="noopener noreferrer"
-            onClick={() => posthog.capture("cmuxterm_github_clicked", { location: "mobile_drawer" })}
-            className="hover:text-foreground transition-colors py-1"
-          >
-            GitHub
-          </a>
+          <GitHubStarsBadge location="mobile_drawer" />
           <div className="pt-2">
             <DownloadButton size="sm" location="mobile_drawer" />
           </div>