Updated copy and styles

app/common/hotkeys.ts

@@ -22,10 +22,22 @@ export class Hotkey {
     }
 
     get readableCommand() {
+        const isMac = process.platform === 'darwin';
         return this.command
-            .replace('meta', '⌘')
+            .replace('mod', isMac ? '⌘' : 'Ctrl')
             .split('+')
-            .map((value) => capitalizeFirstLetter(value))
+            .map((value) => {
+                if (value === 'shift') {
+                    return '⇧';
+                }
+                if (value === 'alt') {
+                    return isMac ? '⌥' : 'Alt';
+                }
+                if (value === 'ctrl') {
+                    return isMac ? '⌃' : 'Ctrl';
+                }
+                return capitalizeFirstLetter(value);
+            })
             .join(' ');
     }
 }

app/common/ide.ts

@@ -1,16 +1,23 @@
+import CursorIcon from '../src/assets/cursor.svg';
+import VsCodeIcon from '../src/assets/vscode.svg';
+import ZedIcon from '../src/assets/zed.svg';
+
 export enum IdeType {
     VS_CODE = 'VSCode',
     CURSOR = 'Cursor',
+    ZED = 'Zed',
 }
 
 export class IDE {
-    static readonly VS_CODE = new IDE('VSCode', IdeType.VS_CODE, 'vscode');
-    static readonly CURSOR = new IDE('Cursor', IdeType.CURSOR, 'cursor');
+    static readonly VS_CODE = new IDE('VSCode', IdeType.VS_CODE, 'vscode', VsCodeIcon);
+    static readonly CURSOR = new IDE('Cursor', IdeType.CURSOR, 'cursor', CursorIcon);
+    static readonly ZED = new IDE('Zed', IdeType.ZED, 'zed', ZedIcon);
 
     private constructor(
         public readonly displayName: string,
         public readonly type: IdeType,
         public readonly command: string,
+        public readonly icon: string,
     ) {}
 
     toString() {
@@ -23,12 +30,14 @@ export class IDE {
                 return IDE.VS_CODE;
             case IdeType.CURSOR:
                 return IDE.CURSOR;
+            case IdeType.ZED:
+                return IDE.ZED;
             default:
                 throw new Error(`Unknown IDE type: ${type}`);
         }
     }
 
     static getAll(): IDE[] {
-        return [this.VS_CODE, this.CURSOR];
+        return [this.VS_CODE, this.CURSOR, this.ZED];
     }
 }

app/package.json

@@ -57,6 +57,7 @@
         "@supabase/supabase-js": "^2.44.4",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "cmdk": "1.0.0",
         "css-to-tailwind-translator": "^1.2.8",
         "culori": "^4.0.1",
         "electron-log": "^5.2.0",

app/src/components/ui/command.tsx

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Command as CommandPrimitive } from 'cmdk';
+
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+
+const Command = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive
+        ref={ref}
+        className={cn(
+            'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+            className,
+        )}
+        {...props}
+    />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+    return (
+        <Dialog {...props}>
+            <DialogContent className="overflow-hidden p-0">
+                <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+                    {children}
+                </Command>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+const CommandInput = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Input>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+    <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+        <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+        <CommandPrimitive.Input
+            ref={ref}
+            className={cn(
+                'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+                className,
+            )}
+            {...props}
+        />
+    </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.List>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.List
+        ref={ref}
+        className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+        {...props}
+    />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Empty>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+    <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Group>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.Group
+        ref={ref}
+        className={cn(
+            'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+            className,
+        )}
+        {...props}
+    />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.Separator
+        ref={ref}
+        className={cn('-mx-1 h-px bg-border', className)}
+        {...props}
+    />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+    React.ElementRef<typeof CommandPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+    <CommandPrimitive.Item
+        ref={ref}
+        className={cn(
+            'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',
+            className,
+        )}
+        {...props}
+    />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+    return (
+        <span
+            className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+            {...props}
+        />
+    );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+    Command,
+    CommandDialog,
+    CommandInput,
+    CommandList,
+    CommandEmpty,
+    CommandGroup,
+    CommandItem,
+    CommandShortcut,
+    CommandSeparator,
+};

app/src/components/ui/hotkeys-label.tsx

@@ -3,9 +3,15 @@ import { Kbd } from './kbd';
 
 export function HotKeyLabel({ hotkey }: { hotkey: Hotkey }) {
     return (
-        <span className="space-x-2">
+        <span className="flex items-center space-x-2">
             <span>{hotkey.description}</span>
-            <Kbd>{hotkey.readableCommand}</Kbd>
+
+            <Kbd>
+                <span
+                    className="inline-grid grid-flow-col auto-cols-max gap-1.5 items-center text-xs [&_kbd]:text-[1.1em]"
+                    dangerouslySetInnerHTML={{ __html: hotkey.readableCommand }}
+                />
+            </Kbd>
         </span>
     );
 }

app/src/lib/editor/styles/index.ts

