mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Saxon Fletcher
66c6da82fe
Explorer query surfaces now use `bg-card` in light mode and `bg-muted` in dark mode, including embedded notebook/chat queries and query tab toolbars. Notebook Run buttons match query tabs, with `ml-1` spacing on both. Fix doubled tab separators by applying the leading border only to the first tab. ### How to test 1. Open Explorer with multiple query, notebook, and chat tabs. Switch, reorder, and close tabs; confirm each separator stays one pixel wide. 2. In light and dark mode, inspect query tabs and embedded notebook/chat queries: backgrounds should be card in light mode and muted in dark mode, including their toolbars. 3. Compare notebook and query Run buttons: matching default styling and spacing. Run a read-only query such as `select 1` in both and check loading and results. 4. Check SQL Editor and Table Editor tab separators, since the tab component is shared. Validation: Prettier passed for all four changed files. Manual checks above have not been run. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Style** - Refined notebook and query run button styling, including spacing and tooltip placement. - Improved query editor panel backgrounds across light and dark themes. - Updated tab border rendering for more consistent visual alignment. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import { ChevronDown, Play } from 'lucide-react'
|
|
import {
|
|
Button,
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
KeyboardShortcut,
|
|
} from 'ui'
|
|
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
|
|
interface QueryRunButtonProps {
|
|
isExecuting: boolean
|
|
disabled: boolean
|
|
hasSelection: boolean
|
|
onRun: () => void
|
|
onRunSelected: () => void
|
|
}
|
|
|
|
export const QueryRunButton = ({
|
|
isExecuting,
|
|
disabled,
|
|
hasSelection,
|
|
onRun,
|
|
onRunSelected,
|
|
}: QueryRunButtonProps) => {
|
|
return (
|
|
<div className="ml-1 flex w-fit">
|
|
<ButtonTooltip
|
|
type="button"
|
|
size="tiny"
|
|
loading={isExecuting}
|
|
disabled={disabled}
|
|
icon={<Play size={16} strokeWidth={2} />}
|
|
className="rounded-r-none hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm"
|
|
onClick={onRun}
|
|
tooltip={{
|
|
content: {
|
|
side: 'bottom',
|
|
text: (
|
|
<div className="flex items-center gap-2.5">
|
|
<span>Run query</span>
|
|
<KeyboardShortcut keys={['Meta', 'Enter']} />
|
|
</div>
|
|
),
|
|
},
|
|
}}
|
|
>
|
|
Run
|
|
</ButtonTooltip>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
size="tiny"
|
|
disabled={disabled}
|
|
aria-label="More actions"
|
|
className="shrink-0 rounded-l-none px-[4px] py-[5px] -ml-px focus-visible:z-10 focus-visible:rounded-l-sm"
|
|
icon={<ChevronDown />}
|
|
/>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48">
|
|
<DropdownMenuItem disabled={!hasSelection} onClick={onRunSelected}>
|
|
Run selected SQL
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
)
|
|
}
|