Workspace header tweak Windows

plugins/filter-xpath/package-lock.json

@@ -9,7 +9,6 @@
       "version": "0.0.1",
       "dependencies": {
         "@xmldom/xmldom": "^0.8.10",
-        "xmldom": "^0.6.0",
         "xpath": "^0.0.34"
       }
     },
@@ -21,14 +20,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/xmldom": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.6.0.tgz",
-      "integrity": "sha512-iAcin401y58LckRZ0TkI4k0VSM1Qg0KGSc3i8rU+xrxe19A/BN1zHyVSJY7uoutVlaTSzYyk/v5AmkewAP7jtg==",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/xpath": {
       "version": "0.0.34",
       "resolved": "https://registry.npmjs.org/xpath/-/xpath-0.0.34.tgz",

src-web/assets/icons/LeftPanelHiddenIcon.svg

@@ -1,5 +0,0 @@
-<svg width="100%" height="100%" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg"
-     style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-        <path fill="currentColor"
-              d="M2.5,1C1.672,1 1,1.672 1,2.5L1,12.5C1,13.328 1.672,14 2.5,14L12.5,14C13.328,14 14,13.328 14,12.5L14,2.5C14,1.672 13.328,1 12.5,1L2.5,1ZM12.5,13C12.776,13 13,12.776 13,12.5L13,2.5C13,2.224 12.776,2 12.5,2L6,2L6,13L12.5,13ZM2.5,2L5,2L5,13L2.5,13C2.224,13 2,12.776 2,12.5L2,2.5C2,2.224 2.224,2 2.5,2Z"/>
-</svg>

src-web/assets/icons/LeftPanelVisibleIcon.svg

@@ -1,6 +0,0 @@
-<svg width="100%" height="100%" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-            <rect x="0" y="0" width="15" height="15" style="fill:none;"/>
-            <g transform="matrix(1,0,0,1,-16,-8.88178e-16)">
-                <path fill="currentColor" d="M18.5,1C17.672,1 17,1.672 17,2.5L17,12.5C17,13.328 17.672,14 18.5,14L28.5,14C29.328,14 30,13.328 30,12.5L30,2.5C30,1.672 29.328,1 28.5,1L18.5,1ZM28.5,13C28.776,13 29,12.776 29,12.5L29,2.5C29,2.224 28.776,2 28.5,2L22,2L22,13L28.5,13ZM18,11.535L21,12.285L21,13L18.5,13C18.224,13 18,12.776 18,12.5L18,11.535ZM18,10.504L21,11.254L21,9.81L18,9.06L18,10.504ZM18,8.029L21,8.779L21,7.327L18,6.577L18,8.029ZM18,5.546L21,6.296L21,4.833L18,4.083L18,5.546ZM21,3.802L18,3.052L18,2.5C18,2.224 18.224,2 18.5,2L21,2L21,3.802Z"/>
-            </g>
-</svg>

src-web/components/WorkspaceHeader.tsx

@@ -38,36 +38,39 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
       </div>
       <div className="flex-1 flex items-center h-full justify-end pointer-events-none">
         <SettingsDropdown />
