Building phase one

publisher/app/components/SiteCard.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="site-card"
+       :class="{ active, disabled }"
+       @click="$emit('select')">
+    <span class="site-name">{{ site.name }}</span>
+    <span v-if="!site.enabled" class="badge disabled">Disabled</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  site: { id: string; name: string; enabled: boolean }
+  active: boolean
+  disabled: boolean
+}>()
+
+defineEmits<{ select: [] }>()
+</script>
+
+<style scoped>
+.site-card {
+  padding: 12px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  cursor: pointer;
+  background: var(--bg-secondary);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.site-card:hover {
+  border-color: #2563eb;
+  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
+}
+
+.site-card.active {
+  border-color: #2563eb;
+  background: var(--bg-active);
+  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
+}
+
+.site-card.disabled {
+  opacity: 0.5;
+}
+
+.site-name {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.badge.disabled {
+  font-size: 10px;
+  color: var(--danger-text);
+  background: var(--danger-bg);
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-top: 4px;
+  display: inline-block;
+}
+</style>