@commonpub/layer 0.9.2 → 0.10.1

package/components/CategoryBadge.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  name: string;
+  slug: string;
+  color?: string | null;
+  icon?: string | null;
+}>();
+
+const badgeColor = computed(() => props.color || 'var(--text-dim)');
+</script>
+
+<template>
+  <span class="cpub-category-badge" :style="{ '--cat-color': badgeColor }">
+    <i v-if="icon" :class="icon" class="cpub-category-badge-icon"></i>
+    {{ name }}
+  </span>
+</template>
+
+<style scoped>
+.cpub-category-badge {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 2px 7px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--color-badge-overlay, rgba(0, 0, 0, 0.75));
+  color: var(--cat-color, var(--text-dim));
+  backdrop-filter: blur(4px);
+}
+
+.cpub-category-badge-icon {
+  font-size: 8px;
+}
+</style>

package/components/ContentCard.vue

@@ -12,7 +12,15 @@ import type { Serialized, ContentListItem } from '@commonpub/server';
  * - Stats: hearts, views, comments
  */
 const props = defineProps<{
-  item: Serialized<ContentListItem> & { isFeatured?: boolean };
+  item: Serialized<ContentListItem> & {
+    isFeatured?: boolean;
+    isEditorial?: boolean;
+    editorialNote?: string | null;
+    categoryName?: string | null;
+    categorySlug?: string | null;
+    categoryColor?: string | null;
+    categoryIcon?: string | null;
+  };
 }>();
 
 const cover = computed(() => {
@@ -80,9 +88,17 @@ function formatCount(n: number | undefined): string {
 
         <!-- Badges overlay -->
         <div class="cpub-cc-badges">
-          <span v-if="item.isFeatured" class="cpub-cc-badge cpub-cc-badge--featured">
+          <EditorialBadge v-if="item.isEditorial" :note="item.editorialNote" />
+          <span v-if="item.isFeatured && !item.isEditorial" class="cpub-cc-badge cpub-cc-badge--featured">
             <i class="fa-solid fa-star"></i> Featured
           </span>
+          <CategoryBadge
+            v-if="item.categoryName && item.categorySlug"
+            :name="item.categoryName"
+            :slug="item.categorySlug"
+            :color="item.categoryColor"
+            :icon="item.categoryIcon"
+          />
           <span v-if="isFederated && item.sourceDomain" class="cpub-cc-badge cpub-cc-badge--federated">
             <i class="fa-solid fa-globe" /> {{ item.sourceDomain }}
           </span>

package/components/EditorialBadge.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps<{
+  note?: string | null;
+}>();
+</script>
+
+<template>
+  <span class="cpub-cc-badge cpub-cc-badge--editorial" :title="note || 'Staff Pick'">
+    <i class="fa-solid fa-pen-fancy"></i> Staff Pick
+  </span>
+</template>
+
+<style scoped>
+.cpub-cc-badge--editorial {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 2px 7px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--color-badge-overlay, rgba(0, 0, 0, 0.75));
+  color: var(--teal);
+  backdrop-filter: blur(4px);
+}
+</style>

package/components/hub/HubLayout.vue

@@ -24,6 +24,7 @@ const activeTab = defineModel<string>('activeTab', { required: true });
         >
           <i :class="tab.icon" style="font-size: 10px"></i>
           {{ tab.label }}
+          <span v-if="tab.count" class="cpub-tab-count">{{ tab.count }}</span>
         </button>
       </div>
     </div>
@@ -78,6 +79,22 @@ const activeTab = defineModel<string>('activeTab', { required: true });
 .cpub-tab-btn:hover { color: var(--text); }
 .cpub-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent-border); font-weight: 600; }
 
