Whatever

frontend/app/app.vue

@@ -0,0 +1,412 @@
+<template>
+  <div class="app">
+    <header class="top-bar">
+      <h1>Simple Publisher</h1>
+      <button class="theme-toggle" @click="toggleDarkMode"
+              :aria-label="darkMode ? 'Switch to light mode' : 'Switch to dark mode'">
+        {{ darkMode ? 'Light Mode' : 'Dark Mode' }}
+      </button>
+    </header>
+
+    <main class="body-wrapper">
+      <div class="layout">
+        <div class="sidebar-col">
+          <Sidebar :sites="sites"
+                   :selected-id="selectedId"
+                   :pending-add="pendingAdd"
+                   @select-site="selectSite"
+                   @start-add="startAdd"
+                   @cancel-add="cancelAdd"
+                   @add-site="confirmAdd" />
+        </div>
+
+        <div class="settings-col">
+          <SettingsPanel v-if="selectedSite"
+                        :site="selectedSite"
+                        :last-saved="lastSaved"
+                        :site-id="selectedSite.id"
+                        @delete="deleteSelected"
+                        @preview="openPreview"
+                        @changed="handleEditChanged" />
+          <SettingsEmpty v-else />
+        </div>
+
+        <div class="filetree-col" v-if="selectedSite">
+          <FileTree :site-id="selectedSite.id" />
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import Sidebar from './components/Sidebar.vue'
+import SettingsPanel from './components/SettingsPanel.vue'
+import SettingsEmpty from './components/SettingsEmpty.vue'
+import FileTree from './components/FileTree.vue'
+
+const API_BASE = import.meta.url.match(/^https?:\/\/[^/]+/) 
+  ? `${location.protocol}//${location.host}`
+  : ''
+
+function api(url: string, options: RequestInit = {}) {
+  return fetch(`${API_BASE}/api/sites${url}`, {
+    headers: { 'Content-Type': 'application/json', ...options.headers },
+    ...options,
+  })
+}
+
+function genId() {
+  return crypto.randomUUID?.() ?? Date.now().toString(36) + Math.random().toString(36).slice(2)
+}
+
+const STORAGE_KEY = 'simple-publisher-sites'
+const THEME_KEY = 'simple-publisher-theme'
+
+function defaultSite(name: string) {
+  return {
+    id: genId(),
+    name,
+    url: '',
+    description: '',
+    themeColor: '#2563eb',
+    targetWindow: '_blank',
+    enabled: true,
+    gitRepoUrl: '',
+    gitBranch: 'main',
+  }
+}
+
+const darkMode = ref(false)
+
+function toggleDarkMode() {
+  darkMode.value = !darkMode.value
+  applyClass()
+  try { localStorage.setItem(THEME_KEY, darkMode.value ? 'dark' : 'light') } catch {}
+}
+
+function applyClass() {
+  document.documentElement.classList.toggle('dark', darkMode.value)
+}
+
+const sites = ref<Array<{ _id: string; id: string; name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean; gitRepoUrl?: string; gitBranch?: string }>>([])
+const selectedId = ref(null)
+const pendingAdd = ref(false)
+const lastSaved = ref('')
+
+let newSites = new Map<string, any>()
+let dirtyEdits = new Map<string, any>()
+let loadTimer: ReturnType<typeof setTimeout> | null = null
+let lastSavedTimeout: ReturnType<typeof setTimeout> | null = null
+let autoSaveTimer: ReturnType<typeof setTimeout> | null = null
+
+const selectedSite = computed(() => {
+  return sites.value.find(s => s.id === selectedId.value) || null
+})
+
+onMounted(async () => {
+  try {
+    const saved = localStorage.getItem(THEME_KEY)
+    if (saved === 'dark' || saved === 'light') {
+      darkMode.value = saved === 'dark'
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      darkMode.value = true
+    }
+  } catch {}
+
+  applyClass()
+
+  try {
+    const res = await api('/')
+    if (res.ok) {
+      sites.value = await res.json()
+      return
+    }
+  } catch {}
+
+  const stored = localStorage.getItem(STORAGE_KEY)
+  if (stored) {
+    sites.value = JSON.parse(stored)
+  }
+})
+
+onMounted(() => {
+  loadTimer = setInterval(async () => {
+    try {
+      const res = await api('/')
+      if (res.ok) {
+        const sitesFromServer = await res.json()
+        sites.value = sitesFromServer.map((serverSite: any) => {
+          if (dirtyEdits.has(serverSite.id)) {
+            return { ...serverSite, ...dirtyEdits.get(serverSite.id) }
+          }
+          return serverSite
+        })
+      }
+    } catch {}
+  }, 5000)
+})
+
+async function refreshSites() {
+  try {
+    const res = await api('/')
+    if (res.ok) {
+      sites.value = await res.json()
+    }
+  } catch {
+    // keep local state on network failure
+  }
+}
+
+async function saveSite(site: any) {
+  try {
+    const res = await api(`/${encodeURIComponent(site.id)}`, {
+      method: 'PUT',
+      body: JSON.stringify({
+        name: site.name,
+        url: site.url,
+        description: site.description,
+        themeColor: site.themeColor,
+        targetWindow: site.targetWindow,
+        enabled: site.enabled,
+        gitRepoUrl: site.gitRepoUrl || '',
+        gitBranch: site.gitBranch || 'main',
+      }),
+    })
+    if (res.ok) {
+      const updated = await res.json()
+      lastSaved.value = 'Updated at ' + new Date().toLocaleTimeString()
+      return true
+    }
+    return false
+  } catch {
+    return false
+  }
+}
+
+async function bulkSave() {
+  if (autoSaveTimer) clearTimeout(autoSaveTimer)
+  autoSaveTimer = null
+  const allEntries = [...newSites.entries(), ...dirtyEdits.entries()]
+  for (const [, site] of allEntries) {
+    await saveSite(site)
+  }
+  newSites.clear()
+  dirtyEdits.clear()
+  try {
+    await refreshSites()
+  } catch {}
+  lastSaved.value = 'Updated at ' + new Date().toLocaleTimeString()
+  
+  if (lastSavedTimeout) clearTimeout(lastSavedTimeout)
+  lastSavedTimeout = setTimeout(() => {
+    lastSaved.value = ''
+  }, 3000)
+}
+
+async function handleEditChanged(site: { id: string; name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean; gitRepoUrl?: string; gitBranch?: string }) {
+  if (newSites.has(site.id)) {
+    newSites.set(site.id, site)
+  } else {
+    dirtyEdits.set(site.id, site)
+  }
+  if (autoSaveTimer) clearTimeout(autoSaveTimer)
+  autoSaveTimer = setTimeout(async () => {
+    await bulkSave()
+  }, 800)
+}
+
+function selectSite(site: { id: string; name: string; enabled: boolean }) {
+  if (selectedId.value && dirtyEdits.has(selectedId.value)) {
+    bulkSave()
+  }
+  selectedId.value = site.id
+}
+
+function startAdd() {
+  pendingAdd.value = true
+}
+
+async function confirmAdd(name: string) {
+  const trimmed = name.trim()
+  if (!trimmed) return
+  const site = defaultSite(trimmed)
+
+  try {
+    const res = await api('/', {
+      method: 'POST',
+      body: JSON.stringify(site),
+    })
+    if (res.ok) {
+      const created = await res.json()
+      sites.value.unshift(created)
+      pendingAdd.value = false
+      selectedId.value = created.id
+      lastSaved.value = 'Updated at ' + new Date().toLocaleTimeString()
+      
+      if (lastSavedTimeout) clearTimeout(lastSavedTimeout)
+      lastSavedTimeout = setTimeout(() => {
+        lastSaved.value = ''
+      }, 3000)
+      return
+    }
+  } catch {}
+
+  sites.value.unshift(site)
+  pendingAdd.value = false
+  selectedId.value = site.id
+  try { saveSites() } catch {}
+}
+
+function cancelAdd() {
+  pendingAdd.value = false
+}
+
+async function removeSite(index: number) {
+   const site = sites.value[index]
+   newSites.delete(site.id)
+   dirtyEdits.delete(site.id)
+   try {
+     const res = await api(`/${encodeURIComponent(site.id)}`, { method: 'DELETE' })
+     if (res.ok) await res.json()
+   } catch {}
+   if (site.id === selectedId.value) selectedId.value = null
+   sites.value.splice(index, 1)
+   try { localStorage.setItem(STORAGE_KEY, JSON.stringify(sites.value)) } catch {}
+}
+
+async function deleteSelected() {
+  if (!selectedSite.value) return
+  const idx = sites.value.findIndex(s => s.id === selectedSite.value!.id)
+  if (idx !== -1) await removeSite(idx)
+}
+
+function openPreview() {
+  const site = selectedSite.value
+  if (!site?.url) return
+  let url = site.url.trim()
+  if (!/^https?:\/\//i.test(url)) url = 'https://' + url
+  window.open(url, site.targetWindow || '_blank')
+}
+</script>
+
+<style scoped>
+.app {
+  width: 100%;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.top-bar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  flex-shrink: 0;
+  background: var(--bg-primary);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.theme-toggle {
+  padding: 8px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.theme-toggle:hover {
+  background: var(--cancel-bg);
+  border-color: var(--border-input);
+}
+
+h1 {
+  text-align: left;
+  margin: 0;
+  font-size: 2rem;
+  color: var(--text-primary);
+}
+
+.body-wrapper {
+  flex: 1;
+  overflow: hidden;
+}
+
+.layout {
+  display: flex;
+  gap: 0;
+  height: 100%;
+}
+
+.sidebar-col {
+  width: 280px;
+  min-width: 280px;
+  max-width: 280px;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-right: 1px solid var(--border-color);
+  padding: 16px;
+}
+
+.settings-col {
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-width: 0;
+  border-right: 1px solid var(--border-color);
+  padding: 24px;
+}
+
+.settings-col .settings-panel,
+.settings-col .settings-empty {
+  width: 100%;
+}
+
+.filetree-col {
+  flex: 1;
+  min-width: 280px;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: var(--bg-secondary);
+  padding: 16px;
+}
+
+</style>
+
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background 0.3s, color 0.3s;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+#__nuxt {
+  height: 100vh;
+  background: var(--bg-primary);
+  transition: background 0.3s;
+}
+</style>

frontend/app/assets/themes.scss

@@ -0,0 +1,39 @@
+/* Light theme (default) */
+:root {
+  --bg-primary: #fff;
+  --bg-secondary: #fafafa;
+  --bg-active: #eff6ff;
+  --text-primary: #1a1a1a;
+  --text-secondary: #374151;
+  --text-muted: #9ca3af;
+  --border-color: #e5e7eb;
+  --border-input: #d1d5db;
+  --placeholder-bg: transparent;
+  --danger-bg: #fee2e2;
+  --danger-hover: #fecaca;
+  --danger-text: #dc2626;
+  --cancel-bg: #f3f4f6;
+  --cancel-border: #d1d5db;
+  --cancel-text: #6b7280;
+  --cancel-hover: #e5e7eb;
+}
+
+/* Dark theme */
+.dark {
+  --bg-primary: #0f0f0f;
+  --bg-secondary: #1a1a1a;
+  --bg-active: #1e293b;
+  --text-primary: #e5e5e5;
+  --text-secondary: #a3a3a3;
+  --text-muted: #737373;
+  --border-color: #333;
+  --border-input: #404040;
+  --placeholder-bg: #141414;
+  --danger-bg: #2d1b1e;
+  --danger-hover: #3d2528;
+  --danger-text: #f87171;
+  --cancel-bg: #262626;
+  --cancel-border: #404040;
+  --cancel-text: #a3a3a3;
+  --cancel-hover: #333;
+}

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>

frontend/app/components/FileTree.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="file-tree">
+    <div v-if="loading" class="tree-loading">Loading files...</div>
+    <div v-else-if="error" class="tree-error">{{ error }}</div>
+    <div v-else-if="!tree || tree.length === 0" class="tree-empty">
+      No files. Sync the repository first.
+    </div>
+    <TreeItem v-else v-model:expanded="expandedPaths" :items="tree" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import TreeItem from './TreeItem.vue'
+
+const props = defineProps<{
+  siteId: string
+}>()
+
+const loading = ref(true)
+const error = ref('')
+const tree = ref<any[]>([])
+const expandedPaths = ref<Set<string>>(new Set())
+
+onMounted(async () => {
+  loading.value = true
+  try {
+    const API_BASE = window.location.origin
+    const res = await fetch(`${API_BASE}/api/sites/${encodeURIComponent(props.siteId)}/files`)
+    if (res.ok) {
+      const data = await res.json()
+      tree.value = data.tree || []
+    } else {
+      const errData = await res.json().catch(() => ({}))
+      error.value = errData.error || 'Failed to load files'
+    }
+  } catch {
+    error.value = 'Could not connect to server'
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.file-tree {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+}
+
+.tree-loading,
+.tree-error,
+.tree-empty {
+  padding: 16px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.tree-error {
+  color: #e53e3e;
+}
+</style>

frontend/app/components/SettingsEmpty.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="settings-empty">
+    <p>Select a site from the list to configure its settings</p>
+  </div>
+</template>
+
+<style scoped>
+.settings-empty {
+  flex: 1;
+  min-width: 320px;
+  padding: 48px;
+  text-align: center;
+  color: var(--text-muted);
+  border: 1px dashed var(--border-input);
+  border-radius: 12px;
+}
+</style>

frontend/app/components/SettingsPanel.vue

@@ -0,0 +1,364 @@
+<template>
+  <div class="settings-panel">
+    <h2>Edit: {{ site.name }}</h2>
+
+    <div class="form-group">
+      <label>Name</label>
+      <input v-model="editName" type="text" class="edit-input" />
+    </div>
+
+    <div class="form-group">
+      <label>URL</label>
+      <input v-model="editUrl" type="url" placeholder="https://example.com" class="edit-input" />
+    </div>
+
+    <div class="form-group">
+      <label>Description</label>
+      <textarea v-model="editDescription" rows="3"
+                placeholder="Optional description..." class="edit-input"></textarea>
+    </div>
+
+    <div class="form-group">
+      <label>Theme Color</label>
+      <div class="color-row">
+        <input v-model="editThemeColor" type="color" class="color-picker" />
+        <input v-model="editThemeColor" type="text"
+               placeholder="#2563eb" class="edit-input color-text" />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label>Link Target</label>
+      <select v-model="editTargetWindow" class="edit-input">
+        <option value="_blank">Open in new tab</option>
+        <option value="_self">Open in same tab</option>
+      </select>
+    </div>
+
+    <div class="form-group checkbox-group">
+      <label>
+        <input v-model="editEnabled" type="checkbox" />
+        Enabled (visible on the site)
+      </label>
+    </div>
+
+    <div class="form-actions git-actions-bar" v-if="hasGit">
+      <button class="git-sync-btn" @click.prevent="handleSyncGit" :disabled="syncing">
+        {{ syncing ? 'Syncing...' : 'Sync Git' }}
+      </button>
+      <span class="save-status" v-if="lastGitMsg">{{ lastGitMsg }}</span>
+    </div>
+
+    <div class="git-divider" v-if="hasGit"></div>
+
+    <div class="form-group git-group" v-if="hasGit">
+      <label>Git Repository URL</label>
+      <input v-model="editGitRepoUrl" type="url" placeholder="https://github.com/user/repo.git" class="edit-input" />
+    </div>
+
+    <div class="form-group git-group" v-if="hasGit">
+      <label>Git Branch</label>
+      <input v-model="editGitBranch" type="text" placeholder="main" class="edit-input" />
+    </div>
+
+    <div class="form-actions">
+      <button class="delete-btn" @click.prevent="$emit('delete')">Delete</button>
+      <span class="save-status" v-if="lastSaved">{{ lastSaved }}</span>
+      <button class="preview-btn" @click.prevent="$emit('preview')" :disabled="!site.url">
+        Preview Link
+      </button>
+    </div>
+
+    <div class="form-actions save-bar">
+      <div></div>
+      <button class="save-btn" @click="handleSave" :disabled="!isDirty" :class="{ 'save-btn-dirty': isDirty }">
+        Save
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps<{
+  site: { name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean; gitRepoUrl?: string; gitBranch?: string }
+  lastSaved: string
+  siteId?: string
+}>()
+
+const emit = defineEmits<{ delete: []; preview: []; changed: [{ name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean, gitRepoUrl?: string; gitBranch?: string; id: string }] }>()
+
+const syncing = ref(false)
+const lastGitMsg = ref('')
+
+const hasGit = computed(() => {
+  return !!(props.site.gitRepoUrl || props.siteId)
+})
+
+const editName = ref(props.site.name)
+const editUrl = ref(props.site.url)
+const editDescription = ref(props.site.description)
+const editThemeColor = ref(props.site.themeColor)
+const editTargetWindow = ref(props.site.targetWindow)
+const editEnabled = ref(props.site.enabled)
+const editGitRepoUrl = ref(props.site.gitRepoUrl || '')
+const editGitBranch = ref(props.site.gitBranch || 'main')
+
+const isDirty = computed(() => {
+  return (
+    editName.value !== props.site.name ||
+    editUrl.value !== props.site.url ||
+    editDescription.value !== props.site.description ||
+    editThemeColor.value !== props.site.themeColor ||
+    editTargetWindow.value !== props.site.targetWindow ||
+    editEnabled.value !== props.site.enabled ||
+    editGitRepoUrl.value !== (props.site.gitRepoUrl || '') ||
+    editGitBranch.value !== (props.site.gitBranch || 'main')
+  )
+})
+
+watch([editName, editUrl, editDescription, editThemeColor, editTargetWindow, editEnabled, editGitRepoUrl, editGitBranch], () => {
+  emit('changed', {
+    name: editName.value,
+    url: editUrl.value,
+    description: editDescription.value,
+    themeColor: editThemeColor.value,
+    targetWindow: editTargetWindow.value,
+    enabled: editEnabled.value,
+    gitRepoUrl: editGitRepoUrl.value,
+    gitBranch: editGitBranch.value,
+    id: props.siteId!,
+  })
+})
+
+function handleSave() {
+  emit('changed', {
+    name: editName.value,
+    url: editUrl.value,
+    description: editDescription.value,
+    themeColor: editThemeColor.value,
+    targetWindow: editTargetWindow.value,
+    enabled: editEnabled.value,
+    gitRepoUrl: editGitRepoUrl.value,
+    gitBranch: editGitBranch.value,
+    id: props.siteId!,
+  })
+}
+
+async function handleSyncGit() {
+  if (!props.site.id || syncing.value) return
+  const API_BASE = window.location.origin
+  syncing.value = true
+  lastGitMsg.value = ''
+  try {
+    const res = await fetch(`${API_BASE}/api/sites/${encodeURIComponent(props.site.id)}/sync-git`, { method: 'POST', headers: { 'Content-Type': 'application/json' } })
+    const data = await res.json()
+    if (res.ok) {
+      lastGitMsg.value = data.cloned ? 'Cloned repository' : 'Pull succeeded'
+    } else {
+      lastGitMsg.value = data.error || 'Sync failed'
+    }
+  } catch (err) {
+    lastGitMsg.value = 'Sync failed'
+  }
+  syncing.value = false
+}
+</script>
+
+<style scoped>
+.settings-panel {
+  flex: 1;
+  min-width: 320px;
+  padding: 24px;
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  background: var(--bg-secondary);
+}
+
+.settings-panel h2 {
+  margin: 0 0 20px;
+  font-size: 1.25rem;
+  color: var(--text-primary);
+}
+
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+
+.edit-input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border-input);
+  border-radius: 6px;
+  font-size: 14px;
+  box-sizing: border-box;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.edit-input:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
+}
+
+.edit-input::placeholder {
+  color: var(--text-muted);
+}
+
+textarea.edit-input {
+  resize: vertical;
+  font-family: inherit;
+}
+
+.color-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.color-picker {
+  width: 48px;
+  height: 40px;
+  padding: 2px;
+  border: 1px solid var(--border-input);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.color-text {
+  flex: 1;
+}
+
+.checkbox-group label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 400;
+  cursor: pointer;
+  color: var(--text-primary);
+}
+
+.form-actions {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   margin-top: 24px;
+   padding-top: 16px;
+   border-top: 1px solid var(--border-color);
+ }
+
+ .delete-btn {
+   padding: 8px 16px;
+   background: var(--danger-bg);
+   color: var(--danger-text);
+   border: none;
+   border-radius: 6px;
+   font-size: 14px;
+   cursor: pointer;
+ }
+
+ .delete-btn:hover {
+   background: var(--danger-hover);
+ }
+
+ .save-status {
+   font-size: 12px;
+   color: var(--text-muted);
+ }
+
+.preview-btn {
+ padding: 8px 16px;
+ background: #2563eb;
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-size: 14px;
+ cursor: pointer;
+}
+
+.preview-btn:hover:not(:disabled) {
+  background: #1d4ed8;
+}
+
+.preview-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.save-bar {
+  margin-top: 8px;
+  padding-top: 12px;
+  border-top: none;
+}
+
+.save-btn {
+  padding: 8px 32px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--border-color);
+  color: var(--text-muted);
+}
+
+.save-btn:disabled {
+  cursor: not-allowed;
+}
+
+.save-btn-dirty {
+  background: #2563eb;
+  color: white;
+}
+
+.save-btn-dirty:hover {
+  background: #1d4ed8;
+}
+
+.git-divider {
+  border: none;
+  border-top: 1px dashed var(--border-color);
+  margin: 16px 0;
+}
+
+.git-group {
+  margin-top: 8px;
+}
+
+.git-actions-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.git-sync-btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  background: #7c3aed;
+  color: white;
+}
+
+.git-sync-btn:hover:not(:disabled) {
+  background: #6d28d9;
+}
+
+.git-sync-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

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>

frontend/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>

frontend/app/components/TreeItem.vue

@@ -0,0 +1,97 @@
+<template>
+  <ul class="tree-list">
+    <li v-for="item in items" :key="item.path">
+      <div class="tree-item-row" @click="toggle(item)">
+        <span class="tree-icon">
+          <svg v-if="item.type === 'folder'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+          </svg>
+          <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+            <polyline points="14,2 14,8 20,8"/>
+          </svg>
+        </span>
+        <span class="tree-name" :title="item.path">{{ item.name }}</span>
+      </div>
+      <TreeItem v-if="item.type === 'folder' && expandedPaths.has(item.path)" :key="item.path" v-model:expanded="expandedPaths" :items="item.children || []" />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { onMounted, watch } from 'vue'
+
+const props = defineProps<{
+  items: any[]
+  expanded?: Set<string>
+}>()
+
+const emit = defineEmits<{ 'update:expanded': [value: Set<string>] }>()
+
+const expandedPaths = ref(new Set<string>())
+
+defineExpose({ expandedPaths })
+
+function toggle(item: any) {
+  if (item.type !== 'folder') return
+  const next = new Set(expandedPaths.value)
+  if (next.has(item.path)) {
+    next.delete(item.path)
+  } else {
+    next.add(item.path)
+  }
+  expandedPaths.value = next
+  emit('update:expanded', next)
+}
+
+function syncExpanded() {
+  if (props.expanded) {
+    expandedPaths.value = new Set(props.expanded)
+  }
+}
+
+watch(() => props.expanded, () => syncExpanded(), { immediate: true })
+
+onMounted(() => syncExpanded())
+</script>
+
+<style scoped>
+.tree-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.tree-item-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  user-select: none;
+  color: var(--text-secondary);
+}
+
+.tree-item-row:hover {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.tree-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  opacity: 0.6;
+}
+
+.tree-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tree-list .tree-list {
+  padding-left: 16px;
+}
+</style>