Windows Menu Support

.gitignore

@@ -54,5 +54,7 @@ msbuild.binlog
 
 .claude/*
 
-# Windows reserved device names
-nul
+# Windows
+nul
+ReactNativeWindows.dsc.yaml
+WindowsDevTools.dsc.yaml

README.md

@@ -43,7 +43,15 @@ npm run macos-release
 
 #### System Requirements
 
-First, install the system requirements for React Native Windows: https://microsoft.github.io/react-native-windows/docs/rnw-dependencies
+First, install the system requirements for React Native Windows by running the following in an elevated Powershell session:
+
+```powershell
+.\bin\windows-setup.ps1
+```
+
+This should install everything for you.
+
+**Alternative**: Follow the official installation steps (results vary): https://microsoft.github.io/react-native-windows/docs/rnw-dependencies
 
 **Alternative**: If you experience issues with the official `rnw-dependencies.ps1` script, consider using Josh Yoes' improved setup process: https://github.com/joshuayoes/ReactNativeWindowsSandbox
 
@@ -60,6 +68,26 @@ npm run windows
 npm run windows-release
 ```
 
+**Troubleshooting**: If you run into a build error with ctype.h or ROSLYNCODETASKFACTORYCSHARPCOMPILER, try making a symlink like this (it's weird, I know):
+
+```powershell
+mklink /D "C:\Program Files\Windows Kits\10\lib" "C:\Program Files (x86)\Windows Kits\10\lib"
+```
+
+Somehow, `C:\Program Files\` instead of `C:\Program Files (x86)\` is being used, which breaks things. This makes a symlink to fix that.
+
+You may also need to add this path to the `reactotron.vcxproj`:
+
+```
+  <ItemDefinitionGroup>
+    <ClCompile>
+      <AdditionalIncludeDirectories>
+        $(ProjectDir)..\..\app;%(AdditionalIncludeDirectories);C:\Program Files (x86)\Windows Kits\10\Include\10.0.22621.0\ucrt
+      </AdditionalIncludeDirectories>
+    </ClCompile>
+  </ItemDefinitionGroup>
+```
+
 ### Cross-Platform Native Development
 
 Both platforms use unified commands for native module development:

app/app.tsx

@@ -1,25 +1,17 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-import { DevSettings, NativeModules, StatusBar, View, type ViewStyle } from "react-native"
+import { StatusBar, View, type ViewStyle } from "react-native"
 import { connectToServer } from "./state/connectToServer"
 import { useTheme, themed } from "./theme/theme"
-import { useEffect, useMemo, useState } from "react"
+import { useEffect } from "react"
 import { TimelineScreen } from "./screens/TimelineScreen"
-import { useMenuItem } from "./utils/useMenuItem"
 import { Titlebar } from "./components/Titlebar/Titlebar"
 import { Sidebar } from "./components/Sidebar/Sidebar"
-import { useSidebar } from "./state/useSidebar"
-import { useGlobal, withGlobal } from "./state/useGlobal"
+import { useGlobal } from "./state/useGlobal"
 import { MenuItemId } from "./components/Sidebar/SidebarMenu"
 import { HelpScreen } from "./screens/HelpScreen"
-import { TimelineItem } from "./types"
 import { PortalHost } from "./components/Portal"
 import { StateScreen } from "./screens/StateScreen"
-import { AboutModal } from "./components/AboutModal"
+import { ShortcutsProvider } from "./contexts/ShortcutsContext"
+import { SystemMenu } from "./components/SystemMenu"
 import { CustomCommandsScreen } from "./screens/CustomCommandsScreen"
 
 if (__DEV__) {
@@ -30,96 +22,7 @@ if (__DEV__) {
 
 function App(): React.JSX.Element {
   const { colors } = useTheme()
-  const { toggleSidebar } = useSidebar()
-  const [activeItem, setActiveItem] = useGlobal<MenuItemId>("sidebar-active-item", "logs")
-  const [, setTimelineItems] = withGlobal<TimelineItem[]>("timelineItems", [])
-  const [aboutVisible, setAboutVisible] = useState(false)
-
-  const menuConfig = useMemo(
-    () => ({
-      remove: ["File", "Edit", "Format", "Reactotron > About Reactotron"],
-      items: {
-        Reactotron: [
-          {
-            label: "About Reactotron",
-            position: 0,
-            action: () => setAboutVisible(true),
-          },
-        ],
-        View: [
-          {
-            label: "Toggle Sidebar",
-            shortcut: "cmd+b",
-            action: toggleSidebar,
-          },
-          {
-            label: "Logs Tab",
-            shortcut: "cmd+1",
-            action: () => setActiveItem("logs"),
-          },
-          {
-            label: "Network Tab",
-            shortcut: "cmd+2",
-            action: () => setActiveItem("network"),
-          },
-          {
-            label: "Performance Tab",
-            shortcut: "cmd+3",
-            action: () => setActiveItem("performance"),
-          },
-          {
-            label: "Plugins Tab",
-            shortcut: "cmd+4",
-            action: () => setActiveItem("plugins"),
-          },
-          {
-            label: "Custom Commands Tab",
-            shortcut: "cmd+5",
-            action: () => setActiveItem("customCommands"),
-          },
-          {
-            label: "Help Tab",
-            shortcut: "cmd+6",
-            action: () => setActiveItem("help"),
-          },
-          ...(__DEV__
-            ? [
-                {
-                  label: "Toggle Dev Menu",
-                  shortcut: "cmd+shift+d",
-                  action: () => NativeModules.DevMenu.show(),
-                },
-              ]
-            : []),
-        ],
-        Window: [
-          {
-            label: "Reload",
-            shortcut: "cmd+shift+r",
-            action: () => DevSettings.reload(),
-          },
-        ],
-        Tools: [
-          {
-            label: "Clear Timeline Items",
-            shortcut: "cmd+k",
-            action: () => setTimelineItems([]),
-          },
-        ],
-      },
-    }),
-    [toggleSidebar, setActiveItem],
-  )
-
-  useMenuItem(menuConfig)
-
-  setTimeout(() => {
-    fetch("https://www.google.com")
-      .then((res) => res.text())
-      .then((text) => {
-        console.tron.log("text", text)
-      })
-  }, 1000)
+  const [activeItem] = useGlobal<MenuItemId>("sidebar-active-item", "logs")
 
   // Connect to the server when the app mounts.
   // This will update global state with the server's state
@@ -140,16 +43,19 @@ function App(): React.JSX.Element {
   }
 
   return (
-    <View style={$container()}>
-      <Titlebar />
-      <StatusBar barStyle={"dark-content"} backgroundColor={colors.background} />
-      <View style={$mainContent}>
-        <Sidebar />
-        <View style={$contentContainer}>{renderActiveItem()}</View>
-      </View>
-      <PortalHost />
-      <AboutModal visible={aboutVisible} onClose={() => setAboutVisible(false)} />
-    </View>
+    <ShortcutsProvider>
+      <SystemMenu>
+        <View style={$container()}>
+          <Titlebar />
+          <StatusBar barStyle={"dark-content"} backgroundColor={colors.background} />
+          <View style={$mainContent}>
+            <Sidebar />
+            <View style={$contentContainer}>{renderActiveItem()}</View>
+          </View>
+          <PortalHost />
+        </View>
+      </SystemMenu>
+    </ShortcutsProvider>
   )
 }
 

app/components/Menu/MenuDropdown.tsx

@@ -0,0 +1,102 @@
+import { View, type ViewStyle } 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(), $menuPosition(position, isSubmenu)]}
+        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,
+}))
+
+const $menuPosition = (position: Position, isSubmenu: boolean | undefined) => ({
+  left: position.x,
+  top: position.y,
+  zIndex: isSubmenu ? 10001 : 10000,
+})