@tscircuit/fake-snippets 0.0.100 → 0.0.101

package/dist/index.d.ts

@@ -1073,7 +1073,7 @@ declare const createDatabase: ({ seed }?: {
         datasheet_pdf_urls: string[] | null;
         ai_description: string | null;
     }[];
-}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "addOrderQuote" | "getOrderQuoteById" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "searchPackages" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId" | "updatePackageReleaseFsSha" | "addAiReview" | "updateAiReview" | "getAiReviewById" | "listAiReviews" | "addDatasheet" | "getDatasheetById" | "getDatasheetByChipName" | "listDatasheets" | "updateDatasheet"> & {
+}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "addOrderQuote" | "getOrderQuoteById" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "searchPackages" | "searchAccounts" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId" | "updatePackageReleaseFsSha" | "addAiReview" | "updateAiReview" | "getAiReviewById" | "listAiReviews" | "addDatasheet" | "getDatasheetById" | "getDatasheetByChipName" | "listDatasheets" | "updateDatasheet"> & {
     addOrder: (order: Omit<Order, "order_id">) => Order;
     getOrderById: (orderId: string) => Order | undefined;
     getOrderFilesByOrderId: (orderId: string) => OrderFile[];
@@ -1121,6 +1121,7 @@ declare const createDatabase: ({ seed }?: {
     }) => Snippet | undefined;
     searchSnippets: (query: string) => Snippet[];
     searchPackages: (query: string) => Package[];
