use profile sections in side menu

static/js/com/custom-html.js

@@ -65,6 +65,10 @@ export class CustomHtml extends LitElement {
       this.loadedHtml = this.html
       return
     }
+    if (!session.ctzn?.blob) {
+      this.currentError = "Custom HTML could not be loaded. If you are not logged in, please join a server to see this profile."
+      return
+    }
     try {
       let base64buf = (await session.ctzn.blob.get(this.userId, this.blobName))?.buf
       if (base64buf) this.loadedHtml = decodeBase64(base64buf)

static/js/com/header.js

@@ -9,6 +9,8 @@ import { CreateCommunityPopup } from './popups/create-community.js'
 import * as toast from './toast.js'
 import './button.js'
 
+import {DEFAULT_CITIZEN_PROFILE_SECTIONS} from '../lib/const.js'
+
 const CHECK_NOTIFICATIONS_INTERVAL = 10e3
 
 export class Header extends LitElement {
@@ -31,11 +33,15 @@ export class Header extends LitElement {
     this.isMenuOpen = false
     this.unreadNotificationsCount = 0
     this.community = undefined
+    this.sections = DEFAULT_CITIZEN_PROFILE_SECTIONS
+
     document.body.addEventListener('open-main-menu', e => {
       this.isMenuOpen = true
     })
     setInterval(this.checkNotifications.bind(this), CHECK_NOTIFICATIONS_INTERVAL)
-    session.onChange(() => this.requestUpdate())
+    session.onChange(() =>  this.requestUpdate())
+    session.onSecondaryState(() =>  this.requestUpdate())
+    // TODO make sure sections are reloaded on 'profile-updated'
   }
 
   firstUpdated () {
@@ -95,6 +101,7 @@ export class Header extends LitElement {
                 <span class="fas mr-1.5 fa-fw navicon fa-users"></span>
                 Communities
               </a>
+              ${info ? html`
               <hr class="my-3 mx-3">
               <a
                 class="flex items-center ${this.getMenuNavClass()} mt-1"
@@ -110,11 +117,16 @@ export class Header extends LitElement {
                 </span>
                 My Profile
               </a>
-              <a href="/${info.userId}/inventory" class=${this.getMenuNavClass()} @click=${this.onClickLink}>
-                <span class="fas mr-1.5 fa-fw navicon fa-suitcase"></span>
-                My Inventory
-              </a>
-              <hr class="my-3 mx-3">
+              ${session.mySections?.length > 0 ? repeat(session.mySections, (section) => {
+                return html`<a href="/${info?.userId}/${section.id}"
+                  class=${this.getMenuNavClass()}
+                  @click=${this.onClickLink}>
+                    <span class="fas mr-1.5 fa-fw navicon fa-angle-right"></span>
+                      ${section.label}
+                  </a>`
+    }) : ''}
+                  <hr class="my-3 mx-3"></hr>
+              `: ''}
             </div>
             <div class="mt-3 sm:mb-auto px-4">
               <app-button
@@ -135,6 +147,7 @@ export class Header extends LitElement {
             ${this.renderSessionCtrls()}
           </div>
         </div>
+        ${!info ? '' : html`
         <div class="secondary-menu bg-white overflow-y-auto px-2 py-2">
           <a
             class="flex items-center pl-2 pr-4 py-1 text-sm rounded hov:hover:bg-gray-100"
@@ -200,7 +213,7 @@ export class Header extends LitElement {
               <span class="truncate font-medium">${displayNames.render(f)}</span>
             </a>
           `)}
-        </div>
+        </div>`}
       </header>
       ${this.isMenuOpen ? html`
         <div

static/js/lib/api.js

@@ -17,7 +17,7 @@ export class CtznAPI {
   }
 
   get blob () {
-    return session.api.blob
+    return session.api?.blob
   }
 
   async lookupUser (userId) {

static/js/lib/session.js

@@ -1,4 +1,4 @@
-import { DEBUG_ENDPOINTS } from './const.js'
+import { DEBUG_ENDPOINTS, DEFAULT_CITIZEN_PROFILE_SECTIONS } from './const.js'
 import { create as createRpcApi } from './rpc-api.js'
 import { CtznAPI } from './api.js'
 import * as images from './images.js'
@@ -9,6 +9,7 @@ export let info = undefined
 export let myCommunities = undefined
 export let myFollowers = undefined
 export let myFollowing = undefined
+export let mySections = undefined
 export let api = undefined
 export let ctzn = new CtznAPI()
 
@@ -53,6 +54,9 @@ export async function loadSecondaryState () {
   myCommunities = memberships.map(m => m.value.community)
   myFollowers = followers?.followers
   myFollowing = follows?.entries?.map(e => e.value.subject.userId) || []
+
+  let userProfile = await ctzn.getProfile(info.userId).catch(e => undefined)
+  mySections = userProfile?.value?.sections || DEFAULT_CITIZEN_PROFILE_SECTIONS
   emitter.dispatchEvent(new Event('secondary-state'))
 }
 

static/js/views/user.js

@@ -262,11 +262,11 @@ class CtznUser extends LitElement {
         this.roles = roles
         console.log({userProfile: this.userProfile, members, roles})
 
-        if (session.isActive() && !this.amIFollowing && this.isMembershipClosed) {
+        if (session.isActive() && session.ctzn && !this.amIFollowing && this.isMembershipClosed) {
           let inviteEntry = await session.ctzn.db(this.userId)
             .table('ctzn.network/community-invite')
-            .get(session.info.userId)
-            .catch(e => undefined)
+            ?.get(session.info.userId)
+            .catch((_) => undefined)
           this.isUserInvited = !!inviteEntry?.value
         }
       }