@tscircuit/fake-snippets 0.0.121 → 0.0.122

package/src/pages/trending.tsx

@@ -1,201 +0,0 @@
-import React, { useEffect, useState } from "react"
-import { useQuery } from "react-query"
-import { useAxios } from "@/hooks/use-axios"
-import Header from "@/components/Header"
-import Footer from "@/components/Footer"
-import { useSearchParams } from "wouter"
-import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
-import { Search, Keyboard, Cpu, Layers, LucideBellElectric } from "lucide-react"
-import { Input } from "@/components/ui/input"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { Package } from "fake-snippets-api/lib/db/schema"
-import PackageSearchResults from "@/components/PackageSearchResults"
-
-const TrendingPage: React.FC = () => {
-  const axios = useAxios()
-  const apiBaseUrl = useApiBaseUrl()
-  const [searchParams, setSearchParams] = useSearchParams()
-
-  const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "")
-  const [category, setCategory] = useState(
-    searchParams.get("category") || "all",
-  )
-  const [time_period, setTimePeriod] = useState(
-    searchParams.get("time_period") || "all",
-  )
-  const [sortBy, setSortBy] = useState(searchParams.get("sort") || "stars")
-
-  useEffect(() => {
-    const params = new URLSearchParams()
-    if (searchQuery) params.set("q", searchQuery)
-    if (category !== "all") params.set("category", category)
-    if (time_period !== "all") params.set("time_period", time_period)
-    if (sortBy !== "stars") params.set("sort", sortBy)
-    setSearchParams(params)
-  }, [searchQuery, category, time_period, sortBy, setSearchParams])
-
-  const {
-    data: packages,
-    isLoading,
-    error,
-  } = useQuery<Package[]>(
-    ["trendingPackages", category, time_period],
-    async () => {
-      const params = new URLSearchParams()
-      if (category !== "all") params.append("tag", category)
-      if (time_period !== "all") params.append("time_period", time_period)
-
-      const response = await axios.get(
-        `/packages/list_trending?${params.toString()}`,
-      )
-      return response.data.packages
-    },
-    {
-      keepPreviousData: false,
-      refetchOnWindowFocus: false,
-      refetchOnMount: true,
-      staleTime: 5 * 60 * 1000,
-    },
-  )
-
-  const filteredAndSortedPackages = React.useMemo(() => {
-    if (!packages) return []
-
-    let filtered = packages.filter((pkg) => {
-      if (!searchQuery) return true
-
-      const query = searchQuery.toLowerCase().trim()
-      if (!query) return true
-
-      const searchableFields = [
-        pkg.unscoped_name?.toLowerCase() || "",
-        pkg.owner_github_username?.toLowerCase() || "",
-        pkg.description?.toLowerCase() || "",
-      ].filter(Boolean)
-
-      const queryWords = query.split(/\s+/).filter((word) => word.length > 0)
-
-      return searchableFields.some((field) => {
-        if (!field) return false
-        return queryWords.every((word) => field.includes(word))
-      })
-    })
-
-    return filtered.sort((a, b) => {
-      if (sortBy === "recent") {
-        const dateA = new Date(a.updated_at).getTime()
-        const dateB = new Date(b.updated_at).getTime()
-        return dateB - dateA
-      }
-      const starsA = a.star_count || 0
-      const starsB = b.star_count || 0
-      return starsB - starsA
-    })
-  }, [packages, searchQuery, sortBy])
-
-  return (
-    <div className="min-h-screen flex flex-col">
-      <Header />
-      <main className="flex-grow container mx-auto px-4 py-8 min-h-[80vh]">
-        <div className="mb-8 max-w-3xl">
-          <h1 className="text-4xl font-bold text-gray-900 mb-3">
-            Trending Packages
-          </h1>
-          <p className="text-lg text-gray-600 mb-4">
-            Check out some of the top circuit designs from our community.
-          </p>
-          <div className="flex flex-wrap gap-4">
-            <Select value={sortBy} onValueChange={setSortBy}>
-              <SelectTrigger className="w-[140px]">
-                <SelectValue placeholder="Sort By" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="stars">Most Starred</SelectItem>
-                <SelectItem value="recent">Most Recent</SelectItem>
-              </SelectContent>
-            </Select>
-            <Select value={time_period} onValueChange={setTimePeriod}>
-              <SelectTrigger className="w-[140px]">
-                <SelectValue placeholder="Time Period" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="7days">Last 7 Days</SelectItem>
-                <SelectItem value="30days">Last 30 Days</SelectItem>
-                <SelectItem value="all">All Time</SelectItem>
-              </SelectContent>
-            </Select>
-          </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 trending packages..."
-                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>
-        <PackageSearchResults
-          isLoading={isLoading}
-          error={error}
-          filteredPackages={filteredAndSortedPackages}
-          apiBaseUrl={apiBaseUrl}
-          emptyStateMessage={
-            searchQuery
-              ? `No packages match your search for "${searchQuery}".`
-              : category !== "all"
-                ? `No ${category} packages found in the trending list.`
-                : "There are no trending packages at the moment."
-          }
-        />
-      </main>
-      <Footer />
-    </div>
-  )
-}
-
-export default TrendingPage

