feat(web): persist darkmode preference

web/src/components/AppBar.jsx

@@ -1,8 +1,11 @@
 import { h } from 'preact';
 import Button from './Button';
 import LinkedLogo from './LinkedLogo';
+import Menu, { MenuItem } from './Menu';
 import MenuIcon from '../icons/Menu';
-import { useLayoutEffect, useCallback, useState } from 'preact/hooks';
+import MoreIcon from '../icons/More';
+import { useDarkMode } from '../context';
+import { useLayoutEffect, useCallback, useRef, useState } from 'preact/hooks';
 
 // We would typically preserve these in component state
 // But need to avoid too many re-renders
@@ -13,6 +16,18 @@ export default function AppBar({ title }) {
   const [show, setShow] = useState(true);
   const [atZero, setAtZero] = useState(window.scrollY === 0);
   const [sidebarVisible, setSidebarVisible] = useState(true);
+  const [showMoreMenu, setShowMoreMenu] = useState(false);
+  const { currentMode, persistedMode, setDarkMode } = useDarkMode();
+
+  const handleSelectDarkMode = useCallback(
+    (value, label) => {
+      setDarkMode(value);
+      setShowMoreMenu(false);
+    },
+    [setDarkMode, setShowMoreMenu]
+  );
+
+  const moreRef = useRef(null);
 
   const scrollListener = useCallback(
     (event) => {
@@ -38,9 +53,17 @@ export default function AppBar({ title }) {
     };
   }, []);
 
+  const handleShowMenu = useCallback(() => {
+    setShowMoreMenu(true);
+  }, [setShowMoreMenu]);
+
+  const handleDismissMoreMenu = useCallback(() => {
+    setShowMoreMenu(false);
+  }, [setShowMoreMenu]);
+
   return (
     <div
-      className={`w-full border-b border-color-gray-100 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-800 transform transition-all duration-200 translate-y-0 ${
+      className={`w-full border-b border-gray-100 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 translate-y-0 ${
         !show ? '-translate-y-full' : ''
       } ${!atZero ? 'shadow' : ''}`}
     >
@@ -50,6 +73,20 @@ export default function AppBar({ title }) {
         </Button>
       </div>
       <LinkedLogo />
+      <div className="flex-grow-1 flex justify-end w-full">
+        <div ref={moreRef}>
+          <Button className="rounded-full w-12 h-12" onClick={handleShowMenu} type="text">
+            <MoreIcon />
+          </Button>
+        </div>
+      </div>
+      {showMoreMenu ? (
+        <Menu onDismiss={handleDismissMoreMenu} relativeTo={moreRef}>
+          <MenuItem label="Auto" value="media" onSelect={handleSelectDarkMode} />
+          <MenuItem label="Light" value="light" onSelect={handleSelectDarkMode} />
+          <MenuItem label="Dark" value="dark" onSelect={handleSelectDarkMode} />
+        </Menu>
+      ) : null}
     </div>
   );
 }

web/src/components/RelativeModal.jsx

@@ -76,13 +76,15 @@ export default function RelativeModal({ className, role = 'dialog', children, on
     <Fragment>
       <div className="absolute inset-0" onClick={handleDismiss} />
       <div
-        className={`bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto max-h-48 transition-all duration-75 transform scale-90 opacity-0 ${
+        className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto max-h-48 transition-all duration-75 transform scale-90 opacity-0 ${
           show ? 'scale-100 opacity-100' : ''
         } ${className}`}
         onkeydown={handleKeydown}
         role={role}
         ref={ref}
-        style={position.width > 0 ? `width: ${position.width}px; top: ${position.top}px; left: ${position.left}px` : ''}
+        style={
+          position.width > 0 ? `min-width: ${position.width}px; top: ${position.top}px; left: ${position.left}px` : ''
+        }
       >
         {children}
       </div>