Updates

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>Email</th>
-            <th>Circle</th>
-            <th>Tier</th>
+            <th class="sortable" @click="toggleSort('name')">Name <span class="sort-ind">{{ sortIndicator('name') }}</span></th>
+            <th class="sortable" @click="toggleSort('email')">Email <span class="sort-ind">{{ sortIndicator('email') }}</span></th>
+            <th class="sortable" @click="toggleSort('circle')">Circle <span class="sort-ind">{{ sortIndicator('circle') }}</span></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">
-        + New Post
-      </button>
-    </div>
-
-    <div v-if="cooperativeTags.length > 0" class="tags-drawer-toggle">
-      <button type="button" class="drawer-btn" @click="showTagsDrawer = !showTagsDrawer">
+      <button
+        v-if="cooperativeTags.length > 0"
+        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">
-      <p style="color: var(--text-faint)">Loading your profile...</p>
-    </div>
+      <div v-if="loading" class="loading-state">
+        <p style="color: var(--text-faint)">Loading your profile...</p>
+      </div>
 
-    <div v-else-if="!memberData" class="loading-state">
-      <p style="color: var(--text-faint); margin-bottom: 12px">
-        Please sign in to access your profile settings.
-      </p>
-      <button
-        type="button"
-        class="btn btn-primary"
-        @click="
-          openLoginModal({
-            title: 'Sign in to your profile',
-            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"
+      <div v-else-if="!memberData" class="loading-state">
+        <p style="color: var(--text-faint); margin-bottom: 12px">
+          Please sign in to access your profile settings.
+        </p>
+        <button
+          type="button"
+          class="btn btn-primary"
+          @click="
+            openLoginModal({
+              title: 'Sign in to your profile',
+              description: 'Enter your email to manage your profile settings',
+            })
+          "
         >
-          View my public profile &rarr;
-        </NuxtLink>
-      </PageHeader>
+          Sign In
+        </button>
+      </div>
 
-      <ColumnsLayout cols="2">
-        <template #left>
-          <PageSection>
-            <div class="section-label">Basics</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;
+          </NuxtLink>
+        </PageHeader>
 
-            <div class="field">
-              <label>Name</label>
-              <input
-                v-model="formData.name"
-                type="text"
-                placeholder="Your name"
-                required
-              />
-            </div>
+        <ColumnsLayout cols="2">
+          <template #left>
+            <PageSection>
+              <div class="section-label">Basics</div>
+
+              <div class="field">
+                <label>Name</label>
+                <input
+                  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>
-                <input
-                  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>
+                <label>Avatar</label>
+                <div class="avatar-row">
                   <button
+                    v-for="ghost in availableGhosts"
+                    :key="ghost.value"
                     type="button"
-                    class="post-action post-action-danger"
-                    @click="handleDeletePost(post)"
+                    class="avatar-option"
+                    :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>
-        </template>
-      </ColumnsLayout>
+            </PageSection>
 
-      <!-- ======== 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>
+            <PageSection divider="top">
+              <div class="section-label">About You</div>
 
-    <template #fallback>
-      <div class="loading-state">
-        <p style="color: var(--text-faint)">Loading your profile...</p>
-      </div>
-    </template>
+              <div class="row-2">
+                <div class="field">
+                  <label>Studio / Organization</label>
+                  <input
+                    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: "exasperated", label: "Exasperated", image: "/ghosties/Ghost-Exasperated.png" },
+  {
+    value: "disbelieving",
+    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];
-  if (saved && !list.some((t) => t.value === saved)) {
-    list.unshift({ label: saved, value: saved });
+  const list = TIMEZONE_OPTIONS.map((t) => {
+    const off = utcOffset(t.value);
+    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>