From 917a969fc3364b87524c8ff2c37d15ec24fcdb69 Mon Sep 17 00:00:00 2001
From: Ben Gilbert <bensgilbert@outlook.com>
Date: Mon, 10 Nov 2025 03:28:07 +0000
Subject: [PATCH 1/8] fix modifying param (redux)

---
 gcs/src/components/params/valueInput.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/gcs/src/components/params/valueInput.jsx b/gcs/src/components/params/valueInput.jsx
index 1b8bfa7fc..99ffcfd47 100644
--- a/gcs/src/components/params/valueInput.jsx
+++ b/gcs/src/components/params/valueInput.jsx
@@ -76,12 +76,12 @@ export default function ValueInput({ index, paramDef, className }) {
     } else {
       // Otherwise add it to modified params
       dispatch(
-        appendModifiedParams({
+        appendModifiedParams([{
           param_id: param.param_id,
           param_value: value,
           param_type: param.param_type,
           initial_value: param.param_value,
-        }),
+        }]),
       )
     }
   }

From ec80cce8f985f8d71154868589f7bdf735f7bb87 Mon Sep 17 00:00:00 2001
From: Ben Gilbert <bensgilbert@outlook.com>
Date: Mon, 10 Nov 2025 03:31:42 +0000
Subject: [PATCH 2/8] refactor params styling

---
 gcs/src/components/params/paramsToolbar.jsx | 130 +++-----------
 gcs/src/components/params/rowItem.jsx       |   8 +-
 gcs/src/params.jsx                          | 180 +++++++++++++++-----
 3 files changed, 164 insertions(+), 154 deletions(-)

diff --git a/gcs/src/components/params/paramsToolbar.jsx b/gcs/src/components/params/paramsToolbar.jsx
index 84a455e84..8b8fdcf47 100644
--- a/gcs/src/components/params/paramsToolbar.jsx
+++ b/gcs/src/components/params/paramsToolbar.jsx
@@ -8,13 +8,9 @@ rebooting the autopilot
 // 3rd party imports
 import { Button, TextInput, Tooltip } from "@mantine/core"
 import {
-  IconDownload,
   IconEye,
-  IconPencil,
   IconPower,
-  IconRefresh,
-  IconTool,
-  IconUpload,
+  IconTool
 } from "@tabler/icons-react"
 
 // Styling imports
@@ -25,108 +21,52 @@ const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 // Redux
 import { useDispatch, useSelector } from "react-redux"
 import {
-  emitExportParamsToFile,
   emitRebootAutopilot,
-  emitRefreshParams,
-  emitSetMultipleParams,
   resetParamState,
   selectModifiedParams,
   selectParamSearchValue,
   selectShowModifiedParams,
   setAutoPilotRebootModalOpen,
-  setFetchingVars,
-  setModifiedParams,
-  setParams,
   setParamSearchValue,
-  setShownParams,
-  toggleShowModifiedParams,
+  toggleShowModifiedParams
 } from "../../redux/slices/paramsSlice.js"
 
