@tscircuit/fake-snippets 0.0.13 → 0.0.14

package/fake-snippets-api/routes/api/_fake/seed.ts

@@ -0,0 +1,13 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import { seed } from "fake-snippets-api/lib/db/seed"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "none",
+  jsonResponse: z.object({ ok: z.boolean() }),
+})(async (req, ctx) => {
+  seed(ctx.db)
+
+  return ctx.json({ ok: true })
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "type": "module",
   "repository": {
     "type": "git",
@@ -118,6 +118,7 @@
     "states-us": "^1.1.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
+    "timeago.js": "^4.0.2",
     "use-async-memo": "^1.2.5",
     "use-mouse-matrix-transform": "^1.3.0",
     "vaul": "^0.9.9",

package/src/components/SnippetTypeIcon.tsx

@@ -0,0 +1,36 @@
+import { Box, CircuitBoard, Layers, Rotate3D } from "lucide-react"
+import React from "react"
+import { cn } from "@/lib/utils"
+
+type SnippetType = "board" | "package" | "footprint" | "model"
+
+interface SnippetTypeIconProps {
+  type: SnippetType
+  className?: string
+}
+
+const typeIcons: Record<SnippetType, React.ReactNode> = {
+  board: <CircuitBoard className="w-4 h-4" />,
+  package: <Box className="w-4 h-4" />,
+  footprint: <Layers className="w-4 h-4" />,
+  model: <Rotate3D className="w-4 h-4" />,
+}
+
+const typeColors: Record<SnippetType, string> = {
+  board: "text-blue-500",
+  package: "text-green-500",
+  footprint: "text-purple-500",
+  model: "text-indigo-500",
+}
+
+export const SnippetTypeIcon: React.FC<SnippetTypeIconProps> = ({
+  type,
+  className,
+}) => {
+  if (!type || !(type in typeIcons)) return null
+  return (
+    <span className={cn("flex items-center", typeColors[type], className)}>
+      {typeIcons[type]}
+    </span>
+  )
+}

package/src/components/ViewSnippetHeader.tsx

@@ -4,6 +4,7 @@ import { useAxios } from "@/hooks/use-axios"
 import { useCurrentSnippet } from "@/hooks/use-current-snippet"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { toast, useToast } from "@/hooks/use-toast"
+import { LockClosedIcon } from "@radix-ui/react-icons"
 import { Snippet } from "fake-snippets-api/lib/db/schema"
 import { ChevronLeft, Eye, GitFork, Star } from "lucide-react"
 import { useEffect, useState } from "react"
@@ -136,6 +137,14 @@ export default function ViewSnippetHeader() {
             </Link>
           </h1>
           {snippet?.snippet_type && <TypeBadge type={snippet.snippet_type} />}
+          {snippet?.is_private && (
+            <div className="relative group pl-2">
+              <LockClosedIcon className="h-4 w-4 text-gray-700" />
+              <span className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-1 hidden group-hover:block bg-black text-white text-xs rounded py-1 px-2">
+                private
+              </span>
+            </div>
+          )}
         </div>
         <div className="flex items-center space-x-2">
           <Button variant="outline" size="sm" onClick={handleStarClick}>

package/src/components/dialogs/package-visibility-settings-dialog.tsx

@@ -28,7 +28,6 @@ export const PackageVisibilitySettingsDialog = ({
           <RadioGroup
             value={isPrivate ? "private" : "public"}
             onValueChange={(value) => setIsPrivate(value === "private")}
-            className="space-y-4"
           >
             <div
               className="flex items-start space-x-2 px-2 py-4 rounded-md hover:bg-slate-100 cursor-pointer"

package/src/pages/user-profile.tsx

@@ -10,7 +10,7 @@ import { Button } from "@/components/ui/button"
 import { GitHubLogoIcon, StarIcon, LockClosedIcon } from "@radix-ui/react-icons"
 import { Input } from "@/components/ui/input"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { MoreVertical, Trash2 } from "lucide-react"
+import { GlobeIcon, MoreVertical, PencilIcon, Trash2 } from "lucide-react"
 import { useConfirmDeleteSnippetDialog } from "@/components/dialogs/confirm-delete-snippet-dialog"
 import {
   DropdownMenu,
@@ -19,6 +19,10 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { OptimizedImage } from "@/components/OptimizedImage"
+import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { SnippetTypeIcon } from "@/components/SnippetTypeIcon"
+import { format } from "timeago.js"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
@@ -52,6 +56,8 @@ export const UserProfilePage = () => {
       },
     )
 
+  const baseUrl = useSnippetsBaseApiUrl()
+
   const snippetsToShow =
     activeTab === "starred" ? starredSnippets : userSnippets
   const isLoading =
@@ -118,49 +124,81 @@ export const UserProfilePage = () => {
                   key={snippet.snippet_id}
                   href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
                 >
-                  <div className="border p-4 rounded-md hover:shadow-md transition-shadow">
-                    <div className="flex justify-between items-start">
-                      <h3 className="text-md font-semibold">
-                        {snippet.unscoped_name}
-                      </h3>
-                      <div className="flex items-center gap-2">
-                        <div className="flex items-center text-gray-600">
-                          <StarIcon className="w-4 h-4 mr-1" />
-                          <span>{snippet.star_count || 0}</span>
+                  <div className="border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4">
+                    <div className="flex items-start gap-4">
+                      <div className="h-16 w-16 flex-shrink-0 rounded-md overflow-hidden">
+                        <OptimizedImage
+                          src={`${baseUrl}/snippets/images/${snippet.owner_name}/${snippet.unscoped_name}/pcb.svg`}
+                          alt={`${snippet.owner_name}'s profile`}
+                          className="object-cover h-full w-full transition-transform duration-300 -rotate-45 hover:rotate-0 hover:scale-110 scale-150"
+                        />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex justify-between items-start mb-[2px]">
+                          <h2 className="text-md font-semibold text-gray-900 truncate">
+                            {snippet.unscoped_name}
+                          </h2>
+                          <div className="flex items-center gap-2">
+                            <SnippetTypeIcon
+                              type={snippet.snippet_type}
+                              className="pt-[2.5px]"
+                            />
+                            <div className="flex items-center gap-1 text-gray-600">
+                              <StarIcon className="w-4 h-4 pt-[2.5px]" />
+                              <span className="text-[16px]">
+                                {snippet.star_count || 0}
+                              </span>
+                            </div>
+                            {isCurrentUserProfile && activeTab === "all" && (
+                              <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                  <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-8 w-8"
+                                  >
+                                    <MoreVertical className="h-4 w-4" />
+                                  </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                  <DropdownMenuItem
+                                    className="text-xs text-red-600"
+                                    onClick={(e) =>
+                                      handleDeleteClick(e, snippet)
+                                    }
+                                  >
+                                    <Trash2 className="mr-2 h-3 w-3" />
+                                    Delete Snippet
+                                  </DropdownMenuItem>
+                                </DropdownMenuContent>
+                              </DropdownMenu>
+                            )}
+                          </div>
                         </div>
-                        {snippet.is_private && (
-                          <div className="flex items-center text-gray-600">
-                            <LockClosedIcon className="w-4 h-4 mr-1" />
+                        <p
+                          className={`${!snippet.description && "h-[1.25rem]"} text-sm text-gray-500 mb-1 truncate max-w-xs`}
+                        >
+                          {snippet.description ? snippet.description : " "}
+                        </p>
+                        <div className={`flex items-center gap-4`}>
+                          {snippet.is_private ? (
+                            <div className="flex items-center text-xs gap-1 text-gray-500">
+                              <LockClosedIcon height={12} width={12} />
+                              <span>Private</span>
+                            </div>
+                          ) : (
+                            <div className="flex items-center text-xs gap-1 text-gray-500">
+                              <GlobeIcon height={12} width={12} />
+                              <span>Public</span>
+                            </div>
+                          )}
+                          <div className="flex items-center text-xs gap-1 text-gray-500">
+                            <PencilIcon height={12} width={12} />
+                            <span>{format(snippet.updated_at)}</span>
                           </div>
-                        )}
-                        {isCurrentUserProfile && activeTab === "all" && (
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="h-8 w-8"
-                              >
-                                <MoreVertical className="h-4 w-4" />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent>
-                              <DropdownMenuItem
-                                className="text-xs text-red-600"
-                                onClick={(e) => handleDeleteClick(e, snippet)}
-                              >
-                                <Trash2 className="mr-2 h-3 w-3" />
-                                Delete Snippet
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        )}
+                        </div>
                       </div>
                     </div>
-                    <p className="text-sm text-gray-500">
-                      Last Updated:{" "}
-                      {new Date(snippet.updated_at).toLocaleString()}
-                    </p>
                   </div>
                 </Link>
               ))}