@commonpub/layer 0.1.0

package/components/SearchSidebar.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+const props = defineProps<{
+  activeTags: string[];
+  suggestedTags: string[];
+  categories: Array<{ icon: string; label: string }>;
+  trendingSearches: Array<{ query: string; trend: number }> | null;
+  relatedHubs: Array<{ id: string; name: string; slug: string; memberCount: number }>;
+}>();
+
+const emit = defineEmits<{
+  'search': [query: string];
+  'toggle-tag': [tag: string];
+  'set-category': [label: string];
+}>();
+
+const { hubs: hubsEnabled } = useFeatures();
+</script>
+
+<template>
+  <aside class="cpub-sidebar-col">
+    <!-- Trending Searches -->
+    <div class="cpub-sb-block">
+      <div class="cpub-sb-heading">Trending Searches</div>
+      <ul class="cpub-pop-search-list">
+        <li
+          v-for="(item, idx) in trendingSearches?.slice(0, 8) ?? []"
+          :key="idx"
+          class="cpub-pop-search-item"
+          @click="emit('search', item.query)"
+        >
+          <span class="cpub-pop-rank" :class="{ top: idx < 3 }">{{ idx + 1 }}</span>
+          <span class="cpub-pop-query">{{ item.query }}</span>
+          <span v-if="item.trend" class="cpub-pop-trend" :class="item.trend > 0 ? 'trend-up' : 'trend-down'">
+            <i :class="item.trend > 0 ? 'fa-solid fa-arrow-trend-up' : 'fa-solid fa-minus'" style="font-size: 9px"></i>
+            <template v-if="item.trend > 0">+{{ item.trend }}%</template>
+          </span>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Suggested Tags -->
+    <div class="cpub-sb-block">
+      <div class="cpub-sb-heading">Suggested Tags</div>
+      <div class="cpub-tag-cloud">
+        <span
+          v-for="tag in suggestedTags"
+          :key="tag"
+          class="cpub-s-tag"
+          :class="{ active: activeTags.includes(tag) }"
+          @click="emit('toggle-tag', tag)"
+        >
+          {{ tag }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Browse by Category -->
+    <div class="cpub-sb-block">
+      <div class="cpub-sb-heading">Browse by Category</div>
+      <p class="cpub-no-results-note">Not finding what you need? Try browsing a category directly.</p>
+      <div class="cpub-cat-grid">
+        <div v-for="cat in categories" :key="cat.label" class="cpub-cat-cell" @click="emit('set-category', cat.label)">
+          <span class="cpub-cat-icon"><i :class="cat.icon"></i></span>
+          <span class="cpub-cat-label">{{ cat.label }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Related Communities -->
+    <div v-if="hubsEnabled && relatedHubs.length" class="cpub-sb-block">
+      <div class="cpub-sb-heading">Related Communities</div>
+      <div class="cpub-related-hubs">
+        <div v-for="hub in relatedHubs" :key="hub.id" class="cpub-related-hub-item">
+          <div class="cpub-related-hub-icon">
+            <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>
+            <div class="cpub-related-hub-members">{{ hub.memberCount ?? 0 }} members</div>
+          </div>
+          <button class="cpub-btn-join-sm">
+            <i class="fa-solid fa-plus" style="font-size: 8px"></i> Join
+          </button>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.cpub-sb-block {
+  background: var(--surface); border: var(--border-width-default) solid var(--border); padding: 20px;
+  margin-bottom: 18px; box-shadow: var(--shadow-md);
+}
+
+.cpub-sb-heading {
+  font-size: 10px; font-family: var(--font-mono); font-weight: 700;
+  color: var(--text-faint); letter-spacing: 0.12em; text-transform: uppercase;
+  margin-bottom: 12px; padding-bottom: 8px; border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.cpub-pop-search-list { list-style: none; }
+
+.cpub-pop-search-item {
+  display: flex; align-items: center; gap: 8px; padding: 7px 0;
+  border-bottom: var(--border-width-default) solid var(--border2); cursor: pointer;
+}
+
+.cpub-pop-search-item:last-child { border-bottom: none; }
+
+.cpub-pop-rank {
+  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
+  min-width: 16px; text-align: right;
+}
+
+.cpub-pop-rank.top { color: var(--accent); }
+
+.cpub-pop-query { flex: 1; font-size: 12px; color: var(--text-dim); transition: color 0.15s; }
+.cpub-pop-search-item:hover .cpub-pop-query { color: var(--text); }
+
+.cpub-pop-trend {
+  font-size: 10px; font-family: var(--font-mono); display: flex; align-items: center; gap: 3px;
+}
+
+.trend-up { color: var(--green); }
+.trend-down { color: var(--text-faint); }
+
+.cpub-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
+
+.cpub-s-tag {
+  font-size: 10px; font-family: var(--font-mono); padding: 4px 10px;
+  border: var(--border-width-default) solid var(--border); background: var(--surface2); color: var(--text-dim);
+  cursor: pointer; transition: all 0.15s;
+}
+
+.cpub-s-tag:hover,
+.cpub-s-tag.active {
+  border-color: var(--accent); color: var(--accent); background: var(--accent-bg);
+}
+
+.cpub-no-results-note { font-size: 11px; color: var(--text-faint); margin-bottom: 12px; line-height: 1.55; }
+
+.cpub-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+
+.cpub-cat-cell {
+  background: var(--surface2); border: var(--border-width-default) solid var(--border); padding: 10px;
+  cursor: pointer; transition: border-color 0.15s, background 0.15s; text-align: center;
+}
+
+.cpub-cat-cell:hover { border-color: var(--accent); background: var(--surface3); }
+.cpub-cat-icon { font-size: 18px; margin-bottom: 4px; display: block; }
+.cpub-cat-label { font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); line-height: 1.3; }
+
+.cpub-related-hubs { display: flex; flex-direction: column; gap: 8px; }
+
+.cpub-related-hub-item {
+  display: flex; align-items: center; gap: 10px; padding: 8px 0;
+  border-bottom: var(--border-width-default) solid var(--border2); cursor: pointer;
+}
+
+.cpub-related-hub-item:last-child { border-bottom: none; }
+.cpub-related-hub-icon { font-size: 20px; width: 32px; text-align: center; flex-shrink: 0; }
+.cpub-related-hub-info { flex: 1; min-width: 0; }
+
+.cpub-related-hub-name {
+  font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 1px;
+  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
+}
+
+.cpub-related-hub-name:hover { color: var(--accent); }
+.cpub-related-hub-members { font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); }
+
+.cpub-btn-join-sm {
+  font-size: 10px; font-family: var(--font-mono); padding: 3px 8px;
+  border: var(--border-width-default) solid var(--border); background: var(--green-bg); color: var(--green);
+  cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
+  box-shadow: var(--shadow-sm); transition: all 0.15s;
+}
+
+.cpub-btn-join-sm:hover { box-shadow: var(--shadow-sm); }
+</style>

package/components/SectionHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  viewAllLink?: string;
+  viewAllLabel?: string;
+  large?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="cpub-section-header">
+    <h2 :class="large ? 'cpub-section-title-lg' : 'cpub-section-title'">{{ title }}</h2>
+    <NuxtLink v-if="viewAllLink" :to="viewAllLink" class="cpub-view-all">
+      {{ viewAllLabel || 'View all' }} <i class="fa-solid fa-arrow-right" style="font-size: 9px"></i>
+    </NuxtLink>
+  </div>
+</template>

package/components/ShareToHubModal.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+const props = defineProps<{
+  contentId: string;
+  contentTitle: string;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  shared: [hubSlug: string];
+}>();
+
+const toast = useToast();
+const { data: userHubs } = useLazyFetch<{ items: Array<{ id: string; name: string; slug: string; iconUrl?: string }> }>('/api/user/hubs');
+const sharing = ref(false);
+const selectedHub = ref('');
+
+async function handleShare(): Promise<void> {
+  if (!selectedHub.value) return;
+  sharing.value = true;
+  try {
+    await $fetch(`/api/hubs/${selectedHub.value}/share`, {
+      method: 'POST',
+      body: { contentId: props.contentId },
+    });
+    toast.success(`Shared to hub`);
+    emit('shared', selectedHub.value);
+    emit('close');
+  } catch {
+    toast.error('Failed to share to hub');
+  } finally {
+    sharing.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-modal-backdrop" @click.self="emit('close')">
+    <div class="cpub-modal-content">
+      <div class="cpub-modal-header">
+        <h3 class="cpub-modal-title">Share to Hub</h3>
+        <button class="cpub-modal-close" @click="emit('close')"><i class="fa-solid fa-xmark"></i></button>
+      </div>
+
+      <p class="cpub-modal-desc">Share "{{ contentTitle }}" to one of your hubs.</p>
+
+      <div v-if="!userHubs?.items?.length" class="cpub-modal-empty">
+        <p>You're not a member of any hubs yet.</p>
+        <NuxtLink to="/hubs" class="cpub-btn cpub-btn-sm" @click="emit('close')">Browse Hubs</NuxtLink>
+      </div>
+
+      <template v-else>
+        <div class="cpub-hub-picker">
+          <button
+            v-for="hub in userHubs.items"
+            :key="hub.id"
+            class="cpub-hub-pick-item"
+            :class="{ selected: selectedHub === hub.slug }"
+            @click="selectedHub = hub.slug"
+          >
+            <div class="cpub-hub-pick-icon">
+              <img v-if="hub.iconUrl" :src="hub.iconUrl" :alt="hub.name" />
+              <i v-else class="fa-solid fa-users"></i>
+            </div>
+            <span class="cpub-hub-pick-name">{{ hub.name }}</span>
+            <i v-if="selectedHub === hub.slug" class="fa-solid fa-check cpub-hub-pick-check"></i>
+          </button>
+        </div>
+
+        <div class="cpub-modal-actions">
+          <button class="cpub-btn cpub-btn-primary" :disabled="!selectedHub || sharing" @click="handleShare">
+            {{ sharing ? 'Sharing...' : 'Share to Hub' }}
+          </button>
+          <button class="cpub-btn" @click="emit('close')">Cancel</button>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--color-surface-scrim, rgba(0,0,0,0.5));
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cpub-modal-content {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  box-shadow: var(--shadow-lg);
+  padding: 24px;
+  max-width: 420px;
+  width: 90vw;
+}
+
+.cpub-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.cpub-modal-title {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.cpub-modal-close {
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px;
+}
+.cpub-modal-close:hover { color: var(--text); }
+
+.cpub-modal-desc {
+  font-size: 13px;
+  color: var(--text-dim);
+  margin-bottom: 16px;
+}
+
+.cpub-modal-empty {
+  text-align: center;
+  padding: 20px 0;
+  color: var(--text-faint);
+  font-size: 13px;
+}
+.cpub-modal-empty p { margin-bottom: 12px; }
+
+.cpub-hub-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 16px;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.cpub-hub-pick-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: none;
+  border: var(--border-width-default) solid var(--border);
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.1s;
+}
+.cpub-hub-pick-item:hover { border-color: var(--text-dim); }
+.cpub-hub-pick-item.selected { border-color: var(--accent); background: var(--accent-bg); }
+
+.cpub-hub-pick-icon {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+  font-size: 12px;
+  color: var(--text-faint);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.cpub-hub-pick-icon img { width: 100%; height: 100%; object-fit: cover; }
+
+.cpub-hub-pick-name {
+  font-size: 13px;
+  font-weight: 500;
+  flex: 1;
+}
+
+.cpub-hub-pick-check {
+  color: var(--accent);
+  font-size: 12px;
+}
+
+.cpub-modal-actions {
+  display: flex;
+  gap: 8px;
+}
+</style>

package/components/SiteLogo.vue

@@ -0,0 +1,21 @@
+<template>
+  <span class="cpub-site-logo">
+    <span class="cpub-logo-bracket">[</span>C<span class="cpub-logo-bracket">]</span>
+    <span class="cpub-logo-name">CommonPub</span>
+  </span>
+</template>
+
+<style scoped>
+.cpub-site-logo {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 13px;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  color: var(--text);
+  white-space: nowrap;
+}
+.cpub-logo-bracket { color: var(--accent); font-size: 15px; }
+.cpub-logo-name { margin-left: 2px; }
+</style>

package/components/SkillBar.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+defineProps<{
+  name: string;
+  percentage: number;
+  color?: string;
+}>();
+</script>
+
+<template>
+  <div class="cpub-skill-row">
+    <span class="cpub-skill-name">{{ name }}</span>
+    <div class="cpub-skill-bar">
+      <div
+        class="cpub-skill-fill"
+        :style="{ width: percentage + '%', background: color || 'var(--accent)' }"
+      ></div>
+    </div>
+    <span class="cpub-skill-pct">{{ percentage }}%</span>
+  </div>
+</template>
+
+<style scoped>
+.cpub-skill-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 6px;
+}
+
+.cpub-skill-name {
+  font-size: 11px;
+  color: var(--text-dim);
+  width: 130px;
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+}
+
+.cpub-skill-bar {
+  flex: 1;
+  height: 4px;
+  background: var(--surface3);
+  overflow: hidden;
+  border: var(--border-width-default) solid var(--border2);
+}
+
+.cpub-skill-fill {
+  height: 100%;
+}
+
+.cpub-skill-pct {
+  font-size: 9px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  width: 28px;
+  text-align: right;
+}
+</style>

package/components/SortSelect.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: string;
+  options: Array<{ value: string; label: string }>;
+}>();
+
+defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+</script>
+
+<template>
+  <select
+    class="cpub-select cpub-input-sm"
+    :value="modelValue"
+    aria-label="Sort by"
+    @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
+  >
+    <option v-for="opt in options" :key="opt.value" :value="opt.value">
+      {{ opt.label }}
+    </option>
+  </select>
+</template>
+
+<style scoped>
+.cpub-select {
+  width: auto;
+  min-width: 120px;
+}
+</style>

package/components/StatBar.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  stats: Array<{ value: string | number; label: string }>;
+}>();
+</script>
+
+<template>
+  <div class="cpub-stat-bar">
+    <div v-for="stat in stats" :key="stat.label" class="cpub-stat-bar-item">
+      <span class="cpub-stat-bar-value">{{ stat.value }}</span>
+      <span class="cpub-stat-bar-label">{{ stat.label }}</span>
+    </div>
+  </div>
+</template>

