Skip to content

Commit dddc28c

Browse files
Gerome-ElassaadGerome-Elassaad
committed
updated header buttons and workbench client files
1 parent 4902513 commit dddc28c

22 files changed

Lines changed: 1023 additions & 664 deletions

‎app/components/chat/Artifact.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -218,11 +218,11 @@ const ActionList = memo(({ actions }: ActionListProps) => {
218218
{type !== 'start' ? (
219219
<div className="i-svg-spinners:90-ring-with-bg"></div>
220220
) : (
221-
<div className="i-ph:terminal-window-duotone"></div>
221+
<div className="i-ph:terminal-window-duotone text-codinit-elements-textPrimary"></div>
222222
)}
223223
</>
224224
) : status === 'pending' ? (
225-
<div className="i-ph:circle-duotone"></div>
225+
<div className="i-ph:circle-duotone text-codinit-elements-textPrimary"></div>
226226
) : status === 'complete' ? (
227227
<div className="i-ph:check"></div>
228228
) : status === 'failed' || status === 'aborted' ? (

‎app/components/chat/ChatAlert.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ ${content}
258258
'flex items-center gap-1.5',
259259
)}
260260
>
261-
<div className="i-ph:chat-circle-duotone"></div>
261+
<div className="i-ph:chat-circle-duotone text-codinit-elements-textPrimary"></div>
262262
Fix
263263
</button>
264264
<button

‎app/components/deploy/DeployAlert.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ export default function DeployChatAlert({ alert, clearAlert, postMessage }: Depl
173173
'flex items-center gap-1.5',
174174
)}
175175
>
176-
<div className="i-ph:chat-circle-duotone"></div>
176+
<div className="i-ph:chat-circle-duotone text-codinit-elements-textPrimary"></div>
177177
Fix
178178
</button>
179179
)}

‎app/components/header/Header.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import { useStore } from '@nanostores/react';
22
import { ClientOnly } from 'remix-utils/client-only';
33
import { chatStore } from '~/lib/stores/chat';
44
import { classNames } from '~/utils/classNames';
5-
import { HeaderActionButtons } from './HeaderActionButtons.client';
65
import { ChatDescription } from '~/lib/persistence/ChatDescription.client';
76

87
export function Header() {
98
const chat = useStore(chatStore);
109

10+
// Show action buttons when chat has started
11+
const showActionButtons = chat.started;
12+
1113
return (
1214
<header
1315
className={classNames('flex items-center p-3 h-12', {
@@ -27,13 +29,7 @@ export function Header() {
2729
<span className="flex-1 px-4 truncate text-center text-codinit-elements-textPrimary">
2830
<ClientOnly>{() => <ChatDescription />}</ClientOnly>
2931
</span>
30-
<ClientOnly>
31-
{() => (
32-
<div className="mr-1">
33-
<HeaderActionButtons />
34-
</div>
35-
)}
36-
</ClientOnly>
32+
{showActionButtons && <ClientOnly>{() => <div className="mr-1"></div>}</ClientOnly>}
3733
</>
3834
)}
3935
</header>

‎app/components/header/HeaderActionButtons.client.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,11 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
9393
<div className="i-svg-spinners:90-ring-with-bg" />
9494
) : (
9595
<img
96-
className="w-5 h-5 bg-black p-1 rounded"
96+
className="w-5 h-5"
9797
height="20"
9898
width="20"
9999
crossOrigin="anonymous"
100-
src="https://cdn.simpleicons.org/vercel/white"
100+
src="https://cdn.simpleicons.org/vercel"
101101
alt="vercel"
102102
/>
103103
)}
@@ -139,7 +139,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
139139
}
140140
}}
141141
>
142-
<div className="i-codinit:chat text-sm" />
142+
<div className="i-lucide:message-circle text-sm" />
143143
</Button>
144144
<div className="w-[1px] bg-codinit-elements-borderColor" />
145145
<Button
@@ -152,7 +152,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
152152
workbenchStore.showWorkbench.set(!showWorkbench);
153153
}}
154154
>
155-
<div className="i-ph:code-bold" />
155+
<div className="i-lucide:code" />
156156
</Button>
157157
</div>
158158
</div>

