feat: new developer menu, improve modal handling

Author: BluDood

src/main/index.ts

@@ -43,7 +43,8 @@ import {
   getBrightness,
   setBrightnessSmooth,
   getAutoBrightness,
-  setAutoBrightness
+  setAutoBrightness,
+  restore
 } from './lib/adb.js'
 import {
   getShortcuts,
@@ -194,6 +195,7 @@ enum IPCHandler {
   FindCarThing = 'findCarThing',
   FindSetupCarThing = 'findSetupCarThing',
   RebootCarThing = 'rebootCarThing',
+  RestoreCarThing = 'restoreCarThing',
   InstallApp = 'installApp',
   StartServer = 'startServer',
   StopServer = 'stopServer',
@@ -252,6 +254,10 @@ async function setupIpcHandlers() {
     await rebootCarThing(null)
   })
 
+  ipcMain.handle(IPCHandler.RestoreCarThing, async () => {
+    await restore(null)
+  })
+
   ipcMain.handle(IPCHandler.InstallApp, async () => {
     const res = await installApp(null).catch(err => ({ err }))
     if (res?.err) return res.err.message

src/preload/index.d.ts

@@ -17,6 +17,7 @@ declare global {
         'not_found' | 'not_installed' | 'ready'
       >
       rebootCarThing: () => Promise<void>
+      restoreCarThing: () => Promise<void>
       installApp: () => Promise<string | true>
       startServer: () => Promise<void>
       stopServer: () => Promise<void>

src/preload/index.ts

@@ -9,6 +9,7 @@ enum IPCHandler {
   FindCarThing = 'findCarThing',
   FindSetupCarThing = 'findSetupCarThing',
   RebootCarThing = 'rebootCarThing',
+  RestoreCarThing = 'restoreCarThing',
   InstallApp = 'installApp',
   StartServer = 'startServer',
   StopServer = 'stopServer',
@@ -56,6 +57,7 @@ const api = {
   findSetupCarThing: () =>
     ipcRenderer.invoke(IPCHandler.FindSetupCarThing),
   rebootCarThing: () => ipcRenderer.invoke(IPCHandler.RebootCarThing),
+  restoreCarThing: () => ipcRenderer.invoke(IPCHandler.RestoreCarThing),
   installApp: () => ipcRenderer.invoke(IPCHandler.InstallApp),
   startServer: () => ipcRenderer.invoke(IPCHandler.StartServer),
   stopServer: () => ipcRenderer.invoke(IPCHandler.StopServer),

src/renderer/src/App.tsx

@@ -1,6 +1,5 @@
 import { Route, Routes } from 'react-router-dom'
 
-import Developer from './pages/Developer/Developer.js'
 import Setup from './pages/Setup/Setup.js'
 import Layout from './components/Layout/Layout.js'
 import Home from './pages/Home/Home.js'
@@ -11,7 +10,6 @@ const App: React.FC = () => {
       <Route path="/" element={<Layout />}>
         <Route index element={<Home />} />
         <Route path="/setup" element={<Setup />} />
-        <Route path="/developer" element={<Developer />} />
       </Route>
     </Routes>
   )

src/renderer/src/components/Layout/Layout.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
 
+import Developer from '@/pages/Developer/Developer.js'
 import Shortcuts from '@/pages/Shortcuts/Shortcuts.js'
 import Settings from '@/pages/Settings/Settings.js'
+
 import Titlebar from '@/components/Titlebar/Titlebar.js'
 
 import styles from './Layout.module.css'
@@ -18,6 +20,7 @@ const Layout: React.FC = () => {
       </div>
       <Settings />
       <Shortcuts />
+      <Developer />
     </>
   )
 }

src/renderer/src/components/Titlebar/Titlebar.tsx

@@ -1,33 +1,33 @@
 import React, { useContext } from 'react'
-import { useNavigate } from 'react-router-dom'
 
 import { DevModeContext } from '@/contexts/DevModeContext.js'
 import { ModalContext } from '@/contexts/ModalContext.js'
 
 import styles from './Titlebar.module.css'
 
 const Titlebar: React.FC = () => {
-  const navigate = useNavigate()
-  const { setSettingsOpen, setShortcutsEditorOpen } =
-    useContext(ModalContext)
+  const { openModals, setModalOpen } = useContext(ModalContext)
   const { devMode } = useContext(DevModeContext)
 
   const buttons = [
     ...(devMode
       ? [
           {
             icon: 'code',
-            action: () => navigate('/developer')
+            action: () =>
+              setModalOpen('developer', !openModals.includes('developer'))
           }
         ]
       : []),
     {
       icon: 'apps',
-      action: () => setShortcutsEditorOpen(true)
+      action: () =>
+        setModalOpen('shortcuts', !openModals.includes('shortcuts'))
     },
     {
       icon: 'settings',
-      action: () => setSettingsOpen(true)
+      action: () =>
+        setModalOpen('settings', !openModals.includes('settings'))
     },
     {
       icon: 'close',

src/renderer/src/contexts/ModalContext.tsx

@@ -2,17 +2,13 @@ import { createContext, useEffect, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 
 interface ModalContextType {
-  settingsOpen: boolean
-  setSettingsOpen: (value: boolean) => void
-  shortcutsEditorOpen: boolean
-  setShortcutsEditorOpen: (value: boolean) => void
+  openModals: string[]
+  setModalOpen: (modalName: string, value: boolean) => void
 }
 
 const ModalContext = createContext<ModalContextType>({
-  settingsOpen: false,
-  setSettingsOpen: () => {},
-  shortcutsEditorOpen: false,
-  setShortcutsEditorOpen: () => {}
+  openModals: [],
+  setModalOpen: () => {}
 })
 
 interface ModalContextProviderProps {
@@ -21,41 +17,24 @@ interface ModalContextProviderProps {
 
 const ModalContextProvider = ({ children }: ModalContextProviderProps) => {
   const location = useLocation()
-  const [settingsOpen, _setSettingsOpen] = useState(false)
-  const [shortcutsEditorOpen, _setShortcutsEditorOpen] = useState(false)
+  const [openModals, setOpenModals] = useState<string[]>([])
 
-  function setSettingsOpen(value: boolean) {
-    if (value) {
-      _setShortcutsEditorOpen(false)
-      _setSettingsOpen(true)
-    } else {
-      _setSettingsOpen(false)
-    }
-  }
-
-  function setShortcutsEditorOpen(value: boolean) {
-    if (value) {
-      _setSettingsOpen(false)
-      _setShortcutsEditorOpen(true)
-    } else {
-      _setShortcutsEditorOpen(false)
-    }
+  const setModalOpen = (modalName: string, value: boolean) => {
+    setOpenModals(prev => {
+      if (value) return [modalName]
+      else return prev.filter(modal => modal !== modalName)
+    })
   }
 
   useEffect(() => {
-    if (settingsOpen || shortcutsEditorOpen) {
-      _setSettingsOpen(false)
-      _setShortcutsEditorOpen(false)
-    }
+    setOpenModals([])
   }, [location.pathname])
 
   return (
     <ModalContext.Provider
       value={{
-        settingsOpen,
-        setSettingsOpen,
-        shortcutsEditorOpen,
-        setShortcutsEditorOpen
+        openModals,
+        setModalOpen
       }}
     >
       {children}

src/renderer/src/pages/Developer/Developer.module.css

@@ -1,24 +1,117 @@
 .developer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  opacity: 0;
+  pointer-events: none;
+  transition: 200ms ease;
+}
+
+.developer[data-open='true'] {
+  opacity: 1;
+  backdrop-filter: blur(5px);
+  pointer-events: all;
+}
+
+.box {
+  width: 500px;
+  height: 300px;
+  padding: 15px;
+  background: #111;
+  border-radius: 5px;
+  transition: transform 200ms ease;
+  transform: scale(1.05);
+
   display: flex;
   flex-direction: column;
   gap: 10px;
-  align-items: flex-start;
-  margin: 20px;
-  animation: appear 500ms ease;
 }
 
-.buttons {
+.developer[data-open='true'] .box {
+  transform: scale(1);
+}
+
+.header .close {
+  all: unset;
+  cursor: pointer;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.section .status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+}
+
+.section .status .dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #444;
+}
+
+.section .status .dot[data-color='green'] {
+  background: #00ff00;
+}
+
+.section .status .dot[data-color='orange'] {
+  background: #ff8800;
+}
+
+.section .status .dot[data-color='red'] {
+  background: #ff0000;
+}
+
+.section .actions {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+
+.section .actions button {
+  padding: 6px 8px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.section .actions button[data-color='red'] {
+  background: #ff0000;
+}
+
+.bottomActions {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding: 15px;
   display: flex;
   gap: 10px;
 }
 
-@keyframes appear {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.bottomActions button {
+  padding: 6px 8px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
 }