fix: unbroken divider between sidebar and feed

The title bar was one band across the top of the window, so the
sidebar's right border only began below it and the pane read as
detached from the top of the window.

Each pane now reserves its own strip for the traffic lights instead.
The border runs from the very top, and because both insets are the same
height the sidebar header and the top bar share a baseline, so their
bottom borders form one continuous line across the window. Both strips
stay draggable, and the inset collapses in window fullscreen where
there are no traffic lights to clear.
This commit is contained in:
vincent
2026-08-29 12:39:53 +02:00
parent 9e9f71b31b
commit e556534459
3 changed files with 21 additions and 13 deletions
+7 -1
View File
@@ -11,11 +11,13 @@ interface Props {
onHide: () => void;
/** True when revealed by hover over the left edge rather than pinned open. */
floating?: boolean;
/** Reserve room for the macOS traffic lights above the header. */
titleBarInset: boolean;
}
export default function Sidebar({
channels, activeChannel, onSelect, onOpenSettings, totalVideos, totalDownloaded,
onHide, floating,
onHide, floating, titleBarInset,
}: Props) {
const row =
"flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg px-2 py-1.5 " +
@@ -35,6 +37,10 @@ export default function Sidebar({
"lg:border-b-0 lg:border-r")
}
>
{/* The pane starts at the very top of the window so its right border is
one unbroken line; this reserves the strip the traffic lights sit in. */}
{titleBarInset && <div data-tauri-drag-region className="h-9 shrink-0" />}
<header
className="sticky top-0 z-20 flex items-center justify-between gap-2 border-b
border-slate-200 bg-white/95 px-4 py-3 backdrop-blur
+5 -1
View File
@@ -21,6 +21,8 @@ interface Props {
onView: (v: ViewMode) => void;
sidebarHidden: boolean;
onShowSidebar: () => void;
/** Matches the sidebar's inset so the two headers share a baseline. */
titleBarInset: boolean;
}
/** Neutral outline until active; active is the one filled state. */
@@ -56,7 +58,7 @@ export default function TopBar({
search, onSearch, downloadedOnly, onDownloadedOnly, hideShorts, onHideShorts,
online, reachable, forcedOffline, onToggleForcedOffline,
onRefresh, refreshing, refreshProgress, resultCount, view, onView,
sidebarHidden, onShowSidebar,
sidebarHidden, onShowSidebar, titleBarInset,
}: Props) {
const pct = refreshProgress && refreshProgress.total > 0
? (refreshProgress.done / refreshProgress.total) * 100
@@ -67,6 +69,8 @@ export default function TopBar({
className="sticky top-0 z-20 border-b border-slate-200 bg-white/95 backdrop-blur
dark:border-slate-800 dark:bg-slate-900/95"
>
{titleBarInset && <div data-tauri-drag-region className="h-9" />}
<div className="flex flex-wrap items-center gap-2 px-4 py-3">
{sidebarHidden && (
<button