Whatever

frontend/app/components/AddSiteForm.vue

@@ -0,0 +1,120 @@
+<template>
+  <div v-if="show" class="card add-form-card">
+    <input ref="nameInput" v-model="pendingName" type="text"
+           placeholder="Site name" class="edit-input" @keyup.enter="submit" />
+    <div class="edit-actions">
+      <button class="save-btn" @click.prevent="submit">Add</button>
+      <button class="cancel-btn" @click.prevent="emit('cancel')">Cancel</button>
+    </div>
+  </div>
+  <div v-else class="add-placeholder card" @click="$emit('start')">
+    <span class="plus-sign">+</span>
+    <span class="add-label">Add site</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+
+const props = defineProps<{ show: boolean }>()
+const emit = defineEmits<{ start: []; cancel: []; submit: [name: string] }>()
+
+const pendingName = ref('')
+const nameInput = ref<HTMLInputElement | null>(null)
+
+watch(() => props.show, async (val) => {
+  if (val) {
+    pendingName.value = ''
+    await nextTick()
+    nameInput.value?.focus()
+  }
+})
+
+function submit() {
+  const name = pendingName.value.trim()
+  if (!name) return
+  emit('submit', name)
+}
+</script>
+
+<style scoped>
+.add-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border: 2px dashed var(--border-input);
+  border-radius: 8px;
+  cursor: pointer;
+  background: var(--placeholder-bg);
+  transition: border-color 0.2s, background 0.2s;
+  margin-top: 8px;
+  min-height: 72px;
+}
+
+.add-placeholder:hover {
+  border-color: #2563eb;
+  background: var(--bg-active);
+}
+
+.plus-sign {
+  font-size: 28px;
+  color: var(--text-muted);
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.add-placeholder:hover .plus-sign {
+  color: #2563eb;
+}
+
+.add-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  transition: color 0.2s;
+}
+
+.add-placeholder:hover .add-label {
+  color: #2563eb;
+}
+
+.add-form-card {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.edit-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.save-btn, .cancel-btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  border: none;
+}
+
+.save-btn {
+  background: #2563eb;
+  color: white;
+}
+
+.save-btn:hover {
+  background: #1d4ed8;
+}
+
+.cancel-btn {
+  background: var(--cancel-bg);
+  color: var(--cancel-text);
+  border: 1px solid var(--cancel-border) !important;
+}
+
+.cancel-btn:hover {
+  background: var(--cancel-hover);
+}
+</style>