@commonpub/layer 0.1.0

package/pages/hubs/[slug]/posts/[postId].vue

@@ -0,0 +1,352 @@
+<script setup lang="ts">
+import type { Serialized, HubPostItem, HubDetail, HubReplyItem } from '@commonpub/server';
+
+const route = useRoute();
+const slug = computed(() => route.params.slug as string);
+const postId = computed(() => route.params.postId as string);
+
+const { isAuthenticated, user: authUser } = useAuth();
+const toast = useToast();
+
+const { data: hub } = useLazyFetch<Serialized<HubDetail>>(() => `/api/hubs/${slug.value}`);
+const { data: postData, refresh: refreshPost } = useLazyFetch<Serialized<HubPostItem> & { isLiked?: boolean }>(() => `/api/hubs/${slug.value}/posts/${postId.value}`);
+const { data: repliesData, refresh: refreshReplies } = useLazyFetch<{ items: Serialized<HubReplyItem>[]; total: number }>(() => `/api/hubs/${slug.value}/posts/${postId.value}/replies`, { default: () => ({ items: [], total: 0 }) });
+
+const post = computed(() => postData.value);
+const replies = computed(() => repliesData.value?.items ?? []);
+
+const isMod = computed(() => {
+  const role = hub.value?.currentUserRole;
+  return role === 'owner' || role === 'admin' || role === 'moderator';
+});
+
+const isAuthor = computed(() => post.value?.author?.id === authUser.value?.id);
+
+// Reply
+const replyContent = ref('');
+const replying = ref(false);
+const replyingTo = ref<string | null>(null);
+
+async function handleReply(): Promise<void> {
+  if (!replyContent.value.trim()) return;
+  replying.value = true;
+  try {
+    await $fetch(`/api/hubs/${slug.value}/posts/${postId.value}/replies`, {
+      method: 'POST',
+      body: { content: replyContent.value, parentId: replyingTo.value || undefined },
+    });
+    replyContent.value = '';
+    replyingTo.value = null;
+    await Promise.all([refreshReplies(), refreshPost()]);
+  } catch {
+    toast.error('Failed to post reply');
+  } finally {
+    replying.value = false;
+  }
+}
+
+// Like
+const liking = ref(false);
+async function toggleLike(): Promise<void> {
+  if (!isAuthenticated.value) return;
+  liking.value = true;
+  try {
+    await $fetch(`/api/hubs/${slug.value}/posts/${postId.value}/like`, { method: 'POST' });
+    await refreshPost();
+  } catch {
+    toast.error('Failed to like post');
+  } finally {
+    liking.value = false;
+  }
+}
+
+// Mod actions
+async function togglePin(): Promise<void> {
+  try {
+    await $fetch(`/api/hubs/${slug.value}/posts/${postId.value}/pin`, { method: 'POST' });
+    await refreshPost();
+    toast.success(post.value?.isPinned ? 'Post unpinned' : 'Post pinned');
+  } catch {
+    toast.error('Failed to toggle pin');
+  }
+}
+
+async function toggleLock(): Promise<void> {
+  try {
+    await $fetch(`/api/hubs/${slug.value}/posts/${postId.value}/lock`, { method: 'POST' });
+    await refreshPost();
+    toast.success(post.value?.isLocked ? 'Post unlocked' : 'Post locked');
+  } catch {
+    toast.error('Failed to toggle lock');
+  }
+}
+
+async function deletePost(): Promise<void> {
+  if (!confirm('Delete this post?')) return;
+  try {
+    await $fetch(`/api/hubs/${slug.value}/posts/${postId.value}`, { method: 'DELETE' });
+    toast.success('Post deleted');
+    await navigateTo(`/hubs/${slug.value}`);
+  } catch {
+    toast.error('Failed to delete post');
+  }
+}
+
+function formatDate(d: string | Date): string {
+  return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' });
+}
+
+useSeoMeta({
+  title: () => post.value ? `${post.value.content?.slice(0, 60)} — ${hub.value?.name ?? 'Hub'}` : 'Post',
+});
+</script>
+
+<template>
+  <div v-if="post" class="cpub-post-page">
+    <!-- Breadcrumb -->
+    <div class="cpub-post-breadcrumb">
+      <NuxtLink :to="`/hubs/${slug}`" class="cpub-breadcrumb-link">
+        <i class="fa-solid fa-arrow-left"></i> {{ hub?.name ?? 'Hub' }}
+      </NuxtLink>
+    </div>
+
+    <!-- Post -->
+    <article class="cpub-post-card">
+      <div v-if="post.isPinned" class="cpub-post-pin">
+        <i class="fa-solid fa-thumbtack"></i> Pinned
+      </div>
+
+      <div class="cpub-post-header">
+        <span class="cpub-post-type-badge">{{ post.type }}</span>
+        <span v-if="post.isLocked" class="cpub-post-locked"><i class="fa-solid fa-lock"></i> Locked</span>
+      </div>
+
+      <div class="cpub-post-content">{{ post.content }}</div>
+
+      <div class="cpub-post-meta">
+        <div class="cpub-post-author">
+          <div class="cpub-post-avatar">
+            <img v-if="post.author?.avatarUrl" :src="post.author.avatarUrl" :alt="post.author?.displayName || post.author?.username" class="cpub-post-avatar-img" />
+            <span v-else>{{ (post.author?.displayName || post.author?.username || 'U').charAt(0).toUpperCase() }}</span>
+          </div>
+          <NuxtLink :to="`/u/${post.author?.username}`" class="cpub-post-author-name">{{ post.author?.displayName || post.author?.username }}</NuxtLink>
+          <span class="cpub-post-sep">&middot;</span>
+          <time class="cpub-post-time">{{ formatDate(post.createdAt) }}</time>
+        </div>
+
+        <div class="cpub-post-actions">
+          <button class="cpub-post-action-btn" :class="{ active: post.isLiked }" :disabled="liking || !isAuthenticated" @click="toggleLike" :title="isAuthenticated ? 'Like' : 'Log in to like'">
+            <i :class="post.isLiked ? 'fa-solid fa-heart' : 'fa-regular fa-heart'"></i>
+            {{ post.likeCount ?? 0 }}
+          </button>
+          <span class="cpub-post-action-btn" style="cursor: default">
+            <i class="fa-solid fa-comment"></i> {{ post.replyCount ?? 0 }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Mod actions -->
+      <div v-if="isMod || isAuthor" class="cpub-post-mod-bar">
+        <button v-if="isMod" class="cpub-btn cpub-btn-sm" @click="togglePin">
+          <i class="fa-solid fa-thumbtack"></i> {{ post.isPinned ? 'Unpin' : 'Pin' }}
+        </button>
+        <button v-if="isMod" class="cpub-btn cpub-btn-sm" @click="toggleLock">
+          <i class="fa-solid fa-lock"></i> {{ post.isLocked ? 'Unlock' : 'Lock' }}
+        </button>
+        <button v-if="isMod || isAuthor" class="cpub-btn cpub-btn-sm cpub-btn-danger" @click="deletePost">
+          <i class="fa-solid fa-trash"></i> Delete
+        </button>
+      </div>
+    </article>
+
+    <!-- Reply form -->
+    <div v-if="isAuthenticated && !post.isLocked && hub?.currentUserRole" class="cpub-reply-form">
+      <div v-if="replyingTo" class="cpub-replying-to">
+        Replying to a comment <button class="cpub-cancel-reply" @click="replyingTo = null"><i class="fa-solid fa-xmark"></i></button>
+      </div>
+      <div class="cpub-reply-row">
+        <input v-model="replyContent" class="cpub-reply-input" type="text" placeholder="Write a reply..." @keydown.enter="handleReply" />
+        <button class="cpub-btn cpub-btn-sm cpub-btn-primary" :disabled="replying || !replyContent.trim()" @click="handleReply">
+          <i class="fa-solid fa-paper-plane"></i> Reply
+        </button>
+      </div>
+    </div>
+    <div v-else-if="post.isLocked" class="cpub-post-locked-notice">
+      <i class="fa-solid fa-lock"></i> This post is locked. No new replies.
+    </div>
+
+    <!-- Replies -->
+    <div class="cpub-replies-section">
+      <h3 v-if="replies.length" class="cpub-replies-title">{{ repliesData?.total ?? 0 }} Replies</h3>
+      <div v-for="reply in replies" :key="reply.id" class="cpub-reply">
+        <div class="cpub-reply-author">
+          <div class="cpub-reply-avatar">
+            <img v-if="reply.author?.avatarUrl" :src="reply.author.avatarUrl" :alt="reply.author?.displayName || reply.author?.username" class="cpub-reply-avatar-img" />
+            <span v-else>{{ (reply.author?.displayName || reply.author?.username || 'U').charAt(0).toUpperCase() }}</span>
+          </div>
+          <NuxtLink :to="`/u/${reply.author?.username}`" class="cpub-reply-author-name">{{ reply.author?.displayName || reply.author?.username }}</NuxtLink>
+          <span class="cpub-post-sep">&middot;</span>
+          <time class="cpub-post-time">{{ formatDate(reply.createdAt) }}</time>
+        </div>
+        <div class="cpub-reply-content">{{ reply.content }}</div>
+        <div class="cpub-reply-actions">
+          <button v-if="isAuthenticated && hub?.currentUserRole && !post.isLocked" class="cpub-reply-btn" @click="replyingTo = reply.id; replyContent = `@${reply.author?.username} `">
+            <i class="fa-solid fa-reply"></i> Reply
+          </button>
+        </div>
+
+        <!-- Nested replies -->
+        <div v-if="reply.replies?.length" class="cpub-nested-replies">
+          <div v-for="child in reply.replies" :key="child.id" class="cpub-reply cpub-reply-nested">
+            <div class="cpub-reply-author">
+              <div class="cpub-reply-avatar">
+                <img v-if="child.author?.avatarUrl" :src="child.author.avatarUrl" :alt="child.author?.displayName || child.author?.username" class="cpub-reply-avatar-img" />
+                <span v-else>{{ (child.author?.displayName || child.author?.username || 'U').charAt(0).toUpperCase() }}</span>
+              </div>
+              <NuxtLink :to="`/u/${child.author?.username}`" class="cpub-reply-author-name">{{ child.author?.displayName || child.author?.username }}</NuxtLink>
+              <span class="cpub-post-sep">&middot;</span>
+              <time class="cpub-post-time">{{ formatDate(child.createdAt) }}</time>
+            </div>
+            <div class="cpub-reply-content">{{ child.content }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="!replies.length" class="cpub-empty-state" style="padding: 32px 16px">
+        <p class="cpub-empty-state-title">No replies yet</p>
+        <p v-if="!post.isLocked" class="cpub-empty-state-desc">Be the first to reply.</p>
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="cpub-loading" style="padding: 64px 24px; text-align: center">Loading post...</div>
+</template>
+
+<style scoped>
+.cpub-post-page { max-width: 800px; margin: 0 auto; padding: 24px 16px; }
+
+.cpub-post-breadcrumb { margin-bottom: 16px; }
+.cpub-breadcrumb-link {
+  font-size: 13px; color: var(--text-dim); text-decoration: none;
+  display: inline-flex; align-items: center; gap: 6px;
+}
+.cpub-breadcrumb-link:hover { color: var(--accent); }
+
+.cpub-post-card {
+  background: var(--surface); border: var(--border-width-default) solid var(--border);
+  padding: 20px; margin-bottom: 16px;
+}
+
+.cpub-post-pin {
+  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--accent); margin-bottom: 8px;
+}
+
+.cpub-post-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+
+.cpub-post-type-badge {
+  display: inline-block; padding: 2px 8px; font-family: var(--font-mono);
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--accent); background: var(--accent-bg);
+  border: 1px solid var(--accent-border);
+}
+
+.cpub-post-locked { font-size: 11px; color: var(--text-faint); }
+
+.cpub-post-content {
+  font-size: 15px; line-height: 1.7; color: var(--text);
+  margin-bottom: 16px; white-space: pre-wrap;
+}
+
+.cpub-post-meta {
+  display: flex; align-items: center; justify-content: space-between;
+  flex-wrap: wrap; gap: 8px;
+}
+
+.cpub-post-author { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); }
+
+.cpub-post-avatar {
+  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
+  background: var(--surface2); border: 1px solid var(--border);
+  font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text-dim);
+  overflow: hidden;
+}
+.cpub-post-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+
+.cpub-post-author-name { font-weight: 500; color: var(--text-dim); text-decoration: none; }
+.cpub-post-author-name:hover { color: var(--accent); }
+.cpub-post-sep { color: var(--text-faint); }
+.cpub-post-time { color: var(--text-faint); }
+
+.cpub-post-actions { display: flex; align-items: center; gap: 12px; }
+
+.cpub-post-action-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 12px; color: var(--text-faint); background: none; border: none; cursor: pointer;
+  padding: 4px 8px; border: 1px solid var(--border); transition: all 0.1s;
+}
+.cpub-post-action-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-border); }
+.cpub-post-action-btn.active { color: var(--red); border-color: var(--red); }
+.cpub-post-action-btn:disabled { opacity: 0.5; cursor: default; }
+
+.cpub-post-mod-bar {
+  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
+  display: flex; gap: 6px;
+}
+
+.cpub-btn-danger { color: var(--red); border-color: var(--red); }
+.cpub-btn-danger:hover { background: var(--red); color: white; }
+
+/* Reply form */
+.cpub-reply-form { margin-bottom: 16px; }
+.cpub-replying-to {
+  font-size: 11px; color: var(--text-dim); margin-bottom: 6px;
+  display: flex; align-items: center; gap: 6px;
+}
+.cpub-cancel-reply { background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 12px; }
+.cpub-reply-row { display: flex; gap: 8px; }
+.cpub-reply-input {
+  flex: 1; padding: 8px 12px; background: var(--surface); border: var(--border-width-default) solid var(--border);
+  color: var(--text); font-size: 13px;
+}
+.cpub-reply-input:focus { outline: none; border-color: var(--accent); }
+
+.cpub-post-locked-notice {
+  padding: 12px 16px; background: var(--surface2); border: 1px solid var(--border);
+  font-size: 12px; color: var(--text-faint); margin-bottom: 16px; text-align: center;
+}
+
+/* Replies */
+.cpub-replies-section { }
+.cpub-replies-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
+
+.cpub-reply {
+  padding: 12px 16px; background: var(--surface); border: var(--border-width-default) solid var(--border);
+  margin-bottom: 8px;
+}
+
+.cpub-reply-nested { margin-left: 24px; border-color: var(--border2); }
+.cpub-nested-replies { margin-top: 8px; }
+
+.cpub-reply-author { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-faint); margin-bottom: 6px; }
+
+.cpub-reply-avatar {
+  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
+  background: var(--surface2); border: 1px solid var(--border);
+  font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--text-dim);
+  overflow: hidden;
+}
+.cpub-reply-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+
+.cpub-reply-author-name { font-weight: 500; color: var(--text-dim); text-decoration: none; }
+.cpub-reply-author-name:hover { color: var(--accent); }
+
+.cpub-reply-content { font-size: 13px; line-height: 1.6; color: var(--text); }
+
+.cpub-reply-actions { margin-top: 6px; }
+.cpub-reply-btn {
+  background: none; border: none; cursor: pointer; font-size: 11px;
+  color: var(--text-faint); padding: 2px 0;
+}
+.cpub-reply-btn:hover { color: var(--accent); }
+</style>

package/pages/hubs/[slug]/settings.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+definePageMeta({ middleware: 'auth' });
+
+const route = useRoute();
+const slug = computed(() => route.params.slug as string);
+const toast = useToast();
+
+import type { Serialized, HubDetail } from '@commonpub/server';
+
+const { data: hub } = useLazyFetch<Serialized<HubDetail>>(() => `/api/hubs/${slug.value}`);
+
+useSeoMeta({
+  title: () => `Settings — ${hub.value?.name ?? 'Hub'} — ${useSiteName()}`,
+});
+
+const form = reactive({
+  name: '',
+  description: '',
+  iconUrl: '',
+  bannerUrl: '',
+  rules: '',
+  joinPolicy: 'open',
+  privacy: 'public',
+  website: '',
+});
+
+watch(hub, (h) => {
+  if (!h) return;
+  form.name = h.name ?? '';
+  form.description = h.description ?? '';
+  form.iconUrl = h.iconUrl ?? '';
+  form.bannerUrl = h.bannerUrl ?? '';
+  form.rules = Array.isArray(h.rules) ? (h.rules as string[]).join('\n') : (h.rules ?? '');
+  form.joinPolicy = h.joinPolicy ?? 'open';
+  form.privacy = h.privacy ?? 'public';
+  form.website = h.website ?? '';
+}, { immediate: true });
+
+const saving = ref(false);
+const { extract: extractError } = useApiError();
+
+async function handleSave(): Promise<void> {
+  saving.value = true;
+
+  try {
+    await $fetch(`/api/hubs/${slug.value}`, {
+      method: 'PUT',
+      body: {
+        name: form.name,
+        description: form.description || undefined,
+        iconUrl: form.iconUrl || undefined,
+        bannerUrl: form.bannerUrl || undefined,
+        rules: form.rules || undefined,
+        joinPolicy: form.joinPolicy,
+        privacy: form.privacy,
+        website: form.website || undefined,
+      },
+    });
+    toast.success('Hub settings saved');
+  } catch (err: unknown) {
+    toast.error(extractError(err));
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <div v-if="hub" class="cpub-hub-settings">
+    <div class="cpub-settings-header">
+      <NuxtLink :to="`/hubs/${slug}`" class="cpub-back-link">
+        <i class="fa-solid fa-arrow-left"></i> Back to hub
+      </NuxtLink>
+      <h1 class="cpub-settings-title">Hub Settings</h1>
+      <p class="cpub-settings-subtitle">Manage {{ hub.name }}</p>
+    </div>
+
+    <form class="cpub-settings-form" @submit.prevent="handleSave">
+      <div class="cpub-field">
+        <label for="hub-name" class="cpub-field-label">Name</label>
+        <input
+          id="hub-name"
+          v-model="form.name"
+          type="text"
+          class="cpub-field-input"
+          required
+          placeholder="Hub name"
+        />
+      </div>
+
+      <div class="cpub-field">
+        <label for="hub-desc" class="cpub-field-label">Description</label>
+        <textarea
+          id="hub-desc"
+          v-model="form.description"
+          class="cpub-field-input cpub-field-textarea"
+          rows="3"
+          placeholder="What is this hub about?"
+        />
+      </div>
+
+      <div class="cpub-field-row">
+        <div class="cpub-field">
+          <ImageUpload v-model="form.iconUrl" purpose="avatar" label="Icon / Avatar" hint="Square image, at least 256x256px" />
+        </div>
+        <div class="cpub-field">
+          <ImageUpload v-model="form.bannerUrl" purpose="banner" label="Banner Image" hint="Wide image, at least 1200x300px" />
+        </div>
+      </div>
+
+      <div class="cpub-field">
+        <label for="hub-website" class="cpub-field-label">Website</label>
+        <input
+          id="hub-website"
+          v-model="form.website"
+          type="url"
+          class="cpub-field-input"
+          placeholder="https://example.com"
+        />
+      </div>
+
+      <div class="cpub-field">
+        <label for="hub-rules" class="cpub-field-label">Rules (one per line)</label>
+        <textarea
+          id="hub-rules"
+          v-model="form.rules"
+          class="cpub-field-input cpub-field-textarea"
+          rows="4"
+          placeholder="Be respectful&#10;Stay on topic&#10;No spam"
+        />
+      </div>
+
+      <div class="cpub-field-row">
+        <div class="cpub-field">
+          <label for="hub-join" class="cpub-field-label">Join Policy</label>
+          <select id="hub-join" v-model="form.joinPolicy" class="cpub-field-input">
+            <option value="open">Open — anyone can join</option>
+            <option value="approval">Approval — requests must be approved</option>
+            <option value="invite">Invite Only</option>
+          </select>
+        </div>
+
+        <div class="cpub-field">
+          <label for="hub-privacy" class="cpub-field-label">Privacy</label>
+          <select id="hub-privacy" v-model="form.privacy" class="cpub-field-input">
+            <option value="public">Public — visible to everyone</option>
+            <option value="private">Private — members only</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="cpub-form-actions">
+        <button type="submit" class="cpub-btn cpub-btn-primary" :disabled="saving || !form.name">
+          {{ saving ? 'Saving...' : 'Save Settings' }}
+        </button>
+        <NuxtLink :to="`/hubs/${slug}`" class="cpub-btn">Cancel</NuxtLink>
+      </div>
+    </form>
+  </div>
+
+  <div v-else class="cpub-empty-state" style="padding: 64px 24px">
+    <p class="cpub-empty-state-title">Hub not found</p>
+  </div>
+</template>
+
+<style scoped>
+.cpub-hub-settings {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 32px;
+}
+
+.cpub-settings-header {
+  margin-bottom: 32px;
+}
+
+/* cpub-back-link → global components.css */
+
+.cpub-settings-title {
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.cpub-settings-subtitle {
+  font-size: 13px;
+  color: var(--text-dim);
+}
+
+.cpub-settings-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.cpub-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cpub-field-label {
+  font-size: 11px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+}
+
+.cpub-field-input {
+  padding: 8px 12px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.cpub-field-input:focus {
+  border-color: var(--accent);
+}
+
+.cpub-field-input::placeholder {
+  color: var(--text-faint);
+}
+
+.cpub-field-textarea {
+  resize: vertical;
+  min-height: 60px;
+  line-height: 1.5;
+}
+
+.cpub-field-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.cpub-form-actions {
+  display: flex;
+  gap: 10px;
+  padding-top: 8px;
+}
+
+select.cpub-field-input { cursor: pointer; }
+
+@media (max-width: 640px) {
+  .cpub-hub-settings { padding: 16px; }
+  .cpub-field-row { grid-template-columns: 1fr; }
+}
+</style>