‎app/components/ui/ImportErrorModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,7 @@ Please analyze these errors and suggest how to resolve the import issues.
330330
onClick={handleAskAI}
331331
className="bg-codinit-elements-button-primary-background text-codinit-elements-button-primary-text hover:bg-codinit-elements-button-primary-backgroundHover flex items-center gap-1.5"
332332
>
333-
<div className="i-ph:chat-circle-duotone"></div>
333+
<div className="i-ph:chat-circle-duotone text-codinit-elements-textPrimary"></div>
334334
Ask AI to Fix
335335
</Button>
336336
)}

‎app/components/workbench/CodeModeHeader.tsx‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import { memo } from 'react';
2+
import { workbenchStore, type WorkbenchViewType } from '~/lib/stores/workbench';
3+
import { IconButton } from '~/components/ui/IconButton';
4+
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
5+
6+
interface CodeModeHeaderProps {
7+
onTerminalToggle: () => void;
8+
onDownloadZip: () => void;
9+
onSyncFiles: () => void;
10+
onPushToGitHub: () => void;
11+
isSyncing: boolean;
12+
setIsPushDialogOpen: (open: boolean) => void;
13+
showTerminal: boolean;
14+
}
15+
16+
export const CodeModeHeader = memo(
17+
({
18+
onTerminalToggle,
19+
onDownloadZip,
20+
onSyncFiles,
21+
onPushToGitHub,
22+
isSyncing,
23+
setIsPushDialogOpen,
24+
showTerminal,
25+
}: CodeModeHeaderProps) => {
26+
const setSelectedView = (view: WorkbenchViewType) => {
27+
workbenchStore.currentView.set(view);
28+
};
29+
30+
return (
31+
<div className="flex relative items-center gap-2 py-2 min-h-[var(--panel-header-height)] pl-0 bg-codinit-elements-background-depth-2">
32+
{/* Toggle Buttons Section */}
33+
<div className="flex items-center gap-2">
34+
<div className="flex items-center gap-1">
35+
<button
36+
aria-label="Preview"
37+
aria-pressed="false"
38+
className="flex items-center justify-center w-8 h-8 rounded-md text-codinit-elements-icon-secondary hover:text-codinit-elements-item-contentActive hover:bg-codinit-elements-item-backgroundActive transition-colors"
39+
onClick={() => setSelectedView('preview')}
40+
>
41+
<span className="i-lucide:eye size-4"></span>
42+
</button>
43+
<button
44+
aria-label="Code"
45+
aria-pressed="true"
46+
className="flex items-center justify-center w-8 h-8 rounded-md text-codinit-elements-item-contentAccent bg-codinit-elements-item-backgroundAccent hover:bg-codinit-elements-item-backgroundActive transition-colors"
47+
onClick={() => setSelectedView('code')}
48+
>
49+
<span className="i-lucide:code size-4"></span>
50+
</button>
51+
<button
52+
aria-label="Database - Connected"
53+
aria-pressed="false"
54+
className="flex items-center justify-center w-8 h-8 rounded-md text-codinit-elements-icon-secondary hover:text-codinit-elements-item-contentActive hover:bg-codinit-elements-item-backgroundActive transition-colors"
55+
>
56+
<span className="i-lucide:database size-4"></span>
57+
</button>
58+
<button
59+
aria-label="Terminal"
60+
aria-pressed={showTerminal}
61+
className={`flex items-center justify-center w-8 h-8 rounded-md transition-colors ${
62+
showTerminal
63+
? 'text-codinit-elements-item-contentAccent bg-codinit-elements-item-backgroundAccent hover:bg-codinit-elements-item-backgroundActive'
64+
: 'text-codinit-elements-icon-secondary hover:text-codinit-elements-item-contentActive hover:bg-codinit-elements-item-backgroundActive'
65+
}`}
66+
onClick={onTerminalToggle}
67+
>
68+
<span className="i-lucide:terminal size-4"></span>
69+
</button>
70+
</div>
71+
<div className="flex items-center">
72+
<DropdownMenu.Root>
73+
<DropdownMenu.Trigger asChild>
74+
<button
75+
type="button"
76+
aria-haspopup="menu"
77+
aria-expanded="false"
78+
className="bg-transparent p-0"
79+
aria-label="More Options"
80+
>
81+
<div className="flex items-center bg-transparent text-sm px-2 py-1 rounded-full relative text-codinit-elements-item-contentDefault hover:text-codinit-elements-item-contentActive pl-1 pr-1.5 h-5 opacity-90 hover:opacity-100">
82+
<span className="i-lucide:settings text-current w-4 h-4"></span>
83+
</div>
84+
</button>
85+
</DropdownMenu.Trigger>
86+
<DropdownMenu.Content
87+
className="min-w-[240px] z-[250] bg-codinit-elements-background-depth-2 dark:bg-[#141414] rounded-lg shadow-xl border border-codinit-elements-borderColor animate-in fade-in-0 zoom"
88+
sideOffset={5}
89+
align="start"
90+
>
91+
<DropdownMenu.Item
92+
className="cursor-pointer flex items-center w-full px-4 py-2 text-sm text-codinit-elements-textPrimary hover:bg-codinit-elements-item-backgroundActive gap-2 rounded-md group relative"
93+
onClick={onDownloadZip}
94+
>
95+
<div className="flex items-center gap-2">
96+
<span className="i-lucide:download text-current"></span>
97+
<span>Download Code</span>
98+
</div>
99+
</DropdownMenu.Item>
100+
<DropdownMenu.Item
101+
className="cursor-pointer flex items-center w-full px-4 py-2 text-sm text-codinit-elements-textPrimary hover:bg-codinit-elements-item-backgroundActive gap-2 rounded-md group relative"
102+
onClick={onSyncFiles}
103+
disabled={isSyncing}
104+
>
105+
<div className="flex items-center gap-2">
106+
{isSyncing ? (
107+
<span className="i-lucide:loader-2 text-current animate-spin" />
108+
) : (
109+
<span className="i-lucide:cloud-download text-current" />
110+
)}
111+
<span>{isSyncing ? 'Syncing...' : 'Sync Files'}</span>
112+
</div>
113+
</DropdownMenu.Item>
114+
<DropdownMenu.Item
115+
className="cursor-pointer flex items-center w-full px-4 py-2 text-sm text-codinit-elements-textPrimary hover:bg-codinit-elements-item-backgroundActive gap-2 rounded-md group relative"
116+
onClick={onPushToGitHub}
117+
>
118+
<div className="flex items-center gap-2">
119+
<span className="i-lucide:git-branch text-current" />
120+
<span>Push to GitHub</span>
121+
</div>
122+
</DropdownMenu.Item>
123+
</DropdownMenu.Content>
124+
</DropdownMenu.Root>
125+
</div>
126+
</div>
127+
128+
{/* Right Action Buttons */}
129+
<div className="ml-auto">
130+
<div className="flex gap-3">
131+
<div className="flex gap-1 empty:hidden"></div>
132+
<div className="flex gap-1">
133+
<IconButton
134+
icon="i-codinit:stars"
135+
className="text-codinit-elements-item-contentDefault bg-transparent rounded-md disabled:cursor-not-allowed enabled:hover:text-codinit-elements-item-contentActive enabled:hover:bg-codinit-elements-item-backgroundActive p-1 relative w-8 h-8"
136+
/>
137+
</div>
138+
<button
139+
className="items-center justify-center font-medium min-w-0 max-w-full rounded-md focus-visible:outline-2 disabled:opacity-50 relative disabled:cursor-not-allowed focus-visible:outline-codinit-ds-brandHighlight bg-codinit-elements-textPrimary text-codinit-elements-background-depth-1 flex gap-1.7 shrink-0 h-8 text-sm px-3"
140+
type="button"
141+
aria-controls="publish-menu"
142+
onClick={() => setIsPushDialogOpen(true)}
143+
>
144+
Publish
145+
</button>
146+
</div>
147+
</div>
148+
</div>
149+
);
150+
},
151+
);

0 commit comments

Comments
 (0)