Skip to content

Commit 9a692fe

Browse files
thetronjohnson123vivekr
thetronjohnson
authored and
123vivekr
committed
fix corners and added titlebar drag
1 parent 7ced717 commit 9a692fe

6 files changed

Lines changed: 123 additions & 41 deletions

File tree

‎src-tauri/capabilities/default.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"core:window:allow-maximize",
5555
"core:window:allow-unmaximize",
5656
"core:window:allow-close",
57-
"core:window:allow-is-maximized"
57+
"core:window:allow-is-maximized",
58+
"core:window:allow-start-dragging"
5859
]
5960
}

‎src-tauri/tauri.conf.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@
1818
"height": 600,
1919
"decorations": false,
2020
"transparent": true,
21-
"shadow": true
21+
"shadow": true,
22+
"center": true,
23+
"resizable": true,
24+
"alwaysOnTop": false
2225
}
2326
],
2427
"security": {

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,7 @@ function AppContent() {
379379
};
380380

381381
return (
382-
<div className="h-screen bg-background flex flex-col rounded-xl overflow-hidden" style={{ borderRadius: '12px' }}>
382+
<div className="h-screen flex flex-col">
383383
{/* Custom Titlebar */}
384384
<CustomTitlebar
385385
onAgentsClick={() => createAgentsTab()}

‎src/components/CustomTitlebar.tsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,11 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
7575
return (
7676
<TooltipProvider>
7777
<div
78-
className="h-11 bg-background flex items-center justify-between select-none border-b border-border/50"
79-
style={{ borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }}
78+
className="relative z-[200] h-11 bg-background/95 backdrop-blur-sm flex items-center justify-between select-none border-b border-border/50"
79+
style={{
80+
WebkitAppRegion: 'drag',
81+
userSelect: 'none'
82+
}}
8083
data-tauri-drag-region
8184
onMouseEnter={() => setIsHovered(true)}
8285
onMouseLeave={() => setIsHovered(false)}
@@ -90,7 +93,8 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
9093
e.stopPropagation();
9194
handleClose();
9295
}}
93-
className="group relative w-3 h-3 rounded-full bg-red-500 hover:bg-red-600 transition-all duration-200 flex items-center justify-center z-10"
96+
className="group relative w-3 h-3 rounded-full bg-red-500 hover:bg-red-600 transition-all duration-200 flex items-center justify-center"
97+
style={{ WebkitAppRegion: 'no-drag' }}
9498
title="Close"
9599
>
96100
{isHovered && (
@@ -104,7 +108,8 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
104108
e.stopPropagation();
105109
handleMinimize();
106110
}}
107-
className="group relative w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-all duration-200 flex items-center justify-center z-10"
111+
className="group relative w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-all duration-200 flex items-center justify-center"
112+
style={{ WebkitAppRegion: 'no-drag' }}
108113
title="Minimize"
109114
>
110115
{isHovered && (
@@ -118,7 +123,8 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
118123
e.stopPropagation();
119124
handleMaximize();
120125
}}
121-
className="group relative w-3 h-3 rounded-full bg-green-500 hover:bg-green-600 transition-all duration-200 flex items-center justify-center z-10"
126+
className="group relative w-3 h-3 rounded-full bg-green-500 hover:bg-green-600 transition-all duration-200 flex items-center justify-center"
127+
style={{ WebkitAppRegion: 'no-drag' }}
122128
title="Maximize"
123129
>
124130
{isHovered && (
@@ -137,7 +143,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
137143
</div> */}
138144

139145
{/* Right side - Navigation icons with improved spacing */}
140-
<div className="flex items-center pr-5 gap-3">
146+
<div className="flex items-center pr-5 gap-3" style={{ WebkitAppRegion: 'no-drag' }}>
141147
{/* Primary actions group */}
142148
<div className="flex items-center gap-1">
143149
{onAgentsClick && (
@@ -147,6 +153,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
147153
whileTap={{ scale: 0.97 }}
148154
transition={{ duration: 0.15 }}
149155
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
156+
style={{ WebkitAppRegion: 'no-drag' }}
150157
>
151158
<Bot size={16} />
152159
</motion.button>
@@ -160,6 +167,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
160167
whileTap={{ scale: 0.97 }}
161168
transition={{ duration: 0.15 }}
162169
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
170+
style={{ WebkitAppRegion: 'no-drag' }}
163171
>
164172
<BarChart3 size={16} />
165173
</motion.button>
@@ -179,6 +187,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
179187
whileTap={{ scale: 0.97 }}
180188
transition={{ duration: 0.15 }}
181189
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
190+
style={{ WebkitAppRegion: 'no-drag' }}
182191
>
183192
<Settings size={16} />
184193
</motion.button>
@@ -199,7 +208,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
199208
</TooltipSimple>
200209

201210
{isDropdownOpen && (
202-
<div className="absolute right-0 mt-2 w-48 bg-popover border border-border rounded-lg shadow-lg z-50">
211+
<div className="absolute right-0 mt-2 w-48 bg-popover border border-border rounded-lg shadow-lg z-[250]">
203212
<div className="py-1">
204213
{onClaudeClick && (
205214
<button

‎src/components/TabContent.tsx‎

Lines changed: 67 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -248,51 +248,79 @@ const TabPanel: React.FC<TabPanelProps> = ({ tab, isActive }) => {
248248

249249
case 'chat':
250250
return (
251-
<ClaudeCodeSession
252-
session={tab.sessionData} // Pass the full session object if available
253-
initialProjectPath={tab.initialProjectPath || tab.sessionId}
254-
onBack={() => {
255-
// Go back to projects view in the same tab
256-
updateTab(tab.id, {
257-
type: 'projects',
258-
title: 'Projects',
259-
});
260-
}}
261-
onProjectPathChange={(path: string) => {
262-
// Update tab title with directory name
263-
const dirName = path.split('/').pop() || path.split('\\').pop() || 'Session';
264-
updateTab(tab.id, {
265-
title: dirName
266-
});
267-
}}
268-
/>
251+
<div className="h-full">
252+
<ClaudeCodeSession
253+
session={tab.sessionData} // Pass the full session object if available
254+
initialProjectPath={tab.initialProjectPath || tab.sessionId}
255+
onBack={() => {
256+
// Go back to projects view in the same tab
257+
updateTab(tab.id, {
258+
type: 'projects',
259+
title: 'Projects',
260+
});
261+
}}
262+
onProjectPathChange={(path: string) => {
263+
// Update tab title with directory name
264+
const dirName = path.split('/').pop() || path.split('\\').pop() || 'Session';
265+
updateTab(tab.id, {
266+
title: dirName
267+
});
268+
}}
269+
/>
270+
</div>
269271
);
270272

271273
case 'agent':
272274
if (!tab.agentRunId) {
273-
return <div className="p-4">No agent run ID specified</div>;
275+
return (
276+
<div className="h-full">
277+
<div className="p-4">No agent run ID specified</div>
278+
</div>
279+
);
274280
}
275281
return (
276-
<AgentRunOutputViewer
277-
agentRunId={tab.agentRunId}
278-
tabId={tab.id}
279-
/>
282+
<div className="h-full">
283+
<AgentRunOutputViewer
284+
agentRunId={tab.agentRunId}
285+
tabId={tab.id}
286+
/>
287+
</div>
280288
);
281289

282290
case 'agents':
283-
return <Agents />;
291+
return (
292+
<div className="h-full">
293+
<Agents />
294+
</div>
295+
);
284296

285297
case 'usage':
286-
return <UsageDashboard onBack={() => {}} />;
298+
return (
299+
<div className="h-full">
300+
<UsageDashboard onBack={() => {}} />
301+
</div>
302+
);
287303

288304
case 'mcp':
289-
return <MCPManager onBack={() => {}} />;
305+
return (
306+
<div className="h-full">
307+
<MCPManager onBack={() => {}} />
308+
</div>
309+
);
290310

291311
case 'settings':
292-
return <Settings onBack={() => {}} />;
312+
return (
313+
<div className="h-full">
314+
<Settings onBack={() => {}} />
315+
</div>
316+
);
293317

294318
case 'claude-md':
295-
return <MarkdownEditor onBack={() => {}} />;
319+
return (
320+
<div className="h-full">
321+
<MarkdownEditor onBack={() => {}} />
322+
</div>
323+
);
296324

297325
case 'claude-file':
298326
if (!tab.claudeFileId) {
@@ -331,10 +359,18 @@ const TabPanel: React.FC<TabPanelProps> = ({ tab, isActive }) => {
331359

332360
case 'import-agent':
333361
// TODO: Implement import agent component
334-
return <div className="p-4">Import agent functionality coming soon...</div>;
362+
return (
363+
<div className="h-full">
364+
<div className="p-4">Import agent functionality coming soon...</div>
365+
</div>
366+
);
335367

336368
default:
337-
return <div className="p-4">Unknown tab type: {tab.type}</div>;
369+
return (
370+
<div className="h-full">
371+
<div className="p-4">Unknown tab type: {tab.type}</div>
372+
</div>
373+
);
338374
}
339375
};
340376

@@ -467,7 +503,7 @@ export const TabContent: React.FC = () => {
467503
}, [createChatTab, findTabBySessionId, createClaudeFileTab, createAgentExecutionTab, createCreateAgentTab, createImportAgentTab, closeTab, updateTab]);
468504

469505
return (
470-
<div className="flex-1 h-full relative" style={{ borderBottomLeftRadius: '12px', borderBottomRightRadius: '12px', overflow: 'hidden' }}>
506+
<div className="flex-1 h-full relative">
471507
<AnimatePresence mode="wait">
472508
{tabs.map((tab) => (
473509
<TabPanel

‎src/styles.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,38 @@
11
@import "tailwindcss";
22

3+
/* Tauri Transparent Window with Rounded Corners - Official Approach */
4+
html, body {
5+
height: 100%;
6+
width: 100%;
7+
margin: 0;
8+
padding: 0;
9+
/* Transparent background for window transparency */
10+
background-color: rgba(0, 0, 0, 0);
11+
}
12+
13+
/* Apply rounded corners and background to body */
14+
body {
15+
border-radius: var(--radius-lg);
16+
overflow: hidden;
17+
background-color: var(--color-background);
18+
}
19+
20+
#root {
21+
height: 100%;
22+
width: 100%;
23+
/* Ensure root also clips fixed-position descendants */
24+
border-radius: inherit;
25+
overflow: hidden;
26+
}
27+
28+
/* Ensure the viewport itself clips fixed-position elements */
29+
html {
30+
border-radius: var(--radius-lg);
31+
overflow: hidden;
32+
/* Robust clipping for fixed descendants and backdrop filters */
33+
clip-path: inset(0 round var(--radius-lg));
34+
}
35+
336
/* Inter Font - Local */
437
@font-face {
538
font-family: 'Inter';

0 commit comments

Comments
 (0)