@commonpub/layer 0.2.0 → 0.3.1

package/composables/useSiteName.ts

@@ -1,4 +1,10 @@
-/** Returns the configured site name from runtime config (defaults to 'CommonPub'). */
+/** Returns the configured site name from runtime config (defaults to 'CommonPub').
+ *  Safe to call inside lazy SEO resolvers — falls back to 'CommonPub' if
+ *  the Nuxt instance is unavailable (e.g. during SSR head rendering). */
 export function useSiteName(): string {
-  return (useRuntimeConfig().public.siteName as string) || 'CommonPub';
+  try {
+    return (useRuntimeConfig().public.siteName as string) || 'CommonPub';
+  } catch {
+    return 'CommonPub';
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -45,15 +45,15 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.5.0",
     "@commonpub/config": "0.7.0",
-    "@commonpub/docs": "0.5.0",
     "@commonpub/editor": "0.5.0",
+    "@commonpub/auth": "0.5.0",
+    "@commonpub/docs": "0.5.0",
     "@commonpub/learning": "0.5.0",
+    "@commonpub/ui": "0.7.1",
     "@commonpub/protocol": "0.9.4",
     "@commonpub/schema": "0.8.8",
-    "@commonpub/server": "2.7.0",
-    "@commonpub/ui": "0.7.1"
+    "@commonpub/server": "2.7.0"
   },
   "scripts": {}
 }

package/pages/[type]/index.vue

@@ -3,10 +3,11 @@ import type { Serialized, ContentListItem, PaginatedResponse } from '@commonpub/
 
 const route = useRoute();
 const contentType = computed(() => route.params.type as string);
+const siteName = useSiteName();
 
 useSeoMeta({
-  title: () => `${contentType.value} — ${useSiteName()}`,
-  description: () => `Browse ${contentType.value} on CommonPub.`,
+  title: () => `${contentType.value} — ${siteName}`,
+  description: () => `Browse ${contentType.value} on ${siteName}.`,
 });
 
 const sortBy = ref('recent');

package/pages/federated-hubs/[id]/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FederatedHubListItem, FederatedHubPostItem } from '@commonpub/server';
-import type { HubViewModel, HubPostViewModel, HubTabDef } from '../../../types/hub';
+import type { HubViewModel, HubPostViewModel, HubMemberViewModel, HubTabDef } from '../../../types/hub';
 
 const route = useRoute();
 const id = route.params.id as string;
@@ -11,7 +11,7 @@ const { data: posts, refresh: refreshPosts } = useLazyFetch<{ items: FederatedHu
 });
 
 useSeoMeta({
-  title: () => hub.value ? `${hub.value.name} (${hub.value.originDomain})` : 'Federated Hub',
+  title: () => hub.value ? `${hub.value.name} — ${useSiteName()}` : 'Federated Hub',
   description: () => hub.value?.description || '',
 });
 
@@ -24,7 +24,10 @@ if (hub.value?.url) {
 
 const { isAuthenticated } = useAuth();
 const toast = useToast();
-const activeTab = ref('feed');
+
+const hubType = computed(() => (hub.value?.hubType as 'community' | 'product' | 'company') ?? 'community');
+const initialTab = hubType.value === 'community' ? 'feed' : 'overview';
+const activeTab = ref(initialTab);
 
 // --- Map to view models ---
 const hubVM = computed<HubViewModel | null>(() => {
@@ -34,14 +37,14 @@ const hubVM = computed<HubViewModel | null>(() => {
     description: hub.value.description,
     iconUrl: hub.value.iconUrl,
     bannerUrl: hub.value.bannerUrl,
-    hubType: (hub.value.hubType as 'community' | 'product' | 'company') ?? 'community',
+    hubType: hubType.value,
     memberCount: hub.value.memberCount,
     postCount: hub.value.postCount,
     foundedLabel: null,
     isOfficial: false,
     joinPolicy: null,
-    categories: null,
-    website: null,
+    categories: (hub.value as unknown as Record<string, unknown>).categories as string[] | null ?? null,
+    website: (hub.value as unknown as Record<string, unknown>).website as string | null ?? null,
   };
 });
 
@@ -75,19 +78,62 @@ const postsVM = computed<HubPostViewModel[]>(() => {
   });
 });
 
