apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-05-06 05:42:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(App): update sidebar toggle functionality and adjust button configurations

Browse source
This commit is contained in:
tusharmagar 2026-04-09 13:28:26 +05:30
parent 9c010dabd8
commit 1b81a42ed3
1 changed files with 11 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

60
apps/x/apps/renderer/src/App.tsx
View file

@ -124,8 +124,8 @@ const TITLEBAR_BUTTON_PX = 32
const TITLEBAR_BUTTON_GAP_PX = 4
const TITLEBAR_HEADER_GAP_PX = 8
const TITLEBAR_TOGGLE_MARGIN_LEFT_PX = 12
const TITLEBAR_BUTTONS_COLLAPSED = 5
const TITLEBAR_BUTTON_GAPS_COLLAPSED = 4
const TITLEBAR_BUTTONS_COLLAPSED = 4
const TITLEBAR_BUTTON_GAPS_COLLAPSED = 3
const GRAPH_TAB_PATH = '__rowboat_graph_view__'
const BASES_DEFAULT_TAB_PATH = '__rowboat_bases_default__'
@ -446,12 +446,8 @@ function viewStatesEqual(a: ViewState, b: ViewState): boolean {
return true // both graph
}
/** Sidebar toggle + back/forward nav */
/** Sidebar toggle + utility buttons (fixed position, top-left) */
function FixedSidebarToggle({
onNavigateBack,
onNavigateForward,
canNavigateBack,
canNavigateForward,
onNewChat,
onOpenSearch,
meetingState,
@ -460,10 +456,6 @@ function FixedSidebarToggle({
onToggleMeeting,
leftInsetPx,
}: {
onNavigateBack: () => void
onNavigateForward: () => void
canNavigateBack: boolean
canNavigateForward: boolean
onNewChat: () => void
onOpenSearch: () => void
meetingState: MeetingTranscriptionState
@ -472,8 +464,7 @@ function FixedSidebarToggle({
onToggleMeeting: () => void
leftInsetPx: number
}) {
const { toggleSidebar, state } = useSidebar()
const isCollapsed = state === "collapsed"
const { toggleSidebar } = useSidebar()
return (
<div className="fixed left-0 top-0 z-50 flex h-10 items-center" style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
<div aria-hidden="true" className="h-10 shrink-0" style={{ width: leftInsetPx }} />
@ -536,30 +527,6 @@ function FixedSidebarToggle({
</TooltipContent>
</Tooltip>
)}
{/* Back / Forward navigation */}
{isCollapsed && (
<>
<button
type="button"
onClick={onNavigateBack}
disabled={!canNavigateBack}
className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors disabled:opacity-30 disabled:pointer-events-none"
style={{ marginLeft: TITLEBAR_BUTTON_GAP_PX }}
aria-label="Go back"
>
<ChevronLeftIcon className="size-5" />
</button>
<button
type="button"
onClick={onNavigateForward}
disabled={!canNavigateForward}
className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors disabled:opacity-30 disabled:pointer-events-none"
aria-label="Go forward"
>
<ChevronRightIcon className="size-5" />
</button>
</>
)}
</div>
)
}
@ -584,15 +551,14 @@ function ContentHeader({
const isCollapsed = state === "collapsed"
return (
<header
className={cn(
"titlebar-drag-region flex h-10 shrink-0 items-stretch border-b border-border px-3 bg-sidebar transition-[padding] duration-200 ease-linear overflow-hidden",
// When the sidebar is collapsed the content area shifts left, so we need enough left padding
// to avoid overlapping the fixed traffic-lights/toggle/back/forward controls.
isCollapsed && !collapsedLeftPaddingPx && "pl-[196px]"
)}
style={isCollapsed && collapsedLeftPaddingPx ? { paddingLeft: collapsedLeftPaddingPx } : undefined}
className="titlebar-drag-region flex h-10 shrink-0 items-stretch border-b border-border bg-sidebar overflow-hidden"
style={{
paddingLeft: isCollapsed ? (collapsedLeftPaddingPx ?? 196) : 12,
paddingRight: 12,
transition: 'padding-left 200ms linear',
}}
>
{!isCollapsed && onNavigateBack && onNavigateForward ? (
{onNavigateBack && onNavigateForward ? (
<div className="titlebar-no-drag flex items-center gap-1 pr-2 shrink-0">
<button
type="button"
@ -4553,10 +4519,6 @@ function App() {
)}
{/* Rendered last so its no-drag region paints over the sidebar drag region */}
<FixedSidebarToggle
onNavigateBack={() => { void navigateBack() }}
onNavigateForward={() => { void navigateForward() }}
canNavigateBack={canNavigateBack}
canNavigateForward={canNavigateForward}
onNewChat={handleNewChatTab}
onOpenSearch={() => setIsSearchOpen(true)}
meetingState={meetingTranscription.state}