Skip to content

New Vertical Tab Bar Option #3059

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sawka merged 25 commits into from
Mar 14, 2026
Merged

New Vertical Tab Bar Option #3059

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
6cf17da
add app:tabbar into settings
sawka Mar 13, 2026
187c9c6
left tabs working, but needs UI cleanup
sawka Mar 13, 2026
5e3ff22
styling updates
sawka Mar 13, 2026
64bf73f
hover working
sawka Mar 13, 2026
1dac092
update ui
sawka Mar 13, 2026
f6dc5cf
Merge remote-tracking branch 'origin/main' into sawka/vtabbar-3
sawka Mar 13, 2026
df17a38
remove width prop, fix ellipsis padding
sawka Mar 13, 2026
ef0dd32
minor
sawka Mar 13, 2026
7a55a3b
build wsh in parallel
sawka Mar 13, 2026
4f269be
checkpoint, resizeable panel for vtabbar
sawka Mar 13, 2026
8b80a20
fix aipanel border and top-left conditional rounding
sawka Mar 13, 2026
0350a48
more cleanup for left tabs
sawka Mar 13, 2026
91b2144
fixed workspace layout
sawka Mar 13, 2026
147f445
hook up contextmenu to vertical tabs
sawka Mar 13, 2026
1fd0ca9
no shrink, reindent
sawka Mar 13, 2026
99011b1
scroll into view
sawka Mar 13, 2026
c3fd5ea
scroll on drag
sawka Mar 13, 2026
2b81a88
fix document focus scroll
sawka Mar 13, 2026
f61531d
fix vtabbar width across the workspace. fix add tab button
sawka Mar 13, 2026
9b28cf7
change tab position from context menu
sawka Mar 13, 2026
ca8979b
update reservation for traffic lights width on macos tahoe
sawka Mar 13, 2026
f895fd9
add doc for vertical tab bar
sawka Mar 13, 2026
9ef05fa
macos fixes for vtabbar / tabbar
sawka Mar 14, 2026
58c4b3d
move more initialization into the try/catch
sawka Mar 14, 2026
aa38645
fix nits
sawka Mar 14, 2026
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
Prev Previous commit
Next Next commit
fix aipanel border and top-left conditional rounding
  • Loading branch information
@sawka
sawka committed Mar 13, 2026
commit 8b80a20e60d3bdf943e09f471f6c7d94282540e8
15 changes: 12 additions & 3 deletions frontend/app/aipanel/aipanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,11 @@ const ConfigChangeModeFixer = memo(() => {

ConfigChangeModeFixer.displayName = "ConfigChangeModeFixer";

const AIPanelComponentInner = memo(() => {
type AIPanelComponentInnerProps = {
roundTopLeft: boolean;
};

const AIPanelComponentInner = memo(({ roundTopLeft }: AIPanelComponentInnerProps) => {
const [isDragOver, setIsDragOver] = useState(false);
const [isReactDndDragOver, setIsReactDndDragOver] = useState(false);
const [initialLoadDone, setInitialLoadDone] = useState(false);
Expand Down Expand Up @@ -554,6 +558,7 @@ const AIPanelComponentInner = memo(() => {
isFocused ? "border-2 border-accent" : "border-2 border-transparent"
)}
style={{
borderTopLeftRadius: roundTopLeft ? 10 : 0,
borderTopRightRadius: model.inBuilder ? 0 : 10,
borderBottomRightRadius: model.inBuilder ? 0 : 10,
borderBottomLeftRadius: 10,
Expand Down Expand Up @@ -607,10 +612,14 @@ const AIPanelComponentInner = memo(() => {

AIPanelComponentInner.displayName = "AIPanelInner";

const AIPanelComponent = () => {
type AIPanelComponentProps = {
roundTopLeft: boolean;
};

const AIPanelComponent = ({ roundTopLeft }: AIPanelComponentProps) => {
return (
<ErrorBoundary>
<AIPanelComponentInner />
<AIPanelComponentInner roundTopLeft={roundTopLeft} />
</ErrorBoundary>
);
};
Expand Down
4 changes: 2 additions & 2 deletions frontend/app/workspace/workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,8 @@ const WorkspaceElem = memo(() => {
order={1}
className="overflow-hidden"
>
<div ref={aiPanelWrapperRef} className="w-full h-full">
{tabId !== "" && <AIPanel />}
<div ref={aiPanelWrapperRef} className="w-full h-full pr-0.5">
{tabId !== "" && <AIPanel roundTopLeft={showLeftTabBar} />}
</div>
</Panel>
<PanelResizeHandle className="w-0.5 bg-transparent hover:bg-zinc-500/20 transition-colors" />
Expand Down
2 changes: 1 addition & 1 deletion frontend/builder/builder-workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const BuilderWorkspace = memo(() => {
<div className="flex-1 overflow-hidden">
<PanelGroup direction="horizontal" onLayout={handleHorizontalLayout}>
<Panel defaultSize={layout.chat} minSize={20}>
<AIPanel />
<AIPanel roundTopLeft={false} />
</Panel>
<PanelResizeHandle className="w-0.5 bg-transparent hover:bg-gray-500/20 transition-colors" />
<Panel defaultSize={100 - layout.chat} minSize={20}>
Expand Down