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>

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>