@tscircuit/fake-snippets 0.0.37 → 0.0.39

package/dist/index.d.ts

@@ -702,7 +702,7 @@ declare const createDatabase: ({ seed }?: {
         step_function_name: string | null;
         error_message: string | null;
     }[];
-}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getNewestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId"> & {
+}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId"> & {
     addOrder: (order: Omit<Order, "order_id">) => Order;
     getOrderById: (orderId: string) => Order | undefined;
     getOrderFilesByOrderId: (orderId: string) => OrderFile[];
@@ -734,7 +734,7 @@ declare const createDatabase: ({ seed }?: {
     updateAccountPackage: (accountPackageId: string, updates: Partial<AccountPackage>) => void;
     deleteAccountPackage: (accountPackageId: string) => boolean;
     addSnippet: (snippet: Omit<z.input<typeof snippetSchema>, "snippet_id" | "package_release_id">) => Snippet;
-    getNewestSnippets: (limit: number) => Snippet[];
+    getLatestSnippets: (limit: number) => Snippet[];
     getTrendingSnippets: (limit: number, since: string) => Snippet[];
     getPackagesByAuthor: (authorName?: string) => Package[];
     getSnippetByAuthorAndName: (authorName: string, snippetName: string) => Snippet | undefined;
@@ -946,7 +946,7 @@ declare const createDatabase: ({ seed }?: {
         step_function_name: string | null;
         error_message: string | null;
     }[];
-}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getNewestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId"> & {
+}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId"> & {
     addOrder: (order: Omit<Order, "order_id">) => Order;
     getOrderById: (orderId: string) => Order | undefined;
     getOrderFilesByOrderId: (orderId: string) => OrderFile[];
@@ -978,7 +978,7 @@ declare const createDatabase: ({ seed }?: {
     updateAccountPackage: (accountPackageId: string, updates: Partial<AccountPackage>) => void;
     deleteAccountPackage: (accountPackageId: string) => boolean;
     addSnippet: (snippet: Omit<z.input<typeof snippetSchema>, "snippet_id" | "package_release_id">) => Snippet;
-    getNewestSnippets: (limit: number) => Snippet[];
+    getLatestSnippets: (limit: number) => Snippet[];
     getTrendingSnippets: (limit: number, since: string) => Snippet[];
     getPackagesByAuthor: (authorName?: string) => Package[];
     getSnippetByAuthorAndName: (authorName: string, snippetName: string) => Snippet | undefined;

package/dist/index.js

@@ -2209,7 +2209,7 @@ var initializer = combine(databaseSchema.parse({}), (set, get) => ({
       is_unlisted: false
     };
   },
-  getNewestSnippets: (limit) => {
+  getLatestSnippets: (limit) => {
     const state = get();
     const snippetPackages = state.packages.filter((pkg) => pkg.is_snippet === true).map((pkg) => {
       const packageRelease = state.packageReleases.find(

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

@@ -320,7 +320,7 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
       is_unlisted: false,
     }
   },
-  getNewestSnippets: (limit: number): Snippet[] => {
+  getLatestSnippets: (limit: number): Snippet[] => {
     const state = get()
 
     // Get all packages that are snippets

package/fake-snippets-api/routes/api/packages/delete.ts

@@ -26,9 +26,7 @@ export default withRouteSpec({
 
   const pkg = ctx.db.packages[packageIndex]
 
-  console.log("pkg", pkg.owner_org_id, ctx.auth.personal_org_id)
-
-  if (pkg.owner_org_id !== ctx.auth.personal_org_id) {
+  if (pkg.owner_github_username !== ctx.auth.github_username) {
     return ctx.error(403, {
       error_code: "forbidden",
       message: "You don't have permission to delete this package",

package/fake-snippets-api/routes/api/snippets/{list_newest.ts → list_latest.ts}

@@ -8,6 +8,6 @@ export default withRouteSpec({
     snippets: z.array(snippetSchema),
   }),
 })(async (req, ctx) => {
-  const newestSnippets = ctx.db.getNewestSnippets(20)
-  return ctx.json({ snippets: newestSnippets })
+  const latestSnippets = ctx.db.getLatestSnippets(20)
+  return ctx.json({ snippets: latestSnippets })
 })

package/package.json

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

package/scripts/generate-sitemap.ts

@@ -9,7 +9,7 @@ const staticRoutes = [
   { url: "/playground", changefreq: "weekly", priority: 0.9 },
   { url: "/quickstart", changefreq: "monthly", priority: 0.8 },
   { url: "/dashboard", changefreq: "weekly", priority: 0.7 },
-  { url: "/newest", changefreq: "daily", priority: 0.8 },
+  { url: "/latest", changefreq: "daily", priority: 0.8 },
   { url: "/search", changefreq: "weekly", priority: 0.7 },
   { url: "/settings", changefreq: "monthly", priority: 0.6 },
   { url: "/community/join-redirect", changefreq: "monthly", priority: 0.6 },

package/src/App.tsx

@@ -61,7 +61,7 @@ const EditorPage = lazyImport(async () => {
 })
 const LandingPage = lazyImport(() => import("@/pages/landing"))
 const MyOrdersPage = lazyImport(() => import("@/pages/my-orders"))
-const NewestPage = lazyImport(() => import("@/pages/newest"))
+const LatestPage = lazyImport(() => import("@/pages/latest"))
 const PreviewPage = lazyImport(() => import("@/pages/preview"))
 const QuickstartPage = lazyImport(() => import("@/pages/quickstart"))
 const SearchPage = lazyImport(() => import("@/pages/search"))
@@ -112,7 +112,7 @@ function App() {
             <Route path="/quickstart" component={QuickstartPage} />
             <Route path="/dashboard" component={DashboardPage} />
             <Route path="/ai" component={AiPage} />
-            <Route path="/newest" component={NewestPage} />
+            <Route path="/latest" component={LatestPage} />
             <Route path="/settings" component={SettingsPage} />
             <Route path="/search" component={SearchPage} />
             <Route path="/trending" component={TrendingPage} />

package/src/components/Footer.tsx

@@ -56,8 +56,8 @@ export default function Footer() {
           <div className="space-y-4">
             <h3 className="font-semibold uppercase">Explore</h3>
             <footer className="flex flex-col space-y-2">
-              <PrefetchPageLink href="/newest" className="hover:underline">
-                Newest Snippets
+              <PrefetchPageLink href="/latest" className="hover:underline">
+                Latest Snippets
               </PrefetchPageLink>
               <PrefetchPageLink href="/trending" className="hover:underline">
                 Trending Snippets

package/src/components/HiddenFilesDropdown.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Settings, Check } from "lucide-react"
+
+interface HiddenFilesDropdownProps {
+  showHiddenFiles: boolean
+  onToggleHiddenFiles: () => void
+}
+
+export default function HiddenFilesDropdown({
+  showHiddenFiles,
+  onToggleHiddenFiles,
+}: HiddenFilesDropdownProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button className="ml-2 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none">
+          <Settings className="h-4 w-4" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="bg-white dark:bg-[#161b22] border border-gray-200 dark:border-[#30363d] rounded-md shadow-lg"
+      >
+        <DropdownMenuItem
+          onSelect={(e) => e.preventDefault()}
+          onClick={onToggleHiddenFiles}
+          className="text-xs text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-[#21262d] flex items-center gap-2"
+        >
+          <Check
+            className={`h-4 w-4 transition-opacity ${showHiddenFiles ? "opacity-100" : "opacity-0"}`}
+          />
+          Show Hidden Files
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/LatestSnippets.tsx

@@ -11,7 +11,7 @@ export const LatestSnippets: React.FC = () => {
     isLoading,
     error,
   } = useQuery<Snippet[]>("latestSnippets", async () => {
-    const response = await axios.get("/snippets/list_newest")
+    const response = await axios.get("/snippets/list_latest")
     return response.data.snippets
   })
 

package/src/components/ViewPackagePage/components/tab-views/3d-view.tsx

@@ -24,7 +24,7 @@ export default function ThreeDView() {
 
   return (
     <div className="h-[620px]">
-      <CadViewer circuitJson={circuitJson} />
+      <CadViewer clickToInteractEnabled circuitJson={circuitJson} />
     </div>
   )
 }

package/src/components/ViewPackagePage/components/tab-views/bom-view.tsx

@@ -23,7 +23,7 @@ export default function BOMView() {
   }
 
   return (
-    <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-4 mb-4 bg-white dark:bg-[#0d1117] w-full h-[620px]">
+    <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-4 mb-4 bg-white dark:bg-[#0d1117] w-full h-[620px] overflow-y-scroll">
       <BomTable circuitJson={circuitJson} />
     </div>
   )

package/src/components/ViewPackagePage/components/tab-views/files-view.tsx

@@ -5,6 +5,14 @@ import { FileText, Folder } from "lucide-react"
 import { useMemo, useState } from "react"
 import { isHiddenFile } from "../../utils/is-hidden-file"
 import { isWithinDirectory } from "../../utils/is-within-directory"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Settings } from "lucide-react"
+import HiddenFilesDropdown from "@/components/HiddenFilesDropdown"
 
 interface Directory {
   type: "directory"
@@ -41,6 +49,7 @@ export default function FilesView({
   onFileClicked,
 }: FilesViewProps) {
   const [activeDir, setActiveDir] = useState("")
+  const [showHiddenFiles, setShowHiddenFiles] = useState(false)
 
   // Parse package files to determine directories and files structure
   const { directories, files } = useMemo(() => {
@@ -52,7 +61,7 @@ export default function FilesView({
     const filesList: File[] = []
 
     packageFiles
-      .filter((file) => !isHiddenFile(file.file_path))
+      .filter((file) => showHiddenFiles || !isHiddenFile(file.file_path))
       .forEach((file) => {
         // Extract directory path
         const pathParts = file.file_path.split("/")
@@ -64,6 +73,7 @@ export default function FilesView({
           currentPath += (currentPath ? "/" : "") + part
           // Only add directory if it contains visible files
           if (
+            showHiddenFiles ||
             packageFiles.some(
               (f) =>
                 f.file_path.startsWith(currentPath + "/") &&
@@ -100,7 +110,7 @@ export default function FilesView({
       directories: dirsList,
       files: filesList,
     }
-  }, [packageFiles])
+  }, [packageFiles, showHiddenFiles])
   // Format date for display
   const formatDate = (dateString: string) => {
     const date = new Date(dateString)
@@ -155,6 +165,8 @@ export default function FilesView({
     setActiveDir(parentDir)
   }
 
+  const toggleHiddenFiles = () => setShowHiddenFiles((prev) => !prev)
+
   if (isLoading) {
     return (
       <div className="mb-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
@@ -197,6 +209,11 @@ export default function FilesView({
           <span>
             {files.length} files, {directories.length} directories
           </span>
+
+          <HiddenFilesDropdown
+            showHiddenFiles={showHiddenFiles}
+            onToggleHiddenFiles={toggleHiddenFiles}
+          />
         </div>
 
         {/* Mobile view */}
@@ -208,6 +225,10 @@ export default function FilesView({
           </div>
           <div className="flex items-center text-xs text-gray-500 dark:text-[#8b949e]">
             <span>{files.length + directories.length} items</span>
+            <HiddenFilesDropdown
+              showHiddenFiles={showHiddenFiles}
+              onToggleHiddenFiles={toggleHiddenFiles}
+            />
           </div>
         </div>
       </div>

package/src/components/ViewPackagePage/components/tab-views/schematic-view.tsx

@@ -26,6 +26,7 @@ export default function SchematicView() {
   return (
     <div className="h-[620px]">
       <SchematicViewer
+        clickToInteractEnabled
         circuitJson={circuitJson}
         containerStyle={{
           height: 620,

package/src/pages/dashboard.tsx

@@ -18,7 +18,7 @@ export const DashboardPage = () => {
 
   const currentUser = useGlobalStore((s) => s.session?.github_username)
   const [showAllTrending, setShowAllTrending] = useState(false)
-  const [showAllNewest, setShowAllNewest] = useState(false)
+  const [showAllLatest, setShowAllLatest] = useState(false)
 
   const {
     data: mySnippets,
@@ -41,10 +41,10 @@ export const DashboardPage = () => {
     },
   )
 
-  const { data: newestSnippets } = useQuery<Snippet[]>(
-    "newestSnippets",
+  const { data: latestSnippets } = useQuery<Snippet[]>(
+    "latestSnippets",
     async () => {
-      const response = await axios.get("/snippets/list_newest")
+      const response = await axios.get("/snippets/list_latest")
       return response.data.snippets
     },
   )
@@ -129,10 +129,10 @@ export const DashboardPage = () => {
             />
             <div className="mt-8">
               <SnippetList
-                title="Newest Snippets"
-                snippets={newestSnippets}
-                showAll={showAllNewest}
-                onToggleShowAll={() => setShowAllNewest(!showAllNewest)}
+                title="Latest Snippets"
+                snippets={latestSnippets}
+                showAll={showAllLatest}
+                onToggleShowAll={() => setShowAllLatest(!showAllLatest)}
               />
             </div>
           </div>

package/src/pages/latest.tsx

@@ -0,0 +1,212 @@
+import React, { useState } from "react"
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import { Snippet } from "fake-snippets-api/lib/db/schema"
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import {
+  Search,
+  Tag,
+  Calendar,
+  Keyboard,
+  Cpu,
+  Layers,
+  LucideBellElectric,
+} from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { SnippetCard } from "@/components/SnippetCard"
+
+const LatestPage: React.FC = () => {
+  const axios = useAxios()
+  const apiBaseUrl = useSnippetsBaseApiUrl()
+  const [searchQuery, setSearchQuery] = useState("")
+  const [category, setCategory] = useState("all")
+
+  const {
+    data: snippets,
+    isLoading,
+    error,
+  } = useQuery<Snippet[]>(
+    ["latestSnippets", category],
+    async () => {
+      const params = category !== "all" ? { tag: category } : {}
+      const response = await axios.get("/snippets/list_latest", { params })
+      return response.data.snippets
+    },
+    {
+      keepPreviousData: true,
+    },
+  )
+
+  const filteredSnippets = snippets?.filter((snippet) => {
+    if (!searchQuery) return true
+
+    const query = searchQuery.toLowerCase().trim()
+
+    const searchableFields = [
+      snippet.unscoped_name.toLowerCase(),
+      snippet.owner_name.toLowerCase(),
+      (snippet.description || "").toLowerCase(),
+    ]
+
+    return searchableFields.some((field) => {
+      const queryWords = query.split(/\s+/).filter((word) => word.length > 0)
+      return queryWords.every((word) => field.includes(word))
+    })
+  })
+
+  return (
+    <div className="min-h-screen flex flex-col bg-gray-50">
+      <Header />
+      <main className="flex-grow container mx-auto px-4 py-8">
+        <div className="mb-8 max-w-3xl">
+          <div className="flex items-center gap-2 mb-3">
+            <Calendar className="w-6 h-6 text-blue-500" />
+            <h1 className="text-4xl font-bold text-gray-900">
+              Latest Snippets
+            </h1>
+          </div>
+          <p className="text-lg text-gray-600 mb-4">
+            Explore the latest circuit designs from our community. These fresh
+            additions showcase new ideas and innovative approaches to circuit
+            design.
+          </p>
+          <div className="flex flex-wrap gap-3">
+            <Badge variant="secondary" className="px-3 py-1">
+              <Tag className="w-3.5 h-3.5 mr-1" />
+              <span>Latest Uploads</span>
+            </Badge>
+            <Badge variant="secondary" className="px-3 py-1">
+              <Calendar className="w-3.5 h-3.5 mr-1" />
+              <span>Most Recent First</span>
+            </Badge>
+          </div>
+        </div>
+
+        <div className="mb-6">
+          <div className="flex flex-col sm:flex-row gap-4 mb-4">
+            <div className="relative flex-grow">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+              <Input
+                type="text"
+                placeholder="Search latest snippets..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+            <Select value={category} onValueChange={setCategory}>
+              <SelectTrigger className="w-full sm:w-[180px]">
+                <SelectValue placeholder="Category" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Categories</SelectItem>
+                <SelectItem value="keyboard">
+                  <div className="flex items-center">
+                    <Keyboard className="mr-2 h-4 w-4" />
+                    <span>Keyboards</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="microcontroller">
+                  <div className="flex items-center">
+                    <Cpu className="mr-2 h-4 w-4" />
+                    <span>Microcontrollers</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="connector">
+                  <div className="flex items-center">
+                    <Layers className="mr-2 h-4 w-4" />
+                    <span>Connectors</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="sensor">
+                  <div className="flex items-center">
+                    <LucideBellElectric className="mr-2 h-4 w-4" />
+                    <span>Sensors</span>
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {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>
+        ) : error ? (
+          <div className="bg-red-50 border border-red-200 text-red-700 p-6 rounded-xl shadow-sm max-w-2xl mx-auto">
+            <div className="flex items-start">
+              <div className="mr-4 bg-red-100 p-2 rounded-full">
+                <Search className="w-6 h-6 text-red-600" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold mb-2">
+                  Error Loading Snippets
+                </h3>
+                <p className="text-red-600">
+                  We couldn't load the latest snippets. Please try again later.
+                </p>
+              </div>
+            </div>
+          </div>
+        ) : filteredSnippets?.length === 0 ? (
+          <div className="text-center py-12 px-4">
+            <div className="bg-slate-50 inline-flex rounded-full p-4 mb-4">
+              <Search className="w-8 h-8 text-slate-400" />
+            </div>
+            <h3 className="text-xl font-medium text-slate-900 mb-2">
+              No Matching Snippets
+            </h3>
+            <p className="text-slate-500 max-w-md mx-auto mb-6">
+              {searchQuery
+                ? `No snippets match your search for "${searchQuery}".`
+                : category !== "all"
+                  ? `No ${category} snippets found in the latest list.`
+                  : "There are no new snippets at the moment."}
+            </p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {filteredSnippets
+              ?.sort((a, b) => b.created_at.localeCompare(a.created_at))
+              ?.map((snippet) => (
+                <SnippetCard
+                  key={snippet.snippet_id}
+                  snippet={snippet}
+                  baseUrl={apiBaseUrl}
+                  showOwner={true}
+                />
+              ))}
+          </div>
+        )}
+      </main>
+      <Footer />
+    </div>
+  )
+}
+
+export default LatestPage

package/src/pages/newest.tsx

@@ -1,16 +0,0 @@
-import Header from "@/components/Header"
-import Footer from "@/components/Footer"
-import { LatestSnippets } from "@/components/LatestSnippets"
-
-export const NewestPage = () => {
-  return (
-    <div>
-      <Header />
-      <div className="container mx-auto px-4 py-8">
-        <h1 className="text-3xl font-bold mb-6">Newest Snippets</h1>
-        <LatestSnippets />
-      </div>
-      <Footer />
-    </div>
-  )
-}