@tscircuit/fake-snippets 0.0.104 → 0.0.106

package/fake-snippets-api/routes/api/package_builds/get.ts

@@ -0,0 +1,70 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import { publicMapPackageBuild } from "fake-snippets-api/lib/public-mapping/public-map-package-build"
+
+export default withRouteSpec({
+  methods: ["GET"],
+  auth: "session",
+  queryParams: z.object({
+    package_build_id: z.string(),
+  }),
+  jsonResponse: z.object({
+    package_build: z.any(),
+  }),
+})(async (req, ctx) => {
+  const { package_build_id } = req.query
+
+  if (!package_build_id) {
+    return ctx.error(400, {
+      error_code: "invalid_request",
+      message: "package_build_id is required",
+    })
+  }
+
+  const packageBuild = ctx.db.packageBuilds.find(
+    (build) => build.package_build_id === package_build_id,
+  )
+
+  if (!packageBuild) {
+    return ctx.error(404, {
+      error_code: "package_build_not_found",
+      message: "Package build not found",
+    })
+  }
+
+  const packageRelease = ctx.db.packageReleases.find(
+    (pr) => pr.package_release_id === packageBuild.package_release_id,
+  )
+
+  if (!packageRelease) {
+    return ctx.error(404, {
+      error_code: "package_release_not_found",
+      message: "Package release not found",
+    })
+  }
+
+  const pkg = ctx.db.packages.find(
+    (p) => p.package_id === packageRelease.package_id,
+  )
+  if (!pkg) {
+    return ctx.error(404, {
+      error_code: "package_not_found",
+      message: "Package not found",
+    })
+  }
+
+  if (pkg.creator_account_id !== ctx.auth.account_id) {
+    return ctx.error(403, {
+      error_code: "unauthorized",
+      message: "You are not authorized to access this package build",
+    })
+  }
+
+  const publicBuild = publicMapPackageBuild(packageBuild, {
+    include_logs: true,
+  })
+
+  return ctx.json({
+    package_build: publicBuild,
+  })
+})

package/fake-snippets-api/routes/api/package_builds/latest.ts

@@ -0,0 +1,109 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import { publicMapPackageBuild } from "fake-snippets-api/lib/public-mapping/public-map-package-build"
+
+export default withRouteSpec({
+  methods: ["GET"],
+  auth: "session",
+  queryParams: z.object({
+    package_id: z.string().optional(),
+    package_release_id: z.string().optional(),
+  }),
+  jsonResponse: z.object({
+    package_build: z.any().nullable(),
+  }),
+})(async (req, ctx) => {
+  const { package_id, package_release_id } = req.query
+
+  if (!package_id && !package_release_id) {
+    return ctx.error(400, {
+      error_code: "invalid_request",
+      message: "Either package_id or package_release_id must be provided",
+    })
+  }
+
+  let targetPackageId = package_id
+
+  if (package_release_id) {
+    const packageRelease = ctx.db.packageReleases.find(
+      (pr) => pr.package_release_id === package_release_id,
+    )
+    if (!packageRelease) {
+      return ctx.error(404, {
+        error_code: "package_release_not_found",
+        message: "Package release not found",
+      })
+    }
+    targetPackageId = packageRelease.package_id
+  }
+
+  if (targetPackageId) {
+    const pkg = ctx.db.packages.find((p) => p.package_id === targetPackageId)
+    if (!pkg) {
+      return ctx.error(404, {
+        error_code: "package_not_found",
+        message: "Package not found",
+      })
+    }
+    if (pkg.creator_account_id !== ctx.auth.account_id) {
+      console.log(
+        pkg.creator_account_id !== ctx.auth.account_id,
+        pkg.creator_account_id,
+        ctx.auth.account_id,
+      )
+      return ctx.error(403, {
+        error_code: "unauthorized",
+        message: "You are not authorized to access this package",
+      })
+    }
+  }
+
+  let builds = ctx.db.packageBuilds
+
+  if (package_id) {
+    const packageReleases = ctx.db.packageReleases.filter(
+      (x) => x.package_id === package_id,
+    )
+    if (packageReleases.length === 0) {
+      return ctx.error(404, {
+        error_code: "package_not_found",
+        message: "Package not found",
+      })
+    }
+
+    const packageReleaseIds = packageReleases
+      .filter((pr) => pr.package_id === package_id)
+      .map((pr) => pr.package_release_id)
+
+    builds = builds.filter((build) =>
+      packageReleaseIds.includes(build.package_release_id),
+    )
+  }
+
+  if (package_release_id) {
+    builds = builds.filter(
+      (build) => build.package_release_id === package_release_id,
+    )
+  }
+
+  builds = builds.sort(
+    (a, b) =>
+      new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+  )
+
+  const latestBuild = builds[0] || null
+
+  if (!latestBuild) {
+    return ctx.json({
+      package_build: null,
+    })
+  }
+
+  const publicBuild = publicMapPackageBuild(latestBuild, {
+    include_logs: true,
+  })
+
+  return ctx.json({
+    package_build: publicBuild,
+  })
+})

