Updates

app/components/AppNavigation.vue

@@ -25,11 +25,6 @@
                 />
               </NuxtLink>
             </li>
-            <li>
-              <a href="#" class="sign-out" @click.prevent="handleLogout"
-                >Sign out</a
-              >
-            </li>
           </ul>
 
           <div class="sidebar-section">Explore</div>
@@ -336,8 +331,8 @@ const exploreItems = [
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--candle);
+  background: var(--green);
-  margin-left: 6px;
+  margin-left: 0px;
   vertical-align: middle;
   transform: translateY(-1px);
 }

app/components/PrivacyToggle.vue

@@ -1,44 +0,0 @@
-<template>
-  <label class="priv">
-    <USwitch
-      :model-value="isPrivate"
-      aria-label="Private"
-      size="xs"
-      @update:model-value="onChange"
-    />
-    <span class="priv-label">Private</span>
-  </label>
-</template>
-
-<script setup>
-const props = defineProps({
-  modelValue: { type: String, default: "members" },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-// Treat legacy "public" values as "members" (visible to signed-in members).
-const isPrivate = computed(() => props.modelValue === "private");
-
-const onChange = (val) => {
-  emit("update:modelValue", val ? "private" : "members");
-};
-</script>
-
-<style scoped>
-.priv {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 10px;
-  font-family: "Commit Mono", monospace;
-  letter-spacing: 0.04em;
-  color: var(--text-faint);
-  user-select: none;
-  cursor: pointer;
-}
-
-.priv-label {
-  line-height: 1;
-}
-</style>

app/components/TopStrip.vue

@@ -17,7 +17,7 @@
         </span>
       </slot>
     </span>
-    <span>
+    <span class="right">
       <slot name="right">
         <ClientOnly>
           <template v-if="memberData">
@@ -27,7 +27,7 @@
                 :src="`/ghosties/Ghost-${capitalize(memberData.avatar)}.png`"
                 :alt="memberData.name"
                 class="member-avatar"
-              />
+              >
               <svg
                 v-else
                 class="member-avatar default-ghost"
@@ -56,6 +56,10 @@
               </svg>
               {{ memberData.name }}
             </NuxtLink>
+            <span class="sep" aria-hidden="true">/</span>
+            <a href="#" class="sign-out" @click.prevent="handleLogout"
+              >sign out</a
+            >
           </template>
           <template v-else> The Baby Ghosts member program </template>
           <template #fallback> The Baby Ghosts member program </template>
@@ -70,7 +74,12 @@ const props = defineProps({
   pagePath: { type: String, default: "" },
 });
 
-const { memberData } = useAuth();
+const { memberData, logout } = useAuth();
+
+const handleLogout = async () => {
+  await logout();
+  navigateTo("/");
+};
 
 const capitalize = (str) => {
   if (!str) return "";
@@ -112,6 +121,9 @@ const breadcrumbs = computed(() => {
   gap: 6px;
   text-decoration: none;
 }
+.member-link:hover {
+  text-decoration: underline;
+}
 .member-avatar {
   width: 18px;
   height: 18px;
@@ -120,6 +132,23 @@ const breadcrumbs = computed(() => {
 .default-ghost {
   color: var(--border);
 }
+.right {
+  display: inline-flex;
+  align-items: center;
+}
+.sep {
+  color: var(--text-faint);
+  margin: 0 8px;
+}
+.top-strip a.sign-out {
+  font-size: 12px;
+  color: var(--ember);
+  text-decoration: none;
+}
+.top-strip a.sign-out:hover {
+  color: var(--ember);
+  text-decoration: underline;
+}
 
 .breadcrumb-nav {
   display: inline;

app/pages/admin/members/index.vue

@@ -28,7 +28,7 @@
     <!-- Search / Filter -->
     <div class="filter-bar">
       <div class="field" style="margin-bottom: 0; flex: 1">
-        <input v-model="searchQuery" placeholder="Search members..." />
+        <input v-model="searchQuery" placeholder="Search members..." >
       </div>
       <div class="field" style="margin-bottom: 0">
         <select v-model="circleFilter" aria-label="Filter by circle">
@@ -38,6 +38,15 @@
           <option value="practitioner">Practitioner</option>
         </select>
       </div>
+      <div class="field" style="margin-bottom: 0">
+        <select v-model="statusFilter" aria-label="Filter by status">
+          <option value="">All Statuses</option>
+          <option value="active">Active</option>
+          <option value="pending_payment">Pending Payment</option>
+          <option value="suspended">Suspended</option>
+          <option value="cancelled">Cancelled</option>
+        </select>
+      </div>
     </div>
 
     <!-- Members Table -->
@@ -61,17 +70,18 @@
                   :checked="allVisibleSelected"
                   :indeterminate="!allVisibleSelected && someVisibleSelected"
                   @change="toggleSelectAll"
-                />
+                >
                 <span class="check-mark" />
               </label>
             </th>
-            <th>Name</th>
+            <th class="sortable" @click="toggleSort('name')">Name <span class="sort-ind">{{ sortIndicator('name') }}</span></th>
-            <th>Email</th>
+            <th class="sortable" @click="toggleSort('email')">Email <span class="sort-ind">{{ sortIndicator('email') }}</span></th>
-            <th>Circle</th>
+            <th class="sortable" @click="toggleSort('circle')">Circle <span class="sort-ind">{{ sortIndicator('circle') }}</span></th>
-            <th>Tier</th>
+            <th class="sortable" @click="toggleSort('contributionTier')">Tier <span class="sort-ind">{{ sortIndicator('contributionTier') }}</span></th>
+            <th class="sortable" @click="toggleSort('status')">Status <span class="sort-ind">{{ sortIndicator('status') }}</span></th>
             <th>Invite</th>
             <th>Slack</th>
-            <th>Joined</th>
+            <th class="sortable" @click="toggleSort('createdAt')">Joined <span class="sort-ind">{{ sortIndicator('createdAt') }}</span></th>
             <th>Actions</th>
           </tr>
         </thead>
@@ -89,7 +99,7 @@
                   type="checkbox"
                   :checked="selectedMemberIds.includes(member._id)"
                   @change="toggleSelect(member._id)"
-                />
+                >
                 <span class="check-mark" />
               </label>
             </td>
@@ -103,6 +113,9 @@
               }}</span>
             </td>
             <td class="col-mono">${{ member.contributionTier }}/mo</td>
+            <td>
+              <span class="badge status" :class="`status-${member.status || 'pending_payment'}`">{{ statusLabel(member.status) }}</span>
+            </td>
             <td>
               <span
                 :class="member.inviteEmailSent ? 'status-ok' : 'status-dim'"
@@ -122,10 +135,10 @@
               <NuxtLink :to="`/admin/members/${member._id}`" class="link-btn" @click.stop
                 >View</NuxtLink
               >
-              <button @click.stop="sendSlackInvite(member)" class="link-btn">
+              <button class="link-btn" @click.stop="sendSlackInvite(member)">
                 Slack
               </button>
-              <button @click.stop="editMember(member)" class="link-btn">Edit</button>
+              <button class="link-btn" @click.stop="editMember(member)">Edit</button>
             </td>
           </tr>
         </tbody>
@@ -150,10 +163,10 @@
           </button>
         </div>
 
-        <form @submit.prevent="createMember" class="modal-body">
+        <form class="modal-body" @submit.prevent="createMember">
           <div class="field">
             <label>Name</label>
-            <input v-model="newMember.name" placeholder="Full name" required />
+            <input v-model="newMember.name" placeholder="Full name" required >
           </div>
           <div class="field">
             <label>Email</label>
@@ -162,7 +175,7 @@
               type="email"
               placeholder="email@example.com"
               required
-            />
+            >
           </div>
           <div class="field">
             <label>Circle</label>
@@ -220,9 +233,9 @@
               ref="csvFileInput"
               type="file"
               accept=".csv"
-              @change="handleCsvFile"
               class="file-input"
-            />
+              @change="handleCsvFile"
+            >
           </div>
 
           <div v-if="csvParseError" class="error-box">
@@ -243,7 +256,7 @@
               >
                 {{ csvRows.length - csvValidRows.length }} with errors.
               </span>
-              <button @click="resetCsvImport" class="link-btn">
+              <button class="link-btn" @click="resetCsvImport">
                 Choose different file
               </button>
             </div>
@@ -303,14 +316,14 @@
         </div>
 
         <div class="modal-actions">
-          <button @click="closeImportModal" class="btn">
+          <button class="btn" @click="closeImportModal">
             {{ importResults ? "Done" : "Cancel" }}
           </button>
           <button
             v-if="csvValidRows.length && !importResults"
             :disabled="importing"
-            @click="submitImport"
             class="btn btn-primary"
+            @click="submitImport"
           >
             {{
               importing
@@ -336,14 +349,14 @@
           </button>
         </div>
 
-        <form @submit.prevent="submitEditMember" class="modal-body">
+        <form class="modal-body" @submit.prevent="submitEditMember">
           <div class="field">
             <label>Name</label>
-            <input v-model="editingMember.name" required />
+            <input v-model="editingMember.name" required >
           </div>
           <div class="field">
             <label>Email</label>
-            <input v-model="editingMember.email" type="email" required />
+            <input v-model="editingMember.email" type="email" required >
           </div>
           <div class="field">
             <label>Circle</label>
@@ -407,7 +420,7 @@
 
           <div class="field">
             <label>Email Template</label>
-            <textarea v-model="inviteTemplate" rows="12"></textarea>
+            <textarea v-model="inviteTemplate" rows="12"/>
             <p class="help-text" style="margin-top: 4px">
               Tokens: <code>{name}</code>, <code>{loginLink}</code>,
               <code>{circle}</code>
@@ -439,14 +452,14 @@
         </div>
 
         <div class="modal-actions">
-          <button @click="showInviteModal = false" class="btn">
+          <button class="btn" @click="showInviteModal = false">
             {{ inviteResults ? "Done" : "Cancel" }}
           </button>
           <button
             v-if="!inviteResults"
             :disabled="sendingInvites"
-            @click="submitInvites"
             class="btn btn-primary"
+            @click="submitInvites"
           >
             {{
               sendingInvites
@@ -477,6 +490,30 @@ const {
 
 const searchQuery = ref("");
 const circleFilter = ref("");
+const statusFilter = ref("");
+const sortKey = ref("createdAt");
+const sortDir = ref("desc");
+
+const STATUS_LABELS = {
+  active: "Active",
+  pending_payment: "Pending",
+  suspended: "Suspended",
+  cancelled: "Cancelled",
+};
+const statusLabel = (s) => STATUS_LABELS[s] || "Pending";
+
+const toggleSort = (key) => {
+  if (sortKey.value === key) {
+    sortDir.value = sortDir.value === "asc" ? "desc" : "asc";
+  } else {
+    sortKey.value = key;
+    sortDir.value = key === "createdAt" ? "desc" : "asc";
+  }
+};
+const sortIndicator = (key) => {
+  if (sortKey.value !== key) return "";
+  return sortDir.value === "asc" ? "▲" : "▼";
+};
 const showCreateModal = ref(false);
 const creating = ref(false);
 
@@ -519,7 +556,7 @@ const newMember = reactive({
 const filteredMembers = computed(() => {
   if (!members.value) return [];
 
-  return members.value.filter((member) => {
+  const filtered = members.value.filter((member) => {
     const matchesSearch =
       !searchQuery.value ||
       member.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
@@ -528,7 +565,33 @@ const filteredMembers = computed(() => {
     const matchesCircle =
       !circleFilter.value || member.circle === circleFilter.value;
 
-    return matchesSearch && matchesCircle;
+    const matchesStatus =
+      !statusFilter.value || (member.status || "pending_payment") === statusFilter.value;
+
+    return matchesSearch && matchesCircle && matchesStatus;
+  });
+
+  const key = sortKey.value;
+  const dir = sortDir.value === "asc" ? 1 : -1;
+  return [...filtered].sort((a, b) => {
+    let av = a[key];
+    let bv = b[key];
+    if (key === "contributionTier") {
+      av = Number(av) || 0;
+      bv = Number(bv) || 0;
+    } else if (key === "createdAt") {
+      av = av ? new Date(av).getTime() : 0;
+      bv = bv ? new Date(bv).getTime() : 0;
+    } else if (key === "status") {
+      av = a.status || "pending_payment";
+      bv = b.status || "pending_payment";
+    } else {
+      av = (av || "").toString().toLowerCase();
+      bv = (bv || "").toString().toLowerCase();
+    }
+    if (av < bv) return -1 * dir;
+    if (av > bv) return 1 * dir;
+    return 0;
   });
 });
 
@@ -1055,6 +1118,44 @@ tbody td {
   font-size: 11px;
 }
 
+/* ---- SORTABLE HEADERS ---- */
+th.sortable {
+  cursor: pointer;
+  user-select: none;
+}
+th.sortable:hover {
+  color: var(--candle);
+}
+.sort-ind {
+  display: inline-block;
+  width: 10px;
+  font-size: 9px;
+  color: var(--candle);
+  margin-left: 2px;
+}
+
+/* ---- MEMBER STATUS BADGES ---- */
+.badge.status {
+  text-transform: uppercase;
+}
+.badge.status-active {
+  color: var(--green, #3a6b3a);
+  border-color: rgba(58, 107, 58, 0.45);
+}
+.badge.status-pending_payment {
+  color: var(--text-dim);
+  border-color: var(--border);
+}
+.badge.status-suspended {
+  color: var(--ember);
+  border-color: rgba(138, 68, 32, 0.45);
+}
+.badge.status-cancelled {
+  color: var(--text-faint);
+  border-color: var(--border);
+  opacity: 0.7;
+}
+
 /* ---- MODALS ---- */
 .modal-overlay {
   position: fixed;

app/pages/board.vue

@@ -1,16 +1,18 @@
 <template>
   <PageShell title="Bulletin Board" :subtitle="pageSubtitle">
     <div class="action-bar">
-      <button type="button" class="new-post-btn" @click="openNewForm">
+      <button
-        + New Post
+        v-if="cooperativeTags.length > 0"
-      </button>
+        type="button"
-    </div>
+        class="drawer-btn"
-
+        @click="showTagsDrawer = !showTagsDrawer"
-    <div v-if="cooperativeTags.length > 0" class="tags-drawer-toggle">
+      >
-      <button type="button" class="drawer-btn" @click="showTagsDrawer = !showTagsDrawer">
         Tags...
         <span v-if="activeTagFilter" class="tag-count-badge">1</span>
       </button>
+      <button type="button" class="new-post-btn" @click="openNewForm">
+        + New Post
+      </button>
     </div>
 
     <div v-if="showTagsDrawer && cooperativeTags.length > 0" class="tags-drawer">
@@ -206,7 +208,9 @@ onMounted(async () => {
   padding: 12px 24px;
   border-bottom: 1px dashed var(--border);
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
 }
 
 .new-post-btn {
@@ -230,10 +234,6 @@ onMounted(async () => {
 }
 
 /* ---- TAGS DRAWER ---- */
-.tags-drawer-toggle {
-  padding: 8px 24px;
-  border-bottom: 1px dashed var(--border);
-}
 .drawer-btn {
   font-family: "Commit Mono", monospace;
   font-size: 11px;
@@ -376,9 +376,6 @@ onMounted(async () => {
   .action-bar {
     padding: 12px 16px;
   }
-  .tags-drawer-toggle {
-    padding: 8px 16px;
-  }
   .skills-bar {
     padding: 10px 16px;
   }

app/pages/member/profile.vue

@@ -1,67 +1,69 @@
 <template>
   <PageShell as="form" @submit.prevent="handleSubmit">
     <ClientOnly>
-    <div v-if="loading" class="loading-state">
+      <div v-if="loading" class="loading-state">
-      <p style="color: var(--text-faint)">Loading your profile...</p>
+        <p style="color: var(--text-faint)">Loading your profile...</p>
-    </div>
+      </div>
 
-    <div v-else-if="!memberData" class="loading-state">
+      <div v-else-if="!memberData" class="loading-state">
-      <p style="color: var(--text-faint); margin-bottom: 12px">
+        <p style="color: var(--text-faint); margin-bottom: 12px">
-        Please sign in to access your profile settings.
+          Please sign in to access your profile settings.
-      </p>
+        </p>
-      <button
+        <button
-        type="button"
+          type="button"
-        class="btn btn-primary"
+          class="btn btn-primary"
-        @click="
+          @click="
-          openLoginModal({
+            openLoginModal({
-            title: 'Sign in to your profile',
+              title: 'Sign in to your profile',
-            description: 'Enter your email to manage your profile settings',
+              description: 'Enter your email to manage your profile settings',
-          })
+            })
-        "
+          "
-      >
-        Sign In
-      </button>
-    </div>
-
-    <template v-else>
-      <!-- PAGE HEADER -->
-      <PageHeader
-        title="Edit Profile"
-        subtitle="How you appear to other members"
-      >
-        <NuxtLink
-          v-if="memberId && memberData?.status === MEMBER_STATUSES.ACTIVE && formData.showInDirectory"
-          :to="`/members/${memberId}`"
-          class="view-profile-link"
         >
-          View my public profile &rarr;
+          Sign In
-        </NuxtLink>
+        </button>
-      </PageHeader>
+      </div>
 
-      <ColumnsLayout cols="2">
+      <template v-else>
-        <template #left>
+        <!-- PAGE HEADER -->
-          <PageSection>
+        <PageHeader
-            <div class="section-label">Basics</div>
+          title="Edit Profile"
+          subtitle="How you appear to other members"
+        >
+          <NuxtLink
+            v-if="
+              memberId &&
+              memberData?.status === MEMBER_STATUSES.ACTIVE &&
+              formData.showInDirectory
+            "
+            :to="`/members/${memberId}`"
+            class="view-profile-link"
+          >
+            View my public profile &rarr;
+          </NuxtLink>
+        </PageHeader>
 
-            <div class="field">
+        <ColumnsLayout cols="2">
-              <label>Name</label>
+          <template #left>
-              <input
+            <PageSection>
-                v-model="formData.name"
+              <div class="section-label">Basics</div>
-                type="text"
+
-                placeholder="Your name"
+              <div class="field">
-                required
+                <label>Name</label>
-              />
+                <input
-            </div>
+                  v-model="formData.name"
+                  type="text"
+                  placeholder="Your name"
+                  required
+                >
+              </div>
 
-            <div class="row-2">
               <div class="field">
                 <label>Pronouns</label>
                 <input
                   v-model="formData.pronouns"
                   type="text"
                   placeholder="e.g., she/her, they/them"
-                />
+                >
-                <PrivacyToggle v-model="formData.pronounsPrivacy" />
               </div>
               <div class="field">
                 <label>Timezone</label>
@@ -73,190 +75,194 @@
                   searchable-placeholder="Search timezones..."
                   placeholder="Select a timezone"
                   class="timezone-select"
+                  :ui="{
+                    content: 'tz-content',
+                    item: 'tz-item',
+                    input: 'tz-input',
+                  }"
                 />
-                <PrivacyToggle v-model="formData.timeZonePrivacy" />
               </div>
-            </div>
 
-            <div class="field">
-              <label>Avatar</label>
-              <div class="avatar-row">
-                <button
-                  v-for="ghost in availableGhosts"
-                  :key="ghost.value"
-                  type="button"
-                  class="avatar-option"
-                  :class="{ selected: formData.avatar === ghost.value }"
-                  :title="ghost.label"
-                  @click="formData.avatar = ghost.value"
-                >
-                  <img :src="ghost.image" :alt="ghost.label" />
-                </button>
-              </div>
-              <PrivacyToggle v-model="formData.avatarPrivacy" />
-            </div>
-          </PageSection>
-
-          <PageSection divider="top">
-            <div class="section-label">About You</div>
-
-            <div class="row-2">
               <div class="field">
-                <label>Studio / Organization</label>
+                <label>Avatar</label>
-                <input
+                <div class="avatar-row">
-                  v-model="formData.studio"
-                  type="text"
-                  placeholder="Studio name"
-                />
-                <PrivacyToggle v-model="formData.studioPrivacy" />
-              </div>
-              <div class="field">
-                <label>Location</label>
-                <input
-                  v-model="formData.location"
-                  type="text"
-                  placeholder="Toronto, ON"
-                />
-                <PrivacyToggle v-model="formData.locationPrivacy" />
-              </div>
-            </div>
-
-            <div class="field">
-              <label>Bio</label>
-              <textarea
-                v-model="formData.bio"
-                rows="4"
-                placeholder="Share your background, interests, and experience..."
-                maxlength="300"
-              ></textarea>
-              <div class="char-count">
-                {{ formData.bio?.length || 0 }} / 300
-              </div>
-              <PrivacyToggle v-model="formData.bioPrivacy" />
-            </div>
-
-            <div class="field">
-              <label>What I Do</label>
-              <CraftTagSelector
-                v-model="formData.craftTags"
-                :tags="craftTags"
-                @suggest="openTagSuggest('craft')"
-              />
-              <PrivacyToggle v-model="formData.craftTagsPrivacy" />
-            </div>
-          </PageSection>
-
-          <PageSection divider="top">
-            <div class="section-label">Visibility</div>
-
-            <div class="toggle-field">
-              <USwitch
-                v-model="formData.showInDirectory"
-                aria-label="Show in Member Directory"
-              />
-              <div class="toggle-label">
-                Show in Member Directory
-                <span class="toggle-sub"
-                  >Your profile will appear in the public member listing</span
-                >
-              </div>
-            </div>
-          </PageSection>
-        </template>
-
-        <template #right>
-          <PageSection>
-            <div class="section-label">Board</div>
-
-            <div class="field">
-              <label>Slack Handle</label>
-              <input
-                v-model="formData.boardSlackHandle"
-                type="text"
-                placeholder="@yourslackname"
-              />
-              <div class="field-help">
-                Shown on your board posts so other members can reach out.
-              </div>
-            </div>
-
-            <div class="posts-header">
-              <div class="posts-heading">Your Posts</div>
-              <NuxtLink to="/board" class="posts-new-link">+ New Post</NuxtLink>
-            </div>
-
-            <div v-if="myPosts.length === 0" class="posts-empty">
-              No posts yet.
-              <NuxtLink to="/board" class="posts-empty-link">
-                Visit the Board
-              </NuxtLink>
-              to share what you're seeking or offering.
-            </div>
-
-            <ul v-else class="posts-list">
-              <li v-for="post in myPosts" :key="post._id" class="post-item">
-                <div class="post-body">
-                  <div class="post-title">{{ post.title }}</div>
-                  <div class="post-excerpt">{{ postExcerpt(post) }}</div>
-                </div>
-                <div class="post-actions">
-                  <NuxtLink to="/board" class="post-action">Edit</NuxtLink>
                   <button
+                    v-for="ghost in availableGhosts"
+                    :key="ghost.value"
                     type="button"
-                    class="post-action post-action-danger"
+                    class="avatar-option"
-                    @click="handleDeletePost(post)"
+                    :class="{ selected: formData.avatar === ghost.value }"
+                    :title="ghost.label"
+                    @click="formData.avatar = ghost.value"
                   >
-                    Delete
+                    <img :src="ghost.image" :alt="ghost.label" >
                   </button>
                 </div>
-              </li>
-            </ul>
-          </PageSection>
-
-          <PageSection divider="top">
-            <div class="section-label">Notifications</div>
-
-            <div
-              v-for="toggle in notificationToggles"
-              :key="toggle.key"
-              class="toggle-field"
-            >
-              <USwitch
-                v-model="formData.notifications[toggle.key]"
-                :aria-label="toggle.label"
-              />
-              <div class="toggle-label">
-                {{ toggle.label }}
-                <span class="toggle-sub">{{ toggle.sub }}</span>
               </div>
-            </div>
+            </PageSection>
-          </PageSection>
-        </template>
-      </ColumnsLayout>
 
-      <!-- ======== SAVE BAR ======== -->
+            <PageSection divider="top">
-      <div class="save-bar">
+              <div class="section-label">About You</div>
-        <button
-          type="submit"
-          class="btn btn-primary"
-          :disabled="saving || !hasChanges"
-        >
-          {{ saving ? "Saving..." : "Save Profile" }}
-        </button>
-        <button type="button" class="btn" @click="resetForm">
-          Reset Changes
-        </button>
-      </div>
-    </template>
 
-    <template #fallback>
+              <div class="row-2">
-      <div class="loading-state">
+                <div class="field">
-        <p style="color: var(--text-faint)">Loading your profile...</p>
+                  <label>Studio / Organization</label>
-      </div>
+                  <input
-    </template>
+                    v-model="formData.studio"
+                    type="text"
+                    placeholder="Studio name"
+                  >
+                </div>
+                <div class="field">
+                  <label>Location</label>
+                  <input
+                    v-model="formData.location"
+                    type="text"
+                    placeholder="Toronto, ON"
+                  >
+                </div>
+              </div>
+
+              <div class="field">
+                <label>Bio</label>
+                <textarea
+                  v-model="formData.bio"
+                  rows="4"
+                  placeholder="Share your background, interests, and experience..."
+                  maxlength="300"
+                />
+                <div class="char-count">
+                  {{ formData.bio?.length || 0 }} / 300
+                </div>
+              </div>
+
+              <div class="field">
+                <label>What I Do</label>
+                <CraftTagSelector
+                  v-model="formData.craftTags"
+                  :tags="craftTags"
+                  @suggest="openTagSuggest('craft')"
+                />
+              </div>
+            </PageSection>
+
+            <PageSection divider="top">
+              <div class="section-label">Visibility</div>
+
+              <div class="toggle-field">
+                <USwitch
+                  v-model="formData.showInDirectory"
+                  aria-label="Show in Member Directory"
+                />
+                <div class="toggle-label">
+                  Show in Member Directory
+                  <span class="toggle-sub"
+                    >Your profile will appear in the private member
+                    directory.</span
+                  >
+                </div>
+              </div>
+            </PageSection>
+          </template>
+
+          <template #right>
+            <PageSection>
+              <div class="section-label">Board</div>
+
+              <div class="field">
+                <label>Gamma Space Slack Handle</label>
+                <input
+                  v-model="formData.boardSlackHandle"
+                  type="text"
+                  placeholder="@yourslackname"
+                >
+                <div class="field-help">
+                  Shown on your board posts so other members can reach out.
+                </div>
+              </div>
+
+              <div class="posts-header">
+                <div class="posts-heading">Your Posts</div>
+                <NuxtLink to="/board" class="posts-new-link"
+                  >+ New Post</NuxtLink
+                >
+              </div>
+
+              <div v-if="myPosts.length === 0" class="posts-empty">
+                No posts yet.
+                <NuxtLink to="/board" class="posts-empty-link">
+                  Visit the Board
+                </NuxtLink>
+                to share what you're seeking or offering.
+              </div>
+
+              <ul v-else class="posts-list">
+                <li v-for="post in myPosts" :key="post._id" class="post-item">
+                  <div class="post-body">
+                    <div class="post-title">{{ post.title }}</div>
+                    <div class="post-excerpt">{{ postExcerpt(post) }}</div>
+                  </div>
+                  <div class="post-actions">
+                    <NuxtLink to="/board" class="post-action">Edit</NuxtLink>
+                    <button
+                      type="button"
+                      class="post-action post-action-danger"
+                      @click="handleDeletePost(post)"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </li>
+              </ul>
+            </PageSection>
+
+            <PageSection divider="top">
+              <div class="section-label">Notifications</div>
+
+              <div
+                v-for="toggle in notificationToggles"
+                :key="toggle.key"
+                class="toggle-field"
+              >
+                <USwitch
+                  v-model="formData.notifications[toggle.key]"
+                  :aria-label="toggle.label"
+                />
+                <div class="toggle-label">
+                  {{ toggle.label }}
+                  <span class="toggle-sub">{{ toggle.sub }}</span>
+                </div>
+              </div>
+            </PageSection>
+          </template>
+        </ColumnsLayout>
+
+        <!-- ======== SAVE BAR ======== -->
+        <div class="save-bar">
+          <button
+            type="submit"
+            class="btn btn-primary"
+            :disabled="saving || !hasChanges"
+          >
+            {{ saving ? "Saving..." : "Save Profile" }}
+          </button>
+          <button type="button" class="btn" @click="resetForm">
+            Reset Changes
+          </button>
+        </div>
+      </template>
+
+      <template #fallback>
+        <div class="loading-state">
+          <p style="color: var(--text-faint)">Loading your profile...</p>
+        </div>
+      </template>
     </ClientOnly>
 
-    <TagSuggestModal v-model:open="showTagSuggestModal" :pool="tagSuggestPool" />
+    <TagSuggestModal
+      v-model:open="showTagSuggestModal"
+      :pool="tagSuggestPool"
+    />
   </PageShell>
 </template>
 
@@ -265,7 +271,7 @@ import { MEMBER_STATUSES } from "~/composables/useMemberStatus";
 import { TIMEZONE_OPTIONS } from "~/config/timezones";
 
 definePageMeta({
-  middleware: 'auth',
+  middleware: "auth",
 });
 
 const { memberData, checkMemberStatus } = useAuth();
@@ -274,27 +280,67 @@ const { posts: myPosts, fetchPosts, deletePost } = useBoardPosts();
 const toast = useToast();
 
 const availableGhosts = [
-  { value: "disbelieving", label: "Disbelieving", image: "/ghosties/Ghost-Disbelieving.png" },
+  {
-  { value: "double-take", label: "Double Take", image: "/ghosties/Ghost-Double-Take.png" },
+    value: "disbelieving",
-  { value: "exasperated", label: "Exasperated", image: "/ghosties/Ghost-Exasperated.png" },
+    label: "Disbelieving",
+    image: "/ghosties/Ghost-Disbelieving.png",
+  },
+  {
+    value: "double-take",
+    label: "Double Take",
+    image: "/ghosties/Ghost-Double-Take.png",
+  },
+  {
+    value: "exasperated",
+    label: "Exasperated",
+    image: "/ghosties/Ghost-Exasperated.png",
+  },
   { value: "mild", label: "Mild", image: "/ghosties/Ghost-Mild.png" },
   { value: "sweet", label: "Sweet", image: "/ghosties/Ghost-Sweet.png" },
   { value: "wtf", label: "WTF", image: "/ghosties/Ghost-WTF.png" },
 ];
 
+// Compute current UTC offset for an IANA timezone (DST-aware).
+const utcOffset = (tz) => {
+  try {
+    const parts = new Intl.DateTimeFormat("en-US", {
+      timeZone: tz,
+      timeZoneName: "longOffset",
+    }).formatToParts(new Date());
+    const name = parts.find((p) => p.type === "timeZoneName")?.value || "";
+    // "GMT-05:00" → "UTC-05:00"; "GMT" → "UTC+00:00"
+    if (name === "GMT") return "UTC+00:00";
+    return name.replace("GMT", "UTC");
+  } catch {
+    return "";
+  }
+};
+
 // Include the saved timezone as a custom option if it's not in the curated list.
 const timezoneItems = computed(() => {
   const saved = formData.timeZone;
-  const list = [...TIMEZONE_OPTIONS];
+  const list = TIMEZONE_OPTIONS.map((t) => {
-  if (saved && !list.some((t) => t.value === saved)) {
+    const off = utcOffset(t.value);
-    list.unshift({ label: saved, value: saved });
+    return { ...t, label: off ? `${t.label} (${off})` : t.label };
+  });
+  if (saved && !TIMEZONE_OPTIONS.some((t) => t.value === saved)) {
+    const off = utcOffset(saved);
+    list.unshift({ label: off ? `${saved} (${off})` : saved, value: saved });
   }
   return list;
 });
 
 const notificationToggles = [
-  { key: "events", label: "Event reminders", sub: "Get notified about upcoming events" },
+  {
-  { key: "updates", label: "Community updates", sub: "New posts from members you follow" },
+    key: "events",
+    label: "Event reminders",
+    sub: "Get notified about upcoming events",
+  },
+  {
+    key: "updates",
+    label: "Community updates",
+    sub: "New posts from members you follow",
+  },
 ];
 
 const { data: tagsData } = await useFetch("/api/tags");
@@ -321,14 +367,7 @@ const formData = reactive({
   location: "",
   showInDirectory: true,
   craftTags: [],
-  craftTagsPrivacy: "members",
   boardSlackHandle: "",
-  pronounsPrivacy: "members",
-  timeZonePrivacy: "members",
-  avatarPrivacy: "members",
-  studioPrivacy: "members",
-  bioPrivacy: "members",
-  locationPrivacy: "members",
   notifications: {
     events: true,
     updates: true,
@@ -364,15 +403,6 @@ const loadProfile = () => {
   const board = memberData.value.board || {};
   formData.boardSlackHandle = board.slackHandle || "";
 
-  const privacy = memberData.value.privacy || {};
-  formData.pronounsPrivacy = privacy.pronouns || "members";
-  formData.timeZonePrivacy = privacy.timeZone || "members";
-  formData.avatarPrivacy = privacy.avatar || "members";
-  formData.studioPrivacy = privacy.studio || "members";
-  formData.bioPrivacy = privacy.bio || "members";
-  formData.locationPrivacy = privacy.location || "members";
-  formData.craftTagsPrivacy = privacy.craftTags || "members";
-
   const notifs = memberData.value.notifications || {};
   formData.notifications.events = notifs.events ?? true;
   formData.notifications.updates = notifs.updates ?? true;
@@ -397,7 +427,8 @@ const handleSubmit = async () => {
     console.error("Profile save error:", error);
     toast.add({
       title: "Update failed",
-      description: error.data?.statusMessage || error.data?.message || "Please try again.",
+      description:
+        error.data?.statusMessage || error.data?.message || "Please try again.",
       color: "error",
     });
   } finally {
@@ -474,11 +505,6 @@ useHead({
   gap: 12px;
 }
 
-/* ---- PRIVACY TOGGLE SPACING ---- */
-.field :deep(.priv) {
-  margin-top: 4px;
-}
-
 /* ---- FIELD LABELS (distinct from .section-label) ---- */
 .field label {
   font-size: 11px;
@@ -703,11 +729,6 @@ useHead({
   gap: 12px;
 }
 
-/* ---- TIMEZONE SELECT ---- */
-.timezone-select {
-  width: 100%;
-}
-
 /* ---- RESPONSIVE ---- */
 @media (max-width: 768px) {
   .row-2 {
@@ -721,3 +742,85 @@ useHead({
   }
 }
 </style>
+
+<style>
+/* Non-scoped: targets USelectMenu button root which does not inherit scoped data attribute. */
+button.timezone-select {
+  display: flex !important;
+  width: 100%;
+  padding: 5px 8px !important;
+  font-family: "Commit Mono", monospace !important;
+  font-size: 13px !important;
+  color: var(--text-bright) !important;
+  background: var(--input-bg) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  min-height: 0;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-color: transparent;
+}
+
+button.timezone-select:hover {
+  background: var(--input-bg) !important;
+}
+
+button.timezone-select:focus,
+button.timezone-select:focus-visible,
+button.timezone-select[aria-expanded="true"] {
+  border-color: var(--candle) !important;
+}
+
+/* Popup content (portalled to body) */
+.tz-content {
+  background: var(--input-bg) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 0 !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
+  --tw-ring-shadow: 0 0 #0000 !important;
+  --tw-ring-offset-shadow: 0 0 #0000 !important;
+  font-family: "Commit Mono", monospace !important;
+}
+
+/* Search input wrapper inside popup */
+.tz-input {
+  border-bottom: 1px dashed var(--border) !important;
+}
+
+.tz-input input {
+  font-family: "Commit Mono", monospace !important;
+  font-size: 13px !important;
+  color: var(--text-bright) !important;
+  background: transparent !important;
+  border-radius: 0 !important;
+  padding: 6px 8px !important;
+  box-shadow: none !important;
+  --tw-ring-shadow: 0 0 #0000 !important;
+  --tw-ring-offset-shadow: 0 0 #0000 !important;
+}
+
+/* Option rows */
+.tz-item {
+  font-family: "Commit Mono", monospace !important;
+  font-size: 13px !important;
+  color: var(--text) !important;
+  border-radius: 0 !important;
+  padding: 6px 8px !important;
+}
+
+.tz-item::before {
+  border-radius: 0 !important;
+}
+
+.tz-item[data-highlighted]::before,
+.tz-item[data-highlighted]:not([data-disabled])::before {
+  background: var(--surface-hover) !important;
+}
+
+.tz-item[data-highlighted],
+.tz-item[data-highlighted]:not([data-disabled]) {
+  color: var(--text-bright) !important;
+}
+</style>

server/api/auth/member.get.js

@@ -25,7 +25,6 @@ export default defineEventHandler(async (event) => {
     board: member.board,
     showInDirectory: member.showInDirectory,
     notifications: member.notifications,
-    privacy: member.privacy,
     createdAt: member.createdAt,
     onboarding: member.onboarding,
   };

server/api/members/[id].get.js

@@ -1,25 +1,8 @@
-import jwt from "jsonwebtoken";
 import Member from "../../models/member.js";
-import { connectDB } from "../../utils/mongoose.js";
+import { requireAuth } from "../../utils/auth.js";
 
 export default defineEventHandler(async (event) => {
-  await connectDB();
+  await requireAuth(event);
-
-  // Check if user is authenticated (optional — works for public and authenticated users)
-  const token = getCookie(event, "auth-token");
-  let isAuthenticated = false;
-
-  if (token) {
-    try {
-      const decoded = jwt.verify(token, useRuntimeConfig().jwtSecret);
-      if (decoded.memberId) {
-        isAuthenticated = true;
-      }
-    } catch {
-      // Invalid token, treat as public
-      isAuthenticated = false;
-    }
-  }
 
   const id = event.context.params.id;
 
@@ -30,7 +13,7 @@ export default defineEventHandler(async (event) => {
       status: "active",
     })
       .select(
-        "name pronouns timeZone avatar studio bio location socialLinks privacy circle craftTags board createdAt memberNumber",
+        "name pronouns timeZone avatar studio bio location socialLinks circle craftTags board createdAt memberNumber",
       )
       .lean();
 
@@ -41,42 +24,27 @@ export default defineEventHandler(async (event) => {
       });
     }
 
-    // Filter fields based on privacy settings
-    const privacy = member.privacy || {};
     const filtered = {
       _id: member._id,
       name: member.name,
       circle: member.circle,
       createdAt: member.createdAt,
       memberNumber: member.memberNumber,
-    };
+      avatar: member.avatar,
-
+      pronouns: member.pronouns,
-    // Helper function to check if field should be visible
+      timeZone: member.timeZone,
-    const isVisible = (field) => {
+      studio: member.studio,
-      const privacySetting = privacy[field] || "members";
+      bio: member.bio,
-      if (privacySetting === "public") return true;
+      location: member.location,
-      if (privacySetting === "members" && isAuthenticated) return true;
+      socialLinks: member.socialLinks,
-      if (privacySetting === "private") return false;
+      craftTags: member.craftTags,
-      return false;
+      board: {
-    };
+        slackHandle: member.board?.slackHandle,
-
+      },
-    // Add fields based on privacy settings
-    if (isVisible("avatar")) filtered.avatar = member.avatar;
-    if (isVisible("pronouns")) filtered.pronouns = member.pronouns;
-    if (isVisible("timeZone")) filtered.timeZone = member.timeZone;
-    if (isVisible("studio")) filtered.studio = member.studio;
-    if (isVisible("bio")) filtered.bio = member.bio;
-    if (isVisible("location")) filtered.location = member.location;
-    if (isVisible("socialLinks")) filtered.socialLinks = member.socialLinks;
-    if (isVisible("craftTags")) filtered.craftTags = member.craftTags;
-
-    filtered.board = {
-      slackHandle: member.board?.slackHandle,
     };
 
     return { member: filtered };
   } catch (error) {
-    // Re-throw NuxtErrors (like the 404 above)
     if (error.statusCode) {
       throw error;
     }

server/api/members/directory.get.js

@@ -1,23 +1,9 @@
-import jwt from "jsonwebtoken";
 import Member from "../../models/member.js";
 import Tag from "../../models/tag.js";
-import { connectDB } from "../../utils/mongoose.js";
+import { requireAuth } from "../../utils/auth.js";
 
 export default defineEventHandler(async (event) => {
-  await connectDB();
+  await requireAuth(event);
-
-  // Check if user is authenticated
-  const token = getCookie(event, "auth-token");
-  let isAuthenticated = false;
-
-  if (token) {
-    try {
-      jwt.verify(token, useRuntimeConfig().jwtSecret);
-      isAuthenticated = true;
-    } catch (err) {
-      isAuthenticated = false;
-    }
-  }
 
   const query = getQuery(event);
   const search = query.search || "";
@@ -56,42 +42,28 @@ export default defineEventHandler(async (event) => {
   try {
     const members = await Member.find(dbQuery)
       .select(
-        "name pronouns timeZone avatar studio bio location socialLinks privacy circle craftTags board createdAt",
+        "name pronouns timeZone avatar studio bio location socialLinks circle craftTags board createdAt",
       )
       .sort({ createdAt: -1 })
       .lean();
 
-    const filteredMembers = members.map((member) => {
+    const filteredMembers = members.map((member) => ({
-      const privacy = member.privacy || {};
+      _id: member._id,
-      const filtered = {
+      name: member.name,
-        _id: member._id,
+      circle: member.circle,
-        name: member.name,
+      createdAt: member.createdAt,
-        circle: member.circle,
+      avatar: member.avatar,
-        createdAt: member.createdAt,
+      pronouns: member.pronouns,
-      };
+      timeZone: member.timeZone,
-
+      studio: member.studio,
-      const isVisible = (field) => {
+      bio: member.bio,
-        const privacySetting = privacy[field] || "members";
+      location: member.location,
-        if (privacySetting === "public") return true;
+      socialLinks: member.socialLinks,
-        if (privacySetting === "members" && isAuthenticated) return true;
+      craftTags: member.craftTags,
-        return false;
+      board: {
-      };
-
-      if (isVisible("avatar")) filtered.avatar = member.avatar;
-      if (isVisible("pronouns")) filtered.pronouns = member.pronouns;
-      if (isVisible("timeZone")) filtered.timeZone = member.timeZone;
-      if (isVisible("studio")) filtered.studio = member.studio;
-      if (isVisible("bio")) filtered.bio = member.bio;
-      if (isVisible("location")) filtered.location = member.location;
-      if (isVisible("socialLinks")) filtered.socialLinks = member.socialLinks;
-      if (isVisible("craftTags")) filtered.craftTags = member.craftTags;
-
-      filtered.board = {
         slackHandle: member.board?.slackHandle,
-      };
+      },
-
+    }));
-      return filtered;
-    });
 
     const [craftTags, cooperativeTags] = await Promise.all([
       Tag.find({ pool: "craft", active: true }).sort({ label: 1 }).lean(),
@@ -110,6 +82,7 @@ export default defineEventHandler(async (event) => {
       },
     };
   } catch (error) {
+    if (error.statusCode) throw error;
     console.error("Directory fetch error:", error);
     throw createError({
       statusCode: 500,

server/api/members/profile.patch.js

@@ -22,18 +22,6 @@ export default defineEventHandler(async (event) => {
     "notifications",
   ];
 
-  // Privacy fields from validated body
-  const privacyFields = [
-    "pronounsPrivacy",
-    "timeZonePrivacy",
-    "avatarPrivacy",
-    "studioPrivacy",
-    "bioPrivacy",
-    "locationPrivacy",
-    "socialLinksPrivacy",
-    "craftTagsPrivacy",
-  ];
-
   // Build update object from validated data
   const updateData = {};
 
@@ -53,14 +41,6 @@ export default defineEventHandler(async (event) => {
     updateData["board.slackHandle"] = body.boardSlackHandle;
   }
 
-  // Handle privacy settings
-  privacyFields.forEach((privacyField) => {
-    if (body[privacyField] !== undefined) {
-      const baseField = privacyField.replace("Privacy", "");
-      updateData[`privacy.${baseField}`] = body[privacyField];
-    }
-  });
-
   try {
     const member = await Member.findByIdAndUpdate(
       memberId,
@@ -76,7 +56,7 @@ export default defineEventHandler(async (event) => {
     }
 
     // Log which fields were updated
-    const changedFields = Object.keys(body).filter(k => body[k] !== undefined && !k.endsWith('Privacy'))
+    const changedFields = Object.keys(body).filter(k => body[k] !== undefined)
     if (changedFields.length) {
       logActivity(memberId, 'profile_updated', { fields: changedFields })
     }

server/models/member.js

@@ -76,50 +76,6 @@ const memberSchema = new mongoose.Schema({
     slackHandle: String,
   },
 
-  // Privacy settings for profile fields
-  privacy: {
-    pronouns: {
-      type: String,
-      enum: ["members", "private"],
-      default: "members",
-    },
-    timeZone: {
-      type: String,
-      enum: ["members", "private"],
-      default: "members",
-    },
-    avatar: {
-      type: String,
-      enum: ["members", "private"],
-      default: "members",
-    },
-    studio: {
-      type: String,
-      enum: ["members", "private"],
-      default: "members",
-    },
-    bio: {
-      type: String,
-      enum: ["members", "private"],
-      default: "members",
-    },
-    location: {
-      type: String,
-      enum: ["members", "private"],
-      default: "members",
-    },
-    socialLinks: {
-      type: String,
-      enum: ["members", "private"],
-      default: "members",
-    },
-    craftTags: {
-      type: String,
-      enum: ["members", "private"],
-      default: "members",
-    },
-  },
-
   notifications: {
     events: { type: Boolean, default: true },
     updates: { type: Boolean, default: true },

server/utils/schemas.js

@@ -1,13 +1,6 @@
 import * as z from 'zod'
 import { ADMIN_ALERT_TYPES } from '../models/adminAlertDismissal.js'
 
-// Binary privacy: 'members' = visible to signed-in members, 'private' = hidden.
-// Legacy 'public' is accepted from old clients and coerced to 'members'.
-const privacyEnum = z.preprocess(
-  (v) => (v === 'public' ? 'members' : v),
-  z.enum(['members', 'private'])
-)
-
 export const emailSchema = z.object({
   email: z.string().trim().toLowerCase().email()
 })
@@ -37,15 +30,7 @@ export const memberProfileUpdateSchema = z.object({
     events: z.boolean().optional(),
     updates: z.boolean().optional()
   }).optional(),
-  pronounsPrivacy: privacyEnum.optional(),
-  timeZonePrivacy: privacyEnum.optional(),
-  avatarPrivacy: privacyEnum.optional(),
-  studioPrivacy: privacyEnum.optional(),
-  bioPrivacy: privacyEnum.optional(),
-  locationPrivacy: privacyEnum.optional(),
-  socialLinksPrivacy: privacyEnum.optional(),
   craftTags: z.array(z.string().max(100)).max(16).optional(),
-  craftTagsPrivacy: privacyEnum.optional(),
   boardSlackHandle: z.string().max(200).optional()
 })
 

tests/server/api/validation.test.js

@@ -175,20 +175,11 @@ describe('memberProfileUpdateSchema', () => {
     expect(result.data).not.toHaveProperty('status')
   })
 
-  it('validates privacy enum values', () => {
+  it('strips unknown privacy fields from profile update', () => {
-    const result = memberProfileUpdateSchema.safeParse({ bioPrivacy: 'invalid' })
+    const result = memberProfileUpdateSchema.safeParse({ bioPrivacy: 'members', bio: 'hello' })
-    expect(result.success).toBe(false)
-  })
-
-  it('accepts valid binary privacy values', () => {
-    expect(memberProfileUpdateSchema.safeParse({ bioPrivacy: 'members' }).success).toBe(true)
-    expect(memberProfileUpdateSchema.safeParse({ bioPrivacy: 'private' }).success).toBe(true)
-  })
-
-  it('coerces legacy "public" privacy value to "members"', () => {
-    const result = memberProfileUpdateSchema.safeParse({ bioPrivacy: 'public' })
     expect(result.success).toBe(true)
-    expect(result.data.bioPrivacy).toBe('members')
+    expect(result.data).not.toHaveProperty('bioPrivacy')
+    expect(result.data.bio).toBe('hello')
   })
 })