@commonpub/layer 0.1.0

package/components/EngagementBar.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+const props = defineProps<{
+  targetType: string;
+  targetId: string;
+  targetTitle?: string;
+  likeCount: number;
+  commentCount: number;
+  isLiked?: boolean;
+  isBookmarked?: boolean;
+}>();
+
+const emit = defineEmits<{
+  like: [];
+  bookmark: [];
+  share: [];
+  comment: [];
+}>();
+
+const contentId = computed(() => props.targetId);
+const contentType = computed(() => props.targetType);
+const { liked, bookmarked, likeCount, toggleLike, toggleBookmark, share, setInitialState } = useEngagement({ contentId, contentType });
+const { isAuthenticated } = useAuth();
+const showHubModal = ref(false);
+
+// Sync initial state from props
+watch(() => [props.isLiked, props.isBookmarked, props.likeCount] as const, ([l, b, c]) => {
+  setInitialState(l ?? false, b ?? false, c);
+}, { immediate: true });
+
+async function handleLike(): Promise<void> {
+  await toggleLike();
+  emit('like');
+}
+
+async function handleBookmark(): Promise<void> {
+  await toggleBookmark();
+  emit('bookmark');
+}
+
+async function handleShare(): Promise<void> {
+  await share();
+  emit('share');
+}
+</script>
+
+<template>
+  <div class="cpub-engagement" role="toolbar" aria-label="Content actions">
+    <button
+      class="cpub-engage-btn"
+      :class="{ 'cpub-engage-active': liked }"
+      :aria-pressed="liked"
+      aria-label="Like"
+      @click="handleLike"
+    >
+      <i :class="liked ? 'fa-solid fa-heart' : 'fa-regular fa-heart'"></i>
+      <span>{{ likeCount }}</span>
+    </button>
+
+    <button class="cpub-engage-btn" aria-label="Comments" @click="$emit('comment')">
+      <i class="fa-regular fa-comment"></i>
+      <span>{{ commentCount }}</span>
+    </button>
+
+    <button
+      class="cpub-engage-btn"
+      :class="{ 'cpub-engage-active': bookmarked }"
+      :aria-pressed="bookmarked"
+      aria-label="Bookmark"
+      @click="handleBookmark"
+    >
+      <i :class="bookmarked ? 'fa-solid fa-bookmark' : 'fa-regular fa-bookmark'"></i>
+    </button>
+
+    <button v-if="isAuthenticated" class="cpub-engage-btn" aria-label="Share to Hub" @click="showHubModal = true">
+      <i class="fa-solid fa-users"></i>
+      <span>Hub</span>
+    </button>
+
+    <button class="cpub-engage-btn" aria-label="Share" @click="handleShare">
+      <i class="fa-solid fa-share-nodes"></i>
+    </button>
+
+    <ShareToHubModal
+      v-if="showHubModal"
+      :content-id="targetId"
+      :content-title="targetTitle || 'this content'"
+      @close="showHubModal = false"
+      @shared="showHubModal = false"
+    />
+  </div>
+</template>
+
+<style scoped>
+.cpub-engagement {
+  display: flex;
+  gap: var(--space-1);
+  padding: var(--space-3) 0;
+  border-top: var(--border-width-default) solid var(--border);
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.cpub-engage-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: none;
+  border: var(--border-width-default) solid transparent;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: all 0.15s;
+  min-height: 44px;
+}
+
+.cpub-engage-btn:hover {
+  background: var(--surface2);
+  border-color: var(--border2);
+  color: var(--text);
+}
+
+.cpub-engage-active {
+  color: var(--accent);
+}
+
+.cpub-engage-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+</style>

package/components/FederatedContentCard.vue

