@lvce-editor/server 0.4.4 → 0.6.0

package/static/fbac85f/packages/renderer-process/src/parts/ViewletQuickPick/ViewletQuickPick.js

@@ -0,0 +1,309 @@
+/* Tries to implement the pattern for combobox with listbox popup https://www.w3.org/TR/wai-aria-1.2/#combobox */
+
+import * as AriaAlert from '../AriaAlert/AriaAlert.js'
+import * as Focus from '../Focus/Focus.js'
+import * as InputBox from '../InputBox/InputBox.js'
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as ViewletQuickPickEvents from './ViewletQuickPickEvents.js'
+
+// TODO use another virtual list that just appends elements and
+// is optimized for fast show/hide, scrolling performance should
+// be good as well but is not as important as fast show/hide
+
+// TODO screenreader makes pause after reading colon, maybe there is a setting for screenreaders so they speak normally
+
+// TODO state
+
+// TODO when quickpick is shown recalculate style and layout is really slow (>10ms every time)
+
+// TODO accessibility issues with nvda: when pressing escape, it goes into different mode
+// but should just close quick-pick like vscode does
+
+const activeId = 'QuickPickItemActive'
+
+// TODO forbidden:
+// 1. methods
+// 2. functions inside functions
+
+/**
+ * @enum {string}
+ */
+const ClassNames = {
+  Label: 'Label',
+  QuickPickItem: 'QuickPickItem',
+  Icon: 'Icon',
+  QuickPickItemDescription: 'QuickPickItemDescription',
+  QuickPickStatus: 'QuickPickStatus',
+}
+
+/**
+ * @enum {string}
+ */
+const Ids = {
+  QuickPickHeader: 'QuickPickHeader',
+  QuickPickItems: 'QuickPickItems',
+  QuickPick: 'QuickPick',
+}
+
+/**
+ * @enum {string}
+ */
+const Roles = {
+  ListBox: 'listbox',
+  ComboBox: 'combobox',
+  Option: 'option',
+}
+
+const create$QuickPickItem = () => {
+  // TODO many quickPick items may not have description -> avoid creating description dom nodes if there is no description
+  const $QuickPickItemLabelText = document.createTextNode('')
+
+  const $QuickPickItemLabel = document.createElement('div')
+  $QuickPickItemLabel.className = ClassNames.Label
+  $QuickPickItemLabel.append($QuickPickItemLabelText)
+
+  const $QuickPickItemIcon = document.createElement('i')
+  $QuickPickItemIcon.className = ClassNames.Icon
+  const $QuickPickItem = document.createElement('div') // TODO ul/li would be better for structure but might be slower
+  $QuickPickItem.className = ClassNames.QuickPickItem
+  // @ts-ignore
+  $QuickPickItem.role = Roles.Option
+  $QuickPickItem.append($QuickPickItemIcon, $QuickPickItemLabel)
+  return $QuickPickItem
+}
+
+// TODO add test with show and slicedItems length is 0
+
+const create$QuickPickDescription = () => {
+  const $QuickPickItemDescription = document.createElement('div')
+  $QuickPickItemDescription.className = ClassNames.QuickPickItemDescription
+  return $QuickPickItemDescription
+}
+
+const render$QuickPickItemLess = ($QuickPickItem, quickPickItem) => {
+  render$QuickPickItemLabel($QuickPickItem.firstChild, quickPickItem)
+  const $QuickPickItemDescription = create$QuickPickDescription()
+  // render$QuickPickItemDescription($QuickPickItemDescription, quickPickItem)
+
+  $QuickPickItem.append($QuickPickItemDescription)
+}
+
+const render$QuickPickItemLabel = ($QuickPickItem, quickPickItem) => {
+  $QuickPickItem.children[1].firstChild.nodeValue = quickPickItem.label
+}
+
+const render$QuickPickItemIcon = ($QuickPickItem, quickPickItem) => {
+  $QuickPickItem.children[0].className = `Icon${quickPickItem.icon}`
+}
+
+const render$QuickPickItemEqual = ($QuickPickItem, quickPickItem) => {
+  render$QuickPickItemLabel($QuickPickItem, quickPickItem)
+  render$QuickPickItemIcon($QuickPickItem, quickPickItem)
+}
+
+const render$QuickPickItemMore = ($QuickPickItem, quickPickItem) => {
+  render$QuickPickItemLabel($QuickPickItem.firstChild, quickPickItem)
+  $QuickPickItem.lastChild.remove()
+}
+
+const render$QuickPickItem = ($QuickPickItem, quickPickItem) => {
+  $QuickPickItem.ariaPosInSet = `${quickPickItem.posInSet}` // TODO pass correct number as prop
+  $QuickPickItem.ariaSetSize = `${quickPickItem.setSize}`
+  $QuickPickItem.quickPickItem = quickPickItem
+  render$QuickPickItemEqual($QuickPickItem, quickPickItem)
+}
+
+const render$QuickPickItemsLess = ($QuickPickItems, quickPickItems) => {
+  for (let i = 0; i < $QuickPickItems.children.length; i++) {
+    render$QuickPickItem($QuickPickItems.children[i], quickPickItems[i])
+  }
+  const fragment = document.createDocumentFragment()
+  for (
+    let i = $QuickPickItems.children.length;
+    i < quickPickItems.length;
+    i++
+  ) {
+    const $QuickPickItem = create$QuickPickItem()
+    render$QuickPickItem($QuickPickItem, quickPickItems[i])
+    fragment.append($QuickPickItem)
+  }
+  $QuickPickItems.append(fragment)
+}
+
+const render$QuickPickItemsEqual = ($QuickPickItems, quickPickItems) => {
+  for (let i = 0; i < quickPickItems.length; i++) {
+    render$QuickPickItem($QuickPickItems.children[i], quickPickItems[i])
+  }
+}
+
+const render$QuickPickItemsMore = ($QuickPickItems, quickPickItems) => {
+  for (let i = 0; i < quickPickItems.length; i++) {
+    render$QuickPickItem($QuickPickItems.children[i], quickPickItems[i])
+  }
+  const diff = $QuickPickItems.children.length - quickPickItems.length
+  for (let i = 0; i < diff; i++) {
+    $QuickPickItems.lastChild.remove()
+  }
+}
+
+const render$QuickPickItems = ($QuickPickItems, quickPickItems) => {
+  if ($QuickPickItems.children.length < quickPickItems.length) {
+    render$QuickPickItemsLess($QuickPickItems, quickPickItems)
+  } else if ($QuickPickItems.children.length === quickPickItems.length) {
+    render$QuickPickItemsEqual($QuickPickItems, quickPickItems)
+  } else {
+    render$QuickPickItemsMore($QuickPickItems, quickPickItems)
+  }
+}
+
+export const setVisiblePicks = (state, visiblePicks) => {
+  if (state.$QuickPickStatus) {
+    hideStatus(state)
+  }
+  render$QuickPickItems(state.$QuickPickItems, visiblePicks)
+}
+
+export const setFocusedIndex = (state, oldFocusedIndex, newFocusedIndex) => {
+  const { $QuickPickItems, $QuickPickInput } = state
+  if (oldFocusedIndex >= 0) {
+    const $OldItem = $QuickPickItems.children[oldFocusedIndex]
+    if ($OldItem) {
+      $OldItem.removeAttribute('id')
+    }
+  }
+  if (newFocusedIndex >= 0) {
+    const $NewItem = $QuickPickItems.children[newFocusedIndex]
+    if ($NewItem) {
+      $NewItem.id = activeId
+      $QuickPickInput.setAttribute('aria-activedescendant', activeId)
+    }
+  }
+}
+
+export const focus = (state) => {
+  const { $QuickPickInput } = state
+  $QuickPickInput.focus()
+  Focus.setFocus('quickPickInput')
+}
+
+// TODO
+// - for windows narrator, ariaLabel works well
+// - for nvda ariaRoleDescription works better
+
+const handleBeforeInput = (event) => {
+  event.preventDefault()
+  const $Target = event.target
+  const selectionStart = $Target.selectionStart
+  const selectionEnd = $Target.selectionEnd
+  const inputType = event.inputType
+  const data = event.data
+  RendererWorker.send(
+    'QuickPick.handleBeforeInput',
+    /* inputType */ inputType,
+    /* data */ data,
+    /* selectionStart */ selectionStart,
+    /* selectionEnd */ selectionEnd
+  )
+}
+
+export const create = () => {
+  const $QuickPickInput = InputBox.create()
+  $QuickPickInput.setAttribute('aria-controls', Ids.QuickPickItems) // TODO use idl once supported
+  // @ts-ignore
+  $QuickPickInput.role = Roles.ComboBox
+  $QuickPickInput.ariaLabel = 'Type the name of a command to run.'
+  $QuickPickInput.ariaAutoComplete = 'list'
+  $QuickPickInput.onblur = ViewletQuickPickEvents.handleBlur
+  $QuickPickInput.oninput = ViewletQuickPickEvents.handleInput
+  $QuickPickInput.addEventListener('beforeinput', handleBeforeInput)
+  $QuickPickInput.ariaExpanded = 'true'
+
+  const $QuickPickHeader = document.createElement('div')
+  $QuickPickHeader.id = Ids.QuickPickHeader
+  $QuickPickHeader.append($QuickPickInput)
+
+  const $QuickPickItems = document.createElement('div')
+  $QuickPickItems.id = Ids.QuickPickItems
+  // @ts-ignore
+  $QuickPickItems.role = Roles.ListBox
+  $QuickPickItems.onmousedown = ViewletQuickPickEvents.handleMouseDown
+  $QuickPickItems.addEventListener(
+    'wheel',
+    ViewletQuickPickEvents.handleWheel,
+    { passive: true }
+  )
+
+  // TODO this works well with nvda but not with windows narrator
+  // probably a bug with windows narrator that doesn't support ariaRoleDescription
+  $QuickPickItems.ariaRoleDescription = 'Quick Input'
+
+  const $QuickPick = document.createElement('div')
+  $QuickPick.id = Ids.QuickPick
+  // $QuickPick.role= 'dialog'
+  $QuickPick.append($QuickPickHeader, $QuickPickItems)
+  // $QuickPick.setAttribute('aria-modal', 'false') // TODO why is this
+  $QuickPick.ariaLabel = 'Quick open'
+
+  return {
+    $Viewlet: $QuickPick,
+    $QuickPick,
+    $QuickPickInput,
+    $QuickPickItems,
+    $QuickPickStatus: undefined,
+  }
+}
+
+export const setPicks = (state, visiblePicks) => {
+  render$QuickPickItems(state.$QuickPickItems, visiblePicks)
+}
+
+const create$QuickPickStatus = () => {
+  const $QuickPickStatus = document.createElement('div')
+  $QuickPickStatus.className = 'QuickPickStatus'
+  // const te.$QuickPickStatus.role = 'status'
+  // $QuickPickStatus.ariaLive = 'polite'
+  // $QuickPickStatus.id = 'QuickPickStatus'
+  return $QuickPickStatus
+}
+
+export const hideStatus = (state) => {
+  state.$QuickPickStatus.remove()
+  state.$QuickPickStatus = undefined
+}
+
+export const showNoResults = (state, noResults, unfocusIndex) => {
+  setPicks(state, [])
+  if (!state.$QuickPickStatus) {
+    state.$QuickPickStatus = create$QuickPickStatus()
+    state.$QuickPick.append(state.$QuickPickStatus)
+  }
+  state.$QuickPickStatus.textContent = 'No Results'
+
+  // announce to screenreaders that there are no results
+  AriaAlert.alert('No results')
+}
+
+// TODO QuickPick module is always loaded lazily -> can create $QuickPick eagerly (no state / less state laying around)
+
+// TODO remove from dom vs display none which should be used?
+
+// TODO have common widgets container for all widgets (this, notifications, context menu)
+export const dispose = (state) => {
+  state.$QuickPickInput.onblur = null
+}
+
+export const setValue = (state, value) => {
+  const { $QuickPickInput } = state
+  $QuickPickInput.value = value
+}
+
+export const setCursorOffset = (state, cursorOffset) => {
+  const { $QuickPickInput } = state
+  $QuickPickInput.selectionStart = cursorOffset
+  $QuickPickInput.selectionEnd = cursorOffset
+}
+
+export const setItemsHeight = (state, itemsHeight) => {
+  const { $QuickPickItems } = state
+  $QuickPickItems.style.height = `${itemsHeight}px`
+}

