mirror of
https://github.com/supabase/supabase.git
synced 2026-10-13 13:19:09 +03:00
Saxon FletcherandJoshen Lim
d9742d707f
Moves Explorer’s back navigation and create actions into a reusable sidebar breadcrumb header. Reduces product-menu headings globally to `text-sm` and keeps breadcrumb links free of padding, borders, and backgrounds. ### How to test 1. Open `/project/<ref>/explorer` and confirm the header shows Explorer and the SQL Editor switch action. 2. Open Notebooks and Chats. Confirm the header shows `Explorer > Notebooks/Chats` and the corresponding create action works. 3. Return using the Explorer breadcrumb with a click or Tab + Enter. Check that the label stays aligned and has no hover background. 4. Open another product, such as Database, and confirm its sidebar heading uses the smaller font size. 5. At a mobile viewport, open the menu and repeat the notebook/chat actions and back navigation without closing the sheet. Confirm the header stays current and disappears when returning to the main menu or opening another product. Validation: 18 focused tests, typecheck, formatting, and lint ratchet passed. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a shared Explorer sidebar header with breadcrumbs and contextual actions for creating notebooks and chats. - Added keyboard-accessible navigation between the Explorer overview and notebook or chat sections. - Added support for customized product menu headers across project layouts. - **Improvements** - Centralized Explorer navigation and actions in the shared sidebar layout. - Improved mobile menu updates when navigating between Explorer resources. - Refined Explorer home layout and drag-handle behavior across screen sizes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import { motion } from 'framer-motion'
|
|
import { MessageSquare, NotebookText } from 'lucide-react'
|
|
import { type ComponentType, type PropsWithChildren } from 'react'
|
|
import { cn } from 'ui'
|
|
import { InnerSideBarFilters, InnerSideBarFilterSearchInput } from 'ui-patterns/InnerSideMenu'
|
|
|
|
export type ExplorerResourceType = 'notebook' | 'chat'
|
|
|
|
export const LEVEL_OFFSET = 8
|
|
export const LEVEL_TRANSITION = { duration: 0.09, ease: 'easeOut' } as const
|
|
|
|
export const EXPLORER_SECTIONS: Array<{
|
|
type: ExplorerResourceType
|
|
label: string
|
|
icon: ComponentType<{ size?: number; className?: string }>
|
|
searchPlaceholder: string
|
|
}> = [
|
|
{
|
|
type: 'notebook',
|
|
label: 'Notebooks',
|
|
icon: NotebookText,
|
|
searchPlaceholder: 'Search notebooks',
|
|
},
|
|
{ type: 'chat', label: 'Chats', icon: MessageSquare, searchPlaceholder: 'Search chats' },
|
|
]
|
|
|
|
export const rowClassName = (isActive: boolean) =>
|
|
cn(
|
|
'group relative flex h-7 w-full items-center gap-2 rounded-md pl-3 pr-2 text-sm',
|
|
isActive
|
|
? 'bg-selection text-foreground'
|
|
: 'text-foreground-light hover:bg-surface-200 hover:text-foreground'
|
|
)
|
|
|
|
export const ExplorerNavResourceWrapper = ({
|
|
type,
|
|
label,
|
|
className,
|
|
children,
|
|
search,
|
|
setSearch,
|
|
}: PropsWithChildren<{
|
|
type: ExplorerResourceType
|
|
label?: string
|
|
className?: string
|
|
search?: string
|
|
setSearch: (value: string) => void
|
|
}>) => {
|
|
const searchPlaceholder = EXPLORER_SECTIONS.find((x) => x.type === type)?.searchPlaceholder
|
|
|
|
return (
|
|
<motion.div
|
|
role="group"
|
|
aria-label={label}
|
|
initial={{ opacity: 0, x: LEVEL_OFFSET }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: LEVEL_OFFSET }}
|
|
transition={LEVEL_TRANSITION}
|
|
className={cn('absolute inset-0 flex flex-col', className)}
|
|
>
|
|
<div className="p-3 pb-2">
|
|
<span id="explorer-sidebar-search-label" className="sr-only">
|
|
{searchPlaceholder}
|
|
</span>
|
|
<InnerSideBarFilters className="w-full gap-0 p-0">
|
|
<InnerSideBarFilterSearchInput
|
|
name="explorer-sidebar-search"
|
|
value={search}
|
|
placeholder={searchPlaceholder}
|
|
aria-labelledby="explorer-sidebar-search-label"
|
|
onChange={(event) => setSearch(event.target.value)}
|
|
/>
|
|
</InnerSideBarFilters>
|
|
</div>
|
|
{children}
|
|
</motion.div>
|
|
)
|
|
}
|