package/fake-snippets-api/routes/api/package_builds/list.ts

@@ -0,0 +1,98 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import { publicMapPackageBuild } from "fake-snippets-api/lib/public-mapping/public-map-package-build"
+
+export default withRouteSpec({
+  methods: ["GET"],
+  auth: "session",
+  queryParams: z.object({
+    package_id: z.string().optional(),
+    package_release_id: z.string().optional(),
+  }),
+  jsonResponse: z.object({
+    package_builds: z.array(z.any()),
+  }),
+})(async (req, ctx) => {
+  const { package_id, package_release_id } = req.query
+  console.log(ctx.db.packageBuilds)
+  if (!package_id && !package_release_id) {
+    return ctx.error(400, {
+      error_code: "invalid_request",
+      message: "Either package_id or package_release_id must be provided",
+    })
+  }
+
+  let targetPackageId = package_id
+
+  if (package_release_id) {
+    const packageRelease = ctx.db.packageReleases.find(
+      (pr) => pr.package_release_id === package_release_id,
+    )
+    if (!packageRelease) {
+      return ctx.error(404, {
+        error_code: "package_release_not_found",
+        message: "Package release not found",
+      })
+    }
+    targetPackageId = packageRelease.package_id
+  }
+
+  if (targetPackageId) {
+    const pkg = ctx.db.packages.find((p) => p.package_id === targetPackageId)
+    if (!pkg) {
+      return ctx.error(404, {
+        error_code: "package_not_found",
+        message: "Package not found",
+      })
+    }
+    if (pkg.creator_account_id !== ctx.auth.account_id) {
+      return ctx.error(403, {
+        error_code: "unauthorized",
+        message: "You are not authorized to access this package",
+      })
+    }
+  }
+
+  let builds = ctx.db.packageBuilds
+
+  if (package_id) {
+    const packageReleases = ctx.db.packageReleases.filter(
+      (x) => x.package_id === package_id,
+    )
+    if (packageReleases.length === 0) {
+      return ctx.error(404, {
+        error_code: "package_not_found",
+        message: "Package not found",
+      })
+    }
+
+    const packageReleaseIds = packageReleases
+      .filter((pr) => pr.package_id === package_id)
+      .map((pr) => pr.package_release_id)
+
+    builds = builds.filter((build) =>
+      packageReleaseIds.includes(build.package_release_id),
+    )
+  }
+
+  if (package_release_id) {
+    builds = builds.filter(
+      (build) => build.package_release_id === package_release_id,
+    )
+  }
+
+  builds = builds.sort(
+    (a, b) =>
+      new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+  )
+
+  const publicBuilds = builds.map((build) =>
+    publicMapPackageBuild(build, {
+      include_logs: false,
+    }),
+  )
+
+  return ctx.json({
+    package_builds: publicBuilds,
+  })
+})

package/package.json

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

package/src/App.tsx

@@ -143,7 +143,8 @@ class ErrorBoundary extends React.Component<
     this.cleanup() // Clean up listeners before reload
     this.setState({ reloading: true })
     this.reloadTimeout = window.setTimeout(() => {
-      // window.location.reload()
+      if (window?.location.href.includes("localhost:")) return
+      window.location.reload()
     }, 500)
   }
 

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

@@ -5,12 +5,9 @@ import { usePackageReleaseById } from "@/hooks/use-package-release"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { BuildStatus, BuildStep } from "./build-status"
 import type { PackageRelease } from "fake-snippets-api/lib/db/schema"
