new navbar component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-panes",
-  "version": "4.4.2-4",
+  "version": "4.4.2-5",
   "description": "Solid-compatible Panes: applets and views for the mashlib and databrowser",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
@@ -58,7 +58,7 @@
   "dependencies": {
     "@solid/better-simple-slideshow": "^0.1.0",
     "activitystreams-pane": "1.0.3-4",
-    "chat-pane": "3.0.4-2",
+    "chat-pane": "3.0.4-3",
     "contacts-pane": "3.2.1-5",
     "dompurify": "^3.4.4",
     "folder-pane": "3.1.1-2",
@@ -68,18 +68,12 @@
     "meeting-pane": "3.0.3-1",
     "mime-types": "^3.0.2",
     "pane-registry": "3.1.2-2",
-    "profile-pane": "3.2.3-3",
+    "profile-pane": "3.2.3-4",
     "rdflib": "2.4.0",
     "solid-logic": "4.0.8-1",
     "solid-namespace": "^0.5.4",
     "solid-ui": "3.1.3-13",
-    "source-pane": "3.1.1-4"
-  },
-  "overrides": {
-    "rdflib": "$rdflib",
-    "solid-logic": "$solid-logic",
-    "solid-ui": "$solid-ui",
-    "pane-registry": "$pane-registry"
+    "source-pane": "3.1.1-5"
   },
   "devDependencies": {
     "@iconify/json": "2.2.494",

src/components/navbar/Navbar.styles.css

@@ -0,0 +1,36 @@
+:host {
+    display: block;
+}
+
+:host(.navbar--hidden) {
+    display: none !important;
+}
+
+.navbar {
+    border: 1px solid var(--color-border, #444);
+    border-radius: 5px;
+    display: flex;
+    background: var(--solid-ui-color-white, #fff);
+    overflow: hidden;
+}
+
+button {
+    padding: 10px 25px;
+    border-bottom: 2px solid transparent;
+    font-weight: 500;
+    font-size: 90%;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+}
+
+button.selected,
+button:active,
+button:hover,
+button:focus {
+    border-bottom-color: var(--solid-ui-color-primary, #7C4DFF);
+    border-radius: 0;
+    color: var(--solid-ui-color-primary, #7C4DFF);
+    text-transform: capitalize;
+    background: color-mix(in srgb, currentColor 25%, transparent);
+}

src/components/navbar/Navbar.ts

@@ -0,0 +1,51 @@
+import { customElement, WebComponent } from 'solid-ui'
+import { html, TemplateResult } from 'lit'
+import { property } from 'lit/decorators.js'
+
+import 'solid-ui/components/account'
+import 'solid-ui/components/button'
+import 'solid-ui/components/menu-item'
+import 'solid-ui/components/menu'
+import 'solid-ui/components/solid-emblem'
+import '~icons/lucide/help-circle'
+
+import styles from './Navbar.styles.css'
+
+export interface NavbarMenuItem {
+  label: string | TemplateResult
+  selected?: boolean
+  onSelected?(): void
+}
+
+@customElement('solid-panes-navbar')
+export default class Navbar extends WebComponent {
+  static styles = styles
+
+  @property({ type: Array })
+  accessor navbarItems: NavbarMenuItem[] = []
+
+  private selectItem (item: NavbarMenuItem) {
+    this.navbarItems = this.navbarItems.map(menuItem => ({
+      ...menuItem,
+      selected: menuItem === item
+    }))
+    item.onSelected?.()
+  }
+
+  render () {
+    return html`
+    <nav class="navbar">
+       ${this.navbarItems.map(menuItem => html`
+        <button
+          type="button"
+          class=${menuItem.selected ? 'selected' : ''}
+          @click=${() => this.selectItem(menuItem)}
+          title=${typeof menuItem.label === 'string' ? menuItem.label : ''}
+        >
+          ${menuItem.label}
+        </button>
+      `)}
+    </nav>
+    `
+  }
+}

src/components/navbar/index.ts

@@ -0,0 +1,4 @@
+import Navbar from './Navbar'
+
+export { Navbar }
+export default Navbar

src/dashboard/homepage.ts

@@ -1,12 +1,12 @@
 import { Fetcher, IndexedFormula, NamedNode } from 'rdflib'
-import { loadProfileFromURI, getName } from '../profileUtils/ownerProfile'
+import { loadProfileFromURI, getName } from '../utils/webIdUtils'
 
 export async function generateHomepage (
   uri: NamedNode,
   store: IndexedFormula,
   fetcher: Fetcher
 ): Promise<HTMLElement> {
-  const ownersProfile = await loadProfileFromURI(uri, store, fetcher)
+  const ownersProfile = await loadProfileFromURI(uri)
   const name = getName(store, ownersProfile)
 
   const wrapper = document.createElement('div')

src/mainPage/header.ts

@@ -9,6 +9,8 @@ import '~icons/lucide/folder-open'
 import '~icons/lucide/layout-dashboard'
 import '~icons/lucide/settings-2'
 import '../components/header'
+import { getProfilePaneFromURI, getSocialPaneFromURI, getFolderPanesFromURI } from '../utils/paneUtils'
+import { sym } from 'rdflib'
 
 export async function createHeader (outliner: OutlineManager) {
   const existingHeader = document.querySelector('solid-panes-header')
@@ -17,56 +19,72 @@ export async function createHeader (outliner: OutlineManager) {
     return existingHeader
   }
 
+  const me = authn.currentUser()
+
   const main = document.getElementById('MainContent')
+  const outlineView = document.getElementById('OutlineView')
   const tmpContainer = document.createElement('div')
+
+  function hideNavbar () {
+    const navbar = document.querySelector<HTMLElement>('solid-panes-navbar')
+    if (navbar) {
+      navbar.classList.add('navbar--hidden')
+    }
+  }
+
+  const storagePanes = me ? await getFolderPanesFromURI(me) : []
+  const storageMenuItems: AccountMenuItem[] = storagePanes.map(pane => ({
+    label: html`<icon-lucide-folder-open slot="left-icon"></icon-lucide-folder-open> ${pane.label()}`,
+    async onSelected () {
+      hideNavbar()
+      if (me) {
+        outliner.GotoSubject(sym(window.location.href), true, pane, true, undefined, outlineView, false)
+      }
+    }
+  }))
   const menuItems: AccountMenuItem[] = [
     {
       label: html`<icon-lucide-user slot="left-icon"></icon-lucide-user> Profile`,
-      onSelected () {
-        const currentUser = authn.currentUser()
-
-        if (currentUser) {
-          outliner.showDashboard(currentUser, { pane: 'profile' })
+      async onSelected () {
+        hideNavbar()
+        if (me) {
+          const profilePane = await getProfilePaneFromURI(me)
+          outliner.GotoSubject(sym(window.location.href), true, profilePane, true, undefined, outlineView, false)
         }
       }
     },
     {
       label: html`<icon-lucide-users slot="left-icon"></icon-lucide-users> Friends`,
-      onSelected () {
-        const currentUser = authn.currentUser()
-
-        if (currentUser) {
-          outliner.showDashboard(currentUser, { pane: 'social' })
-        }
-      }
-    },
-    {
-      label: html`<icon-lucide-folder-open slot="left-icon"></icon-lucide-folder-open> Storage`,
-      onSelected () {
-        const currentUser = authn.currentUser()
-
-        if (currentUser) {
-          outliner.showDashboard(currentUser, { pane: 'folder' })
+      async onSelected () {
+        hideNavbar()
+        if (me) {
+          const socialPane = await getSocialPaneFromURI(me)
+          outliner.GotoSubject(sym(window.location.href), true, socialPane, true, undefined, outlineView, false)
         }
       }
     },
+    ...storageMenuItems,
     {
       label: html`<icon-lucide-layout-dashboard slot="left-icon"></icon-lucide-layout-dashboard> Dashboard`,
       onSelected () {
-        const currentUser = authn.currentUser()
-
-        if (currentUser) {
-          outliner.showDashboard(currentUser, { pane: 'home' })
+        hideNavbar()
+        if (me) {
+          const pane = outliner.context.session.paneRegistry.byName('home')
+          if (pane) {
+            outliner.GotoSubject(sym(window.location.href), true, pane, true, undefined, outlineView, false)
+          }
         }
       }
     },
     {
       label: html`<icon-lucide-settings-2 slot="left-icon"></icon-lucide-settings-2> Preferences`,
       onSelected () {
-        const currentUser = authn.currentUser()
-
-        if (currentUser) {
-          outliner.showDashboard(currentUser, { pane: 'basicPreferences' })
+        hideNavbar()
+        if (me) {
+          const pane = outliner.context.session.paneRegistry.byName('basicPreferences')
+          if (pane) {
+            outliner.GotoSubject(sym(window.location.href), true, pane, true, undefined, outlineView, false)
+          }
         }
       }
     },

src/mainPage/index.ts

@@ -7,6 +7,9 @@ import { LiveStore, NamedNode } from 'rdflib'
 import type { RenderEnvironment } from 'pane-registry'
 import { getOutliner, OutlineManager } from '../index'
 import { createHeader } from './header'
+import { createNavbar } from './navbar'
+import { getProfilePaneFromURI } from '../utils/paneUtils'
+import { isWebIdUri } from '../utils/webIdUtils'
 
 // Symbol used to stash the last render-relevant env snapshot on the outliner
 // so refreshUI can skip a full GotoSubject re-render when nothing changed.
@@ -40,10 +43,16 @@ export async function initMainPage (
   ;(outliner as any)[LAST_RENDER_ENV_KEY] = renderEnvSignature(environment)
   uri = uri || window.location.href
   const subject: NamedNode = typeof uri === 'string' ? store.sym(uri) : uri
-  outliner.GotoSubject(subject, true, undefined, true, undefined)
+  const historyPane = window.history.state?.paneName
+  const initialPane = !historyPane && isWebIdUri(subject)
+    ? await getProfilePaneFromURI(subject)
+    : undefined
+
+  outliner.GotoSubject(subject, true, initialPane, true, undefined)
 
   const header = await createHeader(outliner)
-  return Promise.all([header])
+  const navbar = await createNavbar(outliner)
+  return Promise.all([header, navbar])
 }
 
 export async function refreshUI (outliner: OutlineManager) {