@commonpub/layer 0.1.0

package/pages/federation/index.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import type { FederatedContentItem } from '@commonpub/server';
+
+definePageMeta({
+  middleware: 'auth',
+});
+
+useHead({
+  title: 'Federated Timeline',
+});
+
+const items = ref<FederatedContentItem[]>([]);
+const total = ref(0);
+const loading = ref(false);
+const offset = ref(0);
+const limit = 20;
+
+async function loadMore() {
+  loading.value = true;
+  try {
+    const data = await $fetch<{ items: FederatedContentItem[]; total: number }>(
+      '/api/federation/timeline',
+      { params: { limit, offset: offset.value } },
+    );
+    items.value.push(...data.items);
+    total.value = data.total;
+    offset.value += data.items.length;
+  } finally {
+    loading.value = false;
+  }
+}
+
+const hasMore = computed(() => offset.value < total.value);
+
+async function handleLike(id: string) {
+  await $fetch('/api/federation/like', {
+    method: 'POST',
+    body: { federatedContentId: id },
+  });
+  // Optimistic update
+  const item = items.value.find((i) => i.id === id);
+  if (item) item.localLikeCount++;
+}
+
+async function handleBoost(id: string) {
+  await $fetch('/api/federation/boost', {
+    method: 'POST',
+    body: { federatedContentId: id },
+  });
+}
+
+onMounted(() => loadMore());
+</script>
+
+<template>
+  <div class="cpub-page-federation">
+    <div class="cpub-page-federation__header">
+      <SectionHeader title="Federated Timeline" />
+      <NuxtLink to="/federation/search" class="cpub-page-federation__search-link">
+        Find Users
+      </NuxtLink>
+    </div>
+
+    <div v-if="items.length === 0 && !loading" class="cpub-page-federation__empty">
+      <p>No federated content yet.</p>
+      <p>
+        <NuxtLink to="/federation/search">Search for users</NuxtLink>
+        on other instances to start seeing content here.
+      </p>
+    </div>
+
+    <div class="cpub-page-federation__list">
+      <FederatedContentCard
+        v-for="item in items"
+        :key="item.id"
+        :content="item"
+        @like="handleLike"
+        @boost="handleBoost"
+      />
+    </div>
+
+    <button
+      v-if="hasMore"
+      class="cpub-page-federation__load-more"
+      :disabled="loading"
+      @click="loadMore"
+    >
+      {{ loading ? 'Loading...' : 'Load More' }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.cpub-page-federation {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: var(--space-6) var(--space-4);
+}
+
+.cpub-page-federation__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-4);
+}
+
+.cpub-page-federation__search-link {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--accent);
+  text-decoration: none;
+  border: var(--border-width-default) solid var(--accent);
+  padding: var(--space-1) var(--space-3);
+}
+
+.cpub-page-federation__empty {
+  text-align: center;
+  color: var(--text-2);
+  padding: var(--space-8) 0;
+}
+
+.cpub-page-federation__empty a {
+  color: var(--accent);
+}
+
+.cpub-page-federation__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.cpub-page-federation__load-more {
+  display: block;
+  width: 100%;
+  margin-top: var(--space-4);
+  padding: var(--space-3);
+  border: var(--border-width-default) solid var(--border);
+  background: transparent;
+  color: var(--text-1);
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+}
+
+.cpub-page-federation__load-more:hover:not(:disabled) {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.cpub-page-federation__load-more:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

package/pages/federation/search.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+});
+
+useHead({
+  title: 'Find Remote Users — Federation',
+});
+</script>
+
+<template>
+  <div class="cpub-page-federation-search">
+    <SectionHeader title="Find Remote Users" />
+
+    <p class="cpub-page-federation-search__desc">
+      Search for users on other instances by their handle. Enter a full handle
+      like <code>@alice@mastodon.social</code> to discover and follow users
+      across the fediverse.
+    </p>
+
+    <RemoteUserSearch />
+  </div>
+</template>
+
+<style scoped>
+.cpub-page-federation-search {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: var(--space-6) var(--space-4);
+}
+
+.cpub-page-federation-search__desc {
+  margin-bottom: var(--space-6);
+  color: var(--text-2);
+  line-height: 1.6;
+}
+
+.cpub-page-federation-search__desc code {
+  font-family: var(--font-mono);
+  background: var(--surface-2);
+  padding: 0.1em 0.3em;
+}
+</style>

package/pages/federation/users/[handle].vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import type { RemoteActorProfile, FederatedContentItem } from '@commonpub/server';
+
+definePageMeta({ middleware: 'auth' });
+
+const route = useRoute();
+const handle = computed(() => decodeURIComponent(route.params.handle as string));
+
+const { searchResult, searchLoading, searchError, searchRemoteUser, followRemoteUser, unfollowRemoteUser } = useFederation();
+
+const content = ref<FederatedContentItem[]>([]);
+const contentLoading = ref(false);
+
+async function loadProfile() {
+  const h = handle.value.startsWith('@') ? handle.value : `@${handle.value}`;
+  await searchRemoteUser(h);
+
+  // Load their content from federated timeline
+  if (searchResult.value) {
+    contentLoading.value = true;
+    try {
+      const domain = searchResult.value.instanceDomain;
+      const data = await $fetch<{ items: FederatedContentItem[]; total: number }>(
+        '/api/federation/timeline',
+        { params: { originDomain: domain, limit: 20 } },
+      );
+      content.value = data.items.filter(
+        (item) => item.actor?.actorUri === searchResult.value?.actorUri,
+      );
+    } catch { /* no content available */ }
+    contentLoading.value = false;
+  }
+}
+
+useHead({ title: computed(() => searchResult.value?.displayName ?? handle.value) });
+
+onMounted(loadProfile);
+
+async function onFollow() {
+  if (searchResult.value) await followRemoteUser(searchResult.value.actorUri);
+}
+
+async function onUnfollow() {
+  if (searchResult.value) await unfollowRemoteUser(searchResult.value.actorUri);
+}
+
+function stripHtml(html: string): string {
+  return html.replace(/<[^>]*>/g, '');
+}
+</script>
+
+<template>
+  <div class="cpub-remote-profile">
+    <div v-if="searchLoading" class="cpub-remote-profile__loading">Loading profile...</div>
+    <div v-else-if="searchError" class="cpub-remote-profile__error">{{ searchError }}</div>
+    <div v-else-if="searchResult" class="cpub-remote-profile__content">
+      <!-- Profile Header -->
+      <div class="cpub-remote-profile__header">
+        <img
+          v-if="searchResult.avatarUrl"
+          :src="searchResult.avatarUrl"
+          :alt="searchResult.displayName ?? ''"
+          class="cpub-remote-profile__avatar"
+        />
+        <div v-else class="cpub-remote-profile__avatar cpub-remote-profile__avatar--placeholder">
+          {{ (searchResult.displayName ?? searchResult.preferredUsername ?? '?')[0]?.toUpperCase() }}
+        </div>
+
+        <div class="cpub-remote-profile__info">
+          <h1 class="cpub-remote-profile__name">
+            {{ searchResult.displayName ?? searchResult.preferredUsername }}
+          </h1>
+          <div class="cpub-remote-profile__handle">
+            @{{ searchResult.preferredUsername }}@{{ searchResult.instanceDomain }}
+          </div>
+        </div>
+
+        <button
+          class="cpub-remote-profile__follow-btn"
+          :class="{
+            'cpub-remote-profile__follow-btn--following': searchResult.isFollowing,
+            'cpub-remote-profile__follow-btn--pending': searchResult.isFollowPending,
+          }"
+          :disabled="searchResult.isFollowPending"
+          @click="searchResult.isFollowing ? onUnfollow() : onFollow()"
+        >
+          {{ searchResult.isFollowing ? 'Following' : searchResult.isFollowPending ? 'Pending' : 'Follow' }}
+        </button>
+      </div>
+
+      <p v-if="searchResult.summary" class="cpub-remote-profile__bio">
+        {{ stripHtml(searchResult.summary) }}
+      </p>
+
+      <div class="cpub-remote-profile__stats">
+        <span v-if="searchResult.followerCount != null"><strong>{{ searchResult.followerCount }}</strong> followers</span>
+        <span v-if="searchResult.followingCount != null"><strong>{{ searchResult.followingCount }}</strong> following</span>
+        <span class="cpub-remote-profile__instance">{{ searchResult.instanceDomain }}</span>
+      </div>
+
+      <!-- Content -->
+      <div class="cpub-remote-profile__section-title">Content</div>
+
+      <div v-if="contentLoading" class="cpub-remote-profile__loading">Loading content...</div>
+      <div v-else-if="content.length === 0" class="cpub-remote-profile__empty">
+        No federated content from this user yet.
+      </div>
+      <div v-else class="cpub-remote-profile__content-list">
+        <FederatedContentCard
+          v-for="item in content"
+          :key="item.id"
+          :content="item"
+        />
+      </div>
+    </div>
+    <div v-else class="cpub-remote-profile__empty">User not found.</div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-remote-profile {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: var(--space-6) var(--space-4);
+}
+.cpub-remote-profile__loading,
+.cpub-remote-profile__error,
+.cpub-remote-profile__empty {
+  text-align: center;
+  color: var(--text-2);
+  padding: var(--space-8) 0;
+}
+.cpub-remote-profile__error { color: var(--error, #f85149); }
+.cpub-remote-profile__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  margin-bottom: var(--space-4);
+}
+.cpub-remote-profile__avatar {
+  width: 72px;
+  height: 72px;
+  object-fit: cover;
+  border: var(--border-width-default) solid var(--border);
+  flex-shrink: 0;
+}
+.cpub-remote-profile__avatar--placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-2, var(--surface2));
+  color: var(--text-2);
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+.cpub-remote-profile__info { flex: 1; min-width: 0; }
+.cpub-remote-profile__name { font-size: var(--font-size-xl, 1.25rem); font-weight: 700; margin: 0; }
+.cpub-remote-profile__handle {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  color: var(--text-2);
+}
+.cpub-remote-profile__follow-btn {
+  padding: var(--space-2) var(--space-4);
+  border: var(--border-width-default) solid var(--accent);
+  background: transparent;
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.cpub-remote-profile__follow-btn:hover:not(:disabled) {
+  background: var(--accent);
+  color: var(--surface-1, var(--surface));
+}
+.cpub-remote-profile__follow-btn--following {
+  background: var(--accent);
+  color: var(--surface-1, var(--surface));
+}
+.cpub-remote-profile__follow-btn--pending {
+  border-color: var(--text-2);
+  color: var(--text-2);
+  cursor: default;
+}
+.cpub-remote-profile__bio {
+  color: var(--text-2);
+  line-height: 1.5;
+  margin-bottom: var(--space-4);
+}
+.cpub-remote-profile__stats {
+  display: flex;
+  gap: var(--space-4);
+  font-size: var(--font-size-sm);
+  color: var(--text-2);
+  margin-bottom: var(--space-6);
+  padding-bottom: var(--space-4);
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+.cpub-remote-profile__instance {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  opacity: 0.7;
+}
+.cpub-remote-profile__section-title {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-2);
+  margin-bottom: var(--space-4);
+}
+.cpub-remote-profile__content-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+</style>

package/pages/feed.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { Serialized, ContentListItem, PaginatedResponse } from '@commonpub/server';
+
+useSeoMeta({
+  title: `Feed — ${useSiteName()}`,
+  description: 'Recent published content from the community.',
+});
+
+const { isAuthenticated } = useAuth();
+const { enabledTypeMeta } = useContentTypes();
+const activeFilter = ref('all');
+const loadingMore = ref(false);
+const allLoaded = ref(false);
+
+const contentQuery = computed(() => ({
+  status: 'published',
+  type: activeFilter.value === 'all' ? undefined : activeFilter.value,
+  sort: 'recent',
+  limit: 12,
+}));
+
+const { data, status } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+  query: contentQuery,
+  watch: [contentQuery],
+});
+
+const items = computed(() => data.value?.items ?? []);
+const total = computed(() => data.value?.total ?? 0);
+
+async function loadMore(): Promise<void> {
+  if (!data.value?.items) return;
+  loadingMore.value = true;
+  try {
+    const nextOffset = data.value.items.length;
+    const more = await $fetch<{ items: Array<Record<string, unknown>> }>('/api/content', {
+      query: { ...contentQuery.value, offset: nextOffset },
+    });
+    if (more?.items?.length) {
+      data.value.items.push(...(more.items as typeof data.value.items));
+    }
+    if (!more?.items?.length || more.items.length < 12) {
+      allLoaded.value = true;
+    }
+  } catch {
+    allLoaded.value = true;
+  } finally {
+    loadingMore.value = false;
+  }
+}
+
+watch(activeFilter, () => { allLoaded.value = false; });
+
+const filters = computed(() => [
+  { value: 'all', label: 'All', icon: 'fa-solid fa-layer-group' },
+  ...enabledTypeMeta.value.map(m => ({ value: m.type, label: m.plural, icon: m.icon })),
+]);
+</script>
+
+<template>
+  <div class="feed-page">
+    <div class="feed-header">
+      <h1 class="feed-title">Feed</h1>
+      <NuxtLink v-if="isAuthenticated" to="/create" class="cpub-btn cpub-btn-primary cpub-btn-sm">
+        <i class="fa-solid fa-plus"></i> Create
+      </NuxtLink>
+    </div>
+
+    <!-- Filters -->
+    <div class="feed-filters">
+      <button
+        v-for="f in filters"
+        :key="f.value"
+        class="feed-filter"
+        :class="{ active: activeFilter === f.value }"
+        @click="activeFilter = f.value"
+      >
+        <i :class="f.icon"></i> {{ f.label }}
+      </button>
+    </div>
+
+    <!-- Content Grid -->
+    <div v-if="items.length" class="feed-grid">
+      <ContentCard v-for="item in items" :key="item.id" :item="item" />
+    </div>
+
+    <div v-else-if="status === 'pending'" class="feed-loading">Loading...</div>
+
+    <div v-else class="feed-empty">
+      <div class="feed-empty-icon"><i class="fa-solid fa-rss"></i></div>
+      <p class="feed-empty-title">No content yet</p>
+      <p class="feed-empty-sub">Published content will appear here.</p>
+    </div>
+
+    <!-- Load More -->
+    <div v-if="!allLoaded && items.length >= 12" class="feed-more">
+      <button class="cpub-btn" @click="loadMore" :disabled="loadingMore">
+        {{ loadingMore ? 'Loading...' : 'Load More' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.feed-page { max-width: 960px; margin: 0 auto; padding: 32px; }
+.feed-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+.feed-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
+
+.feed-filters { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
+.feed-filter { font-size: 12px; font-family: var(--font-mono); padding: 6px 14px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; display: flex; align-items: center; gap: 6px; }
+.feed-filter:hover { background: var(--surface2); color: var(--text); }
+.feed-filter.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
+.feed-filter i { font-size: 10px; }
+
+.feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
+
+.feed-loading { text-align: center; padding: 48px 0; color: var(--text-faint); font-size: 13px; }
+
+.feed-empty { text-align: center; padding: 48px 0; }
+.feed-empty-icon { font-size: 32px; color: var(--text-faint); margin-bottom: 12px; }
+.feed-empty-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
+.feed-empty-sub { font-size: 12px; color: var(--text-dim); }
+
+.feed-more { text-align: center; padding: 24px 0; }
+
+@media (max-width: 768px) {
+  .feed-page { padding: 16px; }
+  .feed-title { font-size: 20px; }
+  .feed-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
+  .feed-filters { gap: 4px; }
+  .feed-filter { padding: 5px 10px; font-size: 11px; }
+}
+@media (max-width: 480px) {
+  .feed-grid { grid-template-columns: 1fr; }
+}
+</style>