Mini mode :) Implement #2

src/app/app.tsx

@@ -5,22 +5,23 @@ import Sidebar from "./components/sidebar/sidebar";
 import ErrorDialog from "./components/error";
 import Bootstrap from "./components/bootstrap";
 
-import './style/app.scss';
+import "./style/app.scss";
+import Mini from "./components/mini";
 
 function App() {
-
   return (
     <>
       <Bootstrap />
       <Navbar />
       <ErrorDialog />
       <div className="structure">
+        <Mini />
         <RadioContainer />
         <Sidebar />
       </div>
     </>
   );
 }
 
-const root = createRoot(document.getElementById('root'));
+const root = createRoot(document.getElementById("root"));
 root.render(<App />);

src/app/components/bootstrap.tsx

@@ -28,7 +28,6 @@ const Bootsrap: React.FC = () => {
           return;
         }
         useRadioState.getState().addRadio(freq, station);
-        console.log("gain from callback")
         window.api.SetRadioGain(useSessionStore.getState().radioGain / 100);
       });
     });

src/app/components/mini.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import useRadioState from "../store/radioStore";
+
+const Mini: React.FC = () => {
+  const [radios] = useRadioState((state) => [state.radios]);
+
+  return (
+    <div className="box-container mini">
+      <div className="container">
+        {radios.filter((r) => r.lastReceivedCallsign).map((radio) => {
+          if (radio.rx) {
+            return (
+              <div
+                key={radio.frequency}
+                style={{ color: radio.currentlyTx ? "orange" : "inherit" }}
+              >
+                {radio.callsign}: {radio.lastReceivedCallsign}
+              </div>
+            );
+          }
+          return null;
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Mini;

src/app/components/navbar.tsx

@@ -43,9 +43,7 @@ const Navbar: React.FC = () => {
   useEffect(() => {
     window.api.getConfig().then((config) => {
       if (config) {
-        console.log("config says", config.radioGain);
         window.api.SetRadioGain((config.radioGain || 0.5)).then(() => {
-          console.log("gain from effect")
           setRadioGain(config.radioGain*100 || 50);
         });
       }
@@ -104,14 +102,13 @@ const Navbar: React.FC = () => {
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
     window.api.SetRadioGain(event.target.valueAsNumber / 100).then(() => {
-      console.log("gain from slider")
       setRadioGain(event.target.valueAsNumber);
     });
   };
 
   return (
     <>
-      <div className="d-flex flex-md-row align-items-center p-3 px-md-4 mb-3 custom-navbar">
+      <div className="d-flex flex-md-row align-items-center p-3 px-md-4 mb-3 custom-navbar hide-topbar">
         <Clock />
         <span
           className={clsx(

src/app/store/radioStore.ts

@@ -173,7 +173,6 @@ const useRadioState = create<RadioState>((set) => ({
     if (callsign === useSessionStore.getState().stationCallsign) {
       return; // Ignore our transmissions
     }
-    console.log(callsign);
     set((state) => ({
       radios: state.radios.map((radio) =>
         radio.frequency === frequency

src/app/style/app.scss

@@ -239,6 +239,12 @@ button:disabled {
   padding-right: 0;
 }
 
+@media only screen and (max-width: 300px) { 
+  .freq-box { 
+    display: none; 
+  } 
+}
+
 @media only screen and (max-width: 670px) { 
   .freq-box { 
     width: calc(100% - 50px);
@@ -364,4 +370,27 @@ select:disabled {
 
 .color-warning {
   color: $warning !important;
+}
+
+.mini {
+  display: none;
+  height: calc(100vh - 14px) !important;
+  width: calc(100% - 14px);
+  margin-right: 7px;
+  margin-left: 7px;
+  margin-top: 7px;
+  margin-bottom: 7px;
+  float: left;
+}
+
+@media only screen and (max-width: 300px) { 
+  .mini { 
+    display: block; 
+  } 
+}
+
+@media only screen and (max-width: 300px) { 
+  .hide-topbar { 
+    display: none !important; 
+  } 
 }

src/index.ts

@@ -86,7 +86,6 @@ const createWindow = (): void => {
 
   // Set the store CID
   TrackAudioAfv.SetCid(currentConfiguration.cid || "");
-  console.log("Current configuration gain", currentConfiguration.radioGain);
   TrackAudioAfv.SetRadioGain(currentConfiguration.radioGain || 0.5);
 
   version = TrackAudioAfv.GetVersion();
@@ -95,8 +94,8 @@ const createWindow = (): void => {
   mainWindow = new BrowserWindow({
     height: 660,
     width: 800,
-    minWidth: 265,
-    minHeight: 230,
+    minWidth: 200,
+    minHeight: 120,
     webPreferences: {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
     },
@@ -299,7 +298,6 @@ ipcMain.handle("setup-ptt", () => {
 });
 
 ipcMain.handle("set-radio-gain", (_, gain: number) => {
-  console.log("Setting gain to", gain)
   TrackAudioAfv.SetRadioGain(gain);
   currentConfiguration.radioGain = gain;
   saveConfig();