package/static/fbac85f/packages/renderer-process/src/parts/ViewletQuickPick/ViewletQuickPickEvents.js

@@ -0,0 +1,110 @@
+/* Tries to implement the pattern for combobox with listbox popup https://www.w3.org/TR/wai-aria-1.2/#combobox */
+
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as WheelEventType from '../WheelEventType/WheelEventType.js'
+
+// TODO use another virtual list that just appends elements and
+// is optimized for fast show/hide, scrolling performance should
+// be good as well but is not as important as fast show/hide
+
+// TODO screenreader makes pause after reading colon, maybe there is a setting for screenreaders so they speak normally
+
+// TODO state
+
+// TODO when quickpick is shown recalculate style and layout is really slow (>10ms every time)
+
+// TODO accessibility issues with nvda: when pressing escape, it goes into different mode
+// but should just close quick-pick like vscode does
+
+const getNodeIndex = ($Node) => {
+  let index = 0
+  while (($Node = $Node.previousElementSibling)) {
+    index++
+  }
+  return index
+}
+
+const getTargetIndex = ($Target) => {
+  switch ($Target.className) {
+    case 'QuickPickItem':
+    case 'QuickPickItem Focused':
+      return getNodeIndex($Target)
+    case 'QuickPickItemLabel':
+      return getNodeIndex($Target.parentNode)
+    default:
+      return -1
+  }
+}
+
+export const handleWheel = (event) => {
+  switch (event.deltaMode) {
+    case WheelEventType.DomDeltaLine:
+      RendererWorker.send(
+        /* QuickPick.handleWheel */ 'QuickPick.handleWheel',
+        /* deltaY */ event.deltaY
+      )
+      break
+    case WheelEventType.DomDeltaPixel:
+      RendererWorker.send(
+        /* QuickPick.handleWheel */ 'QuickPick.handleWheel',
+        /* deltaY */ event.deltaY
+      )
+      break
+    default:
+      break
+  }
+}
+
+export const handleMouseDown = (event) => {
+  event.preventDefault()
+  const { clientX, clientY } = event
+  RendererWorker.send(
+    /* QuickPick.selectIndex */ 'QuickPick.handleClickAt',
+    /* x */ clientX,
+    /* y */ clientY
+  )
+}
+
+// TODO beforeinput event should prevent input event maybe
+// const handleBeforeInput = (event) => {
+//   if (!event.data) {
+//     return
+//   }
+//   const value = event.target.value + event.data
+//   RendererWorker.send(
+//     /* quickPickHandleInput */ 'QuickPick.handleInput',
+//     /* value */ value,
+//   )
+// }
+
+export const handleInput = (event) => {
+  const $Target = event.target
+  RendererWorker.send(
+    /* quickPickHandleInput */ 'QuickPick.handleInput',
+    /* value */ $Target.value
+  )
+}
+
+export const handleBlur = (event) => {
+  RendererWorker.send(/* QuickPick.handleBlur */ 'QuickPick.handleBlur')
+}
+
+// TODO
+// - for windows narrator, ariaLabel works well
+// - for nvda ariaRoleDescription works better
+
+export const handleBeforeInput = (event) => {
+  event.preventDefault()
+  const $Target = event.target
+  const selectionStart = $Target.selectionStart
+  const selectionEnd = $Target.selectionEnd
+  const inputType = event.inputType
+  const data = event.data
+  RendererWorker.send(
+    'QuickPick.handleBeforeInput',
+    /* inputType */ inputType,
+    /* data */ data,
+    /* selectionStart */ selectionStart,
+    /* selectionEnd */ selectionEnd
+  )
+}

