feat(logo): clicking logo resets search query

src/App.tsx

@@ -33,6 +33,7 @@ export default function App() {
         <Header
           toolCount={tools.length}
           categoryCount={Math.max(0, categories.length - 1)}
+          setSearchQuery={setSearchQuery}
         />
 
         <Controls

src/components/Header.tsx

@@ -4,9 +4,14 @@ import { useModal } from "../hooks/useModal";
 interface HeaderProps {
   toolCount: number;
   categoryCount: number;
+  setSearchQuery: (query: string) => void;
 }
 
-export function Header({ toolCount, categoryCount }: HeaderProps) {
+export function Header({
+  toolCount,
+  categoryCount,
+  setSearchQuery,
+}: HeaderProps) {
   const { showModalWithID } = useModal();
   const [starsCount, setStarsCount] = useState(0);
 
@@ -35,7 +40,10 @@ export function Header({ toolCount, categoryCount }: HeaderProps) {
         </div>
         <div className="header-grid">
           <div className="brand-block">
-            <h1>
+            <h1
+              style={{ cursor: "pointer" }}
+              onClick={() => setSearchQuery("")}
+            >
               <span className="fck glitch" data-text="F*CK">
                 F*CK
               </span>

src/index.css

@@ -158,6 +158,7 @@ body::after {
 }
 
 h1 {
+    width: fit-content;
     font-family: var(--font-display);
     font-size: clamp(2.5rem, 6vw, 5rem);
     font-weight: 700;