close to final design and calling components

Author: timea-solid

README.md

@@ -88,3 +88,5 @@ We have added comments in the code to make it explicit which parts are 100% writ
 * Model Claude Opus 4.6: Initially solid-panes is loaded into a HTML shell form mashlib that looks like ... Also, an iFrame is rendered inside the <div class="TabulatorOutline" id="DummyUUID"> for “isolated pane rendering”. Analize the solid-panes code for what it uses from this HTML and suggest a new HTML structure which is mobile and accessibility friendly. Lets go ahead and make chnages in this code as suggested to accommodate the new databwroser HTML.
 
 * Raptor mini: take a look how I wired the environement from mashlib into solid-panes. It is not quite right, can you suggest fixes?
+
+* Raptor mini: Update the code to use the new solid-ui-header component. Keep in mind the log in and sign up are wired in specific ways.

src/home/homePane.ts

@@ -8,7 +8,7 @@
  **
  */
 
-import { PaneDefinition } from 'pane-registry'
+import { DataBrowserContext, PaneDefinition } from 'pane-registry'
 import { NamedNode } from 'rdflib'
 import { authn } from 'solid-logic'
 import { create, icons, login } from 'solid-ui'
@@ -29,7 +29,7 @@ const HomePaneSource: PaneDefinition = {
     return 'home'
   },
 
