Skip to content

fixes extensions page to list all extensions #341 - #1

Merged
JesseVent merged 3 commits into
masterfrom
feature/packages-explorer
Jun 8, 2026
Merged

fixes extensions page to list all extensions #341#1
JesseVent merged 3 commits into
masterfrom
feature/packages-explorer

Conversation

@JesseVent

@JesseVent JesseVent commented Jun 8, 2026

Copy link
Copy Markdown
Owner

Feat: Add Interactive Packages Explorer Page

Description

This pull request adds a new Packages Explorer page (/packages) that connects directly to the registry's public RPC API (rpc/search_packages) to display a complete, searchable, sortable, and filterable table of all database packages.

Problem & Justification

Currently, the database.dev website only displays a handful of "Popular packages" on the homepage. There is no way for developers to browse, search, or inspect the full catalog of packages hosted in the registry.

  • With only around 60 packages in total in the registry, it is currently impossible to see what extensions exist in the system without guessing handles or using custom search inputs.
  • Developers need a dedicated explorer where they can discover extensions, check their versions, see what other extensions they require (e.g., pg_cron), and quickly copy the install command.

Key Features Implemented:

  • Direct RPC Fetch: Queries the public database.dev API gateway to load all packages client-side.
  • Advanced Filtering: Filter packages dynamically by search query (name, handle, description), publisher, and required extensions.
  • Flexible Sorting: Sort columns (Name, Publisher, Creation Date) in ascending or descending order.
  • Copy-to-Clipboard Action: Individual quick-copy action buttons that copy the CLI installation command with a visual success checkmark animation.
  • Pagination: Navigate the package catalog with adjustable row limits (10/25/50).
  • Navigation Integration: Added a "Packages" link to the main header navigation bar so the page is easily accessible.
  • Responsive & Premium UI: Designed with clean badges, responsive table layout, hover states, and full dark/light mode compliance matching database.dev aesthetics.

Summary by CodeRabbit

  • New Features
    • Added "Packages" navigation link to the navbar.
    • Introduced a new Packages explorer page with interactive package discovery, including search, filtering, sorting by name/version/creation date, and pagination capabilities.
    • Added copy-to-clipboard functionality for package installation commands.

@coderabbitai

coderabbitai Bot commented Jun 8, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@JesseVent, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 28 minutes and 45 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ac8bacf2-73ee-4584-aab9-a18ce5058bb2

📥 Commits

Reviewing files that changed from the base of the PR and between 0f716a9 and 5e7e8d4.

⛔ Files ignored due to path filters (1)
  • assets/squid-supabase.jpg is excluded by !**/*.jpg
📒 Files selected for processing (6)
  • website/components/layouts/Navbar.tsx
  • website/content/docs/cli.mdx
  • website/content/docs/install-a-package.mdx
  • website/next-env.d.ts
  • website/pages/packages.tsx
  • website/tsconfig.json
📝 Walkthrough

Walkthrough

This PR adds a packages explorer page accessible via /packages link in the navbar. The new page fetches package metadata from an RPC endpoint and renders an interactive table with search, filtering by publisher and required extension, multi-field sorting, client-side pagination, and per-package clipboard copy for CLI installation commands. Supporting build configuration and TypeScript references are updated.

Changes

Packages Explorer Page

Layer / File(s) Summary
Configuration and build setup
website/tsconfig.json, website/next-env.d.ts
tsconfig lib and paths arrays expanded to multi-line format, Next.js plugin registered, and TypeScript include paths broadened to .next/types/**/*.ts and .next/dev/types/**/*.ts for type generation.
Navigation integration
website/components/layouts/Navbar.tsx
Added "Packages" button linking to /packages in the navbar right-side controls, positioned before the Docs link.
Packages page data layer
website/pages/packages.tsx
Imports React, Next.js, UI components, and utilities. Package interface defines the shape of fetched records (name, handle, version, description, created date, required extensions). useEffect triggers initial fetch from RPC endpoint and manages loading/error state.
Packages page interactivity
website/pages/packages.tsx
handleCopyCommand generates dbdev add CLI syntax and writes to clipboard with toast feedback. Memoized filter option builders enumerate unique publishers and extensions, then filter packages by search text, selected publisher, and selected extension. Memoized sorting handler parses dates and sorts by name/handle/version/created fields in ascending or descending order, with pagination slicing and total page count.
Packages page UI rendering
website/pages/packages.tsx
Page header with hero section and filter controls (search input, publisher and extension dropdowns, reset button). Conditional error state with retry button and loading skeleton UI. Sortable table with columns for name, description, version badge, required-extension badges, created time (relative via dayjs), and per-row copy button with icon feedback. Pagination footer with rows-per-page selector and page navigation buttons. getLayout wrapper renders page inside shared Layout component, then default export.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A new explorer hops into view,
With packages sorted and filtered too!
Copy commands with a clipboard's cheer,
Navigate pages without a fear—
The packages page is shiny and clear! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Title check ⚠️ Warning The PR title 'fixes extensions page to list all extensions #341' does not match the actual changes, which add a new Packages Explorer page. The changes are about packages, not extensions. Update the title to reflect the actual change, such as 'Add interactive packages explorer page' or 'feat: add packages explorer with search and filtering'.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/packages-explorer

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a new Packages Explorer page (website/pages/packages.tsx) that allows users to search, filter, sort, and paginate database packages from database.dev. It also adds a link to this page in the navigation bar and updates TypeScript configurations. Feedback on the changes suggests refactoring the raw fetch call in the packages page to use the project's configured supabase client and wrapping it in useCallback to prevent unnecessary recreations and address potential dependency issues.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment thread website/pages/packages.tsx
Comment thread website/pages/packages.tsx
@JesseVent JesseVent changed the title feat: add interactive packages explorer page fixes extensions page to list all extensions #341 Jun 8, 2026
@JesseVent
JesseVent force-pushed the feature/packages-explorer branch from 0f716a9 to 498f589 Compare June 8, 2026 15:16

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
website/pages/packages.tsx (1)

