first commit

app/src/app.test.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./app";
+
+test("renders learn react link", () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

app/src/app.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Dashboard from "./pages/Dashboard";
+import Project from "./pages/Project";
+import UserAuth from "./pages/UserAuth";
+import "./styles/main.scss";
+import { LoggerProvider } from "./components/ui/log/LoggerContext";
+
+const App: React.FC = () => {
+
+  return (
+    <LoggerProvider>
+      <Router>
+        <Routes>
+          <Route path="/" element={<UserAuth />} />
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="/:projectId" element={<Project />} />
+        </Routes>
+      </Router>
+    </LoggerProvider>
+  );
+};
+
+export default App;

app/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

app/src/components/Dashboard/DashboardCard.tsx

@@ -0,0 +1,281 @@
+import React, { useState, useRef, useEffect } from "react";
+import img from "../../assets/image/image.png";
+import { useNavigate } from "react-router-dom";
+import { getUserData } from "./functions/getUserData";
+import { useLoadingProgress, useProjectName, useSocketStore } from "../../store/builder/store";
+import { viewProject } from "../../services/dashboard/viewProject";
+import OuterClick from "../../utils/outerClick";
+import { KebabIcon } from "../icons/ExportCommonIcons";
+import { getAllProjects } from "../../services/dashboard/getAllProjects";
+
+interface DashBoardCardProps {
+    projectName: string;
+    thumbnail: any;
+    projectId: string;
+    createdAt?: string;
+    isViewed?: string;
+    handleDeleteProject?: (projectId: string) => Promise<void>;
+    handleTrashDeleteProject?: (projectId: string) => Promise<void>;
+    handleRestoreProject?: (projectId: string) => Promise<void>;
+    handleDuplicateWorkspaceProject?: (
+        projectId: string,
+        projectName: string,
+        thumbnail: string
+    ) => Promise<void>;
+    handleDuplicateRecentProject?: (
+        projectId: string,
+        projectName: string,
+        thumbnail: string
+    ) => Promise<void>;
+    active?: string;
+    setIsSearchActive?: React.Dispatch<React.SetStateAction<boolean>>;
+    setRecentDuplicateData?: React.Dispatch<React.SetStateAction<Object>>;
+    setProjectDuplicateData?: React.Dispatch<React.SetStateAction<Object>>;
+}
+type RelativeTimeFormatUnit = any;
+
+const DashboardCard: React.FC<DashBoardCardProps> = ({
+    projectName,
+    thumbnail,
+    projectId,
+    active,
+    handleDeleteProject,
+    handleRestoreProject,
+    handleTrashDeleteProject,
+    handleDuplicateWorkspaceProject,
+    handleDuplicateRecentProject,
+    createdAt,
+    setRecentDuplicateData,
+    setProjectDuplicateData,
+}) => {
+    const navigate = useNavigate();
+    const { setProjectName } = useProjectName();
+    const { userId, organization, userName } = getUserData();
+    const [isKebabOpen, setIsKebabOpen] = useState(false);
+    const [renameValue, setRenameValue] = useState(projectName);
+    const [isRenaming, setIsRenaming] = useState(false);
+    const { projectSocket } = useSocketStore();
+    const { setLoadingProgress } = useLoadingProgress();
+    const kebabRef = useRef<HTMLDivElement>(null);
+
+    const navigateToProject = async (e: any) => {
+        if (active && active == "trash") return;
+        try {
+            const viewedProject = await viewProject(organization, projectId, userId);
+            console.log("Viewed project:", viewedProject);
+        } catch (error) {
+            console.error("Error opening project:", error);
+        }
+        setLoadingProgress(1)
+        setProjectName(projectName);
+        navigate(`/${projectId}`);
+    };
+
+    const handleOptionClick = async (option: string) => {
+        switch (option) {
+            case "delete":
+                if (handleDeleteProject) {
+                    await handleDeleteProject(projectId);
+                } else if (handleTrashDeleteProject) {
+                    await handleTrashDeleteProject(projectId);
+                }
+                break;
+            case "restore":
+                if (handleRestoreProject) {
+                    await handleRestoreProject(projectId);
+                }
+                break;
+            case "open in new tab":
+                try {
+                    await viewProject(organization, projectId, userId);
+                    setProjectName(projectName);
+                    setIsKebabOpen(false);
+                } catch (error) {
+                    console.error("Error opening project in new tab:", error);
+                }
+                window.open(`/${projectId}`, "_blank");
+                break;
+            case "rename":
+                setIsRenaming(true);
+                break;
+            case "duplicate":
+                if (handleDuplicateWorkspaceProject) {
+                    setProjectDuplicateData &&
+                        setProjectDuplicateData({
+                            projectId,
+                            projectName,
+                            thumbnail,
+                        });
+                    await handleDuplicateWorkspaceProject(projectId, projectName, thumbnail);
+                } else if (handleDuplicateRecentProject) {
+                    setRecentDuplicateData &&
+                        setRecentDuplicateData({
+                            projectId,
+                            projectName,
+                            thumbnail,
+                        });
+                    await handleDuplicateRecentProject(projectId, projectName, thumbnail);
+                }
+                break;
+            default:
+                break;
+        }
+        setIsKebabOpen(false);
+    };
+
+    OuterClick({
+        contextClassName: ["kebab-wrapper", "kebab-options-wrapper"],
+        setMenuVisible: () => setIsKebabOpen(false),
+    });
+
+    const handleProjectName = async (projectName: string) => {
+        setRenameValue(projectName);
+        if (!projectId) return;
+        try {
+            const projects = await getAllProjects(userId, organization);
+            console.log("projects: ", projects);
+            let projectUuid = projects.Projects.find(
+                (val: any) => val.projectUuid === projectId || val._id === projectId
+            );
+            const updateProjects = {
+                projectId: projectUuid,
+                organization,
+                userId,
+                projectName,
+                thumbnail: undefined,
+            };
+
+            if (projectSocket) {
+                projectSocket.emit("v1:project:update", updateProjects);
+            }
+        } catch (error) { }
+    };
+
+    function getRelativeTime(dateString: string): string {
+        const date = new Date(dateString);
+        const now = new Date();
+        const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+        const intervals: Record<RelativeTimeFormatUnit, number> = {
+            year: 31536000,
+            month: 2592000,
+            week: 604800,
+            day: 86400,
+            hour: 3600,
+            minute: 60,
+            second: 1,
+        };
+
+        const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+        for (const key in intervals) {
+            const unit = key as RelativeTimeFormatUnit;
+            const diff = Math.floor(diffInSeconds / intervals[unit]);
+            if (diff >= 1) {
+                return rtf.format(-diff, unit);
+            }
+        }
+        return "just now";
+    }
+
+    return (
+        <button
+            className="dashboard-card-container"
+            onClick={navigateToProject}
+            title={projectName}
+            onMouseLeave={() => setIsKebabOpen(false)}
+        >
+            <div className="dashboard-card-wrapper">
+                <div className="preview-container">
+                    {thumbnail ? <img src={thumbnail} alt="" /> : <img src={img} alt="" />}
+                </div>
+                <div className="project-details-container" onClick={(e) => { e.stopPropagation() }}>
+                    <div className="project-details">
+                        {isRenaming ? (
+                            <input
+                                value={renameValue}
+                                onChange={(e) => {
+                                    e.stopPropagation();
+                                    handleProjectName(e.target.value);
+                                }}
+                                onBlur={() => {
+                                    setIsRenaming(false);
+                                    setProjectName(renameValue);
+                                }}
+                                onKeyDown={(e) => {
+                                    if (e.key === "Enter") {
+                                        setProjectName(renameValue);
+                                        setIsRenaming(false);
+                                    }
+                                }}
+                                autoFocus
+                            />
+                        ) : (
+                            <span>{renameValue}</span>
+                        )}
+                        {createdAt && (
+                            <div className="project-data">
+                                {active && active == "trash" ? `Trashed by you` : `Edited `}{" "}
+                                {getRelativeTime(createdAt)}
+
+                            </div>
+                        )}
+                    </div>
+                    <div className="users-list-container" ref={kebabRef}>
+                        <div className="user-profile">
+                            {userName ? userName.charAt(0).toUpperCase() : "A"}
+                        </div>
+                        <button
+                            className="kebab-wrapper"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setIsKebabOpen((prev) => !prev);
+                            }}
+                        >
+                            <KebabIcon />
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            {isKebabOpen && active !== "trash" && (
+                <div className="kebab-options-wrapper">
+                    {["rename", "delete", "duplicate", "open in new tab"].map(
+                        (option) => (
+                            <button
+                                key={option}
+                                className="option"
+                                title={""}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleOptionClick(option);
+                                }}
+                            >
+                                {option}
+                            </button>
+                        )
+                    )}
+                </div>
+            )}
+            {isKebabOpen && active && active == "trash" && (
+                <div className="kebab-options-wrapper">
+                    {["restore", "delete"].map((option) => (
+                        <button
+                            key={option}
+                            className="option"
+                            onClick={(e) => {
+                                console.log("option", option);
+                                e.stopPropagation();
+                                handleOptionClick(option);
+                            }}
+                        >
+                            {option}
+                        </button>
+                    ))}
+                </div>
+            )}
+        </button>
+    );
+};
+
+export default DashboardCard;

app/src/components/Dashboard/DashboardHome.tsx

@@ -0,0 +1,168 @@
+import React, { useEffect, useState } from "react";
+import DashboardCard from "./DashboardCard";
+import DashboardNavBar from "./DashboardNavBar";
+import MarketPlaceBanner from "./MarketPlaceBanner";
+import { getUserData } from "./functions/getUserData";
+import { useSocketStore } from "../../store/builder/store";
+import { recentlyViewed } from "../../services/dashboard/recentlyViewed";
+import { searchProject } from "../../services/dashboard/searchProjects";
+import { deleteProject } from "../../services/dashboard/deleteProject";
+import ProjectSocketRes from "./socket/projectSocketRes.dev";
+
+interface Project {
+  _id: string;
+  projectName: string;
+  thumbnail: string;
+  createdBy: string;
+  projectUuid?: string;
+  createdAt: string;
+  isViewed?: string
+}
+
+interface RecentProjectsData {
+  [key: string]: Project[];
+}
+
+const DashboardHome: React.FC = () => {
+  const [recentProjects, setRecentProjects] = useState<RecentProjectsData>({});
+  const [isSearchActive, setIsSearchActive] = useState<boolean>(false);
+  const { userId, organization } = getUserData();
+  const { projectSocket } = useSocketStore();
+  const [recentDuplicateData, setRecentDuplicateData] = useState<Object>({});
+
+
+  const fetchRecentProjects = async () => {
+    try {
+      const projects = await recentlyViewed(organization, userId);
+      console.log("RecentlyViewed: ", projects);
+
+      if (JSON.stringify(projects) !== JSON.stringify(recentProjects)) {
+        setRecentProjects(projects);
+      }
+    } catch (error) {
+      console.error("Error fetching recent projects:", error);
+    }
+  };
+
+  const handleRecentProjectSearch = async (inputValue: string) => {
+    if (!inputValue.trim()) {
+      setIsSearchActive(false);
+      return;
+    }
+    const filterRecentProcess = await searchProject(
+      organization,
+      userId,
+      inputValue
+    );
+    setIsSearchActive(true);
+    setRecentProjects(filterRecentProcess.message ? {} : filterRecentProcess);
+  };
+
+  const handleDeleteProject = async (projectId: any) => {
+    console.log("projectId:delete ", projectId);
+    try {
+      //API for delete project
+      // const deletedProject = await deleteProject(
+      //   projectId,
+      //   userId,
+      //   organization
+      // );
+      // console.log('deletedProject: ', deletedProject);
+
+      //socket for delete Project
+      const deleteProject = {
+        projectId,
+        organization,
+        userId,
+      };
+
+      if (projectSocket) {
+        projectSocket.emit("v1:project:delete", deleteProject);
+      }
+
+      setRecentProjects((prevDiscardedProjects: RecentProjectsData) => {
+        if (!Array.isArray(prevDiscardedProjects?.RecentlyViewed)) {
+          return prevDiscardedProjects;
+        }
+        const updatedProjectDatas = prevDiscardedProjects.RecentlyViewed.filter(
+          (project) => project._id !== projectId
+        );
+        return {
+          ...prevDiscardedProjects,
+          RecentlyViewed: updatedProjectDatas,
+        };
+      });
+      setIsSearchActive(false);
+    } catch (error) {
+      console.error("Error deleting project:", error);
+    }
+  };
+
+  const handleDuplicateRecentProject = async (
+    projectId: string,
+    projectName: string,
+    thumbnail: string
+  ) => {
+    const duplicateRecentProjectData = {
+      userId,
+      thumbnail,
+      organization,
+      projectUuid: projectId,
+      projectName,
+    };
+    projectSocket.emit("v1:project:Duplicate", duplicateRecentProjectData);
+  };
+
+  const renderProjects = () => {
+    const projectList = recentProjects[Object.keys(recentProjects)[0]];
+
+    console.log('projectList: ', projectList);
+    if (!projectList?.length) {
+      return <div className="empty-state">No recent projects found</div>;
+    }
+
+    return (
+      projectList &&
+      projectList.map((project) => (
+        <DashboardCard
+          key={project._id}
+          projectName={project.projectName}
+          thumbnail={project.thumbnail}
+          projectId={project._id}
+          createdAt={project.isViewed}
+          handleDeleteProject={handleDeleteProject}
+          handleDuplicateRecentProject={handleDuplicateRecentProject}
+          setRecentDuplicateData={setRecentDuplicateData}
+        />
+      ))
+    );
+  };
+
+  useEffect(() => {
+    if (!isSearchActive) {
+      fetchRecentProjects();
+    }
+  }, [isSearchActive]);
+
+  return (
+    <div className="dashboard-home-container">
+      <DashboardNavBar
+        page="home"
+        handleRecentProjectSearch={handleRecentProjectSearch}
+      />
+      <MarketPlaceBanner />
+      <div className="container">
+        <h2 className="section-header">Recents</h2>
+        <div className="cards-container">{renderProjects()}</div>
+      </div>
+      {recentDuplicateData && Object.keys(recentDuplicateData).length > 0 && (
+        <ProjectSocketRes
+          setIsSearchActive={setIsSearchActive}
+          setRecentProjects={setRecentProjects}
+        />
+      )}
+    </div>
+  );
+};
+
+export default DashboardHome;

app/src/components/Dashboard/DashboardNavBar.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import Search from "../ui/inputs/Search";
+import { CartIcon } from "../icons/ExportModuleIcons";
+
+interface DashboardNavBarProps {
+  page: React.ReactNode;
+  handleProjectsSearch?: (inputValue: string) => Promise<void>;
+  handleTrashSearch?: (inputValue: string) => Promise<void>;
+  handleRecentProjectSearch?: (inputValue: string) => Promise<void>;
+}
+
+const DashboardNavBar: React.FC<DashboardNavBarProps> = ({
+  page,
+  handleProjectsSearch,
+  handleTrashSearch,
+  handleRecentProjectSearch,
+}) => {
+  const handleSearch = async (inputValue: string) => {
+    try {
+      if (handleProjectsSearch) {
+        await handleProjectsSearch(inputValue);
+      } else if (handleTrashSearch) {
+        await handleTrashSearch(inputValue);
+      } else if (handleRecentProjectSearch) {
+        await handleRecentProjectSearch(inputValue);
+      }
+    } catch (error) {
+      console.error("Search failed:", error);
+    }
+  };
+
+  return (
+    <div className="dashboard-navbar-container">
+      <div className="title">{page}</div>
+      <div className="market-place-button">
+        <CartIcon isActive /> Market Place
+      </div>
+      <Search onChange={handleSearch} />
+    </div>
+  );
+};
+
+export default DashboardNavBar;

app/src/components/Dashboard/DashboardProjects.tsx

