New sidebar and folder view (#263)

src-web/components/Overlay.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { FocusTrap } from 'focus-trap-react';
 import * as m from 'motion/react-m';
 import type { ReactNode } from 'react';
-import React from 'react';
+import React, { useRef } from 'react';
 import { Portal } from './Portal';
 
 interface Props {
@@ -32,6 +32,8 @@ export function Overlay({
   noBackdrop,
   children,
 }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
   if (noBackdrop) {
     return (
       <Portal name={portalName}>
@@ -44,15 +46,33 @@ export function Overlay({
       </Portal>
     );
   }
+
   return (
     <Portal name={portalName}>
       {open && (
         <FocusTrap
           focusTrapOptions={{
             allowOutsideClick: true, // So we can still click toasts and things
+            delayInitialFocus: true,
+            fallbackFocus: () => containerRef.current!, // always have a target
+            initialFocus: () =>
+              // Doing this explicitly seems to work better than the default behavior for some reason
+              containerRef.current?.querySelector<HTMLElement>(
+                [
+                  'a[href]',
+                  'input:not([disabled])',
+                  'select:not([disabled])',
+                  'textarea:not([disabled])',
+                  'button:not([disabled])',
+                  '[tabindex]:not([tabindex="-1"])',
+                  '[contenteditable]:not([contenteditable="false"])',
+                ].join(', '),
+              ) ?? undefined,
           }}
         >
           <m.div
+            ref={containerRef}
+            tabIndex={-1}
             className={classNames('fixed inset-0', zIndexes[zIndex])}
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}