add filter icons

public/locales/en.json

@@ -42,6 +42,7 @@
   "saveAs": "Save As...",
   "saveAsSubtree": "Save As Subtree",
   "searchFile": "Search File",
+  "searchNode": "Search Node",
   "services": "Services",
   "start": "Start",
   "undo": "Undo",

public/locales/zh.json

@@ -42,6 +42,7 @@
   "saveAs": "另存为...",
   "saveAsSubtree": "另存为子树",
   "searchFile": "搜索文件",
+  "searchNode": "搜索节点",
   "services": "服务",
   "start": "开始",
   "undo": "撤销",

src/components/editor.tsx

@@ -21,6 +21,9 @@ import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from "re
 import { useTranslation } from "react-i18next";
 import { FiDelete } from "react-icons/fi";
 import { IoMdReturnLeft } from "react-icons/io";
+import { PiCubeFocus } from "react-icons/pi";
+import { RiFocus3Fill, RiFocus3Line } from "react-icons/ri";
+import { VscCaseSensitive } from "react-icons/vsc";
 import { mergeRefs } from "react-merge-refs";
 import { useDebounceCallback } from "usehooks-ts";
 import "./register-node";
@@ -1002,24 +1005,50 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
         <Flex
           style={{
             position: "absolute",
-            marginTop: "10px",
+            width: "100%",
-            marginLeft: "10px",
+            justifyContent: "end",
+            paddingRight: "10px",
+            paddingTop: "10px",
+          }}
+        >
+          <Flex
+            style={{
               backgroundColor: "#161b22",
               padding: "4px 10px 4px 10px",
               borderRadius: "4px",
-            borderLeft: "4px solid #f78166",
+              borderLeft: "3px solid #f78166",
               boxShadow: "0 0 8px 2px #0000005c",
               alignItems: "center",
             }}
           >
             <Input
               autoFocus
-            allowClear
               size="small"
-            style={{ borderRadius: "2px" }}
+              style={{
+                borderRadius: "2px",
+                paddingTop: "1px",
+                paddingBottom: "1px",
+                paddingRight: "2px",
+              }}
               onChange={(e) => onSearchChange(e.currentTarget.value)}
+              suffix={
+                <Flex style={{ alignItems: "center" }}>
+                  <Button
+                    type="text"
+                    size="small"
+                    style={{ width: "20px", height: "20px" }}
+                    icon={<VscCaseSensitive style={{ width: "18px", height: "18px" }} />}
                   />
-          <div style={{ padding: "0 10px 0 5px" }}>
+                  <Button
+                    type="text"
+                    size="small"
+                    style={{ width: "20px", height: "20px" }}
+                    icon={<RiFocus3Line />}
+                  />
+                </Flex>
+              }
+            />
+            <div style={{ padding: "0 10px 0 5px", minWidth: "40px" }}>
               {results.length ? `${resultIndex + 1}/${results.length}` : ""}
             </div>
             <Button
@@ -1066,6 +1095,7 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
               }}
             />
           </Flex>
+        </Flex>
       )}
 
       <Dropdown menu={{ items: menuItems, onClick }} trigger={["contextMenu"]}>

src/components/workspace.tsx

@@ -7,9 +7,9 @@ import { app } from "@electron/remote";
 import { Button, Flex, Layout, Space, Tabs, Tag, Tooltip } from "antd";
 import { FC, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { BiAddToQueue } from "react-icons/bi";
 import { FaExclamationTriangle, FaRegFolderOpen } from "react-icons/fa";
 import { PiTreeStructureFill } from "react-icons/pi";
+import { VscNewFolder, VscRepo } from "react-icons/vsc";
 import useForceUpdate from "use-force-update";
 import { useWindowSize } from "usehooks-ts";
 import { Editor } from "./editor";
@@ -275,7 +275,7 @@ export const Workspace: FC = () => {
                     }}
                     onClick={() => workspace.createProject()}
                   >
-                    <BiAddToQueue size="20px" />
+                    <VscNewFolder size="20px" />
                     {t("createProject")}
                   </Flex>
                   <Flex
@@ -289,7 +289,7 @@ export const Workspace: FC = () => {
                     }}
                     onClick={() => workspace.openProject()}
                   >
-                    <FaRegFolderOpen size="19px" />
+                    <VscRepo size="19px" />
                     {t("openProject")}
                   </Flex>
                 </Flex>
@@ -337,6 +337,7 @@ export const Workspace: FC = () => {
                 {[
                   { label: t("searchFile"), hotkeys: isMacos ? "⌘ P" : "Ctrl + P" },
                   { label: t("build"), hotkeys: isMacos ? "⌘ B" : "Ctrl + B" },
+                  { label: t("searchNode"), hotkeys: isMacos ? "⌘ F" : "Ctrl + F" },
                   { label: t("insertNode"), hotkeys: "Enter" },
                   { label: t("deleteNode"), hotkeys: "Backspace" },
                 ].map((v) => (