-  render: function (subject, context) {
+  render: function (subject, context: DataBrowserContext) {
     const dom = context.dom
     const showContent = async function () {
       const homePaneContext = { div, dom, statusArea: div, me }
@@ -54,6 +54,7 @@ const HomePaneSource: PaneDefinition = {
       const relevantPanes = await login.filterAvailablePanes(
         context.session.paneRegistry.list
       )
+      // @ts-ignore
       create.newThingUI(creationContext, context, relevantPanes) // newUI Have to pass panes down
 
       login.registrationList(homePaneContext, {}).then(function () {})

src/index.ts

@@ -25,7 +25,7 @@ import {
   RenderEnvironment
 } from 'pane-registry'
 import { createContext } from './outline/context'
-import { initMainPage, updateMenuLayout } from './mainPage'
+import { initMainPage, refreshUI } from './mainPage'
 
 function getOutliner (dom, environment?: RenderEnvironment): OutlineManager {
   if (!dom.outlineManager) {
@@ -68,7 +68,7 @@ export {
   UI,
   versionInfo,
   initMainPage,
-  updateMenuLayout,
+  refreshUI,
   list, // from paneRegistry
   paneForIcon, // from paneRegistry
   paneForPredicate, // from paneRegistry

src/mainPage/footer.ts

@@ -8,6 +8,7 @@ const SOLID_PROJECT_URL = 'https://solidproject.org'
 const SOLID_PROJECT_NAME = 'solidproject.org'
 
 export function createFooter (store: LiveStore) {
+  // @ts-ignore
   initFooter(store, setFooterOptions())
 }
 

src/mainPage/header.ts

@@ -1,82 +1,176 @@
-import { authSession, authn } from 'solid-logic'
-import { icons, initHeader } from 'solid-ui'
+import { authSession, authn, store } from 'solid-logic'
+import { icons, widgets, utils } from 'solid-ui'
+import { Header } from 'solid-ui/dist/components/header/index'
+import type {
+  HeaderAccountMenuItem,
+  HeaderAuthState,
+  HeaderMenuItem
+} from 'solid-ui/dist/components/header/index'
 import { OutlineManager } from '../outline/manager'
 import { LiveStore } from 'rdflib'
 /**
  * menu icons
 */
 const HELP_MENU_ICON = icons.iconBase + 'noun_help.svg'
 const SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg'
-
 /**
  * menu elements
 */
-const USER_GUIDE_MENU_ITEM = 'User guide'
-const REPORT_A_PROBLEM_MENU_ITEM = 'Report a problem'
-const SHOW_YOUR_PROFILE_MENU_ITEM = 'Show your profile'
-const LOG_OUT_MENU_ITEM = 'Log out'
+const SIGN_IN_MENU_ITEM = 'Log In'
+const SIGN_OUT_MENU_ITEM = 'Log Out'
+const SIGN_UP_MENU_ITEM = 'Sign Up'
+const ACCOUNT_MENU_LABEL = '▼'
+const SIGN_UP__MENU_LINK = 'https://solidproject.org/get_a_pod'
 
-type UserMenuItem = { label: string; onclick: () => void }
-/**
- * URLS
- */
-const USER_GUIDE_MENU_URL = 'https://solidos.github.io/userguide/'
-const REPORT_A_PROBLEM_MENU_URL = 'https://github.com/solidos/solidos/issues'
+// data structure extracted for solid-ui-header binding
+export const DEFAULT_HELP_MENU_LIST = [
+  { label: 'User guide', url: 'https://solidos.github.io/userguide/', target: '_blank' },
+  { label: 'Report a problem', url: 'https://github.com/solidos/solidos/issues', target: '_blank' }
+]
+
+const HEADER_MOBILE_STYLE_ID = 'solid-ui-header-mobile-style'
+
+function ensureMobileHeaderStyles () {
+  if (document.getElementById(HEADER_MOBILE_STYLE_ID)) return
+  const style = document.createElement('style')
+  style.id = HEADER_MOBILE_STYLE_ID
+  style.textContent = `
+    solid-ui-header[layout="mobile"]::part(logo) {
+      display: none !important;
+    }
+  `
+  document.head.appendChild(style)
+}
 
 export async function createHeader (store: LiveStore, outliner: OutlineManager) {
-  initHeader(store, await setUserMenu(outliner), setHeaderOptions())
+  ensureMobileHeaderStyles()
+
+  const header = (document.querySelector('solid-ui-header') || document.createElement('solid-ui-header')) as Header
+  const isNewHeader = !header.isConnected
+
+  // ensure it is in DOM (before MainContent for consistency)
+  const main = document.getElementById('MainContent')
+  if (!header.isConnected) {
+    if (main && main.parentNode) {
+      main.parentNode.insertBefore(header, main)
+    } else {
+      document.body.prepend(header)
+    }
+  }
+
+  await refreshHeader(outliner, header)
+
+  if (isNewHeader) {
+    const refreshCurrentHeader = async () => {
+      await refreshHeader(outliner, header)
+    }
+
+    authSession.events.on('login', refreshCurrentHeader)
+    authSession.events.on('logout', refreshCurrentHeader)
+    authSession.events.on('sessionRestore', refreshCurrentHeader)
+
+    header.addEventListener('login-success', async () => {
+      await refreshCurrentHeader()
+    })
+
+    header.addEventListener('signup-success', async () => {
+      await refreshCurrentHeader()
+    })
+
+    header.addEventListener('account-menu-select', (e: Event) => {
+      const detail = (e as CustomEvent).detail
+      if (detail?.action === 'logout') {
+        authSession.logout()
+      } else if (detail?.action === 'show-profile') {
+        openUserProfile(outliner)
+      }
+    })
+  }
+
+  return header
 }
 
-function setHeaderOptions () {
-  const helpMenuList = [
-    { label: USER_GUIDE_MENU_ITEM, url: USER_GUIDE_MENU_URL, target: '_blank' },
-    { label: REPORT_A_PROBLEM_MENU_ITEM, url: REPORT_A_PROBLEM_MENU_URL, target: '_blank' }
-  ]
-  const headerOptions = { logo: SOLID_ICON_URL, helpIcon: HELP_MENU_ICON, helpMenuList }
+export async function refreshHeader (outliner: OutlineManager, headerElement?: Header) {
+  ensureMobileHeaderStyles()
+  const headerOptions = setHeaderOptions(outliner)
+  const header = headerElement || document.querySelector('solid-ui-header') as Header | null
+  if (!header) return null
+
+  header.theme = headerOptions.theme
+  header.layout = headerOptions.layout
+  header.brandLink = headerOptions.brandLink
+  header.logo = headerOptions.layout === 'desktop' ? headerOptions.logo : ''
+  header.helpIcon = headerOptions.helpIcon
+  header.helpMenuList = headerOptions.helpMenuList
+  header.authState = headerOptions.authState
+  header.loginAction = headerOptions.loginAction
+  header.signUpAction = headerOptions.signUpAction
+  header.accountMenu = await setUserMenu()
+  header.logoutLabel = headerOptions.logoutLabel
+  header.accountLabel = headerOptions.accountLabel
+  header.accountAvatar = headerOptions.accountAvatar
+
+  return header
+}
+
+function setHeaderOptions (outliner: OutlineManager) {
+  const currentUser = authn.currentUser()
+  const isAuthenticated = !!currentUser
+  const authState: HeaderAuthState = isAuthenticated ? 'logged-in' : 'logged-out'
+  const layout: Header['layout'] = outliner.context?.environment?.layout === 'mobile' ? 'mobile' : 'desktop'
+  const theme: Header['theme'] = outliner.context?.environment?.theme === 'dark' ? 'dark' : 'light'
+
+  const headerOptions = {
+    logo: SOLID_ICON_URL,
+    helpIcon: HELP_MENU_ICON,
+    helpMenuList: DEFAULT_HELP_MENU_LIST,
+    layout,
+    theme,
+    brandLink: '/',
+    authState,
+    loginAction: {
+      label: SIGN_IN_MENU_ITEM
+    } as HeaderMenuItem,
+    signUpAction: {
+      label: SIGN_UP_MENU_ITEM,
+      url: SIGN_UP__MENU_LINK,
+    } as HeaderMenuItem,
+    logoutLabel: SIGN_OUT_MENU_ITEM,
+    accountLabel: isAuthenticated ? ACCOUNT_MENU_LABEL : '',
+    accountAvatar: isAuthenticated ? widgets.findImage(currentUser) : undefined
+  }
 
   return headerOptions
 }
 
-async function setUserMenu (outliner: OutlineManager) {
-  // @ts-ignore: showProfile is used conditionally
-  const showProfile = {
-    label: SHOW_YOUR_PROFILE_MENU_ITEM,
-    onclick: () => openUserProfile(outliner)
+async function setUserMenu () {
+  const me = authn.currentUser()
+  if (!me) {
+    return []
   }
 
-  const logOut: UserMenuItem = {
-    label: LOG_OUT_MENU_ITEM,
-    onclick: () => {
-      authSession.logout()
-    }
+  try {
+    await store.fetcher.load(me.doc())
+  } catch (err) {
+    console.error('Unable to load user profile', err)
   }
 
-  // the order of the menu is important here, show profile first and logout last
-  let userMenuList:UserMenuItem[] = [] // was [showProfile]
-  userMenuList = userMenuList.concat(await getMenuItems(outliner))
-  userMenuList.push(logOut)
+  const accountMenu: HeaderAccountMenuItem[] = [
+    {
+      label: utils.label(me),
+      avatar: widgets.findImage(me),
+      webid: me.value,
+      action: 'show-profile',
+      pane: 'profile-pane'
+    },
+    // TODO add all my available accounts
+  ]
 
-  return userMenuList
+  return accountMenu
 }
 
 // Does not work to jump to user profile,
 function openUserProfile (outliner: OutlineManager) {
   outliner.GotoSubject(authn.currentUser(), true, undefined, true, undefined)
   location.reload()
 }
-
-async function getMenuItems (outliner: OutlineManager) {
-  const items = await outliner.getDashboardItems()
-  return items.map((element) => {
-    return {
-      label: element.label,
-      onclick: () => openDashboardPane(outliner, element.tabName || element.paneName)
-    }
-  })
-}
-
-async function openDashboardPane (outliner: OutlineManager, pane: string): Promise<void> {
-  outliner.showDashboard({
-    pane
-  })
-}

src/mainPage/index.ts

@@ -4,12 +4,13 @@
  */
 
 import { LiveStore, NamedNode } from 'rdflib'
-import { getOutliner } from '../index'
-import { createHeader } from './header'
+import { getOutliner, OutlineManager } from '../index'
+import { createHeader, refreshHeader } from './header'
 import { createFooter } from './footer'
-import { initResponsiveMenu } from './menu'
+import { createLeftSideMenu, refreshMenu } from './menu'
 
-export { updateMenuLayout } from './menu'
+export { refreshMenu as updateMenuLayout } from './menu'
+export { refreshHeader } from './header'
 
 function ensureMainContent () {
   let main = document.getElementById('MainContent') as HTMLElement | null
@@ -37,7 +38,12 @@ export async function initMainPage (
   outliner.GotoSubject(subject, true, undefined, true, undefined)
 
   const header = await createHeader(store, outliner)
-  const menu = initResponsiveMenu(outliner)
+  const menu = createLeftSideMenu(outliner)
   const footer = createFooter(store)
   return Promise.all([header, menu, footer])
 }
+
+export async function refreshUI (outliner: OutlineManager) {
+  await refreshHeader(outliner)
+  refreshMenu(outliner.context.environment?.layout === 'mobile' ? 'mobile' : 'desktop')
+}

src/mainPage/menu.css

@@ -21,7 +21,7 @@
 
 .menu-toggle {
   position: fixed;
-  top: 1.75rem;
+  top: 0.5rem;
   left: 2.75rem;
   z-index: 300;
   display: inline-flex;

src/mainPage/menu.ts

@@ -62,7 +62,7 @@ export const buildMenuHtml = (isAuthenticated: boolean) => {
   `
 }
 
-export const updateMenuLayout = (layout: 'mobile' | 'desktop') => {
+export const refreshMenu = (layout: 'mobile' | 'desktop') => {
   const navMenu = document.getElementById('NavMenu') as HTMLElement | null
   const toggle = document.getElementById('MenuToggleBtn') as HTMLButtonElement | null
   const overlay = document.getElementById('MenuOverlay') as HTMLElement | null
@@ -85,7 +85,7 @@ export const updateMenuLayout = (layout: 'mobile' | 'desktop') => {
   }
 }
 
-export const initResponsiveMenu = (outliner: OutlineManager) => {
+export const createLeftSideMenu = (outliner: OutlineManager) => {
   ensureMenuSkeleton()
   const navMenu = document.getElementById('NavMenu') as HTMLElement | null
   const menuToggle = document.getElementById('MenuToggleBtn') as HTMLElement | null