package/src/pages/user-profile.tsx

@@ -1,330 +0,0 @@
-import Footer from "@/components/Footer"
-import Header from "@/components/Header"
-import { PackageCard } from "@/components/PackageCard"
-import { useConfirmDeletePackageDialog } from "@/components/dialogs/confirm-delete-package-dialog"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { useAxios } from "@/hooks/use-axios"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
-import { GitHubLogoIcon } from "@radix-ui/react-icons"
-import type { Package, PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
-import type React from "react"
-import { useState } from "react"
-import { useQuery } from "react-query"
-import NotFoundPage from "./404"
-import { useParams } from "wouter"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { Box, Star, Building2 } from "lucide-react"
-import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
-import { ConnectedPackagesList } from "@/components/preview/ConnectedPackagesList"
-import { useListUserOrgs } from "@/hooks/use-list-user-orgs"
-import { OrganizationCard } from "@/components/organization/OrganizationCard"
-
-export const UserProfilePage = () => {
-  const { username } = useParams()
-  const axios = useAxios()
-  const { data: organizations } = useListUserOrgs(username)
-  const [searchQuery, setSearchQuery] = useState("")
-  const [activeTab, setActiveTab] = useState("all")
-  const [filter, setFilter] = useState("most-recent")
-  const session = useGlobalStore((s) => s.session)
-  const {
-    data: account,
-    error: accountError,
-    isLoading: isLoadingAccount,
-    isFetched: isFetchedAccount,
-  } = useQuery<
-    { account: { github_username: string } },
-    Error & { status: number }
-  >(
-    ["account", username],
-    async () => {
-      const response = await axios.post("/accounts/get", {
-        github_username: username,
-      })
-      return response.data
-    },
-    {
-      retry: false,
-      refetchOnWindowFocus: false,
-    },
-  )
-
-  // use the username stored in the database so the correct case is displayed
-  const githubUsername = account?.account?.github_username || username
-  const isCurrentUserProfile = githubUsername === session?.github_username
-
-  const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
-    useConfirmDeletePackageDialog()
-  const [packageToDelete, setPackageToDelete] = useState<Package | null>(null)
-
-  const {
-    data: userPackages,
-    isLoading: isLoadingUserPackages,
-    refetch: refetchUserPackages,
-  } = useQuery<Package[]>(
-    ["userPackages", githubUsername],
-    async () => {
-      const response = await axios.post(`/packages/list`, {
-        owner_github_username: githubUsername,
-      })
-      return response.data.packages
-    },
-    {
-      enabled: Boolean(githubUsername),
-      refetchOnWindowFocus: false,
-    },
-  )
-
-  const { data: starredPackages, isLoading: isLoadingStarredPackages } =
-    useQuery<Package[]>(
-      ["starredPackages", githubUsername],
-      async () => {
-        const response = await axios.post(`/packages/list`, {
-          starred_by: githubUsername,
-        })
-        return response.data.packages
-      },
-      {
-        enabled: activeTab === "starred" && Boolean(githubUsername),
-        refetchOnWindowFocus: false,
-      },
-    )
-
-  const baseUrl = useApiBaseUrl()
-
-  if (!isFetchedAccount) {
-    return null
-  }
-
-  if (accountError) {
-    return <NotFoundPage heading="User Not Found" />
-  }
-  const packagesToShow =
-    activeTab === "starred" ? starredPackages : userPackages
-  const isLoading =
-    isLoadingAccount ||
-    (activeTab === "starred" ? isLoadingStarredPackages : isLoadingUserPackages)
-
-  const filteredPackages = packagesToShow
-    ?.filter((pkg) => {
-      return (
-        !searchQuery ||
-        pkg.unscoped_name
-          .toLowerCase()
-          .includes(searchQuery.toLowerCase().trim())
-      )
-    })
-    ?.sort((a, b) => {
-      switch (filter) {
-        case "most-recent":
-          return b.updated_at.localeCompare(a.updated_at)
-        case "least-recent":
-          return a.updated_at.localeCompare(b.updated_at)
-        case "most-starred":
-          return (b.star_count || 0) - (a.star_count || 0)
-        case "a-z":
-          return a.unscoped_name.localeCompare(b.unscoped_name)
-        case "z-a":
-          return b.unscoped_name.localeCompare(a.unscoped_name)
-        default:
-          return 0
-      }
-    })
-
-  const handleDeleteClick = (e: React.MouseEvent, pkg: Package) => {
-    e.preventDefault() // Prevent navigation
-    setPackageToDelete(pkg)
-    openDeleteDialog()
-  }
-
-  return (
-    <div>
-      <Header />
-      <div className="container mx-auto px-4 py-8">
-        <div className="flex items-center gap-4 mb-6">
-          <Avatar className="h-16 w-16">
-            <AvatarImage
-              src={`https://github.com/${githubUsername}.png?size=300`}
-              draggable={false}
-            />
-            <AvatarFallback className="select-none">
-              {githubUsername?.[0]?.toUpperCase()}
-            </AvatarFallback>
-          </Avatar>
-          <div>
-            <h1 className="text-3xl font-bold">
-              {isCurrentUserProfile
-                ? "My Profile"
-                : `${githubUsername}'s Profile`}
-            </h1>
-            <div className="text-gray-600 mt-1">
-              {userPackages?.length || 0} packages
-            </div>
-          </div>
-        </div>
-        <div className="mb-6">
-          <a
-            href={`https://github.com/${githubUsername}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center"
-          >
-            <Button variant="outline">
-              <GitHubLogoIcon className="mr-2" />
-              View GitHub Profile
-            </Button>
-          </a>
-        </div>
-        <Tabs
-          defaultValue="all"
-          onValueChange={setActiveTab}
-          className="mb-4 select-none overflow-x-auto no-scrollbar"
-        >
-          <TabsList>
-            <TabsTrigger value="all">Packages</TabsTrigger>
-            <TabsTrigger value="starred">Starred Packages</TabsTrigger>
-            {organizations && organizations.length > 0 && (
-              <TabsTrigger value="organizations">Organizations</TabsTrigger>
-            )}
-            {isCurrentUserProfile &&
-              (
-                userPackages?.filter((x) => Boolean(x.github_repo_full_name)) ??
-                []
-              ).length > 0 && (
-                <TabsTrigger value="repos">Connected Repositories</TabsTrigger>
-              )}
-          </TabsList>
-        </Tabs>
-        {activeTab !== "repos" && (
-          <div className="flex gap-4 mb-4">
-            <Input
-              type="text"
-              placeholder="Searching User Packages..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="mb-4"
-            />
-            <Select value={filter} onValueChange={setFilter}>
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="Sort by" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="most-recent">Most Recent</SelectItem>
-                <SelectItem value="least-recent">Least Recent</SelectItem>
-                <SelectItem value="most-starred">Most Starred</SelectItem>
-                <SelectItem value="a-z">A-Z</SelectItem>
-                <SelectItem value="z-a">Z-A</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        )}
-        {activeTab === "repos" ? (
-          <ConnectedPackagesList
-            packages={
-              userPackages?.filter((x) => Boolean(x.github_repo_full_name)) ??
-              []
-            }
-          />
-        ) : activeTab === "organizations" ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {organizations && organizations.length > 0 ? (
-              organizations
-                ?.filter((o) => {
-                  if (!isCurrentUserProfile && o.is_personal_org) {
-                    return false
-                  } else {
-                    return true
-                  }
-                })
-                .map((org: PublicOrgSchema) => (
-                  <OrganizationCard
-                    key={org.org_id}
-                    organization={org}
-                    withLink={true}
-                    showStats={true}
-                    showMembers={true}
-                    className="p-3"
-                  />
-                ))
-            ) : (
-              <div className="col-span-full flex justify-center">
-                <div className="flex flex-col items-center py-12 text-gray-500">
-                  <Building2 className="mb-2" size={24} />
-                  <span className="text-lg font-medium">No organizations</span>
-                  <span className="text-sm">
-                    You're not a member of any organizations yet.
-                  </span>
-                </div>
-              </div>
-            )}
-          </div>
-        ) : isLoading ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {[...Array(6)].map((_, i) => (
-              <PackageCardSkeleton key={i} />
-            ))}
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {filteredPackages?.length !== 0 ? (
-              filteredPackages?.map((pkg) => (
-                <PackageCard
-                  key={pkg.package_id}
-                  pkg={pkg}
-                  showOwner={activeTab === "starred"}
-                  isCurrentUserPackage={
-                    isCurrentUserProfile && activeTab === "all"
-                  }
-                  onDeleteClick={handleDeleteClick}
-                />
-              ))
-            ) : (
-              <div className="col-span-full flex justify-center">
-                <div className="flex flex-col items-center py-20 text-gray-500">
-                  {activeTab === "starred" ? (
-                    <>
-                      <Star className="mb-2" size={24} />
-                      <span className="text-lg font-medium">
-                        {searchQuery.trim()
-                          ? `No starred packages matching '${searchQuery.trim()}'`
-                          : "No starred packages"}
-                      </span>
-                    </>
-                  ) : (
-                    <>
-                      <Box className="mb-2" size={24} />
-                      <span className="text-lg font-medium">
-                        {searchQuery.trim()
-                          ? `No packages matching '${searchQuery.trim()}'`
-                          : "No packages available"}
-                      </span>
-                    </>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-      {packageToDelete && (
-        <DeleteDialog
-          packageId={packageToDelete.package_id}
-          packageName={packageToDelete.unscoped_name}
-          packageOwner={packageToDelete.owner_github_username ?? ""}
-          refetchUserPackages={refetchUserPackages}
-        />
-      )}
-      <Footer />
-    </div>
-  )
-}

package/src/pages/user-settings.tsx

@@ -1,161 +0,0 @@
-import { useState } from "react"
-import { useLocation, Redirect } from "wouter"
-import { Helmet } from "react-helmet-async"
-import { Button } from "@/components/ui/button"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import { useToast } from "@/hooks/use-toast"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { useHydration } from "@/hooks/use-hydration"
-import { AlertTriangle, Loader2, Trash2 } from "lucide-react"
-import Header from "@/components/Header"
-import Footer from "@/components/Footer"
-import { FullPageLoader } from "@/App"
-
-export default function UserSettingsPage() {
-  const [, navigate] = useLocation()
-  const { toast } = useToast()
-  const session = useGlobalStore((s) => s.session)
-  const hasHydrated = useHydration()
-
-  const [showDeleteAccountDialog, setShowDeleteAccountDialog] = useState(false)
-
-  if (!hasHydrated) {
-    return <FullPageLoader />
-  }
-
-  if (!session) {
-    return <Redirect to="/" />
-  }
-
-  const pageTitle = "User Settings - tscircuit"
-
-  const handleDeleteAccount = () => {
-    setShowDeleteAccountDialog(true)
-  }
-
-  const confirmDeleteAccount = () => {
-    // TODO: Implement delete account functionality
-    toast({
-      title: "Account deleted",
-      description: "Your account has been permanently deleted.",
-    })
-    navigate("/")
-  }
-
-  return (
-    <div className="min-h-screen bg-white">
-      <Helmet>
-        <title>{pageTitle}</title>
-      </Helmet>
-      <Header />
-
-      <section className="w-full px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16">
-        <div className="max-w-7xl mx-auto py-8">
-          <div className="mb-8">
-            <div className="flex items-center gap-4 mb-6">
-              <Avatar className="h-16 w-16 border-2 border-gray-200 shadow-sm">
-                <AvatarImage
-                  src={`https://github.com/${session.github_username}.png`}
-                  alt={`${session.github_username} avatar`}
-                />
-                <AvatarFallback className="text-lg bg-gradient-to-br from-blue-100 to-indigo-100 text-blue-700 font-medium">
-                  {(session.github_username || session.account_id || "")
-                    .slice(0, 2)
-                    .toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-              <div>
-                <h1 className="text-3xl font-bold text-gray-900">
-                  Account Settings
-                </h1>
-                <p className="text-gray-600 mt-1">
-                  Manage your account preferences and settings
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="space-y-8">
-            <div className="bg-white border border-red-200 rounded-xl shadow-sm">
-              <div className="px-6 py-5 border-b border-red-200 bg-red-50 rounded-t-xl">
-                <h2 className="text-xl font-semibold text-red-900">
-                  Danger Zone
-                </h2>
-                <p className="text-sm text-red-600 mt-2">
-                  Irreversible and destructive actions for your account.
-                </p>
-              </div>
-
-              <div className="p-6 lg:p-8">
-                <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
-                  <div className="flex-1">
-                    <h3 className="text-sm font-semibold text-gray-900 mb-2">
-                      Delete Account
-                    </h3>
-                    <p className="text-sm text-gray-500 leading-relaxed">
-                      Permanently delete your account and all associated data.
-                      This action cannot be undone and will remove all your
-                      packages, snippets, and account information.
-                    </p>
-                  </div>
-                  <div className="flex-shrink-0">
-                    <Button
-                      variant="destructive"
-                      onClick={handleDeleteAccount}
-                      className="bg-red-600 hover:bg-red-700 text-white px-6 py-2.5 text-sm font-medium shadow-sm w-full lg:w-auto"
-                    >
-                      <Trash2 className="mr-2 h-4 w-4" />
-                      Delete Account
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <Footer />
-
-      <AlertDialog
-        open={showDeleteAccountDialog}
-        onOpenChange={setShowDeleteAccountDialog}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle className="flex items-center gap-2 text-red-600">
-              <AlertTriangle className="h-5 w-5" />
-              Delete Account
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you absolutely sure you want to delete your account? This
-              action is permanent and cannot be undone. All your packages,
-              snippets, and account data will be permanently removed.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmDeleteAccount}
-              disabled={true}
-              className="bg-red-600 hover:bg-red-700"
-            >
-              {false && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-              Delete Account
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  )
-}