@commonpub/layer 0.10.1 → 0.11.0

package/pages/admin/features.vue

@@ -0,0 +1,338 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'admin', middleware: 'auth' });
+useSeoMeta({ title: `Feature Flags — Admin — ${useSiteName()}` });
+
+const toast = useToast();
+
+interface FlagInfo {
+  enabled: boolean;
+  isOverridden: boolean;
+}
+
+const { data, refresh } = await useFetch<{
+  flags: Record<string, FlagInfo>;
+  overrides: Record<string, boolean>;
+}>('/api/admin/features');
+
+const saving = ref(false);
+const pendingChanges = ref<Record<string, boolean>>({});
+
+const flagMeta: Record<string, { label: string; description: string; icon: string }> = {
+  content: { label: 'Content', description: 'Content system (CRUD, publishing)', icon: 'fa-solid fa-newspaper' },
+  social: { label: 'Social', description: 'Likes, comments, bookmarks, follows', icon: 'fa-solid fa-heart' },
+  hubs: { label: 'Hubs', description: 'Communities, products, companies', icon: 'fa-solid fa-layer-group' },
+  docs: { label: 'Docs', description: 'Documentation sites with versioning', icon: 'fa-solid fa-book' },
+  video: { label: 'Video', description: 'Video content and categories', icon: 'fa-solid fa-video' },
+  contests: { label: 'Contests', description: 'Contest system with judging', icon: 'fa-solid fa-trophy' },
+  learning: { label: 'Learning', description: 'Learning paths and courses', icon: 'fa-solid fa-graduation-cap' },
+  explainers: { label: 'Explainers', description: 'Interactive explainer modules', icon: 'fa-solid fa-lightbulb' },
+  editorial: { label: 'Editorial', description: 'Staff picks and content categories', icon: 'fa-solid fa-pen-fancy' },
+  federation: { label: 'Federation', description: 'ActivityPub federation', icon: 'fa-solid fa-globe' },
+  seamlessFederation: { label: 'Seamless Federation', description: 'Mix federated content into feeds', icon: 'fa-solid fa-arrows-spin' },
+  federateHubs: { label: 'Federate Hubs', description: 'Hub federation via AP Groups', icon: 'fa-solid fa-diagram-project' },
+  admin: { label: 'Admin Panel', description: 'Admin dashboard and management', icon: 'fa-solid fa-shield-halved' },
+  emailNotifications: { label: 'Email Notifications', description: 'Email digests and instant notifications', icon: 'fa-solid fa-envelope' },
+};
+
+const flagKeys = computed(() => data.value ? Object.keys(data.value.flags) : []);
+
+function getEffectiveValue(key: string): boolean {
+  if (key in pendingChanges.value) return pendingChanges.value[key]!;
+  return data.value?.flags[key]?.enabled ?? false;
+}
+
+function isOverridden(key: string): boolean {
+  if (key in pendingChanges.value) return true;
+  return data.value?.flags[key]?.isOverridden ?? false;
+}
+
+function toggleFlag(key: string): void {
+  const current = getEffectiveValue(key);
+  pendingChanges.value = { ...pendingChanges.value, [key]: !current };
+}
+
+function resetFlag(key: string): void {
+  const changes = { ...pendingChanges.value };
+  delete changes[key];
+  pendingChanges.value = changes;
+}
+
+const hasPendingChanges = computed(() => Object.keys(pendingChanges.value).length > 0);
+
+async function saveChanges(): Promise<void> {
+  if (!hasPendingChanges.value) return;
+  saving.value = true;
+
+  try {
+    // Build the full overrides object: existing overrides + pending changes
+    const currentOverrides = data.value?.overrides ?? {};
+    const merged = { ...currentOverrides, ...pendingChanges.value };
+
+    await $fetch('/api/admin/features', {
+      method: 'PUT',
+      body: { overrides: merged },
+    });
+
+    toast.success('Feature flags updated');
+    pendingChanges.value = {};
+    await refresh();
+  } catch {
+    toast.error('Failed to update feature flags');
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function resetOverride(key: string): Promise<void> {
+  try {
+    // Remove this key from overrides
+    const currentOverrides = { ...(data.value?.overrides ?? {}) };
+    delete currentOverrides[key];
+
+    await $fetch('/api/admin/features', {
+      method: 'PUT',
+      body: { overrides: currentOverrides },
+    });
+
+    toast.success(`Reset ${flagMeta[key]?.label ?? key} to default`);
+    resetFlag(key);
+    await refresh();
+  } catch {
+    toast.error('Failed to reset flag');
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-admin-features">
+    <div class="cpub-admin-header">
+      <div>
+        <h1 class="cpub-admin-title">Feature Flags</h1>
+        <p class="cpub-admin-subtitle">Toggle features on or off at runtime. Changes take effect within 60 seconds.</p>
+      </div>
+      <button
+        v-if="hasPendingChanges"
+        class="cpub-btn cpub-btn-primary cpub-btn-sm"
+        :disabled="saving"
+        @click="saveChanges"
+      >
+        <i :class="saving ? 'fa-solid fa-circle-notch fa-spin' : 'fa-solid fa-check'"></i>
+        Save Changes
+      </button>
+    </div>
+
+    <div v-if="data?.flags" class="cpub-flags-list">
+      <div
+        v-for="key in flagKeys"
+        :key="key"
+        class="cpub-flag-row"
+        :class="{
+          'cpub-flag-row--changed': key in pendingChanges,
+          'cpub-flag-row--overridden': isOverridden(key) && !(key in pendingChanges),
+        }"
+      >
+        <div class="cpub-flag-info">
+          <div class="cpub-flag-icon">
+            <i :class="flagMeta[key]?.icon ?? 'fa-solid fa-toggle-on'"></i>
+          </div>
+          <div class="cpub-flag-text">
+            <span class="cpub-flag-label">{{ flagMeta[key]?.label ?? key }}</span>
+            <span class="cpub-flag-desc">{{ flagMeta[key]?.description ?? '' }}</span>
+          </div>
+        </div>
+
+        <div class="cpub-flag-controls">
+          <span v-if="isOverridden(key) && !(key in pendingChanges)" class="cpub-flag-badge cpub-flag-badge--override">
+            overridden
+          </span>
+          <span v-if="key in pendingChanges" class="cpub-flag-badge cpub-flag-badge--pending">
+            unsaved
+          </span>
+
+          <button
+            v-if="data.flags[key]?.isOverridden && !(key in pendingChanges)"
+            class="cpub-flag-reset"
+            title="Reset to default"
+            @click="resetOverride(key)"
+          >
+            <i class="fa-solid fa-rotate-left"></i>
+          </button>
+
+          <button
+            class="cpub-flag-toggle"
+            :class="{ 'cpub-flag-toggle--on': getEffectiveValue(key) }"
+            :aria-pressed="getEffectiveValue(key)"
+            :aria-label="`Toggle ${flagMeta[key]?.label ?? key}`"
+            @click="toggleFlag(key)"
+          >
+            <span class="cpub-flag-toggle-track">
+              <span class="cpub-flag-toggle-thumb" />
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="hasPendingChanges" class="cpub-flags-footer">
+      <span class="cpub-flags-footer-text">{{ Object.keys(pendingChanges).length }} unsaved change(s)</span>
+      <button class="cpub-btn cpub-btn-sm" @click="pendingChanges = {}">Discard</button>
+      <button class="cpub-btn cpub-btn-primary cpub-btn-sm" :disabled="saving" @click="saveChanges">
+        Save Changes
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-admin-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-6); gap: var(--space-4); }
+.cpub-admin-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); }
+.cpub-admin-subtitle { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
+
+.cpub-flags-list {
+  display: flex;
+  flex-direction: column;
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-flag-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: var(--border-width-default) solid var(--border2);
+  gap: var(--space-4);
+}
+
+.cpub-flag-row:last-child { border-bottom: none; }
+
+.cpub-flag-row--changed {
+  background: var(--yellow-bg, var(--surface2));
+}
+
+.cpub-flag-row--overridden {
+  background: var(--accent-bg);
+}
+
+.cpub-flag-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.cpub-flag-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border2);
+  color: var(--text-dim);
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.cpub-flag-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.cpub-flag-label { font-size: 13px; font-weight: 600; }
+.cpub-flag-desc { font-size: 11px; color: var(--text-dim); }
+
+.cpub-flag-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.cpub-flag-badge {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 2px 6px;
+}
+
+.cpub-flag-badge--override { color: var(--accent); background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); }
+.cpub-flag-badge--pending { color: var(--yellow); background: var(--yellow-bg); border: var(--border-width-default) solid var(--yellow); }
+
+.cpub-flag-reset {
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  font-size: 11px;
+  padding: 4px;
+}
+.cpub-flag-reset:hover { color: var(--accent); }
+
+/* Toggle switch */
+.cpub-flag-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+}
+
+.cpub-flag-toggle-track {
+  display: block;
+  width: 36px;
+  height: 20px;
+  background: var(--border);
+  border: var(--border-width-default) solid var(--border2);
+  position: relative;
+  transition: background 0.2s;
+}
+
+.cpub-flag-toggle--on .cpub-flag-toggle-track {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.cpub-flag-toggle-thumb {
+  display: block;
+  width: 14px;
+  height: 14px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.2s;
+}
+
+.cpub-flag-toggle--on .cpub-flag-toggle-thumb {
+  transform: translateX(16px);
+  border-color: var(--surface);
+}
+
+.cpub-flags-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  margin-top: var(--space-4);
+  background: var(--yellow-bg, var(--surface2));
+  border: var(--border-width-default) solid var(--yellow, var(--border));
+}
+
+.cpub-flags-footer-text {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--yellow, var(--text-dim));
+  flex: 1;
+}
+
+@media (max-width: 768px) {
+  .cpub-admin-header { flex-direction: column; }
+  .cpub-flag-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
+  .cpub-flag-controls { align-self: flex-end; }
+}
+</style>

