WIP: Windows Menu Support

app/app.tsx

@@ -9,7 +9,7 @@
 import { useTheme, themed } from "./theme/theme"
 import { useEffect, useMemo } from "react"
 import { TimelineScreen } from "./screens/TimelineScreen"
-import { useMenuItem } from "./utils/useMenuItem"
+import { useSystemMenu } from "./utils/useSystemMenu/useSystemMenu"
 import { Titlebar } from "./components/Titlebar/Titlebar"
 import { Sidebar } from "./components/Sidebar/Sidebar"
 import { useSidebar } from "./state/useSidebar"
@@ -74,12 +74,12 @@
           },
           ...(__DEV__
             ? [
-                {
-                  label: "Toggle Dev Menu",
-                  shortcut: "cmd+shift+d",
-                  action: () => NativeModules.DevMenu.show(),
-                },
-              ]
+              {
+                label: "Toggle Dev Menu",
+                shortcut: "cmd+shift+d",
+                action: () => NativeModules.DevMenu.show(),
+              },
+            ]
             : []),
         ],
         Window: [
@@ -101,7 +101,7 @@
     [toggleSidebar],
   )
 
-  useMenuItem(menuConfig)
+  useSystemMenu(menuConfig)
 
   setTimeout(() => {
     fetch("https://www.google.com")

app/components/Menu/MenuDropdown.tsx

@@ -0,0 +1,105 @@
+import { View, type ViewStyle, type TextStyle } from "react-native"
+import { useRef, useMemo, memo } from "react"
+import { themed } from "../../theme/theme"
+import { Portal } from "../Portal"
+import { MenuDropdownItem } from "./MenuDropdownItem"
+import { useSubmenuState } from "./useSubmenuState"
+import { menuSettings } from "./menuSettings"
+import { type Position, type DropdownMenuItem, type MenuItem, MENU_SEPARATOR } from "./types"
+import { getUUID } from "../../utils/random/getUUID"
+import { Separator } from "../Separator"
+
+interface MenuDropdownProps {
+  items: (DropdownMenuItem | typeof MENU_SEPARATOR)[]
+  position: Position
+  onItemPress: (item: MenuItem) => void
+  isSubmenu?: boolean
+}
+
+const MenuDropdownComponent = ({
+  items,
+  position,
+  onItemPress,
+  isSubmenu,
+}: MenuDropdownProps) => {
+  const portalName = useRef(
+    `${isSubmenu ? 'submenu' : 'dropdown'}-${getUUID()}`
+  ).current
+  const { openSubmenu, submenuPosition, handleItemHover } = useSubmenuState(position)
+
+  const isSeparator = (item: MenuItem | typeof MENU_SEPARATOR): item is typeof MENU_SEPARATOR => {
+    return item === MENU_SEPARATOR
+  }
+
+  // Find the submenu item if one is open
+  const submenuItem = openSubmenu
+    ? items.find(item => !isSeparator(item) && item.label === openSubmenu) as DropdownMenuItem | undefined
+    : undefined
+
+  const dropdownContent = useMemo(() => (
+    <View
+      style={[
+        isSubmenu ? $submenuDropdown() : $dropdown(),
+        { left: position.x, top: position.y, zIndex: isSubmenu ? 10001 : 10000 }
+      ]}
+      accessibilityRole="menu"
+    >
+      {items.map((item, index) => {
+        if (isSeparator(item)) return <Separator key={`separator-${index}`} />
+
+        return (
+          <MenuDropdownItem
+            key={item.label}
+            item={item as MenuItem}
+            index={index}
+            onItemPress={onItemPress}
+            onItemHover={handleItemHover}
+          />
+        )
+      })}
+    </View>
+  ), [items, isSubmenu, position.x, position.y, onItemPress, handleItemHover])
+
+  return (
+    <>
+      <Portal name={portalName}>
+        {dropdownContent}
+      </Portal>
+      {/* Render submenu */}
+      {submenuItem?.submenu && (
+        <MenuDropdown
+          items={submenuItem.submenu}
+          position={submenuPosition}
+          onItemPress={onItemPress}
+          isSubmenu={true}
+        />
+      )}
+    </>
+  )
+}
+
+export const MenuDropdown = memo(MenuDropdownComponent)
+
+const $dropdown = themed<ViewStyle>(({ colors, spacing }) => ({
+  position: "absolute",
+  backgroundColor: colors.cardBackground,
+  borderColor: colors.keyline,
+  borderWidth: 1,
+  borderRadius: 4,
+  minWidth: menuSettings.dropdownMinWidth,
+  paddingVertical: spacing.xs,
+  zIndex: menuSettings.zIndex.dropdown,
+}))
+
+const $submenuDropdown = themed<ViewStyle>(({ colors, spacing }) => ({
+  position: "absolute",
+  backgroundColor: colors.cardBackground,
+  borderColor: colors.keyline,
+  borderWidth: 1,
+  borderRadius: 4,
+  minWidth: menuSettings.submenuMinWidth,
+  paddingVertical: spacing.xs,
+  zIndex: menuSettings.zIndex.submenu,
+}))
+
+

app/components/Menu/MenuDropdownItem.tsx

@@ -0,0 +1,145 @@
+import { Pressable, Text, View, type ViewStyle, type TextStyle } from "react-native"
+import { useState, useRef, memo, useCallback } from "react"
+import { themed } from "../../theme/theme"
+import { menuSettings } from "./menuSettings"
+import type { MenuItem } from "./types"
+
+interface MenuDropdownItemProps {
+  item: MenuItem
+  index: number
+  onItemPress: (item: MenuItem) => void
+  onItemHover: (itemLabel: string, index: number, hasSubmenu: boolean) => void
+}
+
+const MenuDropdownItemComponent = ({
+  item,
+  index,
+  onItemPress,
+  onItemHover,
+}: MenuDropdownItemProps) => {
+  const [hoveredItem, setHoveredItem] = useState<string | null>(null)
+  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const enabled = item.enabled !== false
+
+  const handleHoverIn = useCallback(() => {
+    // Clear any pending hover clear
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current)
+      hoverTimeoutRef.current = null
+    }
+    setHoveredItem(item.label)
+    const hasSubmenu = !!item.submenu
+    onItemHover(item.label, index, hasSubmenu)
+  }, [item.label, item.submenu, index, onItemHover])
+
+  const handleHoverOut = useCallback(() => {
+    // Use a small timeout to prevent flickering between items
+    hoverTimeoutRef.current = setTimeout(() => {
+      setHoveredItem((current) => current === item.label ? null : current)
+    }, 10)
+  }, [item.label])
+
+  const handlePress = useCallback(() => {
+    if (!item.action || !enabled) return
+    item.action()
+    onItemPress(item)
+  }, [item, onItemPress])
+
+  return (
+    <Pressable
+      onHoverIn={handleHoverIn}
+      onHoverOut={handleHoverOut}
+      onPress={handlePress}
+      disabled={!enabled}
+      style={({ pressed }) => [
+        $dropdownItem(),
+        ((pressed || hoveredItem === item.label) && enabled) && $dropdownItemHovered(),
+        !enabled && $dropdownItemDisabled,
+      ]}
+    >
+      <Text
+        style={[
+          $dropdownItemText(),
+          !enabled && $dropdownItemTextDisabled(),
+        ]}
+      >
+        {item.label}
+      </Text>
+      <View style={$rightContent}>
+        {item.shortcut && (
+          <Text
+            style={[$shortcut(), !enabled && $dropdownItemTextDisabled()]}
+          >
+            {formatShortcut(item.shortcut)}
+          </Text>
+        )}
+        {item.submenu && (
+          <Text
+            style={[
+              $submenuArrow(),
+              !enabled && $dropdownItemTextDisabled(),
+            ]}
+          >
+            ▶
+          </Text>
+        )}
+      </View>
+    </Pressable>
+  )
+}
+
+export const MenuDropdownItem = memo(MenuDropdownItemComponent)
+
+function formatShortcut(shortcut: string): string {
+  return shortcut
+    .replace(/cmd/gi, "Ctrl")
+    .replace(/shift/gi, "Shift")
+    .replace(/\+/g, "+")
+    .split("+")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("+")
+}
+
+const $dropdownItem = themed<ViewStyle>(({ spacing }) => ({
+  flexDirection: "row",
+  justifyContent: "space-between",
+  alignItems: "center",
+  paddingHorizontal: spacing.sm,
+  paddingVertical: spacing.xs,
+  borderRadius: 4,
+  minHeight: menuSettings.itemMinHeight,
+}))
+
+const $dropdownItemHovered = themed<ViewStyle>(({ colors }) => ({
+  backgroundColor: colors.neutralVery,
+}))
+
+const $dropdownItemDisabled = {
+  opacity: 0.5,
+}
+
+const $dropdownItemText = themed<TextStyle>(({ colors, typography }) => ({
+  color: colors.mainText,
+  fontSize: typography.caption,
+}))
+
+const $dropdownItemTextDisabled = themed<TextStyle>((theme) => ({
+  color: theme.colors.neutral,
+}))
+
+const $shortcut = themed<TextStyle>(({ colors, typography, spacing }) => ({
+  color: colors.neutral,
+  fontSize: typography.small,
+  marginLeft: spacing.md,
+}))
+
+const $submenuArrow = themed<TextStyle>(({ colors, typography, spacing }) => ({
+  color: colors.neutral,
+  fontSize: typography.small,
+  marginLeft: spacing.sm,
+}))
+
+const $rightContent: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+}

