Skip to content

feat: Add tabs Layout#7

Open
DhruvLohar wants to merge 4 commits into
n7olkachev:masterfrom
DhruvLohar:dhruv/feat-add-tabs-layout
Open

feat: Add tabs Layout#7
DhruvLohar wants to merge 4 commits into
n7olkachev:masterfrom
DhruvLohar:dhruv/feat-add-tabs-layout

Conversation

@DhruvLohar

@DhruvLohar DhruvLohar commented May 26, 2026

Copy link
Copy Markdown

Summary

This PR adds two quality-of-life features to the database UI: a persistent tabbed interface for working across multiple tables simultaneously, and a one-click copy button on every table
cell.


Tabbed Table Navigation

Opens each table in a tab at the top of the content area, similar to how a database client like TablePlus or DBeaver works.

Behaviour:

  • Clicking any table in the sidebar opens it as a new tab
  • Tabs persist across hard refreshes via localStorage — reloading the page restores your full session
  • Filters, sorts, and pagination are saved per-tab — switching away and back restores the exact state you left
  • Closing the active tab navigates to the left neighbour (falls back right if it's the first tab)
  • Clicking the already-active tab is a no-op (no unnecessary re-navigation)
  • Tab bar scrolls horizontally when overflow occurs; active tab is always scrolled into view when navigating from the sidebar
  • Tab labels show the table name only (strips schema prefix for brevity); full schema.table stored internally

Files added/changed:

  • src/lib/TabsContext.tsx — React context with localStorage hydration, openTab / updateTabHref / closeTab
  • src/components/TableTabs.tsx — tab bar UI component
  • src/app/layout.tsx — wraps app in TabsProvider, renders TableTabs above main content
  • src/app/[tableName]/TablePageClient.tsx — registers tab on mount, syncs href on every filter/sort/page change

Click-to-Copy on Table Cells

Every cell in every table now has a copy button that appears on row hover.

Behaviour:

  • Hover a row to reveal the copy icon on each cell
  • Click copies the cell value to clipboard
  • Icon flips to a green checkmark and a "Copied!" tooltip appears for 1.5s, then resets
  • Uses the existing @radix-ui/react-tooltip — no new dependencies added
  • CopyableCell is wrapped in React.memo to avoid unnecessary re-renders across large tables

Files added/changed:

  • src/components/CopyableCell.tsx — copy button with tooltip feedback
  • src/components/TableDisplay.tsx — renders CopyableCell for every cell, added "use client" directive

Screenshots

image
image

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