feat(ui): added stars count

src/components/Header.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SubmitToolModal } from "./SubmitToolModal";
 
 interface HeaderProps {
@@ -8,10 +8,31 @@ interface HeaderProps {
 
 export function Header({ toolCount, categoryCount }: HeaderProps) {
   const [modalOpen, setModalOpen] = useState(false);
+  const [starsCount, setStarsCount] = useState(0);
+
+  useEffect(() => {
+    fetch("https://api.github.com/repos/BraveOPotato/FckSignups")
+      .then((data) => data.json())
+      .then((json) => setStarsCount(json.stargazers_count));
+  }, []);
 
   return (
     <>
       <header className="site-header">
+        <div className="stars-button-container">
+          <a href="https://github.com/BraveOPotato/FckSignups">
+            <button className="submit-tool-button">
+              {starsCount}
+              <svg
+                className="star-svg"
+                viewBox="0 0 576 512"
+                fill="currentColor"
+              >
+                <path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
+              </svg>
+            </button>
+          </a>
+        </div>
         <div className="header-grid">
           <div className="brand-block">
             <h1>
@@ -23,9 +44,9 @@ export function Header({ toolCount, categoryCount }: HeaderProps) {
             <div className="tagline-block">
               <p className="tagline-main">Open Source Tools. Zero Bullsh*t.</p>
               <p className="tagline-sub">
-                A curated collection of open-source tools you can use instantly in
-                your browser — no accounts, no emails, no tracking. Just tools
-                that work.
+                A curated collection of open-source tools you can use instantly
+                in your browser — no accounts, no emails, no tracking. Just
+                tools that work.
               </p>
             </div>
           </div>
@@ -37,10 +58,6 @@ export function Header({ toolCount, categoryCount }: HeaderProps) {
             >
               SUBMIT A TOOL
             </button>
-            <div className="stat-row">
-              <span className="stat-dot" />
-              LIVE INDEX
-            </div>
             <div className="stat-row">
               {String(toolCount).padStart(3, "0")} TOOLS LOADED
             </div>

src/index.css

@@ -83,12 +83,24 @@ body::after {
 /* ===== HEADER ===== */
 .site-header {
     position: relative;
-    padding: 4rem 1.5rem 2rem;
+    padding: 3rem 1.5rem 2rem;
     max-width: 1400px;
     margin: 0 auto;
     border-bottom: 2px solid var(--border);
 }
 
+.stars-button-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 2rem;
+}
+
+.submit-tool-button .star-svg {
+    aspect-ratio: 1/1;
+    color: var(--text);
+    width: 0.7rem;
+}
+
 .header-grid {
     display: grid;
     grid-template-columns: 1fr auto;
@@ -106,18 +118,6 @@ body::after {
     position: relative;
 }
 
-.brand-block::before {
-    content: "///";
-    position: absolute;
-    top: -1.5rem;
-    left: 0;
-    font-family: var(--font-mono);
-    font-size: 0.75rem;
-    color: var(--accent);
-    letter-spacing: 0.2em;
-    animation: blink 2s infinite;
-}
-
 @keyframes blink {
     0%,
     100% {
@@ -816,7 +816,6 @@ footer {
     }
 }
 
-
 /* ===== SUBMIT TOOL MODAL ===== */
 
 .modal-overlay {
@@ -833,14 +832,20 @@ footer {
 }
 
 @keyframes modal-fade-in {
-    from { opacity: 0; }
-    to   { opacity: 1; }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 .modal-panel {
     background: var(--surface);
     border: 1px solid var(--border-light);
-    box-shadow: 0 0 0 1px var(--accent), 8px 8px 0 var(--accent);
+    box-shadow:
+        0 0 0 1px var(--accent),
+        8px 8px 0 var(--accent);
     width: 100%;
     max-width: 520px;
     max-height: 90vh;
@@ -850,8 +855,14 @@ footer {
 }
 
 @keyframes modal-slide-in {
-    from { transform: translateY(12px); opacity: 0; }
-    to   { transform: translateY(0);    opacity: 1; }
+    from {
+        transform: translateY(12px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
 }
 
 .modal-header {
@@ -885,7 +896,9 @@ footer {
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: color 0.2s, border-color 0.2s;
+    transition:
+        color 0.2s,
+        border-color 0.2s;
     flex-shrink: 0;
 }
 
@@ -944,7 +957,9 @@ footer {
     padding: 0.55rem 0.75rem;
     width: 100%;
     outline: none;
-    transition: border-color 0.2s, box-shadow 0.2s;
+    transition:
+        border-color 0.2s,
+        box-shadow 0.2s;
     border-radius: 0;
 }
 
@@ -1004,7 +1019,10 @@ footer {
     border: none;
     padding: 0.7rem 1.25rem;
     cursor: pointer;
-    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+        background 0.2s,
+        color 0.2s,
+        box-shadow 0.2s;
     margin-top: 0.25rem;
     box-shadow: 3px 3px 0 rgba(255, 0, 64, 0.3);
 }