+// Extract shared content posts for "Projects" tab
+const sharedContentPosts = computed(() =>
+  postsVM.value.filter(p => p.sharedContent),
+);
+
 const discussionPosts = computed(() =>
   postsVM.value.filter(p => p.type === 'text' || p.type === 'discussion' || p.type === 'question'),
 );
 
-const tabDefs = computed<HubTabDef[]>(() => [
-  { value: 'feed', label: 'Feed', icon: 'fa-solid fa-rss', count: hub.value?.postCount },
-  { value: 'discussions', label: 'Discussions', icon: 'fa-solid fa-comments', count: discussionPosts.value.length || undefined },
-]);
+// Hub rules (from federated metadata)
+const hubRules = computed<string[]>(() => {
+  const raw = (hub.value as unknown as Record<string, unknown>)?.rules;
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw as string);
+    if (Array.isArray(parsed)) return parsed as string[];
+  } catch { /* not JSON */ }
+  return (raw as string).split('\n').map((r: string) => r.trim()).filter(Boolean);
+});
+
+// --- Tab definitions (matching local hub structure) ---
+const tabDefs = computed<HubTabDef[]>(() => {
+  if (hubType.value === 'product') {
+    return [
+      { value: 'overview', label: 'Overview', icon: 'fa-solid fa-info-circle' },
+      { value: 'projects', label: 'Projects', icon: 'fa-solid fa-folder-open', count: sharedContentPosts.value.length || undefined },
+      { value: 'discussions', label: 'Discussions', icon: 'fa-solid fa-comments' },
+    ];
+  }
+  if (hubType.value === 'company') {
+    return [
+      { value: 'overview', label: 'Overview', icon: 'fa-solid fa-building' },
+      { value: 'projects', label: 'Projects', icon: 'fa-solid fa-folder-open', count: sharedContentPosts.value.length || undefined },
+      { value: 'discussions', label: 'Discussions', icon: 'fa-solid fa-comments' },
+    ];
+  }
+  return [
+    { value: 'feed', label: 'Feed', icon: 'fa-solid fa-rss', count: hub.value?.postCount },
+    { value: 'projects', label: 'Projects', icon: 'fa-solid fa-folder-open', count: sharedContentPosts.value.length || undefined },
+    { value: 'discussions', label: 'Discussions', icon: 'fa-solid fa-comments' },
+    { value: 'members', label: 'Members', icon: 'fa-solid fa-users', count: hub.value?.memberCount },
+  ];
+});
 
 // --- Compose (posts to remote hub via federation) ---
 const newPostContent = ref('');
+const newPostType = ref<'text' | 'question' | 'discussion' | 'showcase'>('text');
 const posting = ref(false);
 
+const postTypeOptions = [
+  { value: 'text', label: 'Post', icon: 'fa-solid fa-pen' },
+  { value: 'question', label: 'Question', icon: 'fa-solid fa-circle-question' },
+  { value: 'discussion', label: 'Discussion', icon: 'fa-solid fa-comments' },
+  { value: 'showcase', label: 'Showcase', icon: 'fa-solid fa-image' },
+];
+
 async function handlePost(): Promise<void> {
   if (!newPostContent.value.trim() || !hub.value?.actorUri) return;
   posting.value = true;
@@ -98,10 +144,12 @@ async function handlePost(): Promise<void> {
         federatedHubId: id,
         hubActorUri: hub.value.actorUri,
         content: newPostContent.value,
+        type: newPostType.value,
       },
     });
     newPostContent.value = '';
-    toast.success('Post sent to hub');
+    newPostType.value = 'text';
+    toast.success('Post sent to hub via federation');
     await Promise.all([refreshHub(), refreshPosts()]);
   } catch {
     toast.error('Failed to post — the remote hub may not accept posts from this instance');
@@ -110,6 +158,35 @@ async function handlePost(): Promise<void> {
   }
 }
 
