@tscircuit/fake-snippets 0.0.107 → 0.0.109

package/src/components/FileSidebar.tsx

@@ -1,24 +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 {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "./ui/dropdown-menu"
+import { transformFilesToTreeData } from "@/lib/utils/transformFilesToTreeData"
 import type {
   ICreateFileProps,
   ICreateFileResult,
@@ -27,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
 
@@ -44,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> = ({
@@ -57,6 +42,8 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   handleRenameFile,
   isCreatingFile,
   setIsCreatingFile,
+  isLoadingFiles = true,
+  loadingProgress = null,
 }) => {
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
   const [newFileName, setNewFileName] = useState("")
@@ -68,172 +55,25 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   const [selectedItemId, setSelectedItemId] = React.useState<string>(
     currentFile || "",
   )
-  const { toast } = useToast()
   const canModifyFiles = true
 
   const onFolderSelect = (folderPath: string) => {
     setSelectedFolderForCreation(folderPath)
   }
 
-  const transformFilesToTreeData = (
-    files: Record<FileName, string>,
-  ): TreeDataItem[] => {
-    type TreeNode = Omit<TreeDataItem, "children"> & {
-      children?: Record<string, TreeNode>
-    }
-    const root: Record<string, TreeNode> = {}
-
-    Object.keys(files).forEach((filePath) => {
-      const hasLeadingSlash = filePath.startsWith("/")
-      const pathSegments = (hasLeadingSlash ? filePath.slice(1) : filePath)
-        .trim()
-        .split("/")
-      let currentNode: Record<string, TreeNode> = root
-
-      pathSegments.forEach((segment, segmentIndex) => {
-        const isLeafNode = segmentIndex === pathSegments.length - 1
-        const ancestorPath = pathSegments.slice(0, segmentIndex).join("/")
-        const relativePath = ancestorPath
-          ? `${ancestorPath}/${segment}`
-          : segment
-        const absolutePath = hasLeadingSlash ? `/${relativePath}` : relativePath
-        const itemId = absolutePath
-
-        if (
-          !currentNode[segment] &&
-          (!isHiddenFile(relativePath) ||
-            isHiddenFile(
-              currentFile?.startsWith("/")
-                ? currentFile.slice(1)
-                : currentFile || "",
-            ))
-        ) {
-          currentNode[segment] = {
-            id: itemId,
-            name: segment,
-            isRenaming: renamingFile === itemId,
-            onRename: (newFilename: string) => {
-              const oldPath = itemId
-              const pathParts = oldPath.split("/").filter((part) => part !== "")
-              let newPath: string
-
-              if (pathParts.length > 1) {
-                const folderPath = pathParts.slice(0, -1).join("/")
-                newPath = folderPath + "/" + newFilename
-              } else {
-                newPath = newFilename
-              }
-
-              if (oldPath.startsWith("/") && !newPath.startsWith("/")) {
-                newPath = "/" + newPath
-              }
-
-              const { fileRenamed } = handleRenameFile({
-                oldFilename: itemId,
-                newFilename: newPath,
-                onError: (error) => {
-                  toast({
-                    title: `Error renaming file`,
-                    description: error.message,
-                    variant: "destructive",
-                  })
-                },
-              })
-              if (fileRenamed) {
-                setRenamingFile(null)
-              }
-            },
-            onCancelRename: () => {
-              setRenamingFile(null)
-            },
-            icon: isLeafNode ? File : Folder,
-            onClick: isLeafNode
-              ? () => {
-                  onFileSelect(absolutePath)
-                  setSelectedFolderForCreation(null)
-                }
-              : () => onFolderSelect(absolutePath),
-            draggable: false,
-            droppable: !isLeafNode,
-            children: isLeafNode ? undefined : {},
-            actions: canModifyFiles ? (
-              <>
-                <DropdownMenu key={itemId}>
-                  <DropdownMenuTrigger asChild>
-                    <MoreVertical className="w-4 h-4 text-gray-500 hover:text-gray-700" />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    className="w-fit bg-white shadow-lg rounded-md border-4 z-[100] border-white"
-                    style={{
-                      position: "absolute",
-                      top: "100%",
-                      left: "0",
-                      marginTop: "0.5rem",
-                      width: "8rem",
-                      padding: "0.01rem",
-                    }}
-                  >
-                    <DropdownMenuGroup>
-                      {isLeafNode && (
-                        <DropdownMenuItem
-                          onClick={() => {
-                            setRenamingFile(itemId)
-                          }}
-                          className="flex items-center px-3 py-1 text-xs text-black hover:bg-gray-100 cursor-pointer"
-                        >
-                          <Pencil className="mr-2 h-3 w-3" />
-                          Rename
-                        </DropdownMenuItem>
-                      )}
-                      <DropdownMenuItem
-                        onClick={() => {
-                          const { fileDeleted } = handleDeleteFile({
-                            filename: itemId,
-                            onError: (error) => {
-                              toast({
-                                title: `Error deleting file ${itemId}`,
-                                description: error.message,
-                              })
-                            },
-                          })
-                          if (fileDeleted) {
-                            setErrorMessage("")
-                          }
-                        }}
-                        className="flex items-center px-3 py-1 text-xs text-red-600 hover:bg-gray-100 cursor-pointer"
-                      >
-                        <Trash2 className="mr-2 h-3 w-3" />
-                        Delete
-                      </DropdownMenuItem>
-                    </DropdownMenuGroup>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </>
-            ) : undefined,
-          }
-        }
-
-        if (!isLeafNode && currentNode[segment].children) {
-          currentNode = currentNode[segment].children
-        }
-      })
-    })
-
-    const convertToArray = (
-      items: Record<string, TreeNode>,
-    ): TreeDataItem[] => {
-      return Object.values(items).map((item) => ({
-        ...item,
-        children: item.children ? convertToArray(item.children) : undefined,
-      }))
-    }
-    return convertToArray(root).filter((x) => {
-      if (x.children?.length === 0) return false
-      return true
-    })
-  }
-
-  const treeData = transformFilesToTreeData(files)
+  const treeData = transformFilesToTreeData({
+    files,
+    currentFile,
+    renamingFile,
+    handleRenameFile,
+    handleDeleteFile,
+    setRenamingFile,
+    onFileSelect,
+    onFolderSelect,
+    canModifyFiles,
+    setErrorMessage,
+    setSelectedFolderForCreation,
+  })
 
   const getCurrentFolderPath = (): string => {
     if (selectedFolderForCreation) {
@@ -329,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) => (

package/src/components/HeaderLogin.tsx

@@ -43,7 +43,7 @@ export const HeaderLogin = () => {
           </AvatarFallback>
         </Avatar>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="ml-1 md:ml-0 md:mr-1">
+      <DropdownMenuContent className="ml-1 mr-1 md:ml-0 md:mr-1">
         <DropdownMenuItem asChild className="text-gray-500 text-xs" disabled>
           <div>
             AI Usage $

package/src/components/HiddenFilesDropdown.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import {
   DropdownMenu,
   DropdownMenuContent,

package/src/components/PackageBreadcrumb.tsx

@@ -77,7 +77,7 @@ export function PackageBreadcrumb({
               {currentPage === "builds" ? (
                 <BreadcrumbLink asChild>
                   <PrefetchPageLink
-                    href={`/${packageName}/release/${releaseVersion}`}
+                    href={`/${packageName}/releases/${releaseVersion}`}
                   >
                     {releaseVersion}
                   </PrefetchPageLink>

package/src/components/PackageBuildsPage/PackageBuildDetailsPage.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
 import { PackageRelease } from "fake-snippets-api/lib/db/schema"
 import { useState } from "react"

package/src/components/PackageBuildsPage/build-preview-content.tsx

@@ -1,9 +1,13 @@
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
+import { useState } from "react"
+import { CircuitBoard } from "lucide-react"
 
 export function BuildPreviewContent() {
   const { packageRelease } = useCurrentPackageRelease({ refetchInterval: 2000 })
   const { packageInfo } = useCurrentPackageInfo()
+  const [imageError, setImageError] = useState(false)
+  const [imageLoading, setImageLoading] = useState(true)
 
   if (!packageRelease) {
     return (
@@ -16,11 +20,36 @@ export function BuildPreviewContent() {
   return (
     <div className="flex items-center justify-center w-full h-full">
       <div className="rounded overflow-hidden w-full max-w-full">
-        <img
-          src={`https://api.tscircuit.com/packages/images/${packageInfo?.name}/pcb.png`}
-          alt="Package build preview"
-          className="object-contain rounded w-full h-auto max-h-[240px] sm:max-h-[300px] lg:max-h-[360px]"
-        />
+        {imageError ? (
+          <div className="flex flex-col items-center justify-center bg-gray-50 border border-gray-300 rounded-lg p-8 sm:p-12 lg:p-16 min-h-[240px] sm:min-h-[300px] lg:min-h-[360px]">
+            <CircuitBoard className="w-12 h-12 sm:w-16 sm:h-16 lg:w-20 lg:h-20 text-gray-400 mb-4" />
+            <h3 className="text-lg sm:text-xl font-medium text-gray-600 mb-2">
+              Preview Not Available
+            </h3>
+            <p className="text-sm sm:text-base text-gray-500 text-center max-w-sm">
+              The build preview image could not be loaded. This may be because
+              the build is still processing or the image is not available.
+            </p>
+          </div>
+        ) : (
+          <>
+            {imageLoading && (
+              <div className="flex items-center justify-center bg-gray-100 rounded-lg min-h-[240px] sm:min-h-[300px] lg:min-h-[360px]">
+                <div className="w-16 h-16 sm:w-20 sm:h-20 bg-gray-200 rounded animate-pulse"></div>
+              </div>
+            )}
+            <img
+              src={`https://api.tscircuit.com/packages/images/${packageInfo?.name}/pcb.png`}
+              alt="Package build preview"
+              className={`object-contain rounded w-full h-auto max-h-[240px] sm:max-h-[300px] lg:max-h-[360px] ${imageLoading ? "hidden" : "block"}`}
+              onLoad={() => setImageLoading(false)}
+              onError={() => {
+                setImageError(true)
+                setImageLoading(false)
+              }}
+            />
+          </>
+        )}
       </div>
     </div>
   )

package/src/components/PackageCard.tsx

@@ -19,7 +19,6 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { SnippetType, SnippetTypeIcon } from "./SnippetTypeIcon"
 import { timeAgo } from "@/lib/utils/timeAgo"
-import { ImageWithFallback } from "./ImageWithFallback"
 import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
 
 export interface PackageCardProps {

package/src/components/ViewPackagePage/components/ShikiCodeViewer.tsx

@@ -1,11 +1,17 @@
 import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
-import { useEffect, useMemo } from "react"
-import { useQuery } from "react-query"
+import { useMemo } from "react"
 import { Skeleton } from "@/components/ui/skeleton"
 
 // Pre-randomized array to avoid flickering on re-renders
-const SKELETON_WIDTHS = ["w-2/3", "w-1/4", "w-5/6", "w-1/3", "w-1/2", "w-3/4"]
-
+export const SKELETON_WIDTHS = [
+  "w-2/3",
+  "w-1/4",
+  "w-5/6",
+  "w-1/3",
+  "w-1/2",
+  "w-3/4",
+]
+const PLACEHOLDER_SHIKI_HTML = `<pre class="shiki vitesse-light" style="background-color:#ffffff;color:#393a34" tabindex="0"><code><span class="line"></span></code></pre>`
 export const ShikiCodeViewer = ({
   code,
   filePath,
@@ -24,17 +30,20 @@ export const ShikiCodeViewer = ({
     [filePath, code, highlighter],
   )
 
-  if (!html) {
+  if (html && html?.trim() !== PLACEHOLDER_SHIKI_HTML) {
     return (
-      <div className="text-sm p-4">
-        {SKELETON_WIDTHS.map((w, i) => (
-          <Skeleton key={i} className={`h-4 mb-2 ${w}`} />
-        ))}
-      </div>
+      <div
+        className="text-sm shiki"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
     )
   }
 
   return (
-    <div className="text-sm shiki" dangerouslySetInnerHTML={{ __html: html }} />
+    <div className="text-sm p-4">
+      {SKELETON_WIDTHS.map((w, i) => (
+        <Skeleton key={i} className={`h-4 mb-2 ${w}`} />
+      ))}
+    </div>
   )
 }

package/src/components/ViewPackagePage/components/important-files-view.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { useState, useEffect, useMemo, useCallback } from "react"
 import {
   Edit,
@@ -14,7 +12,7 @@ import {
 import { Skeleton } from "@/components/ui/skeleton"
 import { Button } from "@/components/ui/button"
 import { usePackageFile } from "@/hooks/use-package-files"
-import { ShikiCodeViewer } from "./ShikiCodeViewer"
+import { ShikiCodeViewer, SKELETON_WIDTHS } from "./ShikiCodeViewer"
 import MarkdownViewer from "./markdown-viewer"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useCurrentPackageCircuitJson } from "../hooks/use-current-package-circuit-json"
@@ -24,12 +22,12 @@ interface PackageFile {
   package_release_id: string
   file_path: string
   created_at: string
-  content_text?: string
+  content_text?: string | null
 }
 
 interface ImportantFilesViewProps {
   importantFiles?: PackageFile[]
-  isLoading?: boolean
+  isFetched?: boolean
   onEditClicked?: (file_path?: string | null) => void
   packageAuthorOwner?: string | null
   aiDescription?: string
@@ -56,7 +54,7 @@ export default function ImportantFilesView({
   aiReviewText,
   aiReviewRequested,
   onRequestAiReview,
-  isLoading = false,
+  isFetched = false,
   onEditClicked,
   packageAuthorOwner,
   onLicenseFileRequested,
@@ -130,19 +128,25 @@ export default function ImportantFilesView({
   const availableTabs = useMemo((): TabInfo[] => {
     const tabs: TabInfo[] = []
 
-    tabs.push({
-      type: "ai",
-      filePath: null,
-      label: "Description",
-      icon: <SparklesIcon className="h-3.5 w-3.5 mr-1.5" />,
-    })
+    // Only show AI description tab if there's actual AI content
+    if (hasAiContent) {
+      tabs.push({
+        type: "ai",
+        filePath: null,
+        label: "Description",
+        icon: <SparklesIcon className="h-3.5 w-3.5 mr-1.5" />,
+      })
+    }
 
-    tabs.push({
-      type: "ai-review",
-      filePath: null,
-      label: "AI Review",
-      icon: <SparklesIcon className="h-3.5 w-3.5 mr-1.5" />,
-    })
+    // Only show AI review tab if there's actual AI review content
+    if (hasAiReview || isOwner) {
+      tabs.push({
+        type: "ai-review",
+        filePath: null,
+        label: "AI Review",
+        icon: <SparklesIcon className="h-3.5 w-3.5 mr-1.5" />,
+      })
+    }
 
     importantFiles.forEach((file) => {
       tabs.push({
@@ -154,11 +158,11 @@ export default function ImportantFilesView({
     })
 
     return tabs
-  }, [hasAiContent, importantFiles, getFileName, getFileIcon])
+  }, [hasAiContent, hasAiReview, importantFiles, getFileName, getFileIcon])
 
   // Find default tab with fallback logic
   const getDefaultTab = useCallback((): TabInfo | null => {
-    if (isLoading || availableTabs.length === 0) return null
+    if (!isFetched || availableTabs.length === 0) return null
 
     // Priority 1: README file
     const readmeTab = availableTabs.find(
@@ -167,12 +171,14 @@ export default function ImportantFilesView({
     )
     if (readmeTab) return readmeTab
 
-    // Priority 2: AI content
-    const aiTab = availableTabs.find((tab) => tab.type === "ai")
+    // Priority 2: AI content (only if available)
+    const aiTab = availableTabs.find((tab) => tab.type === "ai" && hasAiContent)
     if (aiTab) return aiTab
 
     // Priority 3: AI review
-    const aiReviewTab = availableTabs.find((tab) => tab.type === "ai-review")
+    const aiReviewTab = availableTabs.find(
+      (tab) => tab.type === "ai-review" && hasAiReview,
+    )
     if (aiReviewTab) return aiReviewTab
 
     // Priority 4: First file
@@ -180,24 +186,7 @@ export default function ImportantFilesView({
     if (firstFileTab) return firstFileTab
 
     return null
-  }, [isLoading, availableTabs, isReadmeFile])
-
-  // Handle copy functionality
-  const handleCopy = useCallback(() => {
-    let textToCopy = ""
-
-    if (activeTab?.type === "ai-review" && aiReviewText) {
-      textToCopy = aiReviewText
-    } else if (activeTab?.type === "file" && activeFileContent) {
-      textToCopy = activeFileContent
-    }
-
-    if (textToCopy) {
-      navigator.clipboard.writeText(textToCopy)
-      setCopyState("copied")
-      setTimeout(() => setCopyState("copy"), 500)
-    }
-  }, [activeTab, aiReviewText])
+  }, [isFetched, availableTabs, isReadmeFile])
 
   // Handle tab selection with validation
   const selectTab = useCallback(
@@ -245,11 +234,11 @@ export default function ImportantFilesView({
 
   // Set default tab when no tab is active
   useEffect(() => {
-    if (activeTab === null && !isLoading) {
+    if (activeTab === null && isFetched) {
       const defaultTab = getDefaultTab()
       setActiveTab(defaultTab)
     }
-  }, [activeTab, isLoading, getDefaultTab])
+  }, [activeTab, isFetched, getDefaultTab])
 
   // Validate active tab still exists (handles file deletion)
   useEffect(() => {
@@ -273,18 +262,41 @@ export default function ImportantFilesView({
     return importantFiles.find((file) => file.file_path === activeTab.filePath)
   }, [activeTab, importantFiles])
 
-  const { data: activeFileFull } = usePackageFile(
-    partialActiveFile
-      ? {
-          file_path: partialActiveFile.file_path,
-          package_release_id: partialActiveFile.package_release_id,
-        }
-      : null,
-    { keepPreviousData: true },
-  )
+  const { data: activeFileFull, isFetched: isActiveFileFetched } =
+    usePackageFile(
+      partialActiveFile
+        ? {
+            file_path: partialActiveFile.file_path,
+            package_release_id: partialActiveFile.package_release_id,
+          }
+        : null,
+      {
+        keepPreviousData: true,
+        staleTime: Infinity,
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+      },
+    )
 
   const activeFileContent = activeFileFull?.content_text || ""
 
+  const handleCopy = () => {
+    let textToCopy = ""
+
+    if (activeTab?.type === "ai-review" && aiReviewText) {
+      textToCopy = aiReviewText
+    } else if (activeTab?.type === "file" && activeFileContent) {
+      textToCopy = activeFileContent
+    }
+
+    if (textToCopy) {
+      navigator.clipboard.writeText(textToCopy)
+      setCopyState("copied")
+      setTimeout(() => setCopyState("copy"), 500)
+    }
+  }
+
   // Render content based on active tab
   const renderAiContent = useCallback(
     () => (
@@ -369,20 +381,24 @@ export default function ImportantFilesView({
   }, [aiReviewText, aiReviewRequested, isOwner, onRequestAiReview])
 
   const renderFileContent = useCallback(() => {
-    if (!activeTab?.filePath || !activeFileContent) {
-      return <pre className="whitespace-pre-wrap">{activeFileContent}</pre>
+    if (!isActiveFileFetched || !activeTab?.filePath || !activeFileContent) {
+      ;<div className="text-sm p-4">
+        {SKELETON_WIDTHS.map((w, i) => (
+          <Skeleton key={i} className={`h-4 mb-2 ${w}`} />
+        ))}
+      </div>
     }
 
-    if (isMarkdownFile(activeTab.filePath)) {
+    if (isMarkdownFile(String(activeTab?.filePath))) {
       return <MarkdownViewer markdownContent={activeFileContent} />
     }
 
-    if (isCodeFile(activeTab.filePath)) {
+    if (isCodeFile(String(activeTab?.filePath))) {
       return (
-        <div className="overflow-x-auto">
+        <div className="overflow-x-auto no-scrollbar">
           <ShikiCodeViewer
             code={activeFileContent}
-            filePath={activeTab.filePath}
+            filePath={String(activeTab?.filePath)}
           />
         </div>
       )
@@ -422,7 +438,7 @@ export default function ImportantFilesView({
     [activeTab],
   )
 
-  if (isLoading) {
+  if (!isFetched) {
     return (
       <div className="mt-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
         <div className="flex items-center pl-2 pr-4 py-2 bg-gray-100 dark:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]">