app/components/Menu/MenuOverlay.tsx

@@ -0,0 +1,44 @@
+import { Pressable, type ViewStyle } from "react-native"
+import { Portal } from "../Portal"
+import { menuSettings } from "./menuSettings"
+
+interface MenuOverlayProps {
+  onPress: () => void
+  portalName?: string
+  style?: ViewStyle
+  excludeArea?: {
+    top?: number
+    left?: number
+    right?: number
+    bottom?: number
+  }
+}
+
+export const MenuOverlay = ({
+  onPress,
+  portalName = 'menu-overlay',
+  style,
+  excludeArea,
+}: MenuOverlayProps) => {
+
+  return (
+    <Portal name={portalName}>
+      <Pressable style={overlayStyle({ excludeArea, style })} onPress={onPress} />
+    </Portal>
+  )
+}
+
+interface OverlayStyleArgs {
+  excludeArea?: { top?: number, left?: number, right?: number, bottom?: number }
+  style?: ViewStyle
+}
+
+const overlayStyle: (args: OverlayStyleArgs) => ViewStyle = ({ excludeArea, style }: OverlayStyleArgs) => ({
+  position: "absolute",
+  top: excludeArea?.top ?? 0,
+  left: excludeArea?.left ?? 0,
+  right: excludeArea?.right ?? 0,
+  bottom: excludeArea?.bottom ?? 0,
+  zIndex: menuSettings.zIndex.menuOverlay,
+  ...style,
+})

app/components/Menu/menuSettings.ts

@@ -0,0 +1,13 @@
+export const menuSettings = {
+  dropdownMinWidth: 200,
+  submenuMinWidth: 150,
+  itemMinHeight: 28,
+  itemHeight: 32,
+  submenuOffsetX: 200,
+  submenuOffsetY: -5,
+  zIndex: {
+    menuOverlay: 9999,
+    dropdown: 10000,
+    submenu: 10001,
+  }
+} as const

app/components/Menu/types.ts

@@ -0,0 +1,19 @@
+export interface Position {
+  x: number
+  y: number
+}
+
+// Generic menu item interface for UI components
+export interface MenuItem {
+  label: string
+  shortcut?: string
+  enabled?: boolean
+  action?: () => void
+  submenu?: (MenuItem | typeof MENU_SEPARATOR)[]
+}
+
+// Type alias for dropdown menu items (same as MenuItem)
+export type DropdownMenuItem = MenuItem
+
+// Menu separator constant
+export const MENU_SEPARATOR = 'menu-item-separator' as const