+// --- Discussion compose ---
+const newDiscContent = ref('');
+const newDiscType = ref<'discussion' | 'question'>('discussion');
+const discPosting = ref(false);
+
+async function handleDiscPost(): Promise<void> {
+  if (!newDiscContent.value.trim() || !hub.value?.actorUri) return;
+  discPosting.value = true;
+  try {
+    await $fetch('/api/federation/hub-post' as string, {
+      method: 'POST',
+      body: {
+        federatedHubId: id,
+        hubActorUri: hub.value.actorUri,
+        content: newDiscContent.value,
+        type: newDiscType.value,
+      },
+    });
+    newDiscContent.value = '';
+    newDiscType.value = 'discussion';
+    toast.success('Discussion posted via federation');
+    await Promise.all([refreshHub(), refreshPosts()]);
+  } catch {
+    toast.error('Failed to post discussion');
+  } finally {
+    discPosting.value = false;
+  }
+}
+
 // --- Follow hub ---
 const followStatus = computed(() => hub.value?.followStatus ?? 'pending');
 const following = ref(false);
@@ -126,7 +203,7 @@ async function handleFollowHub(): Promise<void> {
       body: { federatedHubId: id },
     });
     if (hub.value) (hub.value as unknown as Record<string, unknown>).followStatus = result.status;
