Skip to content

Commit 1fb86d5

Browse files
KiteniteKitenite
authored
refactor: bottom toolbar (#1907)
* remove terminal from bottom bar * bottom bar reacting to modes again
1 parent 0df12fc commit 1fb86d5

File tree

3 files changed

+87
-116
lines changed

3 files changed

+87
-116
lines changed

‎apps/web/client/src/app/project/[id]/_components/bottom-bar/index.tsx

Lines changed: 26 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
'use client';
2+
13
import { Hotkey } from '@/components/hotkey';
24
import { useEditorEngine } from '@/components/store/editor';
3-
import type { DropElementProperties } from '@onlook/models';
45
import { EditorMode } from '@onlook/models';
56
import { HotkeyLabel } from '@onlook/ui/hotkey-label';
67
import { Icons } from '@onlook/ui/icons';
@@ -9,9 +10,6 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@onlook/ui/tooltip';
910
import { observer } from 'mobx-react-lite';
1011
import { AnimatePresence, motion } from 'motion/react';
1112
import { useTranslations } from 'next-intl';
12-
import { useState } from 'react';
13-
14-
// import Terminal from './Terminal';
1513

1614
const TOOLBAR_ITEMS = ({ t }: { t: (key: string) => string }) => [
1715
{
@@ -55,43 +53,6 @@ const TOOLBAR_ITEMS = ({ t }: { t: (key: string) => string }) => [
5553
export const BottomBar = observer(() => {
5654
const t = useTranslations();
5755
const editorEngine = useEditorEngine();
58-
const [mode, setMode] = useState<EditorMode>(editorEngine.state.editorMode);
59-
const [terminalHidden, setTerminalHidden] = useState(true);
60-
61-
const createDragPreview = (properties: DropElementProperties): HTMLElement => {
62-
const preview = document.createElement('div');
63-
Object.assign(preview.style, {
64-
width: '100px',
65-
height: '100px',
66-
display: 'flex',
67-
alignItems: 'center',
68-
justifyContent: 'center',
69-
...properties.styles,
70-
});
71-
72-
if (properties.textContent) {
73-
preview.textContent = properties.textContent;
74-
}
75-
76-
return preview;
77-
};
78-
79-
const handleDragStart = (e: React.DragEvent<HTMLDivElement>, mode: EditorMode) => {
80-
// const properties = editorEngine.insert.getDefaultProperties(mode);
81-
// e.dataTransfer.setData('text/plain', mode);
82-
// e.dataTransfer.setData('application/json', JSON.stringify(properties));
83-
// e.dataTransfer.effectAllowed = 'copy';
84-
// editorEngine.state.editorMode = mode;
85-
// // Disable pointer-events on webviews during drag
86-
// for (const frameView of editorEngine.frames.webviews.values()) {
87-
// frameView.frameView.style.pointerEvents = 'none';
88-
// }
89-
// const dragPreview = createDragPreview(properties);
90-
// document.body.appendChild(dragPreview);
91-
// e.dataTransfer.setDragImage(dragPreview, 50, 50);
92-
// setTimeout(() => document.body.removeChild(dragPreview), 0);
93-
};
94-
9556
const toolbarItems = TOOLBAR_ITEMS({ t });
9657

9758
return (
@@ -110,84 +71,33 @@ export const BottomBar = observer(() => {
11071
damping: 25,
11172
}}
11273
>
113-
{terminalHidden ? (
114-
<motion.div layout className="flex items-center gap-1">
115-
<ToggleGroup
116-
type="single"
117-
value={mode}
118-
onValueChange={(value) => {
119-
if (value) {
120-
editorEngine.state.editorMode = value as EditorMode;
121-
setMode(value as EditorMode);
122-
}
123-
}}
124-
>
125-
{toolbarItems.map((item) => (
126-
<Tooltip key={item.mode}>
127-
<TooltipTrigger asChild>
128-
<div
129-
draggable={item.draggable}
130-
onDragStart={(e) => handleDragStart(e, item.mode)}
131-
>
132-
<ToggleGroupItem
133-
value={item.mode}
134-
aria-label={item.hotkey.description}
135-
disabled={item.disabled}
136-
className="hover:text-foreground-hover text-foreground-tertiary"
137-
>
138-
<item.icon />
139-
</ToggleGroupItem>
140-
</div>
141-
</TooltipTrigger>
142-
<TooltipContent>
143-
<HotkeyLabel hotkey={item.hotkey} />
144-
</TooltipContent>
145-
</Tooltip>
146-
))}
147-
</ToggleGroup>
148-
<Tooltip>
149-
<TooltipTrigger asChild>
150-
<button
151-
onClick={() => setTerminalHidden(!terminalHidden)}
152-
className="h-9 w-9 flex items-center justify-center hover:text-foreground-hover text-foreground-tertiary hover:bg-accent rounded-md"
74+
<ToggleGroup
75+
type="single"
76+
value={editorEngine.state.editorMode}
77+
onValueChange={(value) => {
78+
if (value) {
79+
editorEngine.state.editorMode = value as EditorMode;
80+
}
81+
}}
82+
>
83+
{toolbarItems.map((item) => (
84+
<Tooltip key={item.mode}>
85+
<TooltipTrigger >
86+
<ToggleGroupItem
87+
value={item.mode}
88+
aria-label={item.hotkey.description}
89+
disabled={item.disabled}
90+
className="hover:text-foreground-hover text-foreground-tertiary"
15391
>
154-
<Icons.Terminal />
155-
</button>
92+
<item.icon />
93+
</ToggleGroupItem>
15694
</TooltipTrigger>
157-
<TooltipContent>Toggle Terminal</TooltipContent>
95+
<TooltipContent>
96+
<HotkeyLabel hotkey={item.hotkey} />
97+
</TooltipContent>
15898
</Tooltip>
159-
</motion.div>
160-
) : (
161-
<motion.div
162-
layout
163-
className="flex items-center justify-between w-full mb-1"
164-
>
165-
<motion.span
166-
initial={{ opacity: 0, x: 10 }}
167-
animate={{ opacity: 1, x: 0 }}
168-
exit={{ opacity: 0, x: -10 }}
169-
transition={{ duration: 0.7 }}
170-
className="text-small text-foreground-secondary ml-2 select-none"
171-
>
172-
Terminal
173-
</motion.span>
174-
<div className="flex items-center gap-1">
175-
<motion.div layout>{/* <RunButton /> */}</motion.div>
176-
<Tooltip>
177-
<TooltipTrigger asChild>
178-
<button
179-
onClick={() => setTerminalHidden(!terminalHidden)}
180-
className="h-9 w-9 flex items-center justify-center hover:text-foreground-hover text-foreground-tertiary hover:bg-accent rounded-lg"
181-
>
182-
<Icons.ChevronDown />
183-
</button>
184-
</TooltipTrigger>
185-
<TooltipContent>Toggle Terminal</TooltipContent>
186-
</Tooltip>
187-
</div>
188-
</motion.div>
189-
)}
190-
{/* <Terminal hidden={terminalHidden} /> */}
99+
))}
100+
</ToggleGroup>
191101
</motion.div>
192102
)}
193103
</AnimatePresence>

‎apps/web/client/src/app/project/[id]/_components/bottom-bar/terminal-area.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Icons } from '@onlook/ui/icons';
2+
import { Tooltip, TooltipContent, TooltipTrigger } from '@onlook/ui/tooltip';
3+
import { motion } from 'motion/react';
4+
import { useState } from 'react';
5+
6+
export const TerminalArea = ({ children }: { children: React.ReactNode }) => {
7+
const [terminalHidden, setTerminalHidden] = useState(true);
8+
9+
return (
10+
<>
11+
{terminalHidden ? (
12+
<motion.div layout className="flex items-center gap-1">
13+
{children}
14+
<Tooltip>
15+
<TooltipTrigger asChild>
16+
<button
17+
onClick={() => setTerminalHidden(!terminalHidden)}
18+
className="h-9 w-9 flex items-center justify-center hover:text-foreground-hover text-foreground-tertiary hover:bg-accent rounded-md"
19+
>
20+
<Icons.Terminal />
21+
</button>
22+
</TooltipTrigger>
23+
<TooltipContent>Toggle Terminal</TooltipContent>
24+
</Tooltip>
25+
</motion.div>
26+
) : (
27+
<motion.div
28+
layout
29+
className="flex items-center justify-between w-full mb-1"
30+
>
31+
<motion.span
32+
initial={{ opacity: 0, x: 10 }}
33+
animate={{ opacity: 1, x: 0 }}
34+
exit={{ opacity: 0, x: -10 }}
35+
transition={{ duration: 0.7 }}
36+
className="text-small text-foreground-secondary ml-2 select-none"
37+
>
38+
Terminal
39+
</motion.span>
40+
<div className="flex items-center gap-1">
41+
<motion.div layout>{/* <RunButton /> */}</motion.div>
42+
<Tooltip>
43+
<TooltipTrigger asChild>
44+
<button
45+
onClick={() => setTerminalHidden(!terminalHidden)}
46+
className="h-9 w-9 flex items-center justify-center hover:text-foreground-hover text-foreground-tertiary hover:bg-accent rounded-lg"
47+
>
48+
<Icons.ChevronDown />
49+
</button>
50+
</TooltipTrigger>
51+
<TooltipContent>Toggle Terminal</TooltipContent>
52+
</Tooltip>
53+
</div>
54+
</motion.div>
55+
)}
56+
{/* <Terminal hidden={terminalHidden} /> */}
57+
</>
58+
);
59+
};

‎apps/web/client/src/components/store/editor/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { createContext, useContext } from 'react';
24
import { projectManager } from '../project';
35
import { userManager } from '../user';

0 commit comments

Comments
 (0)