fix: visual improvement to the frame (#2610)

spartan-vutrannguyen · web-flow · commit 584fc842b7e7 · 2025-08-05T12:02:34.000-07:00
diff --git a/apps/web/client/src/app/project/[id]/_components/canvas/frame/gesture.tsx b/apps/web/client/src/app/project/[id]/_components/canvas/frame/gesture.tsx
@@ -61,7 +61,7 @@ export const GestureScreen = observer(({ frame, isResizing }: { frame: WebFrame,
                         break;
                     case MouseAction.MOUSE_DOWN:
                         if (el.tagName.toLocaleLowerCase() === 'body') {
-                            editorEngine.frames.select([frame]);
+                            editorEngine.frames.select([frame], e.shiftKey);
                             return;
                         }
                         // Ignore right-clicks
@@ -120,7 +120,6 @@ export const GestureScreen = observer(({ frame, isResizing }: { frame: WebFrame,
 
     const handleClick = useCallback(
         (e: React.MouseEvent<HTMLDivElement>) => {
-            editorEngine.frames.deselectAll();
             editorEngine.frames.select([frame]);
         },
         [editorEngine.frames],
diff --git a/apps/web/client/src/app/project/[id]/_components/canvas/frame/top-bar.tsx b/apps/web/client/src/app/project/[id]/_components/canvas/frame/top-bar.tsx
@@ -72,8 +72,8 @@ export const TopBar = observer(
             await editorEngine.frames.goForward(frame.id);
         };
 
-        const handleClick = () => {
-            editorEngine.frames.select([frame]);
+        const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+            editorEngine.frames.select([frame], e.shiftKey);
         };
 
         return (
@@ -104,7 +104,7 @@ export const TopBar = observer(
                             variant="ghost"
                             size="icon"
                             className={cn(
-                                'cursor-pointer',
+                                'cursor-pointer rounded-lg',
                                 !editorEngine.frames.navigation.canGoBack(frame.id) && 'hidden',
                             )}
                             onClick={handleGoBack}
@@ -118,7 +118,7 @@ export const TopBar = observer(
                             variant="ghost"
                             size="icon"
                             className={cn(
-                                'cursor-pointer',
+                                'cursor-pointer rounded-lg',
                                 !editorEngine.frames.navigation.canGoForward(frame.id) && 'hidden',
                             )}
                             onClick={handleGoForward}
@@ -131,7 +131,7 @@ export const TopBar = observer(
                         <Button
                             variant="ghost"
                             size="icon"
-                            className="cursor-pointer"
+                            className="cursor-pointer rounded-lg"
                             onClick={handleReload}
                         >
                             <Icons.Reload />
@@ -151,7 +151,7 @@ export const TopBar = observer(
                             pointerEvents: shouldShowExternalLink ? 'auto' : 'none',
                         }}
                     >
-                        <Button variant="ghost" size="icon">
+                        <Button variant="ghost" size="icon" className="rounded-lg">
                             <Icons.ExternalLink />
                         </Button>
                     </Link>
diff --git a/apps/web/client/src/app/project/[id]/_components/canvas/frame/web-frame.tsx b/apps/web/client/src/app/project/[id]/_components/canvas/frame/web-frame.tsx
@@ -44,6 +44,7 @@ export const WebFrameComponent = observer(
         const maxRetries = 3;
         const baseDelay = 1000;
         const [penpalChild, setPenpalChild] = useState<PenpalChildMethods | null>(null);
+        const isSelected = editorEngine.frames.isSelected(frame.id);
 
         const undebouncedReloadIframe = () => {
             try {
@@ -278,7 +279,7 @@ export const WebFrameComponent = observer(
             <iframe
                 ref={iframeRef}
                 id={frame.id}
-                className={cn('backdrop-blur-sm transition outline outline-4')}
+                className={cn('backdrop-blur-sm transition outline outline-4', isSelected && 'outline-teal-400')}
                 src={frame.url}
                 sandbox="allow-modals allow-forms allow-same-origin allow-scripts allow-popups allow-downloads"
                 allow="geolocation; microphone; camera; midi; encrypted-media"
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/index.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/index.tsx
@@ -98,7 +98,7 @@ export const EditorBar = observer(({ availableWidth }: { availableWidth?: number
                 exit={{ opacity: 0, y: 20 }}
                 className={cn(
                     'flex flex-col border-[0.5px] border-border p-1 px-1.5 bg-background rounded-xl backdrop-blur drop-shadow-xl z-50 overflow-hidden',
-                    editorEngine.state.editorMode === EditorMode.PREVIEW && 'hidden',
+                    editorEngine.state.editorMode === EditorMode.PREVIEW && !windowSelected && 'hidden',
                 )}
                 transition={{
                     type: 'spring',
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/window-selected/rotate-group.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/window-selected/rotate-group.tsx
@@ -17,7 +17,7 @@ export function RotateGroup({ frameData }: { frameData: FrameData }) {
                     frameData.frame.dimension.height = width;
                 }}
             >
-                <Icons.CounterClockwiseClock className="h-4 w-4" />
+                <Icons.Rotate className="h-4 w-4" />
             </Button>
         </HoverOnlyTooltip>
     );
diff --git a/apps/web/client/src/app/project/[id]/_components/left-panel/layers-tab/tree/tree-node.tsx b/apps/web/client/src/app/project/[id]/_components/left-panel/layers-tab/tree/tree-node.tsx
@@ -120,7 +120,7 @@ export const TreeNode = memo(
                         case MouseAction.MOUSE_DOWN:
                             if (isWindow) {
                                 editorEngine.clearUI();
-                                editorEngine.frames.select([frameData.frame]);
+                                editorEngine.frames.select([frameData.frame], e.shiftKey);
                                 return;
                             }
                             if (e.shiftKey) {
diff --git a/apps/web/client/src/components/store/editor/frames/manager.ts b/apps/web/client/src/components/store/editor/frames/manager.ts
@@ -68,7 +68,8 @@ export class FramesManager {
     }
 
     registerView(frame: Frame, view: WebFrameView) {
-        this._frameIdToData.set(frame.id, { frame, view, selected: false });
+        const isSelected = this.isSelected(frame.id);
+        this._frameIdToData.set(frame.id, { frame, view, selected: isSelected });
         const framePathname = new URL(view.src).pathname;
         this._navigation.registerFrame(frame.id, framePathname);
     }
@@ -85,10 +86,12 @@ export class FramesManager {
         return this._frameIdToData.get(id)?.selected ?? false;
     }
 
-    select(frames: Frame[]) {
-        this.deselectAll();
+    select(frames: Frame[], multiselect = false) {
+        if (!multiselect) {
+            this.deselectAll();
+        }
         for (const frame of frames) {
-            this.updateFrameSelection(frame.id, true);
+            this.updateFrameSelection(frame.id, !this.isSelected(frame.id));
         }
         this.notify();
     }
@@ -248,7 +251,11 @@ export class FramesManager {
         const existingFrame = this.get(frameId);
         if (existingFrame) {
             const newFrame = { ...existingFrame.frame, ...frame };
-            this._frameIdToData.set(frameId, { ...existingFrame, frame: newFrame });
+            this._frameIdToData.set(frameId, {
+                ...existingFrame,
+                frame: newFrame,
+                selected: existingFrame.selected,
+            });
         }
         await this.saveToStorage(frameId, frame);
     }
diff --git a/packages/ui/src/components/color-picker/Gradient.tsx b/packages/ui/src/components/color-picker/Gradient.tsx
@@ -47,33 +47,6 @@ const FlipIcon = ({ className, ...props }: { className?: string; [key: string]:
     </svg>
 );
 
-const RotateIcon = ({ className, ...props }: { className?: string; [key: string]: any }) => (
-    <svg
-        width="16"
-        height="16"
-        viewBox="0 0 15 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className={className}
-        {...props}
-    >
-        <path
-            d="M12.197 9.65567C12.3003 7.94296 12.0004 6.57856 10.7554 5.33352C8.74176 3.31988 5.477 3.31988 3.46336 5.33352C2.48972 6.30716 1.98685 7.57332 1.95477 8.84912"
-            stroke="currentColor"
-            strokeWidth="0.9375"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-        />
-        <path
-            d="M13.8576 8.65058L12.4213 10.0869C12.2382 10.2699 11.9414 10.2699 11.7584 10.0869L10.3221 8.65058"
-            stroke="currentColor"
-            strokeWidth="0.9375"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-        />
-    </svg>
-);
-
 const SelectedStopIcon = ({ className, ...props }: { className?: string; [key: string]: any }) => (
     <svg
         width="20"
@@ -850,7 +823,7 @@ export const Gradient: React.FC<GradientProps> = ({
                                     className="p-1.5 text-foreground-secondary hover:text-foreground-primary transition-colors hover:bg-background-hover rounded"
                                     title="Rotate gradient"
                                 >
-                                    <RotateIcon className="w-3.5 h-3.5" />
+                                    <Icons.Rotate className="w-3.5 h-3.5" />
                                 </button>
                             </TooltipTrigger>
                             <TooltipContent hideArrow className="mb-1">
diff --git a/packages/ui/src/components/icons/index.tsx b/packages/ui/src/components/icons/index.tsx
@@ -1443,6 +1443,32 @@ export const Icons = {
             />
         </svg>
     ),
+    Rotate: ({ className, ...props }: { className?: string; [key: string]: any }) => (
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 15 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+            {...props}
+        >
+            <path
+                d="M12.197 9.65567C12.3003 7.94296 12.0004 6.57856 10.7554 5.33352C8.74176 3.31988 5.477 3.31988 3.46336 5.33352C2.48972 6.30716 1.98685 7.57332 1.95477 8.84912"
+                stroke="currentColor"
+                strokeWidth="0.9375"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M13.8576 8.65058L12.4213 10.0869C12.2382 10.2699 11.9414 10.2699 11.7584 10.0869L10.3221 8.65058"
+                stroke="currentColor"
+                strokeWidth="0.9375"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    ),
 
     ArrowDown: ArrowDownIcon,
     ArrowLeft: ArrowLeftIcon,

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ export function RotateGroup({ frameData }: { frameData: FrameData }) {`
`17`	`17`	`frameData.frame.dimension.height = width;`
`18`	`18`	`}}`
`19`	`19`	`>`
`20`		`- <Icons.CounterClockwiseClock className="h-4 w-4" />`
	`20`	`+ <Icons.Rotate className="h-4 w-4" />`
`21`	`21`	`</Button>`
`22`	`22`	`</HoverOnlyTooltip>`
`23`	`23`	`);`
Original file line number	Diff line number	Diff line change
`@@ -120,7 +120,7 @@ export const TreeNode = memo(`
`120`	`120`	`case MouseAction.MOUSE_DOWN:`
`121`	`121`	`if (isWindow) {`
`122`	`122`	`editorEngine.clearUI();`
`123`		`- editorEngine.frames.select([frameData.frame]);`
	`123`	`+ editorEngine.frames.select([frameData.frame], e.shiftKey);`
`124`	`124`	`return;`
`125`	`125`	`}`
`126`	`126`	`if (e.shiftKey) {`
Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,8 @@ export class FramesManager {`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`registerView(frame: Frame, view: WebFrameView) {`
`71`		`- this._frameIdToData.set(frame.id, { frame, view, selected: false });`
	`71`	`+ const isSelected = this.isSelected(frame.id);`
	`72`	`+ this._frameIdToData.set(frame.id, { frame, view, selected: isSelected });`
`72`	`73`	`const framePathname = new URL(view.src).pathname;`
`73`	`74`	`this._navigation.registerFrame(frame.id, framePathname);`
`74`	`75`	`}`
`@@ -85,10 +86,12 @@ export class FramesManager {`
`85`	`86`	`return this._frameIdToData.get(id)?.selected ?? false;`
`86`	`87`	`}`
`87`	`88`
`88`		`- select(frames: Frame[]) {`
`89`		`- this.deselectAll();`
	`89`	`+ select(frames: Frame[], multiselect = false) {`
	`90`	`+ if (!multiselect) {`
	`91`	`+ this.deselectAll();`
	`92`	`+ }`
`90`	`93`	`for (const frame of frames) {`
`91`		`- this.updateFrameSelection(frame.id, true);`
	`94`	`+ this.updateFrameSelection(frame.id, !this.isSelected(frame.id));`
`92`	`95`	`}`
`93`	`96`	`this.notify();`
`94`	`97`	`}`
`@@ -248,7 +251,11 @@ export class FramesManager {`
`248`	`251`	`const existingFrame = this.get(frameId);`
`249`	`252`	`if (existingFrame) {`
`250`	`253`	`const newFrame = { ...existingFrame.frame, ...frame };`
`251`		`- this._frameIdToData.set(frameId, { ...existingFrame, frame: newFrame });`
	`254`	`+ this._frameIdToData.set(frameId, {`
	`255`	`+ ...existingFrame,`
	`256`	`+ frame: newFrame,`
	`257`	`+ selected: existingFrame.selected,`
	`258`	`+ });`
`252`	`259`	`}`
`253`	`260`	`await this.saveToStorage(frameId, frame);`
`254`	`261`	`}`