-    toast.success(result.status === 'accepted' ? 'Already following!' : 'Follow request sent');
+    toast.success(result.status === 'accepted' ? 'Following!' : 'Follow request sent');
   } catch {
     toast.error('Failed to follow hub');
   } finally {
@@ -148,7 +225,6 @@ async function fetchLikedState(): Promise<void> {
 
 watch(() => posts.value?.items.length, () => { fetchLikedState(); }, { immediate: true });
 
-// --- Vote/like toggle on posts ---
 async function handlePostVote(postId: string): Promise<void> {
   if (!isAuthenticated.value) {
     await navigateTo(`/auth/login?redirect=/federated-hubs/${id}`);
@@ -174,33 +250,6 @@ async function handlePostVote(postId: string): Promise<void> {
     toast.error('Failed to toggle like');
   }
 }
-
-// --- Discussion compose ---
-const newDiscContent = ref('');
-const discPosting = ref(false);
-
-async function handleDiscPost(): Promise<void> {
-  if (!newDiscContent.value.trim() || !hub.value?.actorUri) return;
-  discPosting.value = true;
-  try {
-    await $fetch('/api/federation/hub-post' as string, {
-      method: 'POST',
-      body: {
-        federatedHubId: id,
-        hubActorUri: hub.value.actorUri,
-        content: newDiscContent.value,
-        type: 'discussion',
-      },
-    });
-    newDiscContent.value = '';
-    toast.success('Discussion posted');
-    await Promise.all([refreshHub(), refreshPosts()]);
-  } catch {
-    toast.error('Failed to post discussion');
-  } finally {
-    discPosting.value = false;
-  }
-}
 </script>
 
 <template>
@@ -215,31 +264,29 @@ async function handleDiscPost(): Promise<void> {
     <template #hero>
       <HubHero :hub="hubVM">
         <template #banner-overlay>
-          <div class="cpub-fed-banner">
-            <div class="cpub-fed-banner-inner">
-              <i class="fa-solid fa-globe"></i>
-              <span>Mirrored from <strong>{{ hub?.originDomain }}</strong></span>
-              <a v-if="hub?.url" :href="hub.url" target="_blank" rel="noopener noreferrer" class="cpub-fed-banner-link">
-                Visit original <i class="fa-solid fa-arrow-up-right-from-square"></i>
-              </a>
-            </div>
+          <div class="cpub-fed-indicator">
+            <i class="fa-solid fa-globe"></i>
+            <span>Mirrored from <strong>{{ hub?.originDomain }}</strong></span>
+            <a v-if="hub?.url" :href="hub.url" target="_blank" rel="noopener noreferrer" class="cpub-fed-indicator-link">
+              Visit original <i class="fa-solid fa-arrow-up-right-from-square"></i>
+            </a>
           </div>
         </template>
         <template #actions>
           <button
             v-if="followStatus !== 'accepted'"
-            class="cpub-btn cpub-btn-sm cpub-btn-primary"
+            class="cpub-btn cpub-btn-primary"
             :disabled="following || followStatus === 'pending'"
             @click="handleFollowHub"
           >
             <i class="fa-solid fa-rss"></i>
             {{ followStatus === 'pending' ? 'Follow Pending...' : 'Follow Hub' }}
           </button>
-          <span v-else class="cpub-btn cpub-btn-sm" style="cursor: default; opacity: 0.8">
+          <span v-else class="cpub-member-badge">
             <i class="fa-solid fa-check"></i> Following
           </span>
           <a v-if="hub?.url" :href="hub.url" target="_blank" rel="noopener noreferrer" class="cpub-btn cpub-btn-sm">
-            <i class="fa-solid fa-arrow-up-right-from-square"></i> Visit on {{ hub?.originDomain }}
+            <i class="fa-solid fa-arrow-up-right-from-square"></i> Visit
           </a>
         </template>
         <template #badges>
@@ -248,16 +295,27 @@ async function handleDiscPost(): Promise<void> {
       </HubHero>
     </template>
 
-    <!-- Feed tab -->
+    <!-- Feed tab (community hubs) -->
     <HubFeed v-if="activeTab === 'feed'" :posts="postsVM" :interactive="isAuthenticated" :liked-post-ids="likedPostIds" @post-vote="handlePostVote">
       <template v-if="isAuthenticated" #compose>
         <div class="cpub-compose-bar">
+          <div class="cpub-compose-types">
+            <button
+              v-for="opt in postTypeOptions"
+              :key="opt.value"
+              class="cpub-compose-type-btn"
+              :class="{ active: newPostType === opt.value }"
+              @click="newPostType = opt.value as typeof newPostType"
+            >
+              <i :class="opt.icon"></i> {{ opt.label }}
+            </button>
+          </div>
           <div class="cpub-compose-row">
             <input
               v-model="newPostContent"
               class="cpub-compose-input"
               type="text"
-              placeholder="Post to this hub (sent via federation)..."
+              :placeholder="newPostType === 'question' ? 'Ask a question...' : newPostType === 'discussion' ? 'Start a discussion...' : 'Write a post...'"
               @keydown.enter="handlePost"
             />
             <button class="cpub-btn cpub-btn-sm cpub-btn-primary" :disabled="posting" @click="handlePost">
@@ -265,12 +323,44 @@ async function handleDiscPost(): Promise<void> {
             </button>
           </div>
           <p class="cpub-fed-compose-hint">
-            <i class="fa-solid fa-globe"></i> Your post will be sent to {{ hub?.originDomain }} via ActivityPub
+            <i class="fa-solid fa-globe"></i> Sent to {{ hub?.originDomain }} via ActivityPub
           </p>
         </div>
       </template>
     </HubFeed>
 
+    <!-- Projects tab (shared content from hub posts) -->
+    <div v-else-if="activeTab === 'projects'" class="cpub-hub-projects-tab">
+      <div v-if="sharedContentPosts.length" class="cpub-shared-grid">
+        <NuxtLink
+          v-for="post in sharedContentPosts"
+          :key="post.id"
+          :to="(post.sharedContent?.url || post.linkTo) ?? ''"
+          :target="post.sharedContent?.url ? '_blank' : undefined"
+          :rel="post.sharedContent?.url ? 'noopener noreferrer' : undefined"
+          class="cpub-shared-card"
+        >
+          <div v-if="post.sharedContent?.coverImageUrl" class="cpub-shared-card-img">
+            <img :src="post.sharedContent.coverImageUrl" :alt="post.sharedContent.title" />
+          </div>
+          <div class="cpub-shared-card-body">
+            <span v-if="post.sharedContent?.type" class="cpub-shared-card-type">{{ post.sharedContent.type }}</span>
+            <h3 class="cpub-shared-card-title">{{ post.sharedContent?.title || 'Untitled' }}</h3>
+            <p v-if="post.sharedContent?.description" class="cpub-shared-card-desc">{{ post.sharedContent.description }}</p>
+            <div class="cpub-shared-card-meta">
+              <span class="cpub-shared-card-author">{{ post.author.name }}</span>
+              <span class="cpub-shared-card-stat"><i class="fa-solid fa-heart"></i> {{ post.likeCount }}</span>
+            </div>
+          </div>
+        </NuxtLink>
+      </div>
+      <div v-else class="cpub-empty-state" style="padding: 48px 24px">
+        <div class="cpub-empty-state-icon"><i class="fa-solid fa-folder-open"></i></div>
+        <p class="cpub-empty-state-title">No shared projects yet</p>
+        <p class="cpub-empty-state-desc">Projects shared in this hub will appear here.</p>
+      </div>
+    </div>
+
     <!-- Discussions tab -->
     <HubDiscussions v-else-if="activeTab === 'discussions'" :posts="discussionPosts">
       <template v-if="isAuthenticated" #compose>
@@ -280,17 +370,48 @@ async function handleDiscPost(): Promise<void> {
               v-model="newDiscContent"
               class="cpub-compose-input"
               type="text"
-              placeholder="Start a discussion (sent via federation)..."
-              @keydown.enter="handleDiscPost"
+              placeholder="Start a discussion or ask a question..."
+              @keydown.enter="newDiscType = 'discussion'; handleDiscPost()"
             />
-            <button class="cpub-btn cpub-btn-sm cpub-btn-primary" :disabled="discPosting" @click="handleDiscPost">
+            <button class="cpub-btn cpub-btn-sm" :class="{ 'cpub-btn-primary': newDiscType === 'question' }" @click="newDiscType = 'question'" title="Ask a question">
+              <i class="fa-solid fa-circle-question"></i>
+            </button>
+            <button class="cpub-btn cpub-btn-sm cpub-btn-primary" :disabled="discPosting" @click="newDiscType = 'discussion'; handleDiscPost()">
               <i class="fa-solid fa-paper-plane"></i> Post
             </button>
           </div>
+          <p class="cpub-fed-compose-hint">
+            <i class="fa-solid fa-globe"></i> Sent to {{ hub?.originDomain }} via ActivityPub
+          </p>
         </div>
       </template>
     </HubDiscussions>
 
+    <!-- Members tab -->
+    <div v-else-if="activeTab === 'members'" class="cpub-hub-members-tab">
+      <div class="cpub-fed-members-info">
+        <div class="cpub-fed-members-stat">
+          <i class="fa-solid fa-users"></i>
+          <strong>{{ hub?.memberCount ?? 0 }}</strong> members
+        </div>
+        <p class="cpub-fed-members-note">
+          Members are managed on <strong>{{ hub?.originDomain }}</strong>. Visit the original hub to see the full member list and join.
+        </p>
+        <a v-if="hub?.url" :href="hub.url" target="_blank" rel="noopener noreferrer" class="cpub-btn cpub-btn-sm" style="margin-top: 12px; display: inline-flex">
+          <i class="fa-solid fa-arrow-up-right-from-square"></i> View Members on {{ hub?.originDomain }}
+        </a>
+      </div>
+    </div>
+
+    <!-- Overview tab (product/company hubs) -->
+    <template v-else-if="activeTab === 'overview'">
+      <div class="cpub-product-overview">
+        <h3 class="cpub-section-title">About</h3>
+        <p class="cpub-prose-p">{{ hub?.description || 'No description available.' }}</p>
+      </div>
+    </template>
+
+    <!-- Sidebar -->
     <template #sidebar>
       <HubSidebar>
         <HubSidebarCard title="About">
@@ -306,13 +427,21 @@ async function handleDiscPost(): Promise<void> {
             </div>
           </div>
         </HubSidebarCard>
+
+        <HubSidebarCard v-if="hubRules.length" title="Hub Rules">
+          <div v-for="(rule, i) in hubRules" :key="i" class="cpub-rule-item">
+            <span class="cpub-rule-num">{{ i + 1 }}</span>
+            <span>{{ rule }}</span>
+          </div>
+        </HubSidebarCard>
+
         <HubSidebarCard title="Origin Instance">
           <div class="cpub-origin-info">
             <div class="cpub-origin-domain">
               <i class="fa-solid fa-globe"></i>
               <strong>{{ hub?.originDomain }}</strong>
             </div>
-            <p class="cpub-origin-desc">Content is mirrored from this remote CommonPub instance via ActivityPub.</p>
+            <p class="cpub-origin-desc">Mirrored via ActivityPub federation.</p>
             <a v-if="hub?.url" :href="hub.url" target="_blank" rel="noopener noreferrer" class="cpub-btn cpub-btn-sm" style="margin-top: 8px; display: inline-flex">
               <i class="fa-solid fa-arrow-up-right-from-square"></i> Visit Original
             </a>
@@ -324,31 +453,43 @@ async function handleDiscPost(): Promise<void> {
 </template>
 
 <style scoped>
-/* Origin banner */
-.cpub-fed-banner { background: var(--accent-bg); border-bottom: 1px solid var(--accent-border); }
-.cpub-fed-banner-inner {
-  max-width: 1200px; margin: 0 auto; padding: 8px 24px;
+/* Federation indicator (inside hero banner) */
+.cpub-fed-indicator { background: var(--accent-bg); border-bottom: 1px solid var(--accent-border); }
+.cpub-fed-indicator {
+  padding: 6px 24px;
   display: flex; align-items: center; gap: 8px;
   font-size: 12px; color: var(--text-dim);
 }
-.cpub-fed-banner-inner > i { color: var(--accent); }
-.cpub-fed-banner-link {
+.cpub-fed-indicator > i { color: var(--accent); }
+.cpub-fed-indicator-link {
   margin-left: auto; color: var(--accent); font-weight: 600;
   text-decoration: none; white-space: nowrap;
   display: flex; align-items: center; gap: 4px; font-size: 11px;
 }
-.cpub-fed-banner-link:hover { text-decoration: underline; }
+.cpub-fed-indicator-link:hover { text-decoration: underline; }
 
 /* Compose */
 .cpub-compose-bar {
-  background: var(--surface); border: 1px solid var(--border);
-  border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
-  display: flex; flex-direction: column; gap: 6px;
+  background: var(--surface); border: var(--border-width-default) solid var(--border);
+  padding: 12px 14px; margin-bottom: 16px;
+  display: flex; flex-direction: column; gap: 8px;
 }
-.cpub-compose-row { display: flex; gap: 10px; align-items: center; }
+.cpub-compose-types {
+  display: flex; gap: 4px; flex-wrap: wrap;
+}
+.cpub-compose-type-btn {
+  font-size: 11px; font-weight: 600; padding: 4px 10px;
+  border: 1px solid var(--border); background: var(--surface2);
+  color: var(--text-dim); cursor: pointer;
+  display: flex; align-items: center; gap: 4px;
+}
+.cpub-compose-type-btn.active {
+  background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent);
+}
+.cpub-compose-row { display: flex; gap: 8px; align-items: center; }
 .cpub-compose-input {
   flex: 1; background: var(--surface2); border: 1px solid var(--border);
-  border-radius: 8px; padding: 10px 14px; font-size: 0.8125rem;
+  padding: 10px 14px; font-size: 0.8125rem;
   color: var(--text); font-family: inherit;
 }
 .cpub-compose-input::placeholder { color: var(--text-faint); }
@@ -358,13 +499,66 @@ async function handleDiscPost(): Promise<void> {
 }
 .cpub-fed-compose-hint i { font-size: 10px; color: var(--accent); }
 
+/* Shared content grid (projects tab) */
+.cpub-hub-projects-tab { padding: 0; }
+.cpub-shared-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+.cpub-shared-card {
+  background: var(--surface); border: var(--border-width-default) solid var(--border);
+  overflow: hidden; text-decoration: none; color: inherit;
+  transition: border-color 0.15s, transform 0.15s;
+}
+.cpub-shared-card:hover {
+  border-color: var(--accent); transform: translateY(-2px);
+}
+.cpub-shared-card-img {
+  height: 140px; overflow: hidden; background: var(--surface2);
+}
+.cpub-shared-card-img img { width: 100%; height: 100%; object-fit: cover; }
+.cpub-shared-card-body { padding: 14px; }
+.cpub-shared-card-type {
+  font-size: 9px; font-family: var(--font-mono); text-transform: uppercase;
+  letter-spacing: 0.08em; color: var(--accent); background: var(--accent-bg);
+  border: 1px solid var(--accent-border); padding: 2px 6px;
+  display: inline-block; margin-bottom: 6px;
+}
+.cpub-shared-card-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
+.cpub-shared-card-desc {
+  font-size: 12px; color: var(--text-dim); line-height: 1.5;
+  overflow: hidden; text-overflow: ellipsis;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  margin-bottom: 8px;
+}
+.cpub-shared-card-meta {
+  display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--text-faint);
+}
+.cpub-shared-card-stat { display: flex; align-items: center; gap: 3px; }
+
+/* Members tab (federated) */
+.cpub-hub-members-tab { padding: 0; }
+.cpub-fed-members-info {
+  background: var(--surface); border: var(--border-width-default) solid var(--border);
+  padding: 32px; text-align: center;
+}
+.cpub-fed-members-stat {
+  font-size: 20px; font-weight: 700; color: var(--text);
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  margin-bottom: 12px;
+}
+.cpub-fed-members-stat i { color: var(--accent); }
+.cpub-fed-members-note {
+  font-size: 13px; color: var(--text-dim); line-height: 1.5; max-width: 400px; margin: 0 auto;
+}
+
 /* Sidebar */
 .cpub-sidebar-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 12px; }
 .cpub-sidebar-stats { display: flex; gap: 16px; }
 .cpub-sidebar-stat { display: flex; flex-direction: column; font-size: 11px; color: var(--text-faint); }
 .cpub-sidebar-stat strong { font-size: 16px; color: var(--text); font-weight: 700; }
 
-/* Origin */
 .cpub-origin-info { font-size: 12px; }
 .cpub-origin-domain {
   display: flex; align-items: center; gap: 6px;
@@ -373,13 +567,25 @@ async function handleDiscPost(): Promise<void> {
 .cpub-origin-domain i { color: var(--accent); font-size: 11px; }
 .cpub-origin-desc { color: var(--text-dim); line-height: 1.5; }
 
+/* Rules (same as local hub) */
+.cpub-rule-item {
+  display: flex; align-items: flex-start; gap: 8px;
+  font-size: 12px; color: var(--text-dim); line-height: 1.5;
+  padding: 6px 0;
+}
+.cpub-rule-item + .cpub-rule-item { border-top: 1px solid var(--border2); }
+.cpub-rule-num {
+  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
+  color: var(--accent); flex-shrink: 0; width: 18px; text-align: center;
+}
+
 .cpub-not-found { text-align: center; padding: 60px 20px; color: var(--text-dim); }
 .cpub-not-found h1 { font-size: 1.5rem; color: var(--text); margin-bottom: 8px; }
 
 @media (max-width: 768px) {
-  .cpub-fed-banner-inner { padding: 8px 16px; font-size: 11px; flex-wrap: wrap; }
+  .cpub-fed-indicator { padding: 6px 16px; font-size: 11px; flex-wrap: wrap; }
   .cpub-compose-bar { padding: 10px 12px; }
-  .cpub-compose-input { padding: 8px 10px; font-size: 13px; }
-  .cpub-sidebar-stats { gap: 12px; }
+  .cpub-shared-grid { grid-template-columns: 1fr; }
+  .cpub-fed-members-info { padding: 24px 16px; }
 }
 </style>