package/pages/admin/homepage.vue

@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import type { HomepageSection } from '@commonpub/server';
+
+definePageMeta({ layout: 'admin', middleware: 'auth' });
+useSeoMeta({ title: `Homepage — Admin — ${useSiteName()}` });
+
+const toast = useToast();
+const { data, refresh } = await useFetch<HomepageSection[]>('/api/admin/homepage/sections');
+
+const sections = ref<HomepageSection[]>([]);
+const saving = ref(false);
+const hasChanges = ref(false);
+
+watch(data, (val) => {
+  if (val) {
+    sections.value = JSON.parse(JSON.stringify(val));
+    hasChanges.value = false;
+  }
+}, { immediate: true });
+
+function markChanged(): void { hasChanges.value = true; }
+
+const SECTION_TYPES: Array<{ value: HomepageSection['type']; label: string; icon: string }> = [
+  { value: 'hero', label: 'Hero Banner', icon: 'fa-solid fa-flag' },
+  { value: 'editorial', label: 'Staff Picks', icon: 'fa-solid fa-pen-fancy' },
+  { value: 'content-grid', label: 'Content Grid', icon: 'fa-solid fa-th-large' },
+  { value: 'contests', label: 'Contests', icon: 'fa-solid fa-trophy' },
+  { value: 'hubs', label: 'Hubs', icon: 'fa-solid fa-layer-group' },
+  { value: 'stats', label: 'Platform Stats', icon: 'fa-solid fa-chart-bar' },
+  { value: 'custom-html', label: 'Custom HTML', icon: 'fa-solid fa-code' },
+];
+
+function getTypeInfo(type: string) {
+  return SECTION_TYPES.find(t => t.value === type) ?? { label: type, icon: 'fa-solid fa-puzzle-piece' };
+}
+
+function moveUp(index: number): void {
+  if (index <= 0) return;
+  const arr = [...sections.value];
+  [arr[index - 1], arr[index]] = [arr[index]!, arr[index - 1]!];
+  arr.forEach((s, i) => { s.order = i; });
+  sections.value = arr;
+  markChanged();
+}
+
+function moveDown(index: number): void {
+  if (index >= sections.value.length - 1) return;
+  const arr = [...sections.value];
+  [arr[index], arr[index + 1]] = [arr[index + 1]!, arr[index]!];
+  arr.forEach((s, i) => { s.order = i; });
+  sections.value = arr;
+  markChanged();
+}
+
+function toggleSection(index: number): void {
+  sections.value[index]!.enabled = !sections.value[index]!.enabled;
+  markChanged();
+}
+
+function removeSection(index: number): void {
+  if (!confirm(`Remove "${sections.value[index]!.title || sections.value[index]!.type}" section?`)) return;
+  sections.value.splice(index, 1);
+  sections.value.forEach((s, i) => { s.order = i; });
+  markChanged();
+}
+
+function addSection(): void {
+  const id = `section-${Date.now()}`;
+  sections.value.push({
+    id,
+    type: 'content-grid',
+    title: 'New Section',
+    enabled: true,
+    order: sections.value.length,
+    config: { sort: 'recent', limit: 6, columns: 3 },
+  });
+  markChanged();
+}
+
+async function save(): Promise<void> {
+  saving.value = true;
+  try {
+    await $fetch('/api/admin/homepage/sections', {
+      method: 'PUT',
+      body: { sections: sections.value },
+    });
+    toast.success('Homepage saved');
+    hasChanges.value = false;
+    await refresh();
+  } catch {
+    toast.error('Failed to save homepage');
+  } finally {
+    saving.value = false;
+  }
+}
+
+function discard(): void {
+  if (data.value) {
+    sections.value = JSON.parse(JSON.stringify(data.value));
+    hasChanges.value = false;
+  }
+}
+
+const editingId = ref<string | null>(null);
+</script>
+
+<template>
+  <div class="cpub-admin-homepage">
+    <div class="cpub-admin-header">
+      <div>
+        <h1 class="cpub-admin-title">Homepage Layout</h1>
+        <p class="cpub-admin-subtitle">Reorder, enable, or disable homepage sections.</p>
+      </div>
+      <div class="cpub-admin-header-actions">
+        <button class="cpub-btn cpub-btn-sm" @click="addSection">
+          <i class="fa-solid fa-plus"></i> Add Section
+        </button>
+        <button
+          v-if="hasChanges"
+          class="cpub-btn cpub-btn-primary cpub-btn-sm"
+          :disabled="saving"
+          @click="save"
+        >
+          <i :class="saving ? 'fa-solid fa-circle-notch fa-spin' : 'fa-solid fa-check'"></i> Save
+        </button>
+      </div>
+    </div>
+
+    <div class="cpub-sections-list">
+      <div
+        v-for="(section, idx) in sections"
+        :key="section.id"
+        class="cpub-section-row"
+        :class="{ 'cpub-section-disabled': !section.enabled }"
+      >
+        <div class="cpub-section-order">
+          <button class="cpub-order-btn" :disabled="idx === 0" @click="moveUp(idx)" title="Move up">
+            <i class="fa-solid fa-chevron-up"></i>
+          </button>
+          <span class="cpub-order-num">{{ idx + 1 }}</span>
+          <button class="cpub-order-btn" :disabled="idx === sections.length - 1" @click="moveDown(idx)" title="Move down">
+            <i class="fa-solid fa-chevron-down"></i>
+          </button>
+        </div>
+
+        <div class="cpub-section-icon">
+          <i :class="getTypeInfo(section.type).icon"></i>
+        </div>
+
+        <div class="cpub-section-info">
+          <div class="cpub-section-label">{{ section.title || getTypeInfo(section.type).label }}</div>
+          <div class="cpub-section-meta">
+            <span class="cpub-section-type-badge">{{ getTypeInfo(section.type).label }}</span>
+            <span v-if="section.config.featureGate" class="cpub-section-gate">gate: {{ section.config.featureGate }}</span>
+            <span v-if="section.config.limit" class="cpub-section-gate">limit: {{ section.config.limit }}</span>
+          </div>
+        </div>
+
+        <div class="cpub-section-actions">
+          <button
+            class="cpub-section-action"
+            :title="editingId === section.id ? 'Close' : 'Edit'"
+            @click="editingId = editingId === section.id ? null : section.id"
+          >
+            <i :class="editingId === section.id ? 'fa-solid fa-xmark' : 'fa-solid fa-pencil'"></i>
+          </button>
+          <button
+            class="cpub-section-action"
+            :class="{ 'cpub-section-action--active': section.enabled }"
+            :title="section.enabled ? 'Disable' : 'Enable'"
+            @click="toggleSection(idx)"
+          >
+            <i :class="section.enabled ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'"></i>
+          </button>
+          <button class="cpub-section-action cpub-section-action--danger" title="Remove" @click="removeSection(idx)">
+            <i class="fa-solid fa-trash"></i>
+          </button>
+        </div>
+
+        <!-- Inline editor -->
+        <div v-if="editingId === section.id" class="cpub-section-editor">
+          <div class="cpub-editor-grid">
+            <div class="cpub-editor-field">
+              <label class="cpub-editor-label">Title</label>
+              <input v-model="section.title" class="cpub-editor-input" @input="markChanged" />
+            </div>
+            <div class="cpub-editor-field">
+              <label class="cpub-editor-label">Type</label>
+              <select v-model="section.type" class="cpub-editor-input" @change="markChanged">
+                <option v-for="t in SECTION_TYPES" :key="t.value" :value="t.value">{{ t.label }}</option>
+              </select>
+            </div>
+            <div class="cpub-editor-field">
+              <label class="cpub-editor-label">Feature Gate</label>
+              <input v-model="section.config.featureGate" class="cpub-editor-input" placeholder="e.g. contests" @input="markChanged" />
+            </div>
+            <div class="cpub-editor-field">
+              <label class="cpub-editor-label">Limit</label>
+              <input v-model.number="section.config.limit" type="number" min="1" max="50" class="cpub-editor-input" @input="markChanged" />
+            </div>
+            <div v-if="section.type === 'content-grid'" class="cpub-editor-field">
+              <label class="cpub-editor-label">Sort</label>
+              <select v-model="section.config.sort" class="cpub-editor-input" @change="markChanged">
+                <option value="popular">Popular</option>
+                <option value="recent">Recent</option>
+                <option value="featured">Featured</option>
+                <option value="editorial">Editorial</option>
+              </select>
+            </div>
+            <div v-if="section.type === 'content-grid'" class="cpub-editor-field">
+              <label class="cpub-editor-label">Columns</label>
+              <select v-model.number="section.config.columns" class="cpub-editor-input" @change="markChanged">
+                <option :value="2">2</option>
+                <option :value="3">3</option>
+                <option :value="4">4</option>
+              </select>
+            </div>
+            <div v-if="section.type === 'custom-html'" class="cpub-editor-field cpub-editor-field--full">
+              <label class="cpub-editor-label">HTML Content</label>
+              <textarea v-model="section.config.html" class="cpub-editor-textarea" rows="4" @input="markChanged" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="hasChanges" class="cpub-sections-footer">
+      <span class="cpub-sections-footer-text">Unsaved changes</span>
+      <button class="cpub-btn cpub-btn-sm" @click="discard">Discard</button>
+      <button class="cpub-btn cpub-btn-primary cpub-btn-sm" :disabled="saving" @click="save">Save</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-admin-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-6); gap: var(--space-4); }
+.cpub-admin-header-actions { display: flex; gap: var(--space-2); }
+.cpub-admin-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); }
+.cpub-admin-subtitle { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
+
+.cpub-sections-list { display: flex; flex-direction: column; border: var(--border-width-default) solid var(--border); }
+
+.cpub-section-row {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: var(--border-width-default) solid var(--border2);
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.cpub-section-row:last-child { border-bottom: none; }
+.cpub-section-disabled { opacity: 0.5; }
+
+.cpub-section-order { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+.cpub-order-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 10px; padding: 2px 4px; }
+.cpub-order-btn:hover { color: var(--accent); }
+.cpub-order-btn:disabled { opacity: 0.3; cursor: default; }
+.cpub-order-num { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
+
+.cpub-section-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--surface2); border: var(--border-width-default) solid var(--border2); color: var(--text-dim); font-size: 13px; flex-shrink: 0; }
+
+.cpub-section-info { flex: 1; min-width: 0; }
+.cpub-section-label { font-size: 13px; font-weight: 600; }
+.cpub-section-meta { display: flex; gap: 8px; margin-top: 2px; }
+.cpub-section-type-badge { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; color: var(--text-faint); }
+.cpub-section-gate { font-family: var(--font-mono); font-size: 9px; color: var(--accent); }
+
+.cpub-section-actions { display: flex; gap: 6px; flex-shrink: 0; }
+.cpub-section-action { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
+.cpub-section-action:hover { color: var(--accent); }
+.cpub-section-action--active { color: var(--green); }
+.cpub-section-action--danger:hover { color: var(--red); }
+
+.cpub-section-editor { width: 100%; padding: 12px 0 0; border-top: var(--border-width-default) solid var(--border2); margin-top: 8px; }
+.cpub-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
+.cpub-editor-field { display: flex; flex-direction: column; gap: 4px; }
+.cpub-editor-field--full { grid-column: 1 / -1; }
+.cpub-editor-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
+.cpub-editor-input { font-size: 13px; padding: 6px 10px; border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; }
+.cpub-editor-input:focus { border-color: var(--accent); }
+.cpub-editor-textarea { font-size: 12px; font-family: var(--font-mono); padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; resize: vertical; }
+
+.cpub-sections-footer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); margin-top: var(--space-4); background: var(--yellow-bg, var(--surface2)); border: var(--border-width-default) solid var(--yellow, var(--border)); }
+.cpub-sections-footer-text { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--yellow, var(--text-dim)); flex: 1; }
+
+@media (max-width: 768px) {
+  .cpub-admin-header { flex-direction: column; }
+  .cpub-editor-grid { grid-template-columns: 1fr; }
+  .cpub-section-row { flex-direction: column; align-items: flex-start; }
+  .cpub-section-actions { align-self: flex-end; }
+}
+</style>

