Tests, UX improvements.
This commit is contained in:
parent
4e6f5d36b8
commit
0ae18f495e
63 changed files with 1384 additions and 2330 deletions
|
|
@ -31,103 +31,91 @@
|
|||
</div>
|
||||
|
||||
<!-- CONTENT AREA WITH EVENTS SIDEBAR -->
|
||||
<div class="content-area">
|
||||
<div class="content-main">
|
||||
<!-- THE CIRCLES -->
|
||||
<div class="about-section" id="circles">
|
||||
<div class="section-label">The Circles</div>
|
||||
<div class="circles-grid">
|
||||
<div id="community" class="circle-cell">
|
||||
<h3 style="color: var(--c-community)">Community</h3>
|
||||
<div class="circle-subtitle">"The open hall"</div>
|
||||
<p>
|
||||
For anyone exploring cooperative models. Wiki access, public
|
||||
events, Slack community, monthly meetings.
|
||||
</p>
|
||||
</div>
|
||||
<div id="founder" class="circle-cell">
|
||||
<h3 style="color: var(--c-founder)">Founder</h3>
|
||||
<div class="circle-subtitle">"The workshop"</div>
|
||||
<p>
|
||||
For people actively building cooperatives. Peer accelerator,
|
||||
mentorship, governance templates.
|
||||
</p>
|
||||
</div>
|
||||
<div id="practitioner" class="circle-cell">
|
||||
<h3 style="color: var(--c-practitioner)">Practitioner</h3>
|
||||
<div class="circle-subtitle">"The alcove"</div>
|
||||
<p>
|
||||
For experienced practitioners. Mentoring, teaching, shaping the
|
||||
program direction.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TWO-COL: CONTRIBUTION + COMMUNITY -->
|
||||
<div class="two-col-row">
|
||||
<div class="about-section">
|
||||
<div class="section-label">How Contribution Works</div>
|
||||
<SidebarLayout>
|
||||
<!-- THE CIRCLES -->
|
||||
<div class="about-section" id="circles">
|
||||
<div class="section-label">The Circles</div>
|
||||
<div class="circles-grid">
|
||||
<div id="community" class="circle-cell">
|
||||
<h3 style="color: var(--c-community)">Community</h3>
|
||||
<div class="circle-subtitle">"The open hall"</div>
|
||||
<p>
|
||||
Membership is $0–50/month, pay what you can. Nobody is
|
||||
excluded for lack of funds. Your contribution supports
|
||||
infrastructure, events, and community resources.
|
||||
For anyone exploring cooperative models. Wiki access, public
|
||||
events, Slack community, monthly meetings.
|
||||
</p>
|
||||
<ul class="tier-list">
|
||||
<li><span class="tier-amt">$0</span> I need support right now</li>
|
||||
<li><span class="tier-amt">$5</span> I can contribute</li>
|
||||
<li>
|
||||
<span class="tier-amt">$15</span> I can sustain the community
|
||||
</li>
|
||||
<li>
|
||||
<span class="tier-amt">$30</span> I can support others too
|
||||
</li>
|
||||
<li>
|
||||
<span class="tier-amt">$50</span> I want to sponsor multiple
|
||||
members
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="about-section">
|
||||
<div class="section-label">Community</div>
|
||||
<div id="founder" class="circle-cell">
|
||||
<h3 style="color: var(--c-founder)">Founder</h3>
|
||||
<div class="circle-subtitle">"The workshop"</div>
|
||||
<p>
|
||||
We gather in Slack, at monthly meetings, and through peer support
|
||||
sessions. The wiki is our shared knowledge base — growing as
|
||||
members contribute. Events range from workshops to social hangs to
|
||||
deep-dive series.
|
||||
For people actively building cooperatives. Peer accelerator,
|
||||
mentorship, governance templates.
|
||||
</p>
|
||||
</div>
|
||||
<div id="practitioner" class="circle-cell">
|
||||
<h3 style="color: var(--c-practitioner)">Practitioner</h3>
|
||||
<div class="circle-subtitle">"The alcove"</div>
|
||||
<p>
|
||||
For experienced practitioners. Mentoring, teaching, shaping the
|
||||
program direction.
|
||||
</p>
|
||||
<NuxtLink to="/join" class="cta">Join the Guild →</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ABOUT BABY GHOSTS -->
|
||||
<div class="about-section">
|
||||
<div class="section-label">About Baby Ghosts</div>
|
||||
<p>
|
||||
Ghost Guild is a program of Baby Ghosts, a Canadian nonprofit
|
||||
advancing cooperative models in game development. No tracking. No
|
||||
ads. No venture capital.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://babyghosts.fund" target="_blank"
|
||||
>babyghosts.fund →</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EVENTS MINI SIDEBAR -->
|
||||
<EventsMiniSidebar :events="upcomingEvents" />
|
||||
</div>
|
||||
<!-- TWO-COL: CONTRIBUTION + COMMUNITY -->
|
||||
<div class="two-col-row">
|
||||
<div class="about-section">
|
||||
<div class="section-label">How Contribution Works</div>
|
||||
<p>
|
||||
Membership is $0–50/month, pay what you can. Nobody is
|
||||
excluded for lack of funds. Your contribution supports
|
||||
infrastructure, events, and community resources.
|
||||
</p>
|
||||
<ul class="tier-list">
|
||||
<li><span class="tier-amt">$0</span> I need support right now</li>
|
||||
<li><span class="tier-amt">$5</span> I can contribute</li>
|
||||
<li>
|
||||
<span class="tier-amt">$15</span> I can sustain the community
|
||||
</li>
|
||||
<li><span class="tier-amt">$30</span> I can support others too</li>
|
||||
<li>
|
||||
<span class="tier-amt">$50</span> I want to sponsor multiple
|
||||
members
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="about-section">
|
||||
<div class="section-label">Community</div>
|
||||
<p>
|
||||
We gather in Slack, at monthly meetings, and through peer support
|
||||
sessions. The wiki is our shared knowledge base — growing as
|
||||
members contribute. Events range from workshops to social hangs to
|
||||
deep-dive series.
|
||||
</p>
|
||||
<NuxtLink to="/join" class="cta">Join the Guild →</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ABOUT BABY GHOSTS -->
|
||||
<div class="about-section">
|
||||
<div class="section-label">About Baby Ghosts</div>
|
||||
<p>
|
||||
Ghost Guild is a program of Baby Ghosts, a Canadian nonprofit
|
||||
advancing cooperative models in game development. No tracking. No ads.
|
||||
No venture capital.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://babyghosts.fund" target="_blank"
|
||||
>babyghosts.fund →</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</SidebarLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { data: upcomingEvents } = await useFetch("/api/events", {
|
||||
query: { limit: 3, upcoming: true },
|
||||
default: () => [],
|
||||
});
|
||||
</script>
|
||||
<script setup></script>
|
||||
|
||||
<style scoped>
|
||||
/* Flex chain from layout .main-body: hero + grid grow so sidebar column matches main height */
|
||||
|
|
@ -176,24 +164,6 @@ const { data: upcomingEvents } = await useFetch("/api/events", {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* ---- CONTENT AREA ---- */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 200px;
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
}
|
||||
.content-main {
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ---- SECTIONS ---- */
|
||||
.about-section {
|
||||
padding: 28px 32px;
|
||||
|
|
@ -283,9 +253,6 @@ const { data: upcomingEvents } = await useFetch("/api/events", {
|
|||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 1024px) {
|
||||
.content-area {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.circles-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -115,11 +115,83 @@
|
|||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<!-- Notification preferences -->
|
||||
<section class="detail-section">
|
||||
<div class="section-label">Notification preferences</div>
|
||||
<dl class="meta-list">
|
||||
<div class="meta-row">
|
||||
<dt>Event reminders</dt>
|
||||
<dd
|
||||
:class="
|
||||
member.notifications?.events !== false
|
||||
? 'status-ok'
|
||||
: 'status-dim'
|
||||
"
|
||||
>
|
||||
{{ member.notifications?.events !== false ? "On" : "Off" }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<dt>Community updates</dt>
|
||||
<dd
|
||||
:class="
|
||||
member.notifications?.updates !== false
|
||||
? 'status-ok'
|
||||
: 'status-dim'
|
||||
"
|
||||
>
|
||||
{{ member.notifications?.updates !== false ? "On" : "Off" }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<dt>Peer support requests</dt>
|
||||
<dd
|
||||
:class="
|
||||
member.notifications?.peerRequests !== false
|
||||
? 'status-ok'
|
||||
: 'status-dim'
|
||||
"
|
||||
>
|
||||
{{ member.notifications?.peerRequests !== false ? "On" : "Off" }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<!-- Full Activity Log -->
|
||||
<section class="detail-section">
|
||||
<div class="section-label">Full Activity Log</div>
|
||||
<ClientOnly>
|
||||
<div v-if="activityLoading && !activityEntries.length" class="loading-state">
|
||||
<div class="spinner" />
|
||||
Loading activity...
|
||||
</div>
|
||||
<div v-else-if="activityEntries.length" class="activity-log">
|
||||
<div v-for="entry in activityEntries" :key="entry._id" class="al-item" :class="{ 'al-admin': entry.visibility === 'admin' }">
|
||||
<UIcon :name="getActivity(entry).icon" class="al-icon" />
|
||||
<span class="al-text">{{ getActivity(entry).text }}</span>
|
||||
<span class="al-time">{{ formatDate(entry.timestamp) }}</span>
|
||||
<span v-if="entry.visibility === 'admin'" class="al-vis-badge">admin-only</span>
|
||||
</div>
|
||||
<div v-if="activityHasMore" class="al-load-more">
|
||||
<button class="btn" :disabled="activityLoadingMore" @click="loadMoreActivity">
|
||||
{{ activityLoadingMore ? 'Loading...' : 'Load More' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="loading-state">
|
||||
No activity recorded.
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { formatActivity } from '~/utils/activityText'
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
middleware: "admin",
|
||||
|
|
@ -225,6 +297,50 @@ function statusClass(status) {
|
|||
if (status === "cancelled" || status === "suspended") return "status-error";
|
||||
return "status-dim";
|
||||
}
|
||||
|
||||
// Activity log
|
||||
const activityEntries = ref([])
|
||||
const activityLoading = ref(false)
|
||||
const activityLoadingMore = ref(false)
|
||||
const activityHasMore = ref(false)
|
||||
const activityNextCursor = ref(null)
|
||||
|
||||
const getActivity = (entry) => formatActivity(entry)
|
||||
|
||||
async function loadActivity() {
|
||||
activityLoading.value = true
|
||||
try {
|
||||
const data = await $fetch(`/api/admin/members/${route.params.id}/activity`, {
|
||||
params: { limit: 20 }
|
||||
})
|
||||
activityEntries.value = data.entries
|
||||
activityHasMore.value = data.hasMore
|
||||
activityNextCursor.value = data.nextCursor
|
||||
} catch (err) {
|
||||
console.error('Failed to load activity:', err)
|
||||
} finally {
|
||||
activityLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMoreActivity() {
|
||||
if (!activityNextCursor.value) return
|
||||
activityLoadingMore.value = true
|
||||
try {
|
||||
const data = await $fetch(`/api/admin/members/${route.params.id}/activity`, {
|
||||
params: { limit: 20, before: activityNextCursor.value }
|
||||
})
|
||||
activityEntries.value.push(...data.entries)
|
||||
activityHasMore.value = data.hasMore
|
||||
activityNextCursor.value = data.nextCursor
|
||||
} catch (err) {
|
||||
console.error('Failed to load more activity:', err)
|
||||
} finally {
|
||||
activityLoadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadActivity)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -381,6 +497,62 @@ function statusClass(status) {
|
|||
}
|
||||
}
|
||||
|
||||
/* ---- ACTIVITY LOG ---- */
|
||||
.activity-log {
|
||||
margin-top: 12px;
|
||||
border: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.al-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 14px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.al-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.al-admin {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.al-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: var(--text-faint);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.al-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.al-time {
|
||||
color: var(--text-faint);
|
||||
font-size: 11px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.al-vis-badge {
|
||||
font-size: 9px;
|
||||
color: var(--text-faint);
|
||||
border: 1px dashed var(--border);
|
||||
padding: 1px 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.al-load-more {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.admin-member-detail {
|
||||
padding: 20px 16px 40px;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<!-- FILTER BAR -->
|
||||
<FilterBar v-model="activeFilter" :filters="filterOptions">
|
||||
<label class="filter-toggle">
|
||||
<input type="checkbox" v-model="includePastEvents" /> Show past events
|
||||
<input v-model="includePastEvents" type="checkbox" /> Show past events
|
||||
</label>
|
||||
</FilterBar>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,197 +19,187 @@
|
|||
/>
|
||||
|
||||
<!-- CONTENT AREA WITH EVENTS SIDEBAR -->
|
||||
<div class="content-area">
|
||||
<div class="page-content">
|
||||
<div class="account-columns">
|
||||
<!-- LEFT COLUMN: Membership Status & Email -->
|
||||
<div class="account-col-left">
|
||||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<div class="section-label">Current Membership</div>
|
||||
<SidebarLayout>
|
||||
<div class="account-columns">
|
||||
<!-- LEFT COLUMN: Membership Status & Email -->
|
||||
<div class="account-col-left">
|
||||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<div class="section-label">Current Membership</div>
|
||||
|
||||
<div class="membership-card">
|
||||
<div class="membership-row">
|
||||
<span class="membership-k">Status</span>
|
||||
<span class="membership-v status-v">
|
||||
<span
|
||||
class="status-dot"
|
||||
:class="memberData.status || 'active'"
|
||||
></span>
|
||||
<span>{{
|
||||
formatStatus(memberData.status || "active")
|
||||
}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="membership-k">Circle</span>
|
||||
<div class="membership-card">
|
||||
<div class="membership-row">
|
||||
<span class="membership-k">Status</span>
|
||||
<span class="membership-v status-v">
|
||||
<span
|
||||
class="membership-v"
|
||||
:style="{
|
||||
color: `var(--c-${memberData.circle || 'community'})`,
|
||||
}"
|
||||
>
|
||||
{{
|
||||
memberData.circle
|
||||
? capitalise(memberData.circle)
|
||||
: "Community"
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="membership-k">Contribution</span>
|
||||
<span class="membership-v"
|
||||
>${{ memberData.contributionTier || 0 }} / month</span
|
||||
>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="membership-k">Member since</span>
|
||||
<span class="membership-v">{{
|
||||
formatMemberSince(memberData.createdAt)
|
||||
class="status-dot"
|
||||
:class="memberData.status || 'active'"
|
||||
></span>
|
||||
<span>{{
|
||||
formatStatus(memberData.status || "active")
|
||||
}}</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="membership-k">Circle</span>
|
||||
<span
|
||||
class="membership-v"
|
||||
:style="{
|
||||
color: `var(--c-${memberData.circle || 'community'})`,
|
||||
}"
|
||||
>
|
||||
{{
|
||||
memberData.circle
|
||||
? capitalise(memberData.circle)
|
||||
: "Community"
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="membership-k">Contribution</span>
|
||||
<span class="membership-v"
|
||||
>${{ memberData.contributionTier || 0 }} / month</span
|
||||
>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="membership-k">Member since</span>
|
||||
<span class="membership-v">{{
|
||||
formatMemberSince(memberData.createdAt)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<div class="section-label">Email</div>
|
||||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<div class="section-label">Email</div>
|
||||
|
||||
<div v-if="!showEmailEdit" class="email-display">
|
||||
<span class="email-value">{{ memberData.email }}</span>
|
||||
<div v-if="!showEmailEdit" class="email-display">
|
||||
<span class="email-value">{{ memberData.email }}</span>
|
||||
<button class="btn btn-inline" @click="showEmailEdit = true">
|
||||
Change
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="email-edit">
|
||||
<div class="field">
|
||||
<label>New email address</label>
|
||||
<input
|
||||
type="email"
|
||||
v-model="newEmail"
|
||||
placeholder="you@example.com"
|
||||
@keydown.enter="handleUpdateEmail"
|
||||
@keydown.escape="cancelEmailEdit"
|
||||
autofocus
|
||||
/>
|
||||
</div>
|
||||
<div class="email-edit-actions">
|
||||
<button
|
||||
class="btn btn-inline"
|
||||
@click="showEmailEdit = true"
|
||||
class="btn btn-primary"
|
||||
@click="handleUpdateEmail"
|
||||
:disabled="isUpdatingEmail || !newEmail.trim()"
|
||||
>
|
||||
Change
|
||||
{{ isUpdatingEmail ? "Saving…" : "Save" }}
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
@click="cancelEmailEdit"
|
||||
:disabled="isUpdatingEmail"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="email-edit">
|
||||
<div class="field">
|
||||
<label>New email address</label>
|
||||
<input
|
||||
type="email"
|
||||
v-model="newEmail"
|
||||
placeholder="you@example.com"
|
||||
@keydown.enter="handleUpdateEmail"
|
||||
@keydown.escape="cancelEmailEdit"
|
||||
autofocus
|
||||
/>
|
||||
</div>
|
||||
<div class="email-edit-actions">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="handleUpdateEmail"
|
||||
:disabled="isUpdatingEmail || !newEmail.trim()"
|
||||
>
|
||||
{{ isUpdatingEmail ? "Saving…" : "Save" }}
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
@click="cancelEmailEdit"
|
||||
:disabled="isUpdatingEmail"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="email-hint">
|
||||
Used for login magic links and notifications
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="account-section account-section--danger">
|
||||
<div class="account-col-inset">
|
||||
<div class="section-label danger">Danger Zone</div>
|
||||
<div class="danger-zone">
|
||||
<p>
|
||||
Cancelling your membership will immediately revoke access
|
||||
to member-only resources, events, and the Slack workspace.
|
||||
<strong>This action cannot be easily undone.</strong>
|
||||
<div class="email-hint">
|
||||
Used for login magic links and notifications
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="account-section account-section--danger">
|
||||
<div class="account-col-inset">
|
||||
<div class="section-label danger">Danger Zone</div>
|
||||
<div class="danger-zone">
|
||||
<p>
|
||||
Cancelling your membership will immediately revoke access to
|
||||
member-only resources, events, and the Slack workspace.
|
||||
<strong>This action cannot be easily undone.</strong>
|
||||
</p>
|
||||
<div v-if="showCancelConfirm" class="cancel-confirm">
|
||||
<p class="cancel-confirm-prompt">
|
||||
Are you sure? This cannot be easily undone.
|
||||
</p>
|
||||
<div v-if="showCancelConfirm" class="cancel-confirm">
|
||||
<p class="cancel-confirm-prompt">
|
||||
Are you sure? This cannot be easily undone.
|
||||
</p>
|
||||
<div class="cancel-confirm-actions">
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="confirmCancelMembership"
|
||||
:disabled="isCancelling"
|
||||
>
|
||||
{{ isCancelling ? "Cancelling…" : "Yes, Cancel" }}
|
||||
</button>
|
||||
<button class="btn" @click="showCancelConfirm = false">
|
||||
Nevermind
|
||||
</button>
|
||||
</div>
|
||||
<div class="cancel-confirm-actions">
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="confirmCancelMembership"
|
||||
:disabled="isCancelling"
|
||||
>
|
||||
{{ isCancelling ? "Cancelling…" : "Yes, Cancel" }}
|
||||
</button>
|
||||
<button class="btn" @click="showCancelConfirm = false">
|
||||
Nevermind
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
class="btn btn-danger"
|
||||
@click="handleCancelMembership"
|
||||
:disabled="isCancelling"
|
||||
>
|
||||
Cancel Membership
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT COLUMN: Change Contribution & Circle -->
|
||||
<div class="account-col-right">
|
||||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<div class="section-label">Change Contribution</div>
|
||||
|
||||
<TierPicker v-model="selectedTier" :tiers="tiers" />
|
||||
<div class="tier-hint">
|
||||
Changes take effect on your next billing cycle
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary btn-section"
|
||||
@click="handleUpdateTier"
|
||||
:disabled="
|
||||
selectedTier ===
|
||||
Number(memberData.contributionTier || 0) || isUpdating
|
||||
"
|
||||
v-else
|
||||
class="btn btn-danger"
|
||||
@click="handleCancelMembership"
|
||||
:disabled="isCancelling"
|
||||
>
|
||||
{{ isUpdating ? "Updating…" : "Update Contribution" }}
|
||||
Cancel Membership
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<div class="section-label">Change Circle</div>
|
||||
<!-- RIGHT COLUMN: Change Contribution & Circle -->
|
||||
<div class="account-col-right">
|
||||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<div class="section-label">Change Contribution</div>
|
||||
|
||||
<CirclePicker
|
||||
v-model="selectedCircle"
|
||||
:circles="circleOptions"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-primary btn-section"
|
||||
@click="handleUpdateCircle"
|
||||
:disabled="
|
||||
selectedCircle === memberData.circle || isUpdating
|
||||
"
|
||||
>
|
||||
{{ isUpdating ? "Updating…" : "Update Circle" }}
|
||||
</button>
|
||||
<TierPicker v-model="selectedTier" :tiers="tiers" />
|
||||
<div class="tier-hint">
|
||||
Changes take effect on your next billing cycle
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary btn-section"
|
||||
@click="handleUpdateTier"
|
||||
:disabled="
|
||||
selectedTier === Number(memberData.contributionTier || 0) ||
|
||||
isUpdating
|
||||
"
|
||||
>
|
||||
{{ isUpdating ? "Updating…" : "Update Contribution" }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<div class="section-label">Change Circle</div>
|
||||
|
||||
<CirclePicker
|
||||
v-model="selectedCircle"
|
||||
:circles="circleOptions"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-primary btn-section"
|
||||
@click="handleUpdateCircle"
|
||||
:disabled="selectedCircle === memberData.circle || isUpdating"
|
||||
>
|
||||
{{ isUpdating ? "Updating…" : "Update Circle" }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EVENTS MINI SIDEBAR -->
|
||||
<EventsMiniSidebar :events="upcomingEvents" />
|
||||
</div>
|
||||
</SidebarLayout>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -281,11 +271,6 @@ watchEffect(() => {
|
|||
}
|
||||
});
|
||||
|
||||
const { data: upcomingEvents } = await useFetch("/api/events", {
|
||||
query: { limit: 3, upcoming: true },
|
||||
default: () => [],
|
||||
});
|
||||
|
||||
const formatMemberSince = (dateStr) => {
|
||||
if (!dateStr) return "";
|
||||
return new Date(dateStr).toLocaleDateString("en-US", {
|
||||
|
|
@ -420,23 +405,6 @@ const confirmCancelMembership = async () => {
|
|||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ---- CONTENT AREA ---- */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 200px;
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
}
|
||||
.page-content {
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ---- TWO-COLUMN LAYOUT ---- */
|
||||
.account-columns {
|
||||
flex: 1;
|
||||
|
|
@ -644,9 +612,6 @@ const confirmCancelMembership = async () => {
|
|||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 1024px) {
|
||||
.content-area {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.account-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
|
|||
341
app/pages/member/activity.vue
Normal file
341
app/pages/member/activity.vue
Normal file
|
|
@ -0,0 +1,341 @@
|
|||
<template>
|
||||
<div class="activity-page">
|
||||
<PageHeader
|
||||
title="Activity Log"
|
||||
subtitle="Your activity and milestones in the Guild"
|
||||
/>
|
||||
|
||||
<SidebarLayout :limit="5">
|
||||
<ClientOnly>
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading && !entries.length" class="state-box">
|
||||
<div class="spinner"></div>
|
||||
<p class="state-text">Loading activity...</p>
|
||||
</div>
|
||||
|
||||
<!-- Timeline -->
|
||||
<div v-else-if="entries.length" class="timeline-wrap">
|
||||
<div class="timeline">
|
||||
<div v-for="entry in entries" :key="entry._id" class="tl-item">
|
||||
<div class="tl-dot">
|
||||
<UIcon :name="getActivity(entry).icon" class="tl-icon" />
|
||||
</div>
|
||||
<div class="tl-time">{{ formatDate(entry.timestamp) }}</div>
|
||||
<div class="tl-text">
|
||||
<template v-if="getActivity(entry).link">
|
||||
<span>{{ getActivity(entry).text.split(getActivity(entry).linkText)[0] }}</span>
|
||||
<NuxtLink :to="getActivity(entry).link" class="tl-link">{{ getActivity(entry).linkText }}</NuxtLink>
|
||||
</template>
|
||||
<span v-else>{{ getActivity(entry).text }}</span>
|
||||
<span v-if="entry.performedBy" class="tl-admin-badge">admin</span>
|
||||
</div>
|
||||
|
||||
<!-- Email body expandable -->
|
||||
<div v-if="entry.type === 'email_sent' && getActivity(entry).emailBody" class="tl-email">
|
||||
<button class="tl-email-toggle" @click="toggleEmail(entry._id)">
|
||||
{{ expandedEmails[entry._id] ? 'Hide email' : 'View email' }}
|
||||
</button>
|
||||
<div v-if="expandedEmails[entry._id]" class="dashed-box tl-email-body">
|
||||
<pre>{{ getActivity(entry).emailBody }}</pre>
|
||||
</div>
|
||||
</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">
|
||||
<UIcon name="i-lucide-activity" />
|
||||
</div>
|
||||
<h2 class="state-heading">No activity yet</h2>
|
||||
<p class="state-text">Your activity will appear here as you use the Guild</p>
|
||||
</div>
|
||||
|
||||
<template #fallback>
|
||||
<div class="state-box">
|
||||
<div class="spinner"></div>
|
||||
<p class="state-text">Loading activity...</p>
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</SidebarLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { formatActivity } from '~/utils/activityText'
|
||||
|
||||
const entries = ref([])
|
||||
const loading = ref(false)
|
||||
const loadingMore = ref(false)
|
||||
const hasMore = ref(false)
|
||||
const nextCursor = ref(null)
|
||||
const expandedEmails = ref({})
|
||||
|
||||
const getActivity = (entry) => formatActivity(entry)
|
||||
|
||||
const toggleEmail = (id) => {
|
||||
expandedEmails.value[id] = !expandedEmails.value[id]
|
||||
}
|
||||
|
||||
const formatDate = (date) => {
|
||||
const now = new Date()
|
||||
const d = new Date(date)
|
||||
const diffInSeconds = Math.floor((now - d) / 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 d.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: d.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
|
||||
})
|
||||
}
|
||||
|
||||
const loadEntries = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await $fetch('/api/members/me/activity', {
|
||||
params: { limit: 20 }
|
||||
})
|
||||
entries.value = data.entries
|
||||
hasMore.value = data.hasMore
|
||||
nextCursor.value = data.nextCursor
|
||||
} catch (err) {
|
||||
console.error('Failed to load activity:', err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadMore = async () => {
|
||||
if (!nextCursor.value) return
|
||||
loadingMore.value = true
|
||||
try {
|
||||
const data = await $fetch('/api/members/me/activity', {
|
||||
params: { limit: 20, before: nextCursor.value }
|
||||
})
|
||||
entries.value.push(...data.entries)
|
||||
hasMore.value = data.hasMore
|
||||
nextCursor.value = data.nextCursor
|
||||
} catch (err) {
|
||||
console.error('Failed to load more activity:', err)
|
||||
} finally {
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadEntries)
|
||||
|
||||
useHead({ title: 'Activity Log - Ghost Guild' })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.activity-page {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ---- STATE BOXES ---- */
|
||||
.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);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.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: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.tl-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.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: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tl-link {
|
||||
color: var(--candle);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tl-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tl-admin-badge {
|
||||
font-size: 10px;
|
||||
color: var(--text-faint);
|
||||
border: 1px dashed var(--border);
|
||||
padding: 1px 5px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* ---- EMAIL EXPANDABLE ---- */
|
||||
.tl-email {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.tl-email-toggle {
|
||||
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-email-toggle:hover {
|
||||
color: var(--candle);
|
||||
}
|
||||
|
||||
.tl-email-body {
|
||||
margin-top: 6px;
|
||||
padding: 12px;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.6;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tl-email-body pre {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
font-family: 'Commit Mono', monospace;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ---- LOAD MORE ---- */
|
||||
.load-more {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 768px) {
|
||||
.timeline-wrap {
|
||||
padding: 20px 20px 40px;
|
||||
}
|
||||
|
||||
.state-box {
|
||||
padding: 48px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
<!-- Dashboard Content -->
|
||||
<template v-else>
|
||||
<div class="dashboard-with-sidebar">
|
||||
<SidebarLayout :limit="5">
|
||||
<div class="dashboard-body">
|
||||
<!-- Member Status Banner -->
|
||||
<MemberStatusBanner />
|
||||
|
|
@ -204,8 +204,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<EventsMiniSidebar :events="upcomingEvents" />
|
||||
</div>
|
||||
</SidebarLayout>
|
||||
</template>
|
||||
|
||||
<template #fallback>
|
||||
|
|
@ -229,11 +228,6 @@ const loadingEvents = ref(false);
|
|||
const calendarLinkCopied = ref(false);
|
||||
const showCalendarInstructions = ref(false);
|
||||
|
||||
const { data: upcomingEvents } = await useFetch("/api/events", {
|
||||
query: { limit: 5, upcoming: true },
|
||||
default: () => [],
|
||||
});
|
||||
|
||||
// Calendar subscription URL
|
||||
const calendarUrl = computed(() => {
|
||||
const memberId = memberData.value?._id || memberData.value?.id;
|
||||
|
|
@ -483,15 +477,6 @@ useHead({
|
|||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ---- CONTENT GRID ---- */
|
||||
.dashboard-with-sidebar {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 200px;
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.dashboard-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
|
@ -722,17 +707,8 @@ useHead({
|
|||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 1024px) {
|
||||
.dashboard-with-sidebar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-with-sidebar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.content-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,600 +0,0 @@
|
|||
<template>
|
||||
<div class="my-updates-page">
|
||||
<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>
|
||||
.my-updates-page {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ---- TWO-COLUMN LAYOUT ---- */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 200px;
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
@ -180,6 +180,18 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div v-if="activityEntries.length" class="profile-section">
|
||||
<div class="section-label">Recent Activity</div>
|
||||
<div class="activity-list">
|
||||
<div v-for="entry in activityEntries" :key="entry._id" class="activity-item">
|
||||
<UIcon :name="getActivity(entry).icon" class="activity-icon" />
|
||||
<span class="activity-text">{{ getActivity(entry).text }}</span>
|
||||
<span class="activity-time">{{ formatRelativeDate(entry.timestamp) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auth Notice -->
|
||||
<div v-if="!isAuthenticated" class="auth-notice">
|
||||
<p>Sign in to see full profile details</p>
|
||||
|
|
@ -206,6 +218,8 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { formatActivity } from '~/utils/activityText'
|
||||
|
||||
const route = useRoute();
|
||||
const { isAuthenticated } = useAuth();
|
||||
const { openLoginModal } = useLoginModal();
|
||||
|
|
@ -231,6 +245,26 @@ const getInitials = (name) => {
|
|||
|
||||
// Fetch member data — no await so the component renders immediately (no Suspense)
|
||||
const { data, pending, error: fetchError } = useFetch(`/api/members/${id}`);
|
||||
|
||||
// Fetch public activity
|
||||
const { data: activityData } = useFetch(`/api/members/${id}/activity`, {
|
||||
params: { limit: 5 },
|
||||
default: () => ({ entries: [] })
|
||||
})
|
||||
const activityEntries = computed(() => activityData.value?.entries || [])
|
||||
|
||||
const getActivity = (entry) => formatActivity(entry)
|
||||
|
||||
const formatRelativeDate = (date) => {
|
||||
const now = new Date()
|
||||
const d = new Date(date)
|
||||
const diffInSeconds = Math.floor((now - d) / 1000)
|
||||
if (diffInSeconds < 60) return 'just now'
|
||||
if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`
|
||||
if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`
|
||||
if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`
|
||||
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
|
||||
}
|
||||
const member = computed(() => data.value?.member || null);
|
||||
|
||||
const pageBreadcrumbTitle = useState("pageBreadcrumbTitle", () => "");
|
||||
|
|
@ -467,6 +501,39 @@ useHead({
|
|||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* ---- ACTIVITY ---- */
|
||||
.activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.activity-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: var(--text-faint);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.activity-text {
|
||||
color: var(--text-dim);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
color: var(--text-faint);
|
||||
font-size: 11px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ---- AUTH NOTICE ---- */
|
||||
.auth-notice {
|
||||
padding: 20px;
|
||||
|
|
|
|||
|
|
@ -1,157 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="back-link">
|
||||
<NuxtLink to="/member/my-updates">← Back to My Updates</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div v-if="pending" class="loading">Loading update...</div>
|
||||
|
||||
<template v-else-if="update">
|
||||
<div class="form-header">
|
||||
<h1>Edit Update</h1>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="update-form">
|
||||
<div class="field">
|
||||
<label class="section-label">Content</label>
|
||||
<textarea
|
||||
v-model="form.content"
|
||||
rows="8"
|
||||
required
|
||||
:disabled="saving"
|
||||
></textarea>
|
||||
<div class="char-count">{{ form.content.length }} / 50000</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="section-label">Visibility</label>
|
||||
<select v-model="form.privacy" :disabled="saving">
|
||||
<option value="members">Members only</option>
|
||||
<option value="public">Public</option>
|
||||
<option value="private">Private (only you)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<NuxtLink to="/member/my-updates" class="btn">Cancel</NuxtLink>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
:disabled="saving || !form.content.trim()"
|
||||
>
|
||||
{{ saving ? 'Saving...' : 'Save Changes' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<div v-else class="loading">Update not found.</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({ middleware: 'auth' })
|
||||
|
||||
const route = useRoute()
|
||||
const toast = useToast()
|
||||
|
||||
const { data: update, pending } = await useFetch(`/api/updates/${route.params.id}`)
|
||||
|
||||
const form = ref({
|
||||
content: update.value?.content || '',
|
||||
privacy: update.value?.privacy || 'members',
|
||||
})
|
||||
|
||||
watch(update, (val) => {
|
||||
if (val) {
|
||||
form.value.content = val.content || ''
|
||||
form.value.privacy = val.privacy || 'members'
|
||||
}
|
||||
})
|
||||
|
||||
const saving = ref(false)
|
||||
|
||||
const handleSubmit = async () => {
|
||||
saving.value = true
|
||||
try {
|
||||
await $fetch(`/api/updates/${route.params.id}`, {
|
||||
method: 'PATCH',
|
||||
body: { content: form.value.content, privacy: form.value.privacy },
|
||||
})
|
||||
toast.add({ title: 'Update saved!', color: 'green' })
|
||||
navigateTo('/member/my-updates')
|
||||
} catch (err) {
|
||||
toast.add({
|
||||
title: 'Failed to save update',
|
||||
description: err.data?.statusMessage || 'Please try again.',
|
||||
color: 'red',
|
||||
})
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
useHead({ title: 'Edit Update - Ghost Guild' })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.back-link {
|
||||
padding: 12px 32px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
font-size: 12px;
|
||||
}
|
||||
.back-link a { color: var(--candle); text-decoration: none; }
|
||||
|
||||
.loading {
|
||||
padding: 48px 32px;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.form-header {
|
||||
padding: 28px 32px 20px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
.form-header h1 {
|
||||
font-family: 'Brygada 1918', serif;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
.update-form {
|
||||
padding: 24px 32px;
|
||||
max-width: 640px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
|
||||
textarea, select {
|
||||
font-family: 'Commit Mono', monospace;
|
||||
font-size: 13px;
|
||||
background: var(--surface);
|
||||
border: 1px dashed var(--border);
|
||||
color: var(--text);
|
||||
padding: 10px 12px;
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
}
|
||||
textarea:focus, select:focus { outline: none; border-color: var(--candle); }
|
||||
textarea:disabled, select:disabled { opacity: 0.6; }
|
||||
|
||||
.char-count {
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
padding-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="back-link">
|
||||
<NuxtLink to="/member/my-updates">← Back to My Updates</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="form-header">
|
||||
<h1>New Update</h1>
|
||||
<p>Share what you're working on with the community</p>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="update-form">
|
||||
<div class="field">
|
||||
<label class="section-label">Content</label>
|
||||
<textarea
|
||||
v-model="form.content"
|
||||
rows="8"
|
||||
required
|
||||
placeholder="What's on your mind? Share a project update, milestone, or thought..."
|
||||
:disabled="saving"
|
||||
></textarea>
|
||||
<div class="char-count">{{ form.content.length }} / 50000</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="section-label">Visibility</label>
|
||||
<select v-model="form.privacy" :disabled="saving">
|
||||
<option value="members">Members only</option>
|
||||
<option value="public">Public</option>
|
||||
<option value="private">Private (only you)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<NuxtLink to="/member/my-updates" class="btn">Cancel</NuxtLink>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
:disabled="saving || !form.content.trim()"
|
||||
>
|
||||
{{ saving ? 'Posting...' : 'Post Update' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({ middleware: 'auth' })
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const form = ref({
|
||||
content: '',
|
||||
privacy: 'members',
|
||||
})
|
||||
const saving = ref(false)
|
||||
|
||||
const handleSubmit = async () => {
|
||||
saving.value = true
|
||||
try {
|
||||
await $fetch('/api/updates', {
|
||||
method: 'POST',
|
||||
body: { content: form.value.content, privacy: form.value.privacy },
|
||||
})
|
||||
toast.add({ title: 'Update posted!', color: 'green' })
|
||||
navigateTo('/member/my-updates')
|
||||
} catch (err) {
|
||||
toast.add({
|
||||
title: 'Failed to post update',
|
||||
description: err.data?.statusMessage || 'Please try again.',
|
||||
color: 'red',
|
||||
})
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
useHead({ title: 'New Update - Ghost Guild' })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.back-link {
|
||||
padding: 12px 32px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
font-size: 12px;
|
||||
}
|
||||
.back-link a { color: var(--candle); text-decoration: none; }
|
||||
|
||||
.form-header {
|
||||
padding: 28px 32px 0;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.form-header h1 {
|
||||
font-family: 'Brygada 1918', serif;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.form-header p { font-size: 12px; color: var(--text-dim); }
|
||||
|
||||
.update-form {
|
||||
padding: 24px 32px;
|
||||
max-width: 640px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
|
||||
textarea, select {
|
||||
font-family: 'Commit Mono', monospace;
|
||||
font-size: 13px;
|
||||
background: var(--surface);
|
||||
border: 1px dashed var(--border);
|
||||
color: var(--text);
|
||||
padding: 10px 12px;
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
}
|
||||
textarea:focus, select:focus { outline: none; border-color: var(--candle); }
|
||||
textarea:disabled, select:disabled { opacity: 0.6; }
|
||||
|
||||
.char-count {
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
padding-top: 4px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue