Feat/simplified top bar controls (#892)

* Revert windows settings change

* Add Onlook icon with option to color it

* Add setTheme function to the webview api

* Add frame outlines for interact and design modes

* Add colored Onlook icon for Onlook status

* Make webview top-bar controls minimal

* made the entire top bar interactive for renaming url + draggin, ui improvements

* topbar url refined ui, improved button hover states, micro-interactions

* Fix framer motion not working

* Remove webview focus state

apps/studio/electron/preload/webview/api.ts

@@ -14,7 +14,8 @@ import { drag, endDrag, startDrag } from './elements/move/drag';
 import { getComputedStyleByDomId } from './elements/style';
 import { editText, startEditingText, stopEditingText } from './elements/text';
 import { setWebviewId } from './state';
-import { getTheme, toggleTheme } from './theme';
+import { getTheme, toggleTheme, setTheme } from './theme';
+import type { set } from 'lodash';
 
 export function setApi() {
     contextBridge.exposeInMainWorld('api', {
@@ -39,6 +40,7 @@ export function setApi() {
         // Theme
         getTheme,
         toggleTheme,
+        setTheme,
 
         // Drag
         startDrag,

apps/studio/electron/preload/webview/theme/index.ts

@@ -17,3 +17,15 @@ export function toggleTheme() {
         return true;
     }
 }
+
+export function setTheme(theme: string) {
+    window?.localStorage.setItem('theme', theme);
+
+    if (theme === 'dark') {
+        document.documentElement.classList.add('dark');
+        return true;
+    } else {
+        document.documentElement.classList.remove('dark');
+        return false;
+    }
+}

apps/studio/package.json

@@ -60,6 +60,7 @@
         "embla-carousel-wheel-gestures": "^8.0.1",
         "fflate": "^0.8.2",
         "fix-path": "^4.0.0",
+        "framer-motion": "^11.14.4",
         "js-string-escape": "^1.0.1",
         "langfuse-vercel": "^3.29.1",
         "lodash": "^4.17.21",

apps/studio/src/lib/editor/engine/webview/index.ts

@@ -71,21 +71,24 @@ export class WebviewManager {
         const data = this.webviewIdToData.get(webview.id) || { webview, ...DEFAULT_DATA };
         data.selected = true;
         this.webviewIdToData.set(webview.id, data);
+        this.notify();
     }
 
     deselect(webview: Electron.WebviewTag) {
         const data = this.webviewIdToData.get(webview.id) || { webview, ...DEFAULT_DATA };
         data.selected = false;
         this.webviewIdToData.set(webview.id, data);
+        this.notify();
     }
 
     deselectAll() {
         for (const [id, data] of this.webviewIdToData) {
             this.webviewIdToData.set(id, { ...data, selected: false });
         }
+        this.notify();
     }
 
-    notify() {
+    private notify() {
         this.webviewIdToData = new Map(this.webviewIdToData);
     }
 

apps/studio/src/routes/editor/Canvas/index.tsx

@@ -107,7 +107,6 @@ const Canvas = observer(
                 return;
             }
             editorEngine.webviews.deselectAll();
-            editorEngine.webviews.notify();
             editorEngine.clear();
         };
 

apps/studio/src/routes/editor/EditPanel/index.tsx

@@ -9,13 +9,11 @@ import { useEffect, useState } from 'react';
 import ChatTab from './ChatTab';
 import ChatControls from './ChatTab/ChatControls';
 import ManualTab from './StylesTab';
-import WindowSettings from './WindowSettings';
 
 const EditPanel = observer(() => {
     const editorEngine = useEditorEngine();
     const [isOpen, setIsOpen] = useState(true);
     const [selectedTab, setSelectedTab] = useState<EditorTabValue>(editorEngine.editPanelTab);
-    const [windowSettingsOpen, setWindowSettingsOpen] = useState(false);
 
     useEffect(() => {
         tabChange(editorEngine.editPanelTab);
@@ -105,7 +103,7 @@ const EditPanel = observer(() => {
                     isOpen ? 'opacity-100 visible' : 'opacity-0 invisible',
                 )}
             >
-                {windowSettingsOpen ? <WindowSettings setIsOpen={setIsOpen} /> : renderTabs()}
+                {renderTabs()}
             </div>
         </div>
     );

apps/studio/src/routes/editor/WebviewArea/BrowserControl/EnabledButton.tsx

@@ -9,6 +9,7 @@ import { assertNever } from '/common/helpers';
 
 const EnabledButton = observer(({ webviewId }: { webviewId: string }) => {
     const editorEngine = useEditorEngine();
+    const selected = editorEngine.webviews.isSelected(webviewId);
     const state = editorEngine.webviews.getState(webviewId);
 
     if (state === WebviewState.NOT_RUNNING || state === WebviewState.RUNNING_NO_DOM) {
@@ -18,22 +19,35 @@ const EnabledButton = observer(({ webviewId }: { webviewId: string }) => {
     let buttonIcon;
     switch (state) {
         case WebviewState.DOM_ONLOOK_ENABLED:
-            buttonIcon = <Icons.CheckCircled />;
+            buttonIcon = (
+                <Icons.OnlookIcon
+                    className={cn('fill-inherit', selected && 'group-hover:fill-teal-200')}
+                />
+            );
             break;
         case WebviewState.DOM_NO_ONLOOK:
-            buttonIcon = <Icons.ExclamationTriangle />;
+            buttonIcon = (
+                <Icons.ExclamationTriangle
+                    className={cn('fill-inherit', selected && 'group-hover:text-amber-100')}
+                />
+            );
             break;
         default:
             assertNever(state);
     }
 
     const button = (
         <Button
-            variant="outline"
+            variant="ghost"
             className={cn(
-                'bg-background-secondary/60 px-3',
-                state === WebviewState.DOM_NO_ONLOOK && 'bg-red-500 hover:bg-red-700',
+                'group px-1 text-inherit',
+                state === WebviewState.DOM_NO_ONLOOK &&
+                    'text-amber-300 hover:text-amber-100 hover:bg-amber-400/10',
+                state === WebviewState.DOM_ONLOOK_ENABLED && selected
+                    ? 'hover:text-teal-100 hover:bg-teal-400/10'
+                    : '',
             )}
+            size={'icon'}
         >
             {buttonIcon}
         </Button>