⚙️ Refactor GitHub star count feature and update layout components

src/components/githubLink.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  import { cn } from "@/utils/cn";
+  import { globals } from "@/globals";
+  import { buttonVariants } from "@/components/ui/button";
+  import Github from "@/components/logos/github.svelte";
+
+  async function getGithubStarCount() {
+    try {
+      const res = await fetch(globals.apiGithub.url);
+      const data = await res.json();
+      return data.repo?.stars ?? globals.apiGithub.fallback;
+    } catch (error) {
+      console.error(error);
+      return globals.apiGithub.fallback;
+    }
+  }
+
+  let stars = $state(globals.apiGithub.fallback);
+
+  onMount(async () => {
+    stars = await getGithubStarCount();
+  });
+</script>
+
+<a
+  target="_blank"
+  title="GitHub Repository"
+  href={globals.githubUrl}
+  class={cn(
+    buttonVariants({ variant: "ghost" }),
+    "w-fit hover:bg-neutral-200 dark:hover:bg-neutral-800",
+  )}
+>
+  <Github size={20} />
+  <span class="text-neutral-600 dark:text-neutral-400">
+    {stars >= 1000 ? `${(stars / 1000).toFixed(1)}k` : stars.toLocaleString()}
+  </span>
+</a>

src/components/layout/header.svelte

@@ -5,7 +5,6 @@
   import ModeToggle from "@/components/modeToggle.svelte";
 
   import Svgl from "@/components/logos/svgl.svelte";
-  import Github from "@/components/logos/github.svelte";
   import Twitter from "@/components/logos/twitter.svelte";
 
   import { Separator } from "@/components/ui/separator";
@@ -13,13 +12,8 @@
   import SvglVersion from "@/components/svglVersion.svelte";
   import SendIcon from "@/components/ui/moving-icons/send-icon.svelte";
   import SidebarMobileMenu from "@/components/layout/sidebarMobileMenu.svelte";
-  import SettingsMenu from "../settings/settingsMenu.svelte";
-
-  interface HeaderProps {
-    githubStars?: number;
-  }
-
-  let { githubStars }: HeaderProps = $props();
+  import SettingsMenu from "@/components/settings/settingsMenu.svelte";
+  import GithubLink from "@/components/githubLink.svelte";
 </script>
 
 <header
@@ -60,36 +54,7 @@
       </div>
       <div class="hidden h-5 items-center space-x-2 md:flex">
         <Separator orientation="vertical" />
-        {#if githubStars !== undefined}
-          <a
-            target="_blank"
-            title="GitHub Repository"
-            href={globals.githubUrl}
-            class={cn(
-              buttonVariants({ variant: "ghost" }),
-              "w-fit hover:bg-neutral-200 dark:hover:bg-neutral-800",
-            )}
-          >
-            <Github size={20} />
-            <span class="text-neutral-600 dark:text-neutral-400">
-              {githubStars >= 1000
-                ? `${(githubStars / 1000).toFixed(1)}k`
-                : githubStars.toLocaleString()}
-            </span>
-          </a>
-        {:else}
-          <a
-            target="_blank"
-            title="GitHub Repository"
-            href={globals.githubUrl}
-            class={cn(
-              buttonVariants({ variant: "ghost", size: "icon" }),
-              "hover:bg-neutral-200 dark:hover:bg-neutral-800",
-            )}
-          >
-            <Github size={20} />
-          </a>
-        {/if}
+        <GithubLink />
         <Separator orientation="vertical" />
         <a
           target="_blank"