@tscircuit/fake-snippets 0.0.89 → 0.0.91

package/src/components/package-port/CodeEditorHeader.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from "react"
 import { Button } from "@/components/ui/button"
 import { handleManualEditsImportWithSupportForMultipleFiles } from "@/lib/handleManualEditsImportWithSupportForMultipleFiles"
-import { useImportPackageDialog } from "@/components/dialogs/import-package-dialog"
+import { useImportComponentDialog } from "@/components/dialogs/import-component-dialog"
 import { useToast } from "@/hooks/use-toast"
 import {
   DropdownMenu,
@@ -19,13 +19,16 @@ import {
   SelectValue,
 } from "../ui/select"
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
-import { Package } from "fake-snippets-api/lib/db/schema"
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
+import { convertRawEasyToTsx, fetchEasyEDAComponent } from "easyeda/browser"
+import { ComponentSearchResult } from "@tscircuit/runframe/runner"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { ICreateFileProps, ICreateFileResult } from "@/hooks/useFileManagement"
 
 export type FileName = string
 
@@ -36,21 +39,28 @@ interface CodeEditorHeaderProps {
   fileSidebarState: ReturnType<typeof useState<boolean>>
   handleFileChange: (filename: FileName) => void
   entrypointFileName?: string
+  appendNewFile: (path: string, content: string) => void
+  createFile: (props: ICreateFileProps) => ICreateFileResult
+  aiAutocompleteState: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
 }
 
 export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
   currentFile,
   files,
   updateFileContent,
+  appendNewFile,
   fileSidebarState,
   handleFileChange,
   entrypointFileName = "index.tsx",
+  createFile,
+  aiAutocompleteState,
 }) => {
-  const { Dialog: ImportPackageDialog, openDialog: openImportDialog } =
-    useImportPackageDialog()
-  const { toast } = useToast()
+  const { Dialog: ImportComponentDialog, openDialog: openImportDialog } =
+    useImportComponentDialog()
+  const { toast, toastLibrary } = useToast()
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
-  const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = useState(false)
+  const API_BASE = usePackagesBaseApiUrl()
+  const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = aiAutocompleteState
 
   const handleFormatFile = useCallback(() => {
     if (!window.prettier || !window.prettierPlugins) return
@@ -141,6 +151,49 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
     }
   }, [currentFile, files, toast, updateFileContent])
 
+  const handleComponentImport = async (component: ComponentSearchResult) => {
+    if (component.source == "tscircuit.com") {
+      const newContent = `import {} from "@tsci/${component.owner}.${component.name}"\n${files[currentFile || ""]}`
+      updateFileContent(currentFile, newContent)
+    }
+    if (component.source == "jlcpcb") {
+      const jlcpcbComponent = await fetchEasyEDAComponent("C1", {
+        fetch: ((url, options: any) => {
+          return fetch(`${API_BASE}/proxy`, {
+            ...options,
+            headers: {
+              ...options?.headers,
+              "X-Target-Url": url.toString(),
+              "X-Sender-Origin": options?.headers?.origin ?? "",
+              "X-Sender-Host": options?.headers?.host ?? "https://easyeda.com",
+              "X-Sender-Referer": options?.headers?.referer ?? "",
+              "X-Sender-User-Agent": options?.headers?.userAgent ?? "",
+              "X-Sender-Cookie": options?.headers?.cookie ?? "",
+            },
+          })
+        }) as typeof fetch,
+      })
+      const tsxComponent = await convertRawEasyToTsx(jlcpcbComponent)
+      let componentName = component.name.replace(/ /g, "-")
+      if (files[`${componentName}.tsx`] || files[`./${componentName}.tsx`]) {
+        componentName = `${componentName}-1`
+      }
+      const createFileResult = createFile({
+        newFileName: `${componentName}.tsx`,
+        content: tsxComponent,
+        onError: (error) => {
+          throw error
+        },
+        openFile: false,
+      })
+      if (!createFileResult.newFileCreated) {
+        throw new Error("Failed to create file")
+      }
+      const newContent = `import ${componentName.replace(/-/g, "")} from "./${componentName}.tsx"\n${files[currentFile || ""]}`
+      updateFileContent(currentFile, newContent)
+    }
+  }
+
   return (
     <>
       <div className="flex items-center gap-2 px-2 border-b border-gray-200">
@@ -239,15 +292,16 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
               </DropdownMenuContent>
             </DropdownMenu>
           )}
+
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
                   size="sm"
                   variant="ghost"
