Skip to content
This repository was archived by the owner on Aug 6, 2026. It is now read-only.

feat: add horizontal scrolling to tab bar #53

Merged
k11kirky merged 2 commits into from
Oct 21, 2025
Merged

feat: add horizontal scrolling to tab bar #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9a819d5
feat: add horizontal scrolling to tab bar with gradient indicator
jonathanlab Oct 21, 2025
d863775
feat: auto-scroll active tab into view
jonathanlab Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
246 changes: 161 additions & 85 deletions src/renderer/components/TabBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
Text,
} from "@radix-ui/themes";
import type React from "react";
import { useCallback, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { useHotkeys } from "react-hotkeys-hook";
import { useTabStore } from "../stores/tabStore";

Expand All @@ -27,6 +27,8 @@ export function TabBar() {
const [dropPosition, setDropPosition] = useState<"left" | "right" | null>(
null,
);
const [showScrollGradient, setShowScrollGradient] = useState(false);
const scrollContainerRef = useRef<HTMLDivElement>(null);

// Keyboard navigation handlers
const handlePrevTab = useCallback(() => {
Expand Down Expand Up @@ -166,101 +168,175 @@ export function TabBar() {
setDropPosition(null);
}, []);

const checkScrollGradient = useCallback(() => {
const container = scrollContainerRef.current;
if (!container) return;

const canScrollRight =
container.scrollWidth > container.clientWidth &&
container.scrollLeft + container.clientWidth < container.scrollWidth - 1;

setShowScrollGradient(canScrollRight);
}, []);

useEffect(() => {
checkScrollGradient();

const container = scrollContainerRef.current;
if (!container) return;

container.addEventListener("scroll", checkScrollGradient);
window.addEventListener("resize", checkScrollGradient);

return () => {
container.removeEventListener("scroll", checkScrollGradient);
window.removeEventListener("resize", checkScrollGradient);
};
}, [checkScrollGradient]);

useEffect(() => {
checkScrollGradient();
}, [checkScrollGradient]);

useEffect(() => {
const container = scrollContainerRef.current;
if (!container) return;

const activeTabElement = container.querySelector(
`[data-tab-id="${activeTabId}"]`,
);
if (activeTabElement) {
activeTabElement.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "nearest",
});
}
}, [activeTabId]);

return (
<Flex
className="drag border-gray-6 border-b"
height="40px"
minHeight="40px"
position="relative"
>
{/* Spacer for macOS window controls */}
<Box width="80px" flexShrink="0" />

{tabs.map((tab, index) => {
const isDragging = draggedTab === tab.id;
const isDragOver = dragOverTab === tab.id;
const showLeftIndicator = isDragOver && dropPosition === "left";
const showRightIndicator = isDragOver && dropPosition === "right";

return (
<ContextMenu.Root key={tab.id}>
<ContextMenu.Trigger>
<Flex
className={`no-drag group relative cursor-pointer border-gray-6 border-r border-b-2 transition-colors ${
tab.id === activeTabId
? "border-b-accent-8 bg-accent-3 text-accent-12"
: "border-b-transparent text-gray-11 hover:bg-gray-3 hover:text-gray-12"
} ${isDragging ? "opacity-50" : ""}`}
align="center"
px="4"
draggable
onClick={() => setActiveTab(tab.id)}
onDragStart={(e) => handleDragStart(e, tab.id)}
onDragOver={(e) => handleDragOver(e, tab.id)}
onDragLeave={handleDragLeave}
onDrop={(e) => handleDrop(e, tab.id)}
onDragEnd={handleDragEnd}
>
{showLeftIndicator && (
<Box
className="absolute top-0 bottom-0 left-0 z-10 w-0.5 bg-accent-8"
style={{ marginLeft: "-1px" }}
/>
)}

{showRightIndicator && (
<Box
className="absolute top-0 right-0 bottom-0 z-10 w-0.5 bg-accent-8"
style={{ marginRight: "-1px" }}
/>
)}
{index < 9 && (
<Kbd size="1" className="mr-2 opacity-70">
{navigator.platform.includes("Mac") ? "⌘" : "Ctrl+"}
{index + 1}
</Kbd>
)}

<Text
size="2"
className="max-w-[200px] select-none overflow-hidden text-ellipsis whitespace-nowrap"
mr="2"
<Flex
ref={scrollContainerRef}
className="scrollbar-hide overflow-x-auto"
flexGrow="1"
style={{
scrollbarWidth: "none",
msOverflowStyle: "none",
}}
>
{tabs.map((tab, index) => {
const isDragging = draggedTab === tab.id;
const isDragOver = dragOverTab === tab.id;
const showLeftIndicator = isDragOver && dropPosition === "left";
const showRightIndicator = isDragOver && dropPosition === "right";

return (
<ContextMenu.Root key={tab.id}>
<ContextMenu.Trigger>
<Flex
data-tab-id={tab.id}
className={`no-drag group relative cursor-pointer border-gray-6 border-r border-b-2 transition-colors ${
tab.id === activeTabId
? "border-b-accent-8 bg-accent-3 text-accent-12"
: "border-b-transparent text-gray-11 hover:bg-gray-3 hover:text-gray-12"
} ${isDragging ? "opacity-50" : ""}`}
align="center"
px="4"
draggable
onClick={() => setActiveTab(tab.id)}
onDragStart={(e) => handleDragStart(e, tab.id)}
onDragOver={(e) => handleDragOver(e, tab.id)}
onDragLeave={handleDragLeave}
onDrop={(e) => handleDrop(e, tab.id)}
onDragEnd={handleDragEnd}
>
{tab.title}
</Text>

{tabs.length > 1 && (
<IconButton
size="1"
variant="ghost"
color={tab.id !== activeTabId ? "gray" : undefined}
className="opacity-0 transition-opacity group-hover:opacity-100"
onClick={(e) => {
e.stopPropagation();
closeTab(tab.id);
}}
{showLeftIndicator && (
<Box
className="absolute top-0 bottom-0 left-0 z-10 w-0.5 bg-accent-8"
style={{ marginLeft: "-1px" }}
/>
)}

{showRightIndicator && (
<Box
className="absolute top-0 right-0 bottom-0 z-10 w-0.5 bg-accent-8"
style={{ marginRight: "-1px" }}
/>
)}
{index < 9 && (
<Kbd size="1" className="mr-2 opacity-70">
{navigator.platform.includes("Mac") ? "⌘" : "Ctrl+"}
{index + 1}
</Kbd>
)}

<Text
size="2"
className="max-w-[200px] select-none overflow-hidden text-ellipsis whitespace-nowrap"
mr="2"
>
<Cross2Icon />
</IconButton>
)}
</Flex>
</ContextMenu.Trigger>
<ContextMenu.Content>
<ContextMenu.Item
disabled={tabs.length === 1}
onSelect={() => closeOtherTabs(tab.id)}
>
Close other tabs
</ContextMenu.Item>
<ContextMenu.Item
disabled={index === tabs.length - 1}
onSelect={() => closeTabsToRight(tab.id)}
>
Close tabs to the right
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Root>
);
})}
{tab.title}
</Text>

{tabs.length > 1 && (
<IconButton
size="1"
variant="ghost"
color={tab.id !== activeTabId ? "gray" : undefined}
className="opacity-0 transition-opacity group-hover:opacity-100"
onClick={(e) => {
e.stopPropagation();
closeTab(tab.id);
}}
>
<Cross2Icon />
</IconButton>
)}
</Flex>
</ContextMenu.Trigger>
<ContextMenu.Content>
<ContextMenu.Item
disabled={tabs.length === 1}
onSelect={() => closeOtherTabs(tab.id)}
>
Close other tabs
</ContextMenu.Item>
<ContextMenu.Item
disabled={index === tabs.length - 1}
onSelect={() => closeTabsToRight(tab.id)}
>
Close tabs to the right
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Root>
);
})}
</Flex>

{showScrollGradient && (
<Box
position="absolute"
top="0"
right="0"
height="40px"
width="80px"
className="pointer-events-none"
style={{
background:
"linear-gradient(to left, var(--color-background) 0%, transparent 100%)",
zIndex: 10,
}}
/>
)}
</Flex>
);
}
4 changes: 4 additions & 0 deletions src/renderer/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ body {
-webkit-app-region: no-drag;
}

.scrollbar-hide::-webkit-scrollbar {
display: none;
}

/* File mention list styles */
.file-mention-item {
padding: var(--space-2);
Expand Down