@commonpub/layer 0.1.0

package/components/ProgressTracker.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const progress = ref(0);
+
+function handleScroll(): void {
+  const scrollTop = window.scrollY;
+  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+  progress.value = docHeight > 0 ? Math.min(100, (scrollTop / docHeight) * 100) : 0;
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll, { passive: true });
+});
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll);
+});
+</script>
+
+<template>
+  <div class="cpub-progress-tracker" role="progressbar" :aria-valuenow="Math.round(progress)" aria-valuemin="0" aria-valuemax="100">
+    <div class="cpub-progress-fill" :style="{ width: progress + '%' }"></div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-progress-tracker {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--surface2);
+  z-index: 1000;
+}
+
+.cpub-progress-fill {
+  height: 100%;
+  background: var(--accent);
+  transition: width 0.1s;
+}
+</style>

package/components/PublishErrorsModal.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+/**
+ * Modal showing publish validation errors.
+ * Displayed when the user tries to publish content that's missing required fields.
+ */
+defineProps<{
+  errors: string[];
+  show: boolean;
+}>();
+
+const emit = defineEmits<{
+  dismiss: [];
+}>();
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="show" class="cpub-publish-errors-overlay" @click.self="emit('dismiss')">
+      <div class="cpub-publish-errors-card" role="alertdialog" aria-labelledby="publish-errors-title">
+        <h3 id="publish-errors-title" class="cpub-publish-errors-title">
+          <i class="fa-solid fa-circle-exclamation" /> Not ready to publish
+        </h3>
+        <p class="cpub-publish-errors-subtitle">Please fix the following before publishing:</p>
+        <ul class="cpub-publish-errors-list">
+          <li v-for="(err, i) in errors" :key="i">{{ err }}</li>
+        </ul>
+        <button class="cpub-publish-errors-btn" @click="emit('dismiss')" autofocus>Got it</button>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.cpub-publish-errors-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  background: var(--color-surface-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.cpub-publish-errors-card {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: 28px;
+  max-width: 420px;
+  width: 100%;
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-publish-errors-title {
+  font-family: var(--font-mono);
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--red);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.cpub-publish-errors-subtitle {
+  font-size: 0.875rem;
+  color: var(--text-dim);
+  margin-bottom: 16px;
+}
+
+.cpub-publish-errors-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cpub-publish-errors-list li {
+  font-size: 0.8125rem;
+  color: var(--text);
+  padding: 8px 12px;
+  background: var(--red-bg);
+  border: var(--border-width-default) solid var(--red);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.cpub-publish-errors-list li::before {
+  content: '\2022';
+  color: var(--red);
+  font-weight: 700;
+}
+
+.cpub-publish-errors-btn {
+  font-family: var(--font-mono);
+  padding: 8px 20px;
+  background: var(--accent);
+  color: var(--color-text-inverse);
+  border: var(--border-width-default) solid var(--accent);
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  transition: box-shadow 0.15s, transform 0.15s;
+  box-shadow: var(--shadow-sm);
+}
+.cpub-publish-errors-btn:hover {
+  box-shadow: none;
+  transform: translate(2px, 2px);
+}
+</style>

package/components/RemoteActorCard.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import type { RemoteActorProfile } from '@commonpub/server';
+
+/** Strip HTML tags from remote content to prevent XSS. Remote actor summaries are untrusted. */
+function stripHtml(html: string): string {
+  return html.replace(/<[^>]*>/g, '');
+}
+
+const props = defineProps<{
+  actor: RemoteActorProfile;
+}>();
+
+const emit = defineEmits<{
+  follow: [actorUri: string];
+  unfollow: [actorUri: string];
+}>();
+
+const followLoading = ref(false);
+
+const handle = computed(() => {
+  const username = props.actor.preferredUsername ?? 'unknown';
+  return `@${username}@${props.actor.instanceDomain}`;
+});
+
+const buttonLabel = computed(() => {
+  if (props.actor.isFollowing) return 'Following';
+  if (props.actor.isFollowPending) return 'Pending';
+  return 'Follow';
+});
+
+const buttonDisabled = computed(() => {
+  return followLoading.value || props.actor.isFollowPending === true;
+});
+
+async function toggleFollow() {
+  followLoading.value = true;
+  try {
+    if (props.actor.isFollowing) {
+      emit('unfollow', props.actor.actorUri);
+    } else {
+      emit('follow', props.actor.actorUri);
+    }
+  } finally {
+    followLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-remote-actor-card">
+    <div class="cpub-remote-actor-card__header">
+      <img
+        v-if="actor.avatarUrl"
+        :src="actor.avatarUrl"
+        :alt="`${actor.displayName ?? handle} avatar`"
+        class="cpub-remote-actor-card__avatar"
+        loading="lazy"
+      />
+      <div v-else class="cpub-remote-actor-card__avatar cpub-remote-actor-card__avatar--placeholder">
+        {{ (actor.displayName ?? actor.preferredUsername ?? '?')[0]?.toUpperCase() }}
+      </div>
+
+      <div class="cpub-remote-actor-card__info">
+        <div class="cpub-remote-actor-card__name">
+          {{ actor.displayName ?? actor.preferredUsername ?? 'Unknown' }}
+        </div>
+        <div class="cpub-remote-actor-card__handle">
+          {{ handle }}
+        </div>
+      </div>
+
+      <button
+        class="cpub-remote-actor-card__follow-btn"
+        :class="{
+          'cpub-remote-actor-card__follow-btn--following': actor.isFollowing,
+          'cpub-remote-actor-card__follow-btn--pending': actor.isFollowPending,
+        }"
+        :disabled="buttonDisabled"
+        :aria-label="`${buttonLabel} ${handle}`"
+        @click="toggleFollow"
+      >
+        {{ buttonLabel }}
+      </button>
+    </div>
+
+    <p v-if="actor.summary" class="cpub-remote-actor-card__bio">{{ stripHtml(actor.summary) }}</p>
+
+    <div class="cpub-remote-actor-card__stats">
+      <span v-if="actor.followerCount != null">
+        <strong>{{ actor.followerCount }}</strong> followers
+      </span>
+      <span v-if="actor.followingCount != null">
+        <strong>{{ actor.followingCount }}</strong> following
+      </span>
+      <span class="cpub-remote-actor-card__instance">
+        {{ actor.instanceDomain }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-remote-actor-card {
+  border: var(--border-width-default) solid var(--border);
+  padding: var(--space-4);
+  background: var(--surface-1);
+}
+
+.cpub-remote-actor-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.cpub-remote-actor-card__avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 0;
+  object-fit: cover;
+  border: var(--border-width-default) solid var(--border);
+  flex-shrink: 0;
+}
+
+.cpub-remote-actor-card__avatar--placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-2);
+  color: var(--text-2);
+  font-weight: 700;
+  font-size: var(--font-size-lg);
+}
+
+.cpub-remote-actor-card__info {
+  flex: 1;
+  min-width: 0;
+}
+
+.cpub-remote-actor-card__name {
+  font-weight: 700;
+  color: var(--text-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cpub-remote-actor-card__handle {
+  font-size: var(--font-size-sm);
+  color: var(--text-2);
+  font-family: var(--font-mono);
+}
+
+.cpub-remote-actor-card__follow-btn {
+  padding: var(--space-1) var(--space-3);
+  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;
+}
+
+.cpub-remote-actor-card__follow-btn:hover:not(:disabled) {
+  background: var(--accent);
+  color: var(--surface-1);
+}
+
+.cpub-remote-actor-card__follow-btn--following {
+  background: var(--accent);
+  color: var(--surface-1);
+}
+
+.cpub-remote-actor-card__follow-btn--pending {
+  border-color: var(--text-2);
+  color: var(--text-2);
+  cursor: default;
+}
+
+.cpub-remote-actor-card__follow-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cpub-remote-actor-card__bio {
+  margin-top: var(--space-3);
+  color: var(--text-2);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+}
+
+.cpub-remote-actor-card__stats {
+  margin-top: var(--space-3);
+  display: flex;
+  gap: var(--space-3);
+  font-size: var(--font-size-sm);
+  color: var(--text-2);
+}
+
+.cpub-remote-actor-card__instance {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  opacity: 0.7;
+}
+</style>

package/components/RemoteUserSearch.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+const { searchResult, searchLoading, searchError, searchRemoteUser, followRemoteUser, unfollowRemoteUser } = useFederation();
+
+const query = ref('');
+
+async function onSearch() {
+  const q = query.value.trim();
+  if (q.length < 3) return;
+  await searchRemoteUser(q);
+}
+
+async function onFollow(actorUri: string) {
+  await followRemoteUser(actorUri);
+}
+
+async function onUnfollow(actorUri: string) {
+  await unfollowRemoteUser(actorUri);
+}
+</script>
+
+<template>
+  <div class="cpub-remote-search">
+    <form class="cpub-remote-search__form" @submit.prevent="onSearch">
+      <input
+        v-model="query"
+        type="text"
+        placeholder="@user@instance.example.com"
+        class="cpub-remote-search__input"
+        aria-label="Search for a remote user by handle"
+        :disabled="searchLoading"
+      />
+      <button
+        type="submit"
+        class="cpub-remote-search__btn"
+        :disabled="searchLoading || query.trim().length < 3"
+      >
+        {{ searchLoading ? 'Searching...' : 'Search' }}
+      </button>
+    </form>
+
+    <div v-if="searchError" class="cpub-remote-search__error" role="alert">
+      {{ searchError }}
+    </div>
+
+    <div v-if="searchResult" class="cpub-remote-search__result">
+      <RemoteActorCard
+        :actor="searchResult"
+        @follow="onFollow"
+        @unfollow="onUnfollow"
+      />
+    </div>
+
+    <div
+      v-else-if="!searchLoading && !searchError && query.trim().length >= 3"
+      class="cpub-remote-search__empty"
+    >
+      No results. Make sure you entered a full handle like @user@instance.com
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-remote-search__form {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.cpub-remote-search__input {
+  flex: 1;
+  padding: var(--space-2) var(--space-3);
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface-1);
+  color: var(--text-1);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-base);
+}
+
+.cpub-remote-search__input::placeholder {
+  color: var(--text-2);
+  opacity: 0.6;
+}
+
+.cpub-remote-search__btn {
+  padding: var(--space-2) var(--space-4);
+  border: var(--border-width-default) solid var(--accent);
+  background: var(--accent);
+  color: var(--surface-1);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+}
+
+.cpub-remote-search__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cpub-remote-search__error {
+  margin-top: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border: var(--border-width-default) solid var(--error);
+  color: var(--error);
+  font-size: var(--font-size-sm);
+}
+
+.cpub-remote-search__result {
+  margin-top: var(--space-4);
+}
+
+.cpub-remote-search__empty {
+  margin-top: var(--space-4);
+  color: var(--text-2);
+  font-size: var(--font-size-sm);
+}
+</style>

package/components/SearchFilters.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+const props = defineProps<{
+  diffFilters: string[];
+  activeTags: string[];
+  dateFrom: string;
+  dateTo: string;
+  authorFilter: string;
+  communityFilter: string;
+}>();
+
+const emit = defineEmits<{
+  'update:diffFilters': [val: string[]];
+  'update:activeTags': [val: string[]];
+  'update:dateFrom': [val: string];
+  'update:dateTo': [val: string];
+  'update:authorFilter': [val: string];
+  'update:communityFilter': [val: string];
+  apply: [];
+  clear: [];
+}>();
+
+const tagInput = ref('');
+
+function toggleDiff(val: string): void {
+  const current = [...props.diffFilters];
+  const idx = current.indexOf(val);
+  if (idx >= 0) current.splice(idx, 1);
+  else current.push(val);
+  emit('update:diffFilters', current);
+}
+
+function addTag(): void {
+  const t = tagInput.value.trim();
+  if (t && !props.activeTags.includes(t)) {
+    emit('update:activeTags', [...props.activeTags, t]);
+  }
+  tagInput.value = '';
+}
+
+function removeTag(tag: string): void {
+  emit('update:activeTags', props.activeTags.filter(t => t !== tag));
+}
+</script>
+
+<template>
+  <div class="cpub-adv-panel">
+    <div class="cpub-adv-grid">
+      <!-- Difficulty -->
+      <div class="cpub-adv-section">
+        <label class="cpub-adv-label">Difficulty</label>
+        <div class="cpub-checkbox-group">
+          <label v-for="d in ['Beginner', 'Intermediate', 'Advanced']" :key="d" class="cpub-check-item">
+            <input
+              type="checkbox"
+              :checked="diffFilters.includes(d.toLowerCase())"
+              @change="toggleDiff(d.toLowerCase())"
+            />
+            <span>{{ d }}</span>
+          </label>
+        </div>
+      </div>
+
+      <!-- Tags -->
+      <div class="cpub-adv-section">
+        <label class="cpub-adv-label">Tags</label>
+        <input
+          v-model="tagInput"
+          class="cpub-adv-input"
+          type="text"
+          placeholder="Add tag&hellip;"
+          @keyup.enter="addTag"
+        />
+        <div class="cpub-tag-chips">
+          <span
+            v-for="tag in activeTags"
+            :key="tag"
+            class="cpub-tag-chip active"
+          >
+            {{ tag }} <span class="cpub-rm" @click="removeTag(tag)">&times;</span>
+          </span>
+        </div>
+      </div>
+
+      <!-- Date Range -->
+      <div class="cpub-adv-section">
+        <label class="cpub-adv-label">Date Range</label>
+        <input :value="dateFrom" class="cpub-adv-input" type="text" placeholder="From: yyyy-mm-dd" @input="emit('update:dateFrom', ($event.target as HTMLInputElement).value)" />
+        <input :value="dateTo" class="cpub-adv-input" type="text" placeholder="To: yyyy-mm-dd" @input="emit('update:dateTo', ($event.target as HTMLInputElement).value)" />
+      </div>
+
+      <!-- Author / Community -->
+      <div class="cpub-adv-section">
+        <label class="cpub-adv-label">Author</label>
+        <input :value="authorFilter" class="cpub-adv-input" type="text" placeholder="Username or name&hellip;" @input="emit('update:authorFilter', ($event.target as HTMLInputElement).value)" />
+        <label class="cpub-adv-label" style="margin-top: 10px">Community</label>
+        <input :value="communityFilter" class="cpub-adv-input" type="text" placeholder="Community name&hellip;" @input="emit('update:communityFilter', ($event.target as HTMLInputElement).value)" />
+      </div>
+
+      <!-- Actions -->
+      <div class="cpub-adv-actions">
+        <button class="cpub-btn cpub-btn-primary cpub-btn-sm" @click="emit('apply')">
+          <i class="fa-solid fa-check"></i> Apply Filters
+        </button>
+        <button class="cpub-btn cpub-btn-ghost cpub-btn-sm" @click="emit('clear')">
+          Clear All
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-adv-panel {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  border-top: none;
+  padding: 24px 32px 28px;
+  margin-bottom: 24px;
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-adv-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr) auto;
+  gap: 20px;
+  align-items: start;
+}
+
+.cpub-adv-label {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  display: block;
+  margin-bottom: 10px;
+}
+
+.cpub-checkbox-group { display: flex; flex-direction: column; gap: 7px; }
+
+.cpub-check-item {
+  display: flex; align-items: center; gap: 8px; cursor: pointer;
+}
+
+.cpub-check-item input[type="checkbox"] {
+  width: 13px; height: 13px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
+}
+
+.cpub-check-item span { font-size: 12px; color: var(--text-dim); user-select: none; }
+.cpub-check-item input:checked + span { color: var(--text); }
+
+.cpub-adv-input {
+  width: 100%;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+  padding: 7px 10px;
+  font-size: 12px;
+  color: var(--text);
+  font-family: system-ui, -apple-system, sans-serif;
+  outline: none;
+  margin-bottom: 6px;
+  transition: border-color 0.15s;
+}
+
+.cpub-adv-input:focus { border-color: var(--accent); }
+.cpub-adv-input::placeholder { color: var(--text-faint); }
+
+.cpub-tag-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
+
+.cpub-tag-chip {
+  font-size: 10px; font-family: var(--font-mono); padding: 3px 8px;
+  border: var(--border-width-default) solid var(--border2); background: var(--surface2); color: var(--text-dim);
+  display: flex; align-items: center; gap: 5px; cursor: default;
+}
+
+.cpub-tag-chip.active {
+  background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent);
+}
+
+.cpub-rm { font-size: 11px; cursor: pointer; line-height: 1; }
+
+.cpub-adv-actions {
+  display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; padding-top: 20px;
+}
+
+@media (max-width: 1024px) { .cpub-adv-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 640px) { .cpub-adv-grid { grid-template-columns: 1fr; } }
+</style>