Whatever

frontend/app/components/Sidebar.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="sidebar">
+    <SiteCard v-for="(site, index) in sites" :key="site.id"
+              :site="site"
+              :active="selectedId === site.id"
+              :disabled="!site.enabled"
+              @select="$emit('select-site', site)" />
+
+    <AddSiteForm :show="pendingAdd"
+                 @start="$emit('start-add')"
+                 @cancel="$emit('cancel-add')"
+                 @submit="(name) => $emit('add-site', name)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SiteCard from './SiteCard.vue'
+import AddSiteForm from './AddSiteForm.vue'
+
+defineProps<{
+  sites: Array<{ id: string; name: string; enabled: boolean }>
+  selectedId: string | null
+  pendingAdd: boolean
+}>()
+
+defineEmits<{ 'select-site': [site: { id: string; name: string; enabled: boolean }]; 'start-add': []; 'cancel-add': []; 'add-site': [name: string] }>()
+</script>
+
+<style scoped>
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>