package/static/fbac85f/packages/renderer-process/src/parts/ViewletSearch/ViewletSearch.js

@@ -0,0 +1,218 @@
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as InputBox from '../InputBox/InputBox.js'
+import * as Assert from '../Assert/Assert.js'
+import * as MouseEventType from '../MouseEventType/MouseEventType.js'
+import * as DirentType from '../DirentType/DirentType.js'
+
+const handleInput = (event) => {
+  const $Target = event.target
+  const value = $Target.value
+  RendererWorker.send(
+    /* ViewletSearch.handleInput */ 'Search.handleInput',
+    /* value */ value
+  )
+}
+
+const getNodeIndex = ($Node) => {
+  let index = 0
+  while (($Node = $Node.previousElementSibling)) {
+    index++
+  }
+  return index
+}
+
+const getIndexTreeItem = ($Target) => {
+  return getNodeIndex($Target)
+}
+
+const getIndexTreeItemLabel = ($Target) => {
+  return getNodeIndex($Target.parentNode)
+}
+
+const getIndex = ($Target) => {
+  switch ($Target.className) {
+    case 'TreeItem':
+      return getIndexTreeItem($Target)
+    case 'TreeItemLabel':
+      return getIndexTreeItemLabel($Target)
+    default:
+      return -1
+  }
+}
+
+const handleClick = (event) => {
+  if (event.button === MouseEventType.RightClick) {
+    return
+  }
+  const $Target = event.target
+  const index = getIndex($Target)
+  RendererWorker.send(
+    /* Search.handleClick */ 'Search.handleClick',
+    /* index */ index
+  )
+}
+
+const handleContextMenuMouse = (event) => {
+  const x = event.clientX
+  const y = event.clientY
+  RendererWorker.send(
+    /* Search.handleContextMenuMouseAt */ 'Search.handleContextMenuMouseAt',
+    /* x */ x,
+    /* y */ y
+  )
+}
+
+const handleContextMenuKeyboard = (event) => {
+  RendererWorker.send(
+    /* Search.handleContextMenuKeyboard */ 'Search.handleContextMenuKeyboard'
+  )
+}
+
+const handleContextMenu = (event) => {
+  event.preventDefault()
+  switch (event.button) {
+    case MouseEventType.Keyboard:
+      return handleContextMenuKeyboard(event)
+    default:
+      return handleContextMenuMouse(event)
+  }
+}
+
+// TODO name export not necessary
+export const name = 'Search'
+
+export const create = () => {
+  const $ViewletSearchInput = InputBox.create()
+  $ViewletSearchInput.placeholder = 'Search'
+  $ViewletSearchInput.oninput = handleInput
+  $ViewletSearchInput.className = 'InputBox ViewletSearchInput'
+
+  const $SearchResults = document.createElement('div')
+  $SearchResults.className = 'SearchResults'
+  // TODO onclick vs onmousedown, should be consistent in whole application
+  $SearchResults.onmousedown = handleClick
+  $SearchResults.oncontextmenu = handleContextMenu
+
+  const $SearchStatus = document.createElement('div')
+  // @ts-ignore
+  $SearchStatus.role = 'status'
+  $SearchStatus.className = 'ViewletSearchMessage'
+
+  const $Viewlet = document.createElement('div')
+  $Viewlet.dataset.viewletId = 'Search'
+  $Viewlet.className = 'Viewlet'
+  $Viewlet.append($ViewletSearchInput, $SearchStatus, $SearchResults)
+
+  return {
+    $Viewlet,
+    $ViewletSearchInput,
+    $SearchResults,
+    $SearchStatus,
+  }
+}
+
+export const refresh = (state, context) => {
+  Assert.object(state)
+}
+
+export const focus = (state) => {
+  Assert.object(state)
+  state.$ViewletSearchInput.focus()
+}
+
+const create$Row = () => {
+  const $Row = document.createElement('div')
+  // @ts-ignore
+  $Row.role = 'treeitem'
+  $Row.className = 'TreeItem'
+  const $LabelText = document.createTextNode('')
+  const $Label = document.createElement('div')
+  $Label.className = 'TreeItemLabel'
+  $Label.append($LabelText)
+  const $Icon = document.createElement('i')
+  $Row.append($Icon, $Label)
+  return $Row
+}
+
+// TODO much duplication with explorer
+const render$Row = ($Row, rowInfo) => {
+  const $Icon = $Row.childNodes[0]
+  const $LabelText = $Row.childNodes[1].childNodes[0]
+  $Icon.className = `Icon${rowInfo.icon}`
+  $LabelText.data = rowInfo.text
+  $Row.title = rowInfo.title
+  $Row.ariaSetSize = `${rowInfo.setSize}`
+  $Row.ariaLevel = `${rowInfo.depth}`
+  $Row.ariaPosInSet = `${rowInfo.posInSet}`
+  $Row.ariaLabel = rowInfo.name
+  $Row.ariaDescription = ''
+  switch (rowInfo.type) {
+    // TODO type should be a number for efficiency
+    case DirentType.Directory:
+      $Row.ariaExpanded = 'false'
+      break
+    case DirentType.DirectoryExpanded:
+      $Row.ariaExpanded = 'true'
+      break
+    case DirentType.File:
+      $Row.ariaExpanded = undefined
+      break
+    default:
+      break
+  }
+}
+
+const render$RowsLess = ($Rows, rowInfos) => {
+  for (let i = 0; i < $Rows.children.length; i++) {
+    render$Row($Rows.children[i], rowInfos[i])
+  }
+  const fragment = document.createDocumentFragment()
+  for (let i = $Rows.children.length; i < rowInfos.length; i++) {
+    const $Row = create$Row()
+    render$Row($Row, rowInfos[i])
+    fragment.append($Row)
+  }
+  $Rows.append(fragment)
+}
+
+const render$RowsEqual = ($Rows, rowInfos) => {
+  for (let i = 0; i < rowInfos.length; i++) {
+    render$Row($Rows.children[i], rowInfos[i])
+  }
+}
+
+const render$RowsMore = ($Rows, rowInfos) => {
+  for (let i = 0; i < rowInfos.length; i++) {
+    render$Row($Rows.children[i], rowInfos[i])
+  }
+  const diff = $Rows.children.length - rowInfos.length
+  for (let i = 0; i < diff; i++) {
+    $Rows.lastChild.remove()
+  }
+}
+
+const render$Rows = ($Rows, rowInfos) => {
+  if ($Rows.children.length < rowInfos.length) {
+    render$RowsLess($Rows, rowInfos)
+  } else if ($Rows.children.length === rowInfos.length) {
+    render$RowsEqual($Rows, rowInfos)
+  } else {
+    render$RowsMore($Rows, rowInfos)
+  }
+}
+
+export const setResults = (state, results) => {
+  Assert.object(state)
+  Assert.array(results)
+  // TODO should recycle nodes when rendering only search results
+  // maybe could also recycle node from noResults and vice versa
+  render$Rows(state.$SearchResults, results)
+}
+
+export const setMessage = (state, message) => {
+  const { $SearchStatus } = state
+  // TODO recycle text node
+  $SearchStatus.textContent = message
+}
+
+export const dispose = () => {}

