Merge pull request #78 from neilenns/neilenns/issue76

Add restore button to mini mode

src/app/components/MiniModeToggleButton.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback } from "react";
+import { Fullscreen, FullscreenExit } from "react-bootstrap-icons";
+
+interface MiniModeToggleButtonProps {
+  showRestoreButton: boolean;
+}
+
+const MiniModeToggleButton: React.FC<MiniModeToggleButtonProps> = ({
+  showRestoreButton,
+}) => {
+  const toggleMiniMode = useCallback(() => {
+    window.api.toggleMiniMode().catch((error: unknown) => {
+      console.error(error);
+    });
+  }, []);
+
+  return (
+    <button
+      className="btn btn-primary m-2"
+      style={{ lineHeight: 0, fontSize: "14px" }}
+      onClick={toggleMiniMode}
+    >
+      {showRestoreButton ? (
+        <Fullscreen
+          title={"Switch to large mode"}
+          style={{ strokeWidth: "0.5px", stroke: "white" }}
+        />
+      ) : (
+        <FullscreenExit
+          title={"Switch to mini mode"}
+          style={{ strokeWidth: "0.5px", stroke: "white" }}
+        />
+      )}
+    </button>
+  );
+};
+
+export default MiniModeToggleButton;

src/app/components/mini.tsx

@@ -1,11 +1,21 @@
-import React from "react";
+import React, { useState } from "react";
 import useRadioState from "../store/radioStore";
+import MiniModeToggleButton from "./MiniModeToggleButton";
 
 const Mini: React.FC = () => {
   const [radios] = useRadioState((state) => [state.radios]);
+  const [isHovered, setIsHovered] = useState(false);
 
   return (
-    <div className="box-container mini">
+    <div
+      className="box-container mini"
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}
+    >
       <div className="container">
         {radios
           .filter((r) => r.rx)
@@ -15,7 +25,9 @@ const Mini: React.FC = () => {
                 <span
                   style={{ color: radio.currentlyTx ? "orange" : "inherit" }}
                 >
-                  {radio.callsign !== "MANUAL" ? radio.callsign : radio.humanFrequency}
+                  {radio.callsign !== "MANUAL"
+                    ? radio.callsign
+                    : radio.humanFrequency}
                 </span>
                 :{" "}
                 <span
@@ -27,6 +39,11 @@ const Mini: React.FC = () => {
             );
           })}
       </div>
+      <div
+        className={`exit-mini-mode-container ${isHovered ? "visible" : "hidden"}`}
+      >
+        <MiniModeToggleButton showRestoreButton={true} />
+      </div>
     </div>
   );
 };

src/app/components/navbar.tsx

@@ -11,7 +11,7 @@ import {
 } from "../helpers/CallsignHelper";
 import useUtilStore from "../store/utilStore";
 import { Configuration } from "../../config";
-import { FullscreenExit } from "react-bootstrap-icons";
+import MiniModeToggleButton from "./MiniModeToggleButton";
 
 const Navbar: React.FC = () => {
   const [showModal, setShowModal] = useState(false);
@@ -205,16 +205,7 @@ const Navbar: React.FC = () => {
           onWheel={handleRadioGainMouseWheel}
           value={radioGain}
         ></input>
-        <button
-          className="btn btn-primary m-2 hide-gain-value"
-          style={{ lineHeight: 0, fontSize: "14px" }}
-          onClick={() => void window.api.toggleMiniMode()}
-        >
-          <FullscreenExit
-            title={"Mini mode"}
-            style={{ strokeWidth: "0.5px", stroke: "white" }}
-          />
-        </button>
+        <MiniModeToggleButton showRestoreButton={false} />
         {platform === "linux" && (
           <button
             className="btn btn-danger m-2 hide-gain-value"

src/app/style/app.scss

@@ -400,3 +400,20 @@ select:disabled {
     display: none !important;
   }
 }
+
+.exit-mini-mode-container
+{
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: inline-block;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.exit-mini-mode-container.visible {
+  opacity: 1;
+}
+
+.exit-mini-mode-container.hidden {
+  opacity: 0;
+}