Jennie Robinson Faber
fcd6f4cdf4
Migrate the entire admin section from the dark guild-* Tailwind theme to the zine design system (dashed borders, CSS custom properties, Brygada 1918 + Commit Mono, cream/dark mode palette). - Replace admin top-nav layout with sidebar matching default layout - Reskin dashboard, members, events, series management pages - Reskin events/create and series/create form pages - Add dev-only test login endpoint (GET /api/dev/test-login) - Redirect duplicate admin/dashboard.vue to /admin - Update CLAUDE.md design system docs
590 lines
14 KiB
Vue
590 lines
14 KiB
Vue
<template>
|
|
<div>
|
|
<PageHeader
|
|
title="My Updates"
|
|
subtitle="Your activity and milestones in the Guild"
|
|
/>
|
|
|
|
<!-- Content Area: two-column with events mini sidebar -->
|
|
<div class="content-area">
|
|
|
|
<!-- Main Content -->
|
|
<div class="content-main">
|
|
<ClientOnly>
|
|
|
|
<!-- Stats + New Update row -->
|
|
<div v-if="isAuthenticated && !pending" class="stats-row">
|
|
<span class="stats-count">
|
|
<strong>{{ total }}</strong> {{ total === 1 ? 'update' : 'updates' }} posted
|
|
</span>
|
|
<NuxtLink to="/updates/new" class="btn btn-primary">+ New Update</NuxtLink>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="pending && !updates.length" class="state-box">
|
|
<div class="spinner"></div>
|
|
<p class="state-text">Loading your updates...</p>
|
|
</div>
|
|
|
|
<!-- Unauthenticated State -->
|
|
<div v-else-if="!isAuthenticated" class="state-box">
|
|
<div class="state-icon">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
|
|
</svg>
|
|
</div>
|
|
<h2 class="state-heading">Sign in required</h2>
|
|
<p class="state-text">Please sign in to view your updates.</p>
|
|
<button
|
|
class="btn btn-primary"
|
|
@click="openLoginModal({ title: 'Sign in to view your updates', description: 'Enter your email to access your updates' })"
|
|
>
|
|
Sign In
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Updates Timeline -->
|
|
<div v-else-if="updates.length" class="timeline-wrap">
|
|
<div class="timeline">
|
|
<div
|
|
v-for="update in updates"
|
|
:key="update._id"
|
|
class="tl-item"
|
|
>
|
|
<div class="tl-dot">✎</div>
|
|
<div class="tl-time">{{ formatDate(update.createdAt) }}</div>
|
|
<div class="tl-text">
|
|
<NuxtLink :to="`/updates/${update._id}`" class="tl-title">
|
|
{{ getUpdateTitle(update) }}
|
|
</NuxtLink>
|
|
<span v-if="isEdited(update)" class="tl-edited">(edited)</span>
|
|
<span v-if="update.privacy === 'private'" class="badge">Private</span>
|
|
<span v-if="update.privacy === 'public'" class="badge">Public</span>
|
|
</div>
|
|
<div v-if="getUpdatePreview(update)" class="tl-detail">
|
|
{{ getUpdatePreview(update) }}
|
|
</div>
|
|
|
|
<!-- Images -->
|
|
<div v-if="update.images?.length" class="tl-images">
|
|
<img
|
|
v-for="(image, index) in update.images"
|
|
:key="index"
|
|
:src="image.url"
|
|
:alt="image.alt || 'Update image'"
|
|
class="tl-image"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div v-if="isAuthor(update)" class="tl-actions">
|
|
<button class="tl-action-btn" @click="handleEdit(update)">Edit</button>
|
|
<span class="tl-action-sep">·</span>
|
|
<button class="tl-action-btn tl-action-danger" @click="handleDelete(update)">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load More -->
|
|
<div v-if="hasMore" class="load-more">
|
|
<button
|
|
class="btn"
|
|
:disabled="loadingMore"
|
|
@click="loadMore"
|
|
>
|
|
{{ loadingMore ? 'Loading...' : 'Load More' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-else class="state-box">
|
|
<div class="state-icon">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
|
</svg>
|
|
</div>
|
|
<h2 class="state-heading">No updates yet</h2>
|
|
<p class="state-text">Share your first update with the community</p>
|
|
<NuxtLink to="/updates/new" class="btn btn-primary">+ Post Your First Update</NuxtLink>
|
|
</div>
|
|
|
|
<template #fallback>
|
|
<div class="state-box">
|
|
<div class="spinner"></div>
|
|
<p class="state-text">Loading your updates...</p>
|
|
</div>
|
|
</template>
|
|
</ClientOnly>
|
|
|
|
</div>
|
|
|
|
<!-- Events Mini Sidebar -->
|
|
<EventsMiniSidebar :events="upcomingEvents" />
|
|
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<Teleport to="body">
|
|
<div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
|
|
<div class="modal-box">
|
|
<h3 class="modal-heading">Delete Update?</h3>
|
|
<p class="modal-text">Are you sure you want to delete this update? This action cannot be undone.</p>
|
|
<div class="modal-actions">
|
|
<button class="btn" @click="showDeleteModal = false">Cancel</button>
|
|
<button class="btn btn-danger" :disabled="deleting" @click="confirmDelete">
|
|
{{ deleting ? 'Deleting...' : 'Delete' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { isAuthenticated, memberData, checkMemberStatus } = useAuth()
|
|
const { openLoginModal } = useLoginModal()
|
|
|
|
const updates = ref([])
|
|
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)
|
|
|
|
const upcomingEvents = ref([])
|
|
|
|
// Check if current user is the author of an update
|
|
const isAuthor = (update) => {
|
|
return memberData.value && update.author?._id === memberData.value.id
|
|
}
|
|
|
|
// Check if update was edited
|
|
const isEdited = (update) => {
|
|
const created = new Date(update.createdAt).getTime()
|
|
const updated = new Date(update.updatedAt).getTime()
|
|
return updated - created > 1000
|
|
}
|
|
|
|
// Extract a title from update content (first line or first ~60 chars)
|
|
const getUpdateTitle = (update) => {
|
|
if (!update.content) return 'Untitled update'
|
|
const firstLine = update.content.split('\n')[0]
|
|
if (firstLine.length <= 80) return firstLine
|
|
return firstLine.substring(0, 80) + '...'
|
|
}
|
|
|
|
// Get a preview of the update content (after the first line)
|
|
const getUpdatePreview = (update) => {
|
|
if (!update.content) return ''
|
|
const lines = update.content.split('\n')
|
|
if (lines.length <= 1 && update.content.length <= 80) return ''
|
|
// If the first line was truncated, show the full content as preview
|
|
if (lines.length <= 1) return ''
|
|
const rest = lines.slice(1).join(' ').trim()
|
|
if (!rest) return ''
|
|
return rest.length > 200 ? rest.substring(0, 200) + '...' : rest
|
|
}
|
|
|
|
// Format date with relative time
|
|
const formatDate = (date) => {
|
|
const now = new Date()
|
|
const updateDate = new Date(date)
|
|
const diffInSeconds = Math.floor((now - updateDate) / 1000)
|
|
|
|
if (diffInSeconds < 60) return 'just now'
|
|
if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} minutes ago`
|
|
if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} hours ago`
|
|
if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)} days ago`
|
|
|
|
return updateDate.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: updateDate.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,
|
|
})
|
|
}
|
|
|
|
// Check authentication
|
|
onMounted(async () => {
|
|
if (!isAuthenticated.value) {
|
|
const authenticated = await checkMemberStatus()
|
|
if (!authenticated) {
|
|
openLoginModal({
|
|
title: 'Sign in to view your updates',
|
|
description: 'Enter your email to access your updates',
|
|
})
|
|
return
|
|
}
|
|
}
|
|
|
|
await Promise.all([loadUpdates(), loadUpcomingEvents()])
|
|
})
|
|
|
|
// Load updates
|
|
const loadUpdates = async () => {
|
|
pending.value = true
|
|
try {
|
|
const response = await $fetch('/api/updates/my-updates', {
|
|
params: { limit: 20, skip: 0 },
|
|
})
|
|
updates.value = response.updates
|
|
total.value = response.total
|
|
hasMore.value = response.hasMore
|
|
} catch (error) {
|
|
console.error('Failed to load updates:', error)
|
|
} finally {
|
|
pending.value = false
|
|
}
|
|
}
|
|
|
|
// Load upcoming events for sidebar
|
|
const loadUpcomingEvents = async () => {
|
|
try {
|
|
const response = await $fetch('/api/events', {
|
|
params: { limit: 3, upcoming: true },
|
|
})
|
|
upcomingEvents.value = response.events || response || []
|
|
} catch (error) {
|
|
console.error('Failed to load upcoming events:', error)
|
|
}
|
|
}
|
|
|
|
// Load more updates
|
|
const loadMore = async () => {
|
|
loadingMore.value = true
|
|
try {
|
|
const response = await $fetch('/api/updates/my-updates', {
|
|
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
|
|
}
|
|
}
|
|
|
|
useHead({
|
|
title: 'My Updates - Ghost Guild',
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* ---- TWO-COLUMN LAYOUT ---- */
|
|
.content-area {
|
|
display: grid;
|
|
grid-template-columns: 1fr 200px;
|
|
}
|
|
|
|
.content-main {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ---- STATS ROW ---- */
|
|
.stats-row {
|
|
padding: 16px 32px;
|
|
border-bottom: 1px dashed var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.stats-count {
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.stats-count strong {
|
|
color: var(--text-bright);
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* ---- STATE BOXES (loading, empty, unauth) ---- */
|
|
.state-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 64px 32px;
|
|
text-align: center;
|
|
}
|
|
|
|
.state-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 1px dashed var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16px;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.state-heading {
|
|
font-family: 'Brygada 1918', serif;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-bright);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.state-text {
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
margin-bottom: 20px;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.spinner {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px dashed var(--candle);
|
|
border-top-color: transparent;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ---- TIMELINE ---- */
|
|
.timeline-wrap {
|
|
padding: 24px 32px 48px;
|
|
}
|
|
|
|
.timeline {
|
|
position: relative;
|
|
padding-left: 32px;
|
|
}
|
|
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 11px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
border-left: 1px dashed var(--border);
|
|
}
|
|
|
|
.tl-item {
|
|
position: relative;
|
|
padding: 0 0 24px;
|
|
}
|
|
|
|
.tl-item:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.tl-dot {
|
|
position: absolute;
|
|
left: -32px;
|
|
top: 2px;
|
|
width: 22px;
|
|
height: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--bg);
|
|
border: 1px dashed var(--border);
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.tl-time {
|
|
font-size: 11px;
|
|
color: var(--text-faint);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.tl-text {
|
|
font-size: 13px;
|
|
color: var(--text);
|
|
line-height: 1.5;
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tl-title {
|
|
color: var(--text-bright);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tl-title:hover {
|
|
color: var(--candle);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tl-edited {
|
|
font-size: 11px;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.tl-detail {
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
margin-top: 4px;
|
|
padding: 8px 12px;
|
|
border-left: 2px solid var(--border);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.tl-images {
|
|
margin-top: 8px;
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tl-image {
|
|
max-width: 200px;
|
|
height: auto;
|
|
border: 1px dashed var(--border);
|
|
}
|
|
|
|
.tl-actions {
|
|
margin-top: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tl-action-btn {
|
|
font-family: 'Commit Mono', monospace;
|
|
font-size: 11px;
|
|
color: var(--text-faint);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.tl-action-btn:hover {
|
|
color: var(--candle);
|
|
}
|
|
|
|
.tl-action-danger:hover {
|
|
color: var(--ember);
|
|
}
|
|
|
|
.tl-action-sep {
|
|
color: var(--border);
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* ---- LOAD MORE ---- */
|
|
.load-more {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
/* ---- MODAL ---- */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(42, 32, 21, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 50;
|
|
}
|
|
|
|
.modal-box {
|
|
background: var(--bg);
|
|
border: 1px dashed var(--border);
|
|
padding: 28px 32px;
|
|
max-width: 400px;
|
|
width: 90%;
|
|
}
|
|
|
|
.modal-heading {
|
|
font-family: 'Brygada 1918', serif;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-bright);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.modal-text {
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
line-height: 1.7;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* ---- RESPONSIVE ---- */
|
|
@media (max-width: 1024px) {
|
|
.content-area {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.stats-row {
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
.timeline-wrap {
|
|
padding: 20px 20px 40px;
|
|
}
|
|
|
|
.state-box {
|
|
padding: 48px 20px;
|
|
}
|
|
}
|
|
</style>
|