From 8365feb97033bd56ba458b8c1f165a53dd0be4a9 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Wed, 8 Apr 2026 17:10:21 +0100
Subject: [PATCH] refactor(profile): migrate member/profile to PageShell
 vocabulary

- Replace .profile-page wrapper + nested form with <PageShell as=form @submit.prevent>
- Replace .profile-columns grid with <ColumnsLayout cols=2> + named slots
- Replace all 5 .profile-col-inset wrappers with <PageSection> components
- Replace <hr class=section-divider> separators with <PageSection divider=top>
- Add type=button to Sign In CTA (prevent accidental form submit)
- Delete .profile-page, .profile-authenticated, .page-content, .profile-main, .profile-columns, .profile-col-left/right, .profile-col-inset asymmetric padding, and collapse rules
---
 app/pages/member/profile.vue | 208 +++++++++--------------------------
 1 file changed, 51 insertions(+), 157 deletions(-)

diff --git a/app/pages/member/profile.vue b/app/pages/member/profile.vue
index 8d111e5..9457421 100644
--- a/app/pages/member/profile.vue
+++ b/app/pages/member/profile.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="profile-page">
+  <PageShell as="form" @submit.prevent="handleSubmit">
     <!-- Loading State -->
     <div v-if="loading" class="loading-state">
       <p style="color: var(--text-faint)">Loading your profile...</p>
@@ -11,6 +11,7 @@
         Please sign in to access your profile settings.
       </p>
       <button
