diff --git a/app/app.tsx b/app/app.tsx index 17bdb65..20c6898 100644 --- a/app/app.tsx +++ b/app/app.tsx @@ -9,7 +9,7 @@ import { connectToServer } from "./state/connectToServer" 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 @@ function App(): React.JSX.Element { }, ...(__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 @@ function App(): React.JSX.Element { [toggleSidebar], ) - useMenuItem(menuConfig) + useSystemMenu(menuConfig) setTimeout(() => { fetch("https://www.google.com") diff --git a/app/components/Menu/MenuDropdown.tsx b/app/components/Menu/MenuDropdown.tsx new file mode 100644 index 0000000..19e998a --- /dev/null +++ b/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(() => ( + + {items.map((item, index) => { + if (isSeparator(item)) return + + return ( + + ) + })} + + ), [items, isSubmenu, position.x, position.y, onItemPress, handleItemHover]) + + return ( + <> + + {dropdownContent} + + {/* Render submenu */} + {submenuItem?.submenu && ( + + )} + + ) +} + +export const MenuDropdown = memo(MenuDropdownComponent) + +const $dropdown = themed(({ 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(({ colors, spacing }) => ({ + position: "absolute", + backgroundColor: colors.cardBackground, + borderColor: colors.keyline, + borderWidth: 1, + borderRadius: 4, + minWidth: menuSettings.submenuMinWidth, + paddingVertical: spacing.xs, + zIndex: menuSettings.zIndex.submenu, +})) + + diff --git a/app/components/Menu/MenuDropdownItem.tsx b/app/components/Menu/MenuDropdownItem.tsx new file mode 100644 index 0000000..8628f1f --- /dev/null +++ b/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(null) + const hoverTimeoutRef = useRef(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 ( + [ + $dropdownItem(), + ((pressed || hoveredItem === item.label) && enabled) && $dropdownItemHovered(), + !enabled && $dropdownItemDisabled, + ]} + > + + {item.label} + + + {item.shortcut && ( + + {formatShortcut(item.shortcut)} + + )} + {item.submenu && ( + + ▶ + + )} + + + ) +} + +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(({ spacing }) => ({ + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + paddingHorizontal: spacing.sm, + paddingVertical: spacing.xs, + borderRadius: 4, + minHeight: menuSettings.itemMinHeight, +})) + +const $dropdownItemHovered = themed(({ colors }) => ({ + backgroundColor: colors.neutralVery, +})) + +const $dropdownItemDisabled = { + opacity: 0.5, +} + +const $dropdownItemText = themed(({ colors, typography }) => ({ + color: colors.mainText, + fontSize: typography.caption, +})) + +const $dropdownItemTextDisabled = themed((theme) => ({ + color: theme.colors.neutral, +})) + +const $shortcut = themed(({ colors, typography, spacing }) => ({ + color: colors.neutral, + fontSize: typography.small, + marginLeft: spacing.md, +})) + +const $submenuArrow = themed(({ colors, typography, spacing }) => ({ + color: colors.neutral, + fontSize: typography.small, + marginLeft: spacing.sm, +})) + +const $rightContent: ViewStyle = { + flexDirection: "row", + alignItems: "center", +} \ No newline at end of file diff --git a/app/components/Menu/MenuOverlay.tsx b/app/components/Menu/MenuOverlay.tsx new file mode 100644 index 0000000..65e6768 --- /dev/null +++ b/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 ( + + + + ) +} + +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, +}) \ No newline at end of file diff --git a/app/components/Menu/menuSettings.ts b/app/components/Menu/menuSettings.ts new file mode 100644 index 0000000..79a034f --- /dev/null +++ b/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 \ No newline at end of file diff --git a/app/components/Menu/types.ts b/app/components/Menu/types.ts new file mode 100644 index 0000000..486ef78 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/app/components/Menu/useMenuPositioning.ts b/app/components/Menu/useMenuPositioning.ts new file mode 100644 index 0000000..cac99d6 --- /dev/null +++ b/app/components/Menu/useMenuPositioning.ts @@ -0,0 +1,50 @@ +import { useCallback } from "react" +import { menuSettings } from "./menuSettings" +import type { Position } from "./types" + +export interface PositioningStrategy { + calculateSubmenuPosition: ( + basePosition: Position, + itemIndex: number, + parentWidth?: number + ) => Position + calculateContextMenuPosition?: ( + clickPosition: Position, + menuSize?: { width: number; height: number }, + screenSize?: { width: number; height: number } + ) => Position +} + +const defaultStrategy: PositioningStrategy = { + calculateSubmenuPosition: (basePosition, itemIndex, parentWidth = menuSettings.submenuOffsetX) => ({ + x: basePosition.x + parentWidth, + y: basePosition.y + itemIndex * menuSettings.itemHeight + menuSettings.submenuOffsetY, + }), + + calculateContextMenuPosition: (clickPosition, menuSize, screenSize) => { + // Basic positioning - can be enhanced for screen edge detection + return { + x: clickPosition.x, + y: clickPosition.y, + } + }, +} + +export const useMenuPositioning = (strategy: PositioningStrategy = defaultStrategy) => { + const calculateSubmenuPosition = useCallback( + (basePosition: Position, itemIndex: number, parentWidth?: number) => + strategy.calculateSubmenuPosition(basePosition, itemIndex, parentWidth), + [strategy] + ) + + const calculateContextMenuPosition = useCallback( + (clickPosition: Position, menuSize?: { width: number; height: number }, screenSize?: { width: number; height: number }) => + strategy.calculateContextMenuPosition?.(clickPosition, menuSize, screenSize) ?? clickPosition, + [strategy] + ) + + return { + calculateSubmenuPosition, + calculateContextMenuPosition, + } +} \ No newline at end of file diff --git a/app/components/Menu/useSubmenuState.ts b/app/components/Menu/useSubmenuState.ts new file mode 100644 index 0000000..1c105ca --- /dev/null +++ b/app/components/Menu/useSubmenuState.ts @@ -0,0 +1,37 @@ +import { useState, useCallback } from "react" +import { menuSettings } from "./menuSettings" +import { type Position } from "./types" + +export const useSubmenuState = (basePosition: Position) => { + const [openSubmenu, setOpenSubmenu] = useState(null) + const [submenuPosition, setSubmenuPosition] = useState({ x: 0, y: 0 }) + + const openSubmenuAt = useCallback((itemLabel: string, index: number) => { + setOpenSubmenu(itemLabel) + setSubmenuPosition({ + x: basePosition.x + menuSettings.submenuOffsetX, + y: basePosition.y + index * menuSettings.itemHeight + menuSettings.submenuOffsetY, + }) + }, [basePosition.x, basePosition.y]) + + const closeSubmenu = useCallback(() => { + setOpenSubmenu(null) + }, []) + + const handleItemHover = useCallback((itemLabel: string, index: number, hasSubmenu: boolean) => { + if (hasSubmenu) { + openSubmenuAt(itemLabel, index) + } else { + if (openSubmenu) { + closeSubmenu() + } + } + }, [openSubmenu, openSubmenuAt, closeSubmenu]) + + return { + openSubmenu, + submenuPosition, + handleItemHover, + closeSubmenu, + } +} \ No newline at end of file diff --git a/app/components/Titlebar/Titlebar.tsx b/app/components/Titlebar/Titlebar.tsx index c939596..6c4e029 100644 --- a/app/components/Titlebar/Titlebar.tsx +++ b/app/components/Titlebar/Titlebar.tsx @@ -4,6 +4,7 @@ import { Icon } from "../Icon" import ActionButton from "../ActionButton" import { useSidebar } from "../../state/useSidebar" import { PassthroughView } from "./PassthroughView" +import { TitlebarMenu } from "./TitlebarMenu" export const Titlebar = () => { const theme = useTheme() @@ -13,6 +14,11 @@ export const Titlebar = () => { + {Platform.OS === "windows" && ( + + + + )} ( diff --git a/app/components/Titlebar/TitlebarMenu.tsx b/app/components/Titlebar/TitlebarMenu.tsx new file mode 100644 index 0000000..60b48ce --- /dev/null +++ b/app/components/Titlebar/TitlebarMenu.tsx @@ -0,0 +1,81 @@ +import { View, ViewStyle } from "react-native" +import { useState, useCallback, useRef } from "react" +import { themed } from "../../theme/theme" +import { TitlebarMenuItem } from "./TitlebarMenuItem" +import { MenuDropdown } from "../Menu/MenuDropdown" +import { MenuOverlay } from "../Menu/MenuOverlay" +import type { Position } from "../Menu/types" +import { PassthroughView } from "./PassthroughView" +import { useSystemMenu } from "../../utils/useSystemMenu/useSystemMenu" + +export const TitlebarMenu = () => { + const { menuStructure, menuItems, handleMenuItemPressed } = useSystemMenu() + const [openMenu, setOpenMenu] = useState(null) + const [dropdownPosition, setDropdownPosition] = useState({ x: 0, y: 0 }) + const menuRefs = useRef>(new Map()) + + const handleMenuClick = useCallback((menuName: string) => { + const menuRef = menuRefs.current.get(menuName) + if (!menuRef) return + menuRef.measureInWindow((x, y, _, height) => { + setDropdownPosition({ x, y: y + height }) + setOpenMenu((prev) => (prev === menuName ? null : menuName)) + }) + }, []) + + const handleMenuHover = useCallback( + (menuName: string) => { + if (openMenu === null || openMenu === menuName) return + handleMenuClick(menuName) + }, + [openMenu, handleMenuClick], + ) + + const handleClose = () => setOpenMenu(null) + + // TODO: Add hotkey handling + + return ( + + {menuStructure.map((menu) => ( + { + if (ref) menuRefs.current.set(menu.title, ref) + }} + > + handleMenuClick(menu.title)} + onHoverIn={() => handleMenuHover(menu.title)} + /> + + ))} + {openMenu && menuItems[openMenu] && ( + <> + {/* Single overlay for all menu interactions */} + + { + handleMenuItemPressed({ menuPath: [openMenu, item.label] }) + handleClose() + }} + /> + + )} + + ) +} + +const $menuBar = themed(() => ({ + flexDirection: "row", + alignItems: "center", + height: "100%", + paddingHorizontal: 4, +})) \ No newline at end of file diff --git a/app/components/Titlebar/TitlebarMenuItem.tsx b/app/components/Titlebar/TitlebarMenuItem.tsx new file mode 100644 index 0000000..2fd03ce --- /dev/null +++ b/app/components/Titlebar/TitlebarMenuItem.tsx @@ -0,0 +1,60 @@ +import { Pressable, Text, type TextStyle, type ViewStyle } from "react-native" +import { useCallback, useState } from "react" +import { themed } from "../../theme/theme" + +interface TitlebarMenuItemProps { + title: string + isOpen?: boolean + onPress: () => void + onHoverIn?: () => void + onHoverOut?: () => void +} + +export const TitlebarMenuItem = ({ title, isOpen, onPress, onHoverIn, onHoverOut }: TitlebarMenuItemProps) => { + const [isHovered, setIsHovered] = useState(false) + + const handleHover = useCallback((isHovered: boolean) => { + setIsHovered(isHovered) + if (isHovered) { + onHoverIn?.() + } else { + onHoverOut?.() + } + }, [onHoverIn, onHoverOut]) + + return ( + { + handleHover(true) + }} + onHoverOut={() => { + handleHover(false) + }} + style={({ pressed }) => [ + $menuItem(), + (pressed || isOpen || isHovered) && $menuItemHovered(), + ]} + > + {title} + + ) +} + +const $menuItem = themed(({ spacing }) => ({ + paddingHorizontal: spacing.sm, + paddingVertical: spacing.xs, + borderRadius: 4, + justifyContent: "center", +})) + +const $menuItemHovered = themed(({ colors }) => ({ + backgroundColor: colors.neutralVery, + opacity: 0.8, +})) + +const $menuItemText = themed(({ colors, typography }) => ({ + color: colors.mainText, + fontSize: typography.caption, + fontWeight: "400", +})) \ No newline at end of file diff --git a/app/native/IRMenuItemManager/IRMenuItemManager.h b/app/native/IRMenuItemManager/IRMenuItemManager.h deleted file mode 100644 index c042f99..0000000 --- a/app/native/IRMenuItemManager/IRMenuItemManager.h +++ /dev/null @@ -1,8 +0,0 @@ -#import - -NS_ASSUME_NONNULL_BEGIN - -@interface IRMenuItemManager : NativeIRMenuItemManagerSpecBase -@end - -NS_ASSUME_NONNULL_END diff --git a/app/native/IRSystemMenuManager/IRSystemMenuManager.h b/app/native/IRSystemMenuManager/IRSystemMenuManager.h new file mode 100644 index 0000000..6c379d1 --- /dev/null +++ b/app/native/IRSystemMenuManager/IRSystemMenuManager.h @@ -0,0 +1,8 @@ +#import + +NS_ASSUME_NONNULL_BEGIN + +@interface IRSystemMenuManager : NativeIRSystemMenuManagerSpecBase +@end + +NS_ASSUME_NONNULL_END diff --git a/app/native/IRMenuItemManager/IRMenuItemManager.mm b/app/native/IRSystemMenuManager/IRSystemMenuManager.mm similarity index 98% rename from app/native/IRMenuItemManager/IRMenuItemManager.mm rename to app/native/IRSystemMenuManager/IRSystemMenuManager.mm index 82df0bd..e2610e6 100644 --- a/app/native/IRMenuItemManager/IRMenuItemManager.mm +++ b/app/native/IRSystemMenuManager/IRSystemMenuManager.mm @@ -1,16 +1,16 @@ -#import "IRMenuItemManager.h" +#import "IRSystemMenuManager.h" #import #import static NSString * const separatorString = @"menu-item-separator"; -@implementation IRMenuItemManager { +@implementation IRSystemMenuManager { } RCT_EXPORT_MODULE() - (std::shared_ptr)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params { - return std::make_shared(params); + return std::make_shared(params); } #pragma mark - API diff --git a/app/native/IRMenuItemManager/IRMenuItemManager.windows.cpp b/app/native/IRSystemMenuManager/IRSystemMenuManager.windows.cpp similarity index 78% rename from app/native/IRMenuItemManager/IRMenuItemManager.windows.cpp rename to app/native/IRSystemMenuManager/IRSystemMenuManager.windows.cpp index 2df05f9..85220ee 100644 --- a/app/native/IRMenuItemManager/IRMenuItemManager.windows.cpp +++ b/app/native/IRSystemMenuManager/IRSystemMenuManager.windows.cpp @@ -1,18 +1,18 @@ // -// IRMenuItemManager.cpp +// IRSystemMenuManager.cpp // Reactotron-Windows // // Windows TurboModule implementation of menu item management // #include "pch.h" -#include "IRMenuItemManager.windows.h" +#include "IRSystemMenuManager.windows.h" -using winrt::reactotron::implementation::IRMenuItemManager; +using winrt::reactotron::implementation::IRSystemMenuManager; namespace winrt::reactotron::implementation { - void IRMenuItemManager::createMenu(std::string menuName, + void IRSystemMenuManager::createMenu(std::string menuName, ::React::ReactPromise &&result) noexcept { // THE PROBLEM: onMenuItemPressed is nullptr/undefined at runtime diff --git a/app/native/IRMenuItemManager/IRMenuItemManager.windows.h b/app/native/IRSystemMenuManager/IRSystemMenuManager.windows.h similarity index 57% rename from app/native/IRMenuItemManager/IRMenuItemManager.windows.h rename to app/native/IRSystemMenuManager/IRSystemMenuManager.windows.h index e15daf9..32edc65 100644 --- a/app/native/IRMenuItemManager/IRMenuItemManager.windows.h +++ b/app/native/IRSystemMenuManager/IRSystemMenuManager.windows.h @@ -4,17 +4,17 @@ #include // Generated (DataTypes before Spec) -#include "..\..\..\windows\reactotron\codegen\NativeIRMenuItemManagerDataTypes.g.h" -#include "..\..\..\windows\reactotron\codegen\NativeIRMenuItemManagerSpec.g.h" +#include "..\..\..\windows\reactotron\codegen\NativeIRSystemMenuManagerDataTypes.g.h" +#include "..\..\..\windows\reactotron\codegen\NativeIRSystemMenuManagerSpec.g.h" namespace winrt::reactotron::implementation { - REACT_TURBO_MODULE(IRMenuItemManager) - struct IRMenuItemManager : reactotronCodegen::IRMenuItemManagerSpec + REACT_TURBO_MODULE(IRSystemMenuManager) + struct IRSystemMenuManager : reactotronCodegen::IRSystemMenuManagerSpec { // Only the essential types needed for the event - using PressEvent = reactotronCodegen::IRMenuItemManagerSpec_MenuItemPressedEvent; - using CreateRet = reactotronCodegen::IRMenuItemManagerSpec_createMenu_returnType; + using PressEvent = reactotronCodegen::IRSystemMenuManagerSpec_SystemMenuItemPressedEvent; + using CreateRet = reactotronCodegen::IRSystemMenuManagerSpec_createMenu_returnType; // One simple method to test event emission REACT_METHOD(createMenu) diff --git a/app/native/IRMenuItemManager/NativeIRMenuItemManager.ts b/app/native/IRSystemMenuManager/NativeIRSystemMenuManager.ts similarity index 71% rename from app/native/IRMenuItemManager/NativeIRMenuItemManager.ts rename to app/native/IRSystemMenuManager/NativeIRSystemMenuManager.ts index fa17dfe..af59d58 100644 --- a/app/native/IRMenuItemManager/NativeIRMenuItemManager.ts +++ b/app/native/IRSystemMenuManager/NativeIRSystemMenuManager.ts @@ -6,41 +6,41 @@ import { TurboModuleRegistry } from "react-native" export const SEPARATOR = "menu-item-separator" as const // Path shape: ["View", "Zen Mode"] -export interface MenuItemPressedEvent { +export interface SystemMenuItemPressedEvent { menuPath: string[] } // Native -> JS: Tree node describing a menu item returned by getMenuStructure() -export interface MenuNode { +export interface SystemMenuNode { title: string enabled: boolean path: string[] // TODO: This creates an infinite loop when building for windows - // children?: MenuNode[] + // children?: SystemMenuNode[] children?: any } // Native -> JS: Top-level entry from getMenuStructure() -export interface MenuEntry { +export interface SystemMenuEntry { title: string - items: MenuNode[] + items: SystemMenuNode[] } -export type MenuStructure = MenuEntry[] +export type SystemMenuStructure = SystemMenuEntry[] -// JS -> Native: For building menu -export interface MenuItem { +// JS -> Native: For building menu (legacy - use SystemMenuItem instead) +export interface SystemNativeMenuItem { label: string shortcut?: string enabled?: boolean action: () => void } -export type MenuListEntry = MenuItem | typeof SEPARATOR +export type SystemMenuListEntry = SystemNativeMenuItem | typeof SEPARATOR export interface Spec extends TurboModule { getAvailableMenus(): string[] - getMenuStructure(): MenuStructure + getMenuStructure(): SystemMenuStructure createMenu(menuName: string): Promise<{ success: boolean; existed: boolean; menuName: string }> addMenuItemAtPath( parentPath: string[], @@ -60,7 +60,7 @@ export interface Spec extends TurboModule { path: string[], enabled: boolean, ): Promise<{ success: boolean; error?: string }> - readonly onMenuItemPressed: EventEmitter + readonly onMenuItemPressed: EventEmitter } -export default TurboModuleRegistry.getEnforcing("IRMenuItemManager") +export default TurboModuleRegistry.getEnforcing("IRSystemMenuManager") diff --git a/app/state/useGlobal.windows.ts b/app/state/useGlobal.windows.ts index b13f1ac..cd22dd1 100644 --- a/app/state/useGlobal.windows.ts +++ b/app/state/useGlobal.windows.ts @@ -1,87 +1,273 @@ -import { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react" +/** + * Global State Management System (React Native Windows) + * + * A lightweight global state solution built on React's useSyncExternalStore. + * Provides both hook-based and imperative access to shared state values. + * + * Features: + * - Type-safe global state with "initialize on first read" semantics + * - Efficient subscription system with automatic cleanup + * - Batched updates to minimize re-renders + * - Support for both React components (useGlobal) and external code (withGlobal) + * - Memory leak prevention via Set cleanup + * - No-op persistence stubs (API-stable; can be wired later) + * + * Usage: + * const [count, setCount] = useGlobal('counter', 0); + * const [data, setData] = withGlobal('userData', {}); + * const [persistedData, setPersisted] = useGlobal('key', {}, { persist: true }); // persist currently no-op + * + * Notes: + * - `initialValue` is used as the value if the key is missing. For components, + * we DO NOT write during render; we write once post-mount if still missing. + * - If different `initialValue`s are passed for the same `id`, the first + * established value "wins" (subsequent differing defaults are ignored). + */ + +import { useSyncExternalStore, useEffect, useCallback } from "react"; +import { unstable_batchedUpdates } from "react-native"; + +type Id = string; +type Listener = () => void; +type SetValue = T | ((prev: T) => T); +type UseGlobalOptions = { persist?: boolean }; + +/* ----------------------------------------------------------------------------- + * Internal Stores + * -------------------------------------------------------------------------- */ +// Central storage for all global state values, keyed by unique identifiers +const globals = new Map(); +// Subscription system: maps each global ID to a set of listener functions +const listeners = new Map>(); -type UseGlobalOptions = Record +/* ----------------------------------------------------------------------------- + * Persistence Stubs (no-op) + * RN Web doesn't have react-native-mmkv support out of the box; plan to wire later + * -------------------------------------------------------------------------- */ +function loadPersistedGlobals(): void { + // No-op: persistence not implemented +} -const globals: Record = {} -const components_to_rerender: Record>[]> = {} +function debouncePersist(_delay: number = 300): void { + // No-op: persistence not implemented +} -type SetValueFn = (prev: T) => T -type SetValue = T | SetValueFn +/* ----------------------------------------------------------------------------- + * Helpers + * -------------------------------------------------------------------------- */ /** - * Trying for the simplest possible global state management. - * Use anywhere and it'll share the same state globally, and rerender any component that uses it. + * Read a snapshot for an id, returning `initialValue` when missing. + * Pure read: NEVER writes during render. + */ +function getSnapshotWithDefault(id: Id, initialValue: T): T { + return (globals.has(id) ? (globals.get(id) as T) : initialValue); +} + +/** + * Read a snapshot without default (used by imperative API and setters). + */ +function getSnapshot(id: Id): T { + return globals.get(id) as T; +} + +/** + * Subscribe a component to changes for a specific global ID. + * Returns an unsubscribe function that cleans up both the listener and empty sets. + */ +function subscribe(id: Id, cb: Listener): () => void { + let set = listeners.get(id); + if (!set) listeners.set(id, (set = new Set())); + set.add(cb); + + // Return cleanup function that prevents memory leaks + return () => { + const s = listeners.get(id); + if (!s) return; + s.delete(cb); + // Clean up empty listener sets to prevent memory leaks + if (s.size === 0) listeners.delete(id); + }; +} + +/** + * Notify all subscribers of a global value change. + * Uses batched updates to prevent excessive re-renders when multiple globals change. + * Iterates over a copy to be resilient to listeners mutating subscriptions. + */ +function notify(id: Id) { + const s = listeners.get(id); + if (!s || s.size === 0) return; + + unstable_batchedUpdates(() => { + for (const l of Array.from(s)) l(); + }); +} + +/** + * Create a setter function that handles state updates (persistence is no-op). + * - Supports functional updates like React.useState + * - Skips notifications if value is Object.is-equal (no-op update) + * - Accepts `null` to reset/delete the value (used by imperative API) + */ +function buildSetValue(id: Id, persist: boolean) { + return (value: SetValue | null) => { + const prev = globals.get(id) as T | undefined; + + // Handle null value as reset (imperative API) + if (value === null) { + if (!globals.has(id)) return; // nothing to reset + globals.delete(id); + // persistence cleanup would go here (no-op for now) + notify(id); + return; + } + + // Resolve functional updater + const next = + typeof value === "function" + ? (value as (prev: T) => T)(getSnapshot(id)) + : value; + + // Avoid unnecessary notifications/re-renders on no-op updates + if (Object.is(prev, next)) return; + + globals.set(id, next); + + // Would save to persistent storage if implemented (no-op for now) + if (persist) debouncePersist(); + + // Notify all subscribers for re-renders + notify(id); + }; +} + +/* ----------------------------------------------------------------------------- + * Public API + * -------------------------------------------------------------------------- */ + +/** + * React hook for accessing and updating global state (component-friendly API) * - * const [value, setValue] = useGlobal("my-state", "initial-value") + * RN-only: No SSR getServerSnapshot is provided. * + * @param id - Unique identifier for the global value + * @param initialValue - Default value to use if the global doesn't exist yet + * @param options - Configuration options including persistence (NOTE: persist is no-op) + * @returns Tuple of [currentValue, setter] similar to useState */ -export function useGlobal( - id: string, +export function useGlobal( + id: Id, initialValue: T, - options: UseGlobalOptions = {}, -): [T, (value: SetValue) => void] { - // This is a dummy state to rerender any component that uses this global. - const [_v, setRender] = useState([]) + { persist = false }: UseGlobalOptions = {} +): [T, (v: SetValue) => void] { + // Read via useSyncExternalStore; ensure the snapshot read is PURE (no writes) + const value = useSyncExternalStore( + (cb) => subscribe(id, cb), // subscribe + () => getSnapshotWithDefault(id, initialValue) // getSnapshot (client) + ); - // Subscribe & unsubscribe from state changes for this ID. + /** + * Post-mount initialization: + * If the key is still missing, establish it with `initialValue`. + * This avoids writes during render while ensuring the key exists thereafter. + * No notify needed: subscribers already read `initialValue` on first render. + */ useEffect(() => { - components_to_rerender[id] ||= [] - components_to_rerender[id].push(setRender) - return () => { - if (!components_to_rerender[id]) return - components_to_rerender[id] = components_to_rerender[id].filter( - (listener) => listener !== setRender, - ) + if (!globals.has(id)) { + globals.set(id, initialValue); + // Optionally, a dev-only warning could detect mismatched defaults for same id. } - }, [id]) - - // We use the withGlobal hook to do the actual work. - const [value] = withGlobal(id, initialValue, options) + // We intentionally do not depend on initialValue here: + // changing the default later should not rewrite established globals. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [id]); - // We use a callback to ensure that the setValue function is stable. - const setValue = useCallback(buildSetValue(id), [id]) + // Memoize the setter; enforce non-null signature for hook users + const setAny = useCallback(buildSetValue(id, persist), [id, persist]); + const set = useCallback<(v: SetValue) => void>((v) => setAny(v), [setAny]); - return [value, setValue] + return [value, set]; } /** - * For global state used outside of a component. Can be used in a component with - * the same id string, using useGlobal. + * Imperative access to global state (for use outside React components) + * + * Useful for accessing global state in utility functions, event handlers, + * or other non-React code that needs to read/write global values. + * + * @param id - Unique identifier for the global value + * @param initialValue - Default value to use if the global doesn't exist yet + * @param options - Configuration options including persistence (NOTE: persist is no-op) + * @returns Tuple of [currentValue, setter] where setter accepts null to reset */ export function withGlobal( - id: string, + id: Id, initialValue: T, - _: UseGlobalOptions = {}, -): [T, (value: SetValue | null) => void] { - // Initialize this global if it doesn't exist. - if (globals[id] === undefined) globals[id] = initialValue - - return [globals[id] as T, buildSetValue(id)] + { persist = false }: UseGlobalOptions = {} +): [T, (v: SetValue | null) => void] { + // Imperative path can initialize synchronously without render concerns + if (!globals.has(id)) globals.set(id, initialValue); + return [getSnapshot(id), buildSetValue(id, persist)]; } -function buildSetValue(id: string) { - return (value: SetValue | null) => { - // Call the setter function if it's a function. - if (typeof value === "function") value = (value as SetValueFn)(globals[id] as T) - if (value === null) { - delete globals[id] - } else { - globals[id] = value - } - components_to_rerender[id] ||= [] - components_to_rerender[id].forEach((rerender) => rerender([])) - } +/** + * Reset a specific global value back to its initial state (delete the key). + * + * @param id - The global identifier to reset + * @param rerender - Whether to trigger re-renders (default: true) + */ +export function resetGlobal(id: Id, rerender = true) { + if (!globals.has(id)) return; + globals.delete(id); + // Note: No persistence cleanup needed since persistence is not implemented + if (rerender) notify(id); } /** - * Clear all globals and reset the storage entirely. - * Optionally rerender all components that use useGlobal. + * Clear all global state values. + * + * Useful for testing or app-wide state resets. Only notifies globals + * that have active listeners to avoid unnecessary work. + * + * @param rerender - Whether to trigger re-renders (default: true) */ -export function clearGlobals(rerender: boolean = true): void { - Object.keys(globals).forEach((key) => delete globals[key]) - if (rerender) { - Object.keys(components_to_rerender).forEach((key) => { - components_to_rerender[key].forEach((rerender) => rerender([])) - }) +export function clearGlobals(rerender = true) { + // Clear in-memory state + const hadAny = globals.size > 0; + globals.clear(); + // Note: No persistent storage to clear since persistence is not implemented + + if (rerender && hadAny) { + // Only notify ids that currently have listeners + for (const id of listeners.keys()) notify(id); } } + +/* ----------------------------------------------------------------------------- + * Optional Developer Ergonomics (handy for tests & utilities) + * -------------------------------------------------------------------------- */ + +/** + * Read a global value without subscribing. Returns undefined if missing. + */ +export const getGlobal = (id: Id): T | undefined => + (globals.get(id) as T | undefined); + +/** + * Set a global value without subscribing. (Non-null only.) + */ +export const setGlobal = (id: Id, v: SetValue): void => + buildSetValue(id, false)(v); + +/** + * Check whether a global key exists. + */ +export const hasGlobal = (id: Id): boolean => globals.has(id); + +/* ----------------------------------------------------------------------------- + * Module Initialization + * -------------------------------------------------------------------------- */ + +// Load persisted globals on module initialization (no-op for now) +loadPersistedGlobals(); diff --git a/app/utils/random/IRRandom.windows.cpp b/app/utils/random/IRRandom.windows.cpp index 88f1a74..ddb7090 100644 --- a/app/utils/random/IRRandom.windows.cpp +++ b/app/utils/random/IRRandom.windows.cpp @@ -7,6 +7,9 @@ #include "pch.h" #include "IRRandom.windows.h" +#include +#include +#include namespace winrt::reactotron::implementation { @@ -17,7 +20,28 @@ namespace winrt::reactotron::implementation std::string IRRandom::getUUID() noexcept { - // TODO: Generate UUID on Windows using CoCreateGuid or similar - return "00000000-0000-0000-0000-000000000000"; + GUID guid; + HRESULT result = CoCreateGuid(&guid); + + if (FAILED(result)) + { + return "00000000-0000-0000-0000-000000000000"; + } + + std::ostringstream stream; + stream << std::hex << std::uppercase << std::setfill('0') + << std::setw(8) << guid.Data1 << "-" + << std::setw(4) << guid.Data2 << "-" + << std::setw(4) << guid.Data3 << "-" + << std::setw(2) << static_cast(guid.Data4[0]) + << std::setw(2) << static_cast(guid.Data4[1]) << "-" + << std::setw(2) << static_cast(guid.Data4[2]) + << std::setw(2) << static_cast(guid.Data4[3]) + << std::setw(2) << static_cast(guid.Data4[4]) + << std::setw(2) << static_cast(guid.Data4[5]) + << std::setw(2) << static_cast(guid.Data4[6]) + << std::setw(2) << static_cast(guid.Data4[7]); + + return stream.str(); } } \ No newline at end of file diff --git a/app/utils/system.ts b/app/utils/system.ts index dcc66be..18b1e3a 100644 --- a/app/utils/system.ts +++ b/app/utils/system.ts @@ -47,7 +47,6 @@ export function useKeyboardEvents(onKeyboardEvent: (event: KeyboardEvent) => voi const keyboardSubscription = useRef(null) useEffect(() => { - if (Platform.OS === "windows") return _keyboardSubscribers++ if (_keyboardSubscribers === 1) IRKeyboard.startListening() keyboardSubscription.current = IRKeyboard.onKeyboardEvent(onKeyboardEvent) diff --git a/app/utils/useSystemMenu/types.ts b/app/utils/useSystemMenu/types.ts new file mode 100644 index 0000000..19f3871 --- /dev/null +++ b/app/utils/useSystemMenu/types.ts @@ -0,0 +1,21 @@ +export { SEPARATOR } from "../../native/IRSystemMenuManager/NativeIRSystemMenuManager" +export type { + SystemMenuItemPressedEvent, + SystemMenuStructure, +} from "../../native/IRSystemMenuManager/NativeIRSystemMenuManager" + +export interface SystemMenuItem { + label: string + shortcut?: string + enabled?: boolean + position?: number + action?: () => void + submenu?: SystemMenuListEntry[] +} + +export type SystemMenuListEntry = SystemMenuItem | typeof SEPARATOR + +export interface SystemMenuConfig { + items?: Record + remove?: string[] +} \ No newline at end of file diff --git a/app/utils/useMenuItem.tsx b/app/utils/useSystemMenu/useSystemMenu.ts similarity index 70% rename from app/utils/useMenuItem.tsx rename to app/utils/useSystemMenu/useSystemMenu.ts index dc094ec..d6ae931 100644 --- a/app/utils/useMenuItem.tsx +++ b/app/utils/useSystemMenu/useSystemMenu.ts @@ -42,7 +42,7 @@ * removeMenuItemByName, * setMenuItemEnabled, * getAllMenuPaths - * } = useMenuItem() + * } = useSystemMenu() * * useEffect(() => { * removeMenuItemByName("Format") @@ -51,48 +51,24 @@ */ import { useEffect, useRef, useCallback, useState } from "react" -import NativeIRMenuItemManager, { - type MenuItemPressedEvent, - type MenuStructure, - type MenuListEntry, +import NativeIRSystemMenuManager from "../../native/IRSystemMenuManager/NativeIRSystemMenuManager" +import { SEPARATOR, -} from "../native/IRMenuItemManager/NativeIRMenuItemManager" - -// Only thing to configure here is the path separator. -const PATH_SEPARATOR = " > " - -export { SEPARATOR } // Menu separator - -export interface MenuItem { - label: string - shortcut?: string - enabled?: boolean - position?: number - action: () => void -} - -export interface MenuItemConfig { - items?: Record - remove?: string[] -} - -const parsePathKey = (key: string): string[] => - key - .split(PATH_SEPARATOR) - .map((s) => s.trim()) - .filter(Boolean) - -const joinPath = (p: string[]) => p.join(PATH_SEPARATOR) - -const isSeparator = (e: MenuListEntry): e is typeof SEPARATOR => e === SEPARATOR - -export function useMenuItem(config?: MenuItemConfig) { + type SystemMenuItem, + type SystemMenuConfig, + type SystemMenuListEntry, + type SystemMenuItemPressedEvent, + type SystemMenuStructure, +} from "./types" +import { parsePathKey, joinPath, isSeparator } from "./utils" + +export function useSystemMenu(config?: SystemMenuConfig) { const actionsRef = useRef void>>(new Map()) - const previousConfigRef = useRef(null) + const previousConfigRef = useRef(null) const [availableMenus, setAvailableMenus] = useState([]) - const [menuStructure, setMenuStructure] = useState([]) + const [menuStructure, setMenuStructure] = useState([]) - const handleMenuItemPressed = useCallback((event: MenuItemPressedEvent) => { + const handleMenuItemPressed = useCallback((event: SystemMenuItemPressedEvent) => { const key = joinPath(event.menuPath) const action = actionsRef.current.get(key) if (action) action() @@ -100,8 +76,8 @@ export function useMenuItem(config?: MenuItemConfig) { const discoverMenus = useCallback(async () => { try { - const menus = NativeIRMenuItemManager.getAvailableMenus() - const structure = NativeIRMenuItemManager.getMenuStructure() + const menus = NativeIRSystemMenuManager.getAvailableMenus() + const structure = NativeIRSystemMenuManager.getMenuStructure() setAvailableMenus(menus) setMenuStructure(structure) return menus @@ -111,11 +87,12 @@ export function useMenuItem(config?: MenuItemConfig) { } }, []) - const addEntries = useCallback(async (parentKey: string, entries: MenuListEntry[]) => { + const addEntries = useCallback(async (parentKey: string, entries: SystemMenuListEntry[]) => { const parentPath = parsePathKey(parentKey) + // Clear any existing separators before adding new ones to avoid duplication try { - await NativeIRMenuItemManager.removeMenuItemAtPath([...parentPath, SEPARATOR]) + await NativeIRSystemMenuManager.removeMenuItemAtPath([...parentPath, SEPARATOR]) } catch (e) { console.warn(`Failed to clear separators for "${parentKey}":`, e) } @@ -123,28 +100,29 @@ export function useMenuItem(config?: MenuItemConfig) { for (const entry of entries) { if (isSeparator(entry)) { try { - await NativeIRMenuItemManager.addMenuItemAtPath(parentPath, SEPARATOR, "") + await NativeIRSystemMenuManager.addMenuItemAtPath(parentPath, SEPARATOR, "") } catch (e) { console.error(`Failed to add separator under "${parentKey}":`, e) } continue } - const item = entry as MenuItem + const item = entry as SystemMenuItem const leafPath = [...parentPath, item.label] const actionKey = joinPath(leafPath) - actionsRef.current.set(actionKey, item.action) + + if (item.action) actionsRef.current.set(actionKey, item.action) try { if (typeof item.position === "number") { - await NativeIRMenuItemManager.insertMenuItemAtPath( + await NativeIRSystemMenuManager.insertMenuItemAtPath( parentPath, item.label, item.position, item.shortcut ?? "", ) } else { - await NativeIRMenuItemManager.addMenuItemAtPath( + await NativeIRSystemMenuManager.addMenuItemAtPath( parentPath, item.label, item.shortcut ?? "", @@ -152,7 +130,7 @@ export function useMenuItem(config?: MenuItemConfig) { } if (item.enabled !== undefined) { - await NativeIRMenuItemManager.setMenuItemEnabledAtPath(leafPath, item.enabled) + await NativeIRSystemMenuManager.setMenuItemEnabledAtPath(leafPath, item.enabled) } } catch (error) { console.error(`Failed to add "${item.label}" under "${parentKey}":`, error) @@ -160,12 +138,12 @@ export function useMenuItem(config?: MenuItemConfig) { } }, []) - const removeMenuItems = useCallback(async (parentKey: string, items: MenuItem[]) => { + const removeMenuItems = useCallback(async (parentKey: string, items: SystemMenuItem[]) => { const parentPath = parsePathKey(parentKey) for (const item of items) { const leafPath = [...parentPath, item.label] try { - await NativeIRMenuItemManager.removeMenuItemAtPath(leafPath) + await NativeIRSystemMenuManager.removeMenuItemAtPath(leafPath) } catch (error) { console.error(`Failed to remove menu item ${joinPath(leafPath)}:`, error) } finally { @@ -177,7 +155,7 @@ export function useMenuItem(config?: MenuItemConfig) { const removeMenuItemByName = useCallback(async (nameOrPath: string) => { const path = parsePathKey(nameOrPath) try { - await NativeIRMenuItemManager.removeMenuItemAtPath(path) + await NativeIRSystemMenuManager.removeMenuItemAtPath(path) actionsRef.current.delete(joinPath(path)) } catch (error) { console.error(`Failed to remove menu item/menu ${nameOrPath}:`, error) @@ -187,7 +165,7 @@ export function useMenuItem(config?: MenuItemConfig) { const setMenuItemEnabled = useCallback(async (pathOrKey: string | string[], enabled: boolean) => { const path = Array.isArray(pathOrKey) ? pathOrKey : parsePathKey(pathOrKey) try { - await NativeIRMenuItemManager.setMenuItemEnabledAtPath(path, enabled) + await NativeIRSystemMenuManager.setMenuItemEnabledAtPath(path, enabled) } catch (error) { console.error(`Failed to set enabled for ${joinPath(path)}:`, error) } @@ -195,8 +173,9 @@ export function useMenuItem(config?: MenuItemConfig) { const getAllMenuPaths = useCallback(async (): Promise => { try { - const structure = NativeIRMenuItemManager.getMenuStructure() + const structure = NativeIRSystemMenuManager.getMenuStructure() const out: string[] = [] + // Recursively walk the menu tree structure const walk = (nodes?: any[]) => { if (!nodes) return for (const n of nodes) { @@ -213,16 +192,16 @@ export function useMenuItem(config?: MenuItemConfig) { }, []) const getItemDifference = useCallback( - (oldEntries: MenuListEntry[] = [], newEntries: MenuListEntry[] = []) => { - const oldItems = oldEntries.filter((e): e is MenuItem => !isSeparator(e)) - const newItems = newEntries.filter((e): e is MenuItem => !isSeparator(e)) + (oldEntries: SystemMenuListEntry[] = [], newEntries: SystemMenuListEntry[] = []) => { + const oldItems = oldEntries.filter((e): e is SystemMenuItem => !isSeparator(e)) + const newItems = newEntries.filter((e): e is SystemMenuItem => !isSeparator(e)) - const byLabel = (xs: MenuItem[]) => new Map(xs.map((x) => [x.label, x])) + const byLabel = (xs: SystemMenuItem[]) => new Map(xs.map((x) => [x.label, x])) const oldMap = byLabel(oldItems) const newMap = byLabel(newItems) - const toRemove: MenuItem[] = [] - const toUpdate: MenuItem[] = [] + const toRemove: SystemMenuItem[] = [] + const toUpdate: SystemMenuItem[] = [] for (const [label, item] of newMap) { if (oldMap.has(label)) { @@ -267,10 +246,12 @@ export function useMenuItem(config?: MenuItemConfig) { for (const item of toUpdate) { const leafPath = [...parsePathKey(parentKey), item.label] - actionsRef.current.set(joinPath(leafPath), item.action) + if (item.action) { + actionsRef.current.set(joinPath(leafPath), item.action) + } if (item.enabled !== undefined) { try { - await NativeIRMenuItemManager.setMenuItemEnabledAtPath(leafPath, item.enabled) + await NativeIRSystemMenuManager.setMenuItemEnabledAtPath(leafPath, item.enabled) } catch (e) { console.error(`Failed to update ${joinPath(leafPath)}:`, e) } @@ -284,17 +265,17 @@ export function useMenuItem(config?: MenuItemConfig) { } updateMenus() - }, [config, addEntries, removeMenuItems, getItemDifference]) + }, [config, addEntries, removeMenuItems, getItemDifference, removeMenuItemByName, discoverMenus]) useEffect(() => { - const subscription = NativeIRMenuItemManager.onMenuItemPressed(handleMenuItemPressed) + const subscription = NativeIRSystemMenuManager.onMenuItemPressed(handleMenuItemPressed) discoverMenus() return () => { subscription.remove() } }, [handleMenuItemPressed, discoverMenus]) - // Clean up old menu items + // Clean up old menu items when component unmounts useEffect(() => { return () => { if (!previousConfigRef.current || !config || !config.items) { @@ -303,22 +284,24 @@ export function useMenuItem(config?: MenuItemConfig) { const pairs = Object.entries(previousConfigRef.current.items ?? config.items) const cleanup = async () => { for (const [parentKey, entries] of pairs) { - const itemsOnly = entries.filter((e): e is MenuItem => !isSeparator(e)) + const itemsOnly = entries.filter((e): e is SystemMenuItem => !isSeparator(e)) await removeMenuItems(parentKey, itemsOnly) - await NativeIRMenuItemManager.removeMenuItemAtPath([ + // Remove any remaining separators + await NativeIRSystemMenuManager.removeMenuItemAtPath([ ...parsePathKey(parentKey), SEPARATOR, ]) const parentPath = parsePathKey(parentKey) + // If this was a top-level menu we created and it's now empty, remove it entirely if (parentPath.length === 1) { const top = parentPath[0] - const structure = NativeIRMenuItemManager.getMenuStructure() + const structure = NativeIRSystemMenuManager.getMenuStructure() const entry = structure.find( (e) => e.title.localeCompare(top, undefined, { sensitivity: "accent" }) === 0, ) if (!entry || !entry.items || entry.items.length === 0) { try { - await NativeIRMenuItemManager.removeMenuItemAtPath([top]) + await NativeIRSystemMenuManager.removeMenuItemAtPath([top]) } catch (e) { console.warn(`Couldn't remove top-level menu "${top}":`, e) } @@ -328,10 +311,10 @@ export function useMenuItem(config?: MenuItemConfig) { } cleanup() } - }, []) + }, [removeMenuItems]) const addMenuItem = useCallback( - async (parentKey: string, item: MenuItem) => { + async (parentKey: string, item: SystemMenuItem) => { await addEntries(parentKey, [item]) }, [addEntries], @@ -340,10 +323,12 @@ export function useMenuItem(config?: MenuItemConfig) { return { availableMenus, menuStructure, + menuItems: {} as Record, discoverMenus, addMenuItem, removeMenuItemByName, setMenuItemEnabled, getAllMenuPaths, + handleMenuItemPressed, } -} +} \ No newline at end of file diff --git a/app/utils/useSystemMenu/useSystemMenu.windows.ts b/app/utils/useSystemMenu/useSystemMenu.windows.ts new file mode 100644 index 0000000..76440f7 --- /dev/null +++ b/app/utils/useSystemMenu/useSystemMenu.windows.ts @@ -0,0 +1,256 @@ +/* + * Windows Menu Management (Global State Facade) + * + * Add, delete, and update Windows menu items using global state persistence. + * This implementation provides a facade over global state since Windows doesn't + * have native menu management APIs like macOS. + * + * ────────────────────────────── + * Declarative Usage (via config) + * ────────────────────────────── + * + * const menuConfig = { + * items: { + * "File": [ + * { + * label: "New Project", + * shortcut: "ctrl+n", + * action: () => console.log("New project created"), + * }, + * SEPARATOR, + * { + * label: "Save", + * enabled: false, + * action: () => console.log("Save action"), + * }, + * ], + * "View": [ + * { + * label: "Toggle Sidebar", + * shortcut: "ctrl+b", + * action: () => console.log("Sidebar toggled"), + * }, + * ], + * }, + * remove: ["Help", "Format"], + * } + * + * ─────────────────────────── + * Imperative Usage (via hook) + * ─────────────────────────── + * + * const { + * addMenuItem, + * removeMenuItemByName, + * setMenuItemEnabled, + * getAllMenuPaths, + * menuItems, + * menuStructure + * } = useSystemMenu() + * + * useEffect(() => { + * addMenuItem("Tools", { + * label: "Clear Cache", + * action: () => console.log("Cache cleared") + * }) + * getAllMenuPaths().then(paths => console.log({ paths })) + * }, [addMenuItem, getAllMenuPaths]) + * + * // Note: Windows implementation stores menu state globally for persistence + * // across component unmounts. Actions are stored in actionsRef for execution. + */ + +import { useEffect, useRef, useCallback, useState } from "react" +import { useGlobal } from "../../state/useGlobal" +import { + SEPARATOR, + type SystemMenuItem, + type SystemMenuConfig, + type SystemMenuListEntry, + type SystemMenuItemPressedEvent, + type SystemMenuStructure, +} from "./types" +import { parsePathKey, joinPath, isSeparator } from "./utils" + +export function useSystemMenu(config?: SystemMenuConfig) { + const actionsRef = useRef void>>(new Map()) + + // Global state for Windows menu persistence across component unmounts + const [globalMenuConfig, setGlobalMenuConfig] = useGlobal( + "windows-menu-config", + null, + ) + const [globalMenuStructure, setGlobalMenuStructure] = useGlobal( + "windows-menu-structure", + [], + ) + const [globalMenuItems, setGlobalMenuItems] = useGlobal>( + "windows-menu-items", + {}, + ) + + const handleMenuItemPressed = useCallback((event: SystemMenuItemPressedEvent) => { + const key = joinPath(event.menuPath) + const action = actionsRef.current.get(key) + if (action) action() + }, []) + + const discoverMenus = useCallback(async () => { + const configToUse = config || globalMenuConfig + if (!configToUse?.items || !config || config === globalMenuConfig) return [] + + // Create a simple structure from config items for Windows titlebar rendering + const winStructure: SystemMenuStructure = Object.keys(configToUse.items).map((title) => ({ + title, + enabled: true, + path: [title], + items: [], + children: [], + })) + + // Update global state if we have a new config + setGlobalMenuConfig(config) + setGlobalMenuStructure(winStructure) + setGlobalMenuItems(config.items as Record) + + return [] // Windows doesn't have native menu discovery + }, [config, globalMenuConfig, setGlobalMenuConfig, setGlobalMenuStructure, setGlobalMenuItems]) + + const addMenuItem = useCallback( + async (parentKey: string, item: SystemMenuItem) => { + const leafPath = [parentKey, item.label] + const actionKey = joinPath(leafPath) + + // Store action in memory for execution when menu item is pressed + if (item.action) { + actionsRef.current.set(actionKey, item.action) + } + + // Add item to global state for UI rendering + setGlobalMenuItems((prev) => ({ + ...prev, + [parentKey]: [...(prev[parentKey] || []), item], + })) + }, + [setGlobalMenuItems], + ) + + const removeMenuItemByName = useCallback( + async (nameOrPath: string) => { + const path = parsePathKey(nameOrPath) + const key = joinPath(path) + // Remove action from memory + actionsRef.current.delete(key) + + // Remove from global state based on path depth + if (path.length === 1) { + // Remove entire top-level menu + setGlobalMenuItems((prev) => { + const updated = { ...prev } + delete updated[path[0]] + return updated + }) + } else if (path.length === 2) { + // Remove specific menu item + const [parentKey, itemLabel] = path + setGlobalMenuItems((prev) => ({ + ...prev, + [parentKey]: (prev[parentKey] || []).filter((item) => item.label !== itemLabel), + })) + } + }, + [setGlobalMenuItems], + ) + + const setMenuItemEnabled = useCallback( + async (pathOrKey: string | string[], enabled: boolean) => { + const path = Array.isArray(pathOrKey) ? pathOrKey : parsePathKey(pathOrKey) + + // Update enabled state in global state (Windows only supports in-memory state updates) + if (path.length >= 2) { + const [parentKey, itemLabel] = path + setGlobalMenuItems((prev) => ({ + ...prev, + [parentKey]: (prev[parentKey] || []).map((item) => + item.label === itemLabel ? { ...item, enabled } : item, + ), + })) + } + }, + [setGlobalMenuItems], + ) + + const getAllMenuPaths = useCallback(async (): Promise => { + const paths: string[] = [] + for (const [parentKey, entries] of Object.entries(globalMenuItems)) { + for (const entry of entries) { + if (!isSeparator(entry)) { + paths.push(joinPath([parentKey, entry.label])) + } + } + } + return paths + }, [globalMenuItems]) + + // Update menus when config changes + useEffect(() => { + const updateMenus = async () => { + if (!config) return + + if (config.items) { + // Store actions in memory for execution + for (const [parentKey, entries] of Object.entries(config.items)) { + for (const entry of entries) { + if (!isSeparator(entry)) { + const item = entry as SystemMenuItem + const leafPath = [parentKey, item.label] + if (item.action) { + actionsRef.current.set(joinPath(leafPath), item.action) + } + } + } + } + // Update global state for UI persistence + setGlobalMenuConfig(config) + setGlobalMenuItems(config.items as Record) + } + await discoverMenus() + } + + updateMenus() + }, [config, setGlobalMenuConfig, setGlobalMenuItems, discoverMenus]) + + // Restore actions from global state when no config is provided (component remount) + useEffect(() => { + if (!config && globalMenuConfig?.items) { + // Restore actions from persisted global config + for (const [parentKey, entries] of Object.entries(globalMenuConfig.items)) { + for (const entry of entries) { + if (!isSeparator(entry)) { + const item = entry as SystemMenuItem + const leafPath = [parentKey, item.label] + if (item.action) { + actionsRef.current.set(joinPath(leafPath), item.action) + } + } + } + } + } + }, [config, globalMenuConfig]) + + useEffect(() => { + discoverMenus() + }, [discoverMenus]) + + return { + availableMenus: [], // Windows doesn't have native menu discovery + menuStructure: globalMenuStructure, + menuItems: globalMenuItems, + discoverMenus, + addMenuItem, + removeMenuItemByName, + setMenuItemEnabled, + getAllMenuPaths, + handleMenuItemPressed, + } +} \ No newline at end of file diff --git a/app/utils/useSystemMenu/utils.ts b/app/utils/useSystemMenu/utils.ts new file mode 100644 index 0000000..a20a844 --- /dev/null +++ b/app/utils/useSystemMenu/utils.ts @@ -0,0 +1,13 @@ +import { SEPARATOR, type SystemMenuListEntry } from "./types" + +export const PATH_SEPARATOR = " > " + +export const parsePathKey = (key: string): string[] => + key + .split(PATH_SEPARATOR) + .map((s) => s.trim()) + .filter(Boolean) + +export const joinPath = (p: string[]) => p.join(PATH_SEPARATOR) + +export const isSeparator = (e: SystemMenuListEntry): e is typeof SEPARATOR => e === SEPARATOR \ No newline at end of file diff --git a/windows/reactotron/IRNativeModules.g.h b/windows/reactotron/IRNativeModules.g.h index 867c32b..4c3745f 100644 --- a/windows/reactotron/IRNativeModules.g.h +++ b/windows/reactotron/IRNativeModules.g.h @@ -10,10 +10,10 @@ #include "../../app/native/IRClipboard/IRClipboard.windows.h" #include "../../app/native/IRFontList/IRFontList.windows.h" #include "../../app/native/IRKeyboard/IRKeyboard.windows.h" -#include "../../app/native/IRMenuItemManager/IRMenuItemManager.windows.h" #include "../../app/native/IRPassthroughView/IRPassthroughView.windows.h" #include "../../app/native/IRRunShellCommand/IRRunShellCommand.windows.h" #include "../../app/native/IRSystemInfo/IRSystemInfo.windows.h" +#include "../../app/native/IRSystemMenuManager/IRSystemMenuManager.windows.h" #include "../../app/native/IRTabComponentView/IRTabComponentView.windows.h" #include "../../app/utils/experimental/IRExperimental.windows.h" #include "../../app/utils/random/IRRandom.windows.h"