<script setup lang="ts">
import { watch } from 'vue'
import { useKeyStore } from '@renderer/stores/key'
import { useConnectionStore } from '@renderer/stores/connection'
import KeyList from './KeyList.vue'
import KeyDetail from './KeyDetail.vue'

const keyStore = useKeyStore()
const connStore = useConnectionStore()

watch(
  () => connStore.activeId,
  async (newId) => {
    if (newId) {
      keyStore.selectedKey = null
      keyStore.keyData = null
      await keyStore.scanKeys(newId, '0', true)
    }
  },
  { immediate: true }
)
</script>

<template>
  <div class="key-browser">
    <div class="key-sidebar">
      <KeyList />
    </div>
    <div class="key-main">
      <KeyDetail />
    </div>
  </div>
</template>

<style scoped>
.key-browser {
  display: flex;
  height: 100%;
}

.key-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-color);
}

.key-main {
  flex: 1;
  overflow: hidden;
}
</style>
