feat: update element positions

Author: AykutSarac

src/features/editor/Toolbar/Logo.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Text, TextInput } from "@mantine/core";
+import { Box, Flex, Text, TextInput } from "@mantine/core";
 import { getHotkeyHandler } from "@mantine/hooks";
 import { AiOutlineSearch } from "react-icons/ai";
 import { useFocusNode } from "../../../hooks/useFocusNode";
@@ -8,29 +8,38 @@ export const SearchInput = () => {
   const [searchValue, setValue, skip, nodeCount, currentNode] = useFocusNode();
 
   return (
-    <TextInput
-      variant="unstyled"
-      type="search"
-      size="xs"
-      id="search-node"
-      w={180}
-      value={searchValue}
-      onChange={e => setValue(e.currentTarget.value)}
-      placeholder="Search Node"
-      autoComplete="off"
-      autoCorrect="off"
-      onKeyDown={getHotkeyHandler([["Enter", skip]])}
-      leftSection={<AiOutlineSearch />}
-      rightSection={
-        searchValue && (
-          <Flex h={30} align="center">
-            <Text size="xs" c="dimmed" pr="md">
-              {searchValue && `${nodeCount}/${nodeCount > 0 ? currentNode + 1 : "0"}`}
-            </Text>
-          </Flex>
-        )
-      }
-      style={{ borderBottom: "1px solid gray" }}
-    />
+    <Box
+      style={{
+        position: "absolute",
+        bottom: "10px",
+        left: "10px",
+        zIndex: 100,
+      }}
+    >
+      <TextInput
+        variant="unstyled"
+        type="search"
+        size="xs"
+        id="search-node"
+        w={180}
+        value={searchValue}
+        onChange={e => setValue(e.currentTarget.value)}
+        placeholder="Search Node"
+        autoComplete="off"
+        autoCorrect="off"
+        onKeyDown={getHotkeyHandler([["Enter", skip]])}
+        leftSection={<AiOutlineSearch />}
+        rightSection={
+          searchValue && (
+            <Flex h={30} align="center">
+              <Text size="xs" c="dimmed" pr="md">
+                {searchValue && `${nodeCount}/${nodeCount > 0 ? currentNode + 1 : "0"}`}
+              </Text>
+            </Flex>
+          )
+        }
+        style={{ borderBottom: "1px solid gray" }}
+      />
+    </Box>
   );
 };

src/features/editor/Toolbar/SearchInput.tsx

@@ -10,7 +10,6 @@ import { JSONCrackLogo } from "../../../layout/JsonCrackLogo";
 import useFile from "../../../store/useFile";
 import useModal from "../../../store/useModal";
 import { FileMenu } from "./FileMenu";
-import { Logo } from "./Logo";
 import { ToolsMenu } from "./ToolsMenu";
 import { ViewMenu } from "./ViewMenu";
 import { StyledToolElement } from "./styles";
@@ -55,7 +54,13 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
 
   return (
     <StyledTools>
-      {isWidget && <Logo />}
+      {isWidget && (
+        <StyledToolElement title="JSON Crack">
+          <Flex gap="xs" align="center" justify="center">
+            <JSONCrackLogo fontSize="0.8rem" hideLogo />
+          </Flex>
+        </StyledToolElement>
+      )}
       {!isWidget && (
         <Group gap="xs" justify="left" w="100%" style={{ flexWrap: "nowrap" }}>
           <StyledToolElement title="JSON Crack">

src/features/editor/Toolbar/index.tsx

@@ -11,7 +11,6 @@ import useToggleHide from "../../../../hooks/useToggleHide";
 import useConfig from "../../../../store/useConfig";
 import useModal from "../../../../store/useModal";
 import type { LayoutDirection } from "../../../../types/graph";
-import { SearchInput } from "../../Toolbar/SearchInput";
 import useGraph from "./stores/useGraph";
 
 const StyledFlowIcon = styled(TiFlowMerge)<{ rotate: number }>`
@@ -32,7 +31,7 @@ const rotateLayout = (direction: LayoutDirection) => {
   return 360;
 };
 
-export const OptionsMenu = ({ isWidget = false }) => {
+export const OptionsMenu = () => {
   const toggleGestures = useConfig(state => state.toggleGestures);
   const toggleChildrenCount = useConfig(state => state.toggleChildrenCount);
   const toggleRulers = useConfig(state => state.toggleRulers);
@@ -91,15 +90,15 @@ export const OptionsMenu = ({ isWidget = false }) => {
       align="center"
       style={{
         position: "absolute",
-        bottom: "10px",
+        top: "10px",
         left: "10px",
         zIndex: 100,
       }}
     >
       <Menu withArrow>
         <Menu.Target>
-          <ActionIcon variant="light" color="gray">
-            <LuMenu />
+          <ActionIcon aria-label="actions" size="lg" color="gray" variant="light">
+            <LuMenu size="18" />
           </ActionIcon>
         </Menu.Target>
         <Menu.Dropdown>
@@ -212,7 +211,6 @@ export const OptionsMenu = ({ isWidget = false }) => {
           </Menu>
         </Menu.Dropdown>
       </Menu>
-      {!isWidget && <SearchInput />}
     </Flex>
   );
 };

src/features/editor/views/GraphView/OptionsMenu.tsx

@@ -8,6 +8,7 @@ import type { ElkRoot } from "reaflow/dist/layout/useLayout";
 import { useLongPress } from "use-long-press";
 import useToggleHide from "../../../../hooks/useToggleHide";
 import useConfig from "../../../../store/useConfig";
+import { SearchInput } from "../../Toolbar/SearchInput";
 import { CustomEdge } from "./CustomEdge";
 import { CustomNode } from "./CustomNode";
 import { NotSupported } from "./NotSupported";
@@ -176,7 +177,8 @@ export const GraphView = ({ isWidget = false }: GraphProps) => {
   return (
     <>
       <LoadingOverlay visible={loading} />
-      <OptionsMenu isWidget={isWidget} />
+      {!isWidget && <OptionsMenu />}
+      {!isWidget && <SearchInput />}
       <ZoomControl />
       <StyledEditorWrapper
         $widget={isWidget}

src/features/editor/views/GraphView/index.tsx

@@ -14,6 +14,7 @@ import {
   Image,
   Box,
   CloseButton,
+  FocusTrap,
 } from "@mantine/core";
 import Cookie from "js-cookie";
 import { LuCheck, LuZap } from "react-icons/lu";
@@ -103,6 +104,7 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
       withCloseButton={false}
       closeOnClickOutside={false}
     >
+      <FocusTrap.InitialFocus />
       <Flex justify="center" align="center" gap="xs">
         <Image
           ml="auto"