@tscircuit/fake-snippets 0.0.108 → 0.0.109

package/dist/index.d.ts

@@ -667,6 +667,7 @@ declare const packageSchema: z.ZodObject<{
     latest_package_release_fs_sha: z.ZodDefault<z.ZodNullable<z.ZodString>>;
     default_view: z.ZodOptional<z.ZodDefault<z.ZodEnum<["files", "3d", "pcb", "schematic"]>>>;
     allow_pr_previews: z.ZodOptional<z.ZodDefault<z.ZodBoolean>>;
+    is_starred: z.ZodOptional<z.ZodDefault<z.ZodBoolean>>;
 }, "strip", z.ZodTypeAny, {
     name: string;
     unscoped_name: string;
@@ -695,6 +696,7 @@ declare const packageSchema: z.ZodObject<{
     website: string | null;
     ai_usage_instructions: string | null;
     latest_package_release_fs_sha: string | null;
+    is_starred?: boolean | undefined;
     snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
     latest_license?: string | null | undefined;
     default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
@@ -715,6 +717,7 @@ declare const packageSchema: z.ZodObject<{
     latest_package_release_id: string | null;
     latest_version: string | null;
     ai_usage_instructions: string | null;
+    is_starred?: boolean | undefined;
     snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
     star_count?: number | undefined;
     is_private?: boolean | null | undefined;
@@ -1036,6 +1039,7 @@ declare const createDatabase: ({ seed }?: {
         website: string | null;
         ai_usage_instructions: string | null;
         latest_package_release_fs_sha: string | null;
+        is_starred?: boolean | undefined;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         latest_license?: string | null | undefined;
         default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
@@ -1441,6 +1445,7 @@ declare const createDatabase: ({ seed }?: {
         website: string | null;
         ai_usage_instructions: string | null;
         latest_package_release_fs_sha: string | null;
+        is_starred?: boolean | undefined;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         latest_license?: string | null | undefined;
         default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;

package/dist/index.js

@@ -260,7 +260,8 @@ var packageSchema = z.object({
   ai_usage_instructions: z.string().nullable(),
   latest_package_release_fs_sha: z.string().nullable().default(null),
   default_view: z.enum(["files", "3d", "pcb", "schematic"]).default("files").optional(),
-  allow_pr_previews: z.boolean().default(false).optional()
+  allow_pr_previews: z.boolean().default(false).optional(),
+  is_starred: z.boolean().default(false).optional()
 });
 var jlcpcbOrderStateSchema = z.object({
   jlcpcb_order_state_id: z.string(),

package/dist/schema.d.ts

@@ -840,6 +840,7 @@ declare const packageSchema: z.ZodObject<{
     latest_package_release_fs_sha: z.ZodDefault<z.ZodNullable<z.ZodString>>;
     default_view: z.ZodOptional<z.ZodDefault<z.ZodEnum<["files", "3d", "pcb", "schematic"]>>>;
     allow_pr_previews: z.ZodOptional<z.ZodDefault<z.ZodBoolean>>;
+    is_starred: z.ZodOptional<z.ZodDefault<z.ZodBoolean>>;
 }, "strip", z.ZodTypeAny, {
     name: string;
     unscoped_name: string;
@@ -868,6 +869,7 @@ declare const packageSchema: z.ZodObject<{
     website: string | null;
     ai_usage_instructions: string | null;
     latest_package_release_fs_sha: string | null;
+    is_starred?: boolean | undefined;
     snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
     latest_license?: string | null | undefined;
     default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
@@ -888,6 +890,7 @@ declare const packageSchema: z.ZodObject<{
     latest_package_release_id: string | null;
     latest_version: string | null;
     ai_usage_instructions: string | null;
+    is_starred?: boolean | undefined;
     snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
     star_count?: number | undefined;
     is_private?: boolean | null | undefined;
@@ -1430,6 +1433,7 @@ declare const databaseSchema: z.ZodObject<{
         latest_package_release_fs_sha: z.ZodDefault<z.ZodNullable<z.ZodString>>;
         default_view: z.ZodOptional<z.ZodDefault<z.ZodEnum<["files", "3d", "pcb", "schematic"]>>>;
         allow_pr_previews: z.ZodOptional<z.ZodDefault<z.ZodBoolean>>;
+        is_starred: z.ZodOptional<z.ZodDefault<z.ZodBoolean>>;
     }, "strip", z.ZodTypeAny, {
         name: string;
         unscoped_name: string;
@@ -1458,6 +1462,7 @@ declare const databaseSchema: z.ZodObject<{
         website: string | null;
         ai_usage_instructions: string | null;
         latest_package_release_fs_sha: string | null;
+        is_starred?: boolean | undefined;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         latest_license?: string | null | undefined;
         default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
@@ -1478,6 +1483,7 @@ declare const databaseSchema: z.ZodObject<{
         latest_package_release_id: string | null;
         latest_version: string | null;
         ai_usage_instructions: string | null;
+        is_starred?: boolean | undefined;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         star_count?: number | undefined;
         is_private?: boolean | null | undefined;
@@ -2138,6 +2144,7 @@ declare const databaseSchema: z.ZodObject<{
         website: string | null;
         ai_usage_instructions: string | null;
         latest_package_release_fs_sha: string | null;
+        is_starred?: boolean | undefined;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         latest_license?: string | null | undefined;
         default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
@@ -2428,6 +2435,7 @@ declare const databaseSchema: z.ZodObject<{
         latest_package_release_id: string | null;
         latest_version: string | null;
         ai_usage_instructions: string | null;
+        is_starred?: boolean | undefined;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         star_count?: number | undefined;
         is_private?: boolean | null | undefined;

package/dist/schema.js

@@ -255,7 +255,8 @@ var packageSchema = z.object({
   ai_usage_instructions: z.string().nullable(),
   latest_package_release_fs_sha: z.string().nullable().default(null),
   default_view: z.enum(["files", "3d", "pcb", "schematic"]).default("files").optional(),
-  allow_pr_previews: z.boolean().default(false).optional()
+  allow_pr_previews: z.boolean().default(false).optional(),
+  is_starred: z.boolean().default(false).optional()
 });
 var jlcpcbOrderStateSchema = z.object({
   jlcpcb_order_state_id: z.string(),

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

@@ -311,6 +311,7 @@ export const packageSchema = z.object({
     .default("files")
     .optional(),
   allow_pr_previews: z.boolean().default(false).optional(),
+  is_starred: z.boolean().default(false).optional(),
 })
 export type Package = z.infer<typeof packageSchema>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.108",
+  "version": "0.0.109",
   "type": "module",
   "repository": {
     "type": "git",
@@ -75,6 +75,7 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@resvg/resvg-wasm": "^2.6.2",
     "@tailwindcss/typography": "^0.5.16",
     "@tscircuit/3d-viewer": "^0.0.303",
     "@tscircuit/assembly-viewer": "^0.0.1",
@@ -84,8 +85,9 @@
     "@tscircuit/mm": "^0.0.8",
     "@tscircuit/pcb-viewer": "^1.11.194",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "0.0.764",
+    "@tscircuit/runframe": "^0.0.781",
     "@tscircuit/schematic-viewer": "^2.0.21",
+    "@tscircuit/simple-3d-svg": "^0.0.41",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",
@@ -93,7 +95,6 @@
     "@types/md5": "^2.3.5",
     "@types/ms": "^0.7.34",
     "@types/node": "^22.13.0",
-    "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
@@ -104,11 +105,12 @@
     "@vercel/analytics": "^1.4.1",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
-    "change-case": "^5.4.4",
     "circuit-json-to-bom-csv": "^0.0.7",
     "circuit-json-to-gerber": "^0.0.29",
+    "circuit-json-to-gltf": "^0.0.4",
     "circuit-json-to-pnp-csv": "^0.0.7",
     "circuit-json-to-readable-netlist": "^0.0.13",
+    "circuit-json-to-simple-3d": "^0.0.6",
     "circuit-json-to-spice": "^0.0.6",
     "circuit-json-to-tscircuit": "^0.0.4",
     "circuit-to-svg": "^0.0.167",
@@ -117,8 +119,6 @@
     "cmdk": "^1.0.4",
     "codemirror": "^6.0.1",
     "codemirror-copilot": "^0.0.7",
-    "country-list": "^2.3.0",
-    "date-fns": "^4.1.0",
     "dotenv": "^16.5.0",
     "dsn-converter": "^0.0.60",
     "easyeda": "^0.0.203",
@@ -131,7 +131,6 @@
     "he": "^1.2.0",
     "idb-keyval": "^6.2.2",
     "immer": "^10.1.1",
-    "input-otp": "^1.2.4",
     "javascript-time-ago": "^2.5.11",
     "jose": "^5.9.3",
     "jscad-electronics": "^0.0.25",
@@ -147,7 +146,6 @@
     "openai": "^5.6.0",
     "postcss": "^8.4.47",
     "posthog-js": "^1.203.2",
-    "prismjs": "^1.29.0",
     "prompts": "^2.4.2",
     "react": "^18.3.1",
     "react-cookie-consent": "^9.0.0",
@@ -172,6 +170,7 @@
     "sitemap": "^8.0.0",
     "sonner": "^1.5.0",
     "states-us": "^1.1.1",
+    "svgo": "^4.0.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.13",
     "tailwindcss-animate": "^1.0.7",

package/src/App.tsx

@@ -64,7 +64,6 @@ const MyOrdersPage = lazyImport(() => import("@/pages/my-orders"))
 const LatestPage = lazyImport(() => import("@/pages/latest"))
 const QuickstartPage = lazyImport(() => import("@/pages/quickstart"))
 const SearchPage = lazyImport(() => import("@/pages/search"))
-const SettingsPage = lazyImport(() => import("@/pages/settings"))
 const UserProfilePage = lazyImport(() => import("@/pages/user-profile"))
 const DevLoginPage = lazyImport(() => import("@/pages/dev-login"))
 const ViewPackagePage = lazyImport(() => import("@/pages/view-package"))
@@ -252,7 +251,6 @@ function App() {
             <Route path="/quickstart" component={QuickstartPage} />
             <Route path="/dashboard" component={DashboardPage} />
             <Route path="/latest" component={LatestPage} />
-            <Route path="/settings" component={SettingsPage} />
             <Route path="/search" component={SearchPage} />
             <Route path="/trending" component={TrendingPage} />
             <Route path="/datasheets" component={DatasheetsPage} />

package/src/components/DownloadButtonAndMenu.tsx

@@ -18,18 +18,22 @@ import { usePcbDownloadDialog } from "@/components/dialogs/pcb-download-dialog"
 import { downloadKicadFiles } from "@/lib/download-fns/download-kicad-files"
 import { AnyCircuitElement } from "circuit-json"
 import { ChevronDown, Download, Hammer } from "lucide-react"
-import { downloadGltf } from "@/lib/download-fns/download-gltf"
+import { downloadGltfFromCircuitJson } from "@/lib/download-fns/download-gltf-from-circuit-json"
 import { downloadPngImage } from "@/lib/download-fns/download-png-utils"
 import { ImageFormat } from "@/lib/download-fns/download-circuit-png"
 import { CubeIcon } from "@radix-ui/react-icons"
+import { useState } from "react"
+import { useAxios } from "@/hooks/use-axios"
+import { useCurrentPackageId } from "@/hooks/use-current-package-id"
 
 interface DownloadButtonAndMenuProps {
   className?: string
   unscopedName?: string
   author?: string
-  circuitJson?: AnyCircuitElement[] | null
+  hasCircuitJson?: boolean
   desiredImageType?: string
   offerMultipleImageFormats?: boolean
+  circuitJson?: AnyCircuitElement[] | null
 }
 
 export function DownloadButtonAndMenu({
@@ -37,14 +41,52 @@ export function DownloadButtonAndMenu({
   unscopedName,
   author,
   desiredImageType = "pcb",
-  circuitJson,
+  hasCircuitJson,
   offerMultipleImageFormats = false,
+  circuitJson,
 }: DownloadButtonAndMenuProps) {
   const notImplemented = useNotImplementedToast()
   const { Dialog: PcbDownloadDialog, openDialog: openPcbDownloadDialog } =
     usePcbDownloadDialog()
+  const axios = useAxios()
+  const { packageId } = useCurrentPackageId()
+  const [fetchedCircuitJson, setFetchedCircuitJson] = useState<
+    AnyCircuitElement[] | null
+  >(null)
+  const [isFetchingCircuitJson, setIsFetchingCircuitJson] = useState(false)
+
+  const canDownload = Boolean(
+    hasCircuitJson || (circuitJson && circuitJson.length),
+  )
+
+  const getCircuitJson = async (): Promise<AnyCircuitElement[]> => {
+    if (circuitJson && circuitJson.length) return circuitJson
+    if (fetchedCircuitJson && fetchedCircuitJson.length)
+      return fetchedCircuitJson
+    setIsFetchingCircuitJson(true)
+    try {
+      const { data } = await axios.post("/package_files/get", {
+        package_id: packageId,
+        file_path: "dist/circuit.json",
+      })
+      const content = data?.package_file?.content_text
+      if (!content) throw new Error("Circuit JSON not found")
+      const parsed = JSON.parse(content)
+      setFetchedCircuitJson(parsed)
+      return parsed
+    } catch (error: any) {
+      toast({
+        title: "Failed to fetch Circuit JSON",
+        description: error?.message || error?.toString?.() || "Unknown error",
+        variant: "destructive",
+      })
+      throw error
+    } finally {
+      setIsFetchingCircuitJson(false)
+    }
+  }
 
-  if (!circuitJson) {
+  if (!canDownload) {
     return (
       <div className={className}>
         <Button
@@ -76,11 +118,9 @@ export function DownloadButtonAndMenu({
         <DropdownMenuContent className="!z-[101]">
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadCircuitJson(
-                circuitJson,
-                unscopedName || "circuit" + ".json",
-              )
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadCircuitJson(cj, unscopedName || "circuit" + ".json")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -93,7 +133,12 @@ export function DownloadButtonAndMenu({
             className="text-xs"
             onClick={async () => {
               try {
-                await downloadGltf(unscopedName || "circuit")
+                const cj = await getCircuitJson()
+                await downloadGltfFromCircuitJson(
+                  cj,
+                  unscopedName || "circuit",
+                  { format: "glb", boardTextureResolution: 2048 },
+                )
               } catch (error: any) {
                 toast({
                   title: "Error Downloading 3D Model",
@@ -112,8 +157,34 @@ export function DownloadButtonAndMenu({
           <DropdownMenuItem
             className="text-xs"
             onClick={async () => {
+              try {
+                const cj = await getCircuitJson()
+                await downloadGltfFromCircuitJson(
+                  cj,
+                  unscopedName || "circuit",
+                  { format: "gltf", boardTextureResolution: 2048 },
+                )
+              } catch (error: any) {
+                toast({
+                  title: "Error Downloading 3D Model (GLTF)",
+                  description: error.toString(),
+                  variant: "destructive",
+                })
+              }
+            }}
+          >
+            <CubeIcon className="mr-1 h-3 w-3" />
+            <span className="flex-grow  mr-6">3D Model</span>
+            <span className="text-[0.6rem] bg-green-500 opacity-80 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
+              gltf
+            </span>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="text-xs"
+            onClick={async () => {
+              const cj = await getCircuitJson()
               await downloadFabricationFiles({
-                circuitJson,
+                circuitJson: cj,
                 snippetUnscopedName: unscopedName || "snippet",
               }).catch((error) => {
                 console.error(error)
@@ -144,8 +215,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadKicadFiles(circuitJson, unscopedName || "kicad_project")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadKicadFiles(cj, unscopedName || "kicad_project")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -157,8 +229,9 @@ export function DownloadButtonAndMenu({
 
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadSchematicSvg(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadSchematicSvg(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -169,8 +242,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadAssemblySvg(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadAssemblySvg(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -181,7 +255,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              setFetchedCircuitJson(cj)
               openPcbDownloadDialog()
             }}
           >
@@ -193,8 +269,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadDsnFile(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadDsnFile(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -205,8 +282,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onClick={() => {
-              downloadReadableNetlist(circuitJson, unscopedName || "circuit")
+            onClick={async () => {
+              const cj = await getCircuitJson()
+              downloadReadableNetlist(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -217,8 +295,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadSpiceFile(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadSpiceFile(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -229,8 +308,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadSimpleRouteJson(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadSimpleRouteJson(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -243,7 +323,7 @@ export function DownloadButtonAndMenu({
           {!offerMultipleImageFormats && (
             <DropdownMenuItem
               className="text-xs"
-              onClick={() => {
+              onClick={async () => {
                 const desiredImageFormat = [
                   "pcb",
                   "schematic",
@@ -252,8 +332,9 @@ export function DownloadButtonAndMenu({
                 ].includes(desiredImageType)
                   ? desiredImageType
                   : "pcb"
+                const cj = await getCircuitJson()
                 downloadPngImage({
-                  circuitJson,
+                  circuitJson: cj,
                   unscopedName,
                   author,
                   format: desiredImageFormat as ImageFormat,
@@ -271,9 +352,9 @@ export function DownloadButtonAndMenu({
             <>
               <DropdownMenuItem
                 className="text-xs"
-                onClick={() =>
+                onClick={async () =>
                   downloadPngImage({
-                    circuitJson,
+                    circuitJson: await getCircuitJson(),
                     unscopedName,
                     author,
                     format: "schematic",
@@ -288,9 +369,9 @@ export function DownloadButtonAndMenu({
               </DropdownMenuItem>
               <DropdownMenuItem
                 className="text-xs"
-                onClick={() =>
+                onClick={async () =>
                   downloadPngImage({
-                    circuitJson,
+                    circuitJson: await getCircuitJson(),
                     unscopedName,
                     author,
                     format: "pcb",
@@ -305,9 +386,9 @@ export function DownloadButtonAndMenu({
               </DropdownMenuItem>
               <DropdownMenuItem
                 className="text-xs"
-                onClick={() =>
+                onClick={async () =>
                   downloadPngImage({
-                    circuitJson,
+                    circuitJson: await getCircuitJson(),
                     unscopedName,
                     author,
                     format: "assembly",
@@ -320,12 +401,29 @@ export function DownloadButtonAndMenu({
                   png
                 </span>
               </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-xs"
+                onClick={async () =>
+                  downloadPngImage({
+                    circuitJson: await getCircuitJson(),
+                    unscopedName,
+                    author,
+                    format: "3d",
+                  })
+                }
+              >
+                <Download className="mr-1 h-3 w-3" />
+                <span className="flex-grow mr-6">3D PNG</span>
+                <span className="text-[0.6rem] opacity-80 bg-teal-600 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
+                  png
+                </span>
+              </DropdownMenuItem>
             </>
           )}
         </DropdownMenuContent>
       </DropdownMenu>
       <PcbDownloadDialog
-        circuitJson={circuitJson}
+        circuitJson={fetchedCircuitJson || circuitJson || []}
         fileName={unscopedName || "circuit"}
       />
     </div>

package/src/components/FileSidebar.tsx

@@ -1,25 +1,9 @@
 import React, { useState } from "react"
 import { cn } from "@/lib/utils"
-import {
-  File,
-  Folder,
-  MoreVertical,
-  PanelRightOpen,
-  Plus,
-  Trash2,
-  Pencil,
-} from "lucide-react"
-import { TreeView, TreeDataItem } from "@/components/ui/tree-view"
-import { isHiddenFile } from "./ViewPackagePage/utils/is-hidden-file"
+import { PanelRightOpen, Plus, Loader2 } from "lucide-react"
+import { TreeView } from "@/components/ui/tree-view"
 import { Input } from "@/components/ui/input"
 import { transformFilesToTreeData } from "@/lib/utils/transformFilesToTreeData"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "./ui/dropdown-menu"
 import type {
   ICreateFileProps,
   ICreateFileResult,
@@ -28,8 +12,6 @@ import type {
   IRenameFileProps,
   IRenameFileResult,
 } from "@/hooks/useFileManagement"
-import { useToast } from "@/hooks/use-toast"
-import { useGlobalStore } from "@/hooks/use-global-store"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 type FileName = string
 
@@ -45,6 +27,8 @@ interface FileSidebarProps {
   isCreatingFile: boolean
   setIsCreatingFile: React.Dispatch<React.SetStateAction<boolean>>
   pkg?: Package
+  isLoadingFiles?: boolean
+  loadingProgress?: string | null
 }
 
 const FileSidebar: React.FC<FileSidebarProps> = ({
@@ -58,6 +42,8 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   handleRenameFile,
   isCreatingFile,
   setIsCreatingFile,
+  isLoadingFiles = true,
+  loadingProgress = null,
 }) => {
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
   const [newFileName, setNewFileName] = useState("")
@@ -69,7 +55,6 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   const [selectedItemId, setSelectedItemId] = React.useState<string>(
     currentFile || "",
   )
-  const { toast } = useToast()
   const canModifyFiles = true
 
   const onFolderSelect = (folderPath: string) => {
@@ -184,19 +169,31 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
         className,
       )}
     >
-      <button
-        onClick={toggleSidebar}
-        className={`z-[99] mt-2 ml-2 text-gray-400 scale-90 transition-opacity duration-200 ${!sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"}`}
-      >
-        <PanelRightOpen />
-      </button>
-      <button
-        onClick={() => setIsCreatingFile(true)}
-        className="absolute top-2 right-2 text-gray-400 hover:text-gray-600"
-        aria-label="Create new file"
-      >
-        <Plus className="w-5 h-5" />
-      </button>
+      <div className="flex items-center justify-between px-2 pt-2">
+        <button
+          onClick={toggleSidebar}
+          className={`text-gray-400 scale-90 transition-opacity duration-200 ${!sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"}`}
+        >
+          <PanelRightOpen />
+        </button>
+        <div className="flex items-center gap-2">
+          {isLoadingFiles && (
+            <div className="flex items-center gap-1">
+              <Loader2 className="w-3 h-3 animate-spin text-gray-400" />
+              {loadingProgress && (
+                <span className="text-xs text-gray-400">{loadingProgress}</span>
+              )}
+            </div>
+          )}
+          <button
+            onClick={() => setIsCreatingFile(true)}
+            className="text-gray-400 hover:text-gray-600"
+            aria-label="Create new file"
+          >
+            <Plus className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
       {isCreatingFile && (
         <div className="p-2">
           <Input

package/src/components/Footer.tsx

@@ -31,7 +31,6 @@ export default function Footer() {
                   href: `/${session?.github_username}`,
                   hidden: !isLoggedIn,
                 },
-                { name: "Settings", href: "/settings" },
               ]
                 .filter((item) => !item.hidden)
                 .map((item) => (