<script setup lang="ts">
// src/App.vue
import { ref, onMounted } from 'vue'
import TitleBar from './components/TitleBar.vue'
import Sidebar from './components/Sidebar.vue'
import MainArea from './components/MainArea.vue'
import StatusBar from './components/StatusBar.vue'
import { useConnectionStore } from '@renderer/stores/connection'

const connStore = useConnectionStore()
const showSettings = ref(false)

onMounted(() => {
  connStore.loadConnections()
})
</script>

<template>
  <div class="app-shell">
    <TitleBar v-model:showSettings="showSettings" />
    <div class="app-body">
      <Sidebar />
      <MainArea v-model:showSettings="showSettings" />
    </div>
    <StatusBar />
  </div>
</template>

<style scoped>
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.app-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
</style>