package/components/TOCNav.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+defineProps<{
+  headings: Array<{ id: string; text: string; level: number }>;
+  activeId?: string;
+}>();
+</script>
+
+<template>
+  <nav class="cpub-toc" aria-label="Table of contents">
+    <h3 class="cpub-toc-title">Contents</h3>
+    <ul class="cpub-toc-list">
+      <li
+        v-for="h in headings"
+        :key="h.id"
+        :class="['cpub-toc-item', { active: activeId === h.id }]"
+        :style="{ paddingLeft: (h.level - 2) * 12 + 'px' }"
+      >
+        <a :href="`#${h.id}`" class="cpub-toc-link">{{ h.text }}</a>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<style scoped>
+.cpub-toc {
+  position: sticky;
+  top: 80px;
+}
+
+.cpub-toc-title {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-faint);
+  margin-bottom: 12px;
+}
+
+.cpub-toc-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.cpub-toc-item {
+  margin-bottom: 2px;
+}
+
+.cpub-toc-link {
+  font-size: 12px;
+  color: var(--text-dim);
+  text-decoration: none;
+  display: block;
+  padding: 4px 8px;
+  border-left: var(--border-width-default) solid transparent;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.cpub-toc-link:hover {
+  color: var(--text);
+}
+
+.cpub-toc-item.active .cpub-toc-link {
+  color: var(--accent);
+  border-left-color: var(--accent);
+  font-weight: 500;
+}
+</style>

package/components/TimelineItem.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+defineProps<{
+  role: string;
+  company: string;
+  period: string;
+  description?: string;
+  current?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="cpub-tl-item">
+    <div class="cpub-tl-dot" :class="{ active: current }"></div>
+    <div class="cpub-tl-header">
+      <span class="cpub-tl-role">{{ role }}</span>
+      <span class="cpub-tl-period">{{ period }}</span>
+    </div>
+    <div class="cpub-tl-company">{{ company }}</div>
+    <p v-if="description" class="cpub-tl-desc">{{ description }}</p>
+  </div>
+</template>
+
+<style scoped>
+.cpub-tl-item {
+  position: relative;
+  margin-bottom: 24px;
+  padding-left: 20px;
+}
+
+.cpub-tl-item:last-child {
+  margin-bottom: 0;
+}
+
+.cpub-tl-dot {
+  position: absolute;
+  left: 0;
+  top: 4px;
+  width: 7px;
+  height: 7px;
+  background: var(--border2);
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-tl-dot.active {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.cpub-tl-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.cpub-tl-role {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.cpub-tl-period {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  white-space: nowrap;
+  margin-top: 2px;
+}
+
+.cpub-tl-company {
+  font-size: 11px;
+  color: var(--accent);
+  font-family: var(--font-mono);
+  margin-bottom: 4px;
+}
+
+.cpub-tl-desc {
+  font-size: 11px;
+  color: var(--text-dim);
+  line-height: 1.55;
+}
+</style>