+    searchAccounts: (query: string, limit?: number) => Account[];
     deleteSnippet: (snippetId: string) => boolean;
     addSession: (session: Omit<Session, "session_id">) => Session;
     getSessions: ({ account_id, is_cli_session, }: {
@@ -1426,7 +1427,7 @@ declare const createDatabase: ({ seed }?: {
         datasheet_pdf_urls: string[] | null;
         ai_description: string | null;
     }[];
-}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "addOrderQuote" | "getOrderQuoteById" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "searchPackages" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId" | "updatePackageReleaseFsSha" | "addAiReview" | "updateAiReview" | "getAiReviewById" | "listAiReviews" | "addDatasheet" | "getDatasheetById" | "getDatasheetByChipName" | "listDatasheets" | "updateDatasheet"> & {
+}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "addOrderQuote" | "getOrderQuoteById" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "searchPackages" | "searchAccounts" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId" | "updatePackageReleaseFsSha" | "addAiReview" | "updateAiReview" | "getAiReviewById" | "listAiReviews" | "addDatasheet" | "getDatasheetById" | "getDatasheetByChipName" | "listDatasheets" | "updateDatasheet"> & {
     addOrder: (order: Omit<Order, "order_id">) => Order;
     getOrderById: (orderId: string) => Order | undefined;
     getOrderFilesByOrderId: (orderId: string) => OrderFile[];
@@ -1474,6 +1475,7 @@ declare const createDatabase: ({ seed }?: {
     }) => Snippet | undefined;
     searchSnippets: (query: string) => Snippet[];
     searchPackages: (query: string) => Package[];
+    searchAccounts: (query: string, limit?: number) => Account[];
     deleteSnippet: (snippetId: string) => boolean;
     addSession: (session: Omit<Session, "session_id">) => Session;
     getSessions: ({ account_id, is_cli_session, }: {

package/dist/index.js

@@ -2798,6 +2798,31 @@ var initializer = combine(databaseSchema.parse({}), (set, get) => ({
     ];
     return matchingPackages;
   },
+  searchAccounts: (query, limit) => {
+    const state = get();
+    const lowercaseQuery = query.toLowerCase();
+    const accountsWithPublicPackages = /* @__PURE__ */ new Set();
+    state.packages.filter((pkg) => pkg.is_public === true).forEach((pkg) => {
+      if (pkg.creator_account_id) {
+        accountsWithPublicPackages.add(pkg.creator_account_id);
+      }
+      if (pkg.owner_github_username) {
+        const account = state.accounts.find(
+          (acc) => acc.github_username === pkg.owner_github_username
+        );
+        if (account) {
+          accountsWithPublicPackages.add(account.account_id);
+        }
+      }
+    });
+    const matchingAccounts = state.accounts.filter((account) => {
+      if (!accountsWithPublicPackages.has(account.account_id)) {
+        return false;
+      }
+      return account.github_username.toLowerCase().includes(lowercaseQuery);
+    }).slice(0, limit || 50);
+    return matchingAccounts;
+  },
   deleteSnippet: (snippetId) => {
     let deleted = false;
     set((state) => {

package/fake-snippets-api/lib/db/db-client.ts

@@ -1019,6 +1019,38 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
 
     return matchingPackages
   },
+  searchAccounts: (query: string, limit?: number): Account[] => {
+    const state = get()
+    const lowercaseQuery = query.toLowerCase()
+
+    const accountsWithPublicPackages = new Set<string>()
+    state.packages
+      .filter((pkg) => pkg.is_public === true)
+      .forEach((pkg) => {
+        if (pkg.creator_account_id) {
+          accountsWithPublicPackages.add(pkg.creator_account_id)
+        }
+        if (pkg.owner_github_username) {
+          const account = state.accounts.find(
+            (acc) => acc.github_username === pkg.owner_github_username,
+          )
+          if (account) {
+            accountsWithPublicPackages.add(account.account_id)
+          }
+        }
+      })
+
+    const matchingAccounts = state.accounts
+      .filter((account) => {
+        if (!accountsWithPublicPackages.has(account.account_id)) {
+          return false
+        }
+        return account.github_username.toLowerCase().includes(lowercaseQuery)
+      })
+      .slice(0, limit || 50)
+
+    return matchingAccounts
+  },
   deleteSnippet: (snippetId: string): boolean => {
     let deleted = false
     set((state) => {

package/fake-snippets-api/routes/api/accounts/search.ts

@@ -0,0 +1,20 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import { accountSchema } from "fake-snippets-api/lib/db/schema"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session",
+  jsonBody: z.object({
+    query: z.string(),
+    limit: z.number().optional().default(50),
+  }),
+  jsonResponse: z.object({
+    ok: z.boolean(),
+    accounts: z.array(accountSchema),
+  }),
+})(async (req, ctx) => {
+  const { query, limit } = req.jsonBody
+  const accounts = ctx.db.searchAccounts(query, limit)
+  return ctx.json({ accounts, ok: true })
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.100",
+  "version": "0.0.101",
   "type": "module",
   "repository": {
     "type": "git",
@@ -83,7 +83,7 @@
     "@tscircuit/mm": "^0.0.8",
     "@tscircuit/pcb-viewer": "^1.11.194",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "0.0.725",
+    "@tscircuit/runframe": "0.0.736",
     "@tscircuit/schematic-viewer": "^2.0.21",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",

package/src/components/CmdKMenu.tsx

@@ -5,7 +5,7 @@ import { useHotkeyCombo } from "@/hooks/use-hotkey"
 import { useNotImplementedToast } from "@/hooks/use-toast"
 import { fuzzyMatch } from "@/components/ViewPackagePage/utils/fuzz-search"
 import { Command } from "cmdk"
-import { Package } from "fake-snippets-api/lib/db/schema"
+import { Package, Account } from "fake-snippets-api/lib/db/schema"
 import React, { useCallback, useEffect, useMemo, useRef } from "react"
 import { useQuery } from "react-query"
 import {
@@ -16,6 +16,8 @@ import {
   Sparkles,
   Clock,
   ArrowRight,
+  Star,
+  User,
 } from "lucide-react"
 import { DialogTitle, DialogDescription } from "@/components/ui/dialog"
 
@@ -40,6 +42,11 @@ interface ScoredPackage extends Package {
   matches: number[]
 }
 
+interface ScoredAccount extends Account {
+  score: number
+  matches: number[]
+}
+
 const CmdKMenu = () => {
   const [open, setOpen] = React.useState(false)
   const [searchQuery, setSearchQuery] = React.useState("")
@@ -113,13 +120,42 @@ const CmdKMenu = () => {
     ["packageSearch", searchQuery],
     async () => {
       if (!searchQuery) return []
-      const { data } = await axios.post("/packages/search", {
-        query: searchQuery,
-      })
-      return data.packages || []
+      try {
+        const { data } = await axios.post("/packages/search", {
+          query: searchQuery,
+        })
+        return data.packages || []
+      } catch (error) {
+        console.warn("Failed to fetch packages:", error)
+        return []
+      }
     },
     {
       enabled: Boolean(searchQuery),
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
+  )
+
+  const { data: allAccounts = [], isLoading: isSearchingAccounts } = useQuery(
+    ["accountSearch", searchQuery],
+    async () => {
+      if (!searchQuery) return []
+      try {
+        const { data } = await axios.post("/accounts/search", {
+          query: searchQuery,
+          limit: 5,
+        })
+        return data.accounts || []
+      } catch (error) {
+        console.warn("Failed to fetch accounts:", error)
+        return []
+      }
+    },
+    {
+      enabled: Boolean(searchQuery) && Boolean(currentUser),
+      retry: false,
+      refetchOnWindowFocus: false,
     },
   )
 
@@ -133,20 +169,43 @@ const CmdKMenu = () => {
       })
       .filter((pkg: ScoredPackage) => pkg.score >= 0)
       .sort((a: ScoredPackage, b: ScoredPackage) => b.score - a.score)
-      .slice(0, 8)
+      .slice(0, 6)
   }, [allPackages, searchQuery])
 
+  const accountSearchResults = useMemo((): ScoredAccount[] => {
+    if (!searchQuery || !allAccounts.length) return []
+
+    return allAccounts
+      .map((account: Account) => {
+        const { score, matches } = fuzzyMatch(
+          searchQuery,
+          account.github_username,
+        )
+        return { ...account, score, matches }
+      })
+      .filter((account: ScoredAccount) => account.score >= 0)
+      .sort((a: ScoredAccount, b: ScoredAccount) => b.score - a.score)
+      .slice(0, 5)
+  }, [allAccounts, searchQuery])
+
   const { data: recentPackages = [] } = useQuery<Package[]>(
     ["userPackages", currentUser],
     async () => {
       if (!currentUser) return []
-      const response = await axios.post(`/packages/list`, {
-        owner_github_username: currentUser,
-      })
-      return response.data.packages || []
+      try {
+        const response = await axios.post(`/packages/list`, {
+          owner_github_username: currentUser,
+        })
+        return response.data.packages || []
+      } catch (error) {
+        console.warn("Failed to fetch recent packages:", error)
+        return []
+      }
     },
     {
       enabled: !!currentUser && !searchQuery,
+      retry: false,
+      refetchOnWindowFocus: false,
     },
   )
 
@@ -195,7 +254,7 @@ const CmdKMenu = () => {
 
   const allItems = useMemo(() => {
     const items: Array<{
-      type: "package" | "recent" | "template" | "blank" | "import"
+      type: "package" | "account" | "recent" | "template" | "blank" | "import"
       item: any
       disabled?: boolean
     }> = []
@@ -206,6 +265,12 @@ const CmdKMenu = () => {
       })
     }
 
+    if (searchQuery && accountSearchResults.length > 0) {
+      accountSearchResults.forEach((account) => {
+        items.push({ type: "account", item: account })
+      })
+    }
+
     if (!searchQuery && recentPackages.length > 0) {
       recentPackages.slice(0, 6).forEach((pkg) => {
         items.push({ type: "recent", item: pkg })
@@ -225,7 +290,13 @@ const CmdKMenu = () => {
     })
 
     return items
-  }, [searchQuery, searchResults, recentPackages, filteredStaticOptions])
+  }, [
+    searchQuery,
+    searchResults,
+    accountSearchResults,
+    recentPackages,
+    filteredStaticOptions,
+  ])
 
   useHotkeyCombo("cmd+k", () => {
     setOpen((prev) => !prev)
@@ -285,6 +356,10 @@ const CmdKMenu = () => {
           window.location.href = `/${item.owner_github_username}/${item.unscoped_name}`
           setOpen(false)
           break
+        case "account":
+          window.location.href = `/${item.github_username}`
+          setOpen(false)
+          break
         case "blank":
         case "template":
           if (!item.disabled) {
@@ -362,7 +437,11 @@ const CmdKMenu = () => {
                   )}
                 </div>
               </div>
-              <div className="flex items-center gap-1 flex-shrink-0">
+              <div className="flex items-center gap-2 flex-shrink-0">
+                <div className="flex items-center gap-1 text-gray-500">
+                  <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+                  <span className="text-xs">{data.star_count ?? 0}</span>
+                </div>
                 <span className="text-xs text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded">
                   package
                 </span>
@@ -371,6 +450,41 @@ const CmdKMenu = () => {
             </div>
           )
 
+        case "account":
+          return (
+            <div
+              key={`account-${data.account_id}`}
+              ref={isSelected ? selectedItemRef : null}
+              className={baseClasses}
+              onClick={() => !disabled && handleItemSelect(item)}
+            >
+              <div className="flex items-center gap-2 min-w-0">
+                <img
+                  src={`https://github.com/${data.github_username}.png`}
+                  alt={`${data.github_username} avatar`}
+                  className="w-6 h-6 rounded-full flex-shrink-0"
+                  onError={(e) => {
+                    const target = e.target as HTMLImageElement
+                    target.style.display = "none"
+                    target.nextElementSibling?.classList.remove("hidden")
+                  }}
+                />
+                <User className="w-6 h-6 text-gray-400 flex-shrink-0 hidden" />
+                <div className="flex flex-col min-w-0">
+                  <span className="font-medium text-gray-900 truncate">
+                    {renderHighlighted(data, data.github_username)}
+                  </span>
+                </div>
+              </div>
+              <div className="flex items-center gap-1 flex-shrink-0">
+                <span className="text-xs text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded">
+                  user
+                </span>
+                {isSelected && <ArrowRight className="w-3 h-3 text-gray-400" />}
+              </div>
+            </div>
+          )
+
         case "blank":
         case "template":
           return (
@@ -464,7 +578,7 @@ const CmdKMenu = () => {
         </div>
 
         <Command.List className="max-h-80 overflow-y-auto p-2 space-y-4">
-          {isSearching ? (
+          {isSearching || isSearchingAccounts ? (
             <Command.Loading className="p-6 text-center text-gray-500">
               <div className="flex items-center justify-center gap-2">
                 <div className="w-3 h-3 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin"></div>
@@ -476,7 +590,7 @@ const CmdKMenu = () => {
               {searchQuery && searchResults.length > 0 && (
                 <div>
                   <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2 px-2">
-                    Search Results
+                    Packages
                   </h3>
                   <div className="space-y-1">
                     {searchResults.slice(0, 8).map((pkg, localIndex) => {
@@ -490,6 +604,25 @@ const CmdKMenu = () => {
                 </div>
               )}
 
+              {searchQuery && accountSearchResults.length > 0 && (
+                <div>
+                  <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2 px-2">
+                    Users
+                  </h3>
+                  <div className="space-y-1">
+                    {accountSearchResults
+                      .slice(0, 5)
+                      .map((account, localIndex) => {
+                        const globalIndex = searchResults.length + localIndex
+                        return renderItem(
+                          { type: "account", item: account },
+                          globalIndex,
+                        )
+                      })}
+                  </div>
+                </div>
+              )}
+
               {!searchQuery && recentPackages.length > 0 && (
                 <div>
                   <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2 px-2 flex items-center gap-1">
@@ -518,7 +651,7 @@ const CmdKMenu = () => {
                       (template, localIndex) => {
                         const globalIndex =
                           (searchQuery
-                            ? searchResults.length
+                            ? searchResults.length + accountSearchResults.length
                             : recentPackages.length) + localIndex
                         return renderItem(
                           {
@@ -544,7 +677,7 @@ const CmdKMenu = () => {
                       (template, localIndex) => {
                         const globalIndex =
                           (searchQuery
-                            ? searchResults.length
+                            ? searchResults.length + accountSearchResults.length
                             : recentPackages.length) +
                           filteredStaticOptions.blankTemplates.length +
                           localIndex
@@ -568,7 +701,7 @@ const CmdKMenu = () => {
                       (option, localIndex) => {
                         const globalIndex =
                           (searchQuery
-                            ? searchResults.length
+                            ? searchResults.length + accountSearchResults.length
                             : recentPackages.length) +
                           filteredStaticOptions.blankTemplates.length +
                           filteredStaticOptions.templates.length +
@@ -585,10 +718,12 @@ const CmdKMenu = () => {
 
               {searchQuery &&
                 !searchResults.length &&
+                !accountSearchResults.length &&
                 !filteredStaticOptions.blankTemplates.length &&
                 !filteredStaticOptions.templates.length &&
                 !filteredStaticOptions.importOptions.length &&
-                !isSearching && (
+                !isSearching &&
+                !isSearchingAccounts && (
                   <Command.Empty className="py-8 text-center">
                     <div className="text-gray-400 mb-1">No results found</div>
                     <div className="text-gray-500 text-xs">

package/src/components/Header2.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button"
-import { CircuitBoard, Search } from "lucide-react"
+import { CircuitBoard, Search, Menu, X } from "lucide-react"
 import { Link } from "wouter"
 import { PrefetchPageLink } from "./PrefetchPageLink"
 import { HeaderLogin } from "./HeaderLogin"
@@ -53,10 +53,12 @@ const SearchButtonComponent = () => {
 }
 
 export const Header2 = () => {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const isLoggedIn = useGlobalStore((state) => Boolean(state.session))
+
   return (
     <>
-      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <header className="sticky top-0 z-50 w-full border-b bg-white md:bg-white/80 md:backdrop-blur supports-[backdrop-filter]:md:bg-white/60">
         <div className="container mx-auto flex h-16 items-center justify-between px-2 md:px-6">
           <PrefetchPageLink
             href="/"
@@ -65,23 +67,17 @@ export const Header2 = () => {
             <CircuitBoard className="h-6 w-6" />
             <span className="text-lg font-bold">tscircuit</span>
           </PrefetchPageLink>
-          <nav className="flex md:hidden">
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex gap-6">
             {isLoggedIn && (
-              <Link
+              <PrefetchPageLink
                 className="text-sm font-medium hover:underline underline-offset-4"
                 href="/dashboard"
               >
                 Dashboard
-              </Link>
+              </PrefetchPageLink>
             )}
-          </nav>
-          <nav className="hidden md:flex gap-6">
-            <PrefetchPageLink
-              className="text-sm font-medium hover:underline underline-offset-4"
-              href="/dashboard"
-            >
-              Dashboard
-            </PrefetchPageLink>
             <PrefetchPageLink
               className="text-sm font-medium hover:underline underline-offset-4"
               href="/quickstart"
@@ -94,12 +90,6 @@ export const Header2 = () => {
             >
               Datasheets
             </PrefetchPageLink>
-            {/* <a
-            className="text-sm font-medium hover:underline underline-offset-4"
-            href="https://github.com/tscircuit/tscircuit"
-          >
-            Github
-          </a> */}
             <a
               className="text-sm font-medium hover:underline underline-offset-4"
               href="https://docs.tscircuit.com"
@@ -119,16 +109,107 @@ export const Header2 = () => {
               Contact
             </a>
           </nav>
-          <div className="flex items-center gap-4">
+
+          {/* Desktop Right Side */}
+          <div className="hidden md:flex items-center gap-4">
             <SearchButtonComponent />
-            {isLoggedIn && (
-              <div className="hidden sm:block">
-                <HeaderDropdown />
-              </div>
-            )}
+            {isLoggedIn && <HeaderDropdown />}
             <HeaderLogin />
           </div>
+
+          {/* Mobile Right Side */}
+          <div className="flex md:hidden items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => (window.location.href = "/search")}
+              className="h-8 w-8"
+              aria-label="Go to search"
+            >
+              <Search className="size-4" />
+            </Button>
+            {isLoggedIn ? (
+              <HeaderLogin />
+            ) : (
+              <PrefetchPageLink href="/quickstart">
+                <Button size="sm" className="text-xs px-3 py-1">
+                  Get Started
+                </Button>
+              </PrefetchPageLink>
+            )}
+            <button
+              className="p-2"
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
+            >
+              {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
+            </button>
+          </div>
         </div>
+
+        {/* Mobile Menu */}
+        {mobileMenuOpen && (
+          <div className="md:hidden border-t bg-white ">
+            <div className="container mx-auto px-4 py-3">
+              <nav className="mb-4">
+                <div className="flex flex-col items-center gap-1">
+                  {isLoggedIn && (
+                    <PrefetchPageLink
+                      className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
+                      href="/dashboard"
+                      onClick={() => setMobileMenuOpen(false)}
+                    >
+                      Dashboard
+                    </PrefetchPageLink>
+                  )}
+                  <PrefetchPageLink
+                    className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
+                    href="/quickstart"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    Editor
+                  </PrefetchPageLink>
+                  <PrefetchPageLink
+                    className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
+                    href="/datasheets"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    Datasheets
+                  </PrefetchPageLink>
+                  <a
+                    className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
+                    href="https://docs.tscircuit.com"
+                  >
+                    Docs
+                  </a>
+                  <a
+                    className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
+                    href="https://tscircuit.com/join"
+                  >
+                    Discord
+                  </a>
+                  <a
+                    className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
+                    href="mailto:hello@tscircuit.com"
+                  >
+                    Contact
+                  </a>
+                </div>
+              </nav>
+              <div className="flex flex-col items-center gap-4 pt-4 border-t border-gray-200">
+                {isLoggedIn ? (
+                  <div className="w-full flex justify-center">
+                    <HeaderDropdown />
+                  </div>
+                ) : (
+                  <div className="w-full flex justify-center">
+                    <HeaderLogin />
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
       </header>
       <CmdKMenu />
       <Analytics />