@@ -0,0 +1,185 @@
+import React, { useEffect, useState } from "react";
+import DashboardNavBar from "./DashboardNavBar";
+import DashboardCard from "./DashboardCard";
+import { getUserData } from "./functions/getUserData";
+import { useSocketStore } from "../../store/builder/store";
+import { getAllProjects } from "../../services/dashboard/getAllProjects";
+import { searchProject } from "../../services/dashboard/searchProjects";
+import { deleteProject } from "../../services/dashboard/deleteProject";
+import ProjectSocketRes from "./socket/projectSocketRes.dev";
+
+interface Project {
+  _id: string;
+  projectName: string;
+  thumbnail: string;
+  createdBy: string;
+  projectUuid?: string;
+  createdAt: string;
+}
+
+interface WorkspaceProjects {
+  [key: string]: Project[];
+}
+
+const DashboardProjects: React.FC = () => {
+  const [workspaceProjects, setWorkspaceProjects] = useState<WorkspaceProjects>(
+    {}
+  );
+  const [projectDuplicateData, setProjectDuplicateData] = useState<Object>({});
+  const [isSearchActive, setIsSearchActive] = useState<boolean>(false);
+  const [activeFolder, setActiveFolder] = useState<string>("myProjects");
+  const { projectSocket } = useSocketStore();
+  const { userId, organization } = getUserData();
+
+  const fetchAllProjects = async () => {
+    try {
+      const projects = await getAllProjects(userId, organization);
+
+      if (JSON.stringify(projects) !== JSON.stringify(workspaceProjects)) {
+        setWorkspaceProjects(projects);
+      }
+    } catch (error) {
+      console.error("Error fetching projects:", error);
+    }
+  };
+
+  const handleProjectsSearch = async (inputValue: string) => {
+    if (!inputValue.trim()) {
+      setIsSearchActive(false);
+      return;
+    }
+    if (!setWorkspaceProjects || !setIsSearchActive) return;
+
+    const searchedProject = await searchProject(organization, userId, inputValue);
+    setIsSearchActive(true);
+    setWorkspaceProjects(searchedProject.message ? {} : searchedProject);
+  };
+
+  const handleDeleteProject = async (projectId: any) => {
+    try {
+      // const deletedProject = await deleteProject(
+      //   projectId,
+      //   userId,
+      //   organization
+      // );
+      // console.log('deletedProject: ', deletedProject);
+      const deleteProjects = {
+        projectId,
+        organization: organization,
+        userId,
+      };
+
+      //socket for deleting the project
+      if (projectSocket) {
+        projectSocket.emit("v1:project:delete", deleteProjects);
+      } else {
+        console.error("Socket is not connected.");
+      }
+      setWorkspaceProjects((prevDiscardedProjects: WorkspaceProjects) => {
+        if (!Array.isArray(prevDiscardedProjects?.Projects)) {
+          return prevDiscardedProjects;
+        }
+        const updatedProjectDatas = prevDiscardedProjects.Projects.filter(
+          (project) => project._id !== projectId
+        );
+        return {
+          ...prevDiscardedProjects,
+          Projects: updatedProjectDatas,
+        };
+      });
+      setIsSearchActive(false);
+    } catch (error) {
+      console.error("Error deleting project:", error);
+    }
+  };
+
+  const handleDuplicateWorkspaceProject = async (
+    projectId: string,
+    projectName: string,
+    thumbnail: string
+  ) => {
+    // await handleDuplicateProjects({
+    //   userId,
+    //   organization,
+    //   projectId,
+    //   projectName,
+    //   projectSocket,
+    //   thumbnail,
+    //   setWorkspaceProjects,
+    //   setIsSearchActive
+    // });
+    const duplicateProjectData = {
+      userId,
+      thumbnail,
+      organization,
+      projectUuid: projectId,
+      projectName,
+    };
+    projectSocket.emit("v1:project:Duplicate", duplicateProjectData);
+  };
+
+  const renderProjects = () => {
+    if (activeFolder !== "myProjects") return null;
+
+    const projectList = workspaceProjects[Object.keys(workspaceProjects)[0]];
+
+    if (!projectList?.length) {
+      return <div className="empty-state">No projects found</div>;
+    }
+
+    return projectList.map((project) => (
+      <DashboardCard
+        key={project._id}
+        projectName={project.projectName}
+        thumbnail={project.thumbnail}
+        projectId={project._id}
+        createdAt={project.createdAt}
+        handleDeleteProject={handleDeleteProject}
+        setIsSearchActive={setIsSearchActive}
+        handleDuplicateWorkspaceProject={handleDuplicateWorkspaceProject}
+        setProjectDuplicateData={setProjectDuplicateData}
+      />
+    ));
+  };
+
+  useEffect(() => {
+    if (!isSearchActive) {
+      fetchAllProjects();
+    }
+  }, [isSearchActive]);
+
+  return (
+    <div className="dashboard-home-container">
+      <DashboardNavBar
+        page="projects"
+        handleProjectsSearch={handleProjectsSearch}
+      />
+
+      <div className="container" style={{ height: "calc(100% - 87px)" }}>
+        <div className="header-wrapper" style={{ display: "flex", gap: "7px" }}>
+          <button
+            className={`header ${activeFolder === "myProjects" && "active"}`}
+            onClick={() => setActiveFolder("myProjects")}
+          >
+            My Projects
+          </button>
+          <button
+            className={`header ${activeFolder === "shared" && "active"}`}
+            onClick={() => setActiveFolder("shared")}
+          >
+            Shared with me
+          </button>
+        </div>
+        <div className="cards-container">{renderProjects()}</div>
+        {projectDuplicateData && Object.keys(projectDuplicateData).length > 0 && (
+          <ProjectSocketRes
+            setIsSearchActive={setIsSearchActive}
+            setWorkspaceProjects={setWorkspaceProjects}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DashboardProjects;

app/src/components/Dashboard/DashboardTrash.tsx

@@ -0,0 +1,160 @@
+import React, { useEffect, useState } from "react";
+import DashboardCard from "./DashboardCard";
+import DashboardNavBar from "./DashboardNavBar";
+import { getUserData } from "./functions/getUserData";
+import { trashSearchProject } from "../../services/dashboard/trashSearchProject";
+import { restoreTrash } from "../../services/dashboard/restoreTrash";
+import { getTrash } from "../../services/dashboard/getTrash";
+import { deleteTrash } from "../../services/dashboard/deleteTrash";
+import { useSocketStore } from "../../store/builder/store";
+
+interface Project {
+  _id: string;
+  projectName: string;
+  thumbnail: string;
+  createdBy: string;
+  projectUuid?: string;
+  DeletedAt: string;
+}
+
+interface DiscardedProjects {
+  [key: string]: Project[];
+}
+
+const DashboardTrash: React.FC = () => {
+  const [discardedProjects, setDiscardedProjects] = useState<DiscardedProjects>(
+    {}
+  );
+  const [isSearchActive, setIsSearchActive] = useState(false);
+  const { userId, organization } = getUserData();
+  const { projectSocket } = useSocketStore();
+
+  const fetchTrashProjects = async () => {
+    try {
+      const projects = await getTrash(organization);
+
+      if (JSON.stringify(projects) !== JSON.stringify(discardedProjects)) {
+        setDiscardedProjects(projects);
+      }
+    } catch (error) {
+      console.error("Error fetching trash projects:", error);
+    }
+  };
+
+  const handleTrashSearch = async (inputValue: string) => {
+    if (!inputValue.trim()) {
+      setIsSearchActive(false);
+      return;
+    }
+    if (!setDiscardedProjects || !setIsSearchActive) return;
+
+    const filterTrashedProcess = await trashSearchProject(
+      organization,
+      userId,
+      inputValue
+    );
+    setIsSearchActive(true);
+    setDiscardedProjects(
+      filterTrashedProcess.message ? {} : filterTrashedProcess
+    );
+  };
+
+  const handleRestoreProject = async (projectId: any) => {
+    console.log("projectId: ", projectId);
+    try {
+      const restoreProject = await restoreTrash(organization, projectId);
+      // console.log('restoreProject: ', restoreProject);
+
+      setDiscardedProjects((prevDiscardedProjects: DiscardedProjects) => {
+        // Check if TrashDatas exists and is an array
+        if (!Array.isArray(prevDiscardedProjects?.TrashDatas)) {
+          console.error("TrashDatas is not an array", prevDiscardedProjects);
+          return prevDiscardedProjects;
+        }
+        const updatedTrashDatas = prevDiscardedProjects.TrashDatas.filter(
+          (project) => project._id !== projectId
+        );
+        return {
+          ...prevDiscardedProjects,
+          TrashDatas: updatedTrashDatas,
+        };
+      });
+      setIsSearchActive(false);
+    } catch (error) {
+      console.error("Error deleting project:", error);
+    }
+  };
+
+  const handleTrashDeleteProject = async (projectId: any) => {
+    try {
+      // const deletedProject = await deleteTrash(
+      //   organization, projectId
+      // );
+
+      const deleteProjectTrash = {
+        projectId,
+        organization,
+        userId,
+      };
+      if (projectSocket) {
+        projectSocket.emit("v1:trash:delete", deleteProjectTrash);
+      }
+      setDiscardedProjects((prevDiscardedProjects: DiscardedProjects) => {
+        if (!Array.isArray(prevDiscardedProjects?.TrashDatas)) {
+          return prevDiscardedProjects;
+        }
+        const updatedProjectDatas = prevDiscardedProjects.TrashDatas.filter(
+          (project) => project._id !== projectId
+        );
+        // console.log('updatedProjectDatas: ', updatedProjectDatas);
+        return {
+          ...prevDiscardedProjects,
+          TrashDatas: updatedProjectDatas,
+        };
+      });
+      setIsSearchActive(false);
+    } catch (error) {
+      console.error("Error deleting project:", error);
+    }
+  };
+
+  const renderTrashProjects = () => {
+    const projectList = discardedProjects[Object.keys(discardedProjects)[0]];
+
+    if (!projectList?.length) {
+      return <div className="empty-state">No deleted projects found</div>;
+    }
+
+    return projectList.map((project) => (
+      <DashboardCard
+        key={project._id}
+        projectName={project.projectName}
+        thumbnail={project.thumbnail}
+        projectId={project._id}
+        handleRestoreProject={handleRestoreProject}
+        handleTrashDeleteProject={handleTrashDeleteProject}
+        active={"trash"}
+        createdAt={project.DeletedAt}
+      />
+    ));
+  };
+
+  useEffect(() => {
+    if (!isSearchActive) {
+      fetchTrashProjects();
+    }
+  }, [isSearchActive]);
+
+  return (
+    <div className="dashboard-home-container">
+      <DashboardNavBar page="trash" handleTrashSearch={handleTrashSearch} />
+
+      <div className="container" style={{ height: "calc(100% - 87px)" }}>
+        <div className="header" style={{ display: "flex", gap: "7px" }}></div>
+        <div className="cards-container">{renderTrashProjects()}</div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardTrash;

app/src/components/Dashboard/DashboardTutorial.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import DashboardNavBar from './DashboardNavBar';
+import DashboardCard from './DashboardCard';
+import { projectTutorial } from '../../services/dashboard/projectTutorial';
+interface Project {
+    _id: string;
+    projectName: string;
+    thumbnail: string;
+    createdBy: string;
+    projectUuid?: string;
+}
+
+interface DiscardedProjects {
+    [key: string]: Project[];
+}
+
+const DashboardTutorial = () => {
+    const [tutorialProject, setTutorialProject] = useState<DiscardedProjects>({})
+    const handleIcon = async () => {
+        try {
+            let tutorial = await projectTutorial()
+            setTutorialProject(tutorial)
+        } catch {
+
+        }
+    }
+    useEffect(() => {
+        handleIcon()
+    }, [])
+    const renderTrashProjects = () => {
+        const projectList = tutorialProject[Object.keys(tutorialProject)[0]];
+
+        if (!projectList?.length) {
+            return <div className="empty-state">No deleted projects found</div>;
+        }
+
+        return projectList.map((tutorials: any) => (
+            <DashboardCard
+                key={tutorials._id}
+                projectName={tutorials.projectName}
+                thumbnail={tutorials.thumbnail}
+                projectId={tutorials._id}
+            />
+        ));
+    };
+    return (
+        <div className="dashboard-home-container">
+            <DashboardNavBar
+                page="tutorial"
+            />
+
+            <div className="container" style={{ height: "calc(100% - 87px)" }}>
+                <div className="header" style={{ display: 'flex', gap: '7px' }}></div>
+                <div className="cards-container">
+                    {renderTrashProjects()}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default DashboardTutorial;

app/src/components/Dashboard/MarketPlaceBanner.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import banner from "../../assets/image/banner.png";
+
+const MarketPlaceBanner = () => {
+  return (
+    <div className="market-place-banner-container">
+      {/* market place banner */}
+      <img src={banner} alt="" />
+      <div className="hero-text">
+        NEW
+        <br /> FALL
+        <br /> COLLECTION
+      </div>
+      <div className="context">Unlock Creativity with Premium 3D Assets!</div>
+      <div className="arrow-context">
+        <svg
+          width="169"
+          height="120"
+          viewBox="0 0 169 120"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111"
+            stroke="white"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M10.662 118.326L1.59439 111.524L9.47334 103.374"
+            stroke="white"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </div>
+      <div className="explore-button">Explore Now</div>
+    </div>
+  );
+};
+
+export default MarketPlaceBanner;

app/src/components/Dashboard/SidePannel.tsx

@@ -0,0 +1,180 @@
+import React from "react";
+import {
+  DocumentationIcon,
+  HelpIcon,
+  HomeIcon,
+  LogoutIcon,
+  NotificationIcon,
+  ProjectsIcon,
+  TutorialsIcon,
+} from "../icons/DashboardIcon";
+import { useNavigate } from "react-router-dom";
+import darkThemeImage from "../../assets/image/darkThemeProject.png";
+import lightThemeImage from "../../assets/image/lightThemeProject.png";
+import { SettingsIcon, TrashIcon } from "../icons/ExportCommonIcons";
+import { getUserData } from "./functions/getUserData";
+import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
+import { createProject } from "../../services/dashboard/createProject";
+
+interface SidePannelProps {
+  setActiveTab: React.Dispatch<React.SetStateAction<string>>;
+  activeTab: string;
+}
+
+const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
+  const { email, userName, userId, organization } = getUserData();
+  const navigate = useNavigate();
+  const { setLoadingProgress } = useLoadingProgress();
+  const { projectSocket } = useSocketStore();
+  const savedTheme = localStorage.getItem("theme") ?? "light";
+
+  function generateProjectId() {
+    const randomBytes = new Uint8Array(12);
+    crypto.getRandomValues(randomBytes);
+    return Array.from(randomBytes, (byte) =>
+      byte.toString(16).padStart(2, "0")
+    ).join("");
+  }
+
+  const handleCreateNewProject = async () => {
+    const token = localStorage.getItem("token");
+    try {
+      const projectId = generateProjectId();
+      useSocketStore.getState().initializeSocket(email, organization, token);
+
+   
+      //API for creating new Project
+      // const project = await createProject(
+      //   projectId,
+      //   userId,
+      //   savedTheme === "dark" ? darkThemeImage : lightThemeImage,
+      //   organization
+      // );
+      // console.log('Created project: ', project);
+      const addProject = {
+        userId,
+        thumbnail: savedTheme === "dark" ? darkThemeImage : lightThemeImage,
+        organization: organization,
+        projectUuid: projectId,
+      };
+      console.log("projectSocket: ", projectSocket);
+      if (projectSocket) {
+        // console.log('addProject: ', addProject);
+        const handleResponse = (data: any) => {
+          console.log('Project add response:', data);
+          if (data.message === "Project created successfully") {
+            setLoadingProgress(1)
+            navigate(`/${data.data.projectId}`);
+          }
+          projectSocket.off("v1-project:response:add", handleResponse); // Clean up
+        };
+        projectSocket.on("v1-project:response:add", handleResponse);
+
+        console.log('addProject: ', addProject);
+        projectSocket.emit("v1:project:add", addProject);
+      } else {
+        console.error("Socket is not connected.");
+      }
+    } catch (error) {
+      console.error("Error creating project:", error);
+    }
+  };
+
+  return (
+    <div className="side-pannel-container">
+      <div className="side-pannel-header">
+        <div className="user-container">
+          <div className="user-profile">
+            {userName?.charAt(0).toUpperCase()}
+          </div>
+          <div className="user-name">
+            {userName
+              ? userName.charAt(0).toUpperCase() + userName.slice(1).toLowerCase()
+              : "Anonymous"}
+          </div>
+        </div>
+        <div className="notifications-container">
+          <NotificationIcon />
+        </div>
+      </div>
+      <div
+        className="new-project-button"
+        style={{ cursor: "pointer" }}
+        onClick={handleCreateNewProject}
+      >
+        + New project
+      </div>
+      <div className="side-bar-content-container">
+        <div className="side-bar-options-container">
+          <div
+            className={
+              activeTab === "Home" ? "option-list active" : "option-list"
+            }
+            onClick={() => setActiveTab("Home")}
+          >
+            <HomeIcon />
+            Home
+          </div>
+          <div
+            className={
+              activeTab === "Projects" ? "option-list active" : "option-list"
+            }
+            title="Projects"
+            onClick={() => setActiveTab("Projects")}
+          >
+            <ProjectsIcon />
+            Projects
+          </div>
+          <div
+            className={
+              activeTab === "Trash" ? "option-list active" : "option-list"
+            }
+            title="Trash"
+            onClick={() => setActiveTab("Trash")}
+          >
+            <TrashIcon />
+            Trash
+          </div>
+          <div
+            className={
+              activeTab === "Tutorials" ? "option-list active" : "option-list"
+            }
+            title="coming soon"
+            onClick={() => setActiveTab("Tutorials")}
+          >
+            <TutorialsIcon />
+            Tutorials
+          </div>
+          <div
+            className={
+              activeTab === "Documentation"
+                ? "option-list active"
+                : "option-list"
+            }
+            title="coming soon"
+            onClick={() => setActiveTab("Documentation")}
+          >
+            <DocumentationIcon />
+            Documentation
+          </div>
+        </div>
+        <div className="side-bar-options-container" title="coming soon">
+          <div className="option-list">
+            <SettingsIcon />
+            Settings
+          </div>
+          <div className="option-list" style={{ cursor: "pointer" }}>
+            <LogoutIcon />
+            Log out
+          </div>
+          <div className="option-list">
+            <HelpIcon />
+            Help & Feedback
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SidePannel;

app/src/components/Dashboard/functions/getUserData.ts

@@ -0,0 +1,36 @@
+interface UserData {
+  email: string;
+  userId: string;
+  userName?: string; // Optional
+  organization: string;
+}
+
+export const getUserData = (): UserData => {
+  const email = localStorage.getItem("email");
+  const userId = localStorage.getItem("userId");
+  const userName = localStorage.getItem("userName");
+
+  if (!email || !userId) {
+    return {
+      email: '',
+      userId: '',
+      userName: '',
+      organization: '',
+    };
+  }
+
+  const [_, emailDomain] = email.split("@");
+
+  if (!emailDomain) {
+    throw new Error("Invalid email format");
+  }
+
+  const [organization] = emailDomain.split(".");
+
+  return {
+    email: email,
+    userId: userId,
+    userName: userName ?? undefined,
+    organization,
+  };
+};

app/src/components/Dashboard/socket/projectSocketRes.dev.tsx

@@ -0,0 +1,89 @@
+
+import React, { useEffect } from 'react';
+import { useSocketStore } from '../../../store/builder/store';
+import { getUserData } from '../functions/getUserData';
+import { getAllProjects } from '../../../services/dashboard/getAllProjects';
+import { recentlyViewed } from '../../../services/dashboard/recentlyViewed';
+
+interface Project {
+    _id: string;
+    projectName: string;
+    thumbnail: string;
+    createdBy: string;
+    projectUuid?: string;
+    createdAt: string;
+    isViewed?: string
+}
+
+interface ProjectsData {
+    [key: string]: Project[];
+}
+interface ProjectSocketResProps {
+    setRecentProjects?: React.Dispatch<React.SetStateAction<ProjectsData>>;
+    setWorkspaceProjects?: React.Dispatch<React.SetStateAction<ProjectsData>>;
+    setIsSearchActive?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const ProjectSocketRes = ({
+    setRecentProjects,
+    setWorkspaceProjects,
+    setIsSearchActive,
+}: ProjectSocketResProps) => {
+    const { projectSocket } = useSocketStore();
+    const { userId, organization } = getUserData();
+
+    useEffect(() => {
+        if (!projectSocket) return;
+
+        const handleAdd = (data: any) => {
+            // console.log('Add:', data);
+        };
+
+        const handleDelete = (data: any) => {
+            // console.log('Delete:', data);
+        };
+
+        const handleUpdate = (data: any) => {
+            // console.log('Update:', data);
+        };
+
+        const handleTrashDelete = (data: any) => {
+            // console.log('Trash Delete:', data);
+        };
+
+        const handleDuplicate = async (data: any) => {
+            console.log("Project duplicate response:", data);
+            if (data?.message === "Project Duplicated successfully") {
+                if (setWorkspaceProjects) {
+                    const allProjects = await getAllProjects(userId, organization);
+                    console.log('allProjects: ', allProjects);
+                    setWorkspaceProjects(allProjects);
+                } else if (setRecentProjects) {
+                    const recentProjects = await recentlyViewed(organization, userId);
+                    setRecentProjects && setRecentProjects(recentProjects);
+                }
+                setIsSearchActive && setIsSearchActive(false);
+            } else {
+                console.warn("Duplication failed or unexpected response.");
+            }
+        };
+
+        projectSocket.on("v1-project:response:add", handleAdd);
+        projectSocket.on("v1-project:response:delete", handleDelete);
+        projectSocket.on("v1-project:response:update", handleUpdate);
+        projectSocket.on("v1-project:response:Duplicate", handleDuplicate);
+        projectSocket.on("v1:trash:response:delete", handleTrashDelete);
+
+        return () => {
+            projectSocket.off("v1-project:response:add", handleAdd);
+            projectSocket.off("v1-project:response:delete", handleDelete);
+            projectSocket.off("v1-project:response:update", handleUpdate);
+            projectSocket.off("v1-project:response:Duplicate", handleDuplicate);
+            projectSocket.off("v1:trash:response:delete", handleTrashDelete);
+        };
+    }, [projectSocket, userId, organization]);
+
+    return null;
+};
+
+export default ProjectSocketRes;

app/src/components/footer/Footer.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { HelpIcon } from "../icons/DashboardIcon";
+import { useLogger } from "../ui/log/LoggerContext";
+import { GetLogIcon } from "./getLogIcons";
+import {
+  CurserLeftIcon,
+  CurserMiddleIcon,
+  CurserRightIcon,
+} from "../icons/LogIcons";
+import ShortcutHelper from "./shortcutHelper";
+import { useShortcutStore } from "../../store/builder/store";
+import { usePlayButtonStore } from "../../store/usePlayButtonStore";
+
+const Footer: React.FC = () => {
+  const { logs, setIsLogListVisible } = useLogger();
+  const lastLog = logs.length > 0 ? logs[logs.length - 1] : null;
+
+  const { isPlaying } = usePlayButtonStore();
+  const { showShortcuts, setShowShortcuts } = useShortcutStore();
+
+  return (
+    <div className="footer-container">
+      <div className="footer-wrapper">
+        <div className="selection-wrapper">
+          <div className="selector-wrapper">
+            <div className="icon">
+              <CurserLeftIcon />
+            </div>
+            <div className="selector">Selection</div>
+          </div>
+          <div className="selector-wrapper">
+            <div className="icon">
+              <CurserMiddleIcon />
+            </div>
+            <div className="selector">Rotate/Zoom</div>
+          </div>
+          <div className="selector-wrapper">
+            <div className="icon">
+              <CurserRightIcon />
+            </div>
+            <div className="selector">Pan/Context Menu</div>
+          </div>
+        </div>
+
+        <div className="logs-wrapper">
+          <div className="bg-dummy left-top"></div>
+          <div className="bg-dummy right-bottom"></div>
+          <div className="log-container">
+            <button
+              id="log-details-buttton"
+              className={`logs-detail ${lastLog ? lastLog.type : ""}`}
+              onClick={() => setIsLogListVisible(true)}
+            >
+              {lastLog ? (
+                <>
+                  <span className="log-icon">{GetLogIcon(lastLog.type)}</span>
+                  <span className="log-message">{lastLog.message}</span>
+                </>
+              ) : (
+                "There are no logs to display at the moment."
+              )}
+            </button>
+          </div>
+          <div className="version">
+            V 0.01
+            <div className="icon">
+              <HelpIcon />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {!isPlaying && (
+        <div
+          className={`shortcut-helper-overlay ${
+            showShortcuts ? "visible" : ""
+          }`}
+        >
+          <ShortcutHelper setShowShortcuts={setShowShortcuts}/>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Footer;

app/src/components/footer/getLogIcons.tsx

@@ -0,0 +1,19 @@
+import { ErrorIcon, LogIcon, LogInfoIcon, SucessIcon, WarningIcon } from "../icons/LogIcons";
+import { LogType } from "../ui/log/LoggerContext";
+
+export const GetLogIcon = (type: LogType): JSX.Element => {
+  switch (type) {
+    case "info":
+      return <LogInfoIcon />;
+    case "log":
+      return <LogIcon />;
+    case "error":
+      return <ErrorIcon />;
+    case "warning":
+      return <WarningIcon />;
+    case "success":
+      return <SucessIcon />;
+    default:
+      return <LogIcon />;
+  }
+};

app/src/components/footer/shortcutHelper.tsx

@@ -0,0 +1,352 @@
+import React from "react";
+
+import {
+  UndoIcon,
+  RedoIcon,
+  ESCIcon,
+  HelpIcon,
+  FindIcon,
+  InfoIcon,
+  CurserIcon,
+  DeleteIcon,
+  FreeHandIcon,
+  MeasurementToolIcon,
+  WallToolIcon,
+  ZoneToolIcon,
+  AisleToolIcon,
+  FloorToolIcon,
+  MoveIcon,
+  RotateIcon,
+  ToogleViewIcon,
+  UIVisiblityIcon,
+  FirstPersonViewIcon,
+  BuilderIcon,
+  SimulationIcon,
+  VisualizationIcon,
+  MarketplaceIcon,
+  CopyIcon,
+  PasteIcon,
+  DublicateIcon,
+  DuplicateInstanceIcon,
+  PlayIcon,
+} from "../icons/ShortcutIcons";
+import { CloseIcon, EyeCloseIcon } from "../icons/ExportCommonIcons";
+
+interface ShortcutItem {
+  keys: string[];
+  name?: string;
+  description: string;
+  icon: any;
+}
+
+interface ShortcutGroup {
+  category: string;
+  items: ShortcutItem[];
+}
+
+interface ShortcutHelperProps {
+  setShowShortcuts: (value: boolean) => void;
+}
+
+const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
+  setShowShortcuts,
+}) => {
+  const shortcuts: ShortcutGroup[] = [
+    // Essential
+    {
+      category: "Essential",
+      items: [
+        {
+          keys: ["CTRL", "+", "Z"],
+          name: "Undo",
+          description: "Undo Last action",
+          icon: <UndoIcon />,
+        },
+        {
+          keys: ["CTRL", "+", "Y"],
+          name: "Redo",
+          description: "Redo Last action",
+          icon: <RedoIcon />,
+        },
+        {
+          keys: ["ESC"],
+          name: "Escape",
+          description: "Reset to Cursor & Stop Playback",
+          icon: <ESCIcon />,
+        },
+        {
+          keys: ["CTRL", "+", "H"],
+          name: "Help",
+          description: "Open Help",
+          icon: <HelpIcon />,
+        },
+        {
+          keys: ["CTRL", "+", "F"],
+          name: "Find",
+          description: "Find / Search Functionality",
+          icon: <FindIcon />,
+        },
+        {
+          keys: ["CTRL", "+", "SHIFT", "+", "?"],
+          name: "Info",
+          description: "Show Shortcut Info",
+          icon: <InfoIcon />,
+        },
+        {
+          keys: ["L"],
+          name: "Log",
+          description: "Show Log list",
+          icon: <InfoIcon />,
+        },
+      ],
+    },
+    // Tools
+    {
+      category: "Tools",
+      items: [
+        {
+          keys: ["V"],
+          name: "Cursor Tool",
+          description: "Activate Cursor tool",
+          icon: <CurserIcon />,
+        },
+        {
+          keys: ["X"],
+          name: "Delete Tool",
+          description: "Activate Delete tool",
+          icon: <DeleteIcon />,
+        },
+        {
+          keys: ["H"],
+          name: "Freehand Tool",
+          description: "Activate Free-Hand tool",
+          icon: <FreeHandIcon />,
+        },
+        {
+          keys: ["M"],
+          name: "Measurement Tool",
+          description: "Activate Measurement tool",
+          icon: <MeasurementToolIcon />,
+        },
+        {
+          keys: ["Q", "OR", "6"],
+          name: "Wall Tool",
+          description: "Select Wall floor tool (2D)",
+          icon: <WallToolIcon />,
+        },
+        {
+          keys: ["E", "OR", "8"],
+          name: "Zone Tool",
+          description: "Select Draw zone tool (2D)",
+          icon: <ZoneToolIcon />,
+        },
+        {
+          keys: ["R", "OR", "7"],
+          name: "Aisle Tool",
+          description: "Select Aisle floor tool (2D)",
+          icon: <AisleToolIcon />,
+        },
+        {
+          keys: ["T", "OR", "9"],
+          name: "Floor Tool",
+          description: "Select Draw floor tool (2D)",
+          icon: <FloorToolIcon />,
+        },
+        {
+          keys: ["G"],
+          name: "Move Asset",
+          description: "Move Selected Asset",
+          icon: <MoveIcon />,
+        },
+        {
+          keys: ["R"],
+          name: "Rotate Asset",
+          description: "Rotate Selected Asset",
+          icon: <RotateIcon />,
+        },
+      ],
+    },
+    // View & Navigation
+    {
+      category: "View & Navigation",
+      items: [
+        {
+          keys: ["TAB"],
+          name: "Toggle View",
+          description: "Toggle between 2D & 3D views (Builder)",
+          icon: <ToogleViewIcon />,
+        },
+        {
+          keys: ["CTRL", "+", "\\"],
+          name: "Toggle UI",
+          description: "Toggle UI Visibility",
+          icon: <UIVisiblityIcon />,
+        },
+        {
+          keys: ["CTRL", "+", "["],
+          name: "Toggle UI",
+          description: "Left Sidebar Visibility",
+          icon: <UIVisiblityIcon />,
+        },
+        {
+          keys: ["CTRL", "+", "]"],
+          name: "Toggle UI",
+          description: "Right Sidebar Visibility",
+          icon: <UIVisiblityIcon />,
+        },
+        {
+          keys: ["/"],
+          name: "First Person View",
+          description: "Switch to First-person View",
+          icon: <FirstPersonViewIcon />,
+        },
+      ],
+    },
+    // Module Switching
+    {
+      category: "Module Switching",
+      items: [
+        {
+          keys: ["1"],
+          name: "Builder",
+          description: "Switch to Builder module",
+          icon: <BuilderIcon />,
+        },
+        {
+          keys: ["2"],
+          name: "Simulation",
+          description: "Switch to Simulation module",
+          icon: <SimulationIcon />,
+        },
+        {
+          keys: ["3"],
+          name: "Visualization",
+          description: "Switch to Visualization module",
+          icon: <VisualizationIcon />,
+        },
+        {
+          keys: ["4"],
+          name: "Marketplace",
+          description: "Switch to Marketplace module",
+          icon: <MarketplaceIcon />,
+        },
+      ],
+    },
+    // Selection
+    {
+      category: "Selection",
+      items: [
+        {
+          keys: ["CTRL", "+", "C"],
+          name: "Copy",
+          description: "Copy an Asset",
+          icon: <CopyIcon />,
+        },
+        {
+          keys: ["CTRL", "+", "V"],
+          name: "Paste",
+          description: "Paste an Asset",
+          icon: <PasteIcon />,
+        },
+        {
+          keys: ["CTRL", "+", "D"],
+          name: "Duplicate",
+          description: "Duplicate an Asset",
+          icon: <DublicateIcon />,
+        },
+        {
+          keys: ["ALT", "+", "D"],
+          name: "Duplicate (Instance)",
+          description: "Duplicate an Instanced Asset",
+          icon: <DuplicateInstanceIcon />,
+        },
+      ],
+    },
+    // Simulation
+    {
+      category: "Simulation",
+      items: [
+        {
+          keys: ["CTRL", "+", "P"],
+          name: "Play",
+          description: "Play Simulation",
+          icon: <PlayIcon />,
+        },
+        {
+          keys: ["H"],
+          name: "Hide Player",
+          description: "Hide Simulation Player",
+          icon: <EyeCloseIcon />,
+        },
+      ],
+    },
+  ];
+
+  const [activeCategory, setActiveCategory] =
+    React.useState<string>("Essential");
+
+  const activeShortcuts =
+    shortcuts.find((group) => group.category === activeCategory)?.items ?? [];
+
+  return (
+    <div className="shortcut-helper-container">
+      <button
+        id="close-shortcuts-helper"
+        className="close-button"
+        title="close-btn"
+        onClick={() => {
+          setShowShortcuts(false);
+        }}
+      >
+        <CloseIcon />
+      </button>
+      <div className="header">
+        <div className="header-wrapper">
+          {shortcuts.map((group) => (
+            <button
+              id={group.category}
+              key={group.category}
+              onClick={() => setActiveCategory(group.category)}
+              className={activeCategory === group.category ? "active" : ""}
+            >
+              {group.category}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div
+        className={`shortcut-wrapper ${
+          activeShortcuts.length === 1 ? "single-item" : ""
+        }`}
+      >
+        {activeShortcuts.map((item) => (
+          <div
+            key={`${item.name}-${item.keys.join("")}`}
+            className="shortcut-item"
+          >
+            <div className="shortcut-intro">
+              <div className="icon">{item.icon}</div>
+              <div className="value-wrapper">
+                <div className="name">{item.name}</div>
+                <div className="description">{item.description}</div>
+              </div>
+            </div>
+            <div className="keys">
+              {item.keys.map((key, i) => (
+                <span
+                  key={`${key}-${i}`}
+                  className={`key${key === "+" || key === "OR" ? " add" : ""}`}
+                >
+                  {key}
+                </span>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ShortcutHelper;

app/src/components/icons/3dChartIcons.tsx

@@ -0,0 +1,181 @@
+export function ThroughputIcon() {
+  return (
+    <svg
+      width="19"
+      height="18"
+      viewBox="0 0 19 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.124 7.90083L10.4726 8.94104L10.7027 9.64579C11.3046 11.5148 11.5973 12.6497 11.5973 13.1545C11.5973 14.3435 10.6334 15.3073 9.44448 15.3073C8.25553 15.3073 7.2917 14.3435 7.2917 13.1545C7.2917 12.5891 7.65886 11.2334 8.41633 8.94104L8.76493 7.90083C8.98524 7.25142 9.90372 7.25142 10.124 7.90083ZM9.44448 2.39062C13.4076 2.39062 16.6204 5.6034 16.6204 9.56655C16.6204 11.0058 16.1951 12.3836 15.4109 13.5546C15.1904 13.884 14.7447 13.9722 14.4154 13.7516C14.0861 13.5311 13.9979 13.0854 14.2184 12.7561C14.8456 11.8196 15.1852 10.7193 15.1852 9.56655C15.1852 6.39603 12.615 3.82581 9.44448 3.82581C6.27396 3.82581 3.70374 6.39603 3.70374 9.56655C3.70374 10.7193 4.04341 11.8196 4.67054 12.7561C4.89104 13.0854 4.80285 13.5311 4.47354 13.7516C4.14423 13.9722 3.69852 13.884 3.47801 13.5546C2.69389 12.3836 2.26855 11.0058 2.26855 9.56655C2.26855 5.6034 5.48133 2.39062 9.44448 2.39062ZM9.44448 10.4269L9.20879 11.188L9.04587 11.7413C8.83445 12.4807 8.72689 12.9596 8.72689 13.1545C8.72689 13.5508 9.04817 13.8721 9.44448 13.8721C9.8408 13.8721 10.1621 13.5508 10.1621 13.1545C10.1621 12.9161 10.0013 12.2533 9.6864 11.2087L9.44448 10.4269Z"
+        fill="#507BDC"
+      />
+    </svg>
+  );
+}
+
+export function WavyIcon() {
+  return (
+    <svg
+      width="23"
+      height="14"
+      viewBox="0 0 23 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.18555 4.05158C5.78508 -0.579547 8.49818 0.564217 13.3917 4.05158C16.4663 6.5364 18.2747 6.48932 21.6392 4.05158"
+        stroke="#A2A2A0"
+        strokeWidth="1.31959"
+        strokeLinecap="round"
+      />
+      <path
+        d="M1.18555 10.6492C5.78508 6.01811 8.49818 7.16187 13.3917 10.6492C16.4663 13.1341 18.2747 13.087 21.6392 10.6492"
+        stroke="#A2A2A0"
+        strokeWidth="1.31959"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function WalletIcon() {
+  return (
+    <svg
+      width="24"
+      height="23"
+      viewBox="0 0 24 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.94644 4.81951H19.0089C19.1732 4.81943 19.3373 4.82985 19.5002 4.85071C19.445 4.46301 19.3118 4.09051 19.1088 3.75567C18.9057 3.42084 18.6369 3.13059 18.3186 2.90244C18.0003 2.67429 17.6391 2.51296 17.2568 2.42817C16.8745 2.34338 16.4789 2.3369 16.094 2.40911L4.52895 4.38357H4.51577C3.78983 4.52239 3.14427 4.93312 2.71094 5.53186C3.36379 5.0675 4.14529 4.81847 4.94644 4.81951V4.81951Z"
+        fill="white"
+      />
+      <path
+        d="M19.0098 5.875H4.94726C4.20159 5.87581 3.4867 6.17239 2.95943 6.69966C2.43216 7.22693 2.13558 7.94183 2.13477 8.6875V17.125C2.13558 17.8707 2.43216 18.5856 2.95943 19.1128C3.4867 19.6401 4.20159 19.9367 4.94726 19.9375H19.0098C19.7554 19.9367 20.4703 19.6401 20.9976 19.1128C21.5249 18.5856 21.8214 17.8707 21.8223 17.125V8.6875C21.8214 7.94183 21.5249 7.22693 20.9976 6.69966C20.4703 6.17239 19.7554 5.87581 19.0098 5.875V5.875ZM16.9224 14.3125C16.6442 14.3125 16.3723 14.23 16.1411 14.0755C15.9098 13.921 15.7296 13.7014 15.6232 13.4444C15.5167 13.1874 15.4889 12.9047 15.5431 12.6319C15.5974 12.3591 15.7313 12.1085 15.928 11.9119C16.1247 11.7152 16.3752 11.5813 16.648 11.527C16.9208 11.4728 17.2035 11.5006 17.4605 11.607C17.7175 11.7135 17.9371 11.8937 18.0916 12.125C18.2461 12.3562 18.3286 12.6281 18.3286 12.9062C18.3286 13.2792 18.1804 13.6369 17.9167 13.9006C17.653 14.1643 17.2953 14.3125 16.9224 14.3125Z"
+        fill="white"
+      />
+      <path
+        d="M2.15625 11.6523V7.27978C2.15625 6.32749 2.68359 4.73096 4.51392 4.38511C6.06738 4.09375 7.60547 4.09375 7.60547 4.09375C7.60547 4.09375 8.61621 4.79687 7.78125 4.79687C6.94629 4.79687 6.96826 5.87353 7.78125 5.87353C8.59424 5.87353 7.78125 6.90625 7.78125 6.90625L4.50732 10.6196L2.15625 11.6523Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export function GlobeIcon() {
+  return (
+    <svg
+      width="23"
+      height="23"
+      viewBox="0 0 23 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.5 2.35938C6.452 2.35938 2.35938 6.452 2.35938 11.5C2.35938 16.548 6.452 20.6406 11.5 20.6406C16.548 20.6406 20.6406 16.548 20.6406 11.5C20.6406 6.452 16.548 2.35938 11.5 2.35938Z"
+        fill="white"
+        stroke="#6f42c1"
+        strokeWidth="0.75"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M11.5001 2.35938C8.94824 2.35938 6.54883 6.452 6.54883 11.5C6.54883 16.548 8.94824 20.6406 11.5001 20.6406C14.052 20.6406 16.4515 16.548 16.4515 11.5C16.4515 6.452 14.052 2.35938 11.5001 2.35938Z"
+        fill="white"
+        stroke="#6f42c1"
+        strokeWidth="0.75"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M5.40625 5.40625C7.08672 6.59937 9.20224 7.31084 11.5001 7.31084C13.798 7.31084 15.9136 6.59937 17.594 5.40625"
+        fill="white"
+      />
+      <path
+        d="M5.40625 5.40625C7.08672 6.59937 9.20224 7.31084 11.5001 7.31084C13.798 7.31084 15.9136 6.59937 17.594 5.40625"
+        stroke="#6f42c1"
+        strokeWidth="0.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.594 17.594C15.9136 16.4009 13.798 15.6895 11.5001 15.6895C9.20224 15.6895 7.08672 16.4009 5.40625 17.594"
+        stroke="#6f42c1"
+        strokeWidth="0.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.5 2.35938V20.6406"
+        stroke="#6f42c1"
+        strokeWidth="0.75"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M20.6406 11.5H2.35938"
+        stroke="#6f42c1"
+        strokeWidth="0.75"
+        strokeMiterlimit="10"
+      />
+    </svg>
+  );
+}
+
+export function DocumentIcon() {
+  return (
+    <svg
+      width="23"
+      height="23"
+      viewBox="0 0 23 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.9062 10.1055H19.0586C19.1021 10.1055 19.1438 10.1228 19.1746 10.1535C19.2054 10.1843 19.2227 10.226 19.2227 10.2695V18.5312C19.2227 19.2741 18.9276 19.9864 18.4023 20.5117C17.8771 21.0369 17.1647 21.332 16.4219 21.332H6.57812C5.83531 21.332 5.12292 21.0369 4.59767 20.5117C4.07243 19.9864 3.77734 19.2741 3.77734 18.5312V4.46875C3.77734 3.72594 4.07243 3.01355 4.59767 2.4883C5.12292 1.96305 5.83531 1.66797 6.57812 1.66797H10.6211C10.6646 1.66797 10.7063 1.68525 10.7371 1.71602C10.7679 1.74679 10.7852 1.78852 10.7852 1.83203V7.98437C10.7852 8.54692 11.0086 9.08643 11.4064 9.48421C11.8042 9.882 12.3437 10.1055 12.9062 10.1055ZM7.98437 17.1367H15.0156C15.2052 17.1367 15.387 17.0614 15.5211 16.9273C15.6552 16.7933 15.7305 16.6115 15.7305 16.4219C15.7305 16.2323 15.6552 16.0505 15.5211 15.9164C15.387 15.7823 15.2052 15.707 15.0156 15.707H7.98437C7.79479 15.707 7.61296 15.7823 7.4789 15.9164C7.34484 16.0505 7.26953 16.2323 7.26953 16.4219C7.26953 16.6115 7.34484 16.7933 7.4789 16.9273C7.61296 17.0614 7.79479 17.1367 7.98437 17.1367ZM7.98437 13.6211H15.0156C15.2052 13.6211 15.387 13.5458 15.5211 13.4117C15.6552 13.2777 15.7305 13.0958 15.7305 12.9062C15.7305 12.7167 15.6552 12.5348 15.5211 12.4008C15.387 12.2667 15.2052 12.1914 15.0156 12.1914H7.98437C7.79479 12.1914 7.61296 12.2667 7.4789 12.4008C7.34484 12.5348 7.26953 12.7167 7.26953 12.9062C7.26953 13.0958 7.34484 13.2777 7.4789 13.4117C7.61296 13.5458 7.79479 13.6211 7.98437 13.6211Z"
+        fill="white"
+        stroke="#0075FF"
+        strokeWidth="0.0234375"
+      />
+      <path
+        d="M12.3447 2.22723L18.6644 8.54696C18.675 8.55761 18.6822 8.57115 18.6851 8.58589C18.6881 8.60062 18.6866 8.61588 18.6808 8.62976C18.6751 8.64364 18.6654 8.65552 18.6529 8.66389C18.6404 8.67226 18.6258 8.67677 18.6107 8.67683H12.9063C12.7229 8.67683 12.547 8.60398 12.4174 8.47432C12.2877 8.34466 12.2148 8.1688 12.2148 7.98542V2.28091C12.2149 2.2659 12.2194 2.25124 12.2278 2.23878C12.2362 2.22631 12.248 2.2166 12.2619 2.21086C12.2758 2.20512 12.2911 2.20361 12.3058 2.20652C12.3205 2.20944 12.3341 2.21663 12.3447 2.22722C12.3447 2.22722 12.3447 2.22722 12.3447 2.22723Z"
+        fill="white"
+        stroke="#0075FF"
+        strokeWidth="0.0234375"
+      />
+    </svg>
+  );
+}
+
+export function CartIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.33337 2L1.50998 2.05887C2.39001 2.35221 2.83002 2.49888 3.08169 2.84807C3.33337 3.19725 3.33337 3.66106 3.33337 4.58869V6.33333C3.33337 8.21893 3.33337 9.16173 3.91916 9.74753C4.50495 10.3333 5.44775 10.3333 7.33337 10.3333H8.66671M12.6667 10.3333H11.3334"
+        stroke={"white"}
+        strokeLinecap="round"
+      />
+      <path
+        d="M5.00005 12C5.55233 12 6.00005 12.4477 6.00005 13C6.00005 13.5523 5.55233 14 5.00005 14C4.44776 14 4.00005 13.5523 4.00005 13C4.00005 12.4477 4.44776 12 5.00005 12Z"
+        stroke={"white"}
+      />
+      <path
+        d="M11 12C11.5523 12 12 12.4477 12 13C12 13.5523 11.5523 14 11 14C10.4478 14 10 13.5523 10 13C10 12.4477 10.4478 12 11 12Z"
+        stroke={"white"}
+      />
+      <path
+        d="M3.33337 4H5.33337M3.66671 8.66667H10.6812C11.3208 8.66667 11.6406 8.66667 11.8911 8.50153C12.1416 8.33633 12.2676 8.0424 12.5195 7.45453L12.8052 6.78787C13.3449 5.52863 13.6148 4.89902 13.3184 4.44951C13.0219 4 12.337 4 10.967 4H8.00004"
+        stroke={"white"}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

app/src/components/icons/ContextMenuIcons.tsx

@@ -0,0 +1,162 @@
+export function FlipXAxisIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 9.0568V2.94321C1 2.09213 1 1.6666 1.27121 1.52703C1.54242 1.38746 1.88869 1.6348 2.58123 2.12947L3.37186 2.6942C3.67979 2.91415 3.83375 3.02413 3.91687 3.18565C4 3.34718 4 3.53639 4 3.9148V8.08525C4 8.46365 4 8.65285 3.91687 8.8144C3.83375 8.9759 3.67979 9.0859 3.37186 9.30585L2.58124 9.87055C1.88869 10.3653 1.54242 10.6126 1.27121 10.473C1 10.3335 1 9.9079 1 9.0568Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M8.84612 2.99935L8.8461 2.99936C8.68674 3.11318 8.58748 3.18452 8.51591 3.2461C8.45011 3.30271 8.42848 3.33407 8.41656 3.3572L8.84612 2.99935ZM8.84612 2.99935L9.63671 2.43462C9.63671 2.43462 9.63672 2.43462 9.63672 2.43462C9.99337 2.17987 10.2264 2.01464 10.403 1.92406C10.487 1.88093 10.5331 1.86801 10.555 1.86465C10.5651 1.88444 10.5813 1.92948 10.5951 2.02293C10.624 2.21925 10.625 2.50491 10.625 2.94321V9.0568C10.625 9.49511 10.624 9.78078 10.5951 9.9771C10.5813 10.0705 10.5651 10.1156 10.5551 10.1354C10.5331 10.132 10.487 10.1191 10.403 10.076C10.2264 9.98539 9.99337 9.82016 9.63672 9.5654L9.63671 9.5654L8.84611 9.0007L8.84611 9.00069M8.84612 2.99935L8.84611 9.00069M8.84611 9.00069C8.68675 8.88688 8.58748 8.81553 8.51591 8.75395C8.45015 8.69737 8.4285 8.666 8.41657 8.64287C8.40466 8.61972 8.39169 8.5839 8.38386 8.49735C8.37535 8.40331 8.375 8.28108 8.375 8.08525V3.9148C8.375 3.71896 8.37535 3.59672 8.38386 3.50269M8.84611 9.00069L8.38386 3.50269M8.38386 3.50269C8.39168 3.41623 8.40463 3.38041 8.41652 3.35729L8.38386 3.50269ZM10.5715 1.86435C10.5713 1.86468 10.5689 1.86476 10.565 1.86363C10.5698 1.86345 10.5718 1.86402 10.5715 1.86435ZM10.5501 1.85597C10.5469 1.85343 10.5456 1.85142 10.5457 1.85105C10.5458 1.85068 10.5474 1.85195 10.5501 1.85597ZM10.5457 10.149C10.5456 10.1486 10.5469 10.1466 10.5501 10.1441C10.5475 10.1481 10.5458 10.1493 10.5457 10.149ZM10.565 10.1364C10.5689 10.1353 10.5713 10.1353 10.5716 10.1357C10.5718 10.136 10.5698 10.1366 10.565 10.1364Z"
+        stroke="var(--text-color)"
+        strokeWidth="0.75"
+      />
+      <path
+        opacity="0.5"
+        d="M6 7V5"
+        stroke="var(--text-color)"
+        strokeWidth="0.75"
+        strokeLinecap="round"
+      />
+      <path
+        opacity="0.5"
+        d="M6 3V1"
+        stroke="var(--text-color)"
+        strokeWidth="0.75"
+        strokeLinecap="round"
+      />
+      <path
+        opacity="0.5"
+        d="M6 11V9"
+        stroke="var(--text-color)"
+        strokeWidth="0.75"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function FlipYAxisIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.0568 11H2.94321C2.09213 11 1.6666 11 1.52703 10.7288C1.38746 10.4576 1.6348 10.1113 2.12947 9.41877L2.6942 8.62814C2.91415 8.32021 3.02413 8.16625 3.18565 8.08313C3.34718 8 3.53639 8 3.9148 8H8.08525C8.46365 8 8.65285 8 8.8144 8.08313C8.9759 8.16625 9.0859 8.32021 9.30585 8.62814L9.87055 9.41876C10.3653 10.1113 10.6126 10.4576 10.473 10.7288C10.3335 11 9.9079 11 9.0568 11Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M2.99935 3.15388L2.99936 3.1539C3.11318 3.31326 3.18452 3.41252 3.2461 3.48409C3.30271 3.54989 3.33407 3.57152 3.3572 3.58344L2.99935 3.15388ZM2.99935 3.15388L2.43462 2.36329C2.43462 2.36329 2.43462 2.36328 2.43462 2.36328C2.17987 2.00663 2.01464 1.7736 1.92406 1.59704C1.88093 1.51299 1.86801 1.46687 1.86465 1.44495C1.88444 1.43495 1.92948 1.41866 2.02293 1.4049C2.21925 1.37599 2.50491 1.375 2.94321 1.375L9.0568 1.375C9.49511 1.375 9.78078 1.37599 9.9771 1.4049C10.0705 1.41866 10.1156 1.43494 10.1354 1.44495C10.132 1.46687 10.1191 1.51299 10.076 1.59705C9.98539 1.7736 9.82016 2.00663 9.5654 2.36328L9.5654 2.36329L9.0007 3.15389L9.00069 3.15389M2.99935 3.15388L9.00069 3.15389M9.00069 3.15389C8.88688 3.31325 8.81553 3.41252 8.75395 3.48409C8.69737 3.54985 8.666 3.5715 8.64287 3.58343C8.61972 3.59534 8.5839 3.60831 8.49735 3.61614C8.40331 3.62465 8.28108 3.625 8.08525 3.625L3.9148 3.625C3.71896 3.625 3.59672 3.62465 3.50269 3.61614M9.00069 3.15389L3.50269 3.61614M3.50269 3.61614C3.41623 3.60832 3.38041 3.59537 3.35729 3.58348L3.50269 3.61614ZM1.86435 1.42845C1.86468 1.42867 1.86476 1.43108 1.86363 1.43501C1.86345 1.4302 1.86402 1.42823 1.86435 1.42845ZM1.85597 1.4499C1.85343 1.45311 1.85142 1.45444 1.85105 1.4543C1.85068 1.45416 1.85195 1.45255 1.85597 1.4499ZM10.149 1.45429C10.1486 1.45443 10.1466 1.4531 10.1441 1.44989C10.1481 1.45254 10.1493 1.45415 10.149 1.45429ZM10.1364 1.435C10.1353 1.43107 10.1353 1.42867 10.1357 1.42845C10.136 1.42823 10.1366 1.4302 10.1364 1.435Z"
+        stroke="var(--text-color)"
+        strokeWidth="0.75"
+      />
+      <path
+        opacity="0.5"
+        d="M7 6H5"
+        stroke="var(--text-color)"
+        strokeWidth="0.75"
+        strokeLinecap="round"
+      />
+      <path
+        opacity="0.5"
+        d="M3 6H1"
+        stroke="var(--text-color)"
+        strokeWidth="0.75"
+        strokeLinecap="round"
+      />
+      <path
+        opacity="0.5"
+        d="M11 6H9"
+        stroke="var(--text-color)"
+        strokeWidth="0.75"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function FlipZAxisIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_111_550)">
+        <path
+          d="M9.04893 11.25H2.95106C2.10217 11.25 1.67773 11.25 1.53852 11.0466C1.39931 10.8432 1.64602 10.5835 2.13942 10.0641L2.7027 9.47111C2.92208 9.24016 3.03177 9.12469 3.19288 9.06234C3.35399 9 3.54271 9 3.92015 9H8.07988C8.4573 9 8.64602 9 8.80715 9.06234C8.96823 9.12469 9.07795 9.24016 9.29734 9.4711L9.86058 10.0641C10.354 10.5835 10.6007 10.8432 10.4615 11.0466C10.3223 11.25 9.89784 11.25 9.04893 11.25Z"
+          fill="var(--text-color)"
+        />
+        <path
+          d="M2.97458 2.27061L2.97459 2.27063C3.21361 2.52227 3.26241 2.56246 3.32818 2.58793L2.97458 2.27061ZM2.97458 2.27061L2.4113 1.67767C2.4113 1.67767 2.4113 1.67766 2.4113 1.67766C2.1834 1.43775 2.03311 1.27814 1.94303 1.15861C1.96477 1.15501 1.99023 1.15144 2.01993 1.14815C2.22388 1.12557 2.51696 1.125 2.95106 1.125L9.04893 1.125C9.48304 1.125 9.77613 1.12557 9.98008 1.14815C10.0098 1.15144 10.0352 1.15501 10.057 1.15862C9.9669 1.27813 9.81662 1.43775 9.5887 1.67766L9.58869 1.67767L9.02545 2.27062L9.02544 2.27063M2.97458 2.27061L9.02544 2.27063M9.02544 2.27063C8.78635 2.52233 8.73756 2.56249 8.67176 2.58797C8.59172 2.6189 8.48853 2.625 8.07988 2.625L3.92015 2.625C3.51141 2.625 3.40826 2.61889 3.32825 2.58796L9.02544 2.27063Z"
+          stroke="var(--text-color)"
+          strokeWidth="0.75"
+        />
+        <path
+          opacity="0.5"
+          d="M7 6.75H5"
+          stroke="var(--text-color)"
+          strokeWidth="0.75"
+          strokeLinecap="round"
+        />
+        <path
+          opacity="0.5"
+          d="M3 6.75H1"
+          stroke="var(--text-color)"
+          strokeWidth="0.75"
+          strokeLinecap="round"
+        />
+        <path
+          opacity="0.5"
+          d="M7.5 4.94853H10.2794C10.7911 4.94853 11.2059 5.36332 11.2059 5.875C11.2059 6.38668 10.7911 6.80147 10.2794 6.80147H9.35294M7.5 4.94853L8.32353 4.125M7.5 4.94853L8.32353 5.77206"
+          stroke="var(--text-color)"
+          strokeWidth="0.75"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_111_550">
+          <rect
+            width="12"
+            height="12"
+            fill="white"
+            transform="matrix(0 -1 1 0 0 12)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export function RenameIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.03566 0.857117C4.85815 0.857117 4.71423 1.00103 4.71423 1.17855C4.71423 1.35606 4.85815 1.49997 5.03566 1.49997H5.67852V10.5H5.03566C4.85815 10.5 4.71423 10.6439 4.71423 10.8214C4.71423 10.9989 4.85815 11.1428 5.03566 11.1428H6.96423C7.14175 11.1428 7.28566 10.9989 7.28566 10.8214C7.28566 10.6439 7.14175 10.5 6.96423 10.5H6.32138V1.49997H6.96423C7.14175 1.49997 7.28566 1.35606 7.28566 1.17855C7.28566 1.00103 7.14175 0.857117 6.96423 0.857117H5.03566Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M5.25 3H2.625C2.21079 3 1.875 3.33579 1.875 3.75V8.25C1.875 8.66421 2.21079 9 2.625 9H5.25M6.75 9H9.375C9.78921 9 10.125 8.66421 10.125 8.25V3.75C10.125 3.33579 9.78921 3 9.375 3H6.75"
+        stroke="var(--text-color)"
+      />
+    </svg>
+  );
+}

app/src/components/icons/DashboardIcon.tsx

@@ -0,0 +1,255 @@
+export function NotificationIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 12.8335C10 13.3639 9.78927 13.8726 9.4142 14.2477C9.03913 14.6228 8.5304 14.8335 8 14.8335C7.4696 14.8335 6.96087 14.6228 6.58579 14.2477C6.21072 13.8726 6 13.3639 6 12.8335"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.72064 12.1667C3.39434 12.0974 3.10586 11.9084 2.91209 11.6369C2.71832 11.3653 2.63337 11.0311 2.67399 10.7L3.34066 5.29332C3.51087 4.18175 4.07672 3.16901 4.93414 2.44143C5.79156 1.71384 6.88287 1.32036 8.00734 1.33332C9.1318 1.32036 10.2231 1.71384 11.0805 2.44143C11.9379 3.16901 12.5038 4.18175 12.674 5.29332L13.3407 10.7C13.3815 11.0301 13.2975 11.3636 13.1051 11.635C12.9127 11.9063 12.6257 12.096 12.3007 12.1667C9.47907 12.8297 6.54222 12.8297 3.72064 12.1667Z"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function HomeIcon() {
+  return (
+    <svg
+      width="16"
+      height="17"
+      viewBox="0 0 16 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.91304 13.5V12.8333C6.91304 12.281 7.36076 11.8333 7.91304 11.8333H8.95652C9.50881 11.8333 9.95652 12.281 9.95652 12.8333V13.5C9.95652 14.0523 10.4042 14.5 10.9565 14.5H12C12.5523 14.5 13 14.0523 13 13.5V7.38889L8.21739 2.5L3 7.38889V13.5C3 14.0523 3.44772 14.5 4 14.5H5.91304C6.46533 14.5 6.91304 14.0523 6.91304 13.5Z"
+        stroke="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function ProjectsIcon() {
+  return (
+    <svg
+      width="16"
+      height="17"
+      viewBox="0 0 16 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.1538 1.5H5.69231C5.20268 1.5 4.7331 1.68437 4.38688 2.01256C4.04066 2.34075 3.84615 2.78587 3.84615 3.25C3.35652 3.25 2.88695 3.43437 2.54073 3.76256C2.1945 4.09075 2 4.53587 2 5V13.75C2 14.2141 2.1945 14.6592 2.54073 14.9874C2.88695 15.3156 3.35652 15.5 3.84615 15.5H10.3077C10.7973 15.5 11.2669 15.3156 11.6131 14.9874C11.9593 14.6592 12.1538 14.2141 12.1538 13.75C12.6435 13.75 13.1131 13.5656 13.4593 13.2374C13.8055 12.9092 14 12.4641 14 12V3.25C14 2.78587 13.8055 2.34075 13.4593 2.01256C13.1131 1.68437 12.6435 1.5 12.1538 1.5ZM12.1538 12.875V5C12.1538 4.53587 11.9593 4.09075 11.6131 3.76256C11.2669 3.43437 10.7973 3.25 10.3077 3.25H4.76923C4.76923 3.01794 4.86648 2.79538 5.03959 2.63128C5.2127 2.46719 5.44749 2.375 5.69231 2.375H12.1538C12.3987 2.375 12.6334 2.46719 12.8066 2.63128C12.9797 2.79538 13.0769 3.01794 13.0769 3.25V12C13.0769 12.2321 12.9797 12.4546 12.8066 12.6187C12.6334 12.7828 12.3987 12.875 12.1538 12.875ZM2.92308 5C2.92308 4.76794 3.02033 4.54538 3.19344 4.38128C3.36655 4.21719 3.60134 4.125 3.84615 4.125H10.3077C10.5525 4.125 10.7873 4.21719 10.9604 4.38128C11.1335 4.54538 11.2308 4.76794 11.2308 5V13.75C11.2308 13.9821 11.1335 14.2046 10.9604 14.3687C10.7873 14.5328 10.5525 14.625 10.3077 14.625H3.84615C3.60134 14.625 3.36655 14.5328 3.19344 14.3687C3.02033 14.2046 2.92308 13.9821 2.92308 13.75V5Z"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function TutorialsIcon() {
+  return (
+    <svg
+      width="16"
+      height="17"
+      viewBox="0 0 16 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="8.157"
+        cy="8.35866"
+        r="6.17928"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M7.31894 7.8336L7.30273 7.72125C10.0583 7.32407 11.5796 5.74901 12.1058 5.09033L12.1945 5.1612C11.6598 5.83032 10.1146 7.43067 7.31894 7.8336Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M7.3313 8.19434C7.56713 8.19434 7.7583 8.00316 7.7583 7.76734C7.7583 7.53151 7.56713 7.34033 7.3313 7.34033C7.09547 7.34033 6.9043 7.53151 6.9043 7.76734C6.9043 8.00316 7.09547 8.19434 7.3313 8.19434Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M12.134 5.56787C12.3699 5.56787 12.561 5.3767 12.561 5.14087C12.561 4.90504 12.3699 4.71387 12.134 4.71387C11.8982 4.71387 11.707 4.90504 11.707 5.14087C11.707 5.3767 11.8982 5.56787 12.134 5.56787Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M5.67763 13.0492C5.15009 12.385 4.31304 10.9992 4.63359 9.18018L4.74534 9.20001C4.43251 10.9751 5.25078 12.3292 5.76636 12.9785L5.67763 13.0492Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M4.68921 9.63867C4.92504 9.63867 5.11621 9.4475 5.11621 9.21167C5.11621 8.97584 4.92504 8.78467 4.68921 8.78467C4.45338 8.78467 4.26221 8.97584 4.26221 9.21167C4.26221 9.4475 4.45338 9.63867 4.68921 9.63867Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M5.70923 13.4238C5.94506 13.4238 6.13623 13.2327 6.13623 12.9968C6.13623 12.761 5.94506 12.5698 5.70923 12.5698C5.4734 12.5698 5.28223 12.761 5.28223 12.9968C5.28223 13.2327 5.4734 13.4238 5.70923 13.4238Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M12.4429 9.6101L12.3293 9.60692C12.369 8.18736 11.8263 6.82867 10.801 5.7813C9.73352 4.69047 8.2434 4.07147 6.70876 4.0804L6.70801 3.96684C8.27081 3.96078 9.79333 4.58917 10.8822 5.70181C11.9291 6.77143 12.4833 8.1595 12.4429 9.6101Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M12.3792 10.0142C12.615 10.0142 12.8062 9.82299 12.8062 9.58716C12.8062 9.35133 12.615 9.16016 12.3792 9.16016C12.1433 9.16016 11.9521 9.35133 11.9521 9.58716C11.9521 9.82299 12.1433 10.0142 12.3792 10.0142Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M6.72974 4.4585C6.96556 4.4585 7.15674 4.26732 7.15674 4.0315C7.15674 3.79567 6.96556 3.60449 6.72974 3.60449C6.49391 3.60449 6.30273 3.79567 6.30273 4.0315C6.30273 4.26732 6.49391 4.4585 6.72974 4.4585Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M8.93738 12.7561C5.51197 12.5871 3.18964 10.3443 2.15833 8.30167C1.40017 6.79989 1.28161 5.33657 1.84898 4.48256C2.21511 3.93139 2.7529 3.64179 3.57572 3.69903L3.45825 3.81649C2.67632 3.76183 2.28567 4.03042 1.94346 4.5454C1.39865 5.36549 1.51979 6.78505 2.25963 8.25049C3.27641 10.2647 5.56617 12.476 8.94298 12.6426L8.93738 12.7561Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M4.12372 13.5272C2.54078 13.2677 1.46328 11.9915 1.38697 10.4835C1.31368 9.03292 2.2066 7.3084 4.36675 6.72559L4.39628 6.83521C2.2973 7.40152 1.42936 9.07259 1.50053 10.4778C1.54767 11.4101 2.02721 12.4642 3.18398 12.9967C3.46147 13.1244 3.45807 13.0965 3.77132 13.2139L4.12372 13.5272Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M4.36157 7.21436C4.5974 7.21436 4.78858 7.02318 4.78858 6.78735C4.78858 6.55153 4.5974 6.36035 4.36157 6.36035C4.12575 6.36035 3.93457 6.55153 3.93457 6.78735C3.93457 7.02318 4.12575 7.21436 4.36157 7.21436Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M11.5155 15.1026C11.4663 15.1026 11.4165 15.1003 11.3659 15.0956C10.4065 15.0064 9.53752 14.1202 9.04102 12.7247L9.14807 12.6865C9.62928 14.0393 10.4622 14.8976 11.3764 14.9825C11.8685 15.0293 12.3041 14.8309 12.5152 14.4681C12.7337 14.0928 12.7265 13.7453 12.3977 13.2744L12.5152 13.1569C12.8703 13.6657 12.8548 14.1099 12.6133 14.5252C12.4016 14.8889 11.9895 15.1026 11.5155 15.1026Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M8.9187 13.1187C9.15453 13.1187 9.34571 12.9275 9.34571 12.6917C9.34571 12.4558 9.15453 12.2646 8.9187 12.2646C8.68287 12.2646 8.4917 12.4558 8.4917 12.6917C8.4917 12.9275 8.68287 13.1187 8.9187 13.1187Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M10.0987 3.65056L9.99072 3.61513C10.2487 2.83274 10.7045 2.32867 11.2414 2.23252C11.572 2.17286 11.8969 2.28566 12.0886 2.52597C12.2781 2.76339 12.4042 2.98817 12.2684 3.30782L12.1509 3.19035C12.2699 2.91023 12.1625 2.80064 12.0001 2.59683C11.8344 2.38923 11.5514 2.29248 11.2616 2.34441C10.7669 2.43284 10.3432 2.90906 10.0987 3.65056Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+      <path
+        d="M10.0535 4.04004C10.2893 4.04004 10.4805 3.84887 10.4805 3.61304C10.4805 3.37721 10.2893 3.18604 10.0535 3.18604C9.81764 3.18604 9.62646 3.37721 9.62646 3.61304C9.62646 3.84887 9.81764 4.04004 10.0535 4.04004Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.562865"
+      />
+    </svg>
+  );
+}
+
+export function DocumentationIcon() {
+  return (
+    <svg
+      width="16"
+      height="17"
+      viewBox="0 0 16 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 5.10589C7.2666 4.17245 6.13604 3.23901 3.33413 3.17051C3.15009 3.16602 3 3.3155 3 3.4996C3 4.86525 3 10.0354 3 11.5645C3 11.7486 3.1501 11.8932 3.33409 11.8992C6.13603 11.9908 7.2666 13.233 8 14.1665M8 5.10589C8.7334 4.17245 9.86393 3.23901 12.6659 3.17051C12.8499 3.16602 13 3.31214 13 3.49624C13 5.02281 13 10.0374 13 11.564C13 11.7481 12.8499 11.8932 12.6659 11.8992C9.864 11.9908 8.7334 13.233 8 14.1665M8 5.10589V14.1665"
+        stroke="var(--text-color)"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.8232 4.5H14.333C14.5171 4.5 14.6663 4.64924 14.6663 4.83333V13.526C14.6663 13.7957 14.3485 13.9749 14.102 13.8654C13.5719 13.6299 12.6873 13.3421 11.5291 13.3421C9.56827 13.3421 7.99967 14.5 7.99967 14.5C7.99967 14.5 6.43105 13.3421 4.47026 13.3421C3.31197 13.3421 2.42738 13.6299 1.89732 13.8654C1.65079 13.9749 1.33301 13.7957 1.33301 13.526V4.83333C1.33301 4.64924 1.48225 4.5 1.66634 4.5H3.17615"
+        stroke="var(--text-color)"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function HelpIcon() {
+  return (
+    <svg
+      width="12"
+      height="13"
+      viewBox="0 0 12 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_764_1941)">
+        <path
+          d="M6 12.5C2.6862 12.5 0 9.8138 0 6.5C0 3.1862 2.6862 0.5 6 0.5C9.3138 0.5 12 3.1862 12 6.5C12 9.8138 9.3138 12.5 6 12.5ZM3.552 4.8404V4.9016C3.552 4.98117 3.58361 5.05747 3.63987 5.11373C3.69613 5.16999 3.77244 5.2016 3.852 5.2016H4.4502C4.48952 5.2016 4.52845 5.19386 4.56478 5.17881C4.6011 5.16376 4.63411 5.14171 4.66191 5.11391C4.68971 5.08611 4.71176 5.0531 4.72681 5.01678C4.74186 4.98045 4.7496 4.94152 4.7496 4.9022C4.7496 4.1282 5.3484 3.7148 6.1536 3.7148C6.9384 3.7148 7.4544 4.1282 7.4544 4.7168C7.4544 5.2736 7.1652 5.5322 6.4428 5.8628L6.2364 5.9552C5.6274 6.224 5.4 6.626 5.4 7.3286V7.4C5.4 7.47957 5.43161 7.55587 5.48787 7.61213C5.54413 7.66839 5.62044 7.7 5.7 7.7H6.2982C6.33752 7.7 6.37645 7.69226 6.41278 7.67721C6.4491 7.66216 6.48211 7.64011 6.50991 7.61231C6.53771 7.58451 6.55976 7.5515 6.57481 7.51518C6.58986 7.47885 6.5976 7.43992 6.5976 7.4006C6.5976 7.091 6.6804 6.9668 6.9276 6.8534L7.1346 6.7604C8.0016 6.368 8.652 5.852 8.652 4.7264V4.6646C8.652 3.4778 7.62 2.6 6.1536 2.6C4.6668 2.6 3.552 3.4568 3.552 4.8404ZM5.1 9.4946C5.1 10.0148 5.4954 10.4 5.9946 10.4C6.5046 10.4 6.9 10.0148 6.9 9.4946C6.9 8.9744 6.5046 8.6 5.9946 8.6C5.4954 8.6 5.1 8.9744 5.1 9.4946Z"
+          fill="var(--text-color)"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_764_1941">
+          <rect
+            width="12"
+            height="12"
+            fill="white"
+            transform="translate(0 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export function LogoutIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 3.5C4.00605 2.41248 4.05428 1.82353 4.43847 1.43934C4.87781 1 5.58489 1 6.99914 1H7.49914C8.91334 1 9.62044 1 10.0598 1.43934C10.4991 1.87868 10.4991 2.58578 10.4991 4V8C10.4991 9.4142 10.4991 10.1213 10.0598 10.5606C9.62044 11 8.91334 11 7.49914 11H6.99914C5.58489 11 4.87781 11 4.43847 10.5606C4.05428 10.1764 4.00605 9.5875 4 8.5"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+      />
+      <path
+        opacity="0.5"
+        d="M4 9.75C2.82149 9.75 2.23223 9.75 1.86611 9.3839C1.5 9.01775 1.5 8.4285 1.5 7.25V4.75C1.5 3.57149 1.5 2.98224 1.86611 2.61612C2.23223 2.25 2.82149 2.25 4 2.25"
+        stroke="var(--text-color)"
+      />
+      <path
+        d="M7.5 6H3M3 6L4 7M3 6L4 5"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

app/src/components/icons/ExportModuleIcons.tsx

@@ -0,0 +1,133 @@
+// module icons
+export function BuilderIcon({ isActive }: { isActive: boolean }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.25 6.25C12.25 6.66421 11.9142 7 11.5 7H3.5C3.08579 7 2.75 6.66421 2.75 6.25V4.5C2.75 4.08579 3.08579 3.75 3.5 3.75H11.5C11.9142 3.75 12.25 4.08579 12.25 4.5V6.25ZM13.375 4.5C13.375 4.08579 13.7108 3.75 14.125 3.75H16.5C16.9142 3.75 17.25 4.08579 17.25 4.5V6.25C17.25 6.66421 16.9142 7 16.5 7H14.125C13.7108 7 13.375 6.66421 13.375 6.25V4.5ZM3.5 15.75C3.08579 15.75 2.75 15.4142 2.75 15V13.25C2.75 12.8358 3.08579 12.5 3.5 12.5H11.5C11.9142 12.5 12.25 12.8358 12.25 13.25V15C12.25 15.4142 11.9142 15.75 11.5 15.75H3.5ZM14.125 15.75C13.7108 15.75 13.375 15.4142 13.375 15V13.25C13.375 12.8358 13.7108 12.5 14.125 12.5H16.5C16.9142 12.5 17.25 12.8358 17.25 13.25V15C17.25 15.4142 16.9142 15.75 16.5 15.75H14.125ZM8.5 11.375C8.08579 11.375 7.75 11.0392 7.75 10.625V8.875C7.75 8.46079 8.08579 8.125 8.5 8.125H16.5C16.9142 8.125 17.25 8.46079 17.25 8.875V10.625C17.25 11.0392 16.9142 11.375 16.5 11.375H8.5ZM5.875 8.125C6.28921 8.125 6.625 8.46079 6.625 8.875V10.625C6.625 11.0392 6.28921 11.375 5.875 11.375H3.5C3.08579 11.375 2.75 11.0392 2.75 10.625V8.875C2.75 8.46079 3.08579 8.125 3.5 8.125H5.875Z"
+        stroke={isActive ? "none" : "var(--text-color)"}
+        fill={isActive ? "var(--icon-default-color-active)" : "none"}
+        strokeWidth="1"
+      />
+    </svg>
+  );
+}
+
+export function SimulationIcon({ isActive }: { isActive: boolean }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.3077 11.3433C12.3077 11.874 12.1503 12.3927 11.8555 12.834C11.5607 13.2752 11.1416 13.6191 10.6513 13.8222C10.1611 14.0253 9.62157 14.0784 9.10109 13.9749C8.58061 13.8713 8.10252 13.6158 7.72728 13.2406C7.35204 12.8653 7.09649 12.3872 6.99296 11.8667C6.88943 11.3463 6.94257 10.8068 7.14565 10.3165C7.34873 9.82622 7.69263 9.40717 8.13387 9.11235C8.57511 8.81752 9.09387 8.66016 9.62454 8.66016C10.3362 8.66016 11.0186 8.94284 11.5218 9.44603C12.025 9.94921 12.3077 10.6317 12.3077 11.3433Z"
+        stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+        fill={isActive ? "var(--text-color)" : "none"}
+        strokeWidth="1"
+      />
+      <path
+        d="M9.62477 5.30814C10.3657 5.30814 10.9663 4.70749 10.9663 3.96657C10.9663 3.22564 10.3657 2.625 9.62477 2.625C8.88384 2.625 8.2832 3.22564 8.2832 3.96657C8.2832 4.70749 8.88384 5.30814 9.62477 5.30814Z"
+        stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+        fill={isActive ? "var(--text-color)" : "none"}
+        strokeWidth="1"
+      />
+      <path
+        d="M3.59157 17.3745C4.33249 17.3745 4.93314 16.7739 4.93314 16.033C4.93314 15.292 4.33249 14.6914 3.59157 14.6914C2.85064 14.6914 2.25 15.292 2.25 16.033C2.25 16.7739 2.85064 17.3745 3.59157 17.3745Z"
+        stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+        fill={isActive ? "var(--text-color)" : "none"}
+        strokeWidth="1"
+      />
+      <path
+        d="M15.658 17.3745C16.3989 17.3745 16.9995 16.7739 16.9995 16.033C16.9995 15.292 16.3989 14.6914 15.658 14.6914C14.917 14.6914 14.3164 15.292 14.3164 16.033C14.3164 16.7739 14.917 17.3745 15.658 17.3745Z"
+        stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+        fill={isActive ? "var(--text-color)" : "none"}
+        strokeWidth="1"
+      />
+      <path
+        d="M7.50308 12.9844L4.65137 15.211"
+        stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+        strokeWidth="1"
+      />
+      <path
+        d="M14.5978 15.211L11.7461 12.9844"
+        stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+        strokeWidth="1"
+      />
+      <path
+        d="M9.625 8.659V5.30859"
+        stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+        strokeWidth="1"
+      />
+    </svg>
+  );
+}
+
+export function VisualizationIcon({ isActive }: { isActive: boolean }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 3.33203V16.6654"
+        stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.1665 7.5V16.6667"
+        stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.8335 7.5V16.6667"
+        stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function CartIcon({ isActive }: { isActive: boolean }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.33337 2L1.50998 2.05887C2.39001 2.35221 2.83002 2.49888 3.08169 2.84807C3.33337 3.19725 3.33337 3.66106 3.33337 4.58869V6.33333C3.33337 8.21893 3.33337 9.16173 3.91916 9.74753C4.50495 10.3333 5.44775 10.3333 7.33337 10.3333H8.66671M12.6667 10.3333H11.3334"
+        stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+        strokeLinecap="round"
+      />
+      <path
+        d="M5.00005 12C5.55233 12 6.00005 12.4477 6.00005 13C6.00005 13.5523 5.55233 14 5.00005 14C4.44776 14 4.00005 13.5523 4.00005 13C4.00005 12.4477 4.44776 12 5.00005 12Z"
+        stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+      <path
+        d="M11 12C11.5523 12 12 12.4477 12 13C12 13.5523 11.5523 14 11 14C10.4478 14 10 13.5523 10 13C10 12.4477 10.4478 12 11 12Z"
+        stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+      <path
+        d="M3.33337 4H5.33337M3.66671 8.66667H10.6812C11.3208 8.66667 11.6406 8.66667 11.8911 8.50153C12.1416 8.33633 12.2676 8.0424 12.5195 7.45453L12.8052 6.78787C13.3449 5.52863 13.6148 4.89902 13.3184 4.44951C13.0219 4 12.337 4 10.967 4H8.00004"
+        stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

app/src/components/icons/ExportToolsIcons.tsx

@@ -0,0 +1,667 @@
+export function ZoneIcon({ isActive }: { isActive: boolean }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_111_378)">
+        <path
+          d="M1.66665 16.6667H2.49998V17.5H0.833313V15.8333H1.66665V16.6667ZM18.3333 16.6667H17.5V17.5H19.1666V15.8333H18.3333V16.6667ZM0.833313 4.16667H1.66665V3.33333H2.49998V2.5H0.833313V4.16667ZM1.66665 5.83333H0.833313V7.5H1.66665V5.83333ZM1.66665 9.16667H0.833313V10.8333H1.66665V9.16667ZM18.3333 7.5H19.1666V5.83333H18.3333V7.5ZM18.3333 10.8333H19.1666V9.16667H18.3333V10.8333ZM1.66665 12.5H0.833313V14.1667H1.66665V12.5ZM18.3333 14.1667H19.1666V12.5H18.3333V14.1667ZM4.16665 3.33333H5.83331V2.5H4.16665V3.33333ZM9.16665 3.33333V2.5H7.49998V3.33333H9.16665ZM10.8333 3.33333H12.5V2.5H10.8333V3.33333ZM15.8333 2.5H14.1666V3.33333H15.8333V2.5ZM4.16665 17.5H5.83331V16.6667H4.16665V17.5ZM7.49998 17.5H9.16665V16.6667H7.49998V17.5ZM10.8333 17.5H12.5V16.6667H10.8333V17.5ZM14.1666 17.5H15.8333V16.6667H14.1666V17.5ZM17.5 3.33333H18.3333V4.16667H19.1666V2.5H17.5V3.33333ZM10.4166 6.66667V8.33333C10.4164 8.55428 10.3286 8.76611 10.1723 8.92235C10.0161 9.07858 9.80426 9.16645 9.58331 9.16667H4.16665C3.9457 9.16645 3.73387 9.07858 3.57763 8.92235C3.4214 8.76611 3.33353 8.55428 3.33331 8.33333V6.66667C3.33353 6.44572 3.4214 6.23389 3.57763 6.07765C3.73387 5.92142 3.9457 5.83355 4.16665 5.83333H9.58331C9.80426 5.83355 10.0161 5.92142 10.1723 6.07765C10.3286 6.23389 10.4164 6.44572 10.4166 6.66667ZM9.58415 8.33333L9.58331 6.66667H4.16665V8.33333H9.58415ZM16.6666 11.6667V13.3333C16.6664 13.5543 16.5786 13.7661 16.4223 13.9223C16.2661 14.0786 16.0543 14.1664 15.8333 14.1667H11.25C11.029 14.1664 10.8172 14.0786 10.661 13.9223C10.5047 13.7661 10.4169 13.5543 10.4166 13.3333V11.6667C10.4169 11.4457 10.5047 11.2339 10.661 11.0777C10.8172 10.9214 11.029 10.8336 11.25 10.8333H15.8333C16.0543 10.8336 16.2661 10.9214 16.4223 11.0777C16.5786 11.2339 16.6664 11.4457 16.6666 11.6667ZM15.8341 13.3333L15.8333 11.6667H11.25V13.3333H15.8341Z"
+          fill={
+            isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+          }
+        />
+        <path
+          d="M7.7443 13.5777V11.911C7.74408 11.69 7.65621 11.4782 7.49998 11.322C7.34375 11.1657 7.13191 11.0779 6.91097 11.0777H4.16665C3.9457 11.0779 3.73387 11.1657 3.57764 11.322C3.4214 11.4782 3.33353 11.69 3.33331 11.911V13.5777C3.33353 13.7986 3.4214 14.0104 3.57764 14.1667C3.73387 14.3229 3.9457 14.4108 4.16665 14.411H6.91097C7.13191 14.4108 7.34375 14.3229 7.49998 14.1667C7.65621 14.0104 7.74408 13.7986 7.7443 13.5777Z"
+          fill={
+            isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+          }
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_111_378">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export function AsileIcon({ isActive }: { isActive: boolean }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.25821 9.16667H1.13638L1.13638 13.4832L3.25821 9.16667Z"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+      <path
+        d="M4.57633 16.6667H1.53737L5.22405 9.16667L8.26301 9.16667L4.57633 16.6667Z"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+      <path
+        d="M9.82919 16.6667H6.79023L10.4769 9.16667L13.5159 9.16667L9.82919 16.6667Z"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+      <path
+        d="M15.1917 16.6667H12.1528L15.8395 9.16667L18.8637 9.16667V9.1967L15.1917 16.6667Z"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+      <path
+        d="M18.8637 14.3162V16.6667H17.7083L18.8637 14.3162Z"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+      <path
+        d="M7.75002 0.833332L10 3.08333L4.75002 8.33333H2.50002V6.08333L7.75002 0.833332Z"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+    </svg>
+  );
+}
+
+export function FloorIcon({ isActive }: { isActive: boolean }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        opacity="0.3"
+        x="3.33333"
+        y="3.33333"
+        width="12.5"
+        height="12.5"
+        fill="var(--text-disabled)"
+      />
+      <path
+        d="M15.8333 15.8333V3.33333H3.33333V15.8333"
+        stroke={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
+      />
+      <path
+        d="M11.0833 6.66667L13.3333 8.91667L8.08333 14.1667H5.83333V11.9167L11.0833 6.66667Z"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+      <circle
+        cx="3.30001"
+        cy="3.3"
+        r="1.2"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+      <circle
+        cx="15.8"
+        cy="3.3"
+        r="1.2"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+      <circle
+        cx="15.8"
+        cy="15.8"
+        r="1.2"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+      <circle
+        cx="3.30001"
+        cy="15.8"
+        r="1.2"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+    </svg>
+  );
+}
+
+export function WallIcon({ isActive }: { isActive: boolean }) {
+  return isActive ? (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_204_497)">
+        <path
+          d="M12.6101 7.17339H6.72171V10.7064H12.6101V7.17339Z"
+          fill="var(--icon-default-color-active)"
+          stroke="var(--accent-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M18.4986 7.17339H12.6102V10.7064H18.4986V7.17339Z"
+          fill="var(--icon-default-color-active)"
+          stroke="var(--accent-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M6.72172 7.17339H0.833313V10.7064H6.72172V7.17339Z"
+          fill="var(--icon-default-color-active)"
+          stroke="var(--accent-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.5544 10.7064H9.66595V14.2395H15.5544V10.7064Z"
+          fill="var(--icon-default-color-active)"
+          stroke="var(--accent-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.66594 10.7064H3.77753V14.2395H9.66594V10.7064Z"
+          fill="var(--icon-default-color-active)"
+          stroke="var(--accent-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.5544 3.64035H9.66595V7.1734H15.5544V3.64035Z"
+          fill="var(--icon-default-color-active)"
+          stroke="var(--accent-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.66594 3.64035H3.77753V7.1734H9.66594V3.64035Z"
+          fill="var(--icon-default-color-active)"
+          stroke="var(--accent-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M7.89941 14.8451L17.2484 5.49617L20.7194 8.96713L11.3704 18.3161H7.89941V14.8451Z"
+          fill="var(--icon-default-color-active)"
+          stroke="var(--accent-color)"
+          strokeWidth="1.08709"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_204_497">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  ) : (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_111_392)">
+        <path
+          d="M12.6101 7.17339H6.72173V10.7064H12.6101V7.17339Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M18.4986 7.17339H12.6102V10.7064H18.4986V7.17339Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M6.72174 7.17339H0.833328V10.7064H6.72174V7.17339Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.5544 10.7064H9.66596V14.2395H15.5544V10.7064Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.66594 10.7064H3.77753V14.2395H9.66594V10.7064Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.5544 3.64035H9.66596V7.1734H15.5544V3.64035Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.66594 3.64035H3.77753V7.1734H9.66594V3.64035Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M7.89942 14.8451L17.2484 5.49617L20.7194 8.96713L11.3704 18.3161H7.89942V14.8451Z"
+          fill="var(--text-color)"
+          stroke="var(--background-color)"
+          strokeWidth="1.08709"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_111_392">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export function WindowIcon({ isActive }: { isActive: boolean }) {
+  return isActive ? (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 2.5V17.5V2.5ZM15.8333 10H4.16667H15.8333ZM15.8333 8.33333C15.8333 6.78624 15.2188 5.30251 14.1248 4.20854C13.0308 3.11458 11.5471 2.5 10 2.5C8.4529 2.5 6.96917 3.11458 5.87521 4.20854C4.78125 5.30251 4.16667 6.78624 4.16667 8.33333V17.5H15.8333V8.33333Z"
+        fill="var(--icon-default-color-active)"
+      />
+      <path
+        d="M10 2.5V17.5M10 2.5C11.5471 2.5 13.0308 3.11458 14.1248 4.20854C15.2188 5.30251 15.8333 6.78624 15.8333 8.33333V17.5H4.16667V8.33333C4.16667 6.78624 4.78125 5.30251 5.87521 4.20854C6.96917 3.11458 8.4529 2.5 10 2.5ZM15.8333 10H4.16667"
+        stroke="var(--accent-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ) : (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 2.5V17.5M10 2.5C11.5471 2.5 13.0308 3.11458 14.1248 4.20854C15.2188 5.30251 15.8333 6.78624 15.8333 8.33333V17.5H4.16667V8.33333C4.16667 6.78624 4.78125 5.30251 5.87522 4.20854C6.96918 3.11458 8.45291 2.5 10 2.5ZM15.8333 10H4.16667"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function DoorIcon({ isActive }: { isActive: boolean }) {
+  return isActive ? (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.8333 16.0525V3.94749C10.8333 3.41696 10.3442 3.0215 9.8254 3.13266L5.65873 4.02552C5.27451 4.10785 5.00001 4.4474 5.00001 4.84035V15.1597C5.00001 15.5526 5.27451 15.8922 5.65873 15.9745L9.8254 16.8674C10.3442 16.9785 10.8333 16.5831 10.8333 16.0525Z"
+        fill="var(--icon-default-color-active)"
+      />
+      <path
+        d="M12.9167 4.16667H14.1667C14.6269 4.16667 15 4.53977 15 5.00001V14.5833C15 15.0436 14.6269 15.4167 14.1667 15.4167H12.9167M5.00001 4.84035V15.1597C5.00001 15.5526 5.27451 15.8922 5.65873 15.9745L9.8254 16.8674C10.3442 16.9785 10.8333 16.5831 10.8333 16.0525V3.94749C10.8333 3.41696 10.3442 3.0215 9.8254 3.13266L5.65873 4.02552C5.27451 4.10785 5.00001 4.4474 5.00001 4.84035Z"
+        stroke="var(--icon-default-color-active)"
+        strokeLinecap="round"
+      />
+      <ellipse
+        cx="8.75001"
+        cy="10"
+        rx="0.416667"
+        ry="0.833333"
+        fill="var(--accent-color)"
+      />
+    </svg>
+  ) : (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.9167 4.16667H14.1667C14.6269 4.16667 15 4.53976 15 5V14.5833C15 15.0436 14.6269 15.4167 14.1667 15.4167H12.9167M5.00002 4.84035V15.1597C5.00002 15.5526 5.27452 15.8922 5.65874 15.9745L9.82541 16.8673C10.3442 16.9785 10.8333 16.583 10.8333 16.0525V3.94749C10.8333 3.41695 10.3442 3.02149 9.82541 3.13266L5.65874 4.02551C5.27452 4.10785 5.00002 4.4474 5.00002 4.84035Z"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+      />
+      <ellipse
+        cx="8.75001"
+        cy="10"
+        rx="0.416667"
+        ry="0.833333"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function PillerIcon({ isActive }: { isActive: boolean }) {
+  return isActive ? (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 5L5.5 6V18.5H14.5V6.5L13.5 5H7Z"
+        fill="var(--icon-default-color-active)"
+      />
+      <path
+        d="M14.7545 1.94309H5.22935C4.9007 1.94074 4.57782 2.04074 4.29614 2.23213C4.01447 2.42352 3.78489 2.69889 3.63259 3.02804C3.4803 3.35718 3.41117 3.72738 3.4328 4.098C3.45444 4.46862 3.56599 4.82535 3.75522 5.12904C3.94445 5.43272 4.20405 5.67163 4.50553 5.81955C4.807 5.96747 5.13871 6.01868 5.46425 5.96756C5.78978 5.91644 6.09657 5.76497 6.35094 5.52976C6.60531 5.29456 6.79744 4.98471 6.90624 4.63423H13.1088C13.2185 4.98209 13.4107 5.2892 13.6644 5.522C13.918 5.75479 14.2234 5.90432 14.5472 5.95425C14.871 6.00417 15.2007 5.95258 15.5003 5.80509C15.7999 5.65761 16.0578 5.41991 16.246 5.11797C16.4341 4.81603 16.5452 4.46146 16.5671 4.093C16.589 3.72454 16.5209 3.35636 16.3702 3.02869C16.2195 2.70102 15.992 2.42646 15.7125 2.235C15.4331 2.04355 15.1125 1.94257 14.7857 1.94309H14.7545Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--accent-color)"
+        strokeMiterlimit="10"
+      />
+    </svg>
+  ) : (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.7545 1.9431H5.22935C4.9007 1.94074 4.57782 2.04075 4.29614 2.23214C4.01447 2.42352 3.78489 2.6989 3.63259 3.02804C3.4803 3.35719 3.41117 3.72738 3.4328 4.098C3.45444 4.46863 3.56599 4.82535 3.75522 5.12904C3.94445 5.43273 4.20405 5.67164 4.50553 5.81955C4.807 5.96747 5.13871 6.01868 5.46425 5.96756C5.78978 5.91644 6.09657 5.76497 6.35094 5.52977C6.60531 5.29456 6.79744 4.98472 6.90624 4.63423H13.1088C13.2185 4.9821 13.4107 5.2892 13.6644 5.522C13.918 5.7548 14.2234 5.90433 14.5472 5.95425C14.871 6.00418 15.2007 5.95258 15.5003 5.8051C15.7999 5.65761 16.0578 5.41992 16.246 5.11798C16.4341 4.81604 16.5452 4.46147 16.5671 4.093C16.589 3.72454 16.5209 3.35636 16.3702 3.02869C16.2195 2.70102 15.992 2.42646 15.7125 2.23501C15.4331 2.04355 15.1125 1.94257 14.7857 1.9431H14.7545Z"
+        stroke="var(--text-color)"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M14.3445 18.7347V5.86805"
+        stroke="var(--text-color)"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M5.65552 18.7347V5.86805"
+        stroke="var(--text-color)"
+        strokeMiterlimit="10"
+      />
+    </svg>
+  );
+}
+
+export function CommentIcon({ isActive }: { isActive: boolean }) {
+  return isActive ? (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.50833 16.6667H10C11.5423 16.6654 13.0365 16.1295 14.2279 15.1502C15.4194 14.1709 16.2345 12.8087 16.5343 11.2958C16.8341 9.78295 16.6 8.21292 15.872 6.85324C15.144 5.49356 13.9671 4.42835 12.5418 3.83909C11.1165 3.24983 9.53103 3.17298 8.05542 3.62164C6.57982 4.07029 5.30542 5.01669 4.44935 6.2996C3.59328 7.5825 3.2085 9.12253 3.36057 10.6573C3.68484 12.4117 4.0765 13.3117 5.28333 14.7167C5.44034 14.8705 5.5302 15.0802 5.53333 15.3C5.53287 15.4103 5.51054 15.5193 5.46762 15.6209C5.42471 15.7224 5.36207 15.8145 5.28333 15.8917L4.50833 16.6667Z"
+        fill="var(--icon-default-color-active)"
+      />
+      <path
+        d="M6.66666 8.33333H13.3333"
+        stroke="var(--accent-color)"
+        strokeLinecap="round"
+      />
+      <path
+        d="M6.66666 11.6667H13.3333"
+        stroke="var(--accent-color)"
+        strokeLinecap="round"
+      />
+    </svg>
+  ) : (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.15478 16.3131L3.30122 17.1667H4.50833H10H10.0004C11.6584 17.1654 13.2646 16.5892 14.5454 15.5365C15.8263 14.4837 16.7025 13.0194 17.0247 11.393C17.347 9.76667 17.0954 8.07889 16.3128 6.61724C15.5302 5.15558 14.2651 4.01048 12.7329 3.37703C11.2007 2.74358 9.49625 2.66096 7.90998 3.14327C6.3237 3.62557 4.95373 4.64295 4.03345 6.02207C3.11317 7.40119 2.69954 9.05673 2.86301 10.7066L2.86508 10.7275L2.8689 10.7482C3.03455 11.6444 3.22303 12.3548 3.5379 13.0295C3.8533 13.7053 4.28368 14.3202 4.90405 15.0425L4.91804 15.0588L4.93338 15.0738C4.99509 15.1343 5.03087 15.2163 5.03329 15.3025C5.03252 15.3451 5.02362 15.3871 5.00706 15.4263C4.98989 15.4669 4.96483 15.5037 4.93334 15.5346L4.93332 15.5346L4.92978 15.5381L4.15478 16.3131Z"
+        stroke="var(--text-color)"
+      />
+      <path
+        d="M6.66666 8.33333H13.3333"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+      />
+      <path
+        d="M6.66666 11.6667H13.3333"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function FreeMoveIcon({ isActive }: { isActive: boolean }) {
+  return isActive ? (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.52948 11.2231L4.5297 11.2238C4.57639 11.37 4.62642 11.5411 4.68209 11.7315C5.02786 12.9139 5.59104 14.8398 6.92229 16.1733C8.01267 17.2528 9.37219 17.8333 11.2539 17.8333C12.7432 17.8333 13.9578 17.426 14.7979 16.6258C15.6333 15.8298 16.1667 14.58 16.1667 12.7517V5.48155C16.1667 5.38231 16.1346 5.31585 16.0979 5.27755C16.0663 5.24462 15.9931 5.19203 15.8225 5.19203C15.6652 5.19203 15.6035 5.24099 15.5775 5.26928C15.5444 5.30544 15.5114 5.37398 15.5114 5.48155V10.3909V11.2748L14.7538 10.8194C14.5073 10.6712 14.2271 10.535 13.9286 10.4193L13.6092 10.2956V9.95311V3.05037C13.6092 2.95469 13.5773 2.88608 13.5381 2.84499C13.5043 2.80944 13.4337 2.76081 13.2816 2.76081C13.1295 2.76081 13.0589 2.80945 13.025 2.845C12.9859 2.8861 12.9539 2.95471 12.9539 3.05037V9.51534V10.1002L12.3762 10.0093C12.0954 9.96505 11.8148 9.9356 11.5263 9.92086L11.0518 9.89662V9.42151V2.44843C11.0518 2.34942 11.0199 2.28465 10.9849 2.24804C10.9548 2.21665 10.8855 2.16667 10.7242 2.16667C10.5629 2.16667 10.4936 2.21665 10.4635 2.24805C10.4284 2.28467 10.3965 2.34944 10.3965 2.44843V9.47624V9.91041L9.96665 9.9713C9.6443 10.017 9.36015 10.0684 9.12277 10.1315L8.49442 10.2984V9.64822V3.4725C8.49442 3.37299 8.46214 3.30493 8.42514 3.26578C8.39386 3.23267 8.3248 3.18294 8.16676 3.18294C8.00276 3.18294 7.93529 3.23378 7.90656 3.2644C7.87167 3.30161 7.8391 3.36909 7.8391 3.4725V11.0163C7.8391 11.4317 7.81744 11.7993 7.74531 12.0757C7.70946 12.2131 7.64994 12.374 7.53699 12.5086C7.40837 12.6617 7.21968 12.7671 6.99152 12.7671C6.77109 12.7671 6.6027 12.6614 6.49863 12.5746C6.39098 12.4848 6.301 12.3729 6.22702 12.2662C6.07833 12.0517 5.93685 11.773 5.80731 11.493C5.69222 11.2442 5.57693 10.9728 5.46725 10.7147C5.45175 10.6782 5.43636 10.642 5.4211 10.6061C5.2955 10.311 5.17904 10.0416 5.0709 9.82454C4.85819 9.39911 4.72377 9.19607 4.59853 9.08661C4.50746 9.007 4.39371 8.95217 4.1196 8.95217C4.1196 8.95217 4.11946 8.95217 4.11917 8.95218L4.11791 8.95224L4.11306 8.95265C4.10879 8.95312 4.10293 8.95397 4.09552 8.95549C4.08045 8.95856 4.06138 8.96386 4.03928 8.97213C3.99404 8.98906 3.94671 9.01448 3.90579 9.04474C3.86843 9.07237 3.84566 9.09712 3.83408 9.11299C3.84264 9.27737 3.92405 9.5635 4.07023 9.96621C4.11734 10.096 4.17089 10.2372 4.22604 10.3827C4.3328 10.6642 4.4456 10.9617 4.52948 11.2231Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+      />
+    </svg>
+  ) : (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.6667 12.7517C16.6667 16.6057 14.4072 18.3333 11.2539 18.3333C9.25097 18.3333 7.76123 17.708 6.56942 16.5275C4.91414 14.8702 4.36788 12.3609 4.05339 11.3759C3.80507 10.602 3.33332 9.60916 3.33332 9.08537C3.33332 8.74923 3.80507 8.45218 4.1196 8.45218C4.83136 8.45218 5.09621 8.75703 5.5183 9.60133C5.98178 10.5316 6.54456 12.2671 6.99152 12.2671C7.24806 12.2671 7.3391 11.8371 7.3391 11.0163V3.4725C7.3391 3.05818 7.60395 2.68294 8.16676 2.68294C8.72128 2.68294 8.99442 3.05818 8.99442 3.4725V9.64822C9.25927 9.57788 9.56547 9.52314 9.89652 9.47625V2.44843C9.89652 2.0341 10.1697 1.66668 10.7242 1.66668C11.2787 1.66668 11.5518 2.0341 11.5518 2.44843V9.42151C11.858 9.43716 12.156 9.46844 12.4539 9.51534V3.05037C12.4539 2.63605 12.7354 2.26081 13.2816 2.26081C13.8279 2.26081 14.1092 2.63605 14.1092 3.05037V9.95311C14.432 10.0782 14.7383 10.2267 15.0114 10.3909V5.48156C15.0114 5.06723 15.268 4.69203 15.8225 4.69203C16.3935 4.69203 16.6667 5.06723 16.6667 5.48156V12.7517Z"
+        stroke="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function DeleteIcon({ isActive }: { isActive: boolean }) {
+  return isActive ? (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15 5V15C15 15.9205 14.2538 16.6667 13.3333 16.6667H6.66666C5.74619 16.6667 4.99999 15.9205 4.99999 15V5M3.33333 5H16.6667H3.33333Z"
+        fill="var(--icon-default-color-active)"
+      />
+      <path
+        d="M15 5V15C15 15.9205 14.2538 16.6667 13.3333 16.6667H6.66666C5.74619 16.6667 4.99999 15.9205 4.99999 15V5M3.33333 5H16.6667"
+        stroke="var(--icon-default-color-active)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.5 5V4.16667C12.5 3.24619 11.7538 2.5 10.8333 2.5H9.16667C8.24619 2.5 7.5 3.24619 7.5 4.16667V5"
+        stroke="var(--icon-default-color-active)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.33331 8.33333V13.3333M11.6666 8.33333V13.3333"
+        stroke="var(--accent-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ) : (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.33332 8.33333V13.3333M11.6667 8.33333V13.3333M15 5V15C15 15.9205 14.2538 16.6667 13.3333 16.6667H6.66666C5.74618 16.6667 4.99999 15.9205 4.99999 15V5M3.33332 5H16.6667M12.5 5V4.16667C12.5 3.24619 11.7538 2.5 10.8333 2.5H9.16666C8.24618 2.5 7.49999 3.24619 7.49999 4.16667V5"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function CursorIcon({ isActive }: { isActive: boolean }) {
+  return isActive ? (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.9284 10.6169C15.3983 9.82645 16.1332 9.43125 16.3192 8.95548C16.4806 8.54266 16.4352 8.07759 16.1971 7.70373C15.9226 7.27292 15.1251 7.02726 13.5301 6.53593L7.50159 4.67891C6.15581 4.26436 5.48292 4.05709 5.03794 4.22513C4.65059 4.37141 4.34871 4.68287 4.2146 5.0746C4.06054 5.52461 4.28873 6.1907 4.74513 7.52288L6.76674 13.4239C7.32812 15.0625 7.60882 15.8819 8.0565 16.1423C8.44476 16.3681 8.91825 16.3923 9.32748 16.2071C9.79936 15.9935 10.1619 15.207 10.8871 13.634L11.4229 12.4718C11.5383 12.2214 11.596 12.0962 11.6751 11.9869C11.7451 11.8898 11.8275 11.8023 11.92 11.7263C12.0243 11.6408 12.1457 11.5755 12.3885 11.4449L13.9284 10.6169Z"
+        fill="var(--icon-default-color-active)"
+      />
+    </svg>
+  ) : (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.9284 10.6169C15.3983 9.82645 16.1332 9.43125 16.3192 8.95548C16.4806 8.54266 16.4352 8.07759 16.1971 7.70373C15.9226 7.27292 15.1251 7.02726 13.5301 6.53593L7.50159 4.67891C6.15581 4.26436 5.48292 4.05709 5.03794 4.22513C4.65059 4.37141 4.34871 4.68287 4.2146 5.0746C4.06054 5.52461 4.28873 6.1907 4.74513 7.52288L6.76674 13.4239C7.32812 15.0625 7.60882 15.8819 8.0565 16.1423C8.44476 16.3681 8.91825 16.3923 9.32748 16.2071C9.79936 15.9935 10.1619 15.207 10.8871 13.634L11.4229 12.4718C11.5383 12.2214 11.596 12.0962 11.6751 11.9869C11.7451 11.8898 11.8275 11.8023 11.92 11.7263C12.0243 11.6408 12.1457 11.5755 12.3885 11.4449L13.9284 10.6169Z"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function PlayIcon({ isActive }: { isActive: boolean }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.9111 8.51444C17.363 9.37988 17.363 11.6201 15.9111 12.4856L7.14505 17.7109C5.73403 18.552 4 17.4572 4 15.7253V5.27468C4 3.54276 5.73403 2.44801 7.14505 3.28911L15.9111 8.51444Z"
+        stroke={isActive ? "none" : "var(--text-color)"}
+        fill={isActive ? "var(--icon-default-color-active)" : "none"}
+      />
+    </svg>
+  );
+}
+
+export function PenIcon({ isActive }: { isActive: boolean }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.5 15.5L12.7929 16.7929C13.1834 17.1834 13.8166 17.1834 14.2071 16.7929L16.2929 14.7071C16.6834 14.3166 16.6834 13.6834 16.2929 13.2929L15 12M11.5 15.5L5.58952 13.6474C5.22732 13.5568 4.94573 13.2721 4.85925 12.9089L2.5 3M11.5 15.5L15 12M2.5 3L12.4089 5.35925C12.7721 5.44573 13.0568 5.72732 13.1474 6.08952L15 12M2.5 3L7.29941 7.78644M9 8.5C9 9.05228 8.55228 9.5 8 9.5C7.44772 9.5 7 9.05228 7 8.5C7 7.94772 7.44772 7.5 8 7.5C8.55228 7.5 9 7.94772 9 8.5Z"
+        stroke={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function SaveTemplateIcon({ isActive }: { isActive: boolean }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.5 13.4104V9.24922C17.5 5.67539 17.5 3.88847 16.4017 2.77822C15.3033 1.66797 13.5355 1.66797 10 1.66797C6.46447 1.66797 4.6967 1.66797 3.59835 2.77822C2.5 3.88847 2.5 5.67539 2.5 9.24922V13.4104C2.5 15.9909 2.5 17.2811 3.11176 17.8449C3.40351 18.1138 3.77179 18.2827 4.1641 18.3276C4.98668 18.4217 5.94727 17.5721 7.86847 15.8728C8.71767 15.1217 9.14233 14.7461 9.63358 14.6472C9.8755 14.5985 10.1245 14.5985 10.3664 14.6472C10.8577 14.7461 11.2823 15.1217 12.1315 15.8728C14.0527 17.5721 15.0133 18.4217 15.8359 18.3276C16.2282 18.2827 16.5965 18.1138 16.8882 17.8449C17.5 17.2811 17.5 15.9909 17.5 13.4104Z"
+        stroke={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
+      />
+      <path
+        d="M12.5 5H7.5"
+        stroke={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function MeasureToolIcon({ isActive }: { isActive: boolean }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.07495 10.248C7.58308 10.3976 8.18027 10.4818 8.82142 10.4821C9.67666 10.4811 10.4522 10.3335 11.0449 10.0758C11.341 9.94594 11.5943 9.78867 11.7886 9.5888C11.9812 9.39173 12.1201 9.13327 12.1197 8.84166C12.1201 8.55 11.9812 8.29125 11.7886 8.09447C11.4962 7.79625 11.0754 7.58705 10.5676 7.43531C10.0598 7.28569 9.46267 7.20117 8.82147 7.20117C7.96628 7.20183 7.19069 7.34939 6.59767 7.60748C6.30152 7.73737 6.0483 7.89459 5.854 8.09447C5.66144 8.29125 5.5225 8.55 5.52283 8.84166C5.5225 9.13327 5.66139 9.39169 5.854 9.5888C6.14627 9.88669 6.56748 10.0962 7.07495 10.248ZM6.36348 8.58806C6.51831 8.42423 6.84391 8.241 7.27586 8.11561C7.70744 7.98811 8.24336 7.9102 8.82142 7.91058C9.59177 7.9095 10.288 8.0498 10.7608 8.25764C10.9971 8.36016 11.1755 8.48002 11.2787 8.58811C11.384 8.69859 11.41 8.77795 11.4103 8.8417C11.41 8.90508 11.384 8.98477 11.2787 9.09525C11.1242 9.25875 10.7986 9.44231 10.3667 9.5677C9.93508 9.6952 9.39953 9.77278 8.82142 9.77278C8.05075 9.77344 7.35452 9.63351 6.88169 9.42572C6.64544 9.32316 6.46703 9.20334 6.36353 9.09525C6.25825 8.98477 6.23256 8.90508 6.23223 8.8417C6.23251 8.77791 6.2582 8.69855 6.36348 8.58806Z"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+      <path
+        d="M13.5094 5.1167C13.5115 5.1174 13.5139 5.11806 13.516 5.11876L13.5433 5.12673L13.5094 5.1167Z"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+      <path
+        d="M4.13305 18.8834C4.13028 18.8827 4.12747 18.8817 4.12471 18.8806L4.09039 18.8706L4.13305 18.8834Z"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+      <path
+        d="M17.4073 11.4456V8.97325C17.4077 8.60876 17.3207 8.25954 17.1727 7.94355C17.0242 7.62686 16.8165 7.34174 16.5698 7.08811C15.8326 6.33495 14.751 5.79382 13.4528 5.40542L13.4458 5.40345C12.1412 5.01874 10.604 4.80163 8.9538 4.80127C6.75295 4.80325 4.75594 5.18436 3.23696 5.84525L3.23628 5.84561C2.47778 6.17821 1.82951 6.58256 1.33717 7.08842C1.0909 7.34174 0.883095 7.62686 0.734718 7.94355C0.586655 8.25958 0.499642 8.6088 0.500001 8.9733V15.0268C0.499642 15.3912 0.586655 15.7402 0.734718 16.0562C0.883095 16.3729 1.0909 16.658 1.33721 16.9116C2.07451 17.6648 3.15529 18.2059 4.4529 18.5939L4.46153 18.5966C5.76646 18.9814 7.30337 19.1981 8.95385 19.1988H23.5V11.4457H17.4073V11.4456ZM2.19167 7.91665C2.70288 7.38486 3.62108 6.88991 4.79849 6.54437C5.97562 6.19681 7.4093 5.99067 8.95385 5.99098C11.013 5.98999 12.8759 6.35844 14.1944 6.93573C14.8537 7.22319 15.3745 7.56311 15.7157 7.91665C16.0586 8.27283 16.2173 8.62367 16.2177 8.97325C16.2173 9.32243 16.0586 9.67368 15.7157 10.0299C15.2045 10.5613 14.2863 11.0562 13.1089 11.4018C11.9318 11.7497 10.4984 11.9555 8.9538 11.9555C6.89436 11.9562 5.0315 11.5878 3.71295 11.0108C3.05367 10.7233 2.53285 10.3834 2.19162 10.0299C1.84869 9.67368 1.69003 9.32243 1.68967 8.97325C1.69007 8.62372 1.84874 8.27283 2.19167 7.91665ZM16.2176 10.488V11.9555H13.6018C13.9049 11.8566 14.1973 11.751 14.4665 11.6335C15.1832 11.3198 15.7758 10.9441 16.2043 10.5026L16.2176 10.488ZM22.3103 18.009H20.2707V15.0058H19.5909V18.009H18.0898V16.3824H17.4099V18.009H15.9085V15.0058H15.2287V18.009H13.7272V16.3824H13.0474V18.009H11.5463V15.0058H10.8665V18.009H9.36542V16.3824H8.68558V18.003C8.16938 17.9951 7.66778 17.9645 7.18415 17.9128V15.0058H6.5043V17.8251C5.43642 17.6624 4.48039 17.4002 3.71295 17.0643C3.05367 16.7768 2.53285 16.4369 2.19162 16.0834C1.84869 15.7271 1.69003 15.3759 1.68967 15.0267V10.488L1.70296 10.5026C2.34598 11.1632 3.35609 11.683 4.60586 12.0538C5.85604 12.4229 7.34848 12.6351 8.95376 12.6354H22.3102V18.009H22.3103Z"
+        fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+      />
+    </svg>
+  );
+}

app/src/components/icons/HeaderIcons.tsx

@@ -0,0 +1,79 @@
+export function ProjectIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11 5.29844V4.51127C11 3.70744 10.2251 3.1309 9.45518 3.36188L5.85518 4.44188C5.3476 4.59416 5 5.06134 5 5.59127V13.4056C5 13.9355 5.3476 14.4027 5.85518 14.555L9.45518 15.635C10.2251 15.866 11 15.2894 11 14.4856V13.6984M11 5.29844H13.4C13.7314 5.29844 14 5.56707 14 5.89844V13.0984C14 13.4298 13.7314 13.6984 13.4 13.6984H11M11 5.29844V13.6984"
+        stroke="var(--text-color)"
+        strokeWidth="1.2"
+      />
+    </svg>
+  );
+}
+
+export function ToggleSidebarIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="3.5"
+        y="5.13672"
+        width="17"
+        height="13.7273"
+        rx="3.59091"
+        stroke="var(--text-color)"
+      />
+      <rect
+        x="8.72729"
+        y="5.45312"
+        width="0.818182"
+        height="13.0909"
+        fill="var(--text-color)"
+      />
+      <circle
+        cx="6.27271"
+        cy="8.72834"
+        r="0.818182"
+        fill="var(--text-color)"
+      />
+      <circle
+        cx="6.27271"
+        cy="11.1815"
+        r="0.818182"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function AppDockIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <ellipse cx="3" cy="3" rx="2" ry="2" fill="var(--icon-default-color)" />
+      <ellipse cx="10" cy="3" rx="2" ry="2" fill="var(--icon-default-color)" />
+      <ellipse cx="17" cy="3" rx="2" ry="2" fill="var(--icon-default-color)" />
+      <ellipse cx="3" cy="10" rx="2" ry="2" fill="var(--icon-default-color)" />
+      <ellipse cx="10" cy="10" rx="2" ry="2" fill="var(--icon-default-color)" />
+      <ellipse cx="17" cy="10" rx="2" ry="2" fill="var(--icon-default-color)" />
+      <ellipse cx="3" cy="17" rx="2" ry="2" fill="var(--icon-default-color)" />
+      <ellipse cx="10" cy="17" rx="2" ry="2" fill="var(--icon-default-color)" />
+      <ellipse cx="17" cy="17" rx="2" ry="2" fill="var(--icon-default-color)" />
+    </svg>
+  );
+}

app/src/components/icons/LogIcons.tsx

@@ -0,0 +1,149 @@
+export const LogInfoIcon = () => {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="7" cy="7" r="4" fill="white" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.8327 6.99935C12.8327 10.221 10.221 12.8327 6.99935 12.8327C3.77769 12.8327 1.16602 10.221 1.16602 6.99935C1.16602 3.77769 3.77769 1.16602 6.99935 1.16602C10.221 1.16602 12.8327 3.77769 12.8327 6.99935ZM6.99935 10.3535C7.24097 10.3535 7.43685 10.1576 7.43685 9.91602V6.41602C7.43685 6.1744 7.24097 5.97852 6.99935 5.97852C6.75773 5.97852 6.56185 6.1744 6.56185 6.41602V9.91602C6.56185 10.1576 6.75773 10.3535 6.99935 10.3535ZM6.99935 4.08268C7.32152 4.08268 7.58268 4.34385 7.58268 4.66602C7.58268 4.98818 7.32152 5.24935 6.99935 5.24935C6.67717 5.24935 6.41602 4.98818 6.41602 4.66602C6.41602 4.34385 6.67717 4.08268 6.99935 4.08268Z"
+        fill="#1773fd"
+      />
+    </svg>
+  );
+};
+
+export const WarningIcon = () => {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="7" cy="7" r="5" fill="#FFFFFF" />
+      <path
+        d="M6.99935 1.16602C5.84563 1.16602 4.71781 1.50813 3.75853 2.14911C2.79924 2.79008 2.05157 3.70113 1.61005 4.76703C1.16854 5.83293 1.05302 7.00582 1.2781 8.13737C1.50318 9.26893 2.05876 10.3083 2.87456 11.1241C3.69037 11.9399 4.72977 12.4955 5.86132 12.7206C6.99288 12.9457 8.16577 12.8302 9.23167 12.3886C10.2976 11.9471 11.2086 11.1995 11.8496 10.2402C12.4906 9.28089 12.8327 8.15307 12.8327 6.99935C12.8327 6.2333 12.6818 5.47476 12.3886 4.76703C12.0955 4.0593 11.6658 3.41623 11.1241 2.87456C10.5825 2.33288 9.9394 1.9032 9.23167 1.61005C8.52394 1.3169 7.7654 1.16602 6.99935 1.16602ZM6.41602 4.08268C6.41602 3.92797 6.47748 3.7796 6.58687 3.6702C6.69627 3.56081 6.84464 3.49935 6.99935 3.49935C7.15406 3.49935 7.30243 3.56081 7.41183 3.6702C7.52123 3.7796 7.58268 3.92797 7.58268 4.08268V7.58268C7.58268 7.73739 7.52123 7.88576 7.41183 7.99516C7.30243 8.10456 7.15406 8.16601 6.99935 8.16601C6.84464 8.16601 6.69627 8.10456 6.58687 7.99516C6.47748 7.88576 6.41602 7.73739 6.41602 7.58268V4.08268ZM6.99935 11.0827C6.82629 11.0827 6.65712 11.0314 6.51323 10.9352C6.36933 10.8391 6.25718 10.7024 6.19096 10.5425C6.12473 10.3826 6.1074 10.2067 6.14116 10.037C6.17493 9.86724 6.25826 9.71133 6.38063 9.58896C6.503 9.46659 6.65891 9.38326 6.82865 9.34949C6.99838 9.31573 7.17431 9.33306 7.3342 9.39929C7.49408 9.46551 7.63074 9.57766 7.72689 9.72156C7.82303 9.86545 7.87435 10.0346 7.87435 10.2077C7.87435 10.4397 7.78216 10.6623 7.61807 10.8264C7.45398 10.9905 7.23142 11.0827 6.99935 11.0827Z"
+        fill="#EDAE01"
+      />
+    </svg>
+  );
+};
+
+export const ErrorIcon = () => {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="7" cy="7" r="5" fill="white" />
+      <path
+        d="M6.99935 1.16602C3.78518 1.16602 1.16602 3.78518 1.16602 6.99935C1.16602 10.2135 3.78518 12.8327 6.99935 12.8327C10.2135 12.8327 12.8327 10.2135 12.8327 6.99935C12.8327 3.78518 10.2135 1.16602 6.99935 1.16602ZM8.95935 8.34102C9.12852 8.51018 9.12852 8.79018 8.95935 8.95935C8.87185 9.04685 8.76102 9.08768 8.65018 9.08768C8.53935 9.08768 8.42852 9.04685 8.34102 8.95935L6.99935 7.61768L5.65768 8.95935C5.57018 9.04685 5.45935 9.08768 5.34852 9.08768C5.23768 9.08768 5.12685 9.04685 5.03935 8.95935C4.87018 8.79018 4.87018 8.51018 5.03935 8.34102L6.38102 6.99935L5.03935 5.65768C4.87018 5.48852 4.87018 5.20852 5.03935 5.03935C5.20852 4.87018 5.48852 4.87018 5.65768 5.03935L6.99935 6.38102L8.34102 5.03935C8.51018 4.87018 8.79018 4.87018 8.95935 5.03935C9.12852 5.20852 9.12852 5.48852 8.95935 5.65768L7.61768 6.99935L8.95935 8.34102Z"
+        fill="#FD4E22"
+      />
+    </svg>
+  );
+};
+
+export const SucessIcon = () => {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="7" cy="7" r="4" fill="white" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.8327 6.99935C12.8327 10.221 10.221 12.8327 6.99935 12.8327C3.77769 12.8327 1.16602 10.221 1.16602 6.99935C1.16602 3.77769 3.77769 1.16602 6.99935 1.16602C10.221 1.16602 12.8327 3.77769 12.8327 6.99935ZM9.35036 5.23166C9.52122 5.40251 9.52122 5.67952 9.35036 5.85036L6.43369 8.76702C6.26283 8.93788 5.98587 8.93788 5.81499 8.76702L4.64832 7.60036C4.47747 7.4295 4.47747 7.15253 4.64832 6.98167C4.81918 6.81082 5.09619 6.81082 5.26704 6.98167L6.12435 7.83894L7.42798 6.53531L8.73167 5.23166C8.90253 5.0608 9.1795 5.0608 9.35036 5.23166Z"
+        fill="#2EAC41"
+      />
+    </svg>
+  );
+};
+
+export const LogIcon = () => {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 1C5.81331 1 4.65328 1.35189 3.66658 2.01118C2.67989 2.67047 1.91085 3.60754 1.45673 4.7039C1.0026 5.80025 0.88378 7.00665 1.11529 8.17054C1.3468 9.33443 1.91825 10.4035 2.75736 11.2426C3.59648 12.0818 4.66557 12.6532 5.82946 12.8847C6.99335 13.1162 8.19975 12.9974 9.2961 12.5433C10.3925 12.0891 11.3295 11.3201 11.9888 10.3334C12.6481 9.34673 13 8.18669 13 7C13 6.21207 12.8448 5.43185 12.5433 4.7039C12.2417 3.97595 11.7998 3.31451 11.2426 2.75736C10.6855 2.20021 10.0241 1.75825 9.2961 1.45672C8.56815 1.15519 7.78793 1 7 1Z"
+        fill="#A73CF9"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.63086 10.3252C3.63086 9.95291 3.93268 9.6511 4.30498 9.6511H9.69798C10.0703 9.6511 10.3721 9.95291 10.3721 10.3252C10.3721 10.6975 10.0703 10.9993 9.69798 10.9993H4.30498C3.93268 10.9993 3.63086 10.6975 3.63086 10.3252ZM4.78165 3.78142C4.51838 3.51816 4.09156 3.51818 3.8283 3.78144C3.56504 4.04471 3.56505 4.47154 3.82832 4.73479L5.37406 6.28048L3.82832 7.82618C3.56505 8.08943 3.56504 8.51628 3.8283 8.77953C4.09156 9.04277 4.51838 9.04277 4.78165 8.77953L6.8041 6.75715C6.93056 6.63075 7.00155 6.45926 7.00155 6.28048C7.00155 6.1017 6.93056 5.93021 6.8041 5.80381L4.78165 3.78142Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export const CurserLeftIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4" y="2" width="8" height="12" rx="4" fill="#B7B7C6" />
+      <path
+        d="M5.13846 5.48676L2.50012 5.48676C2.65614 4.80688 2.77923 3.85986 3.27563 3.27521C3.77203 2.69056 4.41047 2.19733 5.13846 1.83606C5.86644 1.47479 6.66318 1.2558 7.46319 1.19709L7.24582 5.48676L5.13846 5.48676Z"
+        fill="#FCFDFD"
+      />
+    </svg>
+  );
+};
+
+export const CurserMiddleIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4" y="2" width="8" height="11.4286" rx="4" fill="#B7B7C6" />
+      <rect x="7" y="3" width="2" height="5" rx="1" fill="#FCFDFD" />
+    </svg>
+  );
+};
+
+export const CurserRightIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4" y="2" width="8" height="11.4286" rx="4" fill="#B7B7C6" />
+      <path
+        d="M10.636 5.48676L13.2743 5.48676C13.1183 4.80688 12.9952 3.85986 12.4988 3.27521C12.0024 2.69056 11.3639 2.19733 10.636 1.83606C9.90797 1.47479 9.11123 1.2558 8.31123 1.19709L8.5286 5.48676L10.636 5.48676Z"
+        fill="#FCFDFD"
+      />
+    </svg>
+  );
+};

app/src/components/icons/Logo.tsx

@@ -0,0 +1,214 @@
+export function LogoIcon() {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="16" cy="16" r="12" fill="var(--icon-default-color)" />
+      <circle
+        cx="16.0522"
+        cy="16.054"
+        r="8.45217"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.313043"
+      />
+      <path
+        d="M14.9362 15.3506L14.9146 15.2009C18.5863 14.6717 20.6134 12.573 21.3145 11.6953L21.4328 11.7897C20.7203 12.6813 18.6614 14.8137 14.9362 15.3506Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M14.9522 15.8332C15.2664 15.8332 15.5211 15.5785 15.5211 15.2643C15.5211 14.95 15.2664 14.6953 14.9522 14.6953C14.6379 14.6953 14.3832 14.95 14.3832 15.2643C14.3832 15.5785 14.6379 15.8332 14.9522 15.8332Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M21.3523 12.3332C21.6665 12.3332 21.9212 12.0785 21.9212 11.7643C21.9212 11.45 21.6665 11.1953 21.3523 11.1953C21.038 11.1953 20.7833 11.45 20.7833 11.7643C20.7833 12.0785 21.038 12.3332 21.3523 12.3332Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M12.7492 22.3039C12.0462 21.4187 10.9309 19.5722 11.358 17.1484L11.5069 17.1749C11.0901 19.5401 12.1804 21.3445 12.8674 22.2096L12.7492 22.3039Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M11.4319 17.759C11.7461 17.759 12.0008 17.5043 12.0008 17.1901C12.0008 16.8758 11.7461 16.6211 11.4319 16.6211C11.1176 16.6211 10.8629 16.8758 10.8629 17.1901C10.8629 17.5043 11.1176 17.759 11.4319 17.759Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M12.7907 22.802C13.1049 22.802 13.3597 22.5473 13.3597 22.233C13.3597 21.9188 13.1049 21.6641 12.7907 21.6641C12.4765 21.6641 12.2217 21.9188 12.2217 22.233C12.2217 22.5473 12.4765 22.802 12.7907 22.802Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M21.7637 17.7187L21.6123 17.7145C21.6652 15.823 20.9421 14.0126 19.576 12.617C18.1535 11.1635 16.168 10.3387 14.1231 10.3506L14.1221 10.1993C16.2045 10.1912 18.2332 11.0285 19.6841 12.5111C21.0791 13.9363 21.8175 15.7859 21.7637 17.7187Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M21.6779 18.259C21.9921 18.259 22.2469 18.0043 22.2469 17.6901C22.2469 17.3758 21.9921 17.1211 21.6779 17.1211C21.3637 17.1211 21.1089 17.3758 21.1089 17.6901C21.1089 18.0043 21.3637 18.259 21.6779 18.259Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M14.1504 10.8567C14.4646 10.8567 14.7194 10.602 14.7194 10.2877C14.7194 9.97349 14.4646 9.71875 14.1504 9.71875C13.8362 9.71875 13.5814 9.97349 13.5814 10.2877C13.5814 10.602 13.8362 10.8567 14.1504 10.8567Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M17.0921 21.9098C12.5278 21.6847 9.43341 18.6962 8.05921 15.9744C7.04899 13.9733 6.89101 12.0235 7.64701 10.8856C8.13487 10.1512 8.85147 9.76527 9.94784 9.84153L9.79132 9.99806C8.74942 9.92522 8.22889 10.2831 7.77291 10.9693C7.04697 12.062 7.20838 13.9536 8.19419 15.9062C9.54902 18.59 12.6001 21.5366 17.0995 21.7585L17.0921 21.9098Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M10.6783 22.9379C8.56905 22.5921 7.13331 20.8917 7.03163 18.8823C6.93397 16.9494 8.12376 14.6516 11.0021 13.875L11.0414 14.0211C8.24462 14.7757 7.08812 17.0023 7.18295 18.8747C7.24576 20.1169 7.88473 21.5215 9.42609 22.2311C9.79584 22.4013 9.79131 22.364 10.2087 22.5205L10.6783 22.9379Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M10.9948 14.5286C11.3091 14.5286 11.5638 14.2738 11.5638 13.9596C11.5638 13.6454 11.3091 13.3906 10.9948 13.3906C10.6806 13.3906 10.4259 13.6454 10.4259 13.9596C10.4259 14.2738 10.6806 14.5286 10.9948 14.5286Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M20.5275 25.0396C20.4619 25.0396 20.3955 25.0366 20.3281 25.0303C19.0498 24.9115 17.8919 23.7306 17.2303 21.8712L17.3729 21.8203C18.0141 23.6229 19.124 24.7664 20.3421 24.8796C20.9978 24.942 21.5783 24.6777 21.8595 24.1942C22.1507 23.6941 22.141 23.2311 21.703 22.6036L21.8595 22.4471C22.3326 23.125 22.3121 23.7169 21.9903 24.2703C21.7082 24.7549 21.159 25.0396 20.5275 25.0396Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M17.0674 22.3957C17.3817 22.3957 17.6364 22.141 17.6364 21.8268C17.6364 21.5125 17.3817 21.2578 17.0674 21.2578C16.7532 21.2578 16.4985 21.5125 16.4985 21.8268C16.4985 22.141 16.7532 22.3957 17.0674 22.3957Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M18.6394 9.77763L18.4955 9.73042C18.8393 8.68792 19.4466 8.01625 20.1621 7.88813C20.6025 7.80864 21.0355 7.95895 21.2909 8.27915C21.5433 8.59551 21.7114 8.89502 21.5304 9.32094L21.3739 9.16442C21.5325 8.79116 21.3894 8.64514 21.1729 8.37357C20.9522 8.09696 20.5751 7.96803 20.1889 8.03723C19.5297 8.15506 18.9652 8.7896 18.6394 9.77763Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M18.5795 10.2981C18.8937 10.2981 19.1484 10.0434 19.1484 9.72912C19.1484 9.41489 18.8937 9.16016 18.5795 9.16016C18.2652 9.16016 18.0105 9.41489 18.0105 9.72912C18.0105 10.0434 18.2652 10.2981 18.5795 10.2981Z"
+        fill="var(--icon-default-color-active)"
+        stroke="var(--icon-default-color-active)"
+        strokeWidth="0.2"
+      />
+    </svg>
+  );
+}
+
+export function LogoIconLarge() {
+  return (
+    <svg
+      width="90"
+      height="90"
+      viewBox="0 0 90 90"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="45.1957"
+        cy="45.1957"
+        r="31.2826"
+        stroke="var(--accent-color)"
+        strokeWidth="2"
+      />
+      <path
+        d="M40.7635 42.6069L40.7992 42.8543L41.0466 42.8187C55.1005 40.7931 62.8733 32.7466 65.5682 29.3739L65.7243 29.1786L65.5289 29.0225L65.0855 28.6684L64.8902 28.5124L64.7342 28.7077C62.1284 31.9696 54.5784 39.79 40.8943 41.7624L40.6468 41.798L40.6825 42.0455L40.7635 42.6069Z"
+        fill="var(--accent-color)"
+        stroke="var(--accent-color)"
+        strokeWidth="0.5"
+      />
+      <path
+        d="M41.0707 44.3747C42.2491 44.3747 43.2043 43.4194 43.2043 42.2411C43.2043 41.0627 42.2491 40.1074 41.0707 40.1074C39.8923 40.1074 38.9371 41.0627 38.9371 42.2411C38.9371 43.4194 39.8923 44.3747 41.0707 44.3747Z"
+        fill="var(--accent-color)"
+      />
+      <path
+        d="M65.071 31.2502C66.2494 31.2502 67.2046 30.2949 67.2046 29.1165C67.2046 27.9382 66.2494 26.9829 65.071 26.9829C63.8926 26.9829 62.9374 27.9382 62.9374 29.1165C62.9374 30.2949 63.8926 31.2502 65.071 31.2502Z"
+        fill="var(--accent-color)"
+      />
+      <path
+        d="M32.6135 68.7896L32.7693 68.9857L32.9651 68.8296L33.4085 68.4763L33.6037 68.3207L33.4485 68.1253C30.8927 64.9067 26.8518 58.2123 28.3971 49.4438L28.4404 49.1979L28.1946 49.1542L27.6362 49.0551L27.3898 49.0114L27.3463 49.2579C25.7268 58.4481 29.957 65.4445 32.6135 68.7896Z"
+        fill="var(--accent-color)"
+        stroke="var(--accent-color)"
+        strokeWidth="0.5"
+      />
+      <path
+        d="M27.8694 51.592C29.0478 51.592 30.003 50.6367 30.003 49.4583C30.003 48.28 29.0478 47.3247 27.8694 47.3247C26.691 47.3247 25.7358 48.28 25.7358 49.4583C25.7358 50.6367 26.691 51.592 27.8694 51.592Z"
+        fill="var(--accent-color)"
+      />
+      <path
+        d="M32.9652 70.5041C34.1435 70.5041 35.0988 69.5488 35.0988 68.3704C35.0988 67.1921 34.1435 66.2368 32.9652 66.2368C31.7868 66.2368 30.8315 67.1921 30.8315 68.3704C30.8315 69.5488 31.7868 70.5041 32.9652 70.5041Z"
+        fill="var(--accent-color)"
+      />
+      <path
+        d="M66.6067 51.6991L66.8567 51.7061L66.8636 51.4561C67.0676 44.1377 64.271 37.1369 58.994 31.7455C53.5053 26.1369 45.8325 22.9707 37.957 23.0012L37.7063 23.0022L37.708 23.2529L37.7118 23.8203L37.7135 24.0701L37.9632 24.0686C45.5642 24.0244 52.9448 27.0906 58.2312 32.4925L58.2312 32.4925C63.3084 37.6792 65.9926 44.4033 65.7964 51.4263L65.7894 51.6762L66.0393 51.6832L66.6067 51.6991Z"
+        fill="var(--accent-color)"
+        stroke="var(--accent-color)"
+        strokeWidth="0.5"
+      />
+      <path
+        d="M66.2922 53.467C67.4705 53.467 68.4258 52.5117 68.4258 51.3333C68.4258 50.155 67.4705 49.1997 66.2922 49.1997C65.1138 49.1997 64.1585 50.155 64.1585 51.3333C64.1585 52.5117 65.1138 53.467 66.2922 53.467Z"
+        fill="var(--accent-color)"
+      />
+      <path
+        d="M38.0639 25.7077C39.2423 25.7077 40.1976 24.7524 40.1976 23.5741C40.1976 22.3957 39.2423 21.4404 38.0639 21.4404C36.8856 21.4404 35.9303 22.3957 35.9303 23.5741C35.9303 24.7524 36.8856 25.7077 38.0639 25.7077Z"
+        fill="var(--accent-color)"
+      />
+      <path
+        d="M13.468 25.6899C12.0099 27.8846 11.446 30.8409 11.7162 34.1762C11.9865 37.5136 13.093 41.2489 14.9988 45.024L15.222 44.9113L14.9988 45.024C20.182 55.2899 31.8559 66.569 49.0829 67.4189L49.3326 67.4312L49.3449 67.1815L49.3729 66.6141L49.3853 66.3644L49.1356 66.352C32.3736 65.5252 21.002 54.548 15.9513 44.5429L15.7295 44.6549L15.9513 44.5429C14.1144 40.9044 13.0501 37.3314 12.7802 34.1684C12.5101 31.0029 13.0366 28.2674 14.3566 26.2805C15.1989 25.0129 16.086 24.0714 17.2249 23.4752C18.3626 22.8796 19.7779 22.6151 21.6999 22.7494L21.8136 22.7574L21.8942 22.6768L22.4811 22.0899L22.8692 21.7018L22.3217 21.6637C20.2328 21.5184 18.4886 21.8123 17.0275 22.5047C15.5655 23.1975 14.4036 24.2815 13.468 25.6899ZM13.468 25.6899L13.6762 25.8282L13.468 25.6899Z"
+        fill="var(--accent-color)"
+        stroke="var(--accent-color)"
+        strokeWidth="0.5"
+      />
+      <path
+        d="M25.003 71.2683L25.8544 71.4079L25.2096 70.8347L23.4487 69.2695L23.414 69.2386L23.3704 69.2223C22.7326 68.9831 22.3525 68.8627 22.0397 68.7635C21.9653 68.7399 21.8947 68.7175 21.8253 68.6951C21.4708 68.5802 21.1376 68.4592 20.4524 68.1438C14.7739 65.5298 12.4176 60.3578 12.1857 55.7717L12.1857 55.7717C11.8358 48.8628 16.101 40.6225 26.4705 37.8248L26.7118 37.7597L26.6468 37.5184L26.4993 36.9706L26.4342 36.7291L26.1927 36.7943C15.2798 39.7386 10.7471 48.4657 11.1189 55.8257L11.1189 55.8257C11.5061 63.4757 16.9748 69.952 25.003 71.2683Z"
+        fill="var(--accent-color)"
+        stroke="var(--accent-color)"
+        strokeWidth="0.5"
+      />
+      <path
+        d="M26.2306 39.4767C27.409 39.4767 28.3642 38.5215 28.3642 37.3431C28.3642 36.1647 27.409 35.2095 26.2306 35.2095C25.0522 35.2095 24.097 36.1647 24.097 37.3431C24.097 38.5215 25.0522 39.4767 26.2306 39.4767Z"
+        fill="var(--accent-color)"
+      />
+      <path
+        d="M61.2074 79.1064L61.2074 79.1064C61.4678 79.1305 61.7244 79.1422 61.978 79.1422C64.4196 79.1422 66.5696 78.04 67.6795 76.1331L67.6795 76.133C68.2962 75.0725 68.6727 74.0249 68.6539 72.9029C68.6351 71.7796 68.2207 70.6132 67.3137 69.3137L67.1429 69.069L66.9319 69.28L66.345 69.8669L66.1969 70.015L66.3168 70.1868C67.1247 71.3442 67.4824 72.2492 67.5231 73.0742C67.5638 73.8967 67.2914 74.6784 66.7571 75.5963L66.757 75.5963C65.7608 77.3086 63.6885 78.2699 61.3064 78.0434L61.3058 78.0433C56.8839 77.6324 52.7763 73.4613 50.384 66.736L50.3002 66.5003L50.0645 66.5843L49.5296 66.775L49.2943 66.8589L49.378 67.0943C51.8719 74.1037 56.2694 78.6473 61.2074 79.1064Z"
+        fill="var(--accent-color)"
+        stroke="var(--accent-color)"
+        strokeWidth="0.5"
+      />
+      <path
+        d="M49.0029 68.9821C50.1813 68.9821 51.1366 68.0268 51.1366 66.8485C51.1366 65.6701 50.1813 64.7148 49.0029 64.7148C47.8246 64.7148 46.8693 65.6701 46.8693 66.8485C46.8693 68.0268 47.8246 68.9821 49.0029 68.9821Z"
+        fill="var(--accent-color)"
+      />
+      <path
+        d="M55.0569 21.9844L54.8197 21.9066L54.2803 21.7295L54.0424 21.6515L54.1208 21.4137C55.4226 17.4661 57.749 14.8415 60.5635 14.3374C62.2955 14.0248 64.0152 14.6136 65.0364 15.8938M55.0569 21.9844L64.203 16.5598C64.2457 16.6134 64.2872 16.6652 64.3275 16.7154C64.6827 17.1587 64.939 17.4786 65.0681 17.8299C65.2013 18.1927 65.2025 18.6117 64.9221 19.2718L64.8561 19.427L64.9754 19.5463L65.5624 20.1332L65.8243 20.3952L65.9692 20.0542C66.3303 19.2044 66.3477 18.464 66.1387 17.7763C65.9332 17.1 65.5135 16.4918 65.0364 15.8938M55.0569 21.9844L55.1351 21.7473M55.0569 21.9844L55.1351 21.7473M65.0364 15.8938L64.841 16.0497M65.0364 15.8938L64.841 16.0497M64.841 16.0497C65.7364 17.172 66.3488 18.2377 65.8379 19.7016M64.841 16.0497C63.8831 14.849 62.2595 14.2853 60.6078 14.5834L65.8379 19.7016M65.8379 19.7016L65.9159 19.7797L65.7391 19.9565L65.5091 19.8587C65.5224 19.8272 65.5353 19.7959 65.5476 19.7649M65.8379 19.7016L65.5476 19.7649M65.5476 19.7649L65.1522 19.3695C65.715 18.0447 65.2644 17.4833 64.5263 16.5635L65.5476 19.7649ZM55.1351 21.7473C56.3456 18.077 58.4148 15.8065 60.7524 15.3887L60.7525 15.3886M55.1351 21.7473L60.7525 15.3886M60.7525 15.3886C62.1223 15.1432 63.4396 15.6032 64.2029 16.5597L60.7525 15.3886Z"
+        fill="var(--accent-color)"
+        stroke="var(--accent-color)"
+        strokeWidth="0.5"
+      />
+      <path
+        d="M54.673 23.6159C55.8513 23.6159 56.8066 22.6606 56.8066 21.4823C56.8066 20.3039 55.8513 19.3486 54.673 19.3486C53.4946 19.3486 52.5393 20.3039 52.5393 21.4823C52.5393 22.6606 53.4946 23.6159 54.673 23.6159Z"
+        fill="var(--accent-color)"
+      />
+    </svg>
+  );
+}

app/src/components/icons/RealTimeVisulationIcons.tsx

@@ -0,0 +1,171 @@
+export function CleanPannel() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_1782_1158)">
+        <path
+          d="M12 0H0V12H12V0Z"
+          fill="var(--text-color)"
+          fillOpacity="0.01"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5 1.47852H7V3.47853H10.75V5.47853H1.25V3.47853H5V1.47852Z"
+          stroke="var(--text-color)"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M2 10H10V5.5H2V10Z"
+          stroke="var(--text-color)"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M4 9.97439V8.47852"
+          stroke="var(--text-color)"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M6 9.97461V8.47461"
+          stroke="var(--text-color)"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M8 9.97439V8.47852"
+          stroke="var(--text-color)"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M3 10H9"
+          stroke="var(--text-color)"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1782_1158">
+          <rect width="12" height="12" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export function EyeIcon({ fill }: { fill?: string }) {
+  return (
+    <svg
+      width="14"
+      height="15"
+      viewBox="0 0 14 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.75047 7.4375C8.75047 8.40402 7.967 9.1875 7.00047 9.1875C6.034 9.1875 5.25049 8.40402 5.25049 7.4375C5.25049 6.47097 6.034 5.6875 7.00047 5.6875C7.967 5.6875 8.75047 6.47097 8.75047 7.4375Z"
+        stroke={fill}
+        strokeOpacity="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.00086 3.35419C4.3889 3.35419 2.1779 5.07087 1.43457 7.43752C2.17789 9.80416 4.3889 11.5209 7.00086 11.5209C9.6128 11.5209 11.8238 9.80416 12.5671 7.43752C11.8238 5.07088 9.6128 3.35419 7.00086 3.35419Z"
+        stroke={fill}
+        strokeOpacity="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function LockIcon({ fill }: { fill?: string }) {
+  return (
+    <svg
+      width="14"
+      height="15"
+      viewBox="0 0 14 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.0835 6.28763C4.35849 6.27083 4.69751 6.27083 5.1335 6.27083H8.86683C9.30281 6.27083 9.64185 6.27083 9.91683 6.28763M4.0835 6.28763C3.74031 6.30857 3.49683 6.35571 3.28901 6.46158C2.95973 6.62935 2.69201 6.89704 2.52423 7.22633C2.3335 7.60072 2.3335 8.09072 2.3335 9.07083V9.8875C2.3335 10.8676 2.3335 11.3576 2.52423 11.732C2.69201 12.0613 2.95973 12.329 3.28901 12.4967C3.66336 12.6875 4.1534 12.6875 5.1335 12.6875H8.86683C9.84695 12.6875 10.3369 12.6875 10.7113 12.4967C11.0406 12.329 11.3083 12.0613 11.4761 11.732C11.6668 11.3576 11.6668 10.8676 11.6668 9.8875V9.07083C11.6668 8.09072 11.6668 7.60072 11.4761 7.22633C11.3083 6.89704 11.0406 6.62935 10.7113 6.46158C10.5035 6.35571 10.26 6.30857 9.91683 6.28763M4.0835 6.28763V5.10417C4.0835 3.49334 5.38933 2.1875 7.00016 2.1875C8.61098 2.1875 9.91683 3.49334 9.91683 5.10417V6.28763"
+        stroke={fill}
+        strokeOpacity="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+export function StockIncreseIcon() {
+  return (
+    <svg
+      width="9"
+      height="9"
+      viewBox="0 0 9 9"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_3050_69519)">
+        <path
+          d="M7.80766 6.99219H1.17811C0.752382 6.99219 0.407227 7.33734 0.407227 7.76307C0.407227 8.18879 0.752382 8.53395 1.17811 8.53395H7.80766C8.23339 8.53395 8.57854 8.18879 8.57854 7.76307C8.57854 7.33733 8.23339 6.99219 7.80766 6.99219Z"
+          fill="white"
+        />
+        <path
+          d="M2.05066 6.50215C2.47639 6.50215 2.82154 6.15699 2.82154 5.73127V2.7865C2.82154 2.36078 2.47639 2.01562 2.05066 2.01562C1.62494 2.01562 1.27979 2.36078 1.27979 2.7865V5.73127C1.27977 6.15699 1.62494 6.50215 2.05066 6.50215Z"
+          fill="white"
+        />
+        <path
+          d="M4.49598 6.49421C4.9217 6.49421 5.26686 6.14905 5.26686 5.72333V1.80213C5.26686 1.37641 4.9217 1.03125 4.49598 1.03125C4.07025 1.03125 3.7251 1.37641 3.7251 1.80213V5.72333C3.7251 6.14905 4.07023 6.49421 4.49598 6.49421Z"
+          fill="white"
+        />
+        <path
+          d="M6.92957 6.50192C7.35529 6.50192 7.70042 6.15677 7.70042 5.73104V0.83338C7.70046 0.407655 7.35532 0.0625 6.92957 0.0625C6.50385 0.0625 6.15869 0.407655 6.15869 0.83338V5.73103C6.15869 6.15677 6.50385 6.50192 6.92957 6.50192Z"
+          fill="white"
+        />
+      </g>
+      <rect
+        x="0.27293"
+        y="0.066387"
+        width="8.45313"
+        height="8.45313"
+        stroke="url(#paint0_linear_3050_69519)"
+        strokeWidth="0.0233989"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_3050_69519"
+          x1="4.4995"
+          y1="0.0546875"
+          x2="4.4995"
+          y2="8.53122"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#31B2B9" />
+          <stop offset="1" stopColor="#FBD8B8" />
+        </linearGradient>
+        <clipPath id="clip0_3050_69519">
+          <rect
+            x="0.26123"
+            y="0.0546875"
+            width="8.47653"
+            height="8.47653"
+            fill="white"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+
+

app/src/components/icons/ShortcutIcons.tsx

@@ -0,0 +1,827 @@
+export function UndoIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.33398 5.82812H12.5007C14.0583 5.82812 14.8372 5.82812 15.4173 6.16307C15.7974 6.38248 16.113 6.69808 16.3324 7.07812C16.6673 7.65825 16.6673 8.43712 16.6673 9.99479C16.6673 11.5525 16.6673 12.3313 16.3324 12.9115C16.113 13.2915 15.7974 13.6071 15.4173 13.8265C14.8372 14.1615 14.0583 14.1615 12.5007 14.1615H6.66733M3.33398 5.82812L5.83398 3.32812M3.33398 5.82812L5.83398 8.32812"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function RedoIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.666 5.82812H7.49935C5.94168 5.82812 5.16277 5.82812 4.58268 6.16307C4.2026 6.38248 3.88702 6.69808 3.6676 7.07812C3.33268 7.65825 3.33268 8.43712 3.33268 9.99479C3.33268 11.5525 3.33268 12.3313 3.6676 12.9115C3.88702 13.2915 4.2026 13.6071 4.58268 13.8265C5.16277 14.1615 5.94168 14.1615 7.49935 14.1615H13.3327M16.666 5.82812L14.166 3.32812M16.666 5.82812L14.166 8.32812"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function ESCIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.0175 14.3653C9.21173 14.3331 8.45367 14.1688 7.75 13.8936L8.19729 12.878C8.68009 13.1022 9.24614 13.2321 9.84215 13.2321C10.204 13.2321 10.5558 13.1844 10.8888 13.0934C11.0231 12.9724 11.1274 12.777 11.1274 12.5562C11.2051 12.0789 10.8832 11.868 9.82883 11.4463C8.90762 11.1244 7.56465 10.6028 7.79773 9.1377C7.87764 8.47842 8.30828 7.93679 8.89541 7.69928C9.14292 7.64045 9.41262 7.60938 9.68898 7.60938C10.4925 7.60938 11.2351 7.8702 11.8355 8.31194L11.204 9.1488C10.7978 8.87354 10.2972 8.70928 9.75891 8.70928C9.62239 8.70928 9.4892 8.71927 9.35824 8.74036C9.11961 8.83359 8.93981 9.06889 8.92871 9.34747C8.83992 9.79254 9.08409 9.99232 10.2051 10.4585C11.1485 10.8247 12.4249 11.3131 12.2029 12.7671C12.1285 13.3342 11.7989 13.8104 11.335 14.0834C10.9765 14.2643 10.5625 14.3675 10.1252 14.3675C10.0874 14.3675 10.0486 14.3664 10.0109 14.3653H10.0175Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M16.3565 14.3716C16.3265 14.3727 16.2921 14.3727 16.2577 14.3727C15.6106 14.3727 15.0102 14.1729 14.5152 13.8311C13.7982 13.2228 13.3398 12.3105 13.3398 11.2905C13.3398 11.2028 13.3431 11.1163 13.3498 11.0297C13.3376 10.942 13.332 10.8266 13.332 10.71C13.332 9.71225 13.7904 8.82211 14.5085 8.2372C15.0635 7.92421 15.7194 7.74219 16.4175 7.74219C16.9092 7.74219 17.3809 7.83209 17.8149 7.99746L17.3998 9.02078C17.0935 8.89759 16.7394 8.82544 16.3676 8.82544C15.937 8.82544 15.5285 8.922 15.1622 9.09404C14.7238 9.49471 14.4386 10.0852 14.4386 10.7422C14.4386 10.8477 14.4464 10.9509 14.4597 11.0519C14.4486 11.1218 14.4419 11.2162 14.4419 11.3116C14.4419 11.9764 14.7249 12.5747 15.1778 12.992C15.5618 13.1884 16.0146 13.3028 16.493 13.3028C16.8171 13.3028 17.129 13.2506 17.4198 13.154L17.7871 14.1585C17.3621 14.2928 16.8737 14.3694 16.3676 14.3694C16.3632 14.3694 16.3587 14.3694 16.3543 14.3694L16.3565 14.3716Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M6.68957 5.48489V4.375H2.25V14.364H6.68957V13.2541H3.35989V9.92447H6.68957V8.81457H3.35989V5.48489H6.68957Z"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function HelpIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 16.25C13.4517 16.25 16.25 13.4517 16.25 10C16.25 6.54822 13.4517 3.75 10 3.75C6.54822 3.75 3.75 6.54822 3.75 10C3.75 13.4517 6.54822 16.25 10 16.25ZM10 17.5C14.1422 17.5 17.5 14.1422 17.5 10C17.5 5.85787 14.1422 2.5 10 2.5C5.85787 2.5 2.5 5.85787 2.5 10C2.5 14.1422 5.85787 17.5 10 17.5ZM10.625 12.5V13.75H9.375V12.5H10.625ZM8.75 8.69317C8.75 8.05219 9.29142 7.5 10 7.5C10.7086 7.5 11.25 8.05219 11.25 8.69317C11.25 8.94917 11.0959 9.25258 10.7563 9.59658C10.4272 9.93008 10.0087 10.2161 9.66067 10.441L9.375 10.6257V11.875H10.625V11.3019C10.9427 11.0858 11.319 10.8059 11.646 10.4747C12.0682 10.047 12.5 9.44133 12.5 8.69317C12.5 7.32586 11.3624 6.25 10 6.25C8.63758 6.25 7.5 7.32586 7.5 8.69317H8.75Z"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function FindIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.30571 14.1905C10.2741 14.1914 11.2262 13.9412 12.0691 13.4642L14.4072 15.8024C14.692 16.0872 15.0783 16.2472 15.4812 16.2472C15.884 16.2472 16.2703 16.0872 16.5551 15.8024C16.84 15.5175 17 15.1312 17 14.7284C17 14.3256 16.84 13.9393 16.5551 13.6544L14.217 11.3163C14.8857 10.1292 15.1017 8.74014 14.8251 7.40609C14.5485 6.07203 13.7981 4.88332 12.7126 4.0599C11.6272 3.23649 10.2802 2.83412 8.92098 2.92725C7.56174 3.02039 6.28225 3.60271 5.31926 4.56648C4.5308 5.35491 3.99384 6.35945 3.7763 7.45306C3.55876 8.54666 3.67041 9.68021 4.09712 10.7104C4.52382 11.7405 5.24643 12.621 6.17355 13.2405C7.10068 13.8599 8.19068 14.1906 9.30571 14.1905ZM6.31148 5.55871C7.00418 4.86634 7.9155 4.43555 8.89019 4.33975C9.86488 4.24394 10.8426 4.48905 11.6569 5.03331C12.4711 5.57757 13.0715 6.3873 13.3556 7.32456C13.6398 8.26182 13.5902 9.26861 13.2153 10.1734C12.8404 11.0782 12.1634 11.825 11.2996 12.2866C10.4359 12.7482 9.43875 12.8961 8.47819 12.705C7.51763 12.5139 6.65304 11.9956 6.03174 11.2385C5.41044 10.4814 5.07086 9.53232 5.07085 8.55293C5.06915 7.99657 5.17794 7.44541 5.39091 6.93141C5.60388 6.41742 5.91679 5.95083 6.31148 5.55871Z"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function InfoIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.5204 13.4659C10.7701 13.4659 10.9725 13.2635 10.9725 13.0138V9.39737C10.9725 9.14771 10.7701 8.94531 10.5204 8.94531C10.2708 8.94531 10.0684 9.14771 10.0684 9.39737V13.0138C10.0684 13.2635 10.2708 13.4659 10.5204 13.4659Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M10.5207 6.98438C10.8536 6.98438 11.1235 7.25424 11.1235 7.58712C11.1235 7.92 10.8536 8.18986 10.5207 8.18986C10.1878 8.18986 9.91797 7.92 9.91797 7.58712C9.91797 7.25424 10.1878 6.98438 10.5207 6.98438Z"
+        fill="var(--text-color)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.04102 10.0029C4.04102 6.42441 6.94198 3.52344 10.5205 3.52344C14.0991 3.52344 17 6.42441 17 10.0029C17 13.5815 14.0991 16.4824 10.5205 16.4824C6.94198 16.4824 4.04102 13.5815 4.04102 10.0029ZM10.5205 4.42755C7.44131 4.42755 4.94513 6.92374 4.94513 10.0029C4.94513 13.0821 7.44131 15.5783 10.5205 15.5783C13.5997 15.5783 16.0959 13.0821 16.0959 10.0029C16.0959 6.92374 13.5997 4.42755 10.5205 4.42755Z"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function CurserIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.9284 10.6143C15.3983 9.82386 16.1332 9.42865 16.3192 8.95289C16.4806 8.54006 16.4352 8.07499 16.1971 7.70113C15.9226 7.27033 15.1251 7.02467 13.5301 6.53334L7.50159 4.67632C6.1558 4.26176 5.48291 4.05449 5.03793 4.22253C4.65059 4.36881 4.3487 4.68028 4.21459 5.07201C4.06053 5.52201 4.28872 6.1881 4.74512 7.52028L6.76673 13.4213C7.32811 15.0599 7.60881 15.8793 8.0565 16.1397C8.44475 16.3655 8.91824 16.3897 9.32747 16.2045C9.79935 15.9909 10.1619 15.2044 10.8871 13.6314L11.4229 12.4692C11.5383 12.2188 11.596 12.0936 11.675 11.9843C11.7451 11.8872 11.8275 11.7997 11.92 11.7237C12.0243 11.6382 12.1457 11.5729 12.3885 11.4423L13.9284 10.6143Z"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function DeleteIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.9284 10.6143C15.3983 9.82386 16.1332 9.42865 16.3192 8.95289C16.4806 8.54006 16.4352 8.07499 16.1971 7.70113C15.9226 7.27033 15.1251 7.02467 13.5301 6.53334L7.50159 4.67632C6.1558 4.26176 5.48291 4.05449 5.03793 4.22253C4.65059 4.36881 4.3487 4.68028 4.21459 5.07201C4.06053 5.52201 4.28872 6.1881 4.74512 7.52028L6.76673 13.4213C7.32811 15.0599 7.60881 15.8793 8.0565 16.1397C8.44475 16.3655 8.91824 16.3897 9.32747 16.2045C9.79935 15.9909 10.1619 15.2044 10.8871 13.6314L11.4229 12.4692C11.5383 12.2188 11.596 12.0936 11.675 11.9843C11.7451 11.8872 11.8275 11.7997 11.92 11.7237C12.0243 11.6382 12.1457 11.5729 12.3885 11.4423L13.9284 10.6143Z"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function FreeHandIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.9284 10.6143C15.3983 9.82386 16.1332 9.42865 16.3192 8.95289C16.4806 8.54006 16.4352 8.07499 16.1971 7.70113C15.9226 7.27033 15.1251 7.02467 13.5301 6.53334L7.50159 4.67632C6.1558 4.26176 5.48291 4.05449 5.03793 4.22253C4.65059 4.36881 4.3487 4.68028 4.21459 5.07201C4.06053 5.52201 4.28872 6.1881 4.74512 7.52028L6.76673 13.4213C7.32811 15.0599 7.60881 15.8793 8.0565 16.1397C8.44475 16.3655 8.91824 16.3897 9.32747 16.2045C9.79935 15.9909 10.1619 15.2044 10.8871 13.6314L11.4229 12.4692C11.5383 12.2188 11.596 12.0936 11.675 11.9843C11.7451 11.8872 11.8275 11.7997 11.92 11.7237C12.0243 11.6382 12.1457 11.5729 12.3885 11.4423L13.9284 10.6143Z"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function MeasurementToolIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.68619 10.1004H12.2277V8.29688C11.6885 9.02845 10.8343 9.64163 9.75173 10.0751C9.73059 10.0835 9.70733 10.092 9.68619 10.1004Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M0.402344 9.34082C0.601078 9.51641 0.81855 9.68176 1.05371 9.83594L1.29883 9.98926C2.50601 10.7059 4.04736 11.1172 5.67578 11.1807H19.1543C19.4004 11.1808 19.5994 11.3799 19.5996 11.626V16.3164C19.5994 16.5626 19.4005 16.7616 19.1543 16.7617H18.4463V15.8613C18.4462 15.3192 18.007 14.88 17.4648 14.8799C16.9226 14.8799 16.4835 15.3191 16.4834 15.8613V16.7617H16.0361V14.498C16.0361 13.9559 15.5968 13.5168 15.0547 13.5166C14.5124 13.5166 14.0732 13.9557 14.0732 14.498V16.7617H13.625V15.8613C13.6249 15.3191 13.1858 14.8799 12.6436 14.8799C12.1015 14.8801 11.6622 15.3192 11.6621 15.8613V16.7617H11.2148V14.498C11.2148 13.9557 10.7757 13.5166 10.2334 13.5166C9.69113 13.5166 9.25195 13.9558 9.25195 14.498V16.7617H8.80469V15.8613C8.80459 15.3192 8.36541 14.88 7.82324 14.8799C7.281 14.8799 6.8419 15.3191 6.8418 15.8613V16.7617H6.11426C4.4855 16.7617 3.03028 16.368 1.99609 15.7529C0.9536 15.1328 0.402397 14.333 0.402344 13.5273V9.34082Z"
+        stroke="var(--text-color)"
+        strokeWidth="0.8"
+      />
+      <path
+        d="M6.1123 3.22852C7.74123 3.22852 9.19625 3.62154 10.2305 4.23633C11.2731 4.8562 11.8252 5.65597 11.8252 6.46289C11.8252 6.82463 11.7175 7.18064 11.5049 7.51953L11.4072 7.66309L11.4062 7.66406C10.5765 8.8129 8.56553 9.69717 6.11523 9.69727C6.03208 9.69727 5.94957 9.69551 5.8623 9.69336H5.86328C3.67006 9.63747 1.86351 8.87579 0.982422 7.86816L0.818359 7.66309C0.542765 7.28046 0.400421 6.87494 0.400391 6.46289C0.400391 5.65713 0.951389 4.85653 1.99414 4.23633C3.02833 3.62125 4.48355 3.22858 6.1123 3.22852ZM6.11523 4.44141C5.30316 4.44141 4.54863 4.63609 3.98438 4.97168C3.46367 5.28142 3.04694 5.75161 2.99805 6.33984L2.99316 6.45898C2.99325 6.743 3.07951 7.00517 3.22363 7.23633L3.28906 7.33301C3.76857 7.99795 4.75288 8.40763 5.82324 8.46973V8.4707C5.92262 8.47795 6.02029 8.48047 6.11523 8.48047C7.30572 8.48037 8.42116 8.05532 8.94238 7.33301L8.94141 7.33203C9.00567 7.24348 9.06173 7.14976 9.10742 7.04785L9.1084 7.04883C9.19323 6.86454 9.23824 6.66587 9.23828 6.46094C9.23828 5.81632 8.80107 5.30238 8.24512 4.97168C7.68051 4.63594 6.9262 4.44147 6.11523 4.44141Z"
+        stroke="var(--text-color)"
+        strokeWidth="0.8"
+      />
+    </svg>
+  );
+}
+
+export function WallToolIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_3986_5423)">
+        <path
+          d="M12.6101 7.17188H6.72173V10.7049H12.6101V7.17188Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M18.4986 7.17188H12.6102V10.7049H18.4986V7.17188Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M6.72174 7.17188H0.833328V10.7049H6.72174V7.17188Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.5544 10.7031H9.66596V14.2362H15.5544V10.7031Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.66594 10.7031H3.77753V14.2362H9.66594V10.7031Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.5544 3.64062H9.66596V7.17367H15.5544V3.64062Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.66594 3.64062H3.77753V7.17367H9.66594V3.64062Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M20.7192 8.96582L11.3705 18.3154H7.89982V14.8447L17.2485 5.49512L20.7192 8.96582Z"
+          fill="var(--text-color)"
+          stroke="#3A383D"
+          strokeWidth="1.08709"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3986_5423">
+          <rect width="20" height="20" fill="var(--text-color)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export function ZoneToolIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_3986_5423)">
+        <path
+          d="M12.6101 7.17188H6.72173V10.7049H12.6101V7.17188Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M18.4986 7.17188H12.6102V10.7049H18.4986V7.17188Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M6.72174 7.17188H0.833328V10.7049H6.72174V7.17188Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.5544 10.7031H9.66596V14.2362H15.5544V10.7031Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.66594 10.7031H3.77753V14.2362H9.66594V10.7031Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.5544 3.64062H9.66596V7.17367H15.5544V3.64062Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.66594 3.64062H3.77753V7.17367H9.66594V3.64062Z"
+          stroke="var(--text-color)"
+          strokeMiterlimit="10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M20.7192 8.96582L11.3705 18.3154H7.89982V14.8447L17.2485 5.49512L20.7192 8.96582Z"
+          fill="var(--text-color)"
+          stroke="#3A383D"
+          strokeWidth="1.08709"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3986_5423">
+          <rect width="20" height="20" fill="var(--text-color)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export function AisleToolIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.25821 9.16406H1.13638L1.13638 13.4806L3.25821 9.16406Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M4.57633 16.6641H1.53737L5.22405 9.16406L8.26301 9.16406L4.57633 16.6641Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M9.82919 16.6641H6.79023L10.4769 9.16406L13.5159 9.16406L9.82919 16.6641Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M15.1917 16.6641H12.1528L15.8395 9.16406L18.8637 9.16406V9.19409L15.1917 16.6641Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M18.8637 14.3136V16.6641H17.7083L18.8637 14.3136Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M7.75001 0.835938L10 3.08594L4.75001 8.33594H2.50001V6.08594L7.75001 0.835938Z"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function FloorToolIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        opacity="0.3"
+        x="3.33398"
+        y="3.32812"
+        width="12.5"
+        height="12.5"
+        fill="#F3F3FD"
+        fillOpacity="0.85"
+      />
+      <path
+        d="M15.834 15.8281V3.32812H3.33398V15.8281"
+        stroke="var(--text-color)"
+      />
+      <path
+        d="M11.084 6.67188L13.334 8.92188L8.08398 14.1719H5.83398V11.9219L11.084 6.67188Z"
+        fill="var(--text-color)"
+      />
+      <circle cx="3.29961" cy="3.30156" r="1.2" fill="var(--text-color)" />
+      <circle cx="15.7996" cy="3.30156" r="1.2" fill="var(--text-color)" />
+      <circle cx="15.7996" cy="15.8016" r="1.2" fill="var(--text-color)" />
+      <circle cx="3.29961" cy="15.8016" r="1.2" fill="var(--text-color)" />
+    </svg>
+  );
+}
+
+export function MoveIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 17.5V2.5M10 17.5L11.6667 15.8333M10 17.5L8.33334 15.8333M10 2.5L11.6667 4.16667M10 2.5L8.33334 4.16667M17.5 10H2.50001M17.5 10L15.8333 8.33333M17.5 10L15.8333 11.6667M2.50001 10L4.16667 8.33333M2.50001 10L4.16667 11.6667"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function RotateIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.6094 11.6094H14.29V14.2899"
+        stroke="var(--text-color)"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.63995 13.7509H7.3205V11.0703"
+        stroke="var(--text-color)"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.2899 11.8218C13.9146 12.2507 13.5394 12.6795 13.1105 13.1084C9.35771 16.8612 4.908 18.5768 3.19244 16.8612C1.47689 15.1457 3.13883 10.6959 6.94521 6.94317C10.7516 3.1904 15.1477 1.47485 16.8632 3.1904C17.6138 3.94095 17.721 5.1204 17.2921 6.56789"
+        stroke="var(--text-color)"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.32051 13.4832C7.15968 13.3759 7.05246 13.2151 6.89163 13.0543C3.13886 9.3015 1.4233 4.85178 3.13886 3.13623C4.85441 1.42068 9.30412 3.08262 13.0569 6.889C16.8097 10.6954 18.5252 15.0915 16.8097 16.807C15.8983 17.7184 14.2363 17.6648 12.3063 16.8607"
+        stroke="var(--text-color)"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function ToogleViewIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.8333 7.5026H4.16663C2.78592 7.5026 1.66663 8.62185 1.66663 10.0026C1.66663 11.3834 2.78592 12.5026 4.16663 12.5026H10.833M18.3333 10.0026C18.3333 12.3038 16.4678 14.1693 14.1666 14.1693C11.8655 14.1693 9.99996 12.3038 9.99996 10.0026C9.99996 7.70142 11.8655 5.83594 14.1666 5.83594C16.4678 5.83594 18.3333 7.70142 18.3333 10.0026Z"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function UIVisiblityIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.96428 14.3726C7.02007 14.3726 6.13243 14.0049 5.46483 13.3373C4.79685 12.6694 4.42896 11.7815 4.42896 10.8373V6.5152C4.42896 6.39928 4.475 6.28811 4.55697 6.20614C4.63894 6.12417 4.75011 6.07813 4.86603 6.07812C4.98195 6.07813 5.09312 6.12417 5.17509 6.20614C5.25706 6.28811 5.30311 6.39928 5.30311 6.5152V10.8373C5.30311 11.548 5.58009 12.2163 6.08298 12.7192C6.58543 13.2218 7.25359 13.4984 7.96428 13.4984C9.43161 13.4984 10.6255 12.3047 10.6255 10.8373V6.5152C10.6255 6.39928 10.6715 6.28811 10.7535 6.20614C10.8354 6.12417 10.9466 6.07812 11.0625 6.07812C11.1785 6.07812 11.2896 6.12417 11.3716 6.20614C11.4536 6.28811 11.4996 6.39928 11.4996 6.5152V10.8373C11.4996 12.7866 9.91364 14.3726 7.96428 14.3726ZM13.7949 14.3726C13.679 14.3726 13.5678 14.3265 13.4858 14.2446C13.4039 14.1626 13.3578 14.0514 13.3578 13.9355V6.5152C13.3578 6.4578 13.3691 6.40097 13.3911 6.34794C13.413 6.29491 13.4452 6.24673 13.4858 6.20614C13.5264 6.16556 13.5746 6.13336 13.6276 6.1114C13.6806 6.08943 13.7375 6.07813 13.7949 6.07812C13.8523 6.07813 13.9091 6.08943 13.9621 6.1114C14.0152 6.13336 14.0634 6.16556 14.1039 6.20614C14.1445 6.24673 14.1767 6.29491 14.1987 6.34794C14.2207 6.40097 14.232 6.4578 14.232 6.5152V13.9355C14.232 14.0514 14.1859 14.1626 14.1039 14.2446C14.022 14.3265 13.9108 14.3726 13.7949 14.3726Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M7.96457 12.8347C7.36265 12.8347 6.79732 12.6004 6.37273 12.1751C5.9479 11.7511 5.71362 11.1855 5.71362 10.5832V6.55454C5.71362 6.43862 5.75967 6.32745 5.84164 6.24548C5.92361 6.16351 6.03478 6.11746 6.1507 6.11746C6.26662 6.11746 6.37779 6.16351 6.45976 6.24548C6.54173 6.32745 6.58778 6.43862 6.58778 6.55454V10.5832C6.58778 10.9517 6.73089 11.2975 6.99082 11.557C7.25082 11.8175 7.59642 11.9606 7.96457 11.9606C8.72377 11.9606 9.34136 11.3427 9.34136 10.5832V6.55454C9.34136 6.43862 9.38741 6.32745 9.46937 6.24548C9.55134 6.16351 9.66252 6.11746 9.77844 6.11746C9.89435 6.11746 10.0055 6.16351 10.0875 6.24548C10.1695 6.32745 10.2155 6.43862 10.2155 6.55454V10.5832C10.2155 11.8247 9.20574 12.8347 7.96457 12.8347ZM15.1688 14.3726C15.0529 14.3726 14.9417 14.3265 14.8598 14.2446C14.7778 14.1626 14.7318 14.0514 14.7318 13.9355V6.5152C14.7318 6.39928 14.7778 6.28811 14.8598 6.20614C14.9417 6.12417 15.0529 6.07812 15.1688 6.07812C15.2848 6.07812 15.3959 6.12417 15.4779 6.20614C15.5599 6.28811 15.6059 6.39928 15.6059 6.5152V13.9355C15.6059 14.0514 15.5599 14.1626 15.4779 14.2446C15.3959 14.3265 15.2848 14.3726 15.1688 14.3726Z"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function FirstPersonViewIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.04 11.8262C11.0513 11.8262 11.8711 11.0064 11.8711 9.99512C11.8711 8.98385 11.0513 8.16406 10.04 8.16406C9.02878 8.16406 8.20898 8.98385 8.20898 9.99512C8.20898 11.0064 9.02878 11.8262 10.04 11.8262Z"
+        stroke="#F3F3FD"
+        strokeOpacity="0.85"
+        strokeWidth="0.732422"
+      />
+      <path
+        d="M14.6021 9.54529C14.6963 9.73096 14.7434 9.82375 14.7434 9.99902C14.7434 10.1743 14.6963 10.2671 14.6021 10.4528C14.1433 11.3564 12.8336 13.2949 10.0416 13.2949C7.24964 13.2949 5.94002 11.3564 5.4812 10.4528C5.38696 10.2671 5.33984 10.1743 5.33984 9.99902C5.33984 9.82375 5.38696 9.73096 5.4812 9.54529C5.94002 8.64163 7.24964 6.70312 10.0416 6.70312C12.8336 6.70312 14.1433 8.64163 14.6021 9.54529Z"
+        stroke="#F3F3FD"
+        strokeOpacity="0.85"
+        strokeWidth="0.732422"
+      />
+      <path
+        d="M14.0703 3.77344H14.2168C15.5288 3.77344 16.1848 3.77344 16.5924 4.18103C17 4.58862 17 5.24462 17 6.55664V6.70312"
+        stroke="#F3F3FD"
+        strokeOpacity="0.85"
+        strokeWidth="0.732422"
+        strokeLinecap="round"
+      />
+      <path
+        d="M14.0703 16.2266H14.2168C15.5288 16.2266 16.1848 16.2266 16.5924 15.819C17 15.4114 17 14.7553 17 13.4434V13.2969"
+        stroke="#F3F3FD"
+        strokeOpacity="0.85"
+        strokeWidth="0.732422"
+        strokeLinecap="round"
+      />
+      <path
+        d="M6.01367 3.77344H5.86719C4.55517 3.77344 3.89916 3.77344 3.49158 4.18103C3.08398 4.58862 3.08398 5.24462 3.08398 6.55664V6.70312"
+        stroke="#F3F3FD"
+        strokeOpacity="0.85"
+        strokeWidth="0.732422"
+        strokeLinecap="round"
+      />
+      <path
+        d="M6.01367 16.2266H5.86719C4.55517 16.2266 3.89916 16.2266 3.49158 15.819C3.08398 15.4114 3.08398 14.7553 3.08398 13.4434V13.2969"
+        stroke="#F3F3FD"
+        strokeOpacity="0.85"
+        strokeWidth="0.732422"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function BuilderIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.5 12.5H11.5C11.9142 12.5 12.25 12.8358 12.25 13.25V15C12.25 15.4142 11.9142 15.75 11.5 15.75H3.5C3.08579 15.75 2.75 15.4142 2.75 15V13.25C2.75 12.8358 3.08579 12.5 3.5 12.5ZM14.125 12.5H16.5C16.9142 12.5 17.25 12.8358 17.25 13.25V15C17.25 15.4142 16.9142 15.75 16.5 15.75H14.125C13.7108 15.75 13.375 15.4142 13.375 15V13.25C13.375 12.8358 13.7108 12.5 14.125 12.5ZM3.5 8.125H5.875C6.28921 8.125 6.625 8.46079 6.625 8.875V10.625C6.625 11.0392 6.28921 11.375 5.875 11.375H3.5C3.08579 11.375 2.75 11.0392 2.75 10.625V8.875C2.75 8.46079 3.08579 8.125 3.5 8.125ZM8.5 8.125H16.5C16.9142 8.125 17.25 8.46079 17.25 8.875V10.625C17.25 11.0392 16.9142 11.375 16.5 11.375H8.5C8.08579 11.375 7.75 11.0392 7.75 10.625V8.875C7.75 8.46079 8.08579 8.125 8.5 8.125ZM3.5 3.75H11.5C11.9142 3.75 12.25 4.08579 12.25 4.5V6.25C12.25 6.66421 11.9142 7 11.5 7H3.5C3.08579 7 2.75 6.66421 2.75 6.25V4.5C2.75 4.08579 3.08579 3.75 3.5 3.75ZM14.125 3.75H16.5C16.9142 3.75 17.25 4.08579 17.25 4.5V6.25C17.25 6.66421 16.9142 7 16.5 7H14.125C13.7108 7 13.375 6.66421 13.375 6.25V4.5C13.375 4.08579 13.7108 3.75 14.125 3.75Z"
+        stroke="var(--text-color)"
+        strokeWidth="0.5"
+      />
+    </svg>
+  );
+}
+
+export function SimulationIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.2632 11.0672C12.2632 11.4899 12.1379 11.9032 11.903 12.2547C11.6681 12.6062 11.3343 12.8802 10.9437 13.0419C10.5532 13.2037 10.1234 13.246 9.70876 13.1636C9.29413 13.0811 8.91327 12.8775 8.61434 12.5786C8.3154 12.2797 8.11183 11.8988 8.02935 11.4842C7.94688 11.0695 7.98921 10.6398 8.15099 10.2492C8.31277 9.85862 8.58674 9.52479 8.93824 9.28992C9.28975 9.05505 9.70301 8.92969 10.1258 8.92969C10.6927 8.92969 11.2363 9.15489 11.6372 9.55574C12.038 9.9566 12.2632 10.5003 12.2632 11.0672Z"
+        stroke="var(--text-color)"
+        strokeWidth="0.671459"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M10.1254 6.26248C10.7156 6.26248 11.1941 5.78399 11.1941 5.19374C11.1941 4.60349 10.7156 4.125 10.1254 4.125C9.53513 4.125 9.05664 4.60349 9.05664 5.19374C9.05664 5.78399 9.53513 6.26248 10.1254 6.26248Z"
+        stroke="var(--text-color)"
+        strokeWidth="0.671459"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M5.31874 15.8719C5.90899 15.8719 6.38748 15.3934 6.38748 14.8031C6.38748 14.2129 5.90899 13.7344 5.31874 13.7344C4.72849 13.7344 4.25 14.2129 4.25 14.8031C4.25 15.3934 4.72849 15.8719 5.31874 15.8719Z"
+        stroke="var(--text-color)"
+        strokeWidth="0.671459"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M14.932 15.8719C15.5223 15.8719 16.0008 15.3934 16.0008 14.8031C16.0008 14.2129 15.5223 13.7344 14.932 13.7344C14.3418 13.7344 13.8633 14.2129 13.8633 14.8031C13.8633 15.3934 14.3418 15.8719 14.932 15.8719Z"
+        stroke="var(--text-color)"
+        strokeWidth="0.671459"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M8.43583 12.375L6.16406 14.1488"
+        stroke="var(--text-color)"
+        strokeWidth="0.671459"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M14.0862 14.1488L11.8145 12.375"
+        stroke="var(--text-color)"
+        strokeWidth="0.671459"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M10.125 8.93468V6.26562"
+        stroke="var(--text-color)"
+        strokeWidth="0.671459"
+        strokeMiterlimit="10"
+      />
+    </svg>
+  );
+}
+
+export function VisualizationIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 3.33594V16.6693"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.1667 7.5V16.6667"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.83325 7.5V16.6667"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function MarketplaceIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.6665 2.89844L2.87558 2.96813C3.91742 3.31541 4.43834 3.48905 4.73629 3.90244C5.03425 4.31582 5.03425 4.86492 5.03425 5.96312V8.02855C5.03425 10.2609 5.03425 11.377 5.72774 12.0705C6.42124 12.764 7.5374 12.764 9.76973 12.764H11.3482M16.0837 12.764H14.5052"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+      />
+      <path
+        d="M7.0076 14.7344C7.66144 14.7344 8.19147 15.2644 8.19147 15.9182C8.19147 16.5721 7.66144 17.1021 7.0076 17.1021C6.35377 17.1021 5.82373 16.5721 5.82373 15.9182C5.82373 15.2644 6.35377 14.7344 7.0076 14.7344Z"
+        stroke="var(--text-color)"
+      />
+      <path
+        d="M14.1106 14.7344C14.7644 14.7344 15.2945 15.2644 15.2945 15.9182C15.2945 16.5721 14.7644 17.1021 14.1106 17.1021C13.4568 17.1021 12.9268 16.5721 12.9268 15.9182C12.9268 15.2644 13.4568 14.7344 14.1106 14.7344Z"
+        stroke="var(--text-color)"
+      />
+      <path
+        d="M5.03418 5.26562H7.40192M5.4288 10.7904H13.7331C14.4903 10.7904 14.8689 10.7904 15.1654 10.5949C15.462 10.3993 15.6111 10.0513 15.9094 9.35535L16.2477 8.5661C16.8865 7.07532 17.206 6.32995 16.8551 5.79778C16.5042 5.26563 15.6933 5.26562 14.0714 5.26562H10.5589"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function CopyIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.8029 3.3125H9.28064C8.13792 3.31249 7.23281 3.31248 6.52446 3.40772C5.79545 3.50573 5.2054 3.71224 4.74007 4.17757C4.27474 4.6429 4.06823 5.23295 3.97022 5.96196C3.87498 6.67031 3.87499 7.57541 3.875 8.71812V12.484C3.875 13.6481 4.72813 14.613 5.8433 14.7875C5.92909 15.2626 6.09327 15.6681 6.42333 15.9982C6.7976 16.3724 7.26884 16.5334 7.82853 16.6087C8.3676 16.6811 9.053 16.6811 9.90336 16.6811H11.837C12.6874 16.6811 13.3728 16.6811 13.9119 16.6087C14.4716 16.5334 14.9428 16.3724 15.3171 15.9982C15.6913 15.6239 15.8523 15.1527 15.9276 14.593C16 14.0539 16 13.3685 16 12.5181V9.34086C16 8.49052 16 7.80511 15.9276 7.26603C15.8523 6.70634 15.6913 6.2351 15.3171 5.86083C14.987 5.53077 14.5815 5.36659 14.1064 5.2808C13.9319 4.16563 12.967 3.3125 11.8029 3.3125ZM13.1269 5.19105C12.9386 4.6408 12.417 4.24519 11.8029 4.24519H9.31571C8.13005 4.24519 7.28773 4.24618 6.64873 4.33209C6.02315 4.4162 5.66273 4.57393 5.39958 4.83708C5.13643 5.10023 4.9787 5.46065 4.89459 6.08623C4.80868 6.72523 4.80769 7.56755 4.80769 8.75321V12.484C4.80769 13.0981 5.2033 13.6197 5.75355 13.808C5.74037 13.4287 5.74038 12.9999 5.74038 12.5181V9.34086C5.74037 8.49052 5.74036 7.80511 5.81284 7.26603C5.88809 6.70634 6.04906 6.2351 6.42333 5.86083C6.7976 5.48656 7.26884 5.32559 7.82853 5.25034C8.3676 5.17786 9.053 5.17787 9.90336 5.17788H11.837C12.3188 5.17788 12.7476 5.17787 13.1269 5.19105ZM7.08285 6.52035C7.25493 6.34826 7.49655 6.23606 7.95281 6.17472C8.42248 6.11157 9.04498 6.11058 9.9375 6.11058H11.8029C12.6954 6.11058 13.3179 6.11157 13.7876 6.17472C14.2439 6.23606 14.4854 6.34826 14.6575 6.52035C14.8297 6.69243 14.9418 6.93405 15.0032 7.39031C15.0663 7.85998 15.0673 8.48246 15.0673 9.375V12.484C15.0673 13.3765 15.0663 13.999 15.0032 14.4687C14.9418 14.925 14.8297 15.1665 14.6575 15.3386C14.4854 15.5107 14.2439 15.6229 13.7876 15.6843C13.3179 15.7474 12.6954 15.7484 11.8029 15.7484H9.9375C9.04498 15.7484 8.42248 15.7474 7.95281 15.6843C7.49655 15.6229 7.25493 15.5107 7.08285 15.3386C6.91076 15.1665 6.79856 14.925 6.73722 14.4687C6.67407 13.999 6.67308 13.3765 6.67308 12.484V9.375C6.67308 8.48246 6.67407 7.85998 6.73722 7.39031C6.79856 6.93405 6.91076 6.69243 7.08285 6.52035Z"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function PasteIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.8521 5.3385H12.4447C13.0033 5.3385 13.2826 5.3385 13.4562 5.51422C13.6297 5.68995 13.6297 5.97278 13.6297 6.53843V8.67163M11.8521 5.3385V5.8718C11.8521 6.15462 11.8521 6.29604 11.7653 6.3839C11.6785 6.47177 11.5389 6.47177 11.2596 6.47177H7.70421C7.42488 6.47177 7.28521 6.47177 7.19843 6.3839C7.11166 6.29604 7.11166 6.15462 7.11166 5.8718V5.3385M11.8521 5.3385C11.8521 5.05568 11.8521 4.8476 11.7653 4.75974C11.6785 4.67188 11.5389 4.67188 11.2596 4.67188H7.70421C7.42488 4.67188 7.28521 4.67188 7.19843 4.75974C7.11166 4.8476 7.11166 5.05568 7.11166 5.3385M7.11166 5.3385H6.5191C5.96043 5.3385 5.6811 5.3385 5.50754 5.51422C5.33398 5.68995 5.33398 5.97278 5.33398 6.53843V13.4686C5.33398 14.0343 5.33398 14.3171 5.50754 14.4928C5.6811 14.6685 5.96043 14.6685 6.5191 14.6685H9.1856M12.0002 15.3379H14.6667C15.2952 15.3379 15.6095 15.3379 15.8047 15.1426C16 14.9474 16 14.6331 16 14.0046V11.3381C16 10.7096 16 10.3954 15.8047 10.2001C15.6095 10.0049 15.2952 10.0049 14.6667 10.0049H12.0002C11.3717 10.0049 11.0575 10.0049 10.8622 10.2001C10.667 10.3954 10.667 10.7096 10.667 11.3381V14.0046C10.667 14.6331 10.667 14.9474 10.8622 15.1426C11.0575 15.3379 11.3717 15.3379 12.0002 15.3379Z"
+        stroke="var(--text-color)"
+        strokeWidth="0.666626"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function DublicateIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.8617 10.0003H6.66616C6.48206 10.0003 6.33281 9.85105 6.33281 9.66694C6.33281 9.48284 6.48206 9.33359 6.66616 9.33359H11.8617L10.4306 7.90256C10.3005 7.77238 10.3005 7.56131 10.4306 7.43113C10.5608 7.30095 10.7719 7.30095 10.9021 7.43113L12.9022 9.43123C13.0324 9.56141 13.0324 9.77248 12.9022 9.90266L10.9021 11.9028C10.7719 12.0329 10.5608 12.0329 10.4306 11.9028C10.3005 11.7726 10.3005 11.5615 10.4306 11.4313L11.8617 10.0003ZM8.99961 5.66675C8.99961 5.85085 8.85036 6.0001 8.66626 6.0001C8.48216 6.0001 8.33291 5.85085 8.33291 5.66675C8.33291 4.74623 9.07914 4 9.99966 4H15.3333C16.2538 4 17 4.74623 17 5.66675V14.3338C17 15.2544 16.2538 16.0006 15.3333 16.0006H9.99966C9.07914 16.0006 8.33291 15.2544 8.33291 14.3338C8.33291 14.1497 8.48216 14.0005 8.66626 14.0005C8.85036 14.0005 8.99961 14.1497 8.99961 14.3338C8.99961 14.8861 9.44735 15.3339 9.99966 15.3339H15.3333C15.8856 15.3339 16.3333 14.8861 16.3333 14.3338V5.66675C16.3333 5.11444 15.8856 4.6667 15.3333 4.6667H9.99966C9.44735 4.6667 8.99961 5.11444 8.99961 5.66675ZM7.33286 15.3339C7.51697 15.3339 7.66621 15.4831 7.66621 15.6672C7.66621 15.8513 7.51697 16.0006 7.33286 16.0006H5.33276C4.41224 16.0006 3.66602 15.2544 3.66602 14.3338V5.66675C3.66602 4.74623 4.41224 4 5.33276 4H7.33286C7.51697 4 7.66621 4.14925 7.66621 4.33335C7.66621 4.51745 7.51697 4.6667 7.33286 4.6667H5.33276C4.78045 4.6667 4.33271 5.11444 4.33271 5.66675V14.3338C4.33271 14.8861 4.78045 15.3339 5.33276 15.3339H7.33286Z"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function DuplicateInstanceIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.8617 10.0003H6.66616C6.48206 10.0003 6.33281 9.85105 6.33281 9.66694C6.33281 9.48284 6.48206 9.33359 6.66616 9.33359H11.8617L10.4306 7.90256C10.3005 7.77238 10.3005 7.56131 10.4306 7.43113C10.5608 7.30095 10.7719 7.30095 10.9021 7.43113L12.9022 9.43123C13.0324 9.56141 13.0324 9.77248 12.9022 9.90266L10.9021 11.9028C10.7719 12.0329 10.5608 12.0329 10.4306 11.9028C10.3005 11.7726 10.3005 11.5615 10.4306 11.4313L11.8617 10.0003ZM8.99961 5.66675C8.99961 5.85085 8.85036 6.0001 8.66626 6.0001C8.48216 6.0001 8.33291 5.85085 8.33291 5.66675C8.33291 4.74623 9.07914 4 9.99966 4H15.3333C16.2538 4 17 4.74623 17 5.66675V14.3338C17 15.2544 16.2538 16.0006 15.3333 16.0006H9.99966C9.07914 16.0006 8.33291 15.2544 8.33291 14.3338C8.33291 14.1497 8.48216 14.0005 8.66626 14.0005C8.85036 14.0005 8.99961 14.1497 8.99961 14.3338C8.99961 14.8861 9.44735 15.3339 9.99966 15.3339H15.3333C15.8856 15.3339 16.3333 14.8861 16.3333 14.3338V5.66675C16.3333 5.11444 15.8856 4.6667 15.3333 4.6667H9.99966C9.44735 4.6667 8.99961 5.11444 8.99961 5.66675ZM7.33286 15.3339C7.51697 15.3339 7.66621 15.4831 7.66621 15.6672C7.66621 15.8513 7.51697 16.0006 7.33286 16.0006H5.33276C4.41224 16.0006 3.66602 15.2544 3.66602 14.3338V5.66675C3.66602 4.74623 4.41224 4 5.33276 4H7.33286C7.51697 4 7.66621 4.14925 7.66621 4.33335C7.66621 4.51745 7.51697 4.6667 7.33286 4.6667H5.33276C4.78045 4.6667 4.33271 5.11444 4.33271 5.66675V14.3338C4.33271 14.8861 4.78045 15.3339 5.33276 15.3339H7.33286Z"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function PlayIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.9111 8.51444C17.363 9.37988 17.363 11.6201 15.9111 12.4856L7.14505 17.7109C5.73403 18.552 4 17.4572 4 15.7253V5.27468C4 3.54276 5.73403 2.44801 7.14505 3.28911L15.9111 8.51444Z"
+        stroke="var(--text-color)"
+      />
+    </svg>
+  );
+}
+
+export function BrowserIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.5 8.33073H17.5M5 6.2474H5.00833M7.5 6.2474H15M5.16667 15.8307H14.8333C15.7667 15.8307 16.2335 15.8307 16.59 15.6491C16.9036 15.4893 17.1586 15.2343 17.3183 14.9207C17.5 14.5642 17.5 14.0975 17.5 13.1641V6.83073C17.5 5.89731 17.5 5.4306 17.3183 5.07408C17.1586 4.76047 16.9036 4.5055 16.59 4.34572C16.2335 4.16406 15.7667 4.16406 14.8333 4.16406H5.16667C4.23325 4.16406 3.76653 4.16406 3.41002 4.34572C3.09641 4.5055 2.84144 4.76047 2.68166 5.07408C2.5 5.4306 2.5 5.8973 2.5 6.83073V13.1641C2.5 14.0975 2.5 14.5642 2.68166 14.9207C2.84144 15.2343 3.09641 15.4893 3.41002 15.6491C3.76653 15.8307 4.23324 15.8307 5.16667 15.8307Z"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

app/src/components/icons/SimulationIcons.tsx

@@ -0,0 +1,837 @@
+export function AnalysisIcon({ isActive }: Readonly<{ isActive: boolean }>) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.5002 12.4987L15.1418 10.1404M10.8335 14.1654H5.8335M7.50016 10.832H5.8335M10.8335 8.33203C10.8335 8.82648 10.9801 9.30983 11.2548 9.72096C11.5295 10.1321 11.92 10.4525 12.3768 10.6417C12.8336 10.8309 13.3363 10.8805 13.8212 10.784C14.3062 10.6875 14.7516 10.4494 15.1013 10.0998C15.4509 9.75017 15.689 9.30471 15.7855 8.81976C15.8819 8.3348 15.8324 7.83214 15.6432 7.37532C15.454 6.91851 15.1335 6.52806 14.7224 6.25336C14.3113 5.97865 13.8279 5.83203 13.3335 5.83203C12.6705 5.83203 12.0346 6.09542 11.5657 6.56426C11.0969 7.03311 10.8335 7.66899 10.8335 8.33203Z"
+        stroke={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.1667 14.1667V16.6667C14.1667 16.8877 14.0789 17.0996 13.9226 17.2559C13.7663 17.4122 13.5543 17.5 13.3333 17.5H3.33333C3.11232 17.5 2.90036 17.4122 2.74408 17.2559C2.5878 17.0996 2.5 16.8877 2.5 16.6667V3.33333C2.5 3.11232 2.5878 2.90036 2.74408 2.74408C2.90036 2.5878 3.11232 2.5 3.33333 2.5H13.3333"
+        stroke={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function MechanicsIcon({ isActive }: Readonly<{ isActive: boolean }>) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.69 11.7629L16.4912 11.5885C16.4161 11.5828 16.3514 11.5356 16.3226 11.466L15.9339 10.5281C15.9049 10.4588 15.917 10.3794 15.9662 10.3224L16.6834 9.35896C16.7973 9.22544 16.7898 9.02639 16.6655 8.90212L16.098 8.3348C15.974 8.21053 15.7746 8.20247 15.6414 8.31697L14.6776 9.03387C14.621 9.08282 14.541 9.09546 14.4719 9.0667L13.5338 8.67776C13.4644 8.64929 13.417 8.58341 13.4109 8.50918L13.2372 7.31068C13.2234 7.1352 13.0772 7 12.9018 7H12.0991C11.9234 7 11.7772 7.1352 11.7637 7.31068L11.5893 8.50918C11.5839 8.58399 11.5364 8.64929 11.4671 8.67776L10.5286 9.0667C10.4593 9.09546 10.3799 9.08282 10.3227 9.03387L9.35945 8.31697C9.22628 8.20276 9.0272 8.2105 8.90264 8.3348L8.33532 8.90212C8.21105 9.02639 8.20357 9.22547 8.31746 9.35896L9.03439 10.3227C9.08302 10.3794 9.09598 10.4591 9.06693 10.5281L8.67825 11.466C8.65007 11.5356 8.58448 11.5828 8.50996 11.5889L7.31062 11.7629C7.13569 11.7767 7.00049 11.9229 7.00049 12.0986V12.901C7.00049 13.0765 7.13572 13.2232 7.31062 13.2364L8.50996 13.4105C8.58448 13.4165 8.65007 13.464 8.67825 13.5333L9.06693 14.4712C9.09598 14.5408 9.08305 14.6205 9.03439 14.6772L8.31746 15.641C8.20354 15.7744 8.21102 15.9729 8.33532 16.0978L8.90264 16.6651C9.0272 16.7894 9.22628 16.7969 9.35945 16.6827L10.3227 15.9654C10.3799 15.9171 10.4593 15.9042 10.5286 15.9333L11.4671 16.3216C11.5364 16.3507 11.5839 16.4157 11.5897 16.4908L11.7637 17.6893C11.7775 17.8645 11.9234 18 12.0991 18H12.9018C13.0776 18 13.2234 17.8645 13.2372 17.6893L13.411 16.4908C13.417 16.4157 13.4645 16.3507 13.5338 16.3216L14.4722 15.9333C14.5413 15.9042 14.6213 15.9171 14.6779 15.9654L15.6414 16.6827C15.7746 16.7969 15.974 16.7894 16.098 16.6651L16.6656 16.0978C16.7902 15.9729 16.7974 15.7744 16.6834 15.641L15.9662 14.6772C15.9179 14.6205 15.9049 14.5408 15.934 14.4712L16.3226 13.5333C16.3514 13.464 16.4161 13.4165 16.4912 13.4105L17.69 13.2364C17.8652 13.2232 18.0004 13.0765 18.0004 12.901V12.0986C18.0004 11.9228 17.8652 11.7767 17.69 11.7629ZM13.8191 13.8187C13.4667 14.1706 12.9987 14.3645 12.5004 14.3645C12.0024 14.3645 11.5337 14.1706 11.1816 13.8187C10.8295 13.466 10.6353 12.9979 10.6353 12.4997C10.6353 12.0017 10.8295 11.5333 11.1816 11.1812C11.5337 10.8285 12.0024 10.6351 12.5004 10.6351C12.9987 10.6351 13.4667 10.8285 13.8191 11.1812C14.1712 11.5333 14.3652 12.0017 14.3652 12.4997C14.3652 12.9979 14.1713 13.466 13.8191 13.8187Z"
+        stroke={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
+      />
+      <path
+        d="M6.7961 8.78085C6.92052 8.73626 6.98909 8.60354 6.95416 8.47635L6.77216 7.58599C6.75759 7.53147 6.77438 7.47339 6.81595 7.43541L7.37949 6.92253C7.42078 6.88482 7.48083 6.87353 7.53285 6.89334L8.39565 7.15458C8.51874 7.20111 8.65747 7.1455 8.71367 7.02603L8.96969 6.48121C9.02637 6.36145 8.98098 6.21939 8.86644 6.1544L8.11541 5.65637C8.06665 5.62829 8.03718 5.57515 8.04024 5.51899L8.07603 4.75805C8.07906 4.70161 8.11263 4.65178 8.1636 4.62864L8.96614 4.20052C9.08642 4.14683 9.14452 4.00865 9.09994 3.88532L8.89619 3.31844C8.85132 3.19427 8.7186 3.12546 8.59144 3.16042L7.70081 3.34183C7.64628 3.35726 7.58873 3.34019 7.5505 3.29832L7.03784 2.73511C6.99958 2.69324 6.98804 2.63436 7.00837 2.58151L7.26967 1.71923C7.31617 1.59562 7.2606 1.45713 7.14084 1.40122L6.59627 1.14492C6.47679 1.08873 6.33417 1.13362 6.26894 1.24841L5.77118 1.99948C5.74335 2.04823 5.69024 2.07764 5.63405 2.07492L4.87311 2.03885C4.81695 2.03638 4.76629 2.00167 4.74345 1.951L4.31589 1.14877C4.26165 1.02849 4.12399 0.970357 4.0001 1.01498L3.43353 1.21897C3.30936 1.26359 3.24055 1.39603 3.27579 1.52319L3.45748 2.4141C3.47235 2.46804 3.45556 2.52642 3.41372 2.56413L2.85014 3.07729C2.8083 3.115 2.74912 3.12657 2.69626 3.10676L1.83398 2.84521C1.71093 2.79843 1.57244 2.85459 1.516 2.97404L1.25995 3.51864C1.20379 3.63812 1.24865 3.78074 1.3632 3.84569L2.11423 4.34373C2.16323 4.37156 2.19242 4.42442 2.1894 4.48058L2.1536 5.24152C2.15141 5.29824 2.11698 5.34779 2.06606 5.37091L1.26353 5.79899C1.14318 5.85296 1.08511 5.99089 1.12973 6.11423L1.33373 6.68107C1.37832 6.80524 1.51103 6.87405 1.63795 6.8394L2.52914 6.65716C2.58311 6.64228 2.64146 6.65935 2.67916 6.70119L3.19176 7.26449C3.23003 7.30633 3.24107 7.36579 3.2212 7.41838L2.95996 8.28065C2.91371 8.40399 2.96935 8.54247 3.08879 8.59863L3.63336 8.85466C3.75312 8.91109 3.89543 8.86567 3.9607 8.75141L4.45818 8.0001C4.48626 7.95165 4.53911 7.9219 4.59555 7.92517L5.35652 7.96097C5.41296 7.96375 5.46307 7.99732 5.48646 8.04879L5.91374 8.85074C5.96827 8.97108 6.10564 9.02971 6.2295 8.98509L6.7961 8.78085ZM5.58891 6.31659C5.23732 6.44295 4.85716 6.42533 4.51878 6.2662C4.18043 6.10707 3.92493 5.82571 3.79802 5.47385C3.67166 5.12201 3.68928 4.7421 3.84844 4.40403C4.00754 4.0654 4.28917 3.8099 4.64076 3.68329C4.99259 3.55662 5.37251 3.57424 5.71058 3.73393C6.04865 3.89251 6.3047 4.17389 6.43159 4.52573C6.55798 4.87759 6.54008 5.25723 6.38123 5.59561C6.22154 5.93365 5.94043 6.18967 5.58891 6.31659Z"
+        stroke={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
+      />
+    </svg>
+  );
+}
+
+export function PropertiesIcon({ isActive }: Readonly<{ isActive: boolean }>) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.4254 15.3839L8.67142 6.79353C8.79789 6.57037 8.90139 6.337 8.97464 6.09625C8.98245 6.01909 8.99808 5.93903 9.02639 5.85746C9.04151 5.81156 9.05423 5.76468 9.06692 5.71831C9.26711 4.6353 8.94923 3.4756 8.11182 2.63819C7.84716 2.37353 7.54982 2.16113 7.23341 2C7.21778 2 7.20216 2.00197 7.18703 2.00538L6.90578 2.07422C6.85303 2.08791 6.80762 2.12109 6.78028 2.16797C6.75294 2.21435 6.74562 2.2705 6.76025 2.32275L7.36475 4.49367C7.38722 4.57474 7.35694 4.66067 7.28906 4.70999L5.91552 5.70756C5.87352 5.73734 5.82177 5.75052 5.77049 5.74368L4.31101 5.54249C4.23142 5.53174 4.16648 5.47512 4.14498 5.39796L3.50685 3.10504C3.47754 3.00104 3.3711 2.93804 3.26613 2.96391L2.89697 3.05426C2.87794 3.05913 2.86085 3.06891 2.84375 3.07916C2.41994 3.67339 2.20606 4.37117 2.20312 5.0699C2.20947 5.94687 2.54541 6.82188 3.21435 7.49082C4.02148 8.29748 5.12649 8.61389 6.17581 8.46592C6.32718 8.44395 6.46537 8.42879 6.59231 8.42001C6.7134 8.38679 6.83256 8.34335 6.95072 8.29598C8.41851 9.78233 15.631 17.1784 15.631 17.1784C16.1266 17.674 16.9298 17.674 17.4254 17.1784C17.921 16.6828 17.921 15.8796 17.4254 15.3839ZM16.9767 16.7297C16.7291 16.9777 16.3277 16.9777 16.0797 16.7297C15.8316 16.4821 15.8316 16.0802 16.0797 15.8322C16.3277 15.5846 16.7291 15.5846 16.9767 15.8322C17.2247 16.0802 17.2247 16.4821 16.9767 16.7297Z"
+        fill={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
+      />
+      <path
+        d="M14.6953 6.25784L16.1182 5.89699L17.4878 3.50488L16.8243 2.8755L16.1612 2.24609L13.8442 3.73926L13.5586 5.17824L11.0991 7.77054L12.2183 8.8682L14.6953 6.25784Z"
+        fill={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
+      />
+      <path
+        d="M7.56537 10.7632C7.28215 11.0083 6.8808 10.7046 6.35539 11.2588L2.88271 14.918C2.18837 15.6494 2.21865 16.8057 2.95009 17.5C3.68153 18.1944 4.83732 18.1641 5.53164 17.4327L9.00482 13.7725C9.53023 13.2188 9.20647 12.8345 9.43598 12.5386C9.48285 12.4776 9.52582 12.4356 9.56879 12.4038C8.91157 11.731 8.28266 11.0874 7.73821 10.5312C7.71528 10.6084 7.66303 10.6792 7.56537 10.7632Z"
+        fill={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
+      />
+    </svg>
+  );
+}
+
+export function SimulationIcon({ isActive }: Readonly<{ isActive: boolean }>) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.44104 7.04762C6.57815 6.98413 6.73614 6.98413 6.87325 7.04762L12.0161 9.42958C12.198 9.51377 12.3143 9.69589 12.3143 9.89624V15.8512C12.3143 16.0347 12.2165 16.2043 12.0577 16.2962L6.9148 19.2736C6.75547 19.3659 6.55881 19.3659 6.39949 19.2736L1.25661 16.2962C1.09779 16.2043 1 16.0347 1 15.8512V9.89624C1 9.69589 1.11635 9.51377 1.29815 9.42958L6.44104 7.04762ZM2.02857 10.7297L6.14286 12.794V17.9366L2.02857 15.5546V10.7297ZM7.17143 17.9366L11.2857 15.5546V10.7297L7.17143 12.794V17.9366ZM6.65714 11.9013L10.6163 9.91477L6.65714 8.08106L2.69798 9.91477L6.65714 11.9013Z"
+        fill={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.441 1.04762C12.5781 0.984127 12.7361 0.984127 12.8732 1.04762L18.0161 3.42958C18.198 3.51377 18.3143 3.69589 18.3143 3.89624V9.85116C18.3143 10.0347 18.2165 10.2043 18.0577 10.2962L12.9148 13.2736C12.7555 13.3659 12.5588 13.3659 12.3995 13.2736L7.25661 10.2962C7.09779 10.2043 7 10.0347 7 9.85116V3.89624C7 3.69589 7.11635 3.51377 7.29815 3.42958L12.441 1.04762ZM8.02857 4.72968L12.1429 6.79403V11.9366L8.02857 9.55463V4.72968ZM13.1714 11.9366L17.2857 9.55463V4.72968L13.1714 6.79403V11.9366ZM12.6571 5.90129L16.6163 3.91477L12.6571 2.08106L8.69798 3.91477L12.6571 5.90129Z"
+        fill={
+          isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+        }
+      />
+    </svg>
+  );
+}
+
+// simulation player icons
+
+export function ResetIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 13 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.54182 4.09637C3.33333 2.73422 4.80832 1.81836 6.49721 1.81836C9.02194 1.81836 11.0686 3.86506 11.0686 6.38979C11.0686 8.91452 9.02194 10.9612 6.49721 10.9612C3.97248 10.9612 1.92578 8.91452 1.92578 6.38979"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.64118 6.38895C7.64118 7.02013 7.12951 7.53181 6.49833 7.53181C5.86714 7.53181 5.35547 7.02013 5.35547 6.38895C5.35547 5.75777 5.86714 5.24609 6.49833 5.24609C7.12951 5.24609 7.64118 5.75777 7.64118 6.38895Z"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
+        strokeWidth="0.571429"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.78125 4.10407H2.49554V1.81836"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function PlayStopIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 13 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 2.88867V9.88867M11 2.88867V9.88867M2 3.99171V8.78562C2 9.28847 2 9.53987 2.09943 9.65627C2.1857 9.75732 2.31512 9.81092 2.44756 9.80047C2.60019 9.78847 2.77796 9.61072 3.13352 9.25517L5.5305 6.85817C5.69485 6.69382 5.777 6.61167 5.8078 6.51692C5.83485 6.43357 5.83485 6.34377 5.8078 6.26042C5.777 6.16567 5.69485 6.08352 5.5305 5.91917L3.13352 3.52219C2.77796 3.16664 2.60019 2.98886 2.44756 2.97685C2.31512 2.96643 2.1857 3.02004 2.09943 3.12105C2 3.23747 2 3.48888 2 3.99171Z"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function ExitIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 13 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.08203 6.34311L5.03647 3.38867M2.08203 6.34311L5.03647 9.29755M2.08203 6.34311H5.9228C7.22276 6.34334 9.34995 7.05241 10.7681 9.88867"
+        stroke="var(--text-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function MoveArrowRight() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.58363 6.16637L15.4173 12L9.58363 17.8336"
+        stroke="var(--accent-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function MoveArrowLeft() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.4164 6.16637L8.58274 12L14.4164 17.8336"
+        stroke="var(--accent-color)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+// simulation card icons
+
+export function ExpandIcon({
+  color = "#6F42C1",
+}: Readonly<{ color?: string }>) {
+  return (
+    <svg
+      width="30"
+      height="30"
+      viewBox="0 0 30 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="15" cy="15" r="15" fill={color} />
+      <path
+        d="M20.4993 11.0263C20.5138 10.7505 20.302 10.5152 20.0263 10.5007L15.5325 10.2642C15.2567 10.2497 15.0214 10.4614 15.0069 10.7372C14.9924 11.013 15.2042 11.2483 15.4799 11.2628L19.4744 11.473L19.2642 15.4675C19.2497 15.7433 19.4614 15.9786 19.7372 15.9931C20.013 16.0076 20.2483 15.7958 20.2628 15.5201L20.4993 11.0263ZM10 20L10.3345 20.3716L20.3345 11.3716L20 11L19.6655 10.6284L9.66552 19.6284L10 20Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export function SimulationStatusIcon({
+  color = "#21FF59",
+}: Readonly<{ color?: string }>) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.46647 12.6024C10.3014 12.6024 12.5997 10.3041 12.5997 7.46916C12.5997 4.63416 10.3014 2.33594 7.46647 2.33594C4.63147 2.33594 2.33325 4.63416 2.33325 7.46916C2.33325 10.3041 4.63147 12.6024 7.46647 12.6024Z"
+        fill={color}
+        fillOpacity="0.3"
+      />
+      <path
+        d="M8.79738 8.04925L6.83063 9.26848C6.51405 9.46474 6.125 9.20928 6.125 8.80516V6.3667C6.125 5.96258 6.51405 5.70714 6.83063 5.9034L8.79738 7.12263C9.12309 7.32458 9.12309 7.8473 8.79738 8.04925Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
+
+export function IndicationArrow() {
+  return (
+    <svg
+      width="15"
+      height="6"
+      viewBox="0 0 15 6"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.09697 5.03095L14.5 0L0 0L6.88778 5.05104C7.24969 5.31644 7.74408 5.30822 8.09697 5.03095Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export function CartBagIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 3L2.26491 3.0883C3.58495 3.52832 4.24497 3.74832 4.62248 4.2721C5 4.79587 5 5.49159 5 6.88304V9.5C5 12.3284 5 13.7426 5.87868 14.6213C6.75736 15.5 8.17157 15.5 11 15.5H19"
+        stroke="#FFFFFF"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        opacity="0.5"
+        d="M7.5 18C8.32843 18 9 18.6716 9 19.5C9 20.3284 8.32843 21 7.5 21C6.67157 21 6 20.3284 6 19.5C6 18.6716 6.67157 18 7.5 18Z"
+        stroke="#FFFFFF"
+        strokeWidth="1.5"
+      />
+      <path
+        opacity="0.5"
+        d="M16.5 18C17.3284 18 18 18.6715 18 19.5C18 20.3284 17.3284 21 16.5 21C15.6716 21 15 20.3284 15 19.5C15 18.6715 15.6716 18 16.5 18Z"
+        stroke="#FFFFFF"
+        strokeWidth="1.5"
+      />
+      <path
+        opacity="0.5"
+        d="M11 9H8"
+        stroke="#FFFFFF"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M5 6H16.4504C18.5054 6 19.5328 6 19.9775 6.67426C20.4221 7.34853 20.0173 8.29294 19.2078 10.1818L18.7792 11.1818C18.4013 12.0636 18.2123 12.5045 17.8366 12.7523C17.4609 13 16.9812 13 16.0218 13H5"
+        stroke="#FFFFFF"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+}
+
+export function StorageCapacityIcon() {
+  return (
+    <svg
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_4582_10883)">
+        <g filter="url(#filter0_f_4582_10883)">
+          <path
+            d="M5.31653 6.41406H15.35C16.495 6.41406 17.431 7.30913 17.4964 8.43776L17.5 8.56409V11.4308C17.5 12.5758 16.605 13.5118 15.4763 13.5772L15.35 13.5808H5.31653C4.17151 13.5808 3.23555 12.6858 3.17015 11.5571L3.1665 11.4308V8.56409C3.1665 7.41907 4.06158 6.48311 5.1902 6.41771L5.31653 6.41406ZM14.6333 8.56409C14.2375 8.56409 13.9166 8.88494 13.9166 9.28076C13.9166 9.67658 14.2375 9.99744 14.6333 9.99744C15.0291 9.99744 15.35 9.67658 15.35 9.28076C15.35 8.88494 15.0291 8.56409 14.6333 8.56409ZM11.7666 8.56409C11.3708 8.56409 11.0499 8.88494 11.0499 9.28076C11.0499 9.67658 11.3708 9.99744 11.7666 9.99744C12.1624 9.99744 12.4833 9.67658 12.4833 9.28076C12.4833 8.88494 12.1624 8.56409 11.7666 8.56409Z"
+            fill="#6F42C1"
+          />
+        </g>
+        <path
+          d="M5.31653 6.41406H15.35C16.495 6.41406 17.431 7.30913 17.4964 8.43776L17.5 8.56409V11.4308C17.5 12.5758 16.605 13.5118 15.4763 13.5772L15.35 13.5808H5.31653C4.17151 13.5808 3.23555 12.6858 3.17015 11.5571L3.1665 11.4308V8.56409C3.1665 7.41907 4.06158 6.48311 5.1902 6.41771L5.31653 6.41406ZM14.6333 8.56409C14.2375 8.56409 13.9166 8.88494 13.9166 9.28076C13.9166 9.67658 14.2375 9.99744 14.6333 9.99744C15.0291 9.99744 15.35 9.67658 15.35 9.28076C15.35 8.88494 15.0291 8.56409 14.6333 8.56409ZM11.7666 8.56409C11.3708 8.56409 11.0499 8.88494 11.0499 9.28076C11.0499 9.67658 11.3708 9.99744 11.7666 9.99744C12.1624 9.99744 12.4833 9.67658 12.4833 9.28076C12.4833 8.88494 12.1624 8.56409 11.7666 8.56409Z"
+          fill="#CCACFF"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_4582_10883"
+          x="-0.833496"
+          y="2.41406"
+          width="22.3335"
+          height="15.1641"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="2"
+            result="effect1_foregroundBlur_4582_10883"
+          />
+        </filter>
+        <clipPath id="clip0_4582_10883">
+          <rect
+            width="20"
+            height="20"
+            fill="white"
+            transform="translate(0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export function CompareLayoutIcon() {
+  return (
+    <svg
+      width="182"
+      height="118"
+      viewBox="0 0 182 118"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_d_3106_8112)">
+        <rect x="24" y="4" width="134" height="106" rx="6" fill="#FCFDFD" />
+        <rect
+          x="24.5"
+          y="4.5"
+          width="133"
+          height="105"
+          rx="5.5"
+          stroke="#E5E5EA"
+        />
+      </g>
+      <rect x="98" y="12" width="2" height="2" fill="#E5E5EA" />
+      <rect x="98" y="19" width="2" height="2" fill="#E5E5EA" />
+      <rect x="98" y="25" width="2" height="2" fill="#E5E5EA" />
+      <rect x="98" y="33" width="2" height="2" fill="#E5E5EA" />
+      <rect x="98" y="39" width="2" height="2" fill="#E5E5EA" />
+      <rect x="104" y="12" width="7" height="2" fill="#E5E5EA" />
+      <rect x="104" y="19" width="13" height="2" fill="#E5E5EA" />
+      <rect x="111" y="26" width="19" height="2" fill="#E5E5EA" />
+      <rect x="133" y="26" width="10" height="2" fill="#E5E5EA" />
+      <rect x="111" y="32" width="10" height="2" fill="#E5E5EA" />
+      <rect x="116" y="39" width="5" height="2" fill="#E5E5EA" />
+      <rect x="103" y="46" width="9" height="2" fill="#E5E5EA" />
+      <rect x="111" y="53" width="11" height="2" fill="#E5E5EA" />
+      <rect x="104" y="60" width="7" height="2" fill="#E5E5EA" />
+      <rect x="115" y="60" width="11" height="2" fill="#E5E5EA" />
+      <rect x="130" y="60" width="22" height="2" fill="#E5E5EA" />
+      <rect x="124" y="53" width="7" height="2" fill="#E5E5EA" />
+      <rect x="135" y="53" width="17" height="2" fill="#E5E5EA" />
+      <rect x="114" y="46" width="4" height="2" fill="#E5E5EA" />
+      <rect x="121" y="46" width="21" height="2" fill="#E5E5EA" />
+      <rect x="144" y="46" width="4" height="2" fill="#E5E5EA" />
+      <rect x="124" y="39" width="11" height="2" fill="#E5E5EA" />
+      <rect x="143" y="39" width="7" height="2" fill="#E5E5EA" />
+      <rect x="124" y="32" width="10" height="2" fill="#E5E5EA" />
+      <rect x="137" y="32" width="10" height="2" fill="#E5E5EA" />
+      <rect x="151" y="32" width="3" height="2" fill="#E5E5EA" />
+      <rect x="119" y="19" width="5" height="2" fill="#E5E5EA" />
+      <rect x="127" y="19" width="8" height="2" fill="#E5E5EA" />
+      <rect x="113" y="12" width="5" height="2" fill="#E5E5EA" />
+      <rect x="119" y="12" width="20" height="2" fill="#E5E5EA" />
+      <g filter="url(#filter1_f_3106_8112)">
+        <path d="M92 5V109.5" stroke="#B392F0" strokeLinecap="round" />
+      </g>
+      <path d="M92 5V109.5" stroke="#6F42C1" strokeLinecap="round" />
+      <g filter="url(#filter2_f_3106_8112)">
+        <circle cx="92" cy="57" r="12" fill="#6F42C1" />
+      </g>
+      <circle cx="92" cy="57" r="12" fill="#6F42C1" />
+      <g filter="url(#filter3_f_3106_8112)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M89.9091 61.9119C89.7089 59.2881 87.6238 57.203 85 57.0028C87.6238 56.8027 89.7089 54.7175 89.9091 52.0938C90.1093 54.7175 92.1944 56.8027 94.8182 57.0028C92.1944 57.203 90.1093 59.2881 89.9091 61.9119Z"
+          fill="#FCFDFD"
+        />
+      </g>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M89.9091 61.9119C89.7089 59.2881 87.6238 57.203 85 57.0028C87.6238 56.8027 89.7089 54.7175 89.9091 52.0938C90.1093 54.7175 92.1944 56.8027 94.8182 57.0028C92.1944 57.203 90.1093 59.2881 89.9091 61.9119Z"
+        fill="#FCFDFD"
+      />
+      <g filter="url(#filter4_f_3106_8112)">
+        <path
+          d="M96.0444 65.5888C95.9374 64.809 95.4601 63.3226 93.5898 63.1342C95.4601 62.9458 95.9374 61.4595 96.0444 60.6797C96.2328 62.5499 97.7191 63.0272 98.4989 63.1342C97.7191 63.2412 96.2328 63.7185 96.0444 65.5888Z"
+          fill="#FCFDFD"
+        />
+      </g>
+      <path
+        d="M96.0444 65.5888C95.9374 64.809 95.4601 63.3226 93.5898 63.1342C95.4601 62.9458 95.9374 61.4595 96.0444 60.6797C96.2328 62.5499 97.7191 63.0272 98.4989 63.1342C97.7191 63.2412 96.2328 63.7185 96.0444 65.5888Z"
+        fill="#FCFDFD"
+      />
+      <g filter="url(#filter5_f_3106_8112)">
+        <path
+          d="M96.0444 48.4062C96.2328 50.2765 97.7191 50.7538 98.4989 50.8608C97.7191 50.9678 96.2328 51.445 96.0444 53.3153C95.9374 52.5355 95.4601 51.0492 93.5898 50.8608C95.4601 50.6724 95.9374 49.1861 96.0444 48.4062Z"
+          fill="#FCFDFD"
+        />
+      </g>
+      <path
+        d="M96.0444 48.4062C96.2328 50.2765 97.7191 50.7538 98.4989 50.8608C97.7191 50.9678 96.2328 51.445 96.0444 53.3153C95.9374 52.5355 95.4601 51.0492 93.5898 50.8608C95.4601 50.6724 95.9374 49.1861 96.0444 48.4062Z"
+        fill="#FCFDFD"
+      />
+      <g filter="url(#filter6_d_3106_8112)">
+        <path
+          d="M157 26H172C175.314 26 178 28.6863 178 32V82C178 85.3137 175.314 88 172 88H157V26Z"
+          fill="#FCFDFD"
+        />
+        <path
+          d="M172 26.5C175.038 26.5 177.5 28.9624 177.5 32V82C177.5 85.0376 175.038 87.5 172 87.5H157.5V26.5H172Z"
+          stroke="#E5E5EA"
+        />
+      </g>
+      <g filter="url(#filter7_d_3106_8112)">
+        <path
+          d="M25 87H10C6.68629 87 4 84.3137 4 81L4 31C4 27.6863 6.68629 25 10 25H25L25 87Z"
+          fill="#FCFDFD"
+        />
+        <path
+          d="M10 86.5C6.96243 86.5 4.5 84.0376 4.5 81L4.5 31C4.5 27.9624 6.96244 25.5 10 25.5H24.5L24.5 86.5H10Z"
+          stroke="#E5E5EA"
+        />
+      </g>
+      <rect
+        x="31.25"
+        y="18.25"
+        width="53.5"
+        height="20.5"
+        rx="3.75"
+        fill="#F2F2F7"
+        stroke="#C7C7CC"
+        strokeWidth="0.5"
+      />
+      <rect
+        x="35.25"
+        y="88.25"
+        width="35.5"
+        height="9.5"
+        rx="3.75"
+        fill="#F2F2F7"
+        stroke="#C7C7CC"
+        strokeWidth="0.5"
+      />
+      <rect
+        x="31.25"
+        y="51.25"
+        width="35.5"
+        height="12.5"
+        rx="3.75"
+        fill="#F2F2F7"
+        stroke="#C7C7CC"
+        strokeWidth="0.5"
+      />
+      <rect
+        x="42.25"
+        y="70.25"
+        width="35.5"
+        height="11.5"
+        rx="3.75"
+        fill="#F2F2F7"
+        stroke="#C7C7CC"
+        strokeWidth="0.5"
+      />
+      <defs>
+        <filter
+          id="filter0_d_3106_8112"
+          x="20"
+          y="4"
+          width="142"
+          height="114"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.370833 0 0 0 0 0.370833 0 0 0 0 0.370833 0 0 0 0.11 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_3106_8112"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_3106_8112"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter1_f_3106_8112"
+          x="87.5"
+          y="0.5"
+          width="9"
+          height="113.5"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="2"
+            result="effect1_foregroundBlur_3106_8112"
+          />
+        </filter>
+        <filter
+          id="filter2_f_3106_8112"
+          x="76"
+          y="41"
+          width="32"
+          height="32"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="2"
+            result="effect1_foregroundBlur_3106_8112"
+          />
+        </filter>
+        <filter
+          id="filter3_f_3106_8112"
+          x="81"
+          y="48.0938"
+          width="17.8184"
+          height="17.8203"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="2"
+            result="effect1_foregroundBlur_3106_8112"
+          />
+        </filter>
+        <filter
+          id="filter4_f_3106_8112"
+          x="89.5898"
+          y="56.6797"
+          width="12.9082"
+          height="12.9062"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="2"
+            result="effect1_foregroundBlur_3106_8112"
+          />
+        </filter>
+        <filter
+          id="filter5_f_3106_8112"
+          x="89.5898"
+          y="44.4062"
+          width="12.9082"
+          height="12.9062"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="2"
+            result="effect1_foregroundBlur_3106_8112"
+          />
+        </filter>
+        <filter
+          id="filter6_d_3106_8112"
+          x="153"
+          y="26"
+          width="29"
+          height="70"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.370833 0 0 0 0 0.370833 0 0 0 0 0.370833 0 0 0 0.11 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_3106_8112"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_3106_8112"
+            result="shape"
+          />
+        </filter>
+        <filter
+          id="filter7_d_3106_8112"
+          x="0"
+          y="25"
+          width="29"
+          height="70"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.370833 0 0 0 0 0.370833 0 0 0 0 0.370833 0 0 0 0.11 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_3106_8112"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_3106_8112"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
+
+export const ResizerIcon = () => {
+  return (
+    <svg
+      width="22"
+      height="23"
+      viewBox="0 0 22 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_3106_8243)">
+        <g filter="url(#filter0_f_3106_8243)">
+          <path
+            d="M8.02644 3.65625V11.0201H3.89599L5.62315 9.28625L4.67923 8.34233L1.33203 11.6895L4.67923 15.0367L5.62315 14.0928L3.89599 12.359H8.02644V19.7228H9.36532V3.65625H8.02644ZM16.7292 8.34233L15.7853 9.28625L17.5124 11.0201H13.382V3.65625H12.0431V19.7228H13.382V12.359H17.5124L15.7853 14.0928L16.7292 15.0367L20.0764 11.6895L16.7292 8.34233Z"
+            fill="var(--background-color-button)"
+          />
+        </g>
+        <path
+          d="M8.02644 3.65625V11.0201H3.89599L5.62315 9.28625L4.67923 8.34233L1.33203 11.6895L4.67923 15.0367L5.62315 14.0928L3.89599 12.359H8.02644V19.7228H9.36532V3.65625H8.02644ZM16.7292 8.34233L15.7853 9.28625L17.5124 11.0201H13.382V3.65625H12.0431V19.7228H13.382V12.359H17.5124L15.7853 14.0928L16.7292 15.0367L20.0764 11.6895L16.7292 8.34233Z"
+          fill="var(--background-color-button)"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_3106_8243"
+          x="-2.66797"
+          y="-0.34375"
+          width="26.7441"
+          height="24.0703"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="2"
+            result="effect1_foregroundBlur_3106_8243"
+          />
+        </filter>
+        <clipPath id="clip0_3106_8243">
+          <rect
+            width="21.4221"
+            height="21.4221"
+            fill="var(--background-color-button)"
+            transform="translate(-0.00976562 0.984375)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export const LayoutIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.99935 4.16406C9.5391 4.16406 9.16602 4.53716 9.16602 4.9974C9.16602 5.45763 9.5391 5.83073 9.99935 5.83073H16.666C17.1263 5.83073 17.4993 5.45763 17.4993 4.9974C17.4993 4.53716 17.1263 4.16406 16.666 4.16406H9.99935Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M5.83398 9.9974C5.83398 9.53715 6.20708 9.16406 6.66732 9.16406H13.334C13.7942 9.16406 14.1673 9.53715 14.1673 9.9974C14.1673 10.4576 13.7942 10.8307 13.334 10.8307H6.66732C6.20708 10.8307 5.83398 10.4576 5.83398 9.9974Z"
+        fill="var(--text-color)"
+      />
+      <path
+        d="M2.5 14.9974C2.5 14.5371 2.8731 14.1641 3.33333 14.1641H10C10.4602 14.1641 10.8333 14.5371 10.8333 14.9974C10.8333 15.4576 10.4602 15.8307 10 15.8307H3.33333C2.8731 15.8307 2.5 15.4576 2.5 14.9974Z"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+};