64-79: ⚡ Quick win

Prefer the existing typed searchPackages data helper instead of duplicating raw RPC fetch logic.

This page reimplements request headers/error handling and bypasses the shared typed query path, which increases contract drift risk. Reusing website/data/packages/packages-search-query.ts keeps API behavior and typing consistent.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@website/pages/packages.tsx` around lines 64 - 79, The fetchPackages function
duplicates a raw RPC fetch with inline headers and error handling instead of
using the typed shared helper; replace the body of fetchPackages to call the
existing searchPackages helper from
website/data/packages/packages-search-query.ts (import it if missing), pass the
same parameters (e.g., handle: ''), and propagate its typed result and errors
into setLoading/setError/state updates so you keep centralized typing, headers
and error behavior managed by searchPackages.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@website/next-env.d.ts`:
- Line 4: Update the import in next-env.d.ts to use the stable generated routes
proxy path instead of the dev-only one: replace the import string
"./.next/dev/types/routes.d.ts" with "./.next/types/routes.d.ts" so typed routes
are found in CI and during next build/type-check; modify the import statement in
the file where it currently references the dev path (the import at the top of
next-env.d.ts) to point to the stable proxy path.

In `@website/pages/packages.tsx`:
- Around line 28-40: The Package interface is non-nullable while the
search_packages RPC can return nullable fields, causing runtime errors (e.g.,
calls like toLowerCase, substring, link construction, and
dayjs(pkg.created_at)); update handling so either (A) expand the Package type to
make nullable fields optional/nullable to match the RPC, or (B) normalize RPC
results before storing by mapping the search_packages response to a sanitized
object (e.g., coerce nulls to '' or a safe default and ensure created_at is a
valid string) and then call setPackages(...) with the sanitized array; reference
the Package interface, the search_packages response mapping, and the setPackages
call when making the change.

---

Nitpick comments:
In `@website/pages/packages.tsx`:
- Around line 64-79: The fetchPackages function duplicates a raw RPC fetch with
inline headers and error handling instead of using the typed shared helper;
replace the body of fetchPackages to call the existing searchPackages helper
from website/data/packages/packages-search-query.ts (import it if missing), pass
the same parameters (e.g., handle: ''), and propagate its typed result and
errors into setLoading/setError/state updates so you keep centralized typing,
headers and error behavior managed by searchPackages.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ee1605b9-3d64-48ec-8136-e10f34e575f3

📥 Commits

Reviewing files that changed from the base of the PR and between 3e2b49d and 0f716a9.

📒 Files selected for processing (4)
  • website/components/layouts/Navbar.tsx
  • website/next-env.d.ts
  • website/pages/packages.tsx
  • website/tsconfig.json

Comment thread website/next-env.d.ts
Comment thread website/pages/packages.tsx
@JesseVent
JesseVent merged commit 4b0d321 into master Jun 8, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant