Add keyboard shortcuts for gear select and toggling frunk and trunk.

src/App.css

@@ -180,28 +180,6 @@
   font-weight: 400;
 }
 
-.gearSelect {
-  display: flex;
-  gap: 5px;
-}
-
-.gearSelectIcon {
-  color: #4e4e4e;
-  font-weight: 400;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.gearSelectIcon:hover {
-  background-color: #f0f0f0;
-}
-
-.gearSelectIcon.active {
-  color: #000000;
-  font-weight: 800;
-  transform: scale(0.95);
-}
-
 .appShelfContainer {
   position: relative;
   width: 100%;

src/App.js

@@ -14,6 +14,7 @@ import CarLock from './components/CarLock/CarLock';
 import VolumeControl from './components/VolumeControl/VolumeControl';
 import TemperatureControl from './components/TemperatureControl/TemperatureControl';
 import BatteryStatus from './components/BatteryStatus/BatteryStatus';
+import GearSelect from './components/GearSelect/GearSelect';
 import { useDots } from './utils/dots';
 import './App.css';
 
@@ -257,6 +258,28 @@ function App() {
     return () => clearTimeout(fallbackTimer);
   }, []);
 
+  // Add this new useEffect for keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      switch (event.key.toUpperCase()) {
+        case 'F':
+          handleToggleFrunk();
+          break;
+        case 'T':
+          handleToggleTrunk();
+          break;
+        default:
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);  // Empty dependency array means this effect runs once on mount
+
   return (
     <CarLockProvider>
       <UserProfileProvider>
@@ -273,17 +296,7 @@ function App() {
                 onResize={handleLeftPanelResize}
               >
                 <div className="carStatusIcons">
-                  <div className="gearSelect no-select">
-                    {['P', 'R', 'N', 'D'].map((gear) => (
-                      <span
-                        key={gear}
-                        className={`gearSelectIcon ${activeGear === gear ? 'active' : ''}`}
-                        onClick={() => handleGearSelect(gear)}
-                      >
-                        {gear}
-                      </span>
-                    ))}
-                  </div>
+                  <GearSelect activeGear={activeGear} onGearSelect={handleGearSelect} />
                   <BatteryStatus />
                 </div>
                 <div className="carModelStatus">

src/components/GearSelect/GearSelect.css

@@ -0,0 +1,21 @@
+.gearSelect {
+    display: flex;
+    gap: 5px;
+  }
+
+  .gearSelectIcon {
+    color: #4e4e4e;
+    font-weight: 400;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .gearSelectIcon:hover {
+    background-color: #f0f0f0;
+  }
+
+  .gearSelectIcon.active {
+    color: #000000;
+    font-weight: 800;
+    transform: scale(0.95);
+  }

src/components/GearSelect/GearSelect.js

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import './GearSelect.css';
+
+function GearSelect({ activeGear, onGearSelect }) {
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      const gear = event.key.toUpperCase();
+      if (['P', 'R', 'N', 'D'].includes(gear)) {
+        onGearSelect(gear);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onGearSelect]);
+
+  return (
+    <div className="gearSelect no-select">
+      {['P', 'R', 'N', 'D'].map((gear) => (
+        <span
+          key={gear}
+          className={`gearSelectIcon ${activeGear === gear ? 'active' : ''}`}
+          onClick={() => onGearSelect(gear)}
+        >
+          {gear}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export default GearSelect;