+        type="button"
         class="btn btn-primary"
         @click="
           openLoginModal({
@@ -23,7 +24,7 @@
       </button>
     </div>
 
-    <div v-else class="profile-authenticated">
+    <template v-else>
       <!-- PAGE HEADER -->
       <PageHeader
         title="Edit Profile"
@@ -42,14 +43,12 @@
         </NuxtLink>
       </PageHeader>
 
-      <!-- TWO-COLUMN FORM -->
-      <form class="page-content" @submit.prevent="handleSubmit">
-        <div class="profile-main">
-          <div class="profile-columns">
-            <!-- ======== LEFT COLUMN ======== -->
-            <div class="profile-col-left">
-              <div class="profile-col-inset">
-                <div class="section-label">Basics</div>
+      <!-- TWO-COLUMN FORM BODY -->
+      <ColumnsLayout cols="2">
+        <!-- ======== LEFT COLUMN ======== -->
+        <template #left>
+          <PageSection>
+            <div class="section-label">Basics</div>
 
                 <div class="field">
                   <label>Name</label>
@@ -99,12 +98,11 @@
                   </div>
                   <PrivacyToggle v-model="formData.avatarPrivacy" />
                 </div>
-              </div>
+          </PageSection>
 
-              <!-- About You -->
-              <hr class="section-divider" />
-              <div class="profile-col-inset">
-                <div class="section-label">About You</div>
+          <!-- About You -->
+          <PageSection divider="top">
+            <div class="section-label">About You</div>
 
                 <div class="row-2">
                   <div class="field">
@@ -151,12 +149,11 @@
                   />
                   <PrivacyToggle v-model="formData.craftTagsPrivacy" />
                 </div>
-              </div>
+          </PageSection>
 
-              <!-- Visibility -->
-              <hr class="section-divider" />
-              <div class="profile-col-inset">
-                <div class="section-label">Visibility</div>
+          <!-- Visibility -->
+          <PageSection divider="top">
+            <div class="section-label">Visibility</div>
 
                 <div class="toggle-field">
                   <USwitch
@@ -171,13 +168,13 @@
                     >
                   </div>
                 </div>
-              </div>
-            </div>
+          </PageSection>
+        </template>
 
-            <!-- ======== RIGHT COLUMN ======== -->
-            <div class="profile-col-right">
-              <div class="profile-col-inset">
-                <div class="section-label">Community Connections</div>
+        <!-- ======== RIGHT COLUMN ======== -->
+        <template #right>
+          <PageSection>
+            <div class="section-label">Community Connections</div>
 
                 <div class="field">
                   <label>Topics</label>
@@ -247,12 +244,11 @@
                     </div>
                   </div>
                 </div>
-              </div>
+          </PageSection>
 
-              <!-- Notifications -->
-              <hr class="section-divider" />
-              <div class="profile-col-inset">
-                <div class="section-label">Notifications</div>
+          <!-- Notifications -->
+          <PageSection divider="top">
+            <div class="section-label">Notifications</div>
 
                 <div class="toggle-field">
                   <USwitch
@@ -292,36 +288,34 @@
                     >
                   </div>
                 </div>
-              </div>
-            </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>
-            <span v-if="saveSuccess" class="save-msg save-msg-ok"
-              >Profile updated.</span
-            >
-            <span v-if="saveError" class="save-msg save-msg-err">{{
-              saveError
-            }}</span>
-          </div>
-        </div>
-      </form>
-    </div>
+      <!-- ======== 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>
+        <span v-if="saveSuccess" class="save-msg save-msg-ok"
+          >Profile updated.</span
+        >
+        <span v-if="saveError" class="save-msg save-msg-err">{{
+          saveError
+        }}</span>
+      </div>
+    </template>
 
     <!-- Tag Suggest Modal -->
     <TagSuggestModal v-model:open="showTagSuggestModal" :pool="tagSuggestPool" />
-  </div>
+  </PageShell>
 </template>
 
 <script setup>
@@ -546,20 +540,6 @@ useHead({
 </script>
 
 <style scoped>
-.profile-page {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.profile-authenticated {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
 /* ---- LOADING / EMPTY STATE ---- */
 .loading-state {
   display: flex;
@@ -570,66 +550,6 @@ useHead({
   text-align: center;
 }
 
-.profile-page > .loading-state {
-  flex: 1;
-}
-
-/* ---- CONTENT AREA ---- */
-.page-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  padding: 0;
-}
-
-.profile-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-/* ---- TWO-COLUMN LAYOUT ---- */
-.profile-columns {
-  flex: 1;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr;
-  gap: 0;
-  align-items: stretch;
-  min-height: 0;
-}
-
-.profile-col-left,
-.profile-col-right {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  align-self: stretch;
-}
-
-@media (min-width: 1025px) {
-  .profile-col-left {
-    border-right: 1px dashed var(--border);
-  }
-}
-
-.profile-col-left > .profile-col-inset:first-of-type,
-.profile-col-right > .profile-col-inset:first-of-type {
-  padding-top: 14px;
-}
-
-.profile-col-left .profile-col-inset {
-  padding-left: 28px;
-  padding-right: 24px;
-}
-
-.profile-col-right .profile-col-inset {
-  padding-left: 24px;
-  padding-right: 28px;
-}
-
 /* ---- MULTI-COLUMN ROWS ---- */
 .row-2 {
   display: grid;
@@ -783,37 +703,11 @@ useHead({
 }
 
 /* ---- RESPONSIVE ---- */
-@media (max-width: 1024px) {
-  .profile-columns {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-  }
-
-  .profile-col-left {
-    border-right: none;
-    border-bottom: 1px dashed var(--border);
-    padding-bottom: 20px;
-    margin-bottom: 20px;
-  }
-
-  .profile-col-left .profile-col-inset,
-  .profile-col-right .profile-col-inset {
-    padding-left: 28px;
-    padding-right: 28px;
-  }
-}
-
 @media (max-width: 768px) {
   .row-2 {
     grid-template-columns: 1fr;
   }
 
-  .profile-col-left .profile-col-inset,
-  .profile-col-right .profile-col-inset {
-    padding-left: 16px;
-    padding-right: 16px;
-  }
-
   .save-bar {
     padding-left: 16px;
     padding-right: 16px;