davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: darken title bar headers for visual separation from content (#85)

Browse Source 
* feat: darken title bar headers for visual separation from content

Add --bg-titlebar (#EDECE9) CSS variable and apply it to all four
header bars (TabBar, SidebarTitleBar, NoteList header, Inspector
header) so the top drag region is subtly darker than the app content.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: add design file for titlebar-darker task

Single frame showing the three-tier color hierarchy:
title bar (#EDECE9) → sidebar (#F7F6F3) → content (#FFFFFF).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Luca Rossi
2026-02-26 02:33:19 +01:00
committed by GitHub
parent 9184fadde0
commit ee663df4fe
6 changed files with 169 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Inspector.tsx
View File

@@ -75,7 +75,7 @@ function useReferencedBy(entry: VaultEntry | null, entries: VaultEntry[]): Refer
function InspectorHeader({ collapsed, onToggle }: { collapsed: boolean; onToggle: () => void }) {
const { onMouseDown } = useDragRegion()
return (
<div className="flex items-center border-b border-border" style={{ height: 52, padding: '0 12px', gap: 8, cursor: 'default' }} onMouseDown={onMouseDown}>
<div className="flex items-center border-b border-border" style={{ height: 52, background: 'var(--bg-titlebar)', padding: '0 12px', gap: 8, cursor: 'default' }} onMouseDown={onMouseDown} data-tauri-drag-region>
{collapsed ? (
<button className="shrink-0 border-none bg-transparent p-1 text-muted-foreground cursor-pointer hover:text-foreground" onClick={onToggle}>
<SlidersHorizontal size={16} />

2
src/components/NoteList.tsx
View File

@@ -298,7 +298,7 @@ function NoteListInner({ entries, selection, selectedNote, allContent, modifiedF
return (
<div className="flex flex-col overflow-hidden border-r border-border bg-card text-foreground" style={{ height: '100%' }}>
<div className="flex h-[52px] shrink-0 items-center justify-between border-b border-border px-4" onMouseDown={onDragMouseDown} style={{ cursor: 'default' }}>
<div className="flex h-[52px] shrink-0 items-center justify-between border-b border-border px-4" onMouseDown={onDragMouseDown} data-tauri-drag-region style={{ background: 'var(--bg-titlebar)', cursor: 'default' }}>
<h3 className="m-0 min-w-0 flex-1 truncate text-[14px] font-semibold">{resolveHeaderTitle(selection, typeDocument)}</h3>
<div className="flex items-center gap-3" style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
{!isEntityView && <SortDropdown groupLabel="__list__" current={listSort} direction={listDirection} onChange={handleSortChange} />}

2
src/components/Sidebar.tsx
View File

@@ -175,7 +175,7 @@ function CommitButton({ modifiedCount, onClick }: { modifiedCount: number; onCli
function SidebarTitleBar({ onCollapse }: { onCollapse?: () => void }) {
const { onMouseDown } = useDragRegion()
return (
<div className="shrink-0 flex items-center justify-end border-b border-border" style={{ height: 52, padding: '0 8px', paddingLeft: 80, cursor: 'default' } as React.CSSProperties} onMouseDown={onMouseDown}>
<div className="shrink-0 flex items-center justify-end border-b border-border" style={{ height: 52, background: 'var(--bg-titlebar)', padding: '0 8px', paddingLeft: 80, cursor: 'default' } as React.CSSProperties} onMouseDown={onMouseDown} data-tauri-drag-region>
{onCollapse && (
<button
className="flex shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"

3
src/components/TabBar.tsx
View File

@@ -333,7 +333,8 @@ export const TabBar = memo(function TabBar({
return (
<div
className="flex shrink-0 items-stretch"
style={{ height: 52, background: 'var(--sidebar)' } as React.CSSProperties}
style={{ height: 52, background: 'var(--bg-titlebar)' } as React.CSSProperties}
data-tauri-drag-region
onDragLeave={handleBarDragLeave}
>
<NavButtons canGoBack={canGoBack} canGoForward={canGoForward} onGoBack={onGoBack} onGoForward={onGoForward} />