:sparkles: using tab layout condtionally for summary bar

frontend/src/App.vue

 import { currentProfile } from './services'
 import { surveyFactory } from './utils'
 
-// const DEV_MODE = import.meta.env.VITE_DEV == 'true'
-const DEV_MODE = false
+const DEV_MODE = import.meta.env.VITE_DEV == 'true'
+// const DEV_MODE = false
 const DEV_PID = 45
 
 export default {

frontend/src/components/NamePlate.vue

 <template lang="pug">
 .name-plate.xs12.w-flex.justify-center
     section(v-if="pid" :class="{ box: !isList }")
-        router-link(:to="`/profile/${pid}`")
+        router-link(:to="`/profile/${pid}`" disabled)
             h1.text-capitalize {{ name }}
                 span O
             p.text-capitalize {{role}}&nbsp;
             required: true,
         },
         name: {
-            type: Object,
+            type: String,
+            required: true,
+        },
+        pronouns: {
+            type: String,
             required: true,
         },
         isList: {

frontend/src/components/PairingButton.vue

 <template lang="pug">
-w-tag(color="mint-green" bg-color="red" xl).xs12.mt4.mb4
-    p.pa4.text-upper paired    
+w-tag(color="mint-green" bg-color="green" xl).xs12.mt4.mb4
+    p.pa4.text-upper pair pending
 </template>
 
 <script>

frontend/src/components/ProfileCard.vue

 <template lang="pug">
 w-card.profile-card-list--card.xs12.pa12
     header.xs12.w-flex.column.center
-        NamePlate(:pid="card.pid" :name="card.name" :role="card.role" :is-list="isList" :is-paired="isPaired")
-        h1(v-if="isPaired && !isList") some other field
+        NamePlate(
+            :pid="card.pid"
+            :name="card.name"
+            :pronouns="card.pronouns"
+            :role="card.role"
+            :is-list="isList"
+            :is-paired="isPaired"
+        )
+        
+        w-button.text-upper.xs12.pa6(v-if="isPaired && !isList")
+            w-icon(xl).mr1 mdi mdi-heart
+            | start chat
         
         template(v-if="!isList")
-            SummaryBar(:is-paired="isPaired" :show-about="isPaired")
+            SummaryBar(
+                :is-tab="isPaired"
+                :tab-content="card.summary"
+            )
             TagList(v-if="!isPaired || isList")
 
     article.xs12.w-flex.column.justify-space-between
             :key="aspect.name"
         )
     
-    footer(v-if="!isList")
+    footer(v-if="!isList && !isPaired")
         .pa12
-            p {{ bio }}
+            p {{ card.summary.about.tab }}
         PairingButton(v-if="!isPaired")
 </template>
 
 import TagList from './TagList.vue'
 import PairingButton from './PairingButton.vue'
 
-// const isPaired = ref(false)
-const isPaired = ref(true)
+// const isPaired = ref(true)
+const isPaired = ref(false)
 
 const props = defineProps({
     card: {
         type: Array,
         required: true,
     },
-    bio: {
-        type: String,
-        required: false,
-        default: null,
-    },
     isList: {
         type: Boolean,
         required: false,

frontend/src/components/ProfileCardList.vue

         ProfileCard.match-layout(
             v-for="(card, i) in cards"
             :key="`${card.pid}-${i}`"
-            :card="card" :aspects="aspects" :bio="bio" :is-list="true"
+            :card="card"
+            :aspects="aspects"
+            :is-list="true"
         )
 </template>
 
     new Aspect({ name: 'focus', labels: ['big picture', 'focused'] }),
     new Aspect({ name: 'attention', labels: ['guided', 'self-managed'] }),
 ])
-const bio = ref(
-    'this is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long description',
-)
 
 const router = useRouter()
 const emit = defineEmits(['reload'])
     emit('reload')
 }
 
