Clicking on the data type in status bar takes you to settings.

CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## Unreleased
 
+### Added
+
+- Clicking on the data type in the bottom status bar takes you to the settings view where you can change the data type.
+- Added accordions to the terminal right-hand drawer, and added more controls such as quick port settings.
+- The terminal right-hand drawer now remembers if it was open or closed. This info is also saved in each profile. 
+
+### Changed
+
+- Improved the way app data is stored in local storage.
+
 ## [4.17.1] - 2024-06-11
 
 ### Changed

src/view/AppView.module.css

@@ -44,3 +44,8 @@
   10% { background-color: var(--blue-bright-color); box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset var(--blue-idle-color) 0 -1px 9px, var(--blue-idle-color) 0 2px 0; }
   to { background-color: var(--blue-idle-color); }
 }
+
+.onHover:hover {
+  cursor: pointer;
+  background-color: #404040;
+}

src/view/AppView.tsx

@@ -30,6 +30,7 @@ import LoggingView from './Logging/LoggingView';
 import { SelectionController, SelectionInfo } from '../model/SelectionController/SelectionController';
 import 'src/model/WindowTypes';
 import { DataType } from 'src/model/Settings/RxSettings/RxSettings';
+import { SettingsCategories } from 'src/model/Settings/Settings';
 
 // Create dark theme for MUI
 const darkTheme = createTheme({
@@ -284,7 +285,17 @@ const AppView = observer((props: Props) => {
             }}
           >
             {/* DATA TYPE */}
-            <div style={{ padding: '0 10px' }}>{app.settings.rxSettings.getDataTypeNameForToolbarDisplay()}</div>
+            <div
+              className={styles.onHover}
+              onClick={() => {
+                // Go to Settings -> RX Settings where the user can change the data type
+                app.setShownMainPane(MainPanes.SETTINGS);
+                app.settings.setActiveSettingsCategory(SettingsCategories.RX_SETTINGS);
+              }}
+              style={{ padding: '0 10px' }}
+            >
+              {app.settings.rxSettings.getDataTypeNameForToolbarDisplay()}
+            </div>
 
             {/* LOGGING ON/OFF */}
             <div style={{ backgroundColor: app.logging.isLogging ? '#388e3c' : '', padding: '0 10px' }}>{app.logging.isLogging ? 'Logging ON' : 'Logging OFF'}</div>