@tscircuit/fake-snippets 0.0.98 → 0.0.100

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState, useEffect, useMemo, useCallback } from "react"
 import {
   Edit,
   FileText,
@@ -9,12 +9,12 @@ import {
   CopyCheck,
   Loader2,
   RefreshCcwIcon,
+  SparklesIcon,
 } from "lucide-react"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Button } from "@/components/ui/button"
-import { usePackageFile, usePackageFileByPath } from "@/hooks/use-package-files"
+import { usePackageFile } from "@/hooks/use-package-files"
 import { ShikiCodeViewer } from "./ShikiCodeViewer"
-import { SparklesIcon } from "lucide-react"
 import MarkdownViewer from "./markdown-viewer"
 import { useGlobalStore } from "@/hooks/use-global-store"
 
@@ -36,6 +36,16 @@ interface ImportantFilesViewProps {
   aiReviewText?: string | null
   aiReviewRequested?: boolean
   onRequestAiReview?: () => void
+  onLicenseFileRequested?: boolean
+}
+
+type TabType = "ai" | "ai-review" | "file"
+
+interface TabInfo {
+  type: TabType
+  filePath?: string | null
+  label: string
+  icon: React.ReactNode
 }
 
 export default function ImportantFilesView({
@@ -48,89 +58,235 @@ export default function ImportantFilesView({
   isLoading = false,
   onEditClicked,
   packageAuthorOwner,
+  onLicenseFileRequested,
 }: ImportantFilesViewProps) {
-  const [activeFilePath, setActiveFilePath] = useState<string | null>(null)
-  const [activeTab, setActiveTab] = useState<string | null>(null)
+  const [activeTab, setActiveTab] = useState<TabInfo | null>(null)
   const [copyState, setCopyState] = useState<"copy" | "copied">("copy")
   const { session: user } = useGlobalStore()
 
-  const handleCopy = () => {
-    if (activeTab === "ai-review" && aiReviewText) {
-      navigator.clipboard.writeText(aiReviewText || "")
+  // Memoized computed values
+  const hasAiContent = useMemo(
+    () => Boolean(aiDescription || aiUsageInstructions),
+    [aiDescription, aiUsageInstructions],
+  )
+  const hasAiReview = useMemo(() => Boolean(aiReviewText), [aiReviewText])
+  const isOwner = useMemo(
+    () => user?.github_username === packageAuthorOwner,
+    [user?.github_username, packageAuthorOwner],
+  )
+
+  // File type utilities
+  const isLicenseFile = useCallback((filePath: string) => {
+    const lowerPath = filePath.toLowerCase()
+    return (
+      lowerPath === "license" ||
+      lowerPath.endsWith("/license") ||
+      lowerPath === "license.txt" ||
+      lowerPath.endsWith("/license.txt") ||
+      lowerPath === "license.md" ||
+      lowerPath.endsWith("/license.md")
+    )
+  }, [])
+
+  const isReadmeFile = useCallback((filePath: string) => {
+    const lowerPath = filePath.toLowerCase()
+    return lowerPath.endsWith("readme.md") || lowerPath.endsWith("readme")
+  }, [])
+
+  const isCodeFile = useCallback((filePath: string) => {
+    return (
+      filePath.endsWith(".js") ||
+      filePath.endsWith(".jsx") ||
+      filePath.endsWith(".ts") ||
+      filePath.endsWith(".tsx")
+    )
+  }, [])
+
+  const isMarkdownFile = useCallback(
+    (filePath: string) => {
+      return filePath.endsWith(".md") || isReadmeFile(filePath)
+    },
+    [isReadmeFile],
+  )
+
+  const getFileName = useCallback((path: string) => {
+    const parts = path.split("/")
+    return parts[parts.length - 1]
+  }, [])
+
+  const getFileIcon = useCallback(
+    (path: string) => {
+      return isCodeFile(path) ? (
+        <Code className="h-3.5 w-3.5 mr-1.5" />
+      ) : (
+        <FileText className="h-3.5 w-3.5 mr-1.5" />
+      )
+    },
+    [isCodeFile],
+  )
+
+  // Available tabs computation
+  const availableTabs = useMemo((): TabInfo[] => {
+    const tabs: TabInfo[] = []
+
+    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" />,
+    })
+
+    importantFiles.forEach((file) => {
+      tabs.push({
+        type: "file",
+        filePath: file.file_path,
+        label: getFileName(file.file_path),
+        icon: getFileIcon(file.file_path),
+      })
+    })
+
+    return tabs
+  }, [hasAiContent, importantFiles, getFileName, getFileIcon])
+
+  // Find default tab with fallback logic
+  const getDefaultTab = useCallback((): TabInfo | null => {
+    if (isLoading || availableTabs.length === 0) return null
+
+    // Priority 1: README file
+    const readmeTab = availableTabs.find(
+      (tab) =>
+        tab.type === "file" && tab.filePath && isReadmeFile(tab.filePath),
+    )
+    if (readmeTab) return readmeTab
+
+    // Priority 2: AI content
+    const aiTab = availableTabs.find((tab) => tab.type === "ai")
+    if (aiTab) return aiTab
+
+    // Priority 3: AI review
+    const aiReviewTab = availableTabs.find((tab) => tab.type === "ai-review")
+    if (aiReviewTab) return aiReviewTab
+
+    // Priority 4: First file
+    const firstFileTab = availableTabs.find((tab) => tab.type === "file")
+    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)
-      return
     }
-    navigator.clipboard.writeText(activeFileContent)
-    setCopyState("copied")
-    setTimeout(() => setCopyState("copy"), 500)
-  }
-  // Determine if we have AI content
-  const hasAiContent = Boolean(aiDescription || aiUsageInstructions)
-  const hasAiReview = Boolean(aiReviewText)
+  }, [activeTab, aiReviewText])
+
+  // Handle tab selection with validation
+  const selectTab = useCallback(
+    (tab: TabInfo) => {
+      // Validate that the tab still exists (for file tabs)
+      if (tab.type === "file" && tab.filePath) {
+        const fileExists = importantFiles.some(
+          (file) => file.file_path === tab.filePath,
+        )
+        if (!fileExists) {
+          // File was deleted, fallback to default tab
+          const defaultTab = getDefaultTab()
+          setActiveTab(defaultTab)
+          return
+        }
+      }
+      setActiveTab(tab)
+    },
+    [importantFiles, getDefaultTab],
+  )
 
