feat: Preferences screen

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)
 }

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"
 
@@ -15,6 +16,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;
@@ -41,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 (
     <Router>
       <RootContextProvider>
@@ -68,6 +84,9 @@ function App() {
                 {/* Custom Commands */}
                 <Route path="/customCommands" element={<CustomCommands />} />
 
+                {/* Preferences */}
+                <Route path="/preferences" element={<Preferences />} />
+
                 {/* Help */}
                 <Route path="/help" element={<Help />} />
               </Routes>

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,79 +9,87 @@ 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?
   // OpenFindKeysValuesModal: {
   //   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<ActionName, (keyEvent: KeyboardEvent) => void>
 
   return (
-    <GlobalHotKeys keyMap={keyMap as any} handlers={handlers}>
+    <GlobalHotKeys keyMap={keyMap} handlers={handlers}>
       {children}
     </GlobalHotKeys>
   )

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}
       />
 
+      <SideBarButton icon={FaGear} path="/preferences" text="Preferences" hideTopBar />
       <SideBarButton icon={MdLiveHelp} path="/help" text="Help" hideTopBar />
     </SideBarContainer>
   )

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")) {

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 (
+    <Container>
+      <Header title={"Preferences"} isDraggable />
+      <Container>
+        {Object.entries(configStore.store).map(([key, value]) => (
+          <Row key={key}>
+            <Title>{key}</Title>
+            <Text>{JSON.stringify(value)}</Text>
+          </Row>
+        ))}
+      </Container>
+    </Container>
+  )
+}
+
+export default Preferences