-import {
-  getBuildStatus,
-  getLatestBuildFromPackageRelease,
-  StatusIcon,
-} from "@/components/preview"
+import { getBuildStatus, StatusIcon } from "@/components/preview"
 import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { useLatestPackageBuildByReleaseId } from "@/hooks/use-package-builds"
 
 function getTranspilationStatus(
   pr?: PackageRelease | null,
@@ -45,6 +42,9 @@ export default function SidebarReleasesSection() {
   const { data: packageRelease } = usePackageReleaseById(
     packageInfo?.latest_package_release_id,
   )
+  const { data: latestBuild } = useLatestPackageBuildByReleaseId(
+    packageRelease?.package_release_id,
+  )
 
   const buildSteps: BuildStep[] = [
     {
@@ -74,8 +74,9 @@ export default function SidebarReleasesSection() {
     )
   }
 
-  const latestBuild = getLatestBuildFromPackageRelease(packageRelease)
-  const { status, label } = getBuildStatus(latestBuild)
+  const { status, label } = latestBuild
+    ? getBuildStatus(latestBuild)
+    : { status: "pending", label: "pending" }
   return (
     <div className="mb-6">
       <h2 className="text-lg font-semibold mb-2">Releases</h2>

package/src/components/dialogs/GitHubRepositorySelector.tsx

@@ -1,17 +1,24 @@
-import { useRef } from "react"
+import { useRef, useState, useMemo } from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
 import { useAxios } from "@/hooks/use-axios"
 import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { useQuery } from "react-query"
 import { Button } from "../ui/button"
 import { Label } from "../ui/label"
-import { Minus, Plus } from "lucide-react"
+import { Minus, Plus, RefreshCw } from "lucide-react"
 import { Switch } from "../ui/switch"
 
 interface GitHubRepositorySelectorProps {
@@ -36,8 +43,15 @@ export const GitHubRepositorySelector = ({
   const axios = useAxios()
   const apiBaseUrl = useApiBaseUrl()
   const initialValue = useRef(selectedRepository).current
+  const [comboboxOpen, setComboboxOpen] = useState(false)
+  const [searchValue, setSearchValue] = useState("")
   // Fetch available repositories
-  const { data: repositoriesData, error: repositoriesError } = useQuery(
+  const {
+    data: repositoriesData,
+    error: repositoriesError,
+    refetch: refetchRepositories,
+    isLoading,
+  } = useQuery(
     ["github-repositories"],
     async () => {
       const response = await axios.get("/github/repos/list_available")
@@ -53,20 +67,103 @@ export const GitHubRepositorySelector = ({
     window.location.href = `${apiBaseUrl}/github/installations/create_new_installation_redirect?return_to_page=${window.location.pathname}`
   }
 
-  const handleValueChange = (newValue: string) => {
-    if (newValue === "connect-more") {
+  const handleRefreshRepositories = async () => {
+    try {
+      // First call the refresh endpoint to update repositories
+      await axios.post("/github/repos/refresh")
+      // Then refetch the repositories list
+      refetchRepositories()
+    } catch (error) {
+      console.error("Failed to refresh repositories:", error)
+      // Still try to refetch in case the error is not critical
+      refetchRepositories()
+    }
+  }
+
+  // Create searchable options for the combobox
+  const comboboxOptions = useMemo(() => {
+    const repos = repositoriesData?.repos || []
+    const repoOptions = repos.map((repo: any) => ({
+      value: repo.full_name,
+      label: repo.unscoped_name,
+      isPrivate: repo.private,
+      type: "repo" as const,
+    }))
+
+    const specialOptions = [
+      {
+        value: "connect-more",
+        label: "Connect More Repos",
+        type: "special" as const,
+        icon: "plus" as const,
+      },
+      ...(initialValue
+        ? [
+            {
+              value: "unlink//repo",
+              label: "Unlink Repo",
+              type: "special" as const,
+              icon: "minus" as const,
+            },
+          ]
+        : []),
+    ]
+
+    return [...repoOptions, ...specialOptions]
+  }, [repositoriesData?.repos, initialValue])
+
+  // Filter options based on search
+  const filteredOptions = useMemo(() => {
+    if (!searchValue) return comboboxOptions
+    return comboboxOptions.filter(
+      (option) =>
+        option.label.toLowerCase().includes(searchValue.toLowerCase()) ||
+        option.value.toLowerCase().includes(searchValue.toLowerCase()),
+    )
+  }, [comboboxOptions, searchValue])
+
+  const handleComboboxSelect = (value: string) => {
+    if (value === "connect-more") {
       handleConnectMoreRepos()
-    } else if (newValue === "unlink//repo") {
-      setSelectedRepository?.("unlink//repo")
     } else {
-      setSelectedRepository?.(newValue)
+      setSelectedRepository?.(value)
     }
+    setComboboxOpen(false)
+    setSearchValue("")
+  }
+
+  const getDisplayValue = () => {
+    if (!selectedRepository) return "Select a repository"
+    const option = comboboxOptions.find(
+      (opt) => opt.value === selectedRepository,
+    )
+    return option?.label || selectedRepository
   }
 
   return (
     <>
       <div className="space-y-1 mb-3">
-        <Label htmlFor="repository">GitHub Repository</Label>
+        <div className="flex items-center justify-between">
+          <Label htmlFor="repository">GitHub Repository</Label>
+          {!(
+            (repositoriesError as any)?.response?.status === 400 &&
+            (repositoriesError as any)?.response?.data?.error_code ===
+              "github_not_connected"
+          ) && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={handleRefreshRepositories}
+              disabled={disabled || isLoading}
+              className="h-auto p-1"
+            >
+              <RefreshCw
+                className={`w-3 h-3 ${isLoading ? "animate-spin" : ""}`}
+              />
+            </Button>
+          )}
+        </div>
         {(repositoriesError as any)?.response?.status === 400 &&
         (repositoriesError as any)?.response?.data?.error_code ===
           "github_not_connected" ? (
@@ -93,43 +190,79 @@ export const GitHubRepositorySelector = ({
           </div>
         ) : (
           <div className="space-y-2">
-            <Select
-              value={selectedRepository}
-              onValueChange={handleValueChange}
-              disabled={disabled}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Select a repository" />
-              </SelectTrigger>
-              <SelectContent className="!z-[999]">
-                {repositoriesData?.repos?.map((repo: any) => (
-                  <SelectItem key={repo.full_name} value={repo.full_name}>
-                    <div className="flex items-center space-x-2">
-                      <span>{repo.unscoped_name}</span>
-                      {repo.private && (
-                        <span className="text-xs text-muted-foreground">
-                          (private)
-                        </span>
-                      )}
-                    </div>
-                  </SelectItem>
-                ))}
-                <SelectItem value="connect-more">
-                  <div className="flex items-center space-x-2 text-blue-600">
-                    <Plus className="w-3 h-3" />
-                    <span>Connect More Repos</span>
-                  </div>
-                </SelectItem>
-                {Boolean(initialValue) && (
-                  <SelectItem value="unlink//repo">
-                    <div className="flex items-center space-x-2 text-red-600">
-                      <Minus className="w-3 h-3" />
-                      <span>Unlink Repo</span>
-                    </div>
-                  </SelectItem>
-                )}
-              </SelectContent>
-            </Select>
+            <Popover open={comboboxOpen} onOpenChange={setComboboxOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={comboboxOpen}
+                  className="w-full justify-between"
+                  disabled={disabled}
+                >
+                  {getDisplayValue()}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-full p-0 z-[999]">
+                <Command shouldFilter={false}>
+                  <CommandInput
+                    value={searchValue}
+                    onValueChange={setSearchValue}
+                    placeholder="Search repositories..."
+                  />
+                  <CommandEmpty className="text-sm text-slate-500 py-6">
+                    No repositories found.
+                  </CommandEmpty>
+                  <CommandGroup className="max-h-[400px] overflow-y-auto">
+                    {filteredOptions.map((option) => (
+                      <CommandItem
+                        key={option.value}
+                        onSelect={() => handleComboboxSelect(option.value)}
+                        className="cursor-pointer"
+                      >
+                        <div className="flex items-center space-x-2 w-full">
+                          {option.type === "repo" ? (
+                            <>
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  selectedRepository === option.value
+                                    ? "opacity-100"
+                                    : "opacity-0",
+                                )}
+                              />
+                              <span>{option.label}</span>
+                              {option.isPrivate && (
+                                <span className="text-xs text-muted-foreground">
+                                  (private)
+                                </span>
+                              )}
+                            </>
+                          ) : (
+                            <>
+                              {option.icon === "plus" ? (
+                                <Plus className="w-3 h-3 text-blue-600" />
+                              ) : (
+                                <Minus className="w-3 h-3 text-red-600" />
+                              )}
+                              <span
+                                className={
+                                  option.icon === "plus"
+                                    ? "text-blue-600"
+                                    : "text-red-600"
+                                }
+                              >
+                                {option.label}
+                              </span>
+                            </>
+                          )}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </Command>
+              </PopoverContent>
+            </Popover>
           </div>
         )}
       </div>