-  // Select the appropriate tab/file when content changes. Once the user has
-  // interacted with the tabs we keep their selection and only run this logic
-  // if no tab has been chosen yet.
+  // Handle license file request
   useEffect(() => {
-    if (activeTab !== null) return
-    if (isLoading) return
-
-    // First priority: README file if it exists
-    const readmeFile = importantFiles.find(
-      (file) =>
-        file.file_path.toLowerCase().endsWith("readme.md") ||
-        file.file_path.toLowerCase().endsWith("readme"),
-    )
+    if (onLicenseFileRequested && importantFiles.length > 0) {
+      const licenseTab = availableTabs.find(
+        (tab) =>
+          tab.type === "file" && tab.filePath && isLicenseFile(tab.filePath),
+      )
 
-    if (readmeFile) {
-      setActiveFilePath(readmeFile.file_path)
-      setActiveTab("file")
-    } else if (hasAiContent) {
-      // Second priority: AI content if available
-      setActiveTab("ai")
-      setActiveFilePath(null)
-    } else if (hasAiReview) {
-      setActiveTab("ai-review")
-      setActiveFilePath(null)
-    } else if (importantFiles.length > 0) {
-      // Third priority: First important file
-      setActiveFilePath(importantFiles[0].file_path)
-      setActiveTab("file")
+      if (licenseTab) {
+        setActiveTab(licenseTab)
+      } else {
+        // License file not found, fallback to default
+        const defaultTab = getDefaultTab()
+        setActiveTab(defaultTab)
+      }
     }
   }, [
-    aiDescription,
-    aiUsageInstructions,
-    aiReviewText,
-    hasAiContent,
-    hasAiReview,
+    onLicenseFileRequested,
     importantFiles,
-    activeTab,
-    isLoading,
+    availableTabs,
+    isLicenseFile,
+    getDefaultTab,
   ])
 
-  // Get file name from path
-  const getFileName = (path: string) => {
-    const parts = path.split("/")
-    return parts[parts.length - 1]
-  }
+  // Set default tab when no tab is active
+  useEffect(() => {
+    if (activeTab === null && !isLoading) {
+      const defaultTab = getDefaultTab()
+      setActiveTab(defaultTab)
+    }
+  }, [activeTab, isLoading, getDefaultTab])
 
-  // Get file icon based on extension
-  const getFileIcon = (path: string) => {
-    if (
-      path.endsWith(".js") ||
-      path.endsWith(".jsx") ||
-      path.endsWith(".ts") ||
-      path.endsWith(".tsx")
-    ) {
-      return <Code className="h-3.5 w-3.5 mr-1.5" />
+  // Validate active tab still exists (handles file deletion)
+  useEffect(() => {
+    if (activeTab?.type === "file" && activeTab.filePath) {
+      const fileExists = importantFiles.some(
+        (file) => file.file_path === activeTab.filePath,
+      )
+      if (!fileExists) {
+        // Active file was deleted, fallback to default
+        const defaultTab = getDefaultTab()
+        setActiveTab(defaultTab)
+      }
     }
-    return <FileText className="h-3.5 w-3.5 mr-1.5" />
-  }
+  }, [activeTab, importantFiles, getDefaultTab])
 
-  // Render AI content
-  const renderAiContent = () => {
-    return (
+  // Get active file content
+  const partialActiveFile = useMemo(() => {
+    if (activeTab?.type !== "file" || !activeTab.filePath) return null
+    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 activeFileContent = activeFileFull?.content_text || ""
+
+  // Render content based on active tab
+  const renderAiContent = useCallback(
+    () => (
       <div className="markdown-content">
         {aiDescription && (
           <div className="mb-6">
@@ -145,12 +301,11 @@ export default function ImportantFilesView({
           </div>
         )}
       </div>
-    )
-  }
-
-  const renderAiReviewContent = () => {
-    const isOwner = user?.github_username === packageAuthorOwner
+    ),
+    [aiDescription, aiUsageInstructions],
+  )
 
+  const renderAiReviewContent = useCallback(() => {
     if (!aiReviewText && !aiReviewRequested) {
       return (
         <div className="flex flex-col items-center justify-center py-8 px-4">
@@ -206,22 +361,61 @@ export default function ImportantFilesView({
     }
 
     return <MarkdownViewer markdownContent={aiReviewText || ""} />
-  }
+  }, [aiReviewText, aiReviewRequested, isOwner, onRequestAiReview])
 
-  // Get active file content
-  const partialActiveFile = importantFiles.find(
-    (file) => file.file_path === activeFilePath,
-  )
-  const { data: activeFileFull } = usePackageFile(
-    partialActiveFile
-      ? {
-          file_path: partialActiveFile.file_path,
-          package_release_id: partialActiveFile.package_release_id,
-        }
-      : null,
-    { keepPreviousData: true },
+  const renderFileContent = useCallback(() => {
+    if (!activeTab?.filePath || !activeFileContent) {
+      return <pre className="whitespace-pre-wrap">{activeFileContent}</pre>
+    }
+
+    if (isMarkdownFile(activeTab.filePath)) {
+      return <MarkdownViewer markdownContent={activeFileContent} />
+    }
+
+    if (isCodeFile(activeTab.filePath)) {
+      return (
+        <div className="overflow-x-auto">
+          <ShikiCodeViewer
+            code={activeFileContent}
+            filePath={activeTab.filePath}
+          />
+        </div>
+      )
+    }
+
+    return <pre className="whitespace-pre-wrap">{activeFileContent}</pre>
+  }, [activeTab, activeFileContent, isMarkdownFile, isCodeFile])
+
+  const renderTabContent = useCallback(() => {
+    if (!activeTab) return null
+
+    switch (activeTab.type) {
+      case "ai":
+        return renderAiContent()
+      case "ai-review":
+        return renderAiReviewContent()
+      case "file":
+        return renderFileContent()
+      default:
+        return null
+    }
+  }, [activeTab, renderAiContent, renderAiReviewContent, renderFileContent])
+
+  // Tab styling helper
+  const getTabClassName = useCallback(
+    (tab: TabInfo) => {
+      const isActive =
+        activeTab?.type === tab.type &&
+        (tab.type !== "file" || activeTab?.filePath === tab.filePath)
+
+      return `flex items-center px-3 py-1.5 rounded-md text-xs flex-shrink-0 whitespace-nowrap ${
+        isActive
+          ? "bg-gray-200 dark:bg-[#30363d] font-medium"
+          : "text-gray-500 dark:text-[#8b949e] hover:bg-gray-200 dark:hover:bg-[#30363d]"
+      }`
+    },
+    [activeTab],
   )
-  const activeFileContent = activeFileFull?.content_text || ""
 
   if (isLoading) {
     return (
@@ -249,7 +443,7 @@ export default function ImportantFilesView({
     )
   }
 
-  if (importantFiles.length === 0) {
+  if (importantFiles.length === 0 && !hasAiContent && !hasAiReview) {
     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]">
@@ -268,68 +462,24 @@ export default function ImportantFilesView({
     )
   }
 
-  const isOwner = user?.github_username === packageAuthorOwner
-
   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]">
         <div className="flex items-center space-x-2 overflow-x-auto no-scrollbar flex-1 min-w-0">
-          {/* AI Description Tab */}
-          {hasAiContent && (
+          {availableTabs.map((tab, index) => (
             <button
-              className={`flex items-center px-3 py-1.5 rounded-md text-xs flex-shrink-0 whitespace-nowrap ${
-                activeTab === "ai"
-                  ? "bg-gray-200 dark:bg-[#30363d] font-medium"
-                  : "text-gray-500 dark:text-[#8b949e] hover:bg-gray-200 dark:hover:bg-[#30363d]"
-              }`}
-              onClick={() => {
-                setActiveTab("ai")
-                setActiveFilePath(null)
-              }}
+              key={`${tab.type}-${tab.filePath || index}`}
+              className={getTabClassName(tab)}
+              onClick={() => selectTab(tab)}
             >
-              <SparklesIcon className="h-3.5 w-3.5 mr-1.5" />
-              <span>Description</span>
-            </button>
-          )}
-
-          {/* AI Review Tab */}
-          <button
-            className={`flex items-center px-3 py-1.5 rounded-md text-xs flex-shrink-0 whitespace-nowrap ${
-              activeTab === "ai-review"
-                ? "bg-gray-200 dark:bg-[#30363d] font-medium"
-                : "text-gray-500 dark:text-[#8b949e] hover:bg-gray-200 dark:hover:bg-[#30363d]"
-            }`}
-            onClick={() => {
-              setActiveTab("ai-review")
-              setActiveFilePath(null)
-            }}
-          >
-            <SparklesIcon className="h-3.5 w-3.5 mr-1.5" />
-            <span>AI Review</span>
-          </button>
-
-          {/* File Tabs */}
-          {importantFiles.map((file) => (
-            <button
-              key={file.package_file_id}
-              className={`flex items-center px-3 py-1.5 rounded-md text-xs flex-shrink-0 whitespace-nowrap ${
-                activeTab === "file" && activeFilePath === file.file_path
-                  ? "bg-gray-200 dark:bg-[#30363d] font-medium"
-                  : "text-gray-500 dark:text-[#8b949e] hover:bg-gray-200 dark:hover:bg-[#30363d]"
-              }`}
-              onClick={() => {
-                setActiveTab("file")
-                setActiveFilePath(file.file_path)
-              }}
-            >
-              {getFileIcon(file.file_path)}
-              <span>{getFileName(file.file_path)}</span>
+              {tab.icon}
+              <span>{tab.label}</span>
             </button>
           ))}
         </div>
         <div className="ml-auto flex items-center">
-          {((activeTab === "file" && activeFileContent) ||
-            (activeTab === "ai-review" && aiReviewText)) && (
+          {((activeTab?.type === "file" && activeFileContent) ||
+            (activeTab?.type === "ai-review" && aiReviewText)) && (
             <button
               className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md transition-all duration-300"
               onClick={handleCopy}
@@ -342,7 +492,7 @@ export default function ImportantFilesView({
               <span className="sr-only">Copy</span>
             </button>
           )}
-          {activeTab === "ai-review" && aiReviewText && isOwner && (
+          {activeTab?.type === "ai-review" && aiReviewText && isOwner && (
             <button
               className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md ml-1"
               onClick={onRequestAiReview}
@@ -352,10 +502,10 @@ export default function ImportantFilesView({
               <span className="sr-only">Re-request AI Review</span>
             </button>
           )}
-          {activeTab === "file" && (
+          {activeTab?.type === "file" && (
             <button
               className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md"
-              onClick={() => onEditClicked?.(activeFilePath)}
+              onClick={() => onEditClicked?.(activeTab.filePath)}
             >
               <Edit className="h-4 w-4" />
               <span className="sr-only">Edit</span>
@@ -363,30 +513,7 @@ export default function ImportantFilesView({
           )}
         </div>
       </div>
-      <div className="p-4 bg-white dark:bg-[#0d1117]">
-        {activeTab === "ai" ? (
-          renderAiContent()
-        ) : activeTab === "ai-review" ? (
-          renderAiReviewContent()
-        ) : activeFilePath &&
-          (activeFilePath.endsWith(".md") ||
-            activeFilePath?.toLowerCase().endsWith("readme")) ? (
-          <MarkdownViewer markdownContent={activeFileContent} />
-        ) : activeFilePath &&
-          (activeFilePath.endsWith(".js") ||
-            activeFilePath.endsWith(".jsx") ||
-            activeFilePath.endsWith(".ts") ||
-            activeFilePath.endsWith(".tsx")) ? (
-          <div className="overflow-x-auto">
-            <ShikiCodeViewer
-              code={activeFileContent}
-              filePath={activeFilePath}
-            />
-          </div>
-        ) : (
-          <pre className="whitespace-pre-wrap">{activeFileContent}</pre>
-        )}
-      </div>
+      <div className="p-4 bg-white dark:bg-[#0d1117]">{renderTabContent()}</div>
     </div>
   )
 }

package/src/components/ViewPackagePage/components/main-content-header.tsx

@@ -105,7 +105,7 @@ export default function MainContentHeader({
             <DropdownMenuItem disabled={!Boolean(packageInfo)} asChild>
               <a
                 href={`/editor?package_id=${packageInfo?.package_id}`}
-                className="cursor-pointer p-2 py-4"
+                className="cursor-pointer px-2 py-3"
               >
                 <Pencil className="h-4 w-4 mx-3" />
                 Edit Online
@@ -115,7 +115,7 @@ export default function MainContentHeader({
             <DropdownMenuItem
               disabled={!Boolean(packageInfo)}
               onClick={handleDownloadZip}
-              className="cursor-pointer p-2 py-4"
+              className="cursor-pointer px-2 py-3"
             >
               <Package2 className="h-4 w-4 mx-3" />
               Download ZIP

package/src/components/ViewPackagePage/components/repo-page-content.tsx

@@ -57,6 +57,8 @@ export default function RepoPageContent({
   const [pendingAiReviewId, setPendingAiReviewId] = useState<string | null>(
     null,
   )
+  const [licenseFileRequested, setLicenseFileRequested] =
+    useState<boolean>(false)
   const queryClient = useQueryClient()
   const { data: aiReview } = useAiReview(pendingAiReviewId, {
     refetchInterval: (data) => (data && !data.ai_review_text ? 2000 : false),
@@ -82,6 +84,11 @@ export default function RepoPageContent({
     Boolean(pendingAiReviewId) ||
     isRequestingAiReview
 
+  const handleLicenseFileRequest = () => {
+    setLicenseFileRequested(true)
+    setTimeout(() => setLicenseFileRequested(false), 100)
+  }
+
   // Handle initial view selection and hash-based view changes
   useEffect(() => {
     if (isCircuitJsonLoading) return
@@ -222,6 +229,7 @@ export default function RepoPageContent({
                   })
                 }
               }}
+              onLicenseFileRequested={licenseFileRequested}
             />
           </div>
 
@@ -235,6 +243,7 @@ export default function RepoPageContent({
                 // Update URL hash when view changes
                 window.location.hash = view
               }}
+              onLicenseClick={handleLicenseFileRequest}
             />
           </div>
           {/* Releases section - Only visible on small screens */}

package/src/components/ViewPackagePage/components/sidebar-about-section.tsx

@@ -13,9 +13,12 @@ import { PackageInfo } from "@/lib/types"
 interface SidebarAboutSectionProps {
   packageInfo?: PackageInfo
   isLoading?: boolean
+  onLicenseClick?: () => void
 }
 
-export default function SidebarAboutSection() {
+export default function SidebarAboutSection({
+  onLicenseClick,
+}: SidebarAboutSectionProps = {}) {
   const { packageInfo, refetch: refetchPackageInfo } = useCurrentPackageInfo()
   const { data: packageRelease } = usePackageReleaseById(
     packageInfo?.latest_package_release_id,
@@ -137,7 +140,11 @@ export default function SidebarAboutSection() {
           ))}
         </div>
         <div className="space-y-2 text-sm">
-          <div className="flex items-center">
+          <button
+            className="flex items-center hover:underline hover:underline-offset-2 cursor-pointer hover:decoration-gray-500"
+            onClick={onLicenseClick}
+            disabled={!onLicenseClick}
+          >
             <svg
               className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]"
               viewBox="0 0 16 16"
@@ -146,7 +153,7 @@ export default function SidebarAboutSection() {
               <path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.53.53-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.29.736c-.264.152-.563.231-.868.231h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.53.53-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.29-.736c.263-.15.561-.231.865-.231H7.25V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path>
             </svg>
             <span>{currentLicense ?? "Unset"} license</span>
-          </div>
+          </button>
 
           <div className="flex items-center">
             <Star className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />

package/src/components/ViewPackagePage/components/sidebar.tsx

@@ -9,16 +9,18 @@ interface SidebarProps {
   packageInfo?: Package
   isLoading?: boolean
   onViewChange?: (view: "3d" | "pcb" | "schematic") => void
+  onLicenseClick?: () => void
 }
 
 export default function Sidebar({
   packageInfo,
   isLoading = false,
   onViewChange,
+  onLicenseClick,
 }: SidebarProps) {
   return (
     <div className="h-full p-4 bg-white dark:bg-[#0d1117] overflow-y-auto">
-      <SidebarAboutSection />
+      <SidebarAboutSection onLicenseClick={onLicenseClick} />
       <PreviewImageSquares
         packageInfo={packageInfo}
         onViewChange={onViewChange}