-const view = pid => {
-    router.push({ path: `/matches/${pid}` })
-}
-
 const subscribeToChannel = async channelName => {
     // create a chatter reference from the current profile
     const chatter = currentProfile.chatter

frontend/src/components/SummaryBar.vue

 <template lang="pug">
 section.w-flex.column.pb5
-    nav.fill-width.w-flex.row
-        h1(v-if="showAbout") about
-        ul.xs12.w-flex.row
-            li(v-for="[label, percentage] in summary" :key="label").w-flex.row
-                w-icon(xl).mr1 mdi mdi-heart
+    nav.fill-width.w-flex.column.justify-space-between
+
+        // Tabbed Layout
+        w-tabs(v-if="isTab" :items="Object.keys(tabContent)" center fill-bar)
+            template(#item-title="{ item }")
                 .w-flex.column.justify-start
-                    p {{ percentage }}%
-                    p.text-capitalize {{ label }}
+                    p(v-if="tabContent[item].matchPerc") {{ tabContent[item].matchPerc }}%
+                    p(v-else) &nbsp;
+                    p {{ item }}
+            template(v-if="isTab" #item-content="{ item }")
+                .tab 
+                    p {{ tabContent[item].tab }}
+
+        // Untabbed Layout
+        ul.w-flex.row.justify-space-between(v-else)
+            template(v-for="(item, index) in Object.keys(tabContent)" :key="index")
+                li.w-flex.row(v-if="item !== 'about'")
+                    w-icon(xl).mr1 mdi mdi-heart
+                    .w-flex.column.justify-start
+                        p {{ tabContent[item].matchPerc }}%
+                        p {{ item }}
 </template>
 
 <script>
 export default {
     props: {
-        summary: {
+        tabContent: {
             required: true,
-            type: Array,
-            default: () => [
-                ['passion', 50],
-                ['aspirations', 50],
-                ['skills', 50],
-            ],
+            type: Object,
         },
-        showAbout: {
+        isTab: {
             required: false,
             type: Boolean,
             default: false,
             default: true,
         },
     },
-    data: () => ({}),
 }
 </script>

frontend/src/entities/card/card.js

 /** @module card/card */
 
+const DEFAULT_ABOUT =
+    'A really really really really really. Really really really really really really really really really really really long bio.'
+
+class SummaryGroup {
+    constructor() {
+        this.about = {
+            tab: null,
+            matchPerc: null,
+            disabled: false,
+        }
+        this.passion = {
+            tab: 'This is a passion tab content.',
+            matchPerc: 50,
+            disabled: false,
+        }
+        this.aspirations = {
+            tab: 'This is a aspirations tab content.',
+            matchPerc: 50,
+            disabled: false,
+        }
+        this.skills = {
+            tab: 'This is a skils tab content.',
+            matchPerc: 50,
+            disabled: false,
+        }
+    }
+    updateTab(tab, content) {
+        this[tab].tab = content
+        return this[tab]
+    }
+    updateMatch(tab, percentage) {
+        this[tab].matchPerc = percentage
+        return this[tab]
+    }
+    toggle(tab) {
+        this[tab].disabled = !this[tab].disabled
+    }
+}
+
 class Aspect {
     constructor({ name, labels, percentage = 50 }) {
         this.name = name
 
         this.presence = null
         this.urgency = null
-        this.pronouns = null
+        this.pronouns = 'she/her/hers'
         this.ethinicity = null
         this.locale = null
         this.email = null
         this.images = []
         this.tags = []
 
-        this.bio = null
+        this.summary = new SummaryGroup()
+
         this.aspects = [
             new Aspect({
                 name: 'creativity',
     c.presence = profile?.profile_prefs?.presence?.val
     c.urgency = profile?.profile_prefs?.urgency?.val
     c.pronouns = profile?.profile_prefs?.pronouns?.val
+        ? profile?.profile_prefs?.pronouns?.val
+        : c.pronouns
     c.ethinicity = profile?.profile_prefs?.ethnicity?.val
     c.locale = `${profile.city}, ${profile.state}`
     c.email = profile.user_email
-    c.bio = profile.profile_description
+    // TODO: delete me later
+    if (profile.profile_description) {
+        c.summary.updateTab('about', profile.profile_description)
+    } else {
+        c.summary.updateTab('about', DEFAULT_ABOUT)
+    }
     return c
 }
 export { Card, makeCardFromProfile }

frontend/src/views/ProfileView.vue

     article(v-if='!loading')
         ProfileCard(
             :aspects='card.aspects'
-            :bio='card.bio'
             :is-list='false'
             :card='card'
         )
                 console.error(err)
             }
             this.card = makeCardFromProfile(this.profile)
-            this.card.bio = this.profile.profile_description
-                ? this.profile.profile_description
-                : 'this is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long descriptionthis is a long description'
             this.loading = false
         },
     },

frontend/src/wave.js

     WMenu,
     WProgress,
     WOverlay,
+    WTabs,
     WRadio,
     WRadios,
     WSelect,
     WMenu,
     WProgress,
     WOverlay,
+    WTabs,
     WRadio,
     WRadios,
     WSelect,