-export default function ParamsToolbar({ loadParamsFromFile }) {
+export default function ParamsToolbar() {
   const dispatch = useDispatch()
-  const modifiedParams = useSelector(selectModifiedParams)
   const showModifiedParams = useSelector(selectShowModifiedParams)
   const searchValue = useSelector(selectParamSearchValue)
 
-  function refreshCallback() {
-    dispatch(setParams([]))
-    dispatch(setModifiedParams([]))
-    dispatch(setShownParams([]))
-    dispatch(emitRefreshParams())
-    dispatch(setFetchingVars(true))
-  }
-
   function rebootCallback() {
     dispatch(emitRebootAutopilot())
     dispatch(setAutoPilotRebootModalOpen(true))
     dispatch(resetParamState())
   }
 
-  async function saveParamsToFile() {
-    const options = {
-      title: "Save parameters to a file",
-      filters: [
-        { name: "Param File", extensions: ["param"] },
-        { name: "All Files", extensions: ["*"] },
-      ],
-    }
-
-    const result = await window.ipcRenderer.invoke(
-      "app:get-save-file-path",
-      options,
-    )
-
-    if (!result.canceled) {
-      dispatch(
-        emitExportParamsToFile({
-          filePath: result.filePath,
-        }),
-      )
-    }
-  }
-
   return (
-    <div className="flex justify-center space-x-4">
-      <Tooltip
-        label={showModifiedParams ? "Show all params" : "Show modified params"}
-        position="bottom"
-      >
-        <Button
-          size="sm"
-          onClick={() => dispatch(toggleShowModifiedParams())}
-          color={tailwindColors.orange[600]}
+    <div className="flex justify-between gap-4 m-4">
+      <div className="grow flex gap-4">
+        <Tooltip
+          label={showModifiedParams ? "Show all params" : "Show modified params"}
+          position="bottom"
         >
-          {showModifiedParams ? <IconEye size={14} /> : <IconTool size={14} />}
-        </Button>
-      </Tooltip>
-
-      <TextInput
-        className="w-1/3"
-        placeholder="Search by parameter name"
-        value={searchValue}
-        onChange={(event) =>
-          dispatch(setParamSearchValue(event.currentTarget.value))
-        }
-      />
-
-      <Button
-        size="sm"
-        rightSection={<IconPencil size={14} />}
-        disabled={!modifiedParams.length}
-        onClick={() => dispatch(emitSetMultipleParams(modifiedParams))}
-        color={tailwindColors.green[600]}
-      >
-        Write params
-      </Button>
-
-      <Button
-        size="sm"
-        rightSection={<IconRefresh size={14} />}
-        onClick={refreshCallback}
-        color={tailwindColors.blue[600]}
-      >
-        Refresh params
-      </Button>
+          <Button
+            size="sm"
+            onClick={() => dispatch(toggleShowModifiedParams())}
+            color={tailwindColors.orange[600]}
+          >
+            {showModifiedParams ? <IconEye size={14} /> : <IconTool size={14} />}
+          </Button>
+        </Tooltip>
+
+        <TextInput
+          className="w-1/3"
+          placeholder="Search by parameter name"
+          value={searchValue}
+          onChange={(event) =>
+            dispatch(setParamSearchValue(event.currentTarget.value))
+          }
+        />
+      </div>
 
       <Button
         size="sm"
@@ -136,24 +76,6 @@ export default function ParamsToolbar({ loadParamsFromFile }) {
       >
         Reboot FC
       </Button>
-
-      <Button
-        size="sm"
-        rightSection={<IconDownload size={14} />}
-        onClick={saveParamsToFile}
-        color={tailwindColors.blue[600]}
-      >
-        Save params to file
-      </Button>
-
-      <Button
-        size="sm"
-        rightSection={<IconUpload size={14} />}
-        onClick={loadParamsFromFile}
-        color={tailwindColors.blue[600]}
-      >
-        Load params from file
-      </Button>
     </div>
   )
 }
diff --git a/gcs/src/components/params/rowItem.jsx b/gcs/src/components/params/rowItem.jsx
index 256fe3ac1..aa15263a4 100644
--- a/gcs/src/components/params/rowItem.jsx
+++ b/gcs/src/components/params/rowItem.jsx
@@ -59,15 +59,17 @@ const RowItem = memo(({ index, style }) => {
   }, [aircraftType, param])
 
   return (
-    <div style={style} className="flex flex-row items-center space-x-4">
-      <div className="flex flex-row w-2/12 gap-x-2">
+    <div
+      style={style}
+      className="flex items-center px-8 gap-6 border-t border-neutral-700"
+    >
+      <div className="flex items-center w-2/12 gap-x-2">
         <Tooltip label={paramDef?.DisplayName ?? null} position="top-start">
           <p>{param.param_id}</p>
         </Tooltip>
 
         {paramDef?.Values && paramDef?.Range && (
           <Tooltip
-            className="self-center"
             label={
               <div className="text-wrap max-w-80">
                 {Object.keys(paramDef?.Values).map((key) => {
diff --git a/gcs/src/params.jsx b/gcs/src/params.jsx
index 99544d848..236c6d9fa 100644
--- a/gcs/src/params.jsx
+++ b/gcs/src/params.jsx
@@ -8,8 +8,9 @@
 import { useEffect } from "react"
 
 // 3rd Party Imports
-import { Button, Progress } from "@mantine/core"
+import { Button, Divider, Progress } from "@mantine/core"
 import { useDebouncedValue } from "@mantine/hooks"
+import { ResizableBox } from "react-resizable"
 import AutoSizer from "react-virtualized-auto-sizer"
 import { FixedSizeList } from "react-window"
 
@@ -27,7 +28,9 @@ import { EXCLUDE_PARAMS_LOAD } from "./helpers/mavlinkConstants.js"
 import { showErrorNotification } from "./helpers/notification.js"
 import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice.js"
 import {
+  emitExportParamsToFile,
   emitRefreshParams,
+  emitSetMultipleParams,
   resetParamState,
   selectFetchingVars,
   selectFetchingVarsProgress,
@@ -42,6 +45,8 @@ import {
   setLoadedFileName,
   setLoadedParams,
   setLoadParamsFileModalOpen,
+  setModifiedParams,
+  setParams,
   setShownParams,
 } from "./redux/slices/paramsSlice.js"
 
@@ -105,6 +110,37 @@ export default function Params() {
     dispatch(setHasFetchedOnce(true))
   }
 
+  function refreshCallback() {
+    dispatch(setParams([]))
+    dispatch(setModifiedParams([]))
+    dispatch(setShownParams([]))
+    dispatch(emitRefreshParams())
+    dispatch(setFetchingVars(true))
+  }
+
+  async function saveParamsToFile() {
+    const options = {
+      title: "Save parameters to a file",
+      filters: [
+        { name: "Param File", extensions: ["param"] },
+        { name: "All Files", extensions: ["*"] },
+      ],
+    }
+
+    const result = await window.ipcRenderer.invoke(
+      "app:get-save-file-path",
+      options,
+    )
+
+    if (!result.canceled) {
+      dispatch(
+        emitExportParamsToFile({
+          filePath: result.filePath,
+        }),
+      )
+    }
+  }
+
   async function loadParamsFromFile() {
     const result = await window.ipcRenderer.invoke(
       "params:load-params-from-file",
@@ -150,8 +186,7 @@ export default function Params() {
       dispatch(setLoadParamsFileModalOpen(true))
     } else {
       showErrorNotification(
-        `Error loading params from file: ${
-          result.error || "Please try again."
+        `Error loading params from file: ${result.error || "Please try again."
         }`,
       )
     }
@@ -163,51 +198,102 @@ export default function Params() {
       <LoadParamsFileModal />
 
       {connected ? (
-        <>
-          {fetchingVars && (
-            <div className="my-auto">
-              {fetchingVarsProgress.param_id && (
-                <p className="text-center my-4">
-                  Fetched {fetchingVarsProgress.param_id}
-                </p>
-              )}
-              <Progress
-                radius="xs"
-                value={fetchingVarsProgress.progress}
-                className="w-1/3 mx-auto my-auto"
-              />
-            </div>
-          )}
-
-          {Object.keys(params).length > 0 && !fetchingVars && (
-            <div className="w-full h-full contents">
-              <ParamsToolbar loadParamsFromFile={loadParamsFromFile} />
-
-              <div className="h-full w-2/3 mx-auto">
-                <AutoSizer>
-                  {({ height, width }) => (
-                    <FixedSizeList
-                      height={height}
-                      width={width}
-                      itemSize={120}
-                      itemCount={shownParams.length}
-                    >
-                      {Row}
-                    </FixedSizeList>
-                  )}
-                </AutoSizer>
+        <div className="flex flex-col h-screen overflow-hidden">
+          <div className="flex flex-1 overflow-hidden">
+            {/* Resizable Sidebar */}
+            <ResizableBox
+              width={200}
+              height={Infinity}
+              minConstraints={[200, Infinity]}
+              maxConstraints={[600, Infinity]}
+              resizeHandles={["e"]}
+              axis="x"
+              handle={
+                <div className="w-2 h-full bg-falcongrey-900 hover:bg-falconred-500 cursor-col-resize absolute right-0 top-0 z-10"></div>
+              }
+              className="relative bg-falcongrey-800 overflow-y-auto"
+            >
+              <div className="flex flex-col gap-4 p-4">
+                <div className="flex flex-col gap-4">
+                  <Button
+                    onClick={refreshCallback}
+                    className="grow"
+                  >
+                    Refresh params
+                  </Button>
+                  <Button
+                    disabled={!modifiedParams.length}
+                    onClick={() => dispatch(emitSetMultipleParams(modifiedParams))}
+                    className="grow"
+                  >
+                    Write params
+                  </Button>
+                </div>
+                <Divider />
+                <div className="flex flex-col gap-4">
+                  <Button
+                    onClick={saveParamsToFile}
+                    className="grow"
+                  >
+                    Save to file
+                  </Button>
+                  <Button
+                    onClick={loadParamsFromFile}
+                    className="grow"
+                  >
+                    Load from file
+                  </Button>
+                </div>
               </div>
-            </div>
-          )}
-          {Object.keys(params).length === 0 && !fetchingVars && (
-            <div className="flex flex-col my-auto mx-auto">
-              <p className="text-center my-4">
-                No parameters found, try fetching them again.
-              </p>
-              <Button onClick={() => fetchParams()}>Fetch Params</Button>
-            </div>
-          )}
-        </>
+            </ResizableBox>
+
+            {/* Main content area */}
+            <div className="flex-1 flex flex-col overflow-hidden">
+              {fetchingVars && (
+                <div className="my-auto">
+                  {fetchingVarsProgress.param_id && (
+                    <p className="text-center my-4">
+                      Fetched {fetchingVarsProgress.param_id}
+                    </p>
+                  )}
+                  <Progress
+                    radius="xs"
+                    value={fetchingVarsProgress.progress}
+                    className="w-1/3 mx-auto my-auto"
+                  />
+                </div>
+              )}
+
+              {Object.keys(params).length > 0 && !fetchingVars && (
+                <div className="h-full contents">
+                  <ParamsToolbar loadParamsFromFile={loadParamsFromFile} />
+
+                  <div className="h-full">
+                    <AutoSizer>
+                      {({ height, width }) => (
+                        <FixedSizeList
+                          height={height}
+                          width={width}
+                          itemSize={120}
+                          itemCount={shownParams.length}
+                        >
+                          {Row}
+                        </FixedSizeList>
+                      )}
+                    </AutoSizer>
+                  </div>
+                </div>
+              )}
+              {Object.keys(params).length === 0 && !fetchingVars && (
+                <div className="flex flex-col my-auto mx-auto">
+                  <p className="text-center my-4">
+                    No parameters found, try fetching them again.
+                  </p>
+                  <Button onClick={() => fetchParams()}>Fetch Params</Button>
+                </div>
+              )}</div>
+          </div>
+        </div>
       ) : (
         <NoDroneConnected tab="params" />
       )}

From 179140d7579cdcaa8ad82acc628daf6a73a41118 Mon Sep 17 00:00:00 2001
From: Ben Gilbert <bensgilbert@outlook.com>
Date: Mon, 10 Nov 2025 03:33:34 +0000
Subject: [PATCH 3/8] formatting

---
 gcs/src/components/params/paramsToolbar.jsx | 19 ++++++++--------
 gcs/src/components/params/valueInput.jsx    | 14 +++++++-----
 gcs/src/params.jsx                          | 25 +++++++++------------
 3 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/gcs/src/components/params/paramsToolbar.jsx b/gcs/src/components/params/paramsToolbar.jsx
index 8b8fdcf47..2fbc5391a 100644
--- a/gcs/src/components/params/paramsToolbar.jsx
+++ b/gcs/src/components/params/paramsToolbar.jsx
@@ -7,11 +7,7 @@ rebooting the autopilot
 
 // 3rd party imports
 import { Button, TextInput, Tooltip } from "@mantine/core"
-import {
-  IconEye,
-  IconPower,
-  IconTool
-} from "@tabler/icons-react"
+import { IconEye, IconPower, IconTool } from "@tabler/icons-react"
 
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
@@ -23,12 +19,11 @@ import { useDispatch, useSelector } from "react-redux"
 import {
   emitRebootAutopilot,
   resetParamState,
-  selectModifiedParams,
   selectParamSearchValue,
   selectShowModifiedParams,
   setAutoPilotRebootModalOpen,
   setParamSearchValue,
-  toggleShowModifiedParams
+  toggleShowModifiedParams,
 } from "../../redux/slices/paramsSlice.js"
 
 export default function ParamsToolbar() {
@@ -46,7 +41,9 @@ export default function ParamsToolbar() {
     <div className="flex justify-between gap-4 m-4">
       <div className="grow flex gap-4">
         <Tooltip
-          label={showModifiedParams ? "Show all params" : "Show modified params"}
+          label={
+            showModifiedParams ? "Show all params" : "Show modified params"
+          }
           position="bottom"
         >
           <Button
@@ -54,7 +51,11 @@ export default function ParamsToolbar() {
             onClick={() => dispatch(toggleShowModifiedParams())}
             color={tailwindColors.orange[600]}
           >
-            {showModifiedParams ? <IconEye size={14} /> : <IconTool size={14} />}
+            {showModifiedParams ? (
+              <IconEye size={14} />
+            ) : (
+              <IconTool size={14} />
+            )}
           </Button>
         </Tooltip>
 
diff --git a/gcs/src/components/params/valueInput.jsx b/gcs/src/components/params/valueInput.jsx
index 99ffcfd47..5ebba3e20 100644
--- a/gcs/src/components/params/valueInput.jsx
+++ b/gcs/src/components/params/valueInput.jsx
@@ -76,12 +76,14 @@ export default function ValueInput({ index, paramDef, className }) {
     } else {
       // Otherwise add it to modified params
       dispatch(
-        appendModifiedParams([{
-          param_id: param.param_id,
-          param_value: value,
-          param_type: param.param_type,
-          initial_value: param.param_value,
-        }]),
+        appendModifiedParams([
+          {
+            param_id: param.param_id,
+            param_value: value,
+            param_type: param.param_type,
+            initial_value: param.param_value,
+          },
+        ]),
       )
     }
   }
diff --git a/gcs/src/params.jsx b/gcs/src/params.jsx
index 236c6d9fa..9b1bbe5cb 100644
--- a/gcs/src/params.jsx
+++ b/gcs/src/params.jsx
@@ -186,7 +186,8 @@ export default function Params() {
       dispatch(setLoadParamsFileModalOpen(true))
     } else {
       showErrorNotification(
-        `Error loading params from file: ${result.error || "Please try again."
+        `Error loading params from file: ${
+          result.error || "Please try again."
         }`,
       )
     }
@@ -215,15 +216,14 @@ export default function Params() {
             >
               <div className="flex flex-col gap-4 p-4">
                 <div className="flex flex-col gap-4">
-                  <Button
-                    onClick={refreshCallback}
-                    className="grow"
-                  >
+                  <Button onClick={refreshCallback} className="grow">
                     Refresh params
                   </Button>
                   <Button
                     disabled={!modifiedParams.length}
-                    onClick={() => dispatch(emitSetMultipleParams(modifiedParams))}
+                    onClick={() =>
+                      dispatch(emitSetMultipleParams(modifiedParams))
+                    }
                     className="grow"
                   >
                     Write params
@@ -231,16 +231,10 @@ export default function Params() {
                 </div>
                 <Divider />
                 <div className="flex flex-col gap-4">
-                  <Button
-                    onClick={saveParamsToFile}
-                    className="grow"
-                  >
+                  <Button onClick={saveParamsToFile} className="grow">
                     Save to file
                   </Button>
-                  <Button
-                    onClick={loadParamsFromFile}
-                    className="grow"
-                  >
+                  <Button onClick={loadParamsFromFile} className="grow">
                     Load from file
                   </Button>
                 </div>
@@ -291,7 +285,8 @@ export default function Params() {
                   </p>
                   <Button onClick={() => fetchParams()}>Fetch Params</Button>
                 </div>
-              )}</div>
+              )}
+            </div>
           </div>
         </div>
       ) : (

From 5d1c83cfc2cc8f7d5388ef6103e720e1153e615d Mon Sep 17 00:00:00 2001
From: Ben Gilbert <bensgilbert@outlook.com>
Date: Mon, 10 Nov 2025 14:52:51 +0000
Subject: [PATCH 4/8] remove unneeded loadParamsFromFile prop

---
 gcs/src/params.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gcs/src/params.jsx b/gcs/src/params.jsx
index 9b1bbe5cb..0f48a52cf 100644
--- a/gcs/src/params.jsx
+++ b/gcs/src/params.jsx
@@ -260,7 +260,7 @@ export default function Params() {
 
               {Object.keys(params).length > 0 && !fetchingVars && (
                 <div className="h-full contents">
-                  <ParamsToolbar loadParamsFromFile={loadParamsFromFile} />
+                  <ParamsToolbar />
 
                   <div className="h-full">
                     <AutoSizer>

From 0ff2c9782267526c20d70cb164226b5585688af6 Mon Sep 17 00:00:00 2001
From: Ben Gilbert <bensgilbert@outlook.com>
Date: Mon, 10 Nov 2025 14:53:31 +0000
Subject: [PATCH 5/8] hide left menu when loading params

---
 gcs/src/params.jsx | 80 +++++++++++++++++++++++-----------------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/gcs/src/params.jsx b/gcs/src/params.jsx
index 0f48a52cf..4dd268eff 100644
--- a/gcs/src/params.jsx
+++ b/gcs/src/params.jsx
@@ -186,8 +186,7 @@ export default function Params() {
       dispatch(setLoadParamsFileModalOpen(true))
     } else {
       showErrorNotification(
-        `Error loading params from file: ${
-          result.error || "Please try again."
+        `Error loading params from file: ${result.error || "Please try again."
         }`,
       )
     }
@@ -201,45 +200,46 @@ export default function Params() {
       {connected ? (
         <div className="flex flex-col h-screen overflow-hidden">
           <div className="flex flex-1 overflow-hidden">
-            {/* Resizable Sidebar */}
-            <ResizableBox
-              width={200}
-              height={Infinity}
-              minConstraints={[200, Infinity]}
-              maxConstraints={[600, Infinity]}
-              resizeHandles={["e"]}
-              axis="x"
-              handle={
-                <div className="w-2 h-full bg-falcongrey-900 hover:bg-falconred-500 cursor-col-resize absolute right-0 top-0 z-10"></div>
-              }
-              className="relative bg-falcongrey-800 overflow-y-auto"
-            >
-              <div className="flex flex-col gap-4 p-4">
-                <div className="flex flex-col gap-4">
-                  <Button onClick={refreshCallback} className="grow">
-                    Refresh params
-                  </Button>
-                  <Button
-                    disabled={!modifiedParams.length}
-                    onClick={() =>
-                      dispatch(emitSetMultipleParams(modifiedParams))
-                    }
-                    className="grow"
-                  >
-                    Write params
-                  </Button>
-                </div>
-                <Divider />
-                <div className="flex flex-col gap-4">
-                  <Button onClick={saveParamsToFile} className="grow">
-                    Save to file
-                  </Button>
-                  <Button onClick={loadParamsFromFile} className="grow">
-                    Load from file
-                  </Button>
+            {!fetchingVars && (
+              <ResizableBox
+                width={200}
+                height={Infinity}
+                minConstraints={[200, Infinity]}
+                maxConstraints={[600, Infinity]}
+                resizeHandles={["e"]}
+                axis="x"
+                handle={
+                  <div className="w-2 h-full bg-falcongrey-900 hover:bg-falconred-500 cursor-col-resize absolute right-0 top-0 z-10"></div>
+                }
+                className="relative bg-falcongrey-800 overflow-y-auto"
+              >
+                <div className="flex flex-col gap-4 p-4">
+                  <div className="flex flex-col gap-4">
+                    <Button onClick={refreshCallback} className="grow">
+                      Refresh params
+                    </Button>
+                    <Button
+                      disabled={!modifiedParams.length}
+                      onClick={() =>
+                        dispatch(emitSetMultipleParams(modifiedParams))
+                      }
+                      className="grow"
+                    >
+                      Write params
+                    </Button>
+                  </div>
+                  <Divider />
+                  <div className="flex flex-col gap-4">
+                    <Button onClick={saveParamsToFile} className="grow">
+                      Save to file
+                    </Button>
+                    <Button onClick={loadParamsFromFile} className="grow">
+                      Load from file
+                    </Button>
+                  </div>
                 </div>
-              </div>
-            </ResizableBox>
+              </ResizableBox>
+            )}
 
             {/* Main content area */}
             <div className="flex-1 flex flex-col overflow-hidden">

From e4947ae46ce7566ca97e7f51c2015890bb176998 Mon Sep 17 00:00:00 2001
From: Ben Gilbert <bensgilbert@outlook.com>
Date: Mon, 10 Nov 2025 15:08:10 +0000
Subject: [PATCH 6/8] kushs requested changes

center param search bar
move controls to sidebar
---
 gcs/src/components/params/paramsToolbar.jsx | 70 ++++-----------------
 gcs/src/params.jsx                          | 33 +++++++++-
 2 files changed, 42 insertions(+), 61 deletions(-)

diff --git a/gcs/src/components/params/paramsToolbar.jsx b/gcs/src/components/params/paramsToolbar.jsx
index 2fbc5391a..88b9537bb 100644
--- a/gcs/src/components/params/paramsToolbar.jsx
+++ b/gcs/src/components/params/paramsToolbar.jsx
@@ -6,77 +6,29 @@ rebooting the autopilot
 */
 
 // 3rd party imports
-import { Button, TextInput, Tooltip } from "@mantine/core"
-import { IconEye, IconPower, IconTool } from "@tabler/icons-react"
-
-// Styling imports
-import resolveConfig from "tailwindcss/resolveConfig"
-import tailwindConfig from "../../../tailwind.config.js"
-const tailwindColors = resolveConfig(tailwindConfig).theme.colors
+import { TextInput } from "@mantine/core"
 
 // Redux
 import { useDispatch, useSelector } from "react-redux"
 import {
-  emitRebootAutopilot,
-  resetParamState,
   selectParamSearchValue,
-  selectShowModifiedParams,
-  setAutoPilotRebootModalOpen,
-  setParamSearchValue,
-  toggleShowModifiedParams,
+  setParamSearchValue
 } from "../../redux/slices/paramsSlice.js"
 
 export default function ParamsToolbar() {
   const dispatch = useDispatch()
-  const showModifiedParams = useSelector(selectShowModifiedParams)
   const searchValue = useSelector(selectParamSearchValue)
 
-  function rebootCallback() {
-    dispatch(emitRebootAutopilot())
-    dispatch(setAutoPilotRebootModalOpen(true))
-    dispatch(resetParamState())
-  }
-
   return (
-    <div className="flex justify-between gap-4 m-4">
-      <div className="grow flex gap-4">
-        <Tooltip
-          label={
-            showModifiedParams ? "Show all params" : "Show modified params"
-          }
-          position="bottom"
-        >
-          <Button
-            size="sm"
-            onClick={() => dispatch(toggleShowModifiedParams())}
-            color={tailwindColors.orange[600]}
-          >
-            {showModifiedParams ? (
-              <IconEye size={14} />
-            ) : (
-              <IconTool size={14} />
-            )}
-          </Button>
-        </Tooltip>
-
-        <TextInput
-          className="w-1/3"
-          placeholder="Search by parameter name"
-          value={searchValue}
-          onChange={(event) =>
-            dispatch(setParamSearchValue(event.currentTarget.value))
-          }
-        />
-      </div>
-
-      <Button
-        size="sm"
-        rightSection={<IconPower size={14} />}
-        onClick={rebootCallback}
-        color={tailwindColors.red[600]}
-      >
-        Reboot FC
-      </Button>
+    <div className="flex justify-center gap-4 m-4">
+      <TextInput
+        className="w-1/3"
+        placeholder="Search by parameter name"
+        value={searchValue}
+        onChange={(event) =>
+          dispatch(setParamSearchValue(event.currentTarget.value))
+        }
+      />
     </div>
   )
 }
diff --git a/gcs/src/params.jsx b/gcs/src/params.jsx
index 4dd268eff..90d28d813 100644
--- a/gcs/src/params.jsx
+++ b/gcs/src/params.jsx
@@ -14,6 +14,11 @@ import { ResizableBox } from "react-resizable"
 import AutoSizer from "react-virtualized-auto-sizer"
 import { FixedSizeList } from "react-window"
 
+// Styling imports
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../tailwind.config.js"
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
+
 // Custom components, helpers, and data
 import Layout from "./components/layout.jsx"
 import NoDroneConnected from "./components/noDroneConnected.jsx"
@@ -48,6 +53,7 @@ import {
   setModifiedParams,
   setParams,
   setShownParams,
+  toggleShowModifiedParams,
 } from "./redux/slices/paramsSlice.js"
 
 function cleanFloat(value, decimals = 5) {
@@ -118,6 +124,12 @@ export default function Params() {
     dispatch(setFetchingVars(true))
   }
 
+  function rebootCallback() {
+    dispatch(emitRebootAutopilot())
+    dispatch(setAutoPilotRebootModalOpen(true))
+    dispatch(resetParamState())
+  }
+
   async function saveParamsToFile() {
     const options = {
       title: "Save parameters to a file",
@@ -202,9 +214,9 @@ export default function Params() {
           <div className="flex flex-1 overflow-hidden">
             {!fetchingVars && (
               <ResizableBox
-                width={200}
+                width={225}
                 height={Infinity}
-                minConstraints={[200, Infinity]}
+                minConstraints={[225, Infinity]}
                 maxConstraints={[600, Infinity]}
                 resizeHandles={["e"]}
                 axis="x"
@@ -237,6 +249,23 @@ export default function Params() {
                       Load from file
                     </Button>
                   </div>
+                  <Divider />
+                  <div className="flex flex-col gap-4">
+                    <Button
+                      size="sm"
+                      onClick={() => dispatch(toggleShowModifiedParams())}
+                      color={tailwindColors.orange[600]}
+                    >
+                      {showModifiedParams ? "Show all params" : "Show modified params"}
+                    </Button>
+                    <Button
+                      onClick={rebootCallback}
+                      color={tailwindColors.red[600]}
+                    >
+                      Reboot FC
+                    </Button>
+                  </div>
+
                 </div>
               </ResizableBox>
             )}

From 65603403068f4ba299d0a46e5a39e9f106e2a913 Mon Sep 17 00:00:00 2001
From: Ben Gilbert <bensgilbert@outlook.com>
Date: Tue, 11 Nov 2025 23:06:34 +0000
Subject: [PATCH 7/8] hopefully final change

repositioned `show modified params` button back to top toolbar
---
 gcs/src/components/params/paramsToolbar.jsx | 30 ++++++++++++++++++---
 gcs/src/params.jsx                          | 14 +++-------
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/gcs/src/components/params/paramsToolbar.jsx b/gcs/src/components/params/paramsToolbar.jsx
index 88b9537bb..7cce560f3 100644
--- a/gcs/src/components/params/paramsToolbar.jsx
+++ b/gcs/src/components/params/paramsToolbar.jsx
@@ -6,21 +6,45 @@ rebooting the autopilot
 */
 
 // 3rd party imports
-import { TextInput } from "@mantine/core"
+import { Button, TextInput, Tooltip } from "@mantine/core"
+import { IconEye, IconTool } from "@tabler/icons-react"
+
+// Styling imports
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../../../tailwind.config.js"
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 // Redux
 import { useDispatch, useSelector } from "react-redux"
 import {
+  selectModifiedParams,
   selectParamSearchValue,
-  setParamSearchValue
+  selectShowModifiedParams,
+  setParamSearchValue,
+  toggleShowModifiedParams,
 } from "../../redux/slices/paramsSlice.js"
 
 export default function ParamsToolbar() {
   const dispatch = useDispatch()
   const searchValue = useSelector(selectParamSearchValue)
+  const modifiedParams = useSelector(selectModifiedParams)
+  const showModifiedParams = useSelector(selectShowModifiedParams)
 
   return (
-    <div className="flex justify-center gap-4 m-4">
+    <div className="flex items-center gap-4 m-4">
+      <Tooltip
+        label={showModifiedParams ? "Show all params" : "Show modified params"}
+        position="bottom"
+      >
+        <Button
+          size="sm"
+          onClick={() => dispatch(toggleShowModifiedParams())}
+          color={tailwindColors.orange[600]}
+          disabled={modifiedParams.length == 0}
+        >
+          {showModifiedParams ? <IconEye size={14} /> : <IconTool size={14} />}
+        </Button>
+      </Tooltip>
       <TextInput
         className="w-1/3"
         placeholder="Search by parameter name"
diff --git a/gcs/src/params.jsx b/gcs/src/params.jsx
index 90d28d813..dc90c4b88 100644
--- a/gcs/src/params.jsx
+++ b/gcs/src/params.jsx
@@ -34,6 +34,7 @@ import { showErrorNotification } from "./helpers/notification.js"
 import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice.js"
 import {
   emitExportParamsToFile,
+  emitRebootAutopilot,
   emitRefreshParams,
   emitSetMultipleParams,
   resetParamState,
@@ -45,6 +46,7 @@ import {
   selectParamSearchValue,
   selectShowModifiedParams,
   selectShownParams,
+  setAutoPilotRebootModalOpen,
   setFetchingVars,
   setHasFetchedOnce,
   setLoadedFileName,
@@ -53,7 +55,6 @@ import {
   setModifiedParams,
   setParams,
   setShownParams,
-  toggleShowModifiedParams,
 } from "./redux/slices/paramsSlice.js"
 
 function cleanFloat(value, decimals = 5) {
@@ -198,7 +199,8 @@ export default function Params() {
       dispatch(setLoadParamsFileModalOpen(true))
     } else {
       showErrorNotification(
-        `Error loading params from file: ${result.error || "Please try again."
+        `Error loading params from file: ${
+          result.error || "Please try again."
         }`,
       )
     }
@@ -251,13 +253,6 @@ export default function Params() {
                   </div>
                   <Divider />
                   <div className="flex flex-col gap-4">
-                    <Button
-                      size="sm"
-                      onClick={() => dispatch(toggleShowModifiedParams())}
-                      color={tailwindColors.orange[600]}
-                    >
-                      {showModifiedParams ? "Show all params" : "Show modified params"}
-                    </Button>
                     <Button
                       onClick={rebootCallback}
                       color={tailwindColors.red[600]}
@@ -265,7 +260,6 @@ export default function Params() {
                       Reboot FC
                     </Button>
                   </div>
-
                 </div>
               </ResizableBox>
             )}

From f2a799338c3c5c77ce8df25e5c3265c88cf95dfc Mon Sep 17 00:00:00 2001
From: Ben Gilbert <bensgilbert@outlook.com>
Date: Wed, 12 Nov 2025 13:23:40 +0000
Subject: [PATCH 8/8] strict equality

---
 gcs/src/components/params/paramsToolbar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gcs/src/components/params/paramsToolbar.jsx b/gcs/src/components/params/paramsToolbar.jsx
index 7cce560f3..d5bcddaf6 100644
--- a/gcs/src/components/params/paramsToolbar.jsx
+++ b/gcs/src/components/params/paramsToolbar.jsx
@@ -40,7 +40,7 @@ export default function ParamsToolbar() {
           size="sm"
           onClick={() => dispatch(toggleShowModifiedParams())}
           color={tailwindColors.orange[600]}
-          disabled={modifiedParams.length == 0}
+          disabled={modifiedParams.length === 0}
         >
           {showModifiedParams ? <IconEye size={14} /> : <IconTool size={14} />}
         </Button>