@@ -282,7 +282,7 @@ export const ELEMENT_STYLES: ElementStyle[] = [
     new ElementStyleImpl(
         'backgroundColor',
         '',
-        'Fill',
+        'Background',
         ElementStyleType.Color,
         ElementStyleGroup.Style,
     ),

app/src/lib/editor/styles/models.ts

@@ -23,7 +23,7 @@ export enum ElementStyleType {
 export enum ElementStyleGroup {
     Size = 'Size',
     Position = 'Position & Dimensions',
-    Layout = 'Layout',
+    Layout = 'Flexbox & Layout',
     Style = 'Styles',
     Text = 'Text',
     Effects = 'Effects',

app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx

@@ -171,7 +171,7 @@ const TreeNode = observer(
                         >
                             {instance?.component
                                 ? instance.component
-                                : node.data.tagName.toLowerCase()}{' '}
+                                : node.data.tagName.toLowerCase()}
                             {node.data.textContent}
                         </span>
                     </div>

app/src/routes/editor/RightClickMenu/index.tsx

@@ -6,6 +6,13 @@ import {
     ContextMenuTrigger,
 } from '@/components/ui/context-menu';
 import { Kbd } from '@/components/ui/kbd';
+import {
+    CodeIcon,
+    Component1Icon,
+    ComponentInstanceIcon,
+    ExternalLinkIcon,
+    ReloadIcon,
+} from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
 import { Hotkey } from '/common/hotkeys';
@@ -21,7 +28,9 @@ interface MenuItem {
     action: () => void;
     hotkey?: Hotkey;
     children?: MenuItem[];
+    icon: React.ReactNode;
 }
+
 export const RightClickMenu = observer(({ children }: RightClickMenuProps) => {
     const editorEngine = useEditorEngine();
     const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
@@ -32,12 +41,14 @@ export const RightClickMenu = observer(({ children }: RightClickMenuProps) => {
             action: () => {
                 editorEngine.inspect();
             },
+            icon: <CodeIcon className="mr-2 h-4 w-4" />,
         },
         {
             label: 'Refresh layers',
             action: () => {
                 editorEngine.refreshLayers();
             },
+            icon: <ReloadIcon className="mr-2 h-4 w-4" />,
         },
     ];
 
@@ -58,10 +69,16 @@ export const RightClickMenu = observer(({ children }: RightClickMenuProps) => {
             instance && {
                 label: 'View instance code',
                 action: () => viewSource(instance),
+                icon: <ComponentInstanceIcon className="mr-2 h-4 w-4" />,
             },
             root && {
                 label: `View ${instance ? 'component' : 'element'} code`,
                 action: () => viewSource(root),
+                icon: instance ? (
+                    <Component1Icon className="mr-2 h-4 w-4" />
+                ) : (
+                    <ExternalLinkIcon className="mr-2 h-4 w-4" />
+                ),
             },
             ...DEFAULT_MENU_ITEMS,
         ].filter(Boolean) as MenuItem[];
@@ -79,7 +96,8 @@ export const RightClickMenu = observer(({ children }: RightClickMenuProps) => {
             <ContextMenuContent>
                 {menuItems.map((item) => (
                     <ContextMenuItem key={item.label} onClick={item.action}>
-                        <span className="flex w-full">
+                        <span className="flex w-full items-center">
+                            {item.icon}
                             <span>{item.label}</span>
                             <span className="ml-auto">
                                 {item.hotkey && <Kbd>{item.hotkey.readableCommand}</Kbd>}

app/src/routes/editor/TopBar/OpenCode/index.tsx

@@ -1,5 +1,3 @@
-import CursorIcon from '@/assets/cursor.svg';
-import VsCodeIcon from '@/assets/vscode.svg';
 import { useEditorEngine } from '@/components/Context';
 import {
     DropdownMenu,
@@ -72,10 +70,7 @@ const OpenCode = observer(() => {
                                     onClick={() => viewSource(instance || root)}
                                 >
                                     <span className="text-default h-3 w-3 mr-2">
-                                        <img
-                                            src={ide === IDE.VS_CODE ? VsCodeIcon : CursorIcon}
-                                            alt={`${ide} Icon`}
-                                        />
+                                        <img src={ide.icon} alt={`${ide} Icon`} />
                                     </span>
                                     <span className="text-xs">{`Open in ${ide}`}</span>
                                 </button>
@@ -130,10 +125,7 @@ const OpenCode = observer(() => {
                                         }}
                                     >
                                         <span className="text-default h-3 w-3 mr-2">
-                                            <img
-                                                src={item === IDE.VS_CODE ? VsCodeIcon : CursorIcon}
-                                                alt={`${item} Icon`}
-                                            />
+                                            <img src={item.icon} alt={`${item} Icon`} />
                                         </span>
                                         <span>{item.displayName}</span>
                                         {ide === item && <CheckCircledIcon className="ml-auto" />}

app/src/routes/editor/TopBar/ProjectSelect/index.tsx

@@ -30,7 +30,7 @@ const ProjectBreadcrumb = observer(() => {
     }
 
     return (
-        <div className="mx-2 flex flex-row items-center text-small text-text gap-2">
+        <div className="mx-2 flex flex-row items-center text-small gap-2">
             <Tooltip>
                 <TooltipTrigger asChild>
                     <Button
@@ -46,11 +46,11 @@ const ProjectBreadcrumb = observer(() => {
                         {'Onlook'}
                     </Button>
                 </TooltipTrigger>
-                <TooltipContent side="bottom" className="pt-1">
+                <TooltipContent side="bottom" className="pt-1 text-active">
                     Return to project selection
                 </TooltipContent>
             </Tooltip>
-            <p className="mb-[2px] min-w-[4px]">{'/'}</p>
+            <p className="mb-[2px] min-w-[4px] text-text">{'/'}</p>
             <p className="mx-0 max-w-[60px] md:max-w-[100px] lg:max-w-[200px] px-0 text-text text-small truncate hover:text-text hover:bg-transparent">
                 {projectsManager.project?.name}
             </p>