From 16e77087f5832cd1f9378e6bd6dd98c142dfa8d0 Mon Sep 17 00:00:00 2001
From: Davide Passoni <d.passed@libero.it>
Date: Fri, 7 Mar 2025 11:12:17 +0100
Subject: [PATCH] fix: Removed unnecessary entries from sidebar and header,
 fixed non working main menu links

---
 frontend/react/src/ui/panels/header.tsx   | 57 +++++---------
 frontend/react/src/ui/panels/mainmenu.tsx | 96 +++--------------------
 frontend/react/src/ui/panels/sidebar.tsx  |  4 +-
 3 files changed, 35 insertions(+), 122 deletions(-)

diff --git a/frontend/react/src/ui/panels/header.tsx b/frontend/react/src/ui/panels/header.tsx
index 8f2f008b..e3891a3a 100644
--- a/frontend/react/src/ui/panels/header.tsx
+++ b/frontend/react/src/ui/panels/header.tsx
@@ -145,33 +145,6 @@ export function Header() {
               {IP}
             </div>
           </div>
-          <OlStateButton
-            icon={faDownload}
-            onClick={() => {
-              getApp().setState(OlympusState.IMPORT_EXPORT, ImportExportSubstate.EXPORT);
-            }}
-            checked={false}
-            tooltip={() => (
-              <OlExpandingTooltip
-                title="Export scenario from file"
-                content="Selectively export the current scenario to a file. This file can be shared with other users or imported later. Currently, only ground and naval units can be exported."
-              />
-            )}
-            tooltipRelativeToParent={true}
-          />
-          <OlStateButton
-            icon={faUpload}
-            onClick={() => {
-              getApp().setState(OlympusState.IMPORT_EXPORT, ImportExportSubstate.IMPORT);
-            }}
-            checked={false}
-            tooltip={() => (
-              <OlExpandingTooltip
-                title="Import scenario from file"
-                content="Import a scenario from a previously exported file. This will add the imported units to the current scenario, so make sure to delete any unwanted units before importing."
-              />
-            )}
-          />
           {savingSessionData ? (
             <div className="text-white">
               <FaSpinner className={`animate-spin text-2xl`} />
@@ -208,9 +181,16 @@ export function Header() {
             tooltip={() => (
               <OlExpandingTooltip
                 title="Lock/unlock protected units"
-                content={<><p>By default, Mission Editor units are protected from being commanded or deleted. This option allows you to unlock them, so they can be commanded or deleted like any other unit. </p>
-                  <p>If units are protected, you will still be able to control them, but a prompt will be shown to require your confirmation. </p>
-                  <p>Once a unit has been commanded, it will be unlocked and will become an Olympus unit, completely abandoning its previuos mission. </p></>}
+                content={
+                  <>
+                    <p>
+                      By default, Mission Editor units are protected from being commanded or deleted. This option allows you to unlock them, so they can be
+                      commanded or deleted like any other unit.{" "}
+                    </p>
+                    <p>If units are protected, you will still be able to control them, but a prompt will be shown to require your confirmation. </p>
+                    <p>Once a unit has been commanded, it will be unlocked and will become an Olympus unit, completely abandoning its previuos mission. </p>
+                  </>
+                }
               />
             )}
           />
@@ -223,9 +203,16 @@ export function Header() {
             tooltip={() => (
               <OlExpandingTooltip
                 title="Enable/disable audio"
-                content={<><p>If this option is enabled, you will be able to access the radio and audio features of DCS Olympus. </p>
-                  <p>For this to work, a SRS Server need to be installed and running on the same machine on which the DCS Olympus server is running.</p>
-                  <p>For security reasons, this feature will only work if a secure connection (i.e., using https) is established with the server. It is also suggested to use Google Chrome for optimal compatibility. </p></>}
+                content={
+                  <>
+                    <p>If this option is enabled, you will be able to access the radio and audio features of DCS Olympus. </p>
+                    <p>For this to work, a SRS Server need to be installed and running on the same machine on which the DCS Olympus server is running.</p>
+                    <p>
+                      For security reasons, this feature will only work if a secure connection (i.e., using https) is established with the server. It is also
+                      suggested to use Google Chrome for optimal compatibility.{" "}
+                    </p>
+                  </>
+                }
               />
             )}
             icon={faVolumeHigh}
@@ -368,10 +355,6 @@ export function Header() {
             );
           })}
         </OlDropdown>
-        <FaQuestionCircle
-          onClick={() => getApp().setState(OlympusState.TRAINING)}
-          className={`cursor-pointer text-2xl text-white`}
-        />
       </div>
       {!scrolledRight && (
         <FaChevronRight
diff --git a/frontend/react/src/ui/panels/mainmenu.tsx b/frontend/react/src/ui/panels/mainmenu.tsx
index 97dd741e..d0a69492 100644
--- a/frontend/react/src/ui/panels/mainmenu.tsx
+++ b/frontend/react/src/ui/panels/mainmenu.tsx
@@ -1,20 +1,9 @@
 import React from "react";
 import { Menu } from "./components/menu";
-import {
-  faArrowRightLong,
-  faCheckCircle,
-  faDatabase,
-  faExternalLink,
-  faExternalLinkAlt,
-  faFile,
-  faFileAlt,
-  faFileExport,
-  faFileImport,
-  faTimesCircle,
-} from "@fortawesome/free-solid-svg-icons";
+import { faArrowRightLong, faCheckCircle, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { VERSION } from "../../olympusapp";
-import { faGithub } from "@fortawesome/free-brands-svg-icons";
+import { getApp, VERSION } from "../../olympusapp";
+import { ImportExportSubstate, OlympusState } from "../../constants/constants";
 
 export function MainMenu(props: { open: boolean; onClose: () => void; children?: JSX.Element | JSX.Element[] }) {
   return (
@@ -46,6 +35,7 @@ export function MainMenu(props: { open: boolean; onClose: () => void; children?:
             dark:hover:bg-olympus-500
             hover:bg-gray-900/10
           `}
+          onClick={() => window.open("https://github.com/Pax1601/DCSOlympus")}
         >
           {/*<FontAwesomeIcon icon={faGithub} className="my-auto w-4 text-gray-800 dark:text-gray-500" />*/}
           View GitHub Repo
@@ -74,6 +64,7 @@ export function MainMenu(props: { open: boolean; onClose: () => void; children?:
             dark:hover:bg-olympus-500
             hover:bg-gray-900/10
           `}
+          onClick={() => window.open("https://github.com/Pax1601/DCSOlympus/wiki")}
         >
           {/*<FontAwesomeIcon icon={faFile} className="my-auto w-4  text-gray-800 dark:text-gray-500" />*/}
           View User Guide
@@ -101,6 +92,7 @@ export function MainMenu(props: { open: boolean; onClose: () => void; children?:
             dark:border-olympus-500
           `}
         ></hr>
+
         <div
           className={`
             group flex cursor-pointer select-none content-center gap-3
@@ -108,48 +100,9 @@ export function MainMenu(props: { open: boolean; onClose: () => void; children?:
             dark:hover:bg-olympus-500
             hover:bg-gray-900/10
           `}
-        >
-          {/*<FontAwesomeIcon icon={faDatabase} className="my-auto w-4 text-gray-800 dark:text-gray-500" />*/}
-          Open Olympus Manager
-          <div className={`ml-auto flex items-center`}>
-            <FontAwesomeIcon
-              icon={faArrowRightLong}
-              className={`
-                my-auto px-2 text-right text-gray-800 transition-transform
-                dark:text-olympus-50
-                group-hover:translate-x-2
-              `}
-            />
-          </div>
-        </div>
-        <div
-          className={`
-            group flex cursor-pointer select-none content-center gap-3
-            rounded-md p-2
-            dark:hover:bg-olympus-500
-            hover:bg-gray-900/10
-          `}
-        >
-          {/*<FontAwesomeIcon icon={faDatabase} className="my-auto w-4 text-gray-800 dark:text-gray-500" />*/}
-          Database Manager
-          <div className={`ml-auto flex items-center`}>
-            <FontAwesomeIcon
-              icon={faArrowRightLong}
-              className={`
-                my-auto px-2 text-right text-gray-800 transition-transform
-                dark:text-olympus-50
-                group-hover:translate-x-2
-              `}
-            />
-          </div>
-        </div>
-        <div
-          className={`
-            group flex cursor-pointer select-none content-center gap-3
-            rounded-md p-2
-            dark:hover:bg-olympus-500
-            hover:bg-gray-900/10
-          `}
+          onClick={() => {
+            getApp().setState(OlympusState.IMPORT_EXPORT, ImportExportSubstate.EXPORT);
+          }}
         >
           {/*<FontAwesomeIcon icon={faFileExport} className="my-auto w-4 text-gray-800 dark:text-gray-500" />*/}
           Export to file
@@ -171,6 +124,10 @@ export function MainMenu(props: { open: boolean; onClose: () => void; children?:
             dark:hover:bg-olympus-500
             hover:bg-gray-900/10
           `}
+
+          onClick={() => {
+            getApp().setState(OlympusState.IMPORT_EXPORT, ImportExportSubstate.IMPORT);
+          }}
         >
           {/*<FontAwesomeIcon icon={faFileImport} className="my-auto w-4 text-gray-800 dark:text-gray-500" />*/}
           Import from file
@@ -185,33 +142,6 @@ export function MainMenu(props: { open: boolean; onClose: () => void; children?:
             />
           </div>
         </div>
-        <hr
-          className={`
-            m-2 my-1 w-auto border-[1px] bg-gray-700
-            dark:border-olympus-500
-          `}
-        ></hr>
-        <div
-          className={`
-            group flex cursor-pointer select-none content-center gap-3
-            rounded-md p-2
-            dark:hover:bg-olympus-500
-            hover:bg-gray-900/10
-          `}
-        >
-          {/*<FontAwesomeIcon icon={faTimesCircle} className="my-auto w-4 text-gray-800 dark:text-gray-500" />*/}
-          Close Olympus
-          <div className={`ml-auto flex items-center`}>
-            <FontAwesomeIcon
-              icon={faArrowRightLong}
-              className={`
-                my-auto px-2 text-right text-gray-800 transition-transform
-                dark:text-olympus-50
-                group-hover:translate-x-2
-              `}
-            />
-          </div>
-        </div>
       </div>
     </Menu>
   );
diff --git a/frontend/react/src/ui/panels/sidebar.tsx b/frontend/react/src/ui/panels/sidebar.tsx
index 9b4b99c7..ae194330 100644
--- a/frontend/react/src/ui/panels/sidebar.tsx
+++ b/frontend/react/src/ui/panels/sidebar.tsx
@@ -101,10 +101,10 @@ export function SideBar() {
       <div className="flex w-16 flex-wrap content-end justify-center p-4">
         <div className={`flex flex-col items-center justify-center gap-2.5`}>
           <OlStateButton
-            onClick={() => window.open("https://github.com/Pax1601/DCSOlympus/wiki")}
+            onClick={() => getApp().setState(OlympusState.TRAINING)}
             checked={false}
             icon={faQuestionCircle}
-            tooltip="Open user guide on separate window"
+            tooltip="Open Quick Start Guide"
             tooltipPosition="side"
           ></OlStateButton>
           <OlStateButton