@commonpub/layer 0.1.0

package/components/hub/HubFeed.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import type { HubPostViewModel } from '../../types/hub';
+
+const props = defineProps<{
+  posts: HubPostViewModel[];
+  interactive?: boolean;
+  likedPostIds?: Set<string>;
+}>();
+
+const emit = defineEmits<{ 'post-vote': [postId: string] }>();
+
+const feedFilter = ref('all');
+
+const feedFilters = [
+  { value: 'all', label: 'All Posts' },
+  { value: 'question', label: 'Questions' },
+  { value: 'discussion', label: 'Discussions' },
+  { value: 'showcase', label: 'Showcase' },
+  { value: 'announcement', label: 'Announcements' },
+];
+
+const filteredPosts = computed(() => {
+  if (feedFilter.value === 'all') return props.posts;
+  return props.posts.filter((p) => p.type === feedFilter.value);
+});
+</script>
+
+<template>
+  <!-- Pinned announcements -->
+  <AnnouncementBand
+    v-for="post in filteredPosts.filter(p => p.isPinned && p.type === 'announcement')"
+    :key="`ann-${post.id}`"
+    :title="post.content?.slice(0, 80) || 'Announcement'"
+    :body="post.content || ''"
+    :author="post.author.name"
+    :created-at="new Date(post.createdAt)"
+    :pinned="true"
+    style="margin-bottom: 12px"
+  />
+
+  <!-- Compose slot (page provides compose bar for local, nothing for federated) -->
+  <slot name="compose" />
+
+  <!-- Feed filter -->
+  <div class="cpub-tag-row" style="margin-bottom: 14px">
+    <FilterChip
+      v-for="f in feedFilters"
+      :key="f.value"
+      :label="f.label"
+      :active="feedFilter === f.value"
+      @toggle="feedFilter = f.value"
+    />
+  </div>
+
+  <!-- Feed posts -->
+  <div v-if="filteredPosts.length" class="cpub-feed-list">
+    <template v-for="post in filteredPosts" :key="post.id">
+      <!-- Share posts -->
+      <NuxtLink v-if="post.sharedContent?.slug && !post.sharedContent?.url" :to="`/${post.sharedContent.type}/${post.sharedContent.slug}`" class="cpub-share-card">
+        <div class="cpub-share-card-context">
+          <i class="fa-solid fa-share-nodes"></i>
+          {{ post.author.name }} shared a {{ post.sharedContent.type }}
+          &middot; {{ new Date(post.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
+        </div>
+        <div class="cpub-share-card-embed">
+          <div v-if="post.sharedContent.coverImageUrl" class="cpub-share-card-thumb">
+            <img :src="post.sharedContent.coverImageUrl" :alt="post.sharedContent.title" />
+          </div>
+          <div v-else class="cpub-share-card-thumb cpub-share-card-thumb-fallback">
+            <i :class="post.sharedContent.type === 'project' ? 'fa-solid fa-microchip' : 'fa-solid fa-file-lines'"></i>
+          </div>
+          <div class="cpub-share-card-body">
+            <span class="cpub-share-card-type">{{ post.sharedContent.type }}</span>
+            <h3 class="cpub-share-card-title">{{ post.sharedContent.title }}</h3>
+            <p v-if="post.sharedContent.description" class="cpub-share-card-desc">{{ post.sharedContent.description }}</p>
+          </div>
+        </div>
+      </NuxtLink>
+      <a v-else-if="post.sharedContent?.url" :href="post.sharedContent.url" target="_blank" rel="noopener noreferrer" class="cpub-share-card">
+        <div class="cpub-share-card-context">
+          <i class="fa-solid fa-share-nodes"></i>
+          {{ post.author.name }} shared a {{ post.sharedContent.type }}
+          <span v-if="post.sharedContent.url" class="cpub-share-card-origin">
+            <i class="fa-solid fa-globe"></i> {{ post.sharedContent.url.replace(/^https?:\/\//, '').split('/')[0] }}
+          </span>
+          &middot; {{ new Date(post.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
+        </div>
+        <div class="cpub-share-card-embed">
+          <div v-if="post.sharedContent.coverImageUrl" class="cpub-share-card-thumb">
+            <img :src="post.sharedContent.coverImageUrl" :alt="post.sharedContent.title" />
+          </div>
+          <div v-else class="cpub-share-card-thumb cpub-share-card-thumb-fallback">
+            <i :class="post.sharedContent.type === 'project' ? 'fa-solid fa-microchip' : 'fa-solid fa-file-lines'"></i>
+          </div>
+          <div class="cpub-share-card-body">
+            <span class="cpub-share-card-type">{{ post.sharedContent.type }}</span>
+            <h3 class="cpub-share-card-title">{{ post.sharedContent.title }}</h3>
+            <p v-if="post.sharedContent.description" class="cpub-share-card-desc">{{ post.sharedContent.description }}</p>
+          </div>
+        </div>
+      </a>
+
+      <!-- Regular posts — linked or static -->
+      <template v-else>
+        <NuxtLink v-if="post.linkTo" :to="post.linkTo" class="cpub-feed-link">
+          <FeedItem
+            :type="(post.type as 'discussion' | 'question' | 'showcase' | 'announcement') || 'discussion'"
+            :title="post.content?.slice(0, 80) || ''"
+            :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="post.likeCount"
+            :pinned="post.isPinned"
+            :locked="post.isLocked"
+            :interactive="interactive"
+            :voted="likedPostIds?.has(post.id)"
+            @vote="emit('post-vote', post.id)"
+          />
+        </NuxtLink>
+        <div v-else>
+          <FeedItem
+            :type="(post.type as 'discussion' | 'question' | 'showcase' | 'announcement') || 'discussion'"
+            :title="post.content?.slice(0, 80) || ''"
+            :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="post.likeCount"
+            :pinned="post.isPinned"
+            :locked="post.isLocked"
+            :interactive="interactive"
+            :voted="likedPostIds?.has(post.id)"
+            @vote="emit('post-vote', post.id)"
+          />
+        </div>
+      </template>
+    </template>
+  </div>
+  <div v-else class="cpub-empty-state">
+    <div class="cpub-empty-state-icon"><i class="fa-solid fa-message"></i></div>
+    <p class="cpub-empty-state-title">No posts yet</p>
+    <p class="cpub-empty-state-desc">Be the first to start a discussion!</p>
+  </div>
+</template>
+
+<style scoped>
+.cpub-feed-list { display: flex; flex-direction: column; gap: 12px; }
+.cpub-feed-link { text-decoration: none; color: inherit; display: block; }
+
+/* Share card */
+.cpub-share-card { display: block; text-decoration: none; color: inherit; }
+.cpub-share-card-context {
+  font-size: 11px; color: var(--text-faint); padding: 0 0 6px;
+  display: flex; align-items: center; gap: 5px;
+}
+.cpub-share-card-context i { font-size: 10px; }
+.cpub-share-card-origin {
+  display: inline-flex; align-items: center; gap: 3px;
+  color: var(--accent); font-size: 10px;
+}
+.cpub-share-card-origin i { font-size: 9px; }
+.cpub-share-card-embed {
+  display: flex; gap: 0;
+  background: var(--surface); border: var(--border-width-default) solid var(--border);
+  overflow: hidden; transition: border-color 0.15s;
+}
+.cpub-share-card:hover .cpub-share-card-embed { border-color: var(--accent-border); }
+.cpub-share-card-thumb {
+  width: 120px; min-height: 80px; flex-shrink: 0; overflow: hidden;
+  background: var(--surface2);
+}
+.cpub-share-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.cpub-share-card-thumb-fallback {
+  display: flex; align-items: center; justify-content: center;
+  color: var(--text-faint); font-size: 24px;
+}
+.cpub-share-card-body { flex: 1; min-width: 0; padding: 10px 14px; }
+.cpub-share-card-type {
+  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--accent); font-weight: 600;
+}
+.cpub-share-card-title {
+  font-size: 14px; font-weight: 600; color: var(--text); margin-top: 2px;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+.cpub-share-card-desc {
+  font-size: 12px; color: var(--text-dim); margin-top: 4px;
+  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
+}
+
+@media (max-width: 640px) {
+  .cpub-share-card-thumb { width: 80px; }
+}
+</style>

package/components/hub/HubHero.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import type { HubViewModel } from '../../types/hub';
+
+const props = defineProps<{
+  hub: HubViewModel
+  galleryTotal?: number
+}>();
+
+const hubType = computed(() => props.hub.hubType ?? 'community');
+const isProductHub = computed(() => hubType.value === 'product');
+const isCompanyHub = computed(() => hubType.value === 'company');
+</script>
+
+<template>
+  <div class="cpub-hub-hero">
+    <!-- Banner overlay slot (e.g., origin banner for federated hubs) -->
+    <slot name="banner-overlay" />
+
+    <div class="cpub-hub-banner" :style="hub.bannerUrl ? { backgroundImage: `url(${hub.bannerUrl})`, backgroundSize: 'cover', backgroundPosition: 'center' } : {}">
+      <template v-if="!hub.bannerUrl">
+        <div class="cpub-hub-banner-pattern"></div>
+        <div class="cpub-hub-banner-dots"></div>
+      </template>
+    </div>
+    <div class="cpub-hub-meta-bar">
+      <div class="cpub-hub-meta-inner">
+        <div class="cpub-hub-icon">
+          <img v-if="hub.iconUrl" :src="hub.iconUrl" :alt="hub.name ?? ''" />
+          <i v-else :class="isCompanyHub ? 'fa-solid fa-building' : isProductHub ? 'fa-solid fa-microchip' : 'fa-solid fa-users'" />
+        </div>
+        <div class="cpub-hub-info">
+          <div class="cpub-hub-top-row">
+            <div>
+              <h1 class="cpub-hub-name">{{ hub.name }}</h1>
+              <p v-if="hub.description" class="cpub-hub-desc">{{ hub.description }}</p>
+              <div class="cpub-hub-stats">
+                <span class="cpub-hub-stat"><i class="fa-solid fa-users"></i> <span class="cpub-hub-stat-val">{{ hub.memberCount ?? 0 }}</span> Members</span>
+                <span class="cpub-hub-stat"><i class="fa-solid fa-message"></i> <span class="cpub-hub-stat-val">{{ hub.postCount ?? 0 }}</span> Posts</span>
+                <span v-if="galleryTotal" class="cpub-hub-stat"><i class="fa-solid fa-folder-open"></i> <span class="cpub-hub-stat-val">{{ galleryTotal }}</span> Projects</span>
+                <span v-if="hub.foundedLabel" class="cpub-hub-stat"><i class="fa-solid fa-calendar"></i> Founded <span class="cpub-hub-stat-val">{{ hub.foundedLabel }}</span></span>
+              </div>
+              <div class="cpub-hub-actions">
+                <slot name="actions" />
+              </div>
+            </div>
+            <div class="cpub-hub-badges">
+              <slot name="badges" />
+            </div>
+          </div>
+          <div v-if="hub.categories?.length" class="cpub-hub-tags">
+            <div class="cpub-tag-row">
+              <span v-for="cat in hub.categories" :key="cat" class="cpub-tag">{{ cat }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-hub-hero { position: relative; overflow: hidden; }
+
+.cpub-hub-banner {
+  height: 180px;
+  background: linear-gradient(135deg, var(--accent) 0%, #006b6b 50%, var(--accent-border) 100%);
+  position: relative;
+  overflow: hidden;
+  border-bottom: 1px solid var(--border);
+}
+
+.cpub-hub-banner-pattern {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+.cpub-hub-banner-dots {
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+.cpub-hub-meta-bar {
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding: 20px 0;
+}
+
+.cpub-hub-meta-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 32px;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.cpub-hub-icon {
+  width: 72px;
+  height: 72px;
+  background: var(--surface);
+  border: 3px solid var(--surface);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  flex-shrink: 0;
+  margin-top: -36px;
+  position: relative;
+  z-index: 1;
+  box-shadow: var(--shadow-md);
+  color: var(--accent);
+  overflow: hidden;
+}
+.cpub-hub-icon img { width: 100%; height: 100%; object-fit: cover; }
+
+.cpub-hub-info { flex: 1; min-width: 0; }
+
+.cpub-hub-top-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.cpub-hub-name {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin-bottom: 4px;
+}
+
+.cpub-hub-desc {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.5;
+  max-width: 600px;
+  margin-bottom: 10px;
+}
+
+.cpub-hub-stats {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  font-size: 0.8125rem;
+  color: var(--text-dim);
+  margin-bottom: 12px;
+}
+
+.cpub-hub-stat { display: flex; align-items: center; gap: 5px; }
+.cpub-hub-stat-val { color: var(--text); font-weight: 600; }
+
+.cpub-hub-actions { display: flex; align-items: center; gap: 8px; }
+
+.cpub-hub-badges {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.cpub-hub-tags { margin-top: 10px; }
+
+@media (max-width: 1024px) {
+  .cpub-hub-top-row { flex-direction: column; }
+}
+
+@media (max-width: 640px) {
+  .cpub-hub-banner { height: 120px; }
+  .cpub-hub-meta-inner { flex-direction: column; padding: 0 16px; }
+  .cpub-hub-icon { margin-top: -24px; width: 56px; height: 56px; font-size: 22px; }
+  .cpub-hub-name { font-size: 1.25rem; }
+  .cpub-hub-stats { flex-wrap: wrap; gap: 10px 16px; font-size: 0.75rem; }
+  .cpub-hub-actions { flex-wrap: wrap; }
+  .cpub-hub-badges { flex-wrap: wrap; }
+}
+</style>

package/components/hub/HubLayout.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { HubTabDef } from '../../types/hub';
+
+defineProps<{
+  tabs: HubTabDef[]
+}>();
+
+const activeTab = defineModel<string>('activeTab', { required: true });
+</script>
+
+<template>
+  <div class="cpub-hub-page">
+    <slot name="hero" />
+
+    <!-- Tabs -->
+    <div class="cpub-hub-tabs">
+      <div class="cpub-tabs-inner">
+        <button
+          v-for="tab in tabs"
+          :key="tab.value"
+          class="cpub-tab-btn"
+          :class="{ active: activeTab === tab.value }"
+          @click="activeTab = tab.value"
+        >
+          <i :class="tab.icon" style="font-size: 10px"></i>
+          {{ tab.label }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="cpub-hub-main">
+      <div class="cpub-hub-layout">
+        <main>
+          <slot />
+        </main>
+        <aside>
+          <slot name="sidebar" />
+        </aside>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-hub-tabs {
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 48px;
+  z-index: 90;
+}
+
+.cpub-tabs-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 32px;
+  display: flex;
+  gap: 4px;
+}
+
+.cpub-tab-btn {
+  font-size: 0.8125rem;
+  color: var(--text-dim);
+  padding: 12px 16px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-bottom: var(--border-width-default) solid transparent;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  position: relative;
+  top: 1px;
+  transition: color 0.15s;
+}
+
+.cpub-tab-btn:hover { color: var(--text); }
+.cpub-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent-border); font-weight: 600; }
+
+.cpub-hub-main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px 32px;
+}
+
+.cpub-hub-layout {
+  display: grid;
+  grid-template-columns: 1fr 300px;
+  gap: 24px;
+  align-items: start;
+}
+
+@media (max-width: 1024px) {
+  .cpub-hub-layout { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 640px) {
+  .cpub-hub-main { padding: 16px; }
+  .cpub-tabs-inner { padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .cpub-tab-btn { white-space: nowrap; flex-shrink: 0; }
+}
+</style>

package/components/hub/HubMembers.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { HubMemberViewModel } from '../../types/hub';
+
+defineProps<{
+  members: HubMemberViewModel[]
+}>();
+</script>
+
+<template>
+  <div v-if="members?.length" class="cpub-members-grid">
+    <MemberCard
+      v-for="member in members"
+      :key="member.username"
+      :username="member.username"
+      :display-name="member.name"
+      :role="(member.role as 'owner' | 'moderator' | 'member') || 'member'"
+      :joined-at="new Date(member.joinedAt)"
+    />
+  </div>
+  <div v-else class="cpub-empty-state">
+    <div class="cpub-empty-state-icon"><i class="fa-solid fa-users"></i></div>
+    <p class="cpub-empty-state-title">No members yet</p>
+  </div>
+</template>
+
+<style scoped>
+.cpub-members-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+@media (max-width: 1024px) {
+  .cpub-members-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 400px) {
+  .cpub-members-grid { grid-template-columns: 1fr; }
+}
+</style>

package/components/hub/HubProducts.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+defineProps<{
+  products: { items: Array<{ id: string; name: string; description: string | null; imageUrl: string | null; category: string | null; status: string }>; total: number } | null;
+}>();
+</script>
+
+<template>
+  <div v-if="products?.items?.length" class="cpub-products-grid">
+    <div v-for="product in products.items" :key="product.id" class="cpub-product-card">
+      <div class="cpub-product-card-icon">
+        <img v-if="product.imageUrl" :src="product.imageUrl" :alt="product.name" />
+        <i v-else class="fa-solid fa-microchip"></i>
+      </div>
+      <div class="cpub-product-card-body">
+        <h4 class="cpub-product-card-name">{{ product.name }}</h4>
+        <p class="cpub-product-card-desc">{{ product.description }}</p>
+        <div class="cpub-product-card-meta">
+          <span v-if="product.category" class="cpub-tag">{{ product.category }}</span>
+          <span v-if="product.status === 'discontinued'" class="cpub-tag cpub-tag-red">Discontinued</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else class="cpub-empty-state">
+    <div class="cpub-empty-state-icon"><i class="fa-solid fa-microchip"></i></div>
+    <p class="cpub-empty-state-title">No products listed yet</p>
+  </div>
+</template>
+
+<style scoped>
+.cpub-products-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.cpub-product-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  cursor: pointer;
+  transition: box-shadow 0.15s, transform 0.15s;
+}
+
+.cpub-product-card:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-product-card-icon {
+  width: 48px;
+  height: 48px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  color: var(--text-faint);
+  flex-shrink: 0;
+}
+.cpub-product-card-icon img { width: 100%; height: 100%; object-fit: cover; }
+
+.cpub-product-card-body { flex: 1; min-width: 0; }
+
+.cpub-product-card-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
+
+.cpub-product-card-desc {
+  font-size: 11px;
+  color: var(--text-dim);
+  line-height: 1.5;
+  margin-bottom: 8px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.cpub-product-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
+
+@media (max-width: 1024px) {
+  .cpub-products-grid { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 640px) {
+  .cpub-products-grid { grid-template-columns: 1fr; }
+}
+</style>