+.cpub-tab-count {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  background: var(--surface2);
+  color: var(--text-faint);
+  padding: 1px 6px;
+  border-radius: 10px;
+  min-width: 18px;
+  text-align: center;
+}
+
+.cpub-tab-btn.active .cpub-tab-count {
+  background: var(--accent-bg);
+  color: var(--accent);
+}
+
 .cpub-hub-main {
   max-width: 1200px;
   margin: 0 auto;

package/components/hub/HubProducts.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { createProductSchema } from '@commonpub/schema';
-
 const props = defineProps<{
   products: { items: Array<{ id: string; name: string; description: string | null; imageUrl: string | null; category: string | null; status: string }>; total: number } | null;
   currentUserRole?: string | null;
@@ -48,13 +46,15 @@ async function handleCreate(): Promise<void> {
     <form v-if="showForm" class="cpub-resource-form" @submit.prevent="handleCreate">
       <input v-model="formName" type="text" placeholder="Product name" class="cpub-input" required />
       <input v-model="formDescription" type="text" placeholder="Short description (optional)" class="cpub-input" />
-      <select v-model="formCategory" class="cpub-input">
+      <select v-model="formCategory" class="cpub-input" aria-label="Product category">
         <option value="microcontroller">Microcontroller</option>
         <option value="sbc">SBC</option>
         <option value="sensor">Sensor</option>
+        <option value="actuator">Actuator</option>
         <option value="display">Display</option>
         <option value="communication">Communication</option>
         <option value="power">Power</option>
+        <option value="mechanical">Mechanical</option>
         <option value="software">Software</option>
         <option value="tool">Tool</option>
         <option value="other">Other</option>
@@ -89,6 +89,18 @@ async function handleCreate(): Promise<void> {
 </template>
 
 <style scoped>
+.cpub-products-header { margin-bottom: 16px; }
+
+.cpub-resource-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  margin-bottom: 20px;
+}
+
 .cpub-products-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -144,7 +156,7 @@ async function handleCreate(): Promise<void> {
 
 .cpub-product-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
 
-@media (max-width: 1024px) {
+@media (max-width: 768px) {
   .cpub-products-grid { grid-template-columns: 1fr; }
 }
 

package/components/hub/HubResources.vue

@@ -217,18 +217,20 @@ async function handleDelete(id: string): Promise<void> {
 }
 
 .cpub-resource-item-ext {
-  font-size: 9px;
+  font-size: 11px;
   color: var(--text-faint);
-  margin-left: 4px;
+  margin-left: 6px;
 }
 
 .cpub-resource-item-desc {
   font-size: 11px;
   color: var(--text-dim);
   margin-top: 2px;
-  white-space: nowrap;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .cpub-resource-item-meta {
@@ -246,12 +248,17 @@ async function handleDelete(id: string): Promise<void> {
   border: none;
   cursor: pointer;
   color: var(--text-faint);
-  padding: 4px;
-  font-size: 11px;
+  padding: 6px 8px;
+  font-size: 12px;
+  min-width: 32px;
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .cpub-resource-delete:hover {
-  color: var(--red, #ef4444);
+  color: var(--red);
 }
 
 @media (max-width: 640px) {

package/composables/useFeatures.ts

@@ -9,6 +9,7 @@ export interface FeatureFlags {
   contests: boolean;
   learning: boolean;
   explainers: boolean;
+  editorial: boolean;
   federation: boolean;
   admin: boolean;
   emailNotifications: boolean;
@@ -16,7 +17,7 @@ export interface FeatureFlags {
 
 export function useFeatures() {
   const config = useRuntimeConfig();
-  const flags = config.public.features as FeatureFlags;
+  const flags = config.public.features as unknown as FeatureFlags;
 
   return {
     features: flags,
@@ -28,6 +29,7 @@ export function useFeatures() {
     contests: computed(() => flags.contests),
     learning: computed(() => flags.learning),
     explainers: computed(() => flags.explainers),
+    editorial: computed(() => flags.editorial),
     federation: computed(() => flags.federation),
     admin: computed(() => flags.admin),
     emailNotifications: computed(() => flags.emailNotifications),

package/layouts/admin.vue

@@ -29,6 +29,7 @@ const sidebarOpen = ref(false);
           <NuxtLink to="/admin" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-gauge"></i> Dashboard</NuxtLink>
           <NuxtLink to="/admin/users" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-users"></i> Users</NuxtLink>
           <NuxtLink to="/admin/content" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-newspaper"></i> Content</NuxtLink>
+          <NuxtLink to="/admin/categories" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-tags"></i> Categories</NuxtLink>
           <NuxtLink to="/admin/reports" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-flag"></i> Reports</NuxtLink>
           <NuxtLink to="/admin/audit" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-clipboard-list"></i> Audit Log</NuxtLink>
           <NuxtLink to="/admin/theme" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-palette"></i> Theme</NuxtLink>

package/layouts/default.vue

@@ -269,7 +269,7 @@ const userUsername = computed(() => user.value?.username ?? '');
         </nav>
       </div>
       <div class="cpub-footer-bottom">
-        <span>&copy; {{ new Date().getFullYear() }} {{ siteName }}. Open source under MIT.</span>
+        <span>&copy; {{ new Date().getFullYear() }} {{ siteName }}. Open source under AGPL-3.0.</span>
       </div>
     </footer>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.9.2",
+  "version": "0.10.1",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -29,8 +29,8 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1010.0",
     "@commonpub/explainer": "^0.7.11",
-    "@commonpub/schema": "^0.9.13",
-    "@commonpub/server": "^2.31.0",
+    "@commonpub/schema": "^0.10.0",
+    "@commonpub/server": "^2.32.1",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bold": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.0",
@@ -53,13 +53,13 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.5.1",
-    "@commonpub/config": "0.9.1",
+    "@commonpub/config": "0.9.2",
     "@commonpub/docs": "0.6.2",
+    "@commonpub/auth": "0.5.1",
     "@commonpub/editor": "0.7.9",
+    "@commonpub/ui": "0.8.5",
     "@commonpub/learning": "0.5.0",
-    "@commonpub/protocol": "0.9.9",
-    "@commonpub/ui": "0.8.5"
+    "@commonpub/protocol": "0.9.9"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/admin/categories.vue

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'admin', middleware: 'auth' });
+useSeoMeta({ title: `Categories — Admin — ${useSiteName()}` });
+
+const toast = useToast();
+
+interface Category {
+  id: string;
+  name: string;
+  slug: string;
+  description: string | null;
+  color: string | null;
+  icon: string | null;
+  sortOrder: number;
+  isSystem: boolean;
+}
+
+const { data: categories, refresh } = await useFetch<Category[]>('/api/admin/categories');
+
+const showForm = ref(false);
+const editingId = ref<string | null>(null);
+const form = ref({
+  name: '',
+  slug: '',
+  description: '',
+  color: '',
+  icon: '',
+  sortOrder: 0,
+});
+
+function generateSlug(name: string): string {
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+}
+
+function openNew(): void {
+  editingId.value = null;
+  form.value = { name: '', slug: '', description: '', color: '', icon: '', sortOrder: categories.value?.length ?? 0 };
+  showForm.value = true;
+}
+
+function openEdit(cat: Category): void {
+  editingId.value = cat.id;
+  form.value = {
+    name: cat.name,
+    slug: cat.slug,
+    description: cat.description ?? '',
+    color: cat.color ?? '',
+    icon: cat.icon ?? '',
+    sortOrder: cat.sortOrder,
+  };
+  showForm.value = true;
+}
+
+function cancelForm(): void {
+  showForm.value = false;
+  editingId.value = null;
+}
+
+watch(() => form.value.name, (name) => {
+  if (!editingId.value) {
+    form.value.slug = generateSlug(name);
+  }
+});
+
+async function saveCategory(): Promise<void> {
+  const payload = {
+    name: form.value.name,
+    slug: form.value.slug,
+    description: form.value.description || undefined,
+    color: form.value.color || undefined,
+    icon: form.value.icon || undefined,
+    sortOrder: form.value.sortOrder,
+  };
+
+  try {
+    if (editingId.value) {
+      await $fetch(`/api/admin/categories/${editingId.value}`, { method: 'PATCH', body: payload });
+      toast.success('Category updated');
+    } else {
+      await $fetch('/api/admin/categories', { method: 'POST', body: payload });
+      toast.success('Category created');
+    }
+    showForm.value = false;
+    editingId.value = null;
+    await refresh();
+  } catch {
+    toast.error('Failed to save category');
+  }
+}
+
+async function deleteCategory(cat: Category): Promise<void> {
+  if (cat.isSystem) {
+    toast.error('Cannot delete system categories');
+    return;
+  }
+  if (!confirm(`Delete "${cat.name}"? Content using this category will become uncategorized.`)) return;
+  try {
+    await $fetch(`/api/admin/categories/${cat.id}`, { method: 'DELETE' });
+    toast.success('Category deleted');
+    await refresh();
+  } catch {
+    toast.error('Failed to delete category');
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-admin-categories">
+    <div class="cpub-admin-header">
+      <h1 class="cpub-admin-title">Content Categories</h1>
+      <button class="cpub-btn cpub-btn-primary cpub-btn-sm" @click="openNew">
+        <i class="fa-solid fa-plus"></i> New Category
+      </button>
+    </div>
+
+    <!-- Category Form -->
+    <div v-if="showForm" class="cpub-cat-form">
+      <h2 class="cpub-cat-form-title">{{ editingId ? 'Edit Category' : 'New Category' }}</h2>
+      <div class="cpub-cat-form-grid">
+        <div class="cpub-cat-field">
+          <label class="cpub-cat-label">Name</label>
+          <input v-model="form.name" class="cpub-cat-input" placeholder="e.g. Deep Dive" />
+        </div>
+        <div class="cpub-cat-field">
+          <label class="cpub-cat-label">Slug</label>
+          <input v-model="form.slug" class="cpub-cat-input" placeholder="e.g. deep-dive" />
+        </div>
+        <div class="cpub-cat-field">
+          <label class="cpub-cat-label">Description</label>
+          <input v-model="form.description" class="cpub-cat-input" placeholder="Optional description" />
+        </div>
+        <div class="cpub-cat-field">
+          <label class="cpub-cat-label">Icon (Font Awesome class)</label>
+          <input v-model="form.icon" class="cpub-cat-input" placeholder="e.g. fa-solid fa-newspaper" />
+        </div>
+        <div class="cpub-cat-field">
+          <label class="cpub-cat-label">Color</label>
+          <input v-model="form.color" class="cpub-cat-input" placeholder="e.g. var(--teal) or #5b9cf6" />
+        </div>
+        <div class="cpub-cat-field">
+          <label class="cpub-cat-label">Sort Order</label>
+          <input v-model.number="form.sortOrder" type="number" class="cpub-cat-input" min="0" />
+        </div>
+      </div>
+      <div class="cpub-cat-form-actions">
+        <button class="cpub-btn cpub-btn-primary cpub-btn-sm" @click="saveCategory">
+          {{ editingId ? 'Update' : 'Create' }}
+        </button>
+        <button class="cpub-btn cpub-btn-sm" @click="cancelForm">Cancel</button>
+      </div>
+    </div>
+
+    <!-- Categories Table -->
+    <div class="cpub-admin-table-wrap" v-if="categories?.length">
+      <table class="cpub-admin-table">
+        <thead>
+          <tr>
+            <th>Order</th>
+            <th>Name</th>
+            <th>Slug</th>
+            <th>Icon</th>
+            <th>Type</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="cat in categories" :key="cat.id">
+            <td class="cpub-admin-num">{{ cat.sortOrder }}</td>
+            <td>
+              <span class="cpub-cat-name">
+                <i v-if="cat.icon" :class="cat.icon" :style="{ color: cat.color || 'var(--text-dim)' }"></i>
+                {{ cat.name }}
+              </span>
+            </td>
+            <td class="cpub-admin-slug">{{ cat.slug }}</td>
+            <td class="cpub-admin-icon-cell"><code v-if="cat.icon">{{ cat.icon }}</code></td>
+            <td>
+              <span :class="['cpub-cat-type', cat.isSystem ? 'cpub-cat-system' : 'cpub-cat-custom']">
+                {{ cat.isSystem ? 'System' : 'Custom' }}
+              </span>
+            </td>
+            <td class="cpub-admin-actions">
+              <button class="cpub-admin-action" title="Edit" @click="openEdit(cat)">
+                <i class="fa-solid fa-pencil"></i>
+              </button>
+              <button
+                v-if="!cat.isSystem"
+                class="cpub-admin-action cpub-admin-action--danger"
+                title="Delete"
+                @click="deleteCategory(cat)"
+              >
+                <i class="fa-solid fa-trash"></i>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <p class="cpub-empty" v-else>No categories found. Create one to get started.</p>
+  </div>
+</template>
+
+<style scoped>
+.cpub-admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); }
+.cpub-admin-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); }
+
+.cpub-cat-form {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: var(--space-5);
+  margin-bottom: var(--space-6);
+}
+
+.cpub-cat-form-title { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-4); }
+
+.cpub-cat-form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+}
+
+.cpub-cat-field { display: flex; flex-direction: column; gap: 4px; }
+.cpub-cat-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
+.cpub-cat-input {
+  font-size: 13px;
+  padding: 6px 10px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--bg);
+  color: var(--text);
+  outline: none;
+}
+.cpub-cat-input:focus { border-color: var(--accent); }
+
+.cpub-cat-form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
+
+.cpub-admin-table-wrap { overflow-x: auto; }
+.cpub-admin-table { width: 100%; border-collapse: collapse; }
+.cpub-admin-table th { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); text-align: left; padding: 8px 12px; border-bottom: var(--border-width-default) solid var(--border); }
+.cpub-admin-table td { padding: 8px 12px; border-bottom: var(--border-width-default) solid var(--border2); font-size: 13px; }
+.cpub-admin-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
+.cpub-admin-slug { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
+.cpub-admin-icon-cell code { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
+.cpub-admin-actions { display: flex; gap: 6px; }
+.cpub-admin-action { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
+.cpub-admin-action:hover { color: var(--accent); }
+.cpub-admin-action--danger:hover { color: var(--red); }
+
+.cpub-cat-name { display: flex; align-items: center; gap: 6px; font-weight: 500; }
+.cpub-cat-type { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; padding: 2px 8px; }
+.cpub-cat-system { color: var(--teal); background: var(--teal-bg, var(--surface2)); border: var(--border-width-default) solid var(--teal-border, var(--border2)); }
+.cpub-cat-custom { color: var(--text-dim); background: var(--surface2); border: var(--border-width-default) solid var(--border2); }
+
+.cpub-empty { color: var(--text-faint); text-align: center; padding: var(--space-10) 0; }
+
+@media (max-width: 768px) {
+  .cpub-cat-form-grid { grid-template-columns: 1fr; }
+  .cpub-admin-header { flex-direction: column; gap: var(--space-3); align-items: flex-start; }
+}
+</style>

package/pages/admin/content.vue

@@ -3,9 +3,72 @@ definePageMeta({ layout: 'admin', middleware: 'auth' });
 useSeoMeta({ title: `Content Management — Admin — ${useSiteName()}` });
 
 const toast = useToast();
+
+interface Category {
+  id: string;
+  name: string;
+  slug: string;
+  color: string | null;
+  icon: string | null;
+}
+
 const { data, refresh } = await useFetch('/api/content', {
   query: { limit: 50, sort: 'recent' },
 });
+const { data: categories } = await useFetch<Category[]>('/api/categories');
+
+const selectedIds = ref<Set<string>>(new Set());
+const selectAll = ref(false);
+
+watch(selectAll, (val) => {
+  if (val && data.value?.items) {
+    selectedIds.value = new Set(data.value.items.filter(i => i.source !== 'federated').map(i => i.id));
+  } else {
+    selectedIds.value = new Set();
+  }
+});
+
+function toggleSelect(id: string): void {
+  const s = new Set(selectedIds.value);
+  if (s.has(id)) s.delete(id); else s.add(id);
+  selectedIds.value = s;
+}
+
+async function bulkAction(action: 'feature' | 'unfeature' | 'editorial' | 'uneditorial'): Promise<void> {
+  if (selectedIds.value.size === 0) return;
+  const ids = Array.from(selectedIds.value);
+  const body: Record<string, unknown> = { ids };
+  if (action === 'feature') body.isFeatured = true;
+  if (action === 'unfeature') body.isFeatured = false;
+  if (action === 'editorial') body.isEditorial = true;
+  if (action === 'uneditorial') body.isEditorial = false;
+
+  try {
+    await $fetch('/api/admin/content/bulk-editorial', { method: 'POST', body });
+    toast.success(`Updated ${ids.length} items`);
+    selectedIds.value = new Set();
+    selectAll.value = false;
+    await refresh();
+  } catch {
+    toast.error('Bulk action failed');
+  }
+}
+
+async function bulkSetCategory(categoryId: string | null): Promise<void> {
+  if (selectedIds.value.size === 0) return;
+  try {
+    await $fetch('/api/admin/content/bulk-editorial', {
+      method: 'POST',
+      body: { ids: Array.from(selectedIds.value), categoryId },
+    });
+    toast.success('Categories updated');
+    selectedIds.value = new Set();
+    selectAll.value = false;
+    await refresh();
+  } catch {
+    toast.error('Failed to update categories');
+  }
+}
 
 async function removeContent(id: string, title: string): Promise<void> {
   if (!confirm(`Remove "${title}"? This cannot be undone.`)) return;
@@ -30,18 +93,61 @@ async function toggleFeatured(id: string, current: boolean): Promise<void> {
     toast.error('Failed to update featured status');
   }
 }
+
+async function toggleEditorial(id: string, current: boolean): Promise<void> {
+  try {
+    await $fetch(`/api/admin/content/${id}`, {
+      method: 'PATCH',
+      body: { isEditorial: !current },
+    });
+    toast.success(current ? 'Removed from Staff Picks' : 'Marked as Staff Pick');
+    await refresh();
+  } catch {
+    toast.error('Failed to update editorial status');
+  }
+}
+
+async function setCategory(id: string, categoryId: string | null): Promise<void> {
+  try {
+    await $fetch(`/api/admin/content/${id}`, {
+      method: 'PATCH',
+      body: { categoryId },
+    });
+    toast.success('Category updated');
+    await refresh();
+  } catch {
+    toast.error('Failed to update category');
+  }
+}
 </script>
 
 <template>
   <div class="cpub-admin-content">
     <h1 class="cpub-admin-title">Content Management</h1>
 
+    <!-- Bulk Actions Bar -->
+    <div v-if="selectedIds.size > 0" class="cpub-bulk-bar">
+      <span class="cpub-bulk-count">{{ selectedIds.size }} selected</span>
+      <button class="cpub-btn cpub-btn-sm" @click="bulkAction('feature')"><i class="fa-solid fa-star"></i> Feature</button>
+      <button class="cpub-btn cpub-btn-sm" @click="bulkAction('unfeature')"><i class="fa-regular fa-star"></i> Unfeature</button>
+      <button class="cpub-btn cpub-btn-sm" @click="bulkAction('editorial')"><i class="fa-solid fa-pen-fancy"></i> Staff Pick</button>
+      <button class="cpub-btn cpub-btn-sm" @click="bulkAction('uneditorial')"><i class="fa-regular fa-pen-to-square"></i> Unpick</button>
+      <select class="cpub-bulk-cat-select" @change="(e) => bulkSetCategory((e.target as HTMLSelectElement).value || null)" aria-label="Set category">
+        <option value="">Set Category...</option>
+        <option :value="''" v-if="false">—</option>
+        <option v-for="cat in categories" :key="cat.id" :value="cat.id">{{ cat.name }}</option>
+        <option value="">Remove Category</option>
+      </select>
+    </div>
+
     <div class="cpub-admin-table-wrap" v-if="data?.items?.length">
       <table class="cpub-admin-table">
         <thead>
           <tr>
+            <th><input type="checkbox" v-model="selectAll" aria-label="Select all" /></th>
             <th>Title</th>
             <th>Type</th>
+            <th>Category</th>
             <th>Author</th>
             <th>Status</th>
             <th>Views</th>
@@ -50,11 +156,36 @@ async function toggleFeatured(id: string, current: boolean): Promise<void> {
           </tr>
         </thead>
         <tbody>
-          <tr v-for="item in data.items" :key="item.id">
+          <tr v-for="item in data.items" :key="item.id" :class="{ 'cpub-row-selected': selectedIds.has(item.id) }">
+            <td>
+              <input
+                v-if="item.source !== 'federated'"
+                type="checkbox"
+                :checked="selectedIds.has(item.id)"
+                @change="toggleSelect(item.id)"
+                :aria-label="`Select ${item.title}`"
+              />
+            </td>
             <td>
               <NuxtLink :to="`/u/${item.author?.username}/${item.type}/${item.slug}`" class="cpub-admin-link">{{ item.title }}</NuxtLink>
+              <div class="cpub-admin-badges" v-if="item.isEditorial || item.isFeatured">
+                <span v-if="item.isEditorial" class="cpub-mini-badge cpub-mini-badge--editorial"><i class="fa-solid fa-pen-fancy"></i> Staff Pick</span>
+                <span v-if="item.isFeatured" class="cpub-mini-badge cpub-mini-badge--featured"><i class="fa-solid fa-star"></i></span>
+              </div>
             </td>
             <td><ContentTypeBadge :type="item.type" /></td>
+            <td>
+              <select
+                v-if="item.source !== 'federated'"
+                class="cpub-cat-select"
+                :value="item.categoryId || ''"
+                @change="setCategory(item.id, ($event.target as HTMLSelectElement).value || null)"
+                aria-label="Category"
+              >
+                <option value="">None</option>
+                <option v-for="cat in categories" :key="cat.id" :value="cat.id">{{ cat.name }}</option>
+              </select>
+            </td>
             <td class="cpub-admin-author">{{ item.author?.displayName || item.author?.username || 'Unknown' }}</td>
             <td>
               <span :class="['cpub-status-badge', `cpub-status-${item.status}`]">{{ item.status }}</span>
@@ -65,7 +196,16 @@ async function toggleFeatured(id: string, current: boolean): Promise<void> {
               <button
                 v-if="item.source !== 'federated'"
                 class="cpub-admin-action"
-                :class="{ 'cpub-admin-action--active': item.isFeatured }"
+                :class="{ 'cpub-admin-action--active': item.isEditorial }"
+                :title="item.isEditorial ? 'Remove Staff Pick' : 'Mark as Staff Pick'"
+                @click="toggleEditorial(item.id, !!item.isEditorial)"
+              >
+                <i class="fa-solid fa-pen-fancy"></i>
+              </button>
+              <button
+                v-if="item.source !== 'federated'"
+                class="cpub-admin-action"
+                :class="{ 'cpub-admin-action--active-star': item.isFeatured }"
                 :title="item.isFeatured ? 'Remove from featured' : 'Feature on homepage'"
                 @click="toggleFeatured(item.id, !!item.isFeatured)"
               >
@@ -88,6 +228,28 @@ async function toggleFeatured(id: string, current: boolean): Promise<void> {
 
 <style scoped>
 .cpub-admin-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-6); }
+
+.cpub-bulk-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  background: var(--accent-bg);
+  border: var(--border-width-default) solid var(--accent-border);
+  margin-bottom: var(--space-4);
+  flex-wrap: wrap;
+}
+.cpub-bulk-count { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent); margin-right: var(--space-2); }
+.cpub-bulk-cat-select {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 4px 8px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text-dim);
+  cursor: pointer;
+}
+
 .cpub-admin-table-wrap { overflow-x: auto; }
 .cpub-admin-table { width: 100%; border-collapse: collapse; }
 .cpub-admin-table th { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); text-align: left; padding: 8px 12px; border-bottom: var(--border-width-default) solid var(--border); }
@@ -103,9 +265,25 @@ async function toggleFeatured(id: string, current: boolean): Promise<void> {
 .cpub-admin-actions { display: flex; gap: 6px; }
 .cpub-admin-action { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
 .cpub-admin-action:hover { color: var(--accent); }
-.cpub-admin-action--active { color: var(--yellow, #e6b800); }
+.cpub-admin-action--active { color: var(--teal); }
+.cpub-admin-action--active-star { color: var(--yellow, #e6b800); }
 .cpub-admin-action--danger:hover { color: var(--red); }
 .cpub-admin-federated-tag { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 3px; }
+.cpub-row-selected { background: var(--accent-bg); }
+.cpub-admin-badges { display: flex; gap: 4px; margin-top: 2px; }
+.cpub-mini-badge { font-family: var(--font-mono); font-size: 9px; display: inline-flex; align-items: center; gap: 3px; }
+.cpub-mini-badge--editorial { color: var(--teal); }
+.cpub-mini-badge--featured { color: var(--yellow, #e6b800); }
+.cpub-cat-select {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 3px 6px;
+  border: var(--border-width-default) solid var(--border2);
+  background: var(--surface);
+  color: var(--text-dim);
+  cursor: pointer;
+  max-width: 120px;
+}
 .cpub-empty { color: var(--text-faint); text-align: center; padding: var(--space-10) 0; }
 
 @media (max-width: 768px) {

package/pages/explore.vue

@@ -478,6 +478,8 @@ const sortOptions = [
   text-decoration: none;
   color: inherit;
   transition: box-shadow 0.15s;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .cpub-explore-hub-card:hover { box-shadow: var(--shadow-md); }
@@ -499,7 +501,7 @@ const sortOptions = [
 
 .cpub-explore-hub-body { flex: 1; min-width: 0; }
 .cpub-explore-hub-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
-.cpub-explore-hub-desc { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cpub-explore-hub-desc { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .cpub-explore-hub-meta { font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); display: flex; gap: 8px; align-items: center; }
 
 /* Path cards */
@@ -539,12 +541,9 @@ const sortOptions = [
   padding: 24px 0;
 }
 
-@media (max-width: 1024px) {
-  .cpub-explore-hub-grid { grid-template-columns: 1fr; }
-}
-
 @media (max-width: 768px) {
   .cpub-explore-grid { grid-template-columns: 1fr; }
+  .cpub-explore-hub-grid { grid-template-columns: 1fr; }
   .cpub-explore-filters { flex-wrap: wrap; }
 }
 </style>

package/pages/hubs/[slug]/index.vue

@@ -126,31 +126,42 @@ const hubRules = computed<string[]>(() => {
 });
 
 const tabDefs = computed<HubTabDef[]>(() => {
+  const isMember = !!hub.value?.currentUserRole;
+  const showResources = (resources.value?.total ?? 0) > 0 || isMember;
+
   if (isProductHub.value) {
-    return [
+    const tabs: HubTabDef[] = [
       { value: 'overview', label: 'Overview', icon: 'fa-solid fa-info-circle' },
       { value: 'projects', label: 'Projects Using This', icon: 'fa-solid fa-folder-open', count: gallery.value?.total },
       { value: 'discussions', label: 'Discussions', icon: 'fa-solid fa-comments' },
-      { value: 'resources', label: 'Resources', icon: 'fa-solid fa-link', count: resources.value?.total },
     ];
+    if (showResources) tabs.push({ value: 'resources', label: 'Resources', icon: 'fa-solid fa-link', count: resources.value?.total });
+    return tabs;
   }
   if (isCompanyHub.value) {
-    return [
+    const tabs: HubTabDef[] = [
       { value: 'overview', label: 'Overview', icon: 'fa-solid fa-building' },
       { value: 'products', label: 'Products', icon: 'fa-solid fa-microchip', count: products.value?.total },
       { value: 'projects', label: 'Projects', icon: 'fa-solid fa-folder-open', count: gallery.value?.total },
       { value: 'discussions', label: 'Discussions', icon: 'fa-solid fa-comments' },
-      { value: 'resources', label: 'Resources', icon: 'fa-solid fa-link', count: resources.value?.total },
     ];
+    if (showResources) tabs.push({ value: 'resources', label: 'Resources', icon: 'fa-solid fa-link', count: resources.value?.total });
+    return tabs;
   }
-  return [
+  // Community hubs: only show Products/Resources tabs if they have content or user is a member
+  const tabs: HubTabDef[] = [
     { value: 'feed', label: 'Feed', icon: 'fa-solid fa-rss', count: hub.value?.postCount },
     { value: 'projects', label: 'Projects', icon: 'fa-solid fa-folder-open', count: gallery.value?.total },
-    { value: 'products', label: 'Products', icon: 'fa-solid fa-microchip', count: products.value?.total },
-    { value: 'discussions', label: 'Discussions', icon: 'fa-solid fa-comments' },
-    { value: 'resources', label: 'Resources', icon: 'fa-solid fa-link', count: resources.value?.total },
-    { value: 'members', label: 'Members', icon: 'fa-solid fa-users', count: hub.value?.memberCount },
   ];
+  if ((products.value?.total ?? 0) > 0 || isMember) {
+    tabs.push({ value: 'products', label: 'Products', icon: 'fa-solid fa-microchip', count: products.value?.total });
+  }
+  tabs.push({ value: 'discussions', label: 'Discussions', icon: 'fa-solid fa-comments' });
+  if (showResources) {
+    tabs.push({ value: 'resources', label: 'Resources', icon: 'fa-solid fa-link', count: resources.value?.total });
+  }
+  tabs.push({ value: 'members', label: 'Members', icon: 'fa-solid fa-users', count: hub.value?.memberCount });
+  return tabs;
 });
 
 const toast = useToast();

package/pages/index.vue

@@ -7,7 +7,7 @@ useSeoMeta({
 });
 
 const { user: authUser } = useAuth();
-const { hubs: hubsEnabled, contests: contestsEnabled, learning: learningEnabled, video: videoEnabled, docs: docsEnabled } = useFeatures();
+const { hubs: hubsEnabled, contests: contestsEnabled, learning: learningEnabled, video: videoEnabled, docs: docsEnabled, editorial: editorialEnabled } = useFeatures();
 const { enabledTypeMeta } = useContentTypes();
 
 const activeTab = ref(authUser.value ? 'foryou' : 'latest');
@@ -33,7 +33,14 @@ const { data: feed, pending: feedPending } = await useFetch<PaginatedResponse<Se
   watch: [contentQuery],
 });
 
-// Only show featured card if an admin has explicitly featured something
+// Editorial picks — staff-curated content for the homepage (only when editorial feature is enabled)
+const { data: editorialPicks } = editorialEnabled.value
+  ? await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+      query: { status: 'published', editorial: true, sort: 'editorial', limit: 3 },
+    })
+  : { data: ref(null) };
+
+// Legacy featured fallback — if no editorial picks, show single featured card
 const { data: featured } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
   query: { status: 'published', featured: true, limit: 1 },
 });
@@ -214,8 +221,18 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
       <!-- Feed column -->
       <main class="cpub-feed-col">
 
-        <!-- Featured card -->
-        <article v-if="featured?.items?.length && activeTab === 'foryou'" class="cpub-featured-card">
+        <!-- Editorial Picks Section -->
+        <section v-if="editorialEnabled && editorialPicks?.items?.length && activeTab === 'foryou'" class="cpub-editorial-section">
+          <div class="cpub-editorial-header">
+            <h2 class="cpub-editorial-heading"><i class="fa-solid fa-pen-fancy"></i> Staff Picks</h2>
+          </div>
+          <div class="cpub-editorial-grid" :class="{ 'cpub-editorial-single': editorialPicks.items.length === 1 }">
+            <ContentCard v-for="item in editorialPicks.items" :key="item.id" :item="item" />
+          </div>
+        </section>
+
+        <!-- Legacy featured card (shown when no editorial picks exist) -->
+        <article v-else-if="featured?.items?.length && activeTab === 'foryou'" class="cpub-featured-card">
           <div class="cpub-featured-thumb" :style="featured.items[0].coverImageUrl ? { backgroundImage: `url(${featured.items[0].coverImageUrl.includes('://') && !featured.items[0].coverImageUrl.includes(useRuntimeConfig().public?.domain as string || 'localhost') ? `/api/image-proxy?url=${encodeURIComponent(featured.items[0].coverImageUrl)}&w=900` : featured.items[0].coverImageUrl})`, backgroundSize: 'cover', backgroundPosition: 'center' } : {}">
             <i v-if="!featured.items[0].coverImageUrl" class="cpub-thumb-icon fa-solid fa-microchip" />
             <div class="cpub-thumb-overlay">
@@ -571,6 +588,49 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
 
 .cpub-feed-col { min-width: 0; }
 
+/* ─── EDITORIAL PICKS ─── */
+.cpub-editorial-section {
+  margin-bottom: 24px;
+}
+
+.cpub-editorial-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.cpub-editorial-heading {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--teal);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cpub-editorial-heading i {
+  font-size: 10px;
+}
+
+.cpub-editorial-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.cpub-editorial-single {
+  grid-template-columns: 1fr;
+  max-width: 400px;
+}
+
+@media (max-width: 768px) {
+  .cpub-editorial-grid { grid-template-columns: 1fr; }
+}
+
 /* ─── FEATURED CARD ─── */
 .cpub-featured-card {
   background: var(--surface);

package/server/api/admin/categories/[id].delete.ts

@@ -0,0 +1,20 @@
+import { deleteContentCategory } from '@commonpub/server';
+
+/**
+ * DELETE /api/admin/categories/[id]
+ * Delete a content category (admin only). System categories cannot be deleted.
+ */
+export default defineEventHandler(async (event) => {
+  requireAdmin(event);
+  const db = useDB();
+  const { id } = parseParams(event, { id: 'uuid' });
+
+  const result = await deleteContentCategory(db, id);
+  if (!result.deleted) {
+    if (result.error === 'system_category') {
+      throw createError({ statusCode: 403, statusMessage: 'System categories cannot be deleted' });
+    }
+    throw createError({ statusCode: 404, statusMessage: 'Category not found' });
+  }
+  return { success: true };
+});

package/server/api/admin/categories/[id].patch.ts

@@ -0,0 +1,19 @@
+import { updateContentCategory } from '@commonpub/server';
+import { updateContentCategorySchema } from '@commonpub/schema';
+
+/**
+ * PATCH /api/admin/categories/[id]
+ * Update a content category (admin only).
+ */
+export default defineEventHandler(async (event) => {
+  requireAdmin(event);
+  const db = useDB();
+  const { id } = parseParams(event, { id: 'uuid' });
+  const body = await parseBody(event, updateContentCategorySchema);
+
+  const result = await updateContentCategory(db, id, body);
+  if (!result) {
+    throw createError({ statusCode: 404, statusMessage: 'Category not found' });
+  }
+  return result;
+});

package/server/api/admin/categories/index.get.ts

@@ -0,0 +1,11 @@
+import { listContentCategories } from '@commonpub/server';
+
+/**
+ * GET /api/admin/categories
+ * List all content categories (admin).
+ */
+export default defineEventHandler(async (event) => {
+  requireAdmin(event);
+  const db = useDB();
+  return listContentCategories(db);
+});

package/server/api/admin/categories/index.post.ts

@@ -0,0 +1,13 @@
+import { createContentCategory } from '@commonpub/server';
+import { createContentCategorySchema } from '@commonpub/schema';
+
+/**
+ * POST /api/admin/categories
+ * Create a new content category (admin only).
+ */
+export default defineEventHandler(async (event) => {
+  requireAdmin(event);
+  const db = useDB();
+  const body = await parseBody(event, createContentCategorySchema);
+  return createContentCategory(db, body);
+});

package/server/api/admin/content/[id].patch.ts

@@ -4,7 +4,7 @@ import { z } from 'zod';
 
 /**
  * PATCH /api/admin/content/[id]
- * Update admin-managed content fields (featured status, visibility).
+ * Update admin-managed content fields (featured, editorial, category).
  */
 export default defineEventHandler(async (event) => {
   requireAdmin(event);
@@ -12,12 +12,18 @@ export default defineEventHandler(async (event) => {
   const { id: contentId } = parseParams(event, { id: 'uuid' });
   const body = await parseBody(event, z.object({
     isFeatured: z.boolean().optional(),
+    isEditorial: z.boolean().optional(),
+    editorialNote: z.string().max(255).optional().nullable(),
+    categoryId: z.string().uuid().optional().nullable(),
   }));
 
   const db = useDB();
 
   const updates: Record<string, unknown> = {};
   if (body.isFeatured !== undefined) updates.isFeatured = body.isFeatured;
+  if (body.isEditorial !== undefined) updates.isEditorial = body.isEditorial;
+  if (body.editorialNote !== undefined) updates.editorialNote = body.editorialNote;
+  if (body.categoryId !== undefined) updates.categoryId = body.categoryId;
 
   if (Object.keys(updates).length === 0) {
     throw createError({ statusCode: 400, statusMessage: 'No fields to update' });
@@ -27,7 +33,13 @@ export default defineEventHandler(async (event) => {
     .update(contentItems)
     .set(updates)
     .where(eq(contentItems.id, contentId))
-    .returning({ id: contentItems.id, isFeatured: contentItems.isFeatured });
+    .returning({
+      id: contentItems.id,
+      isFeatured: contentItems.isFeatured,
+      isEditorial: contentItems.isEditorial,
+      editorialNote: contentItems.editorialNote,
+      categoryId: contentItems.categoryId,
+    });
 
   if (result.length === 0) {
     throw createError({ statusCode: 404, statusMessage: 'Content not found' });

package/server/api/admin/content/bulk-editorial.post.ts

@@ -0,0 +1,37 @@
+import { contentItems } from '@commonpub/schema';
+import { inArray } from 'drizzle-orm';
+import { z } from 'zod';
+
+/**
+ * POST /api/admin/content/bulk-editorial
+ * Bulk update editorial status on multiple content items (admin only).
+ */
+export default defineEventHandler(async (event) => {
+  requireAdmin(event);
+
+  const body = await parseBody(event, z.object({
+    ids: z.array(z.string().uuid()).min(1).max(100),
+    isEditorial: z.boolean().optional(),
+    isFeatured: z.boolean().optional(),
+    categoryId: z.string().uuid().optional().nullable(),
+  }));
+
+  const db = useDB();
+
+  const updates: Record<string, unknown> = {};
+  if (body.isEditorial !== undefined) updates.isEditorial = body.isEditorial;
+  if (body.isFeatured !== undefined) updates.isFeatured = body.isFeatured;
+  if (body.categoryId !== undefined) updates.categoryId = body.categoryId;
+
+  if (Object.keys(updates).length === 0) {
+    throw createError({ statusCode: 400, statusMessage: 'No fields to update' });
+  }
+
+  const result = await db
+    .update(contentItems)
+    .set(updates)
+    .where(inArray(contentItems.id, body.ids))
+    .returning({ id: contentItems.id });
+
+  return { updated: result.length };
+});

package/server/api/categories/index.get.ts

@@ -0,0 +1,10 @@
+import { listContentCategories } from '@commonpub/server';
+
+/**
+ * GET /api/categories
+ * List all content categories (public).
+ */
+export default defineEventHandler(async () => {
+  const db = useDB();
+  return listContentCategories(db);
+});