mirror of
https://github.com/supabase/supabase.git
synced 2026-05-09 10:19:50 -04:00
8939c97574
## What kind of change does this PR introduce? Chore / UI consistency fix. Resolves DEPR-418. ## What is the current behavior? Shortcut hints are still hand-built in several high-traffic Studio surfaces, which leads to inconsistent rendering and stale platform-specific markup. Buttons in particular can end up with awkward spacing and baseline alignment when shortcut labels are inserted directly into the button text. ## What is the new behavior? This PR standardises those shortcut hints around `KeyboardShortcut` and updates the surrounding layout primitives to support that approach more cleanly. It includes: - Design docs - using `KeyboardShortcut` in the table side-panel `ActionBar` - replacing hardcoded operation queue button shortcuts in `OperationQueueSidePanel` - standardising the command menu trigger shortcut chip and updating the `LayoutHeader` overrides to match the new DOM shape - replacing the AI editor empty-state `Cmd/Ctrl + K` hint with `KeyboardShortcut` - refining shared shortcut/button primitives so inline shortcuts align better when used as button accessories - keeping the SQL utility shortcut work on this branch consistent with the same shared component approach | Before | After | | --- | --- | | <img width="1454" height="902" alt="CleanShot 2026-03-27 at 15 55 32@2x" src="https://github.com/user-attachments/assets/3a8de192-3f4c-480b-9d26-9b28becd0ee3" /> | <img width="1488" height="906" alt="CleanShot 2026-03-27 at 15 29 31@2x-63A17C58-D023-4D3A-9355-6C40A6485328" src="https://github.com/user-attachments/assets/46ef7f7a-2b8b-4c10-8935-84ca5ad44562" /> | | <img width="738" height="328" alt="CleanShot 2026-03-27 at 15 57 07@2x" src="https://github.com/user-attachments/assets/ad459c41-867d-42f9-a8cb-c936af8326b7" /> | <img width="726" height="290" alt="CleanShot 2026-03-27 at 15 56 29@2x-ECE4E10F-9693-4ED8-B085-DC436A839F52" src="https://github.com/user-attachments/assets/95b4bfb4-ec34-4080-8b69-211b5045ca26" /> | ## Later todo - [ ] Replace the string-based SQL editor placeholder shortcut in `SQLEditor` once that placeholder API supports rich content - [ ] Refactor `CommandOption` to use `KeyboardShortcut` instead of bespoke platform detection and command-key markup - [ ] Standardise the remaining DataTable shortcut hints (`DataTableToolbar`, `DataTableResetButton`, `DataTableFilterCommand`, `DataTableFilterControlsDrawer`) around `KeyboardShortcut` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced a new KeyboardShortcut component for displaying keyboard shortcuts with two visual variants (pill and inline). * Standardized keyboard shortcut indicators across the application interface for consistent user experience. * **Bug Fixes** * Fixed capitalization inconsistencies in button labels and hotkey settings. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
524 lines
12 KiB
TypeScript
524 lines
12 KiB
TypeScript
import { MainNavItem, SidebarNavItem } from '@/types/nav'
|
|
|
|
interface DocsConfig {
|
|
mainNav?: MainNavItem[]
|
|
sidebarNav: SidebarNavItem[]
|
|
}
|
|
|
|
export const docsConfig: DocsConfig = {
|
|
sidebarNav: [
|
|
{
|
|
title: 'Getting Started',
|
|
sortOrder: 'alphabetical',
|
|
items: [
|
|
{
|
|
title: 'Introduction',
|
|
href: '/docs',
|
|
priority: true,
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Accessibility',
|
|
href: '/docs/accessibility',
|
|
items: [],
|
|
},
|
|
|
|
{
|
|
title: 'Color Usage',
|
|
href: '/docs/color-usage',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Copywriting',
|
|
href: '/docs/copywriting',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Icons',
|
|
href: '/docs/icons',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Tailwind Classes',
|
|
href: '/docs/tailwind-classes',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Theming',
|
|
href: '/docs/theming',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Typography',
|
|
href: '/docs/typography',
|
|
items: [],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'UI Patterns',
|
|
sortOrder: 'alphabetical',
|
|
items: [
|
|
{
|
|
title: 'Introduction',
|
|
href: '/docs/ui-patterns/introduction',
|
|
items: [],
|
|
priority: true,
|
|
},
|
|
{
|
|
title: 'Charts',
|
|
href: '/docs/ui-patterns/charts',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Empty States',
|
|
href: '/docs/ui-patterns/empty-states',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Forms',
|
|
href: '/docs/ui-patterns/forms',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Layout',
|
|
href: '/docs/ui-patterns/layout',
|
|
items: [],
|
|
},
|
|
{
|
|
href: '/docs/ui-patterns/modality',
|
|
title: 'Modality',
|
|
items: [],
|
|
},
|
|
{
|
|
href: '/docs/ui-patterns/navigation',
|
|
title: 'Navigation',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Tables',
|
|
href: '/docs/ui-patterns/tables',
|
|
items: [],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Fragment Components',
|
|
sortOrder: 'alphabetical',
|
|
items: [
|
|
{
|
|
title: 'Introduction',
|
|
href: '/docs/fragments/introduction',
|
|
items: [],
|
|
priority: true,
|
|
},
|
|
{
|
|
title: 'Admonition',
|
|
href: '/docs/fragments/admonition',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Assistant Chat',
|
|
href: '/docs/fragments/assistant-chat',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Empty State Presentational',
|
|
href: '/docs/fragments/empty-state-presentational',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Modal',
|
|
href: '/docs/fragments/modal',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Page Container',
|
|
href: '/docs/fragments/page-container',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Page Header',
|
|
href: '/docs/fragments/page-header',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Page Section',
|
|
href: '/docs/fragments/page-section',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Text Confirm Dialog',
|
|
href: '/docs/fragments/text-confirm-dialog',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Info Tooltip',
|
|
href: '/docs/fragments/info-tooltip',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Inner Side Menu',
|
|
href: '/docs/fragments/inner-side-menu',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Data Input',
|
|
href: '/docs/fragments/data-input',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Error Display',
|
|
href: '/docs/fragments/error-display',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Form Item Layout',
|
|
href: '/docs/fragments/form-item-layout',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Multi Select',
|
|
href: '/docs/fragments/multi-select',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Filter Bar',
|
|
href: '/docs/fragments/filter-bar',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Logs Bar Chart',
|
|
href: '/docs/fragments/logs-bar-chart',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Metric Card',
|
|
href: '/docs/fragments/metric-card',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Table of Contents (TOC)',
|
|
href: '/docs/fragments/toc',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Confirmation Modal',
|
|
href: '/docs/fragments/confirmation-modal',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Status Codes',
|
|
href: '/docs/fragments/status-codes',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Key/Value Field Array',
|
|
href: '/docs/fragments/key-value-field-array',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Single Value Field Array',
|
|
href: '/docs/fragments/single-value-field-array',
|
|
items: [],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Atom Components',
|
|
sortOrder: 'alphabetical',
|
|
items: [
|
|
{
|
|
title: 'Introduction',
|
|
href: '/docs/components/introduction',
|
|
items: [],
|
|
priority: true,
|
|
},
|
|
{
|
|
title: 'Accordion',
|
|
href: '/docs/components/accordion',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Alert',
|
|
href: '/docs/components/alert',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Alert Dialog',
|
|
href: '/docs/components/alert-dialog',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Aspect Ratio',
|
|
href: '/docs/components/aspect-ratio',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Avatar',
|
|
href: '/docs/components/avatar',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Badge',
|
|
href: '/docs/components/badge',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Breadcrumb',
|
|
href: '/docs/components/breadcrumb',
|
|
items: [],
|
|
label: 'New',
|
|
},
|
|
{
|
|
title: 'Button',
|
|
href: '/docs/components/button',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Calendar',
|
|
href: '/docs/components/calendar',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Card',
|
|
href: '/docs/components/card',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Carousel',
|
|
href: '/docs/components/carousel',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Checkbox',
|
|
href: '/docs/components/checkbox',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Collapsible',
|
|
href: '/docs/components/collapsible',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Combobox',
|
|
href: '/docs/components/combobox',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Command',
|
|
href: '/docs/components/command',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Command Menu (cmdk)',
|
|
href: '/docs/components/commandmenu',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Context Menu',
|
|
href: '/docs/components/context-menu',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Date Picker',
|
|
href: '/docs/components/date-picker',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Dialog',
|
|
href: '/docs/components/dialog',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Drawer',
|
|
href: '/docs/components/drawer',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Dropdown Menu',
|
|
href: '/docs/components/dropdown-menu',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Field',
|
|
href: '/docs/components/field',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Form',
|
|
href: '/docs/components/form',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Hover Card',
|
|
href: '/docs/components/hover-card',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Input',
|
|
href: '/docs/components/input',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Input OTP',
|
|
href: '/docs/components/input-otp',
|
|
items: [],
|
|
label: 'New',
|
|
},
|
|
{
|
|
title: 'Label',
|
|
href: '/docs/components/label',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Mermaid',
|
|
href: '/docs/components/mermaid',
|
|
items: [],
|
|
label: 'New',
|
|
},
|
|
{
|
|
title: 'Menubar',
|
|
href: '/docs/components/menubar',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Nav Menu',
|
|
href: '/docs/components/nav-menu',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Navigation Menu',
|
|
href: '/docs/components/navigation-menu',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Pagination',
|
|
href: '/docs/components/pagination',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Popover',
|
|
href: '/docs/components/popover',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Progress',
|
|
href: '/docs/components/progress',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Radio Group',
|
|
href: '/docs/components/radio-group',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Radio Group Stacked',
|
|
href: '/docs/components/radio-group-stacked',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Radio Group Card',
|
|
href: '/docs/components/radio-group-card',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Resizable',
|
|
href: '/docs/components/resizable',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Scroll Area',
|
|
href: '/docs/components/scroll-area',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Select',
|
|
href: '/docs/components/select',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Separator',
|
|
href: '/docs/components/separator',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Sheet',
|
|
href: '/docs/components/sheet',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Skeleton',
|
|
href: '/docs/components/skeleton',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Slider',
|
|
href: '/docs/components/slider',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Sidebar',
|
|
href: '/docs/components/sidebar',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Sonner',
|
|
href: '/docs/components/sonner',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Switch',
|
|
href: '/docs/components/switch',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Table',
|
|
href: '/docs/components/table',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Tabs',
|
|
href: '/docs/components/tabs',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Textarea',
|
|
href: '/docs/components/textarea',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Toggle',
|
|
href: '/docs/components/toggle',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Toggle Group',
|
|
href: '/docs/components/toggle-group',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Tooltip',
|
|
href: '/docs/components/tooltip',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Tree View',
|
|
href: '/docs/components/tree-view',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Expanding Textarea',
|
|
href: '/docs/components/expanding-textarea',
|
|
items: [],
|
|
},
|
|
{
|
|
title: 'Keyboard Shortcut',
|
|
href: '/docs/components/keyboard-shortcut',
|
|
items: [],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|