@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import type { FederatedContentItem } from '@commonpub/server';
+
+const props = defineProps<{
+  content: FederatedContentItem;
+}>();
+
+const emit = defineEmits<{
+  like: [id: string];
+  boost: [id: string];
+}>();
+
+const proxiedCover = computed(() => {
+  const url = props.content.coverImageUrl;
+  if (!url) return null;
+  return `/api/image-proxy?url=${encodeURIComponent(url)}&w=600`;
+});
+
+const actorHandle = computed(() => {
+  if (!props.content.actor) return 'Unknown';
+  const u = props.content.actor.preferredUsername ?? 'unknown';
+  return `@${u}@${props.content.actor.instanceDomain}`;
+});
+
+const actorName = computed(() =>
+  props.content.actor?.displayName ?? props.content.actor?.preferredUsername ?? 'Unknown',
+);
+
+const typeLabel = computed(() => {
+  if (props.content.cpubType) return props.content.cpubType;
+  return props.content.apType === 'Note' ? 'post' : 'article';
+});
+
+const timeAgo = computed(() => {
+  const date = props.content.publishedAt ?? props.content.receivedAt;
+  const d = new Date(date);
+  const now = Date.now();
+  const diff = now - d.getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 60) return `${mins}m`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h`;
+  const days = Math.floor(hrs / 24);
+  return `${days}d`;
+});
+
+/** Strip HTML for safe text display */
+function stripHtml(html: string): string {
+  return html.replace(/<[^>]*>/g, '');
+}
+</script>
+
+<template>
+  <article class="cpub-fed-card">
+    <div class="cpub-fed-card__header">
+      <img
+        v-if="content.actor?.avatarUrl"
+        :src="content.actor.avatarUrl"
+        :alt="`${actorName} avatar`"
+        class="cpub-fed-card__avatar"
+        loading="lazy"
+      />
+      <div v-else class="cpub-fed-card__avatar cpub-fed-card__avatar--placeholder">
+        {{ actorName[0]?.toUpperCase() ?? '?' }}
+      </div>
+
+      <div class="cpub-fed-card__meta">
+        <NuxtLink
+          v-if="content.actor"
+          :to="`/federation/users/${content.actor.preferredUsername}@${content.actor.instanceDomain}`"
+          class="cpub-fed-card__author cpub-fed-card__author-link"
+        >{{ actorName }}</NuxtLink>
+        <span v-else class="cpub-fed-card__author">{{ actorName }}</span>
+        <span class="cpub-fed-card__handle">{{ actorHandle }}</span>
+      </div>
+
+      <span class="cpub-fed-card__time">{{ timeAgo }}</span>
+    </div>
+
+    <div class="cpub-fed-card__badges">
+      <span class="cpub-fed-card__type-badge">{{ typeLabel }}</span>
+      <span class="cpub-fed-card__origin-badge">{{ content.originDomain }}</span>
+    </div>
+
+    <div v-if="content.coverImageUrl" class="cpub-fed-card__cover">
+      <img :src="proxiedCover ?? content.coverImageUrl" :alt="content.title ?? 'Cover'" loading="lazy" />
+    </div>
+
+    <h3 v-if="content.title" class="cpub-fed-card__title">
+      <a v-if="content.url" :href="content.url" target="_blank" rel="noopener">
+        {{ content.title }}
+      </a>
+      <span v-else>{{ content.title }}</span>
+    </h3>
+
+    <p v-if="content.summary" class="cpub-fed-card__summary">
+      {{ stripHtml(content.summary) }}
+    </p>
+
+    <div v-if="content.tags.length > 0" class="cpub-fed-card__tags">
+      <span v-for="tag in content.tags.slice(0, 5)" :key="tag.name" class="cpub-fed-card__tag">
+        {{ tag.name }}
+      </span>
+    </div>
+
+    <div class="cpub-fed-card__actions">
+      <button
+        class="cpub-fed-card__action"
+        :aria-label="`Like this ${typeLabel}`"
+        @click="emit('like', content.id)"
+      >
+        {{ content.localLikeCount > 0 ? content.localLikeCount : '' }} Like
+      </button>
+      <button
+        class="cpub-fed-card__action"
+        :aria-label="`Boost this ${typeLabel}`"
+        @click="emit('boost', content.id)"
+      >
+        Boost
+      </button>
+      <a
+        v-if="content.url"
+        :href="content.url"
+        target="_blank"
+        rel="noopener"
+        class="cpub-fed-card__action"
+      >
+        View Original
+      </a>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.cpub-fed-card {
+  border: var(--border-width-default) solid var(--border);
+  padding: var(--space-4);
+  background: var(--surface-1);
+}
+
+.cpub-fed-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+
+.cpub-fed-card__avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 0;
+  object-fit: cover;
+  border: var(--border-width-default) solid var(--border);
+  flex-shrink: 0;
+}
+
+.cpub-fed-card__avatar--placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-2);
+  color: var(--text-2);
+  font-weight: 700;
+}
+
+.cpub-fed-card__meta {
+  flex: 1;
+  min-width: 0;
+}
+
+.cpub-fed-card__author {
+  font-weight: 700;
+  color: var(--text-1);
+}
+.cpub-fed-card__author-link {
+  text-decoration: none;
+  color: var(--text-1);
+}
+.cpub-fed-card__author-link:hover {
+  color: var(--accent);
+}
+
+.cpub-fed-card__handle {
+  font-size: var(--font-size-sm);
+  color: var(--text-2);
+  font-family: var(--font-mono);
+  margin-left: var(--space-1);
+}
+
+.cpub-fed-card__time {
+  font-size: var(--font-size-sm);
+  color: var(--text-2);
+  font-family: var(--font-mono);
+}
+
+.cpub-fed-card__badges {
+  display: flex;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+
+.cpub-fed-card__type-badge,
+.cpub-fed-card__origin-badge {
+  font-size: var(--font-size-xs);
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.1em 0.4em;
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-fed-card__type-badge {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.cpub-fed-card__origin-badge {
+  color: var(--text-2);
+}
+
+.cpub-fed-card__cover {
+  margin-bottom: var(--space-3);
+}
+
+.cpub-fed-card__cover img {
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-fed-card__title {
+  font-size: var(--font-size-lg);
+  margin-bottom: var(--space-2);
+}
+
+.cpub-fed-card__title a {
+  color: var(--text-1);
+  text-decoration: none;
+}
+
+.cpub-fed-card__title a:hover {
+  text-decoration: underline;
+}
+
+.cpub-fed-card__summary {
+  color: var(--text-2);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+  margin-bottom: var(--space-3);
+}
+
+.cpub-fed-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  margin-bottom: var(--space-3);
+}
+
+.cpub-fed-card__tag {
+  font-size: var(--font-size-xs);
+  font-family: var(--font-mono);
+  color: var(--text-2);
+  padding: 0.1em 0.3em;
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-fed-card__actions {
+  display: flex;
+  gap: var(--space-3);
+  border-top: var(--border-width-default) solid var(--border);
+  padding-top: var(--space-3);
+}
+
+.cpub-fed-card__action {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-2);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: none;
+}
+
+.cpub-fed-card__action:hover {
+  color: var(--accent);
+}
+</style>

package/components/FeedItem.vue

@@ -0,0 +1,283 @@
+<script setup lang="ts">
+const props = defineProps<{
+  type: 'discussion' | 'question' | 'showcase' | 'announcement';
+  title: string;
+  author: string;
+  authorAvatar?: string;
+  authorHandle?: string;
+  body: string;
+  createdAt: Date;
+  replyCount: number;
+  voteCount: number;
+  pinned?: boolean;
+  locked?: boolean;
+  interactive?: boolean;
+  voted?: boolean;
+}>();
+
+const emit = defineEmits<{ vote: [] }>();
+
+const typeBadgeClass = computed((): string => {
+  const map: Record<string, string> = {
+    discussion: 'cpub-feed-badge-accent',
+    question: 'cpub-feed-badge-yellow',
+    showcase: 'cpub-feed-badge-purple',
+    announcement: 'cpub-feed-badge-red',
+  };
+  return map[props.type] || 'cpub-feed-badge-accent';
+});
+
+const formattedDate = computed((): string => {
+  return new Date(props.createdAt).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+  });
+});
+</script>
+
+<template>
+  <article
+    :class="['cpub-feed-item', { 'cpub-feed-item-pinned': pinned }]"
+    :data-feed-type="type"
+  >
+    <div v-if="pinned" class="cpub-feed-pin" aria-label="Pinned post">
+      <i class="fa-solid fa-thumbtack"></i>
+      <span>Pinned</span>
+    </div>
+
+    <div class="cpub-feed-item-body">
+      <div class="cpub-feed-item-header">
+        <span :class="['cpub-feed-badge', typeBadgeClass]">{{ type }}</span>
+        <span v-if="locked" class="cpub-feed-lock" aria-label="Locked">
+          <i class="fa-solid fa-lock"></i>
+        </span>
+      </div>
+
+      <h3 class="cpub-feed-item-title">{{ title }}</h3>
+
+      <p class="cpub-feed-item-preview">{{ body }}</p>
+
+      <div class="cpub-feed-item-meta">
+        <div class="cpub-feed-item-author">
+          <div v-if="authorAvatar" class="cpub-feed-avatar">
+            <img :src="authorAvatar" :alt="author" />
+          </div>
+          <div v-else class="cpub-feed-avatar cpub-feed-avatar-placeholder">
+            {{ author.charAt(0).toUpperCase() }}
+          </div>
+          <span class="cpub-feed-author-name">{{ author }}</span>
+          <span v-if="authorHandle" class="cpub-feed-handle">{{ authorHandle }}</span>
+          <span class="cpub-feed-sep" aria-hidden="true">&middot;</span>
+          <time class="cpub-feed-time">{{ formattedDate }}</time>
+        </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')">
+            <i class="fa-solid fa-arrow-up"></i> {{ voteCount }}
+          </button>
+          <span v-else class="cpub-feed-stat" aria-label="Votes">
+            <i class="fa-solid fa-arrow-up"></i> {{ voteCount }}
+          </span>
+          <span class="cpub-feed-stat" aria-label="Replies">
+            <i class="fa-solid fa-comment"></i> {{ replyCount }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.cpub-feed-item {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+  position: relative;
+}
+
+.cpub-feed-item:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-feed-item-pinned {
+  border-color: var(--accent-border);
+  background: var(--accent-bg);
+}
+
+.cpub-feed-pin {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-widest);
+  color: var(--accent);
+  border-bottom: var(--border-width-default) solid var(--accent-border);
+}
+
+.cpub-feed-item-body {
+  padding: var(--space-4);
+}
+
+.cpub-feed-item-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+
+.cpub-feed-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  border: var(--border-width-default) solid;
+}
+
+.cpub-feed-badge-accent {
+  color: var(--accent);
+  background: var(--accent-bg);
+  border-color: var(--accent-border);
+}
+
+.cpub-feed-badge-yellow {
+  color: var(--yellow);
+  background: var(--yellow-bg);
+  border-color: var(--yellow-border);
+}
+
+.cpub-feed-badge-purple {
+  color: var(--purple);
+  background: var(--purple-bg);
+  border-color: var(--purple-border);
+}
+
+.cpub-feed-badge-red {
+  color: var(--red);
+  background: var(--red-bg);
+  border-color: var(--red-border);
+}
+
+.cpub-feed-lock {
+  color: var(--text-faint);
+  font-size: var(--text-xs);
+}
+
+.cpub-feed-item-title {
+  font-size: var(--text-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text);
+  margin-bottom: var(--space-2);
+  line-height: var(--leading-tight);
+}
+
+.cpub-feed-item-preview {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  line-height: var(--leading-relaxed);
+  margin-bottom: var(--space-3);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.cpub-feed-item-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.cpub-feed-item-author {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+}
+
+.cpub-feed-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  flex-shrink: 0;
+  border: var(--border-width-default) solid var(--border2);
+}
+
+.cpub-feed-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cpub-feed-avatar-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface2);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: var(--font-weight-bold);
+  color: var(--text-dim);
+}
+
+.cpub-feed-author-name {
+  font-weight: var(--font-weight-medium);
+  color: var(--text-dim);
+}
+
+.cpub-feed-handle {
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+}
+
+.cpub-feed-sep {
+  color: var(--text-faint);
+}
+
+.cpub-feed-time {
+  color: var(--text-faint);
+}
+
+.cpub-feed-item-stats {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.cpub-feed-stat {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+}
+
+.cpub-feed-stat-btn {
+  background: none;
+  border: 1px solid transparent;
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-family: inherit;
+  transition: all 0.12s;
+}
+.cpub-feed-stat-btn:hover {
+  color: var(--accent);
+  background: var(--accent-bg);
+  border-color: var(--accent-border);
+}
+.cpub-feed-stat-voted {
+  color: var(--accent);
+  border-color: var(--accent-border);
+}
+</style>