Add {donge_id}/settings

src/components/AppDrawer/index.jsx

@@ -39,6 +39,7 @@ const AppDrawer = ({
       onClose={toggleDrawerOff}
       variant={isPermanent ? 'permanent' : 'temporary'}
       PaperProps={{ style: { width, top: 'auto' } }}
+      ModalProps={{ keepMounted: true }}
     >
       <div ref={contentRef} className="flex flex-col h-full bg-[linear-gradient(180deg,#1B2023_0%,#111516_100%)]">
         {!isPermanent

src/components/Dashboard/DeviceList.jsx

@@ -11,6 +11,7 @@ import { devices as Devices } from '@commaai/api';
 
 import { updateDevices } from '../../actions';
 import Colors from '../../colors';
+import { getDeviceSettings } from '../../url';
 import { deviceNamePretty, deviceIsOnline, filterRegularClick, emptyDevice } from '../../utils';
 import VisibilityHandler from '../VisibilityHandler';
 
@@ -90,7 +91,7 @@ class DeviceList extends Component {
     super(props);
 
     this.state = {
-      settingsModalDongleId: null,
+      settingsModalDongleId: getDeviceSettings(window.location.pathname),
     };
 
     this.renderDevice = this.renderDevice.bind(this);
@@ -107,6 +108,9 @@ class DeviceList extends Component {
 
   handleClosedSettingsModal() {
     this.setState({ settingsModalDongleId: null });
+    if (window.location.pathname.endsWith('/settings')) {
+      window.history.replaceState(null, '', `/${this.props.selectedDevice}`);
+    }
   }
 
   async onVisible() {

src/url.js

@@ -46,4 +46,12 @@ export function getPrimeNav(pathname) {
     return true;
   }
   return false;
-}
+}
+
+export function getDeviceSettings(pathname) {
+  const parts = pathname.split('/').filter((m) => m.length);
+  if (parts.length === 2 && dongleIdRegex.test(parts[0]) && parts[1] === 'settings') {
+    return parts[0];
+  }
+  return null;
+}