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

@@ -30,7 +30,11 @@
           subtitle="How you appear to other members"
         >
           <NuxtLink
-          v-if="memberId && memberData?.status === MEMBER_STATUSES.ACTIVE && formData.showInDirectory"
+            v-if="
+              memberId &&
+              memberData?.status === MEMBER_STATUSES.ACTIVE &&
+              formData.showInDirectory
+            "
             :to="`/members/${memberId}`"
             class="view-profile-link"
           >
@@ -50,18 +54,16 @@
                   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,9 +75,12 @@
                   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">
@@ -90,10 +95,9 @@
                     :title="ghost.label"
                     @click="formData.avatar = ghost.value"
                   >
-                  <img :src="ghost.image" :alt="ghost.label" />
+                    <img :src="ghost.image" :alt="ghost.label" >
                   </button>
                 </div>
-              <PrivacyToggle v-model="formData.avatarPrivacy" />
               </div>
             </PageSection>
 
@@ -107,8 +111,7 @@
                     v-model="formData.studio"
                     type="text"
                     placeholder="Studio name"
-                />
+                  >
-                <PrivacyToggle v-model="formData.studioPrivacy" />
                 </div>
                 <div class="field">
                   <label>Location</label>
@@ -116,8 +119,7 @@
                     v-model="formData.location"
                     type="text"
                     placeholder="Toronto, ON"
-                />
+                  >
-                <PrivacyToggle v-model="formData.locationPrivacy" />
                 </div>
               </div>
 
@@ -128,11 +130,10 @@
                   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">
@@ -142,7 +143,6 @@
                   :tags="craftTags"
                   @suggest="openTagSuggest('craft')"
                 />
-              <PrivacyToggle v-model="formData.craftTagsPrivacy" />
               </div>
             </PageSection>
 
@@ -157,7 +157,8 @@
                 <div class="toggle-label">
                   Show in Member Directory
                   <span class="toggle-sub"
-                  >Your profile will appear in the public member listing</span
+                    >Your profile will appear in the private member
+                    directory.</span
                   >
                 </div>
               </div>
@@ -169,12 +170,12 @@
               <div class="section-label">Board</div>
 
               <div class="field">
-              <label>Slack Handle</label>
+                <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>
@@ -182,7 +183,9 @@
 
               <div class="posts-header">
                 <div class="posts-heading">Your Posts</div>
-              <NuxtLink to="/board" class="posts-new-link">+ New Post</NuxtLink>
+                <NuxtLink to="/board" class="posts-new-link"
+                  >+ New Post</NuxtLink
+                >
               </div>
 
               <div v-if="myPosts.length === 0" class="posts-empty">
@@ -256,7 +259,10 @@
       </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: {
-    };
-
-    // 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 || {};
-      const filtered = {
       _id: member._id,
       name: member.name,
       circle: member.circle,
       createdAt: member.createdAt,
-      };
+      avatar: member.avatar,
-
+      pronouns: member.pronouns,
-      const isVisible = (field) => {
+      timeZone: member.timeZone,
-        const privacySetting = privacy[field] || "members";
+      studio: member.studio,
-        if (privacySetting === "public") return true;
+      bio: member.bio,
-        if (privacySetting === "members" && isAuthenticated) return true;
+      location: member.location,
-        return false;
+      socialLinks: member.socialLinks,
-      };
+      craftTags: member.craftTags,
-
+      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')
   })
 })