@commonpub/layer 0.3.33 → 0.3.34

package/components/SearchSidebar.vue

@@ -75,7 +75,7 @@ const { hubs: hubsEnabled } = useFeatures();
             <i class="fa-solid fa-users"></i>
           </div>
           <div class="cpub-related-hub-info">
-            <NuxtLink :to="`/hubs/${hub.slug}`" class="cpub-related-hub-name">{{ hub.name }}</NuxtLink>
+            <NuxtLink :to="hub.source === 'federated' ? `/federated-hubs/${hub.id}` : `/hubs/${hub.slug}`" class="cpub-related-hub-name">{{ hub.name }}</NuxtLink>
             <div class="cpub-related-hub-members">{{ hub.memberCount ?? 0 }} members</div>
           </div>
           <button class="cpub-btn-join-sm">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.3.33",
+  "version": "0.3.34",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -44,13 +44,13 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/docs": "0.5.2",
-    "@commonpub/learning": "0.5.0",
-    "@commonpub/config": "0.7.1",
     "@commonpub/auth": "0.5.0",
-    "@commonpub/server": "2.19.0",
-    "@commonpub/protocol": "0.9.5",
+    "@commonpub/config": "0.7.1",
     "@commonpub/editor": "0.5.0",
+    "@commonpub/learning": "0.5.0",
+    "@commonpub/docs": "0.5.2",
+    "@commonpub/protocol": "0.9.5",
+    "@commonpub/server": "2.19.0",
     "@commonpub/schema": "0.8.13",
     "@commonpub/ui": "0.7.1"
   },

package/pages/search.vue

@@ -181,10 +181,15 @@ function setCategory(label: string): void {
   page.value = 1;
 }
 
+const relatedHubsQuery = computed(() => ({
+  search: query.value || undefined,
+  limit: 3,
+}));
 const { data: relatedCommunities } = await useFetch('/api/hubs', {
-  query: { limit: 3 },
+  query: relatedHubsQuery,
   default: () => ({ items: [] }),
   immediate: hubsEnabled.value,
+  watch: [relatedHubsQuery],
 });
 </script>
 
@@ -317,7 +322,56 @@ const { data: relatedCommunities } = await useFetch('/api/hubs', {
         </template>
 
         <template v-else-if="activeType !== 'fediverse' && results?.items?.length">
+          <!-- COMMUNITY RESULTS -->
+          <div v-if="activeType === 'community'" class="cpub-results-grid">
+            <NuxtLink
+              v-for="hub in results.items"
+              :key="hub.id"
+              :to="hub.source === 'federated' ? `/federated-hubs/${hub.id}` : `/hubs/${hub.slug}`"
+              class="cpub-search-hub-card"
+            >
+              <div class="cpub-search-hub-icon">
+                <img v-if="hub.iconUrl" :src="hub.iconUrl" :alt="hub.name" class="cpub-search-hub-img" />
+                <i v-else class="fa-solid fa-users"></i>
+              </div>
+              <div class="cpub-search-hub-body">
+                <h3 class="cpub-search-hub-name">{{ hub.name }}</h3>
+                <p v-if="hub.description" class="cpub-search-hub-desc">{{ hub.description }}</p>
+                <div class="cpub-search-hub-meta">
+                  <span><i class="fa-solid fa-users"></i> {{ hub.memberCount ?? 0 }} members</span>
+                  <span><i class="fa-solid fa-message"></i> {{ hub.postCount ?? 0 }} posts</span>
+                  <span v-if="hub.source === 'federated'" class="cpub-search-hub-fed"><i class="fa-solid fa-globe"></i> Federated</span>
+                </div>
+              </div>
+            </NuxtLink>
+          </div>
+
+          <!-- PEOPLE RESULTS -->
+          <div v-else-if="activeType === 'people'" class="cpub-results-grid">
+            <NuxtLink
+              v-for="user in results.items"
+              :key="user.id"
+              :to="`/u/${user.username}`"
+              class="cpub-search-person-card"
+            >
+              <div class="cpub-search-person-avatar">
+                <img v-if="user.avatarUrl" :src="user.avatarUrl" :alt="user.displayName || user.username" />
+                <span v-else>{{ (user.displayName || user.username || '?').charAt(0).toUpperCase() }}</span>
+              </div>
+              <div class="cpub-search-person-body">
+                <h3 class="cpub-search-person-name">{{ user.displayName || user.username }}</h3>
+                <div class="cpub-search-person-handle">@{{ user.username }}</div>
+                <p v-if="user.headline" class="cpub-search-person-headline">{{ user.headline }}</p>
+                <div class="cpub-search-person-meta">
+                  <span><i class="fa-solid fa-user-group"></i> {{ user.followerCount ?? 0 }} followers</span>
+                </div>
+              </div>
+            </NuxtLink>
+          </div>
+
+          <!-- CONTENT RESULTS (default) -->
           <div
+            v-else
             class="cpub-results-grid"
             :class="{ 'list-view': viewMode === 'list' }"
           >
@@ -696,4 +750,124 @@ const { data: relatedCommunities } = await useFetch('/api/hubs', {
     grid-template-columns: 1fr;
   }
 }
+
+/* ── COMMUNITY RESULT CARDS ── */
+.cpub-search-hub-card {
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  text-decoration: none;
+  color: inherit;
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+.cpub-search-hub-card:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-md);
+}
+.cpub-search-hub-icon {
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface-2);
+  color: var(--text-dim);
+  overflow: hidden;
+}
+.cpub-search-hub-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.cpub-search-hub-body {
+  flex: 1;
+  min-width: 0;
+}
+.cpub-search-hub-name {
+  font-size: var(--text-md);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--space-1);
+}
+.cpub-search-hub-desc {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  margin-bottom: var(--space-2);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.cpub-search-hub-meta {
+  display: flex;
+  gap: var(--space-3);
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}
+.cpub-search-hub-fed {
+  color: var(--accent);
+}
+
+/* ── PEOPLE RESULT CARDS ── */
+.cpub-search-person-card {
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  text-decoration: none;
+  color: inherit;
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+.cpub-search-person-card:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-md);
+}
+.cpub-search-person-avatar {
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface-2);
+  color: var(--text-dim);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--text-lg);
+  overflow: hidden;
+}
+.cpub-search-person-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.cpub-search-person-body {
+  flex: 1;
+  min-width: 0;
+}
+.cpub-search-person-name {
+  font-size: var(--text-md);
+  font-weight: var(--font-weight-semibold);
+}
+.cpub-search-person-handle {
+  font-size: var(--text-sm);
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  margin-bottom: var(--space-1);
+}
+.cpub-search-person-headline {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  margin-bottom: var(--space-2);
+}
+.cpub-search-person-meta {
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}
 </style>

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

