@tscircuit/fake-snippets 0.0.53 → 0.0.55

package/fake-snippets-api/routes/api/order_quotes/create.ts

@@ -32,17 +32,14 @@ export default withRouteSpec({
     error: z.string().optional(),
   }),
 })(async (req, ctx) => {
-  const { package_release_id, vendor_name } = req.jsonBody
+  const { package_release_id, vendor_name, circuit_json } = req.jsonBody
 
-  // check package release exists
-  const packageRelease = ctx.db.getPackageReleaseById(package_release_id)
-  if (!packageRelease) {
-    return ctx.json(
-      {
-        error: "Package release not found",
-      },
-      { status: 404 },
-    )
+  if (package_release_id) {
+    // check package release exists
+    const packageRelease = ctx.db.getPackageReleaseById(package_release_id)
+    if (!packageRelease) {
+      return ctx.json({ error: "Package release not found" }, { status: 404 })
+    }
   }
 
   const orderQuoteId = ctx.db.addOrderQuote({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/Header2.tsx

@@ -17,7 +17,7 @@ const SearchButtonComponent = () => {
       {isExpanded ? (
         <div className="flex items-center gap-2">
           <div className="w-32 bg-white">
-            <SearchComponent />
+            <SearchComponent autofocus />
           </div>
           {/* <Button
             variant="ghost"

package/src/components/SearchComponent.tsx

@@ -9,6 +9,7 @@ import { PrefetchPageLink } from "./PrefetchPageLink"
 
 interface SearchComponentProps {
   onResultsFetched?: (results: any[]) => void // optional
+  autofocus?: boolean
 }
 
 const LinkWithNewTabHandling = ({
@@ -43,6 +44,7 @@ const LinkWithNewTabHandling = ({
 
 const SearchComponent: React.FC<SearchComponentProps> = ({
   onResultsFetched,
+  autofocus = false,
 }) => {
   const [searchQuery, setSearchQuery] = useState("")
   const [showResults, setShowResults] = useState(false)
@@ -74,7 +76,9 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
 
   // Focus input on mount
   useEffect(() => {
-    inputRef.current?.focus()
+    if (autofocus) {
+      inputRef.current?.focus()
+    }
   }, [])
 
   useEffect(() => {

package/src/components/ViewPackagePage/components/markdown-viewer.tsx

@@ -1,37 +1,54 @@
+import React, { useEffect } from "react"
 import Markdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 
+import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
+
 export default function MarkdownViewer({
   markdownContent,
 }: {
   markdownContent: string
 }) {
+  const { highlighter } = useShikiHighlighter()
   return (
-    <div className="prose dark:prose-invert prose-pre:bg-gray-100 dark:prose-pre:bg-gray-800 prose-code:font-mono markdown-content">
-      <Markdown
-        remarkPlugins={[remarkGfm]}
-        components={{
-          code({ node, className, children, ...props }) {
-            const isCodeBlock =
-              className?.includes("language-") || /\n/.test(String(children))
-
-            // Don't use code tags cause of it's backticks not being removed
-            return isCodeBlock ? (
-              <div className="bg-gray-100 dark:bg-gray-800 rounded overflow-auto w-full">
-                <span className="text-gray-800 dark:text-gray-200 font-mono whitespace-pre">
+    <div className="markdown-code">
+      <div className="prose dark:prose-invert prose-pre:py-0 prose-pre:px-6 prose-pre:bg-white dark:prose-pre:bg-gray-800 prose-code:font-mono markdown-content">
+        <Markdown
+          remarkPlugins={[remarkGfm]}
+          components={{
+            code({ node, className, children, ...props }) {
+              const isCodeBlock =
+                className?.includes("language-") || /\n/.test(String(children))
+              const dom = document.createElement("div")
+              if (highlighter) {
+                dom.innerHTML = highlighter.codeToHtml(
+                  children?.toString() || "",
+                  {
+                    lang: "tsx",
+                    themes: {
+                      light: "github-light",
+                      dark: "github-dark",
+                    },
+                  },
+                )
+              }
+              // Don’t use <code> tags (they leave backticks intact)
+              return isCodeBlock ? (
+                <div
+                  dangerouslySetInnerHTML={{ __html: dom.innerHTML }}
+                  className="border rounded-lg"
+                ></div>
+              ) : (
+                <span className="bg-gray-100 dark:bg-gray-800 text-gray-800 font-semibold font-mono dark:text-gray-200 px-1 py-0.5 rounded">
                   {children}
                 </span>
-              </div>
-            ) : (
-              <span className="bg-gray-100 dark:bg-gray-800 text-gray-800 font-semibold font-mono dark:text-gray-200 px-1 py-0.5 rounded">
-                {children}
-              </span>
-            )
-          },
-        }}
-      >
-        {markdownContent}
-      </Markdown>
+              )
+            },
+          }}
+        >
+          {markdownContent}
+        </Markdown>
+      </div>
     </div>
   )
 }

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

@@ -321,7 +321,7 @@ export function CodeAndPreview({ pkg }: Props) {
     state.pkgFilesWithContent,
   ])
 
-  if ((!pkg && urlParams.package_id) || pkgFiles.isLoading) {
+  if ((!pkg && urlParams.package_id) || pkgFiles.isLoading || isLoadingFiles) {
     return (
       <div className="flex items-center justify-center h-64">
         <div className="flex flex-col items-center justify-center">

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

@@ -187,7 +187,8 @@ export default function EditorNav({
   }
 
   const canSavePackage = Boolean(
-    isLoggedIn && pkg?.owner_github_username === session?.github_username,
+    isLoggedIn &&
+      (!pkg || pkg?.owner_github_username === session?.github_username),
   )
   return (
     <nav className="lg:flex w-screen items-center justify-between px-2 py-3 border-b border-gray-200 bg-white text-sm border-t">
@@ -250,7 +251,7 @@ export default function EditorNav({
             variant="outline"
             size="sm"
             className={"ml-1 h-6 px-2 text-xs save-button"}
-            disabled={canSavePackage ? !hasUnsavedChanges : !isLoggedIn}
+            disabled={canSavePackage && pkg ? !hasUnsavedChanges : !isLoggedIn}
             onClick={canSavePackage ? onSave : () => forkSnippet()}
           >
             {canSavePackage ? (

package/src/index.css

@@ -40,3 +40,17 @@
   text-align: right;
   color: rgba(115, 138, 148, 0.4);
 }
+
+.markdown-code .shiki .line::before {
+  content: none !important;
+  display: none !important;
+}
+
+.markdown-code .shiki .line {
+  padding-left: 0 !important;
+}
+
+.markdown-code pre {
+  padding: 12px !important;
+  margin: 0 !important;
+}

package/src/lib/handleManualEditsImportWithSupportForMultipleFiles.ts

@@ -10,10 +10,6 @@ export const handleManualEditsImportWithSupportForMultipleFiles = (
     variant?: "default" | "destructive"
   }) => void,
 ) => {
-  console.log(
-    "handleManualEditsImportWithSupportForMultipleFiles",
-    entrypointFileName,
-  )
   try {
     let currentContent = files[entrypointFileName]
     const importRegex =

package/src/lib/posthog.ts

@@ -1,10 +1,15 @@
 import posthog from "posthog-js"
 
-if (!posthog.__loaded) {
-  posthog.init("phc_htd8AQjSfVEsFCLQMAiUooG4Q0DKBCjqYuQglc9V3Wo", {
-    api_host: "https://postpig.tscircuit.com",
-    person_profiles: "always",
-  })
+if (
+  !window.location.hostname.includes("localhost") &&
+  !window.location.hostname.includes("127.0.0.1")
+) {
+  if (!posthog.__loaded) {
+    posthog.init("phc_htd8AQjSfVEsFCLQMAiUooG4Q0DKBCjqYuQglc9V3Wo", {
+      api_host: "https://postpig.tscircuit.com",
+      person_profiles: "always",
+    })
+  }
 }
 
 export { posthog }

package/src/pages/dashboard.tsx

@@ -6,32 +6,57 @@ import Footer from "@/components/Footer"
 import { Snippet } from "fake-snippets-api/lib/db/schema"
 import { Link } from "wouter"
 import { CreateNewSnippetWithAiHero } from "@/components/CreateNewSnippetWithAiHero"
-import { Edit2, Star, ChevronDown, ChevronUp } from "lucide-react"
+import {
+  Edit2,
+  Star,
+  ChevronDown,
+  ChevronUp,
+  Key,
+  KeyRound,
+} from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { PrefetchPageLink } from "@/components/PrefetchPageLink"
 import { SnippetList } from "@/components/SnippetList"
 import { Helmet } from "react-helmet-async"
+import { useSignIn } from "@/hooks/use-sign-in"
+import { SnippetCard } from "@/components/SnippetCard"
+import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { useConfirmDeletePackageDialog } from "@/components/dialogs/confirm-delete-package-dialog"
 
 export const DashboardPage = () => {
   const axios = useAxios()
 
   const currentUser = useGlobalStore((s) => s.session?.github_username)
+  const isLoggedIn = Boolean(currentUser)
+  const signIn = useSignIn()
+
   const [showAllTrending, setShowAllTrending] = useState(false)
   const [showAllLatest, setShowAllLatest] = useState(false)
+  const [snippetToDelete, setSnippetToDelete] = useState<Snippet | null>(null)
+  const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
+    useConfirmDeletePackageDialog()
 
   const {
     data: mySnippets,
     isLoading,
     error,
-  } = useQuery<Snippet[]>("userSnippets", async () => {
-    const response = await axios.get(`/snippets/list?owner_name=${currentUser}`)
-    return response.data.snippets.sort(
-      (a: any, b: any) =>
-        new Date(b.updated_at || b.created_at).getTime() -
-        new Date(a.updated_at || a.created_at).getTime(),
-    )
-  })
+  } = useQuery<Snippet[]>(
+    "userSnippets",
+    async () => {
+      const response = await axios.get(
+        `/snippets/list?owner_name=${currentUser}`,
+      )
+      return response.data.snippets.sort(
+        (a: any, b: any) =>
+          new Date(b.updated_at || b.created_at).getTime() -
+          new Date(a.updated_at || a.created_at).getTime(),
+      )
+    },
+    {
+      enabled: isLoggedIn,
+    },
+  )
 
   const { data: trendingSnippets } = useQuery<Snippet[]>(
     "trendingSnippets",
@@ -49,6 +74,13 @@ export const DashboardPage = () => {
     },
   )
 
+  const baseUrl = useSnippetsBaseApiUrl()
+
+  const handleDeleteClick = (e: React.MouseEvent, snippet: Snippet) => {
+    e.preventDefault() // Prevent navigation
+    setSnippetToDelete(snippet)
+    openDeleteDialog()
+  }
   return (
     <div>
       <Helmet>
@@ -59,77 +91,120 @@ export const DashboardPage = () => {
         <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
         <div className="flex md:flex-row flex-col">
           <div className="md:w-3/4 p-0 md:pr-6">
-            <div className="mt-6 mb-4">
-              <div className="flex items-center">
-                <h2 className="text-sm text-gray-600 whitespace-nowrap">
-                  Edit Recent
+            {!isLoggedIn ? (
+              <div className="flex flex-col items-center justify-center h-64 rounded-md p-4 mt-[40px] mb-2 sm:mb-4">
+                <div className="p-4 mb-4 rounded-full bg-blue-50 border border-blue-100 shadow-sm">
+                  <KeyRound className="text-blue-500" size={32} />
+                </div>
+                <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-3">
+                  You're not logged in
+                </h2>
+
+                <p className="text-gray-600 mb-6 text-center max-w-md text-sm sm:text-base">
+                  Log in to access your dashboard and manage your snippets.
+                </p>
+                <Button onClick={() => signIn()} variant="outline">
+                  Log in
+                </Button>
+              </div>
+            ) : (
+              <>
+                <div className="mt-6 mb-4">
+                  <div className="flex items-center">
+                    <h2 className="text-sm text-gray-600 whitespace-nowrap">
+                      Edit Recent
+                    </h2>
+                    <div className="flex gap-2 items-center overflow-x-scroll md:overflow-hidden">
+                      {mySnippets &&
+                        mySnippets.slice(0, 3).map((snippet) => (
+                          <div key={snippet.snippet_id}>
+                            <PrefetchPageLink
+                              href={`/editor?snippet_id=${snippet.snippet_id}`}
+                              className="text-blue-600 hover:underline"
+                            >
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="font-medium"
+                              >
+                                {snippet.unscoped_name}
+                                <Edit2 className="w-3 h-3 ml-2" />
+                              </Button>
+                            </PrefetchPageLink>
+                          </div>
+                        ))}
+                    </div>
+                  </div>
+                </div>
+                {/* <CreateNewSnippetWithAiHero/> */}
+                <h2 className="text-sm font-bold mb-2 text-gray-700 border-b border-gray-200">
+                  Your Recent Packages
                 </h2>
-                <div className="flex gap-2 items-center overflow-x-scroll md:overflow-hidden ">
-                  {mySnippets &&
-                    mySnippets.slice(0, 3).map((snippet) => (
-                      <div key={snippet.snippet_id}>
-                        <PrefetchPageLink
-                          href={`/editor?snippet_id=${snippet.snippet_id}`}
-                          className="text-blue-600 hover:underline"
-                        >
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="font-medium"
-                          >
-                            {snippet.unscoped_name}
-                            <Edit2 className="w-3 h-3 ml-2" />
-                          </Button>
-                        </PrefetchPageLink>
+                {isLoading && (
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {[...Array(6)].map((_, i) => (
+                      <div
+                        key={i}
+                        className="border p-4 rounded-md animate-pulse"
+                      >
+                        <div className="flex items-start gap-4">
+                          <div className="h-16 w-16 flex-shrink-0 rounded-md bg-slate-200"></div>
+                          <div className="flex-1">
+                            <div className="h-5 bg-slate-200 rounded w-3/4 mb-2"></div>
+                            <div className="h-4 bg-slate-200 rounded w-1/2 mb-2"></div>
+                            <div className="flex gap-2">
+                              <div className="h-3 bg-slate-200 rounded w-16"></div>
+                              <div className="h-3 bg-slate-200 rounded w-16"></div>
+                            </div>
+                          </div>
+                        </div>
                       </div>
                     ))}
-                </div>
-              </div>
-            </div>
-            <CreateNewSnippetWithAiHero />
-            <h2 className="text-sm font-bold mb-2 text-gray-700 border-b border-gray-200">
-              Your Recent Snippets
-            </h2>
-            {isLoading && <div>Loading...</div>}
-            {mySnippets && (
-              <ul className="space-y-1">
-                {mySnippets.slice(0, 10).map((snippet) => (
-                  <li
-                    key={snippet.snippet_id}
-                    className="flex items-center justify-between"
-                  >
-                    <Link
-                      href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
-                      className="text-blue-600 hover:underline text-sm"
-                    >
-                      {snippet.unscoped_name}
-                    </Link>
-                    <span className="text-xs text-gray-500">
-                      {new Date(snippet.created_at).toLocaleDateString()}
+                  </div>
+                )}
+                {mySnippets && mySnippets.length > 0 ? (
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    {mySnippets.slice(0, 10).map((snippet) => (
+                      <SnippetCard
+                        key={snippet.snippet_id}
+                        snippet={snippet}
+                        baseUrl={baseUrl}
+                        isCurrentUserSnippet={
+                          snippet.owner_name === currentUser
+                        }
+                        onDeleteClick={handleDeleteClick}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  !isLoading &&
+                  mySnippets?.length === 0 && (
+                    <span className="font-medium text-sm text-gray-500">
+                      No packages found
                     </span>
-                  </li>
-                ))}
-              </ul>
-            )}
-            {mySnippets && mySnippets.length > 10 && (
-              <Link
-                href={`/${currentUser}`}
-                className="text-sm text-blue-600 hover:underline mt-2 inline-block"
-              >
-                View all snippets
-              </Link>
+                  )
+                )}
+                {mySnippets && mySnippets.length > 10 && (
+                  <Link
+                    href={`/${currentUser}`}
+                    className="text-sm text-blue-600 hover:underline mt-2 inline-block"
+                  >
+                    View all packages
+                  </Link>
+                )}
+              </>
             )}
           </div>
           <div className="md:w-1/4">
             <SnippetList
-              title="Trending Snippets"
+              title="Trending Packages"
               snippets={trendingSnippets}
               showAll={showAllTrending}
               onToggleShowAll={() => setShowAllTrending(!showAllTrending)}
             />
             <div className="mt-8">
               <SnippetList
-                title="Latest Snippets"
+                title="Latest Packages"
                 snippets={latestSnippets}
                 showAll={showAllLatest}
                 onToggleShowAll={() => setShowAllLatest(!showAllLatest)}
@@ -137,6 +212,12 @@ export const DashboardPage = () => {
             </div>
           </div>
         </div>
+        {snippetToDelete && (
+          <DeleteDialog
+            packageId={snippetToDelete.snippet_id}
+            packageName={snippetToDelete.unscoped_name}
+          />
+        )}
       </div>
       <Footer />
     </div>

package/src/pages/user-profile.tsx

@@ -22,7 +22,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { Star } from "lucide-react"
+import { Box, Star } from "lucide-react"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
@@ -188,10 +188,21 @@ export const UserProfilePage = () => {
             ) : (
               <div className="col-span-full flex justify-center">
                 <div className="flex flex-col items-center py-12 text-gray-500">
-                  <Star />
-                  <span className="text-lg font-medium">
-                    No starred packages
-                  </span>
+                  {activeTab === "starred" ? (
+                    <>
+                      <Star />
+                      <span className="text-lg font-medium">
+                        No starred packages
+                      </span>
+                    </>
+                  ) : (
+                    <>
+                      <Box />
+                      <span className="text-lg font-medium">
+                        No packages available
+                      </span>
+                    </>
+                  )}
                 </div>
               </div>
             )}