package/static/fbac85f/packages/renderer-process/src/parts/ViewletSideBar/ViewletSideBar.js

@@ -0,0 +1,55 @@
+import * as Layout from '../Layout/Layout.js'
+import * as Assert from '../Assert/Assert.js'
+
+export const create = () => {
+  const $SideBarTitleAreaTitle = document.createElement('h2')
+  $SideBarTitleAreaTitle.id = 'SideBarTitleAreaTitle'
+
+  const $SideBarTitleAreaButtons = document.createElement('div')
+  $SideBarTitleAreaButtons.id = 'SideBarTitleAreaButtons'
+
+  const $SideBarTitleArea = document.createElement('div')
+  $SideBarTitleArea.id = 'SideBarTitleArea'
+  $SideBarTitleArea.append($SideBarTitleAreaTitle, $SideBarTitleAreaButtons)
+
+  // const $SideBarContent = document.createElement('div')
+  // $SideBarContent.id = 'SideBarContent'
+
+  const $SideBar = Layout.state.$SideBar
+  $SideBar.ariaLabel = 'Side Bar'
+  $SideBar.append($SideBarTitleArea)
+
+  return {
+    $SideBar,
+    $SideBarTitleArea,
+    $SideBarTitleAreaButtons,
+    $SideBarContent: undefined,
+    $SideBarTitleAreaTitle,
+  }
+}
+
+export const dispose = (state) => {
+  Assert.object(state)
+  state.$SideBar.replaceChildren()
+}
+
+export const appendViewlet = (state, name, $Viewlet) => {
+  Assert.object(state)
+  Assert.string(name)
+  const $SideBarTitleAreaTitle = state.$SideBarTitleAreaTitle
+  $SideBarTitleAreaTitle.title = name
+  $SideBarTitleAreaTitle.textContent = name
+  // TODO is it a problem that the id is duplicated for a short amount of time here?
+  $Viewlet.id = 'SideBarContent'
+  if (state.$SideBarContent) {
+    state.$SideBarContent.replaceWith($Viewlet)
+  } else {
+    state.$SideBar.append($Viewlet)
+  }
+  state.$SideBarContent = $Viewlet
+}
+
+export const focus = async () => {
+  // await
+  console.log('todo focus sidebar')
+}