Adding features

app/pages/updates/user/[id].vue

@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <PageHeader
+      :title="user?.name ? `${user.name}'s Updates` : 'User Updates'"
+      :subtitle="user?.name ? `All updates from ${user.name}` : 'Loading...'"
+      theme="stone"
+      size="medium"
+    />
+
+    <section class="py-12 px-4">
+      <UContainer class="px-4">
+        <!-- Loading State -->
+        <div
+          v-if="pending && !updates.length"
+          class="flex justify-center items-center py-20"
+        >
+          <div class="text-center">
+            <div
+              class="w-8 h-8 border-4 border-stone-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
+            ></div>
+            <p class="text-stone-400">Loading updates...</p>
+          </div>
+        </div>
+
+        <!-- Updates Feed -->
+        <div v-else-if="updates.length" class="space-y-6">
+          <UpdateCard
+            v-for="update in updates"
+            :key="update._id"
+            :update="update"
+            :show-preview="true"
+            @edit="handleEdit"
+            @delete="handleDelete"
+          />
+
+          <!-- Load More -->
+          <div v-if="hasMore" class="flex justify-center pt-4">
+            <UButton
+              variant="outline"
+              color="neutral"
+              :loading="loadingMore"
+              @click="loadMore"
+            >
+              Load More
+            </UButton>
+          </div>
+        </div>
+
+        <!-- Empty State -->
+        <div v-else class="text-center py-20">
+          <div class="w-16 h-16 mx-auto mb-4 opacity-50">
+            <svg
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              class="text-stone-600"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+              />
+            </svg>
+          </div>
+          <h3 class="text-lg font-medium text-stone-300 mb-2">
+            No updates yet
+          </h3>
+          <p class="text-stone-400">
+            {{ user?.name || "This user" }} hasn't posted any updates.
+          </p>
+        </div>
+      </UContainer>
+    </section>
+
+    <!-- Delete Confirmation Modal -->
+    <UModal
+      v-model:open="showDeleteModal"
+      title="Delete Update?"
+      description="Are you sure you want to delete this update? This action cannot be undone."
+    >
+      <template #footer>
+        <div class="flex justify-end gap-3">
+          <UButton
+            variant="ghost"
+            color="neutral"
+            @click="showDeleteModal = false"
+          >
+            Cancel
+          </UButton>
+          <UButton color="red" :loading="deleting" @click="confirmDelete">
+            Delete
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute();
+const userId = computed(() => route.params.id);
+
+const updates = ref([]);
+const user = ref(null);
+const pending = ref(false);
+const loadingMore = ref(false);
+const hasMore = ref(false);
+const total = ref(0);
+
+const showDeleteModal = ref(false);
+const updateToDelete = ref(null);
+const deleting = ref(false);
+
+// Load user updates
+const loadUpdates = async () => {
+  pending.value = true;
+  try {
+    const response = await $fetch(`/api/updates/user/${userId.value}`, {
+      params: { limit: 20, skip: 0 },
+    });
+    updates.value = response.updates;
+    user.value = response.user;
+    total.value = response.total;
+    hasMore.value = response.hasMore;
+  } catch (error) {
+    console.error("Failed to load updates:", error);
+  } finally {
+    pending.value = false;
+  }
+};
+
+// Load more updates
+const loadMore = async () => {
+  loadingMore.value = true;
+  try {
+    const response = await $fetch(`/api/updates/user/${userId.value}`, {
+      params: { limit: 20, skip: updates.value.length },
+    });
+    updates.value.push(...response.updates);
+    hasMore.value = response.hasMore;
+  } catch (error) {
+    console.error("Failed to load more updates:", error);
+  } finally {
+    loadingMore.value = false;
+  }
+};
+
+// Handle edit
+const handleEdit = (update) => {
+  navigateTo(`/updates/${update._id}/edit`);
+};
+
+// Handle delete
+const handleDelete = (update) => {
+  updateToDelete.value = update;
+  showDeleteModal.value = true;
+};
+
+// Confirm delete
+const confirmDelete = async () => {
+  if (!updateToDelete.value) return;
+
+  deleting.value = true;
+  try {
+    await $fetch(`/api/updates/${updateToDelete.value._id}`, {
+      method: "DELETE",
+    });
+
+    // Remove from list
+    updates.value = updates.value.filter(
+      (u) => u._id !== updateToDelete.value._id,
+    );
+    total.value--;
+
+    showDeleteModal.value = false;
+    updateToDelete.value = null;
+  } catch (error) {
+    console.error("Failed to delete update:", error);
+    alert("Failed to delete update. Please try again.");
+  } finally {
+    deleting.value = false;
+  }
+};
+
+onMounted(() => {
+  loadUpdates();
+});
+
+useHead({
+  title: computed(() => user.value?.name ? `${user.value.name}'s Updates - Ghost Guild` : 'User Updates - Ghost Guild'),
+});
+</script>