From 93f421eba4fffed2122bd5ef9b941512bf78c6a4 Mon Sep 17 00:00:00 2001
From: "azykov@mail.ru" <azykov@mail.ru>
Date: Thu, 4 Jun 2026 17:00:08 +0300
Subject: [PATCH] object type panel

---
 src/App.tsx                                |  5 ++-
 src/components/LeftPanel.tsx               |  1 -
 src/components/MainPanel.tsx               | 19 ++++++++++
 src/components/Panel.tsx                   |  7 +---
 src/components/{Panel.scss => Panels.scss} | 44 ++++++++++++++--------
 src/components/Panels.tsx                  | 12 ++++++
 6 files changed, 65 insertions(+), 23 deletions(-)
 create mode 100644 src/components/MainPanel.tsx
 rename src/components/{Panel.scss => Panels.scss} (67%)
 create mode 100644 src/components/Panels.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 6c0b314..411f674 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import { ThreeView } from './components/ThreeView';
 import { state } from './state';
 import './App.scss';
 import { LeftPanel } from './components/LeftPanel';
+import { Panels } from './components/Panels';
 
 function StateToUrlSync() {
     const navigate = useNavigate();
@@ -14,7 +15,7 @@ function StateToUrlSync() {
             selectedObjectId: state.worldEditor.selection?.type === 'object' && state.worldEditor.selection.id,
             selectedObjectTypeId: state.worldEditor.selection?.type === 'objectType' && state.worldEditor.selection.id,
         }),
-        ({ isGame, selectedObjectId, selectedObjectTypeId}) => {
+        ({ isGame, selectedObjectId, selectedObjectTypeId }) => {
             if (isGame) navigate('/game');
             else if (selectedObjectId) navigate(`/editor/object/${selectedObjectId}`);
             else if (selectedObjectTypeId) navigate(`/editor/objectType/${selectedObjectTypeId}`);
@@ -74,7 +75,7 @@ function EditorLayout() {
         <>
             <Outlet />
             <ThreeView />
-            <LeftPanel />
+            <Panels />
         </>
     );
 }
diff --git a/src/components/LeftPanel.tsx b/src/components/LeftPanel.tsx
index a1b3925..12d4990 100644
--- a/src/components/LeftPanel.tsx
+++ b/src/components/LeftPanel.tsx
@@ -1,5 +1,4 @@
 import { observer } from "mobx-react-lite";
-import './Panel.scss';
 import { RenderInfoView } from "./RenderInfoView";
 import { MenuView } from "./MenuView";
 import { state } from "../state";
diff --git a/src/components/MainPanel.tsx b/src/components/MainPanel.tsx
new file mode 100644
index 0000000..c0283ee
--- /dev/null
+++ b/src/components/MainPanel.tsx
@@ -0,0 +1,19 @@
+import { observer } from "mobx-react-lite";
+import { state } from "../state";
+import { Panel } from "./Panel";
+
+export const MainPanel = observer(function () {
+    const isGame = state.game && !state.game.isPaused;
+    const selectedObjectTypeId = state.worldEditor.selection?.type === 'objectType'
+        ? state.worldEditor.selection.id
+        : undefined;
+
+    if (isGame || !selectedObjectTypeId)
+        return null;
+
+    return <Panel side='main'>
+        <header>
+            <div>{selectedObjectTypeId}</div>
+        </header>
+    </Panel>
+});
diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx
index ed732f8..dc8f69f 100644
--- a/src/components/Panel.tsx
+++ b/src/components/Panel.tsx
@@ -1,16 +1,13 @@
 import { observer } from "mobx-react-lite";
-import './Panel.scss';
 import type { ReactNode } from "react";
 
 export type PanelProps = {
-    side?: 'left' | 'right';
+    side?: 'left' | 'right' | 'main';
     children?: ReactNode;
 }
 
 export const Panel = observer(function ({ children, side = 'left' }: PanelProps) {
     return <div className={`panel ${side}`}>
-        <div className="container">
-            {children}
-        </div>
+        {children}
     </div >
 });
diff --git a/src/components/Panel.scss b/src/components/Panels.scss
similarity index 67%
rename from src/components/Panel.scss
rename to src/components/Panels.scss
index 96dfee6..2ea1c5a 100644
--- a/src/components/Panel.scss
+++ b/src/components/Panels.scss
@@ -1,26 +1,23 @@
-.panel {
+.overlay-panels {
+    z-index: 15000;
     position: fixed;
     top: 0;
-    width: 30%;
+    left: 0;
+    width: 100vw;
     height: 100vh;
-    padding: 10px;
-    z-index: 10;
-    box-sizing: border-box;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    gap: 10px;
 
     pointer-events: none;
 
-    &.left {
-        left: 0;
-    }
+    &>.panel {
+        box-sizing: border-box;
+        margin: 10px;
 
-    &.right {
-        right: 0;
-    }
+        display: flex;
+        flex-direction: column;
 
-    &>.container {
-        flex: 1;
         background: rgba(0, 0, 0, 0.3);
         backdrop-filter: blur(4px);
         padding: 4px;
@@ -30,7 +27,24 @@
         flex-direction: column;
         gap: 0.25em;
 
-        &>*:not(.debug):not(.gap) {
+        &.left,
+        &.right {
+            min-width: 30%;
+            flex: 0;
+        }
+
+        &.main {
+            flex: 1;
+        }
+
+        &>header {
+            background: #00000040;
+            margin: -4px;
+            padding: 12px;
+            text-transform: capitalize;
+        }
+
+        &>*:not(.debug):not(.header):not(.gap) {
             pointer-events: all;
         }
 
diff --git a/src/components/Panels.tsx b/src/components/Panels.tsx
new file mode 100644
index 0000000..6ad2ad7
--- /dev/null
+++ b/src/components/Panels.tsx
@@ -0,0 +1,12 @@
+import { observer } from "mobx-react-lite";
+import { LeftPanel } from "./LeftPanel";
+import { MainPanel } from "./MainPanel";
+import './Panels.scss';
+
+export const Panels = observer(function () {
+
+    return <div className="overlay-panels">
+        <LeftPanel />
+        <MainPanel />
+    </div>
+});