package/pages/index.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
-import type { Serialized, ContentListItem, PaginatedResponse } from '@commonpub/server';
+import type { Serialized, ContentListItem, PaginatedResponse, HomepageSection } from '@commonpub/server';
 
 useSeoMeta({
   title: `${useSiteName()} — Open Maker Platform`,
   description: 'Build, document, and share your projects with a community of makers.',
 });
 
+// Fetch configurable homepage sections (from DB or defaults)
+const { data: homepageSections } = await useFetch<HomepageSection[]>('/api/homepage/sections');
+const hasCustomSections = computed(() => !!homepageSections.value?.length);
+const sortedSections = computed(() =>
+  [...(homepageSections.value ?? [])].sort((a, b) => a.order - b.order),
+);
+
 const { user: authUser } = useAuth();
 const { hubs: hubsEnabled, contests: contestsEnabled, learning: learningEnabled, video: videoEnabled, docs: docsEnabled, editorial: editorialEnabled } = useFeatures();
 const { enabledTypeMeta } = useContentTypes();
@@ -117,6 +124,30 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
 
 <template>
   <div>
+    <!-- ═══ CONFIGURABLE HOMEPAGE (section renderer) ═══ -->
+    <template v-if="hasCustomSections">
+      <!-- Full-width sections (hero) -->
+      <HomepageSectionRenderer :sections="sortedSections" zone="full-width" />
+
+      <!-- 2-column layout: main + sidebar -->
+      <div class="cpub-main-layout">
+        <main class="cpub-feed-col">
+          <HomepageSectionRenderer :sections="sortedSections" zone="main" />
+        </main>
+        <aside class="cpub-sidebar">
+          <HomepageSectionRenderer :sections="sortedSections" zone="sidebar" />
+          <!-- Powered badge -->
+          <div class="cpub-powered-badge">
+            <span class="cpub-powered-text">Powered by</span>
+            <span class="cpub-powered-logo">[<span>C</span>] CommonPub</span>
+          </div>
+        </aside>
+      </div>
+    </template>
+
+    <!-- ═══ LEGACY HARDCODED HOMEPAGE (fallback) ═══ -->
+    <template v-else>
+
     <!-- ═══ HERO BANNER ═══ -->
     <section v-if="!heroDismissed" class="cpub-hero-banner">
       <div class="cpub-hero-grid-bg" />
@@ -383,6 +414,8 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
         </div>
       </aside>
     </div>
+
+    </template><!-- end legacy fallback -->
   </div>
 </template>