-        {osInfo?.osType !== 'Darwin' && (
+        {(osInfo?.osType === 'Linux' || osInfo?.osType === 'Windows_NT') && (
-          <HStack className="ml-4" space={1} alignItems="center">
+          <HStack className="ml-4" alignItems="center">
-            <Button className="!text-gray-600 rounded-none" onClick={() => appWindow.minimize()}>
+            <Button
+              className="px-4 !text-gray-600 rounded-none"
+              onClick={() => appWindow.minimize()}
+            >
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                 <path fill="currentColor" d="M14 8v1H3V8z" />
               </svg>
             </Button>
             <Button
-              className="!text-gray-600 rounded-none"
+              className="px-4 !text-gray-600 rounded-none"
               onClick={async () => {
                 await appWindow.toggleMaximize();
                 setMaximized(await appWindow.isMaximized());
               }}
             >
               {maximized ? (
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-                  <path fill="currentColor" d="M3 3v10h10V3zm9 9H4V4h8z" />
-                </svg>
-              ) : (
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                   <g fill="currentColor">
                     <path d="M3 5v9h9V5zm8 8H4V6h7z" />
                     <path fillRule="evenodd" d="M5 5h1V4h7v7h-1v1h2V3H5z" clipRule="evenodd" />
                   </g>
                 </svg>
+              ) : (
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+                  <path fill="currentColor" d="M3 3v10h10V3zm9 9H4V4h8z" />
+                </svg>
               )}
             </Button>
             <Button
               color="custom"
-              className="text-gray-600 rounded-none hocus:bg-red-200 hocus:text-gray-800"
+              className="px-4 text-gray-600 rounded-none hocus:bg-red-200 hocus:text-gray-800"
               onClick={() => appWindow.close()}
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">

src-web/components/core/Icon.tsx

@@ -1,66 +1,63 @@
 import * as lucide from 'lucide-react';
 import classNames from 'classnames';
-import type { HTMLAttributes } from 'react';
+import type {HTMLAttributes} from 'react';
-import { memo } from 'react';
+import {memo} from 'react';
-import { ReactComponent as LeftPanelHiddenIcon } from '../../assets/icons/LeftPanelHiddenIcon.svg';
-import { ReactComponent as LeftPanelVisibleIcon } from '../../assets/icons/LeftPanelVisibleIcon.svg';
 
 const icons = {
-  archive: lucide.ArchiveIcon,
+    archive: lucide.ArchiveIcon,
-  box: lucide.BoxIcon,
+    box: lucide.BoxIcon,
-  chat: lucide.MessageSquare,
+    chat: lucide.MessageSquare,
-  check: lucide.CheckIcon,
+    check: lucide.CheckIcon,
-  chevronDown: lucide.ChevronDownIcon,
+    chevronDown: lucide.ChevronDownIcon,
-  chevronRight: lucide.ChevronRightIcon,
+    chevronRight: lucide.ChevronRightIcon,
-  code: lucide.CodeIcon,
+    code: lucide.CodeIcon,
-  copy: lucide.CopyIcon,
+    copy: lucide.CopyIcon,
-  moreVertical: lucide.MoreVerticalIcon,
+    download: lucide.DownloadIcon,
-  download: lucide.DownloadIcon,
+    externalLink: lucide.ExternalLinkIcon,
-  gripVertical: lucide.GripVerticalIcon,
+    eye: lucide.EyeIcon,
-  eye: lucide.EyeIcon,
+    eyeClosed: lucide.EyeOffIcon,
-  eyeClosed: lucide.EyeOffIcon,
+    filter: lucide.FilterIcon,
-  filter: lucide.FilterIcon,
+    flask: lucide.FlaskConicalIcon,
-  flask: lucide.FlaskConicalIcon,
+    gripVertical: lucide.GripVerticalIcon,
-  keyboard: lucide.KeyboardIcon,
+    keyboard: lucide.KeyboardIcon,
-  magicWand: lucide.Wand2Icon,
+    leftPanelHidden: lucide.PanelLeftOpenIcon,
-  externalLink: lucide.ExternalLinkIcon,
+    leftPanelVisible: lucide.PanelLeftCloseIcon,
-  sendHorizontal: lucide.SendHorizonalIcon,
+    magicWand: lucide.Wand2Icon,
-  pencil: lucide.PencilIcon,
+    moreVertical: lucide.MoreVerticalIcon,
-  question: lucide.ShieldQuestionIcon,
+    pencil: lucide.PencilIcon,
-  plus: lucide.PlusIcon,
+    plus: lucide.PlusIcon,
-  plusCircle: lucide.PlusCircleIcon,
+    plusCircle: lucide.PlusCircleIcon,
-  settings: lucide.SettingsIcon,
+    question: lucide.ShieldQuestionIcon,
-  settings2: lucide.Settings2Icon,
+    sendHorizontal: lucide.SendHorizonalIcon,
-  trash: lucide.TrashIcon,
+    settings2: lucide.Settings2Icon,
-  update: lucide.RefreshCcwIcon,
+    settings: lucide.SettingsIcon,
-  upload: lucide.UploadIcon,
+    trash: lucide.TrashIcon,
-  x: lucide.XIcon,
+    update: lucide.RefreshCcwIcon,
+    upload: lucide.UploadIcon,
+    x: lucide.XIcon,
 
-  // Custom
+    empty: (props: HTMLAttributes<HTMLSpanElement>) => <span {...props} />,
-  leftPanelHidden: LeftPanelHiddenIcon,
-  leftPanelVisible: LeftPanelVisibleIcon,
-  empty: (props: HTMLAttributes<HTMLSpanElement>) => <span {...props} />,
 };
 
 export interface IconProps {
-  icon: keyof typeof icons;
+    icon: keyof typeof icons;
-  className?: string;
+    className?: string;
-  size?: 'xs' | 'sm' | 'md';
+    size?: 'xs' | 'sm' | 'md';
-  spin?: boolean;
+    spin?: boolean;
 }
 
-export const Icon = memo(function Icon({ icon, spin, size = 'md', className }: IconProps) {
+export const Icon = memo(function Icon({icon, spin, size = 'md', className}: IconProps) {
-  const Component = icons[icon] ?? icons.question;
+    const Component = icons[icon] ?? icons.question;
-  return (
+    return (
-    <Component
+        <Component
-      className={classNames(
+            className={classNames(
-        className,
+                className,
-        'text-inherit',
+                'text-inherit',
-        size === 'md' && 'h-4 w-4',
+                size === 'md' && 'h-4 w-4',
-        size === 'sm' && 'h-3.5 w-3.5',
+                size === 'sm' && 'h-3.5 w-3.5',
-        size === 'xs' && 'h-3 w-3',
+                size === 'xs' && 'h-3 w-3',
-        spin && 'animate-spin',
+                spin && 'animate-spin',
-      )}
+            )}
-    />
+        />
-  );
+    );
 });