-                  onClick={() =>
-                    setAiAutocompleteEnabled(!aiAutocompleteEnabled)
-                  }
+                  onClick={() => {
+                    setAiAutocompleteEnabled((prev) => !prev)
+                  }}
                   className={`relative bg-transparent ${aiAutocompleteEnabled ? "text-gray-600 bg-gray-50" : "text-gray-400"}`}
                 >
                   <Bot className="h-4 w-4" />
@@ -263,6 +317,7 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>
+
           <Button size="sm" variant="ghost" onClick={() => openImportDialog()}>
             Import
           </Button>
@@ -270,10 +325,17 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
             Format
           </Button>
         </div>
-        <ImportPackageDialog
-          onPackageSelected={(pkg: Package) => {
-            const newContent = `import {} from "@tsci/${pkg.owner_github_username}.${pkg.unscoped_name}"\n${files[currentFile || ""]}`
-            updateFileContent(currentFile, newContent)
+        <ImportComponentDialog
+          onComponentSelected={async (component) => {
+            toastLibrary.promise(handleComponentImport(component), {
+              loading: "Importing component...",
+              success: <p>Component imported successfully!</p>,
+              error: (error) => (
+                <p>
+                  Error importing component: {error.message || String(error)}
+                </p>
+              ),
+            })
           }}
         />
       </div>

package/src/components/package-port/EditorNav.tsx

@@ -18,19 +18,16 @@ import { Package } from "fake-snippets-api/lib/db/schema"
 import {
   ChevronDown,
   CodeIcon,
-  Download,
   Edit2,
   Eye,
   EyeIcon,
   File,
   FilePenLine,
   MoreVertical,
-  Package as PackageIcon,
   Pencil,
   Save,
   Share,
   Sidebar,
-  Sparkles,
   Trash2,
   Undo2,
 } from "lucide-react"
@@ -41,7 +38,6 @@ import { useAxios } from "@/hooks/use-axios"
 import { useHotkeyCombo } from "@/hooks/use-hotkey"
 import { useToast } from "@/hooks/use-toast"
 import { useConfirmDeletePackageDialog } from "@/components/dialogs/confirm-delete-package-dialog"
-import { useFilesDialog } from "@/components/dialogs/files-dialog"
 import { useViewTsFilesDialog } from "@/components/dialogs/view-ts-files-dialog"
 import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
 import { TypeBadge } from "@/components/TypeBadge"
@@ -86,7 +82,6 @@ export default function EditorNav({
   } = useUpdatePackageDescriptionDialog()
   const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
     useConfirmDeletePackageDialog()
-  const { Dialog: FilesDialog, openDialog: openFilesDialog } = useFilesDialog()
   const { Dialog: ViewTsFilesDialog, openDialog: openViewTsFilesDialog } =
     useViewTsFilesDialog()
 
@@ -376,13 +371,6 @@ export default function EditorNav({
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
-                <DropdownMenuItem
-                  className="text-xs"
-                  onClick={() => openFilesDialog()}
-                >
-                  <File className="mr-2 h-3 w-3" />
-                  View Files
-                </DropdownMenuItem>
                 <DropdownMenuItem
                   className="text-xs"
                   onClick={() => openupdateDescriptionDialog()}
@@ -395,62 +383,68 @@ export default function EditorNav({
                   onClick={() => openViewTsFilesDialog()}
                 >
                   <File className="mr-2 h-3 w-3" />
-                  [Debug] View TS Files
+                  View Files
                 </DropdownMenuItem>
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger
-                    className="text-xs"
-                    disabled={isChangingType || hasUnsavedChanges}
-                  >
-                    <Edit2 className="mr-2 h-3 w-3" />
-                    {isChangingType ? "Changing..." : "Change Type"}
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuSubContent>
-                    <DropdownMenuItem
-                      className="text-xs"
-                      disabled={currentType === "board" || isChangingType}
-                      onClick={() => handleTypeChange("board")}
-                    >
-                      Board {currentType === "board" && "✓"}
-                    </DropdownMenuItem>
+                {session?.github_username === pkg.owner_github_username && (
+                  <>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger
+                        className="text-xs"
+                        disabled={isChangingType || hasUnsavedChanges}
+                      >
+                        <Edit2 className="mr-2 h-3 w-3" />
+                        {isChangingType ? "Changing..." : "Change Type"}
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuItem
+                          className="text-xs"
+                          disabled={currentType === "board" || isChangingType}
+                          onClick={() => handleTypeChange("board")}
+                        >
+                          Board {currentType === "board" && "✓"}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          className="text-xs"
+                          disabled={currentType === "package" || isChangingType}
+                          onClick={() => handleTypeChange("package")}
+                        >
+                          Module {currentType === "package" && "✓"}
+                        </DropdownMenuItem>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger className="text-xs">
+                        <Edit2 className="mr-2 h-3 w-3" />
+                        Change Package Visibility
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuItem
+                          className="text-xs"
+                          disabled={isPrivate}
+                          onClick={() => updatePackageVisibilityToPrivate(true)}
+                        >
+                          Private {isPrivate && "✓"}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          className="text-xs"
+                          disabled={!isPrivate}
+                          onClick={() =>
+                            updatePackageVisibilityToPrivate(false)
+                          }
+                        >
+                          Public {!isPrivate && "✓"}
+                        </DropdownMenuItem>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
                     <DropdownMenuItem
-                      className="text-xs"
-                      disabled={currentType === "package" || isChangingType}
-                      onClick={() => handleTypeChange("package")}
+                      className="text-xs text-red-600"
+                      onClick={() => openDeleteDialog()}
                     >
-                      Module {currentType === "package" && "✓"}
+                      <Trash2 className="mr-2 h-3 w-3" />
+                      Delete Package
                     </DropdownMenuItem>
-                  </DropdownMenuSubContent>
-                </DropdownMenuSub>
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger className="text-xs">
-                    <Edit2 className="mr-2 h-3 w-3" />
-                    Change Package Visibility
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuSubContent>
-                    <DropdownMenuItem
-                      className="text-xs"
-                      disabled={isPrivate}
-                      onClick={() => updatePackageVisibilityToPrivate(true)}
-                    >
-                      Private {isPrivate && "✓"}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      className="text-xs"
-                      disabled={!isPrivate}
-                      onClick={() => updatePackageVisibilityToPrivate(false)}
-                    >
-                      Public {!isPrivate && "✓"}
-                    </DropdownMenuItem>
-                  </DropdownMenuSubContent>
-                </DropdownMenuSub>
-                <DropdownMenuItem
-                  className="text-xs text-red-600"
-                  onClick={() => openDeleteDialog()}
-                >
-                  <Trash2 className="mr-2 h-3 w-3" />
-                  Delete Package
-                </DropdownMenuItem>
+                  </>
+                )}
                 <DropdownMenuItem className="text-xs text-gray-500" disabled>
                   @tscircuit/core@{tscircuitCorePkg.version}
                 </DropdownMenuItem>
@@ -566,7 +560,6 @@ export default function EditorNav({
         packageName={pkg?.unscoped_name ?? ""}
         packageOwner={pkg?.owner_github_username ?? ""}
       />
-      <FilesDialog snippetId={pkg?.package_id ?? ""} />
       <ViewTsFilesDialog />
     </nav>
   )

package/src/components/package-port/GlobalFindReplace.tsx

@@ -23,7 +23,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
-import type { PackageFile } from "./CodeAndPreview"
+import type { PackageFile } from "@/types/package"
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 
 interface Match {

package/src/components/package-port/QuickOpen.tsx

@@ -8,7 +8,7 @@ import {
   BookOpen,
   FileText,
 } from "lucide-react"
-import type { PackageFile } from "./CodeAndPreview"
+import type { PackageFile } from "@/types/package"
 import { fuzzyMatch } from "../ViewPackagePage/utils/fuzz-search"
 
 interface ScoredFile extends PackageFile {

package/src/hooks/use-axios.ts

@@ -1,10 +1,10 @@
 import axios from "redaxios"
 import { useMemo } from "react"
-import { useSnippetsBaseApiUrl } from "./use-snippets-base-api-url"
 import { useGlobalStore } from "./use-global-store"
+import { usePackagesBaseApiUrl } from "./use-packages-base-api-url"
 
 export const useAxios = () => {
-  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
+  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
   const session = useGlobalStore((s) => s.session)
   return useMemo(() => {
     const instance = axios.create({

package/src/hooks/use-code-completion-ai-api.ts

@@ -1,11 +1,11 @@
 import { useMemo } from "react"
 
 export const useCodeCompletionApi = () => {
-  const codeiumApiKey = useMemo(() => {
+  const openrouterApiKey = useMemo(() => {
     return {
-      apiKey: import.meta.env.VITE_CODIUM_API_KEY,
+      apiKey: import.meta.env.VITE_OPENROUTER_API_KEY,
     }
   }, [])
 
-  return codeiumApiKey
+  return openrouterApiKey
 }

package/src/hooks/use-delete-package.ts

@@ -1,4 +1,4 @@
-import { useMutation } from "react-query"
+import { useMutation, useQueryClient } from "react-query"
 import { useAxios } from "./use-axios"
 import { useToast } from "./use-toast"
 
@@ -7,6 +7,7 @@ export const useDeletePackage = ({
 }: { onSuccess?: () => void } = {}) => {
   const axios = useAxios()
   const { toast } = useToast()
+  const queryClient = useQueryClient()
 
   return useMutation(
     ["deletePackage"],
@@ -22,11 +23,14 @@ export const useDeletePackage = ({
       return response.data
     },
     {
-      onSuccess: () => {
+      onSuccess: (_, variables) => {
         toast({
           title: "Package deleted",
           description: "Package deleted successfully",
         })
+        if (variables?.package_id) {
+          queryClient.invalidateQueries(["packages", variables.package_id])
+        }
         onSuccess?.()
       },
       onError: (error: any) => {

package/src/hooks/use-packages-base-api-url.ts

@@ -0,0 +1,3 @@
+export const usePackagesBaseApiUrl = () => {
+  return import.meta.env.VITE_SNIPPETS_API_URL ?? "/api"
+}

package/src/hooks/use-request-ai-review-mutation.ts

@@ -34,7 +34,7 @@ export const useRequestAiReviewMutation = ({
       onSuccess: ({ package_release, ai_review }) => {
         toast({
           title: "AI review requested",
-          description: "An AI review has been generated.",
+          description: "An AI review has been requested.",
         })
         queryClient.invalidateQueries(["packageRelease"])
         onSuccess?.(package_release, ai_review)

package/src/hooks/use-sign-in.ts

@@ -1,9 +1,9 @@
 import { useGlobalStore } from "./use-global-store"
 import { useIsUsingFakeApi } from "./use-is-using-fake-api"
-import { useSnippetsBaseApiUrl } from "./use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "./use-packages-base-api-url"
 
 export const useSignIn = () => {
-  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
+  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
   const isUsingFakeApi = useIsUsingFakeApi()
   const setSession = useGlobalStore((s) => s.setSession)
   return () => {

package/src/hooks/use-toast.tsx

@@ -63,6 +63,7 @@ function useToast() {
   return {
     toast,
     dismiss: toastLibrary.dismiss,
+    toastLibrary,
   }
 }
 

package/src/hooks/useFileManagement.ts

@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useState, useCallback, useRef } from "react"
 import { isValidFileName } from "@/lib/utils/isValidFileName"
+import { PackageFile } from "@/types/package"
 import {
   DEFAULT_CODE,
   generateRandomPackageName,
-  PackageFile,
-} from "../components/package-port/CodeAndPreview"
+} from "@/lib/utils/package-utils"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import { usePackageFiles } from "./use-package-files"
 import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
@@ -20,7 +20,9 @@ import { encodeFsMapToUrlHash } from "@/lib/encodeFsMapToUrlHash"
 
 export interface ICreateFileProps {
   newFileName: string
+  content?: string
   onError: (error: Error) => void
+  openFile?: boolean
 }
 export interface ICreateFileResult {
   newFileCreated: boolean
@@ -182,6 +184,8 @@ export function useFileManagement({
   const createFile = ({
     newFileName,
     onError,
+    content,
+    openFile = true,
   }: ICreateFileProps): ICreateFileResult => {
     newFileName = newFileName.trim()
     if (!newFileName) {
@@ -206,11 +210,12 @@ export function useFileManagement({
     }
     const updatedFiles = [
       ...(localFiles || []),
-      { path: newFileName, content: "" },
+      { path: newFileName, content: content || "" },
     ]
     setLocalFiles(updatedFiles)
-    // immediately select the newly created file
-    setCurrentFile(newFileName)
+    if (openFile) {
+      setCurrentFile(newFileName)
+    }
     return {
       newFileCreated: true,
     }

package/src/lib/utils/findTargetFile.ts

@@ -1,4 +1,4 @@
-import { PackageFile } from "@/components/package-port/CodeAndPreview"
+import { PackageFile } from "@/types/package"
 
 export const findMainEntrypointFileFromTscircuitConfig = (
   files: PackageFile[],

package/src/lib/utils/package-utils.ts

@@ -0,0 +1,10 @@
+export const DEFAULT_CODE = `
+export default () => (
+  <board width="10mm" height="10mm">
+    {/* write your code here! */}
+  </board>
+)
+`.trim()
+
+export const generateRandomPackageName = () =>
+  `untitled-package-${Math.floor(Math.random() * 900) + 100}`

package/src/main.tsx

@@ -6,9 +6,6 @@ if (typeof window !== "undefined" && !window.__APP_LOADED_AT) {
   window.__APP_LOADED_AT = Date.now()
 }
 import "./index.css"
-import { setupBuildWatcher } from "./build-watcher"
-
-setupBuildWatcher()
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

package/src/pages/dashboard.tsx

@@ -12,7 +12,7 @@ import { PrefetchPageLink } from "@/components/PrefetchPageLink"
 import { PackagesList } from "@/components/PackagesList"
 import { Helmet } from "react-helmet-async"
 import { useSignIn } from "@/hooks/use-sign-in"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { useConfirmDeletePackageDialog } from "@/components/dialogs/confirm-delete-package-dialog"
 import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
 import { PackageCard } from "@/components/PackageCard"
@@ -61,6 +61,11 @@ export const DashboardPage = () => {
       const response = await axios.get("/packages/list_trending")
       return response.data.packages
     },
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+    },
   )
 
   const { data: latestPackages } = useQuery<Package[]>(
@@ -69,9 +74,14 @@ export const DashboardPage = () => {
       const response = await axios.get("/packages/list_latest")
       return response.data.packages
     },
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+    },
   )
 
-  const baseUrl = useSnippetsBaseApiUrl()
+  const baseUrl = usePackagesBaseApiUrl()
 
   const handleDeleteClick = (e: React.MouseEvent, pkg: Package) => {
     e.preventDefault() // Prevent navigation

package/src/pages/dev-login.tsx

@@ -1,10 +1,10 @@
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { useState } from "react"
 import { useLocation } from "wouter"
 
 export const DevLoginPage = () => {
-  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
+  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
   const [username, setUsername] = useState("")
   const setSession = useGlobalStore((s) => s.setSession)
   const [, setLocation] = useLocation()

package/src/pages/latest.tsx

@@ -6,7 +6,7 @@ import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import { Search, Keyboard, Cpu, Layers, LucideBellElectric } from "lucide-react"
 import { Input } from "@/components/ui/input"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import {
   Select,
   SelectContent,
@@ -18,7 +18,7 @@ import PackageSearchResults from "@/components/PackageSearchResults"
 
 const LatestPage: React.FC = () => {
   const axios = useAxios()
-  const apiBaseUrl = useSnippetsBaseApiUrl()
+  const apiBaseUrl = usePackagesBaseApiUrl()
   const [searchQuery, setSearchQuery] = useState("")
   const [category, setCategory] = useState("all")
 

package/src/pages/search.tsx

@@ -7,7 +7,7 @@ import Footer from "@/components/Footer"
 import { Input } from "@/components/ui/input"
 import { Search } from "lucide-react"
 import PackageSearchResults from "@/components/PackageSearchResults"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import {
   Select,
   SelectContent,
@@ -19,7 +19,7 @@ import { Package } from "fake-snippets-api/lib/db/schema"
 
 export const SearchPage = () => {
   const axios = useAxios()
-  const apiBaseUrl = useSnippetsBaseApiUrl()
+  const apiBaseUrl = usePackagesBaseApiUrl()
   const [searchParams, setSearchParams] = useSearchParams()
 
   const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "")

package/src/pages/trending.tsx

@@ -4,7 +4,7 @@ import { useAxios } from "@/hooks/use-axios"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import { useSearchParams } from "wouter"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { Search, Keyboard, Cpu, Layers, LucideBellElectric } from "lucide-react"
 import { Input } from "@/components/ui/input"
 import {
@@ -19,7 +19,7 @@ import PackageSearchResults from "@/components/PackageSearchResults"
 
 const TrendingPage: React.FC = () => {
   const axios = useAxios()
-  const apiBaseUrl = useSnippetsBaseApiUrl()
+  const apiBaseUrl = usePackagesBaseApiUrl()
   const [searchParams, setSearchParams] = useSearchParams()
 
   const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "")

package/src/pages/user-profile.tsx

@@ -8,7 +8,7 @@ import { Input } from "@/components/ui/input"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { useAxios } from "@/hooks/use-axios"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { GitHubLogoIcon } from "@radix-ui/react-icons"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 import type React from "react"
@@ -95,7 +95,7 @@ export const UserProfilePage = () => {
       },
     )
 
-  const baseUrl = useSnippetsBaseApiUrl()
+  const baseUrl = usePackagesBaseApiUrl()
 
   if (accountError) {
     return <NotFoundPage heading="User Not Found" />