<script setup lang="ts">
import { onMounted } from 'vue'
import { useSessionTreeStore } from '../stores/sessionTree'
import { useWorkspaceStore } from '../stores/workspace'
import TopToolbar from '../components/TopToolbar.vue'
import SessionTree from '../components/SessionTree.vue'
import WorkspacePanel from '../components/WorkspacePanel.vue'

const treeStore = useSessionTreeStore()
const workspaceStore = useWorkspaceStore()

onMounted(() => {
  treeStore.restore()
  workspaceStore.restore()

  if (treeStore.nodes.length === 0) {
    treeStore.initFromConnections()
  }
})
</script>

<template>
  <div class="h-screen flex flex-col bg-slate-950 text-slate-100">
    <TopToolbar />

    <div class="flex-1 min-h-0 flex">
      <div class="w-72 flex-shrink-0">
        <SessionTree />
      </div>

      <div class="flex-1 min-w-0">
        <WorkspacePanel />
      </div>
    </div>
  </div>
</template>
