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",
@@ -75,12 +75,6 @@
     "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"
-  },
   "devDependencies": {
     "@iconify/json": "2.2.494",
     "@testing-library/dom": "^10.4.1",

src/components/navbar/Navbar.styles.css

@@ -0,0 +1,26 @@
+:host {
+    .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%;
+    }
+
+    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,44 @@
+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
+  href?: string
+  selected?: boolean
+  onSelected?(): void
+}
+
+@customElement('solid-panes-navbar')
+export default class Navbar extends WebComponent {
+  static styles = styles
+
+  @property({ type: Array })
+  accessor navbarItems: NavbarMenuItem[] = []
+
+  render () {
+    return html`
+    <nav class="navbar">
+       ${this.navbarItems.map(menuItem => html`
+        <button 
+          type='button' 
+          @click=${() => menuItem.onSelected?.()}
+          title="${menuItem.label}" 
+          text="${menuItem.label}" 
+          aria-expanded="false">
+            ${menuItem.label}
+        </button>
+      `)}
+    </nav>
+    `
+  }
+}

src/components/navbar/index.ts

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

src/mainPage/index.ts

@@ -7,6 +7,7 @@ import { LiveStore, NamedNode } from 'rdflib'
 import type { RenderEnvironment } from 'pane-registry'
 import { getOutliner, OutlineManager } from '../index'
 import { createHeader } from './header'
+import { createNavbar } from './navbar'
 
 // 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.
@@ -43,7 +44,8 @@ export async function initMainPage (
   outliner.GotoSubject(subject, true, undefined, 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) {

src/mainPage/navbar.ts

@@ -0,0 +1,83 @@
+import { store } from 'solid-logic'
+import { html, render } from 'lit-html'
+import type { OutlineManager } from '../outline/manager'
+import { getPodStorages } from '../outline/podUtils'
+import { createFolderPaneItem } from '../outline/folderPaneUtils'
+
+import '~icons/lucide/user'
+import '~icons/lucide/users'
+import '~icons/lucide/folder-open'
+import '../components/navbar'
+import { NamedNode } from 'rdflib'
+import { NavbarMenuItem } from 'src/components/navbar/Navbar'
+
+function createNavItem (label: string, onSelected: () => void): NavbarMenuItem {
+  return { label, onSelected }
+}
+
+async function createNavbarMenuItems (
+  outliner: OutlineManager,
+  subject: NamedNode,
+  OutlineView: HTMLElement | null
+): Promise<NavbarMenuItem[]> {
+  const baseItems: NavbarMenuItem[] = [
+    createNavItem('Profile', () => {
+      const profilePane = outliner?.context?.session?.paneRegistry?.byName('profile')
+      outliner.GotoSubject(subject, true, profilePane, true, undefined, OutlineView)
+    }),
+    createNavItem('Friends', () => {
+      const socialPane = outliner?.context?.session?.paneRegistry?.byName('social')
+      outliner.GotoSubject(subject, true, socialPane, true, undefined, OutlineView)
+    })
+  ]
+
+  const podStorages = await getPodStorages(subject.uri)
+  if (podStorages.length === 0) return baseItems
+
+  return [
+    ...baseItems,
+    createNavItem('Storage', () => {
+      const folderPanes = podStorages.map((pod, index) => createFolderPaneItem(outliner?.context?.session?.paneRegistry?.byName('folder'), pod, index))
+      if (folderPanes.length === 0) {
+        console.warn('Folder pane is not registered')
+        return
+      }
+      // TODO make storage work for more storage spaces, not just the first one
+      outliner.GotoSubject(subject, true, folderPanes[0], true, undefined, OutlineView)
+    })
+  ]
+}
+
+export async function createNavbar (outliner: OutlineManager) {
+  const existingNavbar = document.querySelector('solid-panes-navbar')
+
+  if (existingNavbar) {
+    return existingNavbar
+  }
+
+  const OutlineView = document.getElementById('OutlineView')
+  const mainContent = document.getElementById('MainContent')
+  const tmpContainer = document.createElement('div')
+  const uri = window.location.href
+  const subject: NamedNode = typeof uri === 'string' ? store.sym(uri) : uri
+  const menuItems = await createNavbarMenuItems(outliner, subject, OutlineView)
+
+  render(
+    html`<solid-panes-navbar .navbarItems=${menuItems}></solid-panes-navbar>`,
+    tmpContainer
+  )
+
+  const navbar = tmpContainer.firstElementChild as HTMLElement | null
+
+  if (!navbar) {
+    throw new Error('Failed to create nav bar')
+  }
+
+  if (mainContent) {
+    mainContent.insertBefore(navbar, mainContent.firstChild)
+  } else {
+    document.body.prepend(navbar)
+  }
+
+  return navbar
+}

src/outline/folderPaneUtils.ts

@@ -0,0 +1,39 @@
+import * as paneRegistry from 'pane-registry'
+import { getPodStorages } from './podUtils'
+import folderIcon from '../icons/folder.svg'
+import { NamedNode } from 'rdflib'
+
+const FOLDER_ICON = folderIcon
+
+// returns the folder pane of the pods of the given subject (or the current URL subject if none is provided), if any. If not, returns an empty array.
+export async function getFolderPaneforStorage (subject?: NamedNode) {
+  const uri = (new URL(window.location.href)).searchParams.get('uri')
+  const podUrl = subject?.uri || uri || window.location.href
+  const podStorages = await getPodStorages(podUrl)
+  if (!podStorages.length) return []
+
+  const folderPane = paneRegistry.byName('folder')
+  if (!folderPane) return []
+
+  return podStorages.map((pod, index) => createFolderPaneItem(folderPane, pod, index))
+}
+
+export function createFolderPaneItem (folderPane, pod: NamedNode, index: number) {
+  return {
+    name: folderPane.name,
+    paneName: 'folder',
+    tabName: `folder-${index}`,
+    label: function () {
+      return 'Storage'
+    },
+    render: function (_subject, context, options) {
+      return folderPane.render(pod, context, options)
+    },
+    shouldGetFocus: function () {
+      return false
+    },
+    requireQueryButton: !!folderPane.requireQueryButton,
+    subject: pod,
+    icon: FOLDER_ICON
+  }
+}

src/outline/manager.css

@@ -68,11 +68,12 @@
 }
 
 .tdFlex {
-  margin: var(--spacing-xxxs, 0.2rem);
-  border: none;
-  padding: 0;
+  border: 1px solid var(--color-border, #444);
+  border-radius: 5px;
   vertical-align: top;
   display: flex;
   justify-content: space-between;
   flex-direction: row;
+  background: var(--solid-ui-color-white, #fff);
+  overflow: hidden;
 }