@commonpub/layer 0.14.1 → 0.15.1

package/components/DiscussionItem.vue

@@ -32,7 +32,7 @@ const lastReplyFormatted = computed((): string | null => {
       <button
         class="cpub-vote-btn"
         aria-label="Upvote"
-        @click="emit('upvote')"
+        @click.prevent.stop="emit('upvote')"
       >
         <i class="fa-solid fa-chevron-up"></i>
       </button>
@@ -40,7 +40,7 @@ const lastReplyFormatted = computed((): string | null => {
       <button
         class="cpub-vote-btn"
         aria-label="Downvote"
-        @click="emit('downvote')"
+        @click.prevent.stop="emit('downvote')"
       >
         <i class="fa-solid fa-chevron-down"></i>
       </button>

package/components/FeedItem.vue

@@ -79,7 +79,7 @@ const formattedDate = computed((): string => {
         </div>
 
         <div class="cpub-feed-item-stats">
-          <button v-if="interactive" class="cpub-feed-stat cpub-feed-stat-btn" :class="{ 'cpub-feed-stat-voted': voted }" aria-label="Vote" @click.prevent.stop="emit('vote')">
+          <button v-if="interactive" type="button" class="cpub-feed-stat cpub-feed-stat-btn" :class="{ 'cpub-feed-stat-voted': voted }" aria-label="Vote" @click.prevent.stop="emit('vote')">
             <i class="fa-solid fa-arrow-up"></i> {{ voteCount }}
           </button>
           <span v-else class="cpub-feed-stat" aria-label="Votes">

package/components/PollDisplay.vue

@@ -10,7 +10,7 @@ const { isAuthenticated } = useAuth();
 const toast = useToast();
 const loading = ref(false);
 
-const { data, refresh } = await useFetch<{ options: PollOptionResult[]; userVote: string | null }>(
+const { data, refresh } = useLazyFetch<{ options: PollOptionResult[]; userVote: string | null }>(
   `/api/hubs/${props.hubSlug}/posts/${props.postId}/poll-options`,
 );
 

package/components/contest/ContestJudgeManager.vue

@@ -7,24 +7,51 @@ const props = defineProps<{
 }>();
 
 const toast = useToast();
-const { data: judges, refresh } = await useFetch<ContestJudgeItem[]>(
+const { data: judges, refresh } = useLazyFetch<ContestJudgeItem[]>(
   `/api/contests/${props.contestSlug}/judges`,
 );
 
-const newJudgeId = ref('');
+// User search for adding judges
+const searchQuery = ref('');
+const searchResults = ref<Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }>>([]);
+const searching = ref(false);
 const newJudgeRole = ref<'lead' | 'judge' | 'guest'>('judge');
 const adding = ref(false);
+let searchTimeout: ReturnType<typeof setTimeout> | null = null;
 
-async function addJudge(): Promise<void> {
-  if (!newJudgeId.value) return;
+function handleSearch(): void {
+  if (searchTimeout) clearTimeout(searchTimeout);
+  if (!searchQuery.value || searchQuery.value.length < 2) {
+    searchResults.value = [];
+    return;
+  }
+  searchTimeout = setTimeout(async () => {
+    searching.value = true;
+    try {
+      const data = await ($fetch as Function)('/api/admin/users', {
+        query: { search: searchQuery.value, limit: 8 },
+      }) as { items: Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }> };
+      // Filter out users who are already judges
+      const judgeIds = new Set((judges.value ?? []).map((j: ContestJudgeItem) => j.userId));
+      searchResults.value = data.items.filter((u: { id: string }) => !judgeIds.has(u.id));
+    } catch {
+      searchResults.value = [];
+    } finally {
+      searching.value = false;
+    }
+  }, 300);
+}
+
+async function addJudge(userId: string): Promise<void> {
   adding.value = true;
   try {
-    await $fetch(`/api/contests/${props.contestSlug}/judges`, {
+    await ($fetch as Function)(`/api/contests/${props.contestSlug}/judges`, {
       method: 'POST',
-      body: { userId: newJudgeId.value, role: newJudgeRole.value },
+      body: { userId, role: newJudgeRole.value },
     });
     toast.success('Judge added');
-    newJudgeId.value = '';
+    searchQuery.value = '';
+    searchResults.value = [];
     await refresh();
   } catch {
     toast.error('Failed to add judge');
@@ -36,7 +63,7 @@ async function addJudge(): Promise<void> {
 async function removeJudge(userId: string): Promise<void> {
   if (!confirm('Remove this judge?')) return;
   try {
-    await $fetch(`/api/contests/${props.contestSlug}/judges/${userId}`, { method: 'DELETE' });
+    await ($fetch as Function)(`/api/contests/${props.contestSlug}/judges/${userId}`, { method: 'DELETE' });
     toast.success('Judge removed');
     await refresh();
   } catch {
@@ -53,7 +80,7 @@ const roleLabels: Record<string, string> = {
 
 <template>
   <div class="cpub-contest-judges">
-    <h3 class="cpub-judges-title">Judges</h3>
+    <h3 class="cpub-judges-title">Judge Management</h3>
 
     <div v-if="judges?.length" class="cpub-judges-list">
       <div v-for="judge in judges" :key="judge.id" class="cpub-judge-row">
@@ -74,15 +101,43 @@ const roleLabels: Record<string, string> = {
     <p v-else class="cpub-judges-empty">No judges assigned yet.</p>
 
     <div v-if="isOwner" class="cpub-judges-add">
-      <input v-model="newJudgeId" class="cpub-judges-input" placeholder="User ID" />
-      <select v-model="newJudgeRole" class="cpub-judges-input cpub-judges-select">
-        <option value="lead">Lead</option>
-        <option value="judge">Judge</option>
-        <option value="guest">Guest</option>
-      </select>
-      <button class="cpub-btn cpub-btn-sm" :disabled="adding || !newJudgeId" @click="addJudge">
-        <i class="fa-solid fa-plus"></i> Add
-      </button>
+      <div class="cpub-judges-search-wrapper">
+        <div class="cpub-judges-search-row">
+          <input
+            v-model="searchQuery"
+            class="cpub-judges-input"
+            placeholder="Search by name or username..."
+            @input="handleSearch"
+          />
+          <select v-model="newJudgeRole" class="cpub-judges-input cpub-judges-select">
+            <option value="lead">Lead</option>
+            <option value="judge">Judge</option>
+            <option value="guest">Guest</option>
+          </select>
+        </div>
+        <div v-if="searchResults.length" class="cpub-judges-dropdown">
+          <button
+            v-for="user in searchResults"
+            :key="user.id"
+            class="cpub-judges-dropdown-item"
+            :disabled="adding"
+            @click="addJudge(user.id)"
+          >
+            <span class="cpub-judge-avatar cpub-judge-avatar-sm">
+              <img v-if="user.avatarUrl" :src="user.avatarUrl" :alt="user.displayName || user.username" />
+              <span v-else>{{ (user.displayName || user.username).charAt(0) }}</span>
+            </span>
+            <span class="cpub-judges-dropdown-name">{{ user.displayName || user.username }}</span>
+            <span class="cpub-judges-dropdown-handle">@{{ user.username }}</span>
+          </button>
+        </div>
+        <div v-else-if="searching" class="cpub-judges-dropdown">
+          <span class="cpub-judges-dropdown-empty">Searching...</span>
+        </div>
+        <div v-else-if="searchQuery.length >= 2 && !searchResults.length" class="cpub-judges-dropdown">
+          <span class="cpub-judges-dropdown-empty">No users found</span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -95,6 +150,7 @@ const roleLabels: Record<string, string> = {
 .cpub-judge-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); flex: 1; min-width: 0; }
 .cpub-judge-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--surface2); border: var(--border-width-default) solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; overflow: hidden; flex-shrink: 0; }
 .cpub-judge-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.cpub-judge-avatar-sm { width: 20px; height: 20px; font-size: 8px; }
 .cpub-judge-name { font-size: 12px; font-weight: 600; }
 .cpub-judge-role { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; color: var(--text-faint); }
 .cpub-judge-pending { font-family: var(--font-mono); font-size: 9px; color: var(--yellow, var(--text-faint)); }
@@ -103,8 +159,26 @@ const roleLabels: Record<string, string> = {
 
 .cpub-judges-empty { font-size: 12px; color: var(--text-faint); font-style: italic; margin-bottom: 12px; }
 
-.cpub-judges-add { display: flex; gap: 6px; align-items: center; }
-.cpub-judges-input { font-size: 12px; padding: 4px 8px; border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; }
+.cpub-judges-add { margin-top: 8px; }
+.cpub-judges-search-wrapper { position: relative; }
+.cpub-judges-search-row { display: flex; gap: 6px; }
+.cpub-judges-input { font-size: 12px; padding: 6px 10px; border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; flex: 1; }
 .cpub-judges-input:focus { border-color: var(--accent); }
-.cpub-judges-select { max-width: 100px; }
+.cpub-judges-select { max-width: 100px; flex: none; }
+
+.cpub-judges-dropdown {
+  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
+  background: var(--surface); border: var(--border-width-default) solid var(--border);
+  box-shadow: var(--shadow-md); margin-top: 2px; max-height: 200px; overflow-y: auto;
+}
+.cpub-judges-dropdown-item {
+  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
+  background: none; border: none; width: 100%; text-align: left;
+  cursor: pointer; font-family: inherit; transition: background 0.1s;
+}
+.cpub-judges-dropdown-item:hover { background: var(--surface2); }
+.cpub-judges-dropdown-item:disabled { opacity: 0.5; cursor: default; }
+.cpub-judges-dropdown-name { font-size: 12px; font-weight: 600; color: var(--text); }
+.cpub-judges-dropdown-handle { font-size: 11px; color: var(--text-faint); margin-left: auto; }
+.cpub-judges-dropdown-empty { display: block; padding: 8px 12px; font-size: 11px; color: var(--text-faint); }
 </style>

package/components/hub/HubDiscussions.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
 import type { HubPostViewModel } from '../../types/hub';
+import type { VoteDirection } from '@commonpub/server';
 
 const props = defineProps<{
-  posts: HubPostViewModel[]
+  posts: HubPostViewModel[];
+  hubSlug?: string;
 }>();
 
+const { isAuthenticated } = useAuth();
+const toast = useToast();
+
 function stripHtml(html: string): string {
   return html.replace(/<[^>]*>/g, '').trim();
 }
@@ -15,6 +20,40 @@ const discussionPosts = computed(() => {
     && !p.sharedContent,
   );
 });
+
+// --- Voting ---
+const scoreOverrides = reactive<Map<string, number>>(new Map());
+const userVotes = reactive<Map<string, VoteDirection>>(new Map());
+const voting = reactive<Set<string>>(new Set());
+
+function getScore(post: HubPostViewModel): number {
+  return scoreOverrides.get(post.id) ?? post.voteScore;
+}
+
+function getUserVote(postId: string): VoteDirection | undefined {
+  return userVotes.get(postId);
+}
+
+async function handleVote(postId: string, direction: VoteDirection): Promise<void> {
+  if (!isAuthenticated.value || !props.hubSlug || voting.has(postId)) return;
+  voting.add(postId);
+  try {
+    const result = await ($fetch as Function)(
+      `/api/hubs/${props.hubSlug}/posts/${postId}/vote`,
+      { method: 'POST', body: { direction } },
+    ) as { voted: boolean; direction: VoteDirection | null; voteScore: number };
+    scoreOverrides.set(postId, result.voteScore);
+    if (result.direction) {
+      userVotes.set(postId, result.direction);
+    } else {
+      userVotes.delete(postId);
+    }
+  } catch {
+    toast.error('Vote failed');
+  } finally {
+    voting.delete(postId);
+  }
+}
 </script>
 
 <template>
@@ -29,7 +68,9 @@ const discussionPosts = computed(() => {
           :author="post.author.name"
           :reply-count="post.replyCount"
           :vote-count="post.likeCount"
-          :vote-score="post.voteScore"
+          :vote-score="getScore(post)"
+          @upvote.prevent.stop="handleVote(post.id, 'up')"
+          @downvote.prevent.stop="handleVote(post.id, 'down')"
         />
       </NuxtLink>
       <div v-else>
@@ -38,7 +79,9 @@ const discussionPosts = computed(() => {
           :author="post.author.name"
           :reply-count="post.replyCount"
           :vote-count="post.likeCount"
-          :vote-score="post.voteScore"
+          :vote-score="getScore(post)"
+          @upvote="handleVote(post.id, 'up')"
+          @downvote="handleVote(post.id, 'down')"
         />
       </div>
     </template>

package/components/hub/HubFeed.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import type { HubPostViewModel } from '../../types/hub';
+import type { VoteDirection } from '@commonpub/server';
 
 const props = defineProps<{
   posts: HubPostViewModel[];
-  interactive?: boolean;
-  likedPostIds?: Set<string>;
+  hubSlug?: string;
 }>();
 
-const emit = defineEmits<{ 'post-vote': [postId: string] }>();
+const { isAuthenticated } = useAuth();
+const toast = useToast();
 
-/** Strip HTML tags for plain-text display in feed items */
 function stripHtml(html: string): string {
   return html.replace(/<[^>]*>/g, '').trim();
 }
@@ -28,6 +28,40 @@ const filteredPosts = computed(() => {
   if (feedFilter.value === 'all') return props.posts;
   return props.posts.filter((p) => p.type === feedFilter.value);
 });
+
+// --- Voting state ---
+const votedPosts = reactive<Map<string, VoteDirection>>(new Map());
+const scoreOverrides = reactive<Map<string, number>>(new Map());
+const votingInProgress = reactive<Set<string>>(new Set());
+
+function getScore(post: HubPostViewModel): number {
+  return scoreOverrides.get(post.id) ?? post.voteScore;
+}
+
+function isVoted(postId: string): boolean {
+  return votedPosts.has(postId);
+}
+
+async function handleVote(postId: string): Promise<void> {
+  if (!isAuthenticated.value || !props.hubSlug || votingInProgress.has(postId)) return;
+  votingInProgress.add(postId);
+  try {
+    const result = await ($fetch as Function)(
+      `/api/hubs/${props.hubSlug}/posts/${postId}/vote`,
+      { method: 'POST', body: { direction: 'up' } },
+    ) as { voted: boolean; direction: VoteDirection | null; voteScore: number };
+    scoreOverrides.set(postId, result.voteScore);
+    if (result.direction) {
+      votedPosts.set(postId, result.direction);
+    } else {
+      votedPosts.delete(postId);
+    }
+  } catch {
+    toast.error('Vote failed');
+  } finally {
+    votingInProgress.delete(postId);
+  }
+}
 </script>
 
 <template>
@@ -105,6 +139,26 @@ const filteredPosts = computed(() => {
         </div>
       </a>
 
+      <!-- Poll posts -->
+      <div v-else-if="post.type === 'poll' && hubSlug" class="cpub-feed-poll-wrapper">
+        <FeedItem
+          type="discussion"
+          :title="stripHtml(post.content || '').slice(0, 80) || 'Poll'"
+          :author="post.author.name"
+          :author-avatar="post.author.avatarUrl ?? undefined"
+          :author-handle="post.author.handle ?? undefined"
+          :body="post.content || ''"
+          :created-at="new Date(post.createdAt)"
+          :reply-count="post.replyCount"
+          :vote-count="getScore(post)"
+          :pinned="post.isPinned"
+          :locked="post.isLocked"
+        />
+        <div class="cpub-feed-poll-body">
+          <PollDisplay :hub-slug="hubSlug" :post-id="post.id" />
+        </div>
+      </div>
+
       <!-- Regular posts — linked or static -->
       <template v-else>
         <NuxtLink v-if="post.linkTo" :to="post.linkTo" class="cpub-feed-link">
@@ -117,12 +171,12 @@ const filteredPosts = computed(() => {
             :body="post.content || ''"
             :created-at="new Date(post.createdAt)"
             :reply-count="post.replyCount"
-            :vote-count="post.likeCount"
+            :vote-count="getScore(post)"
             :pinned="post.isPinned"
             :locked="post.isLocked"
-            :interactive="interactive"
-            :voted="likedPostIds?.has(post.id)"
-            @vote="emit('post-vote', post.id)"
+            :interactive="!!hubSlug && isAuthenticated"
+            :voted="isVoted(post.id)"
+            @vote="handleVote(post.id)"
           />
         </NuxtLink>
         <div v-else>
@@ -135,12 +189,12 @@ const filteredPosts = computed(() => {
             :body="post.content || ''"
             :created-at="new Date(post.createdAt)"
             :reply-count="post.replyCount"
-            :vote-count="post.likeCount"
+            :vote-count="getScore(post)"
             :pinned="post.isPinned"
             :locked="post.isLocked"
-            :interactive="interactive"
-            :voted="likedPostIds?.has(post.id)"
-            @vote="emit('post-vote', post.id)"
+            :interactive="!!hubSlug && isAuthenticated"
+            :voted="isVoted(post.id)"
+            @vote="handleVote(post.id)"
           />
         </div>
       </template>
@@ -198,6 +252,10 @@ const filteredPosts = computed(() => {
   display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
 }
 
+/* Poll wrapper */
+.cpub-feed-poll-wrapper { border: var(--border-width-default) solid var(--border); background: var(--surface); }
+.cpub-feed-poll-body { padding: 0 16px 16px; }
+
 @media (max-width: 640px) {
   .cpub-share-card-thumb { width: 80px; }
 }

package/composables/useFeatures.ts

@@ -20,12 +20,18 @@ export interface FeatureFlags {
 
 let hydrated = false;
 
+const DEFAULT_FLAGS: FeatureFlags = {
+  content: true, social: true, hubs: true, docs: true, video: true,
+  contests: false, events: false, learning: true, explainers: true,
+  editorial: true, federation: false, admin: false, emailNotifications: false,
+};
+
 export function useFeatures() {
   const config = useRuntimeConfig();
-  const buildFlags = config.public.features as unknown as FeatureFlags;
+  const buildFlags = (config.public.features as unknown as FeatureFlags) ?? DEFAULT_FLAGS;
 
   // Shared reactive state — initialized from build-time config
-  const flags = useState<FeatureFlags>('feature-flags', () => ({ ...buildFlags }));
+  const flags = useState<FeatureFlags>('feature-flags', () => ({ ...DEFAULT_FLAGS, ...buildFlags }));
 
   // On client, fetch dynamic features once to pick up DB overrides
   if (import.meta.client && !hydrated) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.14.1",
+  "version": "0.15.1",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -30,7 +30,7 @@
     "@aws-sdk/client-s3": "^3.1010.0",
     "@commonpub/explainer": "^0.7.11",
     "@commonpub/schema": "^0.13.0",
-    "@commonpub/server": "^2.41.0",
+    "@commonpub/server": "^2.42.0",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bold": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.0",
@@ -54,11 +54,11 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.5.1",
+    "@commonpub/docs": "0.6.2",
+    "@commonpub/config": "0.10.0",
     "@commonpub/editor": "0.7.9",
     "@commonpub/learning": "0.5.0",
     "@commonpub/protocol": "0.9.9",
-    "@commonpub/docs": "0.6.2",
-    "@commonpub/config": "0.10.0",
     "@commonpub/ui": "0.8.5"
   },
   "devDependencies": {

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

@@ -313,7 +313,7 @@ async function onRefreshGallery(): Promise<void> {
     <!-- Main content area -->
 
     <!-- Feed tab -->
-    <HubFeed v-if="activeTab === 'feed'" :posts="postsVM">
+    <HubFeed v-if="activeTab === 'feed'" :posts="postsVM" :hub-slug="slug">
       <template v-if="isAuthenticated" #compose>
         <div class="cpub-compose-bar">
           <div class="cpub-compose-types">
@@ -348,7 +348,7 @@ async function onRefreshGallery(): Promise<void> {
     </HubFeed>
 
     <!-- Discussions tab -->
-    <HubDiscussions v-else-if="activeTab === 'discussions'" :posts="postsVM">
+    <HubDiscussions v-else-if="activeTab === 'discussions'" :posts="postsVM" :hub-slug="slug">
       <template v-if="isAuthenticated" #compose>
         <div class="cpub-compose-bar" style="margin-bottom: 16px">
           <div class="cpub-compose-row">