mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 11:55:05 +03:00
Ali Waseem
28a2c25e0e
## Summary - Adds `<Shortcut>` component: binds a registered shortcut + renders a Linear-style hover tooltip (label + keybind pills) in one declaration - Adds `<ShortcutTooltip>` as the lower-level primitive for cases where binding lives elsewhere - Registers 13 G-chord navigation shortcuts (`G H` / `G T` / `G S` / `G D` / `G A` / `G B` / `G F` / `G R` / `G V` / `G O` / `G L` / `G I` / `G ,`) - Wires shortcuts into `SideBarNavLink` — binding + dynamic-delay tooltip (0ms collapsed, 1000ms expanded) replaces the old label-only collapsed tooltip Closes [FE-3048](https://linear.app/supabase/issue/FE-3048/create-navigation-shortcuts). ## Test plan - [x] Hover each main sidebar nav item with sidebar expanded — tooltip appears after delay with label + shortcut pills - [x] Collapse sidebar — tooltip appears instantly on hover - [x] Press `G` then a registered letter anywhere outside text inputs — navigates to that screen - [x] Press `G` inside a text input — no navigation fires - [x] Disabled nav items (project inactive) — no shortcut fires, no tooltip anomaly - [x] Feature-gated routes (auth/storage/realtime off) — shortcut is gone with the route <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Global keyboard shortcuts added for navigating major app sections (home, editors, database, auth, storage, functions, realtime, advisors, observability, logs, integrations, settings). * Navigation items display their keybinds in hover tooltips and can be triggered via those shortcuts. * Tooltip timing adapts to sidebar state (immediate when collapsed, delayed when expanded). * Shortcut-aware tooltip display now shows multi-step key sequences clearly. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Supabase UI Package
Figma-tokens setup
Tokens setup is based partly on blogpost on the Mirahi Digital Garden.
Transforms tokens stored on Figma Tokens using token-transformer and Style Dictionary to css-variables with references, and use them in your TailwindCSS environment with multiple themes.
Build all the styles files (css-variables and tailwind config)
npm run build-styles
This creates a directory called styles with the tokens and also CSS required.
Other examples
You can find other examples here by Jan Six
Adding new themes/sets
Add new sets by extending the scripts in package.json. Currently theme sets derive from exported/[set name] but can come from anywhere.
Adding a new set can be done with the following:
// package.json
//..
"build-transform-light": "npx token-transformer tokens.json styles/tokens/02_themes/light.json global,exported/light,theme global",
// add a new line like this:
"build-transform-new": "npx token-transformer tokens.json styles/tokens/02_themes/new.json global,new,theme global",
//..
// append the new theme/set command to end of the build-transform command
"build-transform": "npm run build-transform-global && npm run build-transform-typography && npm run build-transform-dark && npm run build-transform-light && npm run build-transform-new",