From 36983f5e81e6322ffed9acaf9a33b9fefd59aa6f Mon Sep 17 00:00:00 2001 From: Joshua Yoes Date: Fri, 15 Dec 2023 10:29:31 -0800 Subject: [PATCH 1/3] Update App.tsx and Sidebar.tsx, and config.ts --- apps/reactotron-app/src/renderer/App.tsx | 4 +++ .../renderer/components/SideBar/Sidebar.tsx | 2 ++ apps/reactotron-app/src/renderer/config.ts | 6 ++-- .../src/renderer/pages/preferences/index.tsx | 31 +++++++++++++++++++ 4 files changed, 40 insertions(+), 3 deletions(-) create mode 100644 apps/reactotron-app/src/renderer/pages/preferences/index.tsx diff --git a/apps/reactotron-app/src/renderer/App.tsx b/apps/reactotron-app/src/renderer/App.tsx index 9657b992b..fc96ea48f 100644 --- a/apps/reactotron-app/src/renderer/App.tsx +++ b/apps/reactotron-app/src/renderer/App.tsx @@ -15,6 +15,7 @@ import Overlay from "./pages/reactNative/Overlay" import Storybook from "./pages/reactNative/Storybook" import CustomCommands from "./pages/customCommands" import Help from "./pages/help" +import Preferences from "./pages/preferences" const AppContainer = styled.div` position: absolute; @@ -68,6 +69,9 @@ function App() { {/* Custom Commands */} } /> + {/* Preferences */} + } /> + {/* Help */} } /> diff --git a/apps/reactotron-app/src/renderer/components/SideBar/Sidebar.tsx b/apps/reactotron-app/src/renderer/components/SideBar/Sidebar.tsx index 6ce196397..09c585da2 100644 --- a/apps/reactotron-app/src/renderer/components/SideBar/Sidebar.tsx +++ b/apps/reactotron-app/src/renderer/components/SideBar/Sidebar.tsx @@ -9,6 +9,7 @@ import { MdMobiledataOff, } from "react-icons/md" import { FaMagic } from "react-icons/fa" +import { FaGear } from "react-icons/fa6" import styled from "styled-components" import SideBarButton from "../SideBarButton" @@ -82,6 +83,7 @@ function SideBar({ isOpen, serverStatus }: { isOpen: boolean; serverStatus: Serv iconColor={iconColor} /> + ) diff --git a/apps/reactotron-app/src/renderer/config.ts b/apps/reactotron-app/src/renderer/config.ts index e7114e5c8..bb210df12 100644 --- a/apps/reactotron-app/src/renderer/config.ts +++ b/apps/reactotron-app/src/renderer/config.ts @@ -1,6 +1,6 @@ import Store from "electron-store" -const schema = { +export const schema = { serverPort: { type: "number", default: 9090, @@ -9,9 +9,9 @@ const schema = { type: "number", default: 500, }, -} +} as const -const configStore = new Store({ schema } as any) +const configStore = new Store({ schema }) // Setup defaults if (!configStore.has("serverPort")) { diff --git a/apps/reactotron-app/src/renderer/pages/preferences/index.tsx b/apps/reactotron-app/src/renderer/pages/preferences/index.tsx new file mode 100644 index 000000000..ef12d6a2a --- /dev/null +++ b/apps/reactotron-app/src/renderer/pages/preferences/index.tsx @@ -0,0 +1,31 @@ +import React from "react" +import { Header } from "reactotron-core-ui" + +import configStore from "../../config" +import { Container, Title, Text } from "../reactNative/components/Shared" +import styled from "styled-components" + +export const Row = styled.div` + display: flex; + flex: 0; + flex-direction: row; + align-items: center; +` + +const Preferences: React.FC = () => { + return ( + +
+ + {Object.entries(configStore.store).map(([key, value]) => ( + + {key} + {JSON.stringify(value)} + + ))} + + + ) +} + +export default Preferences From 4048b6964a88908194c009fce6267d42cb9a1a74 Mon Sep 17 00:00:00 2001 From: Joshua Yoes Date: Fri, 15 Dec 2023 12:13:01 -0800 Subject: [PATCH 2/3] Add Carlin patch for preferences menu and keyboard navigation --- apps/reactotron-app/src/main/menu.ts | 16 +++++++++------- apps/reactotron-app/src/renderer/App.tsx | 17 ++++++++++++++++- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/apps/reactotron-app/src/main/menu.ts b/apps/reactotron-app/src/main/menu.ts index 6095fcb2f..8a0cb9c29 100644 --- a/apps/reactotron-app/src/main/menu.ts +++ b/apps/reactotron-app/src/main/menu.ts @@ -1,11 +1,11 @@ import { Menu, app, shell } from "electron" -import Store from "electron-store" - -const configStore = new Store() +import ElectronStore from "electron-store" const isDarwin = process.platform === "darwin" -function buildFileMenu() { +ElectronStore.initRenderer() + +function buildFileMenu(window: Electron.BrowserWindow) { const fileMenu = { label: isDarwin ? "Reactotron" : "&File", submenu: [], @@ -36,8 +36,10 @@ function buildFileMenu() { fileMenu.submenu.push( { label: "Preferences", + // Is there a Windows shortcut for this? + accelerator: isDarwin ? "Command+," : undefined, click: () => { - configStore.openInEditor() + window.webContents.send("open-preferences") }, }, { type: "separator" }, @@ -152,13 +154,13 @@ function buildHelpMenu() { export default function createMenu(window: Electron.BrowserWindow, isDevelopment: boolean) { const template = [ - buildFileMenu(), + buildFileMenu(window), buildEditMenu(), buildViewMenu(window, isDevelopment), buildWindowMenu(window), buildHelpMenu(), ] - const menu = Menu.buildFromTemplate(template.filter(t => !!t) as any) + const menu = Menu.buildFromTemplate(template.filter((t) => !!t) as any) Menu.setApplicationMenu(menu) } diff --git a/apps/reactotron-app/src/renderer/App.tsx b/apps/reactotron-app/src/renderer/App.tsx index fc96ea48f..22c3db5a6 100644 --- a/apps/reactotron-app/src/renderer/App.tsx +++ b/apps/reactotron-app/src/renderer/App.tsx @@ -1,4 +1,5 @@ -import React from "react" +import React, { useEffect } from "react" +import { ipcRenderer } from "electron" import { HashRouter as Router, Route, Routes } from "react-router-dom" import styled from "styled-components" @@ -42,7 +43,21 @@ const MainContainer = styled.div` flex: 1; ` +function useOpenPreferences() { + useEffect(() => { + ipcRenderer.on("open-preferences", () => { + window.location.hash = "#/preferences" + }) + + return () => { + ipcRenderer.removeAllListeners("open-preferences") + } + }, []) +} + function App() { + useOpenPreferences() + return ( From d79e4bccaad529bb16e07d9fcac06e0d957651e7 Mon Sep 17 00:00:00 2001 From: Joshua Yoes Date: Fri, 15 Dec 2023 12:21:59 -0800 Subject: [PATCH 3/3] Add Preferences tab to Help shortcuts, cleanup Typescript types --- .../src/renderer/KeybindHandler.tsx | 43 ++++++++++++------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/apps/reactotron-app/src/renderer/KeybindHandler.tsx b/apps/reactotron-app/src/renderer/KeybindHandler.tsx index c66f3696b..dc87c7a37 100644 --- a/apps/reactotron-app/src/renderer/KeybindHandler.tsx +++ b/apps/reactotron-app/src/renderer/KeybindHandler.tsx @@ -1,5 +1,5 @@ import React, { useContext } from "react" -import { GlobalHotKeys, KeyEventName } from "react-hotkeys" +import { GlobalHotKeys, type KeyMap } from "react-hotkeys" import { ReactotronContext, StateContext } from "reactotron-core-ui" import LayoutContext from "./contexts/Layout" @@ -9,51 +9,57 @@ const keyMap = { name: "Toggle Sidebar", group: "Application", sequences: ["command+shift+s", "ctrl+shift+s"], - action: "keyup" as KeyEventName, + action: "keyup", }, // Tab Navigation OpenHomeTab: { name: "Home tab", group: "Navigation", sequences: ["command+1", "ctrl+1"], - action: "keyup" as KeyEventName, + action: "keyup", }, OpenTimelineTab: { name: "Timeline tab", group: "Navigation", sequences: ["command+2", "ctrl+2"], - action: "keyup" as KeyEventName, + action: "keyup", }, OpenStateTab: { name: "State tab", group: "Navigation", sequences: ["command+3", "ctrl+3"], - action: "keyup" as KeyEventName, + action: "keyup", }, OpenReactNativeTab: { name: "React Native tab", group: "Navigation", sequences: ["command+4", "ctrl+4"], - action: "keyup" as KeyEventName, + action: "keyup", }, OpenCustomCommandsTab: { name: "Custom Commands tab", group: "Navigation", sequences: ["command+5", "ctrl+5"], - action: "keyup" as KeyEventName, + action: "keyup", + }, + OpenPreferencesTab: { + name: "Preferences tab", + group: "Navigation", + sequences: ["command+,", "ctrl+,"], + action: "keyup", }, OpenHelpTab: { name: "Help tab", group: "Navigation", sequences: ["command+?", "ctrl+?"], - action: "keyup" as KeyEventName, + action: "keyup", }, // Timeline ClearTimeline: { name: "Clear Timeline", group: "Timeline", sequences: ["command+k", "ctrl+k"], - action: "keyup" as KeyEventName, + action: "keyup", }, // Modals // TODO: What keybinding should this be set to? @@ -61,27 +67,29 @@ const keyMap = { // name: "Find keys or values", // group: "State", // sequences: ["command+k", "ctrl+k"], - // action: "keyup" as KeyEventName, + // action: "keyup" , // }, OpenSubscriptionModal: { name: "Open Subscription modal", group: "State", sequences: ["command+n", "ctrl+n"], - action: "keyup" as KeyEventName, + action: "keyup", }, OpenDispatchModal: { name: "Open Dispatch modal", group: "State", sequences: ["command+d", "ctrl+d"], - action: "keyup" as KeyEventName, + action: "keyup", }, TakeSnapshot: { name: "Take snapshot", group: "State", sequences: ["command+s", "ctrl+s"], - action: "keyup" as KeyEventName, + action: "keyup", }, -} +} satisfies KeyMap + +type ActionName = keyof typeof keyMap function KeybindHandler({ children }) { const { toggleSideBar } = useContext(LayoutContext) @@ -105,6 +113,9 @@ function KeybindHandler({ children }) { OpenCustomCommandsTab: () => { window.location.hash = "/customCommands" }, + OpenPreferencesTab: () => { + window.location.hash = "/preferences" + }, OpenHelpTab: () => { window.location.hash = "/help" }, @@ -130,10 +141,10 @@ function KeybindHandler({ children }) { ClearTimeline: () => { clearCommands() }, - } + } satisfies Record void> return ( - + {children} )