<template>
  <aside
    class="flex min-h-0 shrink-0 flex-col border-r border-border bg-surface-1"
    :style="{ width: `${ide.leftWidth}px` }"
  >
    <ProjectTree v-if="ide.activeActivity === 'explorer'" />
    <GitPanel v-else-if="ide.activeActivity === 'git'" />
    <SessionsPanel v-else-if="ide.activeActivity === 'sessions'" />
    <GroupsPanel v-else />
  </aside>
</template>

<script setup lang="ts">
import { useIdeStore } from '../../stores/ide';
import ProjectTree from './ProjectTree.vue';
import GitPanel from './GitPanel.vue';
import SessionsPanel from './SessionsPanel.vue';
import GroupsPanel from './GroupsPanel.vue';

const ide = useIdeStore();
</script>
