feat: move theme toggle and GitHub button to top-right navbar

Remove socialLinks config and three-dots menu. Add appearance toggle
and combined GitHub + Star button directly in the navbar via layout
slot. The button shows the Octocat icon, "Star" label, and live
stargazer count.

apps/docs/.vitepress/config.mts

@@ -46,8 +46,6 @@ export default defineConfig({
       },
     ],
 
-    socialLinks: [{ icon: "github", link: "https://github.com/stirling-image/stirling-image" }],
-
     search: {
       provider: "local",
     },

apps/docs/.vitepress/theme/GitHubStars.vue

@@ -12,33 +12,27 @@ onMounted(async () => {
     const count = data.stargazers_count;
     stars.value = count >= 1000 ? `${(count / 1000).toFixed(1)}k` : String(count);
   } catch {
-    // Silently fail - stars badge just won't show a count
+    // Stars count won't show if fetch fails
   }
 });
 </script>
 
 <template>
-  <div class="github-stars-wrapper">
+  <div class="github-btn-wrapper">
-    <a :href="repo" target="_blank" rel="noopener" class="github-stars-btn">
+    <a :href="repo" target="_blank" rel="noopener" class="github-btn" title="Star on GitHub">
-      <svg
+      <!-- GitHub Octocat -->
-        width="16"
+      <svg class="github-icon" width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
-        height="16"
+        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
-        viewBox="0 0 16 16"
-        fill="currentColor"
-        aria-hidden="true"
-      >
-        <path
-          d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25z"
-        />
       </svg>
-      <span>Star</span>
+      <span class="github-btn-label">Star</span>
     </a>
     <a
       v-if="stars !== null"
       :href="`${repo}/stargazers`"
       target="_blank"
       rel="noopener"
-      class="github-stars-count"
+      class="github-btn-count"
+      title="Stargazers"
     >
       {{ stars }}
     </a>

apps/docs/.vitepress/theme/Layout.vue

@@ -1,5 +1,6 @@
 <script setup>
 import DefaultTheme from "vitepress/theme";
+import VPSwitchAppearance from "vitepress/dist/client/theme-default/components/VPSwitchAppearance.vue";
 import GitHubStars from "./GitHubStars.vue";
 
 const { Layout } = DefaultTheme;
@@ -8,7 +9,10 @@ const { Layout } = DefaultTheme;
 <template>
   <Layout>
     <template #nav-bar-content-after>
-      <GitHubStars />
+      <div class="nav-bar-right">
+        <VPSwitchAppearance />
+        <GitHubStars />
+      </div>
     </template>
   </Layout>
 </template>

apps/docs/.vitepress/theme/github-stars.css

@@ -1,64 +1,88 @@
-.github-stars-wrapper {
+/* Hide the three-dots extra menu - its contents are now in the navbar directly */
+.VPNavBarExtra {
+  display: none !important;
+}
+
+/* Also hide the default appearance toggle since we render our own */
+.VPNavBarAppearance {
+  display: none !important;
+}
+
+/* Right side of navbar: toggle + GitHub button */
+.nav-bar-right {
   display: flex;
   align-items: center;
+  gap: 12px;
   margin-left: 16px;
 }
 
-.github-stars-btn {
+/* GitHub button group */
+.github-btn-wrapper {
+  display: flex;
+  align-items: stretch;
+  height: 30px;
+}
+
+.github-btn {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 4px 12px;
+  padding: 0 10px;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
-  line-height: 20px;
+  line-height: 30px;
   color: var(--vp-c-text-1);
   background: var(--vp-c-bg-soft);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 6px 0 0 6px;
+  border-radius: 6px;
   text-decoration: none;
-  transition: background 0.2s, border-color 0.2s;
+  transition: border-color 0.25s, background 0.25s;
   white-space: nowrap;
 }
 
-.github-stars-btn:hover {
+.github-btn:hover {
   background: var(--vp-c-bg-mute);
   border-color: var(--vp-c-text-3);
 }
 
-.github-stars-btn svg {
+.github-icon {
-  color: var(--vp-c-yellow-2, #d4a72c);
+  opacity: 0.85;
 }
 
-.github-stars-count {
+.github-btn-label {
+  margin-top: -1px;
+}
+
+/* Star count badge - attached to right side of button */
+.github-btn-count {
   display: flex;
   align-items: center;
-  padding: 4px 10px;
+  padding: 0 8px;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
-  line-height: 20px;
+  line-height: 30px;
   color: var(--vp-c-text-2);
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
   border-left: none;
   border-radius: 0 6px 6px 0;
   text-decoration: none;
-  transition: color 0.2s, border-color 0.2s;
+  transition: color 0.25s;
   white-space: nowrap;
 }
 
-.github-stars-count:hover {
+.github-btn-count:hover {
   color: var(--vp-c-brand-1);
 }
 
-/* When there's no count yet, round all corners on the button */
+/* When count is present, left-button gets flat right edge */
-.github-stars-btn:only-child {
+.github-btn-wrapper .github-btn:first-child:not(:last-child) {
-  border-radius: 6px;
+  border-radius: 6px 0 0 6px;
 }
 
-/* Hide on very small screens to avoid crowding */
+/* Hide stars on small screens, keep toggle */
 @media (max-width: 640px) {
-  .github-stars-wrapper {
+  .github-btn-wrapper {
     display: none;
   }
 }