@@ -1,5 +1,7 @@
-import { searchContent } from '@commonpub/server';
-import type { ContentSearchResult, ContentSearchOptions } from '@commonpub/server';
+import { searchContent, listHubs, escapeLike } from '@commonpub/server';
+import type { ContentSearchOptions } from '@commonpub/server';
+import { users, follows, hubs } from '@commonpub/schema';
+import { sql, desc, ilike, or, and, isNull, eq } from 'drizzle-orm';
 import { z } from 'zod';
 
 const searchQuerySchema = z.object({
@@ -15,8 +17,9 @@ const searchQuerySchema = z.object({
   offset: z.coerce.number().int().min(0).optional(),
 });
 
-export default defineEventHandler(async (event): Promise<{ items: ContentSearchResult[]; total: number }> => {
+export default defineEventHandler(async (event): Promise<{ items: unknown[]; total: number }> => {
   const db = useDB();
+  const config = useConfig();
   const params = parseQueryParams(event, searchQuerySchema);
   const q = params.q?.trim();
 
@@ -24,7 +27,81 @@ export default defineEventHandler(async (event): Promise<{ items: ContentSearchR
     return { items: [], total: 0 };
   }
 
-  // Get Meilisearch client if configured
+  const limit = Math.min(params.limit ?? 24, 100);
+  const offset = params.offset ?? 0;
+
+  // --- Community search ---
+  if (params.type === 'community') {
+    const includeFederated = !!config.features.seamlessFederation;
+    const result = await listHubs(db, { search: q, limit, offset }, { includeFederated });
+    return {
+      items: result.items.map((hub) => ({
+        _resultType: 'community',
+        id: hub.id,
+        name: hub.name,
+        slug: hub.slug,
+        description: hub.description,
+        iconUrl: hub.iconUrl,
+        bannerUrl: hub.bannerUrl,
+        memberCount: hub.memberCount,
+        postCount: hub.postCount,
+        source: (hub as Record<string, unknown>).source ?? 'local',
+      })),
+      total: result.total,
+    };
+  }
+
+  // --- People search ---
+  if (params.type === 'people') {
+    const term = `%${escapeLike(q)}%`;
+    const where = and(
+      isNull(users.deletedAt),
+      or(ilike(users.username, term), ilike(users.displayName, term)),
+    );
+
+    const [rows, countResult] = await Promise.all([
+      db.select({
+        id: users.id,
+        username: users.username,
+        displayName: users.displayName,
+        headline: users.headline,
+        avatarUrl: users.avatarUrl,
+      })
+        .from(users)
+        .where(where)
+        .orderBy(desc(users.createdAt))
+        .limit(limit)
+        .offset(offset),
+      db.select({ count: sql<number>`count(*)::int` }).from(users).where(where),
+    ]);
+
+    // Follower counts
+    const userIds = rows.map((r) => r.id);
+    const followerCounts: Record<string, number> = {};
+    if (userIds.length > 0) {
+      const counts = await db
+        .select({ followingId: follows.followingId, count: sql<number>`count(*)::int` })
+        .from(follows)
+        .where(sql`${follows.followingId} = ANY(ARRAY[${sql.join(userIds.map((id) => sql`${id}::uuid`), sql`, `)}])`)
+        .groupBy(follows.followingId);
+      for (const c of counts) followerCounts[c.followingId] = c.count;
+    }
+
+    return {
+      items: rows.map((r) => ({
+        _resultType: 'person',
+        id: r.id,
+        username: r.username,
+        displayName: r.displayName,
+        headline: r.headline,
+        avatarUrl: r.avatarUrl,
+        followerCount: followerCounts[r.id] ?? 0,
+      })),
+      total: countResult[0]?.count ?? rows.length,
+    };
+  }
+
+  // --- Content search (default) ---
   let meiliClient = null;
   try {
     const meiliUrl = process.env.MEILI_URL;
@@ -33,9 +110,7 @@ export default defineEventHandler(async (event): Promise<{ items: ContentSearchR
       const { MeiliSearch } = await import('meilisearch');
       meiliClient = new MeiliSearch({ host: meiliUrl, apiKey: meiliKey });
     }
-  } catch {
-    // Meilisearch not available — will use Postgres fallback
-  }
+  } catch { /* Meilisearch not available */ }
 
   const opts: ContentSearchOptions = {
     query: q,
@@ -46,9 +121,13 @@ export default defineEventHandler(async (event): Promise<{ items: ContentSearchR
     dateFrom: params.dateFrom,
     dateTo: params.dateTo,
     sort: (params.sort as ContentSearchOptions['sort']) ?? 'relevance',
-    limit: params.limit,
-    offset: params.offset,
+    limit,
+    offset,
   };
 
-  return searchContent(db, opts, meiliClient);
+  const result = await searchContent(db, opts, meiliClient);
+  return {
+    items: result.items.map((item) => ({ ...item, _resultType: 'content' })),
+    total: result.total,
+  };
 });