@commonpub/layer 0.1.0

package/components/FilterChip.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  active?: boolean;
+}>();
+
+defineEmits<{
+  toggle: [];
+}>();
+</script>
+
+<template>
+  <button
+    class="cpub-filter-chip"
+    :class="{ active }"
+    :aria-pressed="active"
+    @click="$emit('toggle')"
+  >
+    {{ label }}
+  </button>
+</template>

package/components/HeatmapGrid.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+const props = defineProps<{
+  data?: Record<string, number>;
+  weeks?: number;
+}>();
+
+const weekCount = props.weeks ?? 26;
+const days = 7;
+
+function getLevel(date: string): number {
+  const count = props.data?.[date] ?? 0;
+  if (count === 0) return 0;
+  if (count <= 2) return 1;
+  if (count <= 5) return 2;
+  if (count <= 10) return 3;
+  return 4;
+}
+
+function getDateStr(weekIdx: number, dayIdx: number): string {
+  const today = new Date();
+  const totalDays = weekCount * 7;
+  const startDate = new Date(today);
+  startDate.setDate(startDate.getDate() - totalDays + (weekIdx * 7) + dayIdx);
+  return startDate.toISOString().slice(0, 10);
+}
+</script>
+
+<template>
+  <div class="cpub-heatmap" role="img" aria-label="Contribution heatmap">
+    <div class="cpub-heatmap-grid">
+      <div v-for="w in weekCount" :key="w" class="cpub-heatmap-col">
+        <div
+          v-for="d in days"
+          :key="d"
+          class="cpub-heatmap-cell"
+          :data-level="getLevel(getDateStr(w - 1, d - 1))"
+          :title="getDateStr(w - 1, d - 1)"
+        ></div>
+      </div>
+    </div>
+    <div class="cpub-heatmap-legend">
+      <span class="cpub-heatmap-legend-label">Less</span>
+      <div class="cpub-heatmap-cell" data-level="0"></div>
+      <div class="cpub-heatmap-cell" data-level="1"></div>
+      <div class="cpub-heatmap-cell" data-level="2"></div>
+      <div class="cpub-heatmap-cell" data-level="3"></div>
+      <div class="cpub-heatmap-cell" data-level="4"></div>
+      <span class="cpub-heatmap-legend-label">More</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-heatmap-grid {
+  display: flex;
+  gap: 2px;
+  overflow-x: auto;
+}
+
+.cpub-heatmap-col {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cpub-heatmap-cell {
+  width: 10px;
+  height: 10px;
+  border: var(--border-width-default) solid var(--border2);
+}
+
+.cpub-heatmap-cell[data-level="0"] { background: var(--surface2); }
+.cpub-heatmap-cell[data-level="1"] { background: var(--accent-bg-strong); border-color: var(--accent-border); }
+.cpub-heatmap-cell[data-level="2"] { background: var(--accent-bg-heavy); border-color: var(--accent-border); }
+.cpub-heatmap-cell[data-level="3"] { background: var(--accent-bg-solid); border-color: var(--accent-bg-solid); }
+.cpub-heatmap-cell[data-level="4"] { background: var(--accent); border-color: var(--accent); }
+
+.cpub-heatmap-legend {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  margin-top: 8px;
+  justify-content: flex-end;
+}
+
+.cpub-heatmap-legend-label {
+  font-size: 9px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  margin: 0 4px;
+}
+</style>

package/components/ImageUpload.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: string;
+  purpose: 'avatar' | 'banner' | 'cover';
+  label?: string;
+  hint?: string;
+  aspectClass?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [url: string];
+}>();
+
+const uploading = ref(false);
+const error = ref('');
+const fileInput = ref<HTMLInputElement | null>(null);
+
+function triggerPicker(): void {
+  fileInput.value?.click();
+}
+
+async function handleFileChange(event: Event): Promise<void> {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (!file) return;
+
+  if (!file.type.startsWith('image/')) {
+    error.value = 'Please select an image file.';
+    return;
+  }
+
+  if (file.size > 10 * 1024 * 1024) {
+    error.value = 'Image must be under 10MB.';
+    return;
+  }
+
+  error.value = '';
+  uploading.value = true;
+
+  try {
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('purpose', props.purpose);
+
+    const result = await $fetch<{ url: string }>('/api/files/upload', {
+      method: 'POST',
+      body: formData,
+    });
+
+    emit('update:modelValue', result.url);
+  } catch (err: unknown) {
+    error.value = (err as { data?: { statusMessage?: string } })?.data?.statusMessage || 'Upload failed.';
+  } finally {
+    uploading.value = false;
+    if (target) target.value = '';
+  }
+}
+
+function clearImage(): void {
+  emit('update:modelValue', '');
+}
+</script>
+
+<template>
+  <div class="cpub-img-upload">
+    <label v-if="label" class="cpub-img-upload-label">{{ label }}</label>
+
+    <div
+      class="cpub-img-upload-zone"
+      :class="[aspectClass || (purpose === 'banner' ? 'cpub-img-banner' : purpose === 'cover' ? 'cpub-img-cover' : 'cpub-img-square'), { 'cpub-img-has-preview': modelValue }]"
+      @click="triggerPicker"
+    >
+      <img v-if="modelValue" :src="modelValue" alt="Preview" class="cpub-img-preview" />
+      <div v-else class="cpub-img-placeholder">
+        <span v-if="uploading">Uploading...</span>
+        <span v-else>Click to upload</span>
+      </div>
+      <div v-if="modelValue && !uploading" class="cpub-img-overlay">
+        <span>Change</span>
+      </div>
+    </div>
+
+    <input
+      ref="fileInput"
+      type="file"
+      accept="image/*"
+      class="cpub-img-file-input"
+      @change="handleFileChange"
+    />
+
+    <div v-if="modelValue" class="cpub-img-actions">
+      <button type="button" class="cpub-img-remove" @click.stop="clearImage">Remove</button>
+    </div>
+
+    <span v-if="hint && !error" class="cpub-img-hint">{{ hint }}</span>
+    <span v-if="error" class="cpub-img-error">{{ error }}</span>
+  </div>
+</template>
+
+<style scoped>
+.cpub-img-upload {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cpub-img-upload-label {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-dim);
+}
+
+.cpub-img-upload-zone {
+  position: relative;
+  border: 2px dashed var(--border);
+  border-radius: 0;
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  background: var(--color-surface);
+}
+
+.cpub-img-upload-zone:hover {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.cpub-img-upload-zone.cpub-img-has-preview {
+  border-style: solid;
+}
+
+.cpub-img-square {
+  width: 120px;
+  height: 120px;
+}
+
+.cpub-img-cover {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  min-height: 120px;
+}
+
+.cpub-img-banner {
+  width: 100%;
+  aspect-ratio: 4 / 1;
+  min-height: 100px;
+}
+
+.cpub-img-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cpub-img-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: var(--text-faint);
+  font-size: 0.75rem;
+}
+
+.cpub-img-overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--color-surface-scrim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.cpub-img-upload-zone:hover .cpub-img-overlay {
+  opacity: 1;
+}
+
+.cpub-img-file-input {
+  display: none;
+}
+
+.cpub-img-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.cpub-img-remove {
+  font-size: 0.6875rem;
+  color: var(--red);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+.cpub-img-remove:hover { text-decoration: underline; }
+
+.cpub-img-hint {
+  font-size: 0.6875rem;
+  color: var(--text-faint);
+}
+
+.cpub-img-error {
+  font-size: 0.6875rem;
+  color: var(--red);
+}
+</style>

package/components/MemberCard.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+const props = defineProps<{
+  username: string;
+  displayName: string;
+  avatar?: string;
+  role: 'owner' | 'moderator' | 'member';
+  joinedAt: Date;
+}>();
+
+const roleBadgeClass = computed((): string => {
+  const map: Record<string, string> = {
+    owner: 'cpub-member-role-owner',
+    moderator: 'cpub-member-role-mod',
+    member: 'cpub-member-role-member',
+  };
+  return map[props.role] || 'cpub-member-role-member';
+});
+
+const joinedFormatted = computed((): string => {
+  return new Date(props.joinedAt).toLocaleDateString('en-US', {
+    month: 'short',
+    year: 'numeric',
+  });
+});
+</script>
+
+<template>
+  <div class="cpub-member-card">
+    <div class="cpub-member-avatar-wrap">
+      <div v-if="avatar" class="cpub-member-avatar">
+        <img :src="avatar" :alt="displayName" />
+      </div>
+      <div v-else class="cpub-member-avatar cpub-member-avatar-placeholder">
+        {{ displayName.charAt(0).toUpperCase() }}
+      </div>
+    </div>
+    <div class="cpub-member-info">
+      <NuxtLink :to="`/u/${username}`" class="cpub-member-name">
+        {{ displayName }}
+      </NuxtLink>
+      <span class="cpub-member-username">@{{ username }}</span>
+    </div>
+    <div class="cpub-member-footer">
+      <span :class="['cpub-member-role', roleBadgeClass]">{{ role }}</span>
+      <span class="cpub-member-joined">Joined {{ joinedFormatted }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-member-card {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--space-2);
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.cpub-member-card:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-member-avatar-wrap {
+  flex-shrink: 0;
+}
+
+.cpub-member-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-member-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cpub-member-avatar-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface2);
+  font-family: var(--font-mono);
+  font-size: var(--text-md);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-dim);
+}
+
+.cpub-member-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.cpub-member-name {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text);
+  text-decoration: none;
+  line-height: var(--leading-tight);
+}
+
+.cpub-member-name:hover {
+  color: var(--accent);
+}
+
+.cpub-member-username {
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}
+
+.cpub-member-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1);
+  margin-top: var(--space-1);
+}
+
+.cpub-member-role {
+  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-member-role-owner {
+  color: var(--red);
+  background: var(--red-bg);
+  border-color: var(--red-border);
+}
+
+.cpub-member-role-mod {
+  color: var(--purple);
+  background: var(--purple-bg);
+  border-color: var(--purple-border);
+}
+
+.cpub-member-role-member {
+  color: var(--text-faint);
+  background: var(--surface2);
+  border-color: var(--border2);
+}
+
+.cpub-member-joined {
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+}
+</style>

package/components/MessageThread.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+defineProps<{
+  messages: Array<{
+    id: string;
+    senderId: string;
+    body: string;
+    createdAt: string;
+  }>;
+  currentUserId: string;
+}>();
+
+const emit = defineEmits<{
+  send: [message: string];
+}>();
+
+const newMessage = ref('');
+
+function handleSend(): void {
+  if (!newMessage.value.trim()) return;
+  emit('send', newMessage.value);
+  newMessage.value = '';
+}
+</script>
+
+<template>
+  <div class="cpub-thread">
+    <div class="cpub-thread-messages">
+      <div
+        v-for="msg in messages"
+        :key="msg.id"
+        class="cpub-msg"
+        :class="{ own: msg.senderId === currentUserId }"
+      >
+        <div class="cpub-msg-bubble">{{ msg.body }}</div>
+        <time class="cpub-msg-time">
+          {{ new Date(msg.createdAt).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }) }}
+        </time>
+      </div>
+      <p v-if="!messages.length" class="cpub-thread-empty">No messages yet. Say hello!</p>
+    </div>
+    <div class="cpub-thread-input">
+      <input
+        v-model="newMessage"
+        type="text"
+        class="cpub-input"
+        placeholder="Type a message..."
+        aria-label="Message"
+        @keyup.enter="handleSend"
+      />
+      <button class="cpub-btn cpub-btn-primary" :disabled="!newMessage.trim()" @click="handleSend">
+        <i class="fa-solid fa-paper-plane"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-thread {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.cpub-thread-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cpub-msg {
+  max-width: 70%;
+}
+
+.cpub-msg.own {
+  align-self: flex-end;
+}
+
+.cpub-msg-bubble {
+  padding: 8px 12px;
+  font-size: 13px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  line-height: 1.5;
+}
+
+.cpub-msg.own .cpub-msg-bubble {
+  background: var(--accent-bg);
+  border-color: var(--accent-border);
+}
+
+.cpub-msg-time {
+  font-size: 9px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  margin-top: 2px;
+  display: block;
+}
+
+.cpub-thread-empty {
+  text-align: center;
+  color: var(--text-faint);
+  font-size: 13px;
+  padding: 32px;
+}
+
+.cpub-thread-input {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  border-top: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+}
+
+.cpub-thread-input .cpub-input {
+  flex: 1;
+}
+</style>

package/components/NotificationItem.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+defineProps<{
+  notification: {
+    id: string;
+    type: string;
+    message: string;
+    actorName?: string | null;
+    link?: string | null;
+    targetUrl?: string;
+    read: boolean;
+    createdAt: string;
+  };
+}>();
+
+const iconMap: Record<string, string> = {
+  like: 'fa-solid fa-heart',
+  comment: 'fa-solid fa-comment',
+  follow: 'fa-solid fa-user-plus',
+  mention: 'fa-solid fa-at',
+  system: 'fa-solid fa-bell',
+};
+</script>
+
+<template>
+  <div class="cpub-notif" :class="{ unread: !notification.read }">
+    <div class="cpub-notif-icon">
+      <i :class="iconMap[notification.type] || 'fa-solid fa-bell'"></i>
+    </div>
+    <div class="cpub-notif-body">
+      <p class="cpub-notif-text">
+        <strong v-if="notification.actorName">{{ notification.actorName }}</strong>
+        {{ notification.message }}
+      </p>
+      <time class="cpub-notif-time">
+        {{ new Date(notification.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
+      </time>
+    </div>
+    <NuxtLink v-if="notification.link || notification.targetUrl" :to="notification.link || notification.targetUrl || '#'" class="cpub-notif-link" aria-label="View">
+      <i class="fa-solid fa-arrow-right"></i>
+    </NuxtLink>
+  </div>
+</template>
+
+<style scoped>
+.cpub-notif {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px;
+  border: var(--border-width-default) solid transparent;
+  border-bottom: var(--border-width-default) solid var(--border2);
+}
+
+.cpub-notif.unread {
+  background: var(--accent-bg);
+  border-color: var(--accent-border);
+}
+
+.cpub-notif-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: 11px;
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+.cpub-notif-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.cpub-notif-text {
+  font-size: 12px;
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.cpub-notif-time {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}
+
+.cpub-notif-link {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-faint);
+  text-decoration: none;
+  font-size: 10px;
+}
+
+.cpub-notif-link:hover {
+  color: var(--accent);
+}
+</style>