Updates

2026-04-15 17:45:09 +01:00 · 2026-04-15 17:45:09 +01:00 · 2394248d53
commit 2394248d53
parent 28040f44f4
13 changed files with 571 additions and 538 deletions
--- a/app/components/AppNavigation.vue
+++ b/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);
-  margin-left: 6px;
+  background: var(--green);
+  margin-left: 0px;
  vertical-align: middle;
  transform: translateY(-1px);
 }
--- a/app/components/PrivacyToggle.vue
+++ b/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>
--- a/app/components/TopStrip.vue
+++ b/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;
--- a/app/pages/admin/members/index.vue
+++ b/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;
--- a/app/pages/board.vue
+++ b/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;
  }
--- a/app/pages/member/profile.vue
+++ b/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>