<template>
  <aside class="session-sidebar">
    <h3 class="sidebar-title">会话</h3>
    <button
      v-for="session in sessions"
      :key="session.id"
      class="sidebar-tab"
      :class="{ active: session.id === activeId }"
      @click="setActive(session.id)"
    >
      <span class="dot" :class="session.status"></span>
      <span class="label">{{ session.title }}</span>
      <span class="close" @click.stop="closeSession(session.id)">×</span>
    </button>
  </aside>
</template>

<script setup>
import { useSessions } from "../composables/useSessions";
const { sessions, activeId, setActive, closeSession } = useSessions();
</script>

<style scoped>
.session-sidebar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 200px;
  padding: 8px;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 30;
}

.sidebar-title {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

.sidebar-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.sidebar-tab:hover { background: var(--bg-3); color: var(--text-1); }
.sidebar-tab.active { border-color: var(--border-hi); background: var(--accent-dim); color: var(--accent); }

.label { flex: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.dot.ready { background: var(--accent); }
.dot.connecting { background: #e3b341; }
.dot.error { background: var(--danger); }
.dot.closed { background: var(--text-3); }
.close { font-size: 12px; color: var(--text-3); padding: 0 2px; }
.close:hover { color: var(--danger); }
</style>
