Update menu, add startup as a modal

client/src/components/app/App.tsx

@@ -56,28 +56,33 @@ const loadPatch = async (savedPatch: types.Patch) => {
   patch.cables = cables
 }
 
+const InitModal = () => {
+  return (
+    <div className={css('overlay')}>
+      <div className={css('init-modal')}>
+        Please adjust your audio levels before continuing. This application is
+        capable of producing ear-busting sonic experiences.
+        <button onClick={initialize}>I'm ready!</button>
+      </div>
+    </div>
+  )
+}
+
 const App = () => {
   useEffect(() => {
     if (!state.initialized) return
     if (state.route.name !== 'index') return
     localStorage.setItem('savestate', JSON.stringify(patch))
   })
 
-  if (!state.initialized) {
-    return (
-      <button className="launch-button" onClick={initialize}>
-        Start
-      </button>
-    )
-  }
-
   return (
     <>
-      <Patch />
+      {state.initialized && <Patch />}
       <Header />
       <UserBar />
       <ModuleSelector />
       <Hint />
+      {!state.initialized && <InitModal />}
     </>
   )
 }

client/src/components/app/app.css

@@ -0,0 +1,26 @@
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(220, 220, 220, 0.8);
+  z-index: 9001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.init-modal {
+  background-color: var(--secondary);
+  padding: 10px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--box-shadow);
+  width: 300px;
+}
+
+.init-modal button {
+  margin-top: 10px;
+}

client/src/components/header/Header.tsx

@@ -1,36 +1,57 @@
-import { h } from 'kaiku'
-import { patch } from '../../state'
+import { h, useState } from 'kaiku'
+import state, { patchDetails, patch } from '../../state'
 import MenuBar, { VerticalDivider } from '../menu-bar/MenuBar'
 import classNames from 'classnames/bind'
 import styles from './header.css'
 import * as api from '../../api'
 
 const css = classNames.bind(styles)
 
+const Menu = () => {
+  return (
+    <div className={css('menu')}>
+      <div className={css('item')}>Save patch</div>
+      <div className={css('item')}>New patch</div>
+      <div className={css('item')}>My patches</div>
+      <div className={css('item')}>Browse all patches</div>
+    </div>
+  )
+}
+
 const Header = () => {
+  const headerState = useState({ isMenuOpen: false })
+
   const savePatch = async () => {
     const res = await api.saveNewPatch(patch)
 
     history.pushState({}, '', `/patch/${res.id}`)
   }
 
+  const openMenu = () => {}
+
+  const patchAuthor =
+    patchDetails.author?.username ?? state.user?.username ?? 'anonymous'
+
   return (
     <MenuBar top left>
       <h2 className={css('brand')}>modulate</h2>
-      <div className={css('patch-details')}>
-        <div className="">Patch name</div>
-        <input type="text" value="untitled" />
-      </div>
-
+      <button
+        onClick={() => {
+          headerState.isMenuOpen = !headerState.isMenuOpen
+        }}
+        className={css('menu-button')}
+      >
+        ☰
+      </button>
       <VerticalDivider />
-      <button onClick={savePatch}>save patch</button>
+      <div className={css('patch-name')}>
+        Patch:
+        <i>
+          {patchDetails.name} — {patchAuthor}
+        </i>
+      </div>
 
-      <VerticalDivider />
-      <button onClick={savePatch}>new patch</button>
-      <VerticalDivider />
-      <button onClick={savePatch}>my patches</button>
-      <VerticalDivider />
-      <button onClick={savePatch}>browse all patches</button>
+      {headerState.isMenuOpen && <Menu />}
     </MenuBar>
   )
 }

client/src/components/header/header.css

@@ -10,12 +10,48 @@
   border-bottom-left-radius: 5px;
 }
 
-.patch-details {
-  margin-left: 72px;
+.patch-name {
   display: flex;
   flex-direction: row;
+  min-width: 200px;
+}
+
+.patch-name i {
+  margin: 0 8px;
 }
 
 .patch-details input {
   margin-left: 10px;
 }
+
+.menu-button {
+  text-decoration: none;
+  margin-left: 72px;
+}
+
+.menu {
+  left: 0;
+  top: 48px;
+  background-color: var(--secondary);
+  padding: 10px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  box-shadow: var(--box-shadow);
+}
+
+.menu::after {
+  content: ' ';
+  width: 10px;
+  height: 10px;
+  background-color: var(--secondary);
+  left: 84px;
+  top: -5px;
+  position: absolute;
+  transform: rotate(45deg);
+}
+
+.menu .item {
+  margin-bottom: 10px;
+}

client/src/components/menu-bar/menu-bar.css

@@ -6,6 +6,7 @@
   flex-direction: row;
   position: absolute;
   box-shadow: var(--box-shadow);
+  z-index: 20;
 }
 
 .vertical-divider {

client/src/components/module-selector/ModuleSelector.tsx

@@ -25,6 +25,11 @@ const ModuleSelector = () => {
 
   useEffect(() => {
     const toggle = (evt: KeyboardEvent) => {
+      if (evt.code === 'Escape') {
+        selectorState.open = false
+        filterRef.current!.blur()
+      }
+
       if (evt.code === 'Enter') {
         if (evt.target === document.body) {
           selectorState.open = true

client/src/state.ts

@@ -11,6 +11,12 @@ const state = createState<State>({
   user: null,
   hint: null,
   activeModule: null,
+  patchDetails: {
+    id: null,
+    name: 'untitled',
+    version: 0,
+    author: null,
+  },
   patch: {
     currentId: 0,
     modules: {},
@@ -24,7 +30,7 @@ const state = createState<State>({
 })
 
 export default state
-export const { cursor, viewport, patch, socketPositions } = state
+export const { cursor, patchDetails, viewport, patch, socketPositions } = state
 export const nextId = () => `${patch.currentId++}` as Id
 
 window.addEventListener('popstate', () => {

client/src/types.ts

@@ -23,6 +23,12 @@ export type State = {
   cursor: Vec2
   socketPositions: Record<Id, Record<string, Vec2>>
   viewOffset: Vec2
+  patchDetails: {
+    id: null | string
+    name: string
+    author: null | User
+    version: number
+  }
   patch: Patch
   route: Route
   activeCable: {