apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-07-15 21:11:08 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

style(x): sidebar alignment and quick-action hierarchy

Browse source 
- Top-align icons with titles on two-line nav rows; consistent ink
  color for Apps/Background agents/Workspaces (sublabels stay muted)
- Quick actions: labeled New chat button, secondary actions as
  compact ghost icons
This commit is contained in:
Gagan 2026-07-09 23:52:38 +05:30
parent 5dd8c85ce4
commit 834b8b0390
1 changed files with 25 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

43
apps/x/apps/renderer/src/components/sidebar-content.tsx
View file

@ -737,9 +737,16 @@ export function SidebarContentPanel({
{/* Top spacer to clear the traffic lights + fixed toggle row */} {/* Top spacer to clear the traffic lights + fixed toggle row */}
<div className="h-8" /> <div className="h-8" />
{/* Quick actions */} {/* Quick actions */}
<div className="titlebar-no-drag flex items-center gap-1.5 px-3 pb-2"> <div className="titlebar-no-drag flex items-center gap-1 pl-3 pr-6 pb-2">
{onNewChat && ( {onNewChat && (
<ActionButton icon={SquarePen} label="New chat" onClick={onNewChat} /> <button
type="button"
onClick={onNewChat}
className="flex h-8 min-w-0 flex-1 items-center justify-center gap-1.5 rounded-md border border-sidebar-border text-[13px] font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
>
<SquarePen className="size-3.5" />
New chat
</button>
)} )}
<ActionButton icon={FilePlus} label="New note" onClick={() => knowledgeActions.createNote()} /> <ActionButton icon={FilePlus} label="New note" onClick={() => knowledgeActions.createNote()} />
<VoiceNoteButton onNoteCreated={onVoiceNoteCreated} variant="action" /> <VoiceNoteButton onNoteCreated={onVoiceNoteCreated} variant="action" />
@ -764,9 +771,9 @@ export function SidebarContentPanel({
data-tour-id="nav-email" data-tour-id="nav-email"
isActive={activeNav === 'email'} isActive={activeNav === 'email'}
onClick={() => onOpenEmail?.()} onClick={() => onOpenEmail?.()}
className={previewEmail ? 'h-auto py-1.5' : undefined} className={previewEmail ? 'h-auto items-start py-1.5' : undefined}
> >
<Mail className="size-4 shrink-0" /> <Mail className={cn('size-4 shrink-0', previewEmail && 'mt-0.5')} />
<div className="flex min-w-0 flex-1 flex-col"> <div className="flex min-w-0 flex-1 flex-col">
<span className="truncate">Email</span> <span className="truncate">Email</span>
{previewEmail && ( {previewEmail && (
@ -787,9 +794,9 @@ export function SidebarContentPanel({
data-tour-id="nav-meetings" data-tour-id="nav-meetings"
isActive={activeNav === 'meetings'} isActive={activeNav === 'meetings'}
onClick={onOpenMeetings} onClick={onOpenMeetings}
className={meetingSublabel ? 'h-auto py-1.5' : undefined} className={meetingSublabel ? 'h-auto items-start py-1.5' : undefined}
> >
<Mic className={cn('size-4 shrink-0', meetingIsRecording && 'text-red-500')} /> <Mic className={cn('size-4 shrink-0', meetingSublabel && 'mt-1', meetingIsRecording && 'text-red-500')} />
<div className="flex min-w-0 flex-1 flex-col"> <div className="flex min-w-0 flex-1 flex-col">
<span className="truncate">Meetings</span> <span className="truncate">Meetings</span>
{meetingSublabel && ( {meetingSublabel && (
@ -874,9 +881,9 @@ export function SidebarContentPanel({
data-tour-id="nav-knowledge" data-tour-id="nav-knowledge"
isActive={activeNav === 'knowledge'} isActive={activeNav === 'knowledge'}
onClick={() => knowledgeActions.openKnowledgeView()} onClick={() => knowledgeActions.openKnowledgeView()}
className={knowledgeUpdatedLabel ? 'h-auto py-1.5' : undefined} className={knowledgeUpdatedLabel ? 'h-auto items-start py-1.5' : undefined}
> >
<FileText className="size-4 shrink-0" /> <FileText className={cn('size-4 shrink-0', knowledgeUpdatedLabel && 'mt-0.5')} />
<div className="flex min-w-0 flex-1 flex-col"> <div className="flex min-w-0 flex-1 flex-col">
<span className="truncate">Brain</span> <span className="truncate">Brain</span>
{knowledgeUpdatedLabel && ( {knowledgeUpdatedLabel && (
@ -896,8 +903,8 @@ export function SidebarContentPanel({
isActive={activeNav === 'apps'} isActive={activeNav === 'apps'}
onClick={onOpenApps} onClick={onOpenApps}
> >
<LayoutGrid className="size-4 shrink-0 text-muted-foreground" /> <LayoutGrid className="size-4 shrink-0" />
<span className="flex-1 truncate text-muted-foreground">Apps</span> <span className="flex-1 truncate">Apps</span>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
<SidebarMenuItem> <SidebarMenuItem>
@ -905,11 +912,11 @@ export function SidebarContentPanel({
data-tour-id="nav-agents" data-tour-id="nav-agents"
isActive={activeNav === 'agents'} isActive={activeNav === 'agents'}
onClick={onOpenBgTasks} onClick={onOpenBgTasks}
className={bgAgentsLabel ? 'h-auto py-1.5' : undefined} className={bgAgentsLabel ? 'h-auto items-start py-1.5' : undefined}
> >
<Bot className="size-4 shrink-0 text-muted-foreground" /> <Bot className={cn('size-4 shrink-0', bgAgentsLabel && 'mt-0.5')} />
<div className="flex min-w-0 flex-1 flex-col"> <div className="flex min-w-0 flex-1 flex-col">
<span className="truncate text-muted-foreground">Background agents</span> <span className="truncate">Background agents</span>
{bgAgentsLabel && ( {bgAgentsLabel && (
<span className={cn( <span className={cn(
'truncate text-[11px]', 'truncate text-[11px]',
@ -926,11 +933,11 @@ export function SidebarContentPanel({
data-tour-id="nav-workspaces" data-tour-id="nav-workspaces"
isActive={activeNav === 'workspaces'} isActive={activeNav === 'workspaces'}
onClick={() => knowledgeActions.openWorkspaceAt()} onClick={() => knowledgeActions.openWorkspaceAt()}
className="h-auto py-1.5" className="h-auto items-start py-1.5"
> >
<Folder className="size-4 shrink-0 text-muted-foreground" /> <Folder className="mt-0.5 size-4 shrink-0" />
<div className="flex min-w-0 flex-1 flex-col"> <div className="flex min-w-0 flex-1 flex-col">
<span className="truncate text-muted-foreground">Workspaces</span> <span className="truncate">Workspaces</span>
<span className="truncate text-[11px] text-muted-foreground"> <span className="truncate text-[11px] text-muted-foreground">
{workspaceCount === 0 ? 'No workspaces' : `${workspaceCount} workspace${workspaceCount === 1 ? '' : 's'}`} {workspaceCount === 0 ? 'No workspaces' : `${workspaceCount} workspace${workspaceCount === 1 ? '' : 's'}`}
</span> </span>
@ -1398,7 +1405,7 @@ path: ${currentRelativePath}
if (!hasDeepgramKey) return null if (!hasDeepgramKey) return null
const actionClass = "flex h-9 flex-1 items-center justify-center rounded-md border border-sidebar-border text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors" const actionClass = "flex size-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors"
const iconClass = "text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent rounded p-1.5 transition-colors" const iconClass = "text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent rounded p-1.5 transition-colors"
return ( return (
@ -1432,7 +1439,7 @@ function ActionButton({ icon: Icon, label, onClick }: { icon: typeof Mic; label:
type="button" type="button"
onClick={onClick} onClick={onClick}
aria-label={label} aria-label={label}
className="flex h-9 flex-1 items-center justify-center rounded-md border border-sidebar-border text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors" className="flex size-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors"
> >
<Icon className="size-4" /> <Icon className="size-4" />
</button> </button>