refactor & improvements

frontend/src/lib/DreportEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import type { Template } from '../core/types'
 import type { JsonSchema } from '../core/schema-parser'
 import { useTemplateStore } from '../stores/template'
@@ -7,6 +7,7 @@ import { useSchemaStore } from '../stores/schema'
 import { useEditorStore } from '../stores/editor'
 import EditorCanvas from '../components/editor/EditorCanvas.vue'
 import ToolboxPanel from '../components/panels/ToolboxPanel.vue'
+import SchemaTreePanel from '../components/panels/SchemaTreePanel.vue'
 import PropertiesPanel from '../components/panels/PropertiesPanel.vue'
 
 export interface DreportEditorConfig {
@@ -28,6 +29,8 @@ const emit = defineEmits<{
   'compile-error': [error: string | null]
 }>()
 
+const leftTab = ref<'tools' | 'schema'>('tools')
+
 const templateStore = useTemplateStore()
 const schemaStore = useSchemaStore()
 const editorStore = useEditorStore()
@@ -178,7 +181,12 @@ defineExpose({
 <template>
   <div class="dreport-editor">
     <aside class="dreport-editor__sidebar dreport-editor__sidebar--left">
-      <ToolboxPanel />
+      <div class="sidebar-tabs">
+        <button class="sidebar-tab" :class="{ 'sidebar-tab--active': leftTab === 'tools' }" @click="leftTab = 'tools'">Araclar</button>
+        <button class="sidebar-tab" :class="{ 'sidebar-tab--active': leftTab === 'schema' }" @click="leftTab = 'schema'">Schema</button>
+      </div>
+      <ToolboxPanel v-if="leftTab === 'tools'" />
+      <SchemaTreePanel v-else />
     </aside>
     <EditorCanvas :handle-errors="handleErrors" @compile-error="onCompileError" />
     <aside class="dreport-editor__sidebar dreport-editor__sidebar--right">
@@ -204,8 +212,42 @@ defineExpose({
   overflow-y: auto;
 }
 
+.dreport-editor__sidebar--left {
+  display: flex;
+  flex-direction: column;
+}
+
 .dreport-editor__sidebar--right {
   border-right: none;
   border-left: 1px solid #e2e8f0;
 }
+
+.sidebar-tabs {
+  display: flex;
+  border-bottom: 1px solid #e2e8f0;
+  flex-shrink: 0;
+}
+
+.sidebar-tab {
+  flex: 1;
+  padding: 8px 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: #94a3b8;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.sidebar-tab--active {
+  color: #3b82f6;
+  border-bottom-color: #3b82f6;
+}
+
+.sidebar-tab:hover:not(.sidebar-tab--active) {
+  color: #64748b;
+}
 </style>