From f243e442b90d3c787b9350b15b8e1f6b598f837b Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sat, 29 Mar 2025 14:45:17 +0000
Subject: [PATCH 01/19] added modal

---
 .vscode/settings.json                         |  3 +-
 gcs/src/components/customMantineTheme.jsx     |  1 +
 .../components/dashboard/floatingToolbar.jsx  | 15 +++
 .../preFlightChecklist/checkListArea.jsx      | 96 +++++++++++++++++++
 .../preFlightChecklist/preFlightChecklist.jsx | 68 +++++++++++++
 gcs/src/components/navbar.jsx                 |  1 -
 6 files changed, 182 insertions(+), 2 deletions(-)
 create mode 100644 gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
 create mode 100644 gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7229cda57..519424e1f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -13,6 +13,7 @@
         "RSSI",
         "serialutil",
         "SITL",
-        "statustext"
+        "statustext",
+        "SUAS"
     ]
 }
diff --git a/gcs/src/components/customMantineTheme.jsx b/gcs/src/components/customMantineTheme.jsx
index d44efe320..b4133cbd2 100644
--- a/gcs/src/components/customMantineTheme.jsx
+++ b/gcs/src/components/customMantineTheme.jsx
@@ -27,4 +27,5 @@ export const CustomMantineTheme = createTheme({
       tailwindColors.falcongrey[950],
     ],
   },
+  cursorType: 'pointer'
 })
diff --git a/gcs/src/components/dashboard/floatingToolbar.jsx b/gcs/src/components/dashboard/floatingToolbar.jsx
index c0ae587e9..904c7c72d 100644
--- a/gcs/src/components/dashboard/floatingToolbar.jsx
+++ b/gcs/src/components/dashboard/floatingToolbar.jsx
@@ -8,6 +8,7 @@ import { useLocalStorage } from "@mantine/hooks"
 import {
   IconAnchor,
   IconAnchorOff,
+  IconChecklist,
   IconCrosshair,
   IconMapPins,
   IconSun,
@@ -17,6 +18,8 @@ import {
 // Helper Functions
 import { filterMissionItems } from "../../helpers/filterMissions"
 import GetOutsideVisibilityColor from "../../helpers/outsideVisibility"
+import { useState } from "react"
+import PreFlightChecklist from "./preFlightChecklist/preFlightChecklist"
 
 export default function FloatingToolbar({
   missionItems,
@@ -31,6 +34,7 @@ export default function FloatingToolbar({
     key: "outsideVisibility",
     defaultValue: false,
   })
+  const [preflightModal, setPreflightModal] = useState(false);
 
   function updateFollowDroneAction() {
     setFollowDrone(
@@ -125,6 +129,17 @@ export default function FloatingToolbar({
           {outsideVisibility ? <IconSun /> : <IconSunOff />}
         </ActionIcon>
       </Tooltip>
+
+      {/* Preflight checklist */}
+      <Tooltip
+        label="Preflight Checklist"
+      >
+        <ActionIcon
+        >
+          <IconChecklist onClick={() => setPreflightModal(true)} />
+        </ActionIcon>
+      </Tooltip>
+      <PreFlightChecklist showModal={preflightModal} setShowModal={setPreflightModal} />
     </div>
   )
 }
diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
new file mode 100644
index 000000000..2286311b2
--- /dev/null
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
@@ -0,0 +1,96 @@
+/*
+  The Checklist area, this can be edited.
+*/
+
+import { Button, Checkbox, Textarea} from "@mantine/core"
+import { useEffect, useState } from "react"
+
+// Styling imports
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../../../../tailwind.config.js"
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
+
+export default function CheckListArea({items}) {
+  const [editMode, setEditMode] = useState(false)
+  const [checkBoxList, setCheckboxList] = useState(items)
+  const [checkBoxListString, setCheckboxListString] = useState(generateCheckboxListString())
+  const [mappedItems, setMappedItems] = useState(generateMappedItems())
+
+  function generateCheckboxListString(set = false) {
+    // Go from list to string, returns
+    var final = ""
+    checkBoxList.map((element) => {
+      final += element.name + ", "
+    })
+
+    final = final.substring(0, final.length - 2)
+    if (set) {
+      setCheckboxListString(final)
+    }
+
+    return final
+  }
+
+  function generateCheckboxList() {
+    // Go from string to list, does not return
+    var final = []
+    checkBoxListString.split(/,\s|,/).map((element) => {
+      final.push({
+        "checked": false,
+        "name": element.trimStart()
+      })
+    })
+    setCheckboxList(final)
+    console.log(final)
+  }
+
+  function generateMappedItems() {
+    return (
+      checkBoxList.map((element) => {
+        return <Checkbox defaultChecked={element.checked} key={element.name} label={element.name} />
+      })
+    )
+  }
+
+  useEffect(() => {
+    setMappedItems(generateMappedItems())
+  }, [checkBoxList])
+
+  return (
+    <>
+      {/* Checkbox area */}
+      <div className={`flex flex-col gap-2 ${editMode ? "hidden" : ""}`}>
+        {mappedItems}
+
+        <div className="flex w-full justify-between pt-2">
+          <a className="text-xs text-falcongrey-400 hover:underline hover:cursor-pointer" onClick={() => generateCheckboxList()}>Reset all checked</a>
+          <a className="text-xs text-falcongrey-400 hover:underline hover:cursor-pointer" onClick={() => setEditMode(true)}>Edit this checklist</a>
+        </div>
+      </div>
+      
+      {/* Edit mode */}
+      <div className={`flex flex-col gap-2 ${editMode ? "" : "hidden"}`}>
+        <Textarea value={checkBoxListString} onChange={(e) => setCheckboxListString(e.currentTarget.value)}/>
+
+        <div className="w-full flex justify-between">
+          <Button 
+            onClick={() => {setEditMode(false); generateCheckboxListString(true)}} 
+            variant="filled"
+            type="submit"
+            color={tailwindColors.red[600]}
+          >
+            Cancel
+          </Button>
+          <Button 
+            onClick={() => {setEditMode(false); generateCheckboxList()}} 
+            variant="filled"
+            type="submit"
+            color={tailwindColors.green[600]}
+          >
+            Save
+          </Button>
+        </div>
+      </div>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx b/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx
new file mode 100644
index 000000000..cc818f2ad
--- /dev/null
+++ b/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx
@@ -0,0 +1,68 @@
+/*
+  Preflight checklist modal, a popup that allows the user to tick off things for their flight
+*/
+
+import { Modal, Checkbox, Accordion } from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
+import CheckListArea from "./checkListArea";
+
+const preFlightChecklistItems = [
+  {
+    name: "BMFA Buckminster",
+    value:
+      [
+        {"checked": false, "name": "Item 1"},
+        {"checked": false, "name": "Item 2"},
+        {"checked": false, "name": "Item 3"},
+        {"checked": false, "name": "Item 4"},
+      ]
+  },
+  {
+    name: "SUAS Test 1",
+    value:
+      [
+        {"checked": false, "name": "Go to America"},
+        {"checked": true, "name": "Build Drone"},
+        {"checked": false, "name": "Fly Drone"},
+      ]
+    },
+    {
+      name: "FGCS <3",
+      value:
+      [
+        {"checked": true, "name": "Download FGCS"},
+        {"checked": true, "name": "Talk about how good it is"},
+        {"checked": true, "name": "Preach"},
+      ]
+  },
+];
+
+export default function PreFlightChecklist({showModal, setShowModal}) {
+  const items = preFlightChecklistItems.map((item) => (
+    <Accordion.Item key={item.name} value={item.name}>
+      <Accordion.Control>{item.name}</Accordion.Control>
+      <Accordion.Panel>
+        <CheckListArea items={item.value} />
+      </Accordion.Panel>
+    </Accordion.Item>
+  ));
+
+  return (
+    <Modal 
+      opened={showModal} 
+      onClose={() => setShowModal(false)} 
+      size={"xl"}
+      title="Preflight Checklist" 
+      centered 
+      styles={{
+        content: {
+          borderRadius: "0.5rem",
+        },
+      }}
+    > 
+      <Accordion variant="separated">
+        {items}
+      </Accordion>
+    </Modal>
+  )
+}
\ No newline at end of file
diff --git a/gcs/src/components/navbar.jsx b/gcs/src/components/navbar.jsx
index ab6d7bab7..e9a75895d 100644
--- a/gcs/src/components/navbar.jsx
+++ b/gcs/src/components/navbar.jsx
@@ -259,7 +259,6 @@ export default function Navbar({ currentPage }) {
           backgroundOpacity: 0.55,
           blur: 3,
         }}
-        withCloseButton={false}
         styles={{
           content: {
             borderRadius: "0.5rem",

From 377e007aaa420fd0d9b7b5573249c2a824753c76 Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sat, 29 Mar 2025 15:04:20 +0000
Subject: [PATCH 02/19] added reset checked

---
 .../preFlightChecklist/checkListArea.jsx          | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
index 2286311b2..1cb78284f 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
@@ -8,6 +8,7 @@ import { useEffect, useState } from "react"
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../../tailwind.config.js"
+import { elements } from "chart.js"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 export default function CheckListArea({items}) {
@@ -41,13 +42,23 @@ export default function CheckListArea({items}) {
       })
     })
     setCheckboxList(final)
-    console.log(final)
+  }
+
+  function setChecked(name, value) {
+    var final = []
+    checkBoxListString.split(/,\s|,/).map((element) => {
+      final.push({
+        "checked": element.trimStart() == name ? value : checkBoxList.find((e) => e.name == element.trimStart()).checked,
+        "name": element.trimStart()
+      })
+    })
+    setCheckboxList(final)
   }
 
   function generateMappedItems() {
     return (
       checkBoxList.map((element) => {
-        return <Checkbox defaultChecked={element.checked} key={element.name} label={element.name} />
+        return <Checkbox checked={element.checked} key={element.name} label={element.name} onChange={() => setChecked(element.name, !element.checked)}/>
       })
     )
   }

From 9f38b0fe052c105ad7b87d64a770edb68488e21a Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sat, 29 Mar 2025 15:17:23 +0000
Subject: [PATCH 03/19] consistent states

---
 .../preFlightChecklist/checkListArea.jsx      |  4 +-
 .../preFlightChecklist/preFlightChecklist.jsx | 43 ++++++++++++++++---
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
index 1cb78284f..afd4fdc15 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
@@ -8,10 +8,9 @@ import { useEffect, useState } from "react"
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../../tailwind.config.js"
-import { elements } from "chart.js"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
-export default function CheckListArea({items}) {
+export default function CheckListArea({items, saveItems}) {
   const [editMode, setEditMode] = useState(false)
   const [checkBoxList, setCheckboxList] = useState(items)
   const [checkBoxListString, setCheckboxListString] = useState(generateCheckboxListString())
@@ -65,6 +64,7 @@ export default function CheckListArea({items}) {
 
   useEffect(() => {
     setMappedItems(generateMappedItems())
+    saveItems(checkBoxList)
   }, [checkBoxList])
 
   return (
diff --git a/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx b/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx
index cc818f2ad..bd1fb0fdc 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx
@@ -2,9 +2,9 @@
   Preflight checklist modal, a popup that allows the user to tick off things for their flight
 */
 
-import { Modal, Checkbox, Accordion } from "@mantine/core";
-import { IconCheck } from "@tabler/icons-react";
+import { Modal, Accordion } from "@mantine/core";
 import CheckListArea from "./checkListArea";
+import { useLocalStorage } from "@mantine/hooks";
 
 const preFlightChecklistItems = [
   {
@@ -38,11 +38,44 @@ const preFlightChecklistItems = [
 ];
 
 export default function PreFlightChecklist({showModal, setShowModal}) {
+  const [preFlightChecklistItems, setPreFlightChecklistItems] = useLocalStorage({ key: "preFlightCheckList", defaultValue: []})
+  const [openChecklist, setOpenChecklist] = useLocalStorage({ key: "lastOpenedPreFlightCheckList", defaultValue: "" })
+  // setPreFlightChecklistItems([
+  //   {
+  //     name: "BMFA Buckminster",
+  //     value:
+  //       [
+  //         {"checked": false, "name": "Item 1"},
+  //         {"checked": false, "name": "Item 2"},
+  //         {"checked": false, "name": "Item 3"},
+  //         {"checked": false, "name": "Item 4"},
+  //       ]
+  //   },
+  //   {
+  //     name: "SUAS Test 1",
+  //     value:
+  //       [
+  //         {"checked": false, "name": "Go to America"},
+  //         {"checked": true, "name": "Build Drone"},
+  //         {"checked": false, "name": "Fly Drone"},
+  //       ]
+  //     },
+  //     {
+  //       name: "FGCS <3",
+  //       value:
+  //       [
+  //         {"checked": true, "name": "Download FGCS"},
+  //         {"checked": true, "name": "Talk about how good it is"},
+  //         {"checked": true, "name": "Preach"},
+  //       ]
+  //   },
+  // ])
+
   const items = preFlightChecklistItems.map((item) => (
-    <Accordion.Item key={item.name} value={item.name}>
+    <Accordion.Item key={item.name} value={item.name} onClick={() => setOpenChecklist(item.name)}>
       <Accordion.Control>{item.name}</Accordion.Control>
       <Accordion.Panel>
-        <CheckListArea items={item.value} />
+        <CheckListArea items={item.value} saveItems={(e) => { item.value = e; setPreFlightChecklistItems(preFlightChecklistItems) }} />
       </Accordion.Panel>
     </Accordion.Item>
   ));
@@ -60,7 +93,7 @@ export default function PreFlightChecklist({showModal, setShowModal}) {
         },
       }}
     > 
-      <Accordion variant="separated">
+      <Accordion variant="separated" defaultValue={openChecklist}>
         {items}
       </Accordion>
     </Modal>

From 5a6148a2b490aa07998c3449529f1e9fc3824b09 Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sat, 29 Mar 2025 16:49:57 +0000
Subject: [PATCH 04/19] moved checklist

---
 .../components/dashboard/floatingToolbar.jsx  |   4 +-
 .../preFlightChecklist/checkListArea.jsx      |  48 +++++++--
 .../preFlightChecklist/preFlightChecklist.jsx |  70 ++----------
 gcs/src/components/dashboard/tabsSection.jsx  |   7 +-
 .../preFlightChecklistSection.jsx             | 100 ++++++++++++++++++
 5 files changed, 159 insertions(+), 70 deletions(-)
 create mode 100644 gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx

diff --git a/gcs/src/components/dashboard/floatingToolbar.jsx b/gcs/src/components/dashboard/floatingToolbar.jsx
index 904c7c72d..f1f465662 100644
--- a/gcs/src/components/dashboard/floatingToolbar.jsx
+++ b/gcs/src/components/dashboard/floatingToolbar.jsx
@@ -131,7 +131,7 @@ export default function FloatingToolbar({
       </Tooltip>
 
       {/* Preflight checklist */}
-      <Tooltip
+      {/* <Tooltip
         label="Preflight Checklist"
       >
         <ActionIcon
@@ -139,7 +139,7 @@ export default function FloatingToolbar({
           <IconChecklist onClick={() => setPreflightModal(true)} />
         </ActionIcon>
       </Tooltip>
-      <PreFlightChecklist showModal={preflightModal} setShowModal={setPreflightModal} />
+      <PreFlightChecklist showModal={preflightModal} setShowModal={setPreflightModal} /> */}
     </div>
   )
 }
diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
index afd4fdc15..235ae9951 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
@@ -2,7 +2,7 @@
   The Checklist area, this can be edited.
 */
 
-import { Button, Checkbox, Textarea} from "@mantine/core"
+import { Button, Checkbox, Modal, Textarea, TextInput} from "@mantine/core"
 import { useEffect, useState } from "react"
 
 // Styling imports
@@ -10,8 +10,10 @@ import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../../tailwind.config.js"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
-export default function CheckListArea({items, saveItems}) {
+export default function CheckListArea({name, items, saveItems, deleteChecklist}) {
   const [editMode, setEditMode] = useState(false)
+  const [showDeleteModal, setDeleteModal] = useState(false)
+  const [checkListName, setChecklistName] = useState(name);
   const [checkBoxList, setCheckboxList] = useState(items)
   const [checkBoxListString, setCheckboxListString] = useState(generateCheckboxListString())
   const [mappedItems, setMappedItems] = useState(generateMappedItems())
@@ -74,16 +76,31 @@ export default function CheckListArea({items, saveItems}) {
         {mappedItems}
 
         <div className="flex w-full justify-between pt-2">
-          <a className="text-xs text-falcongrey-400 hover:underline hover:cursor-pointer" onClick={() => generateCheckboxList()}>Reset all checked</a>
-          <a className="text-xs text-falcongrey-400 hover:underline hover:cursor-pointer" onClick={() => setEditMode(true)}>Edit this checklist</a>
+          <a className="text-xs text-falcongrey-200 hover:underline hover:cursor-pointer" onClick={() => generateCheckboxList()}>Uncheck all</a>
+        </div>
+        <div className="flex w-full justify-between flex-row-reverse">
+          <a className="text-xs text-falconred-400 hover:underline hover:cursor-pointer" onClick={() => setDeleteModal(true)}>Delete this checklist</a>
+          <a className="text-xs text-falcongrey-200 hover:underline hover:cursor-pointer" onClick={() => setEditMode(true)}>Edit this checklist</a>
         </div>
       </div>
       
       {/* Edit mode */}
       <div className={`flex flex-col gap-2 ${editMode ? "" : "hidden"}`}>
-        <Textarea value={checkBoxListString} onChange={(e) => setCheckboxListString(e.currentTarget.value)}/>
+        {/* Inputs */}
+        <TextInput
+          label="Checklist Name"
+          value={checkListName}
+          onChange={(event) => setChecklistName(event.currentTarget.value)}
+        />
+        <TextInput 
+          label="Values"
+          description="The checklist items in a comma separated list"
+          value={checkBoxListString} 
+          onChange={(e) => setCheckboxListString(e.currentTarget.value)}
+        />
 
-        <div className="w-full flex justify-between">
+        {/* Controls */}
+        <div className="w-full flex justify-between pt-2">
           <Button 
             onClick={() => {setEditMode(false); generateCheckboxListString(true)}} 
             variant="filled"
@@ -102,6 +119,25 @@ export default function CheckListArea({items, saveItems}) {
           </Button>
         </div>
       </div>
+
+      {/* Generic "are you sure" modal */}
+      <Modal
+        opened={showDeleteModal}
+        onClose={() => setDeleteModal(false)}
+        title="Are you sure you want to delete this checklist?"
+        centered
+        styles={{
+          content: {
+            borderRadius: "0.5rem",
+          },
+        }}
+        withCloseButton={false}
+      >
+        <div className="flex w-full justify-between pt-4">
+          <Button color={tailwindColors.red[600]} onClick={() => setDeleteModal(false)}>No, cancel</Button>
+          <Button color={tailwindColors.green[600]} onClick={() => deleteChecklist()}>Yes, Continue</Button>
+        </div>
+      </Modal>
     </>
   )
 }
\ No newline at end of file
diff --git a/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx b/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx
index bd1fb0fdc..fc1f3d7f6 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx
@@ -2,74 +2,18 @@
   Preflight checklist modal, a popup that allows the user to tick off things for their flight
 */
 
-import { Modal, Accordion } from "@mantine/core";
+import { Modal, Accordion, Button } from "@mantine/core";
 import CheckListArea from "./checkListArea";
 import { useLocalStorage } from "@mantine/hooks";
 
-const preFlightChecklistItems = [
-  {
-    name: "BMFA Buckminster",
-    value:
-      [
-        {"checked": false, "name": "Item 1"},
-        {"checked": false, "name": "Item 2"},
-        {"checked": false, "name": "Item 3"},
-        {"checked": false, "name": "Item 4"},
-      ]
-  },
-  {
-    name: "SUAS Test 1",
-    value:
-      [
-        {"checked": false, "name": "Go to America"},
-        {"checked": true, "name": "Build Drone"},
-        {"checked": false, "name": "Fly Drone"},
-      ]
-    },
-    {
-      name: "FGCS <3",
-      value:
-      [
-        {"checked": true, "name": "Download FGCS"},
-        {"checked": true, "name": "Talk about how good it is"},
-        {"checked": true, "name": "Preach"},
-      ]
-  },
-];
+// Styling imports
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../../../../tailwind.config.js"
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 export default function PreFlightChecklist({showModal, setShowModal}) {
   const [preFlightChecklistItems, setPreFlightChecklistItems] = useLocalStorage({ key: "preFlightCheckList", defaultValue: []})
   const [openChecklist, setOpenChecklist] = useLocalStorage({ key: "lastOpenedPreFlightCheckList", defaultValue: "" })
-  // setPreFlightChecklistItems([
-  //   {
-  //     name: "BMFA Buckminster",
-  //     value:
-  //       [
-  //         {"checked": false, "name": "Item 1"},
-  //         {"checked": false, "name": "Item 2"},
-  //         {"checked": false, "name": "Item 3"},
-  //         {"checked": false, "name": "Item 4"},
-  //       ]
-  //   },
-  //   {
-  //     name: "SUAS Test 1",
-  //     value:
-  //       [
-  //         {"checked": false, "name": "Go to America"},
-  //         {"checked": true, "name": "Build Drone"},
-  //         {"checked": false, "name": "Fly Drone"},
-  //       ]
-  //     },
-  //     {
-  //       name: "FGCS <3",
-  //       value:
-  //       [
-  //         {"checked": true, "name": "Download FGCS"},
-  //         {"checked": true, "name": "Talk about how good it is"},
-  //         {"checked": true, "name": "Preach"},
-  //       ]
-  //   },
-  // ])
 
   const items = preFlightChecklistItems.map((item) => (
     <Accordion.Item key={item.name} value={item.name} onClick={() => setOpenChecklist(item.name)}>
@@ -96,6 +40,10 @@ export default function PreFlightChecklist({showModal, setShowModal}) {
       <Accordion variant="separated" defaultValue={openChecklist}>
         {items}
       </Accordion>
+      <div className="flex w-full justify-between pt-4">
+        <Button color={tailwindColors.red[600]}>Delete a Checklist</Button>
+        <Button color={tailwindColors.green[600]} onClick={() => {preFlightChecklistItems.push({ "name": "test", "value": [] }); setPreFlightChecklistItems(preFlightChecklistItems)}}>Add a new Checklist</Button>
+      </div>
     </Modal>
   )
 }
\ No newline at end of file
diff --git a/gcs/src/components/dashboard/tabsSection.jsx b/gcs/src/components/dashboard/tabsSection.jsx
index 9128515e6..1c44400ac 100644
--- a/gcs/src/components/dashboard/tabsSection.jsx
+++ b/gcs/src/components/dashboard/tabsSection.jsx
@@ -11,6 +11,7 @@ import CameraTabsSection from "./tabsSectionTabs/CameraTabsSection"
 import ActionTabsSection from "./tabsSectionTabs/actionTabsSection"
 import MissionTabsSection from "./tabsSectionTabs/missionTabsSection"
 import DataTabsSection from "./tabsSectionTabs/dataTabsSection"
+import PreFlightChecklistTab from "./tabsSectionTabs/preFlightChecklistSection"
 
 export default function TabsSection({
   connected,
@@ -22,7 +23,7 @@ export default function TabsSection({
   displayedData,
   setDisplayedData,
 }) {
-  const tabPadding = "pt-6"
+  const tabPadding = "pt-6 pb-4"
 
   return (
     <Tabs defaultValue="data">
@@ -31,6 +32,7 @@ export default function TabsSection({
         <Tabs.Tab value="actions">Actions</Tabs.Tab>
         <Tabs.Tab value="mission">Mission</Tabs.Tab>
         <Tabs.Tab value="camera">Camera</Tabs.Tab>
+        <Tabs.Tab value="preFlightChecklist">Checklist</Tabs.Tab>
       </Tabs.List>
       {/* Data */}
       <DataTabsSection
@@ -60,6 +62,9 @@ export default function TabsSection({
 
       {/* Camera */}
       <CameraTabsSection tabPadding={tabPadding} />
+
+      {/* Pre Flight Checklist */}
+      <PreFlightChecklistTab tabPadding={tabPadding} />
     </Tabs>
   )
 }
diff --git a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
new file mode 100644
index 000000000..6827c29eb
--- /dev/null
+++ b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
@@ -0,0 +1,100 @@
+/**
+ * PreFlightCheckListSection
+ * Contains the preflight checklist
+ */
+
+import { Tabs, Accordion, Button, Modal, TextInput } from "@mantine/core";
+import CheckListArea from "../preFlightChecklist/checkListArea.jsx";
+import { useLocalStorage } from "@mantine/hooks";
+
+// Styling imports
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../../../../tailwind.config.js"
+import { useState } from "react";
+import { showErrorNotification } from "../../../helpers/notification.js";
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
+
+export default function PreFlightChecklistTab({tabPadding}) {
+  const [preFlightChecklistItems, setPreFlightChecklistItems] = useLocalStorage({ key: "preFlightCheckList", defaultValue: []})
+  const [openChecklist, setOpenChecklist] = useLocalStorage({ key: "lastOpenedPreFlightCheckList", defaultValue: "" })
+  
+  // New checklist
+  const [showNewChecklistModal, setNewChecklistModal] = useState(false)
+  const [newChecklistName, setNewChecklistName] = useState("");
+
+  function deleteChecklist(toDelete) {
+    var final = []
+    preFlightChecklistItems.map((element) => {
+      if (element != toDelete) {
+        final.push(element)
+      }
+    })
+    setPreFlightChecklistItems(final)
+  }
+
+  function createNewChecklist() {
+    if (newChecklistName !== "") {
+      preFlightChecklistItems.push({ "name": newChecklistName, "value": [ {"checked": false, "name": "Click 'Edit this checklist' to add new values"} ] })
+      setPreFlightChecklistItems(preFlightChecklistItems)
+      setOpenChecklist(newChecklistName)
+      setNewChecklistModal(false)
+      setNewChecklistName("")
+      return
+    }
+
+    // Show error message
+    showErrorNotification("Name cannot be empty")
+  }
+
+  const items = preFlightChecklistItems.map((item) => (
+    <Accordion.Item key={item.name} value={item.name} onClick={() => setOpenChecklist(item.name)}>
+      <Accordion.Control>{item.name}</Accordion.Control>
+      <Accordion.Panel>
+        <CheckListArea 
+          items={item.value} 
+          saveItems={(e) => { item.value = e; setPreFlightChecklistItems(preFlightChecklistItems) }} 
+          deleteChecklist={() => deleteChecklist(item)}
+          name={item.name}
+        />
+      </Accordion.Panel>
+    </Accordion.Item>
+  ));
+  
+  return (
+    <Tabs.Panel value="preFlightChecklist">
+      <div className={tabPadding}>
+        {/* List */}
+        <Accordion variant="separated" defaultValue={openChecklist}>
+          {items}
+        </Accordion>
+        {/* Controls */}
+        <Button className="!w-full !mt-4" onClick={() => setNewChecklistModal(true)}>Add a new Checklist</Button>
+        <Modal
+          opened={showNewChecklistModal}
+          onClose={() => setNewChecklistModal(false)}
+          title="New Checklist"
+          centered
+          styles={{
+            content: {
+              borderRadius: "0.5rem",
+            },
+          }}
+        >
+          <div className="flex flex-col gap-2">
+            <TextInput
+              label="Checklist Name"
+              description="The name of the checklist, you can add values afterwards"
+              value={newChecklistName}
+              onChange={(event) => setNewChecklistName(event.currentTarget.value)}
+            />
+          </div>
+
+          <div className="flex w-full justify-between pt-6">
+            <Button color={tailwindColors.red[600]} onClick={() => setNewChecklistModal(false)}>Cancel</Button>
+            <Button color={tailwindColors.green[600]} onClick={() => createNewChecklist()}>Create</Button>
+          </div>
+        </Modal>
+      </div>
+    </Tabs.Panel>
+  )
+}

From 409f9518814ab90f77f8e0bc3bacce848431cb58 Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sat, 29 Mar 2025 17:31:40 +0000
Subject: [PATCH 05/19] scrolls

---
 gcs/src/components/dashboard/resizableInfoBox.jsx | 2 +-
 gcs/src/components/dashboard/tabsSection.jsx      | 4 ++--
 gcs/src/css/index.css                             | 6 +++---
 gcs/src/css/resizable.css                         | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/gcs/src/components/dashboard/resizableInfoBox.jsx b/gcs/src/components/dashboard/resizableInfoBox.jsx
index 24e2c7b77..a22d34c5c 100644
--- a/gcs/src/components/dashboard/resizableInfoBox.jsx
+++ b/gcs/src/components/dashboard/resizableInfoBox.jsx
@@ -34,7 +34,7 @@ export default function ResizableInfoBox(props) {
         }}
         className="h-full"
       >
-        <div className="@container flex flex-col px-6 py-2 h-full gap-2 overflow-x-hidden overflow-y-auto">
+        <div className="@container flex flex-col px-6 py-2 h-full gap-2 overflow-x-hidden overflow-y-auto pr-8">
           {props.children}
         </div>
       </ResizableBox>
diff --git a/gcs/src/components/dashboard/tabsSection.jsx b/gcs/src/components/dashboard/tabsSection.jsx
index 1c44400ac..fc36597d8 100644
--- a/gcs/src/components/dashboard/tabsSection.jsx
+++ b/gcs/src/components/dashboard/tabsSection.jsx
@@ -27,12 +27,12 @@ export default function TabsSection({
 
   return (
     <Tabs defaultValue="data">
-      <Tabs.List grow>
+      <Tabs.List className="!overflow-x-scroll !flex-nowrap">
         <Tabs.Tab value="data">Data</Tabs.Tab>
         <Tabs.Tab value="actions">Actions</Tabs.Tab>
         <Tabs.Tab value="mission">Mission</Tabs.Tab>
         <Tabs.Tab value="camera">Camera</Tabs.Tab>
-        <Tabs.Tab value="preFlightChecklist">Checklist</Tabs.Tab>
+        <Tabs.Tab value="preFlightChecklist">Pre-Flight Checklist</Tabs.Tab>
       </Tabs.List>
       {/* Data */}
       <DataTabsSection
diff --git a/gcs/src/css/index.css b/gcs/src/css/index.css
index 3eab1a70e..3dffba100 100644
--- a/gcs/src/css/index.css
+++ b/gcs/src/css/index.css
@@ -48,15 +48,15 @@ body {
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background: #1c2021;
+  background: #1C2021;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: #d36565;
+  background: #727C7E;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #b43e31;
+  background: #535D5F;
 }
diff --git a/gcs/src/css/resizable.css b/gcs/src/css/resizable.css
index 8e508a7fd..8f688a929 100644
--- a/gcs/src/css/resizable.css
+++ b/gcs/src/css/resizable.css
@@ -79,7 +79,7 @@
 
 .custom-handle-e {
   top: 50%;
-  right: 1%;
+  right: 10px;
   transform: rotate(135deg);
   cursor: e-resize;
   position: absolute;

From 7d3c94d57c3a2c4aef2dc533dbb73730f74a452e Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sat, 29 Mar 2025 18:36:54 +0000
Subject: [PATCH 06/19] changed scroll bars

---
 gcs/src/components/dashboard/tabsSection.jsx                  | 3 ++-
 .../dashboard/tabsSectionTabs/preFlightChecklistSection.jsx   | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/gcs/src/components/dashboard/tabsSection.jsx b/gcs/src/components/dashboard/tabsSection.jsx
index fc36597d8..29bc57eb6 100644
--- a/gcs/src/components/dashboard/tabsSection.jsx
+++ b/gcs/src/components/dashboard/tabsSection.jsx
@@ -4,7 +4,7 @@
 */
 
 // 3rd Party Imports
-import { Tabs } from "@mantine/core"
+import { ScrollArea, Tabs } from "@mantine/core"
 
 // Tab Componenents
 import CameraTabsSection from "./tabsSectionTabs/CameraTabsSection"
@@ -34,6 +34,7 @@ export default function TabsSection({
         <Tabs.Tab value="camera">Camera</Tabs.Tab>
         <Tabs.Tab value="preFlightChecklist">Pre-Flight Checklist</Tabs.Tab>
       </Tabs.List>
+
       {/* Data */}
       <DataTabsSection
         tabPadding={tabPadding}
diff --git a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
index 6827c29eb..6d1446fca 100644
--- a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
+++ b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
@@ -3,7 +3,7 @@
  * Contains the preflight checklist
  */
 
-import { Tabs, Accordion, Button, Modal, TextInput } from "@mantine/core";
+import { Tabs, Accordion, Button, Modal, TextInput, ScrollArea } from "@mantine/core";
 import CheckListArea from "../preFlightChecklist/checkListArea.jsx";
 import { useLocalStorage } from "@mantine/hooks";
 
@@ -69,6 +69,8 @@ export default function PreFlightChecklistTab({tabPadding}) {
         </Accordion>
         {/* Controls */}
         <Button className="!w-full !mt-4" onClick={() => setNewChecklistModal(true)}>Add a new Checklist</Button>
+
+        {/* New checklist modal */}
         <Modal
           opened={showNewChecklistModal}
           onClose={() => setNewChecklistModal(false)}

From fb5fd0408f0edfd37492ab05e6db52a9598fa747 Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sat, 29 Mar 2025 23:18:46 +0000
Subject: [PATCH 07/19] moved edit to modal

---
 .../preFlightChecklist/checkListArea.jsx      | 49 ++++----------
 .../preFlightChecklist/checkListEdit.jsx      | 65 +++++++++++++++++++
 2 files changed, 77 insertions(+), 37 deletions(-)
 create mode 100644 gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx

diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
index 235ae9951..d6966258e 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
@@ -4,6 +4,7 @@
 
 import { Button, Checkbox, Modal, Textarea, TextInput} from "@mantine/core"
 import { useEffect, useState } from "react"
+import EditCheckList from "./checkListEdit.jsx"
 
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
@@ -11,8 +12,8 @@ import tailwindConfig from "../../../../tailwind.config.js"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 export default function CheckListArea({name, items, saveItems, deleteChecklist}) {
-  const [editMode, setEditMode] = useState(false)
   const [showDeleteModal, setDeleteModal] = useState(false)
+  const [editCheckListModal, setEditCheckListModal] = useState(false)
   const [checkListName, setChecklistName] = useState(name);
   const [checkBoxList, setCheckboxList] = useState(items)
   const [checkBoxListString, setCheckboxListString] = useState(generateCheckboxListString())
@@ -72,7 +73,7 @@ export default function CheckListArea({name, items, saveItems, deleteChecklist})
   return (
     <>
       {/* Checkbox area */}
-      <div className={`flex flex-col gap-2 ${editMode ? "hidden" : ""}`}>
+      <div className="flex flex-col gap-2">
         {mappedItems}
 
         <div className="flex w-full justify-between pt-2">
@@ -80,45 +81,19 @@ export default function CheckListArea({name, items, saveItems, deleteChecklist})
         </div>
         <div className="flex w-full justify-between flex-row-reverse">
           <a className="text-xs text-falconred-400 hover:underline hover:cursor-pointer" onClick={() => setDeleteModal(true)}>Delete this checklist</a>
-          <a className="text-xs text-falcongrey-200 hover:underline hover:cursor-pointer" onClick={() => setEditMode(true)}>Edit this checklist</a>
+          <a className="text-xs text-falcongrey-200 hover:underline hover:cursor-pointer" onClick={() => setEditCheckListModal(true)}>Edit this checklist</a>
         </div>
       </div>
       
       {/* Edit mode */}
-      <div className={`flex flex-col gap-2 ${editMode ? "" : "hidden"}`}>
-        {/* Inputs */}
-        <TextInput
-          label="Checklist Name"
-          value={checkListName}
-          onChange={(event) => setChecklistName(event.currentTarget.value)}
-        />
-        <TextInput 
-          label="Values"
-          description="The checklist items in a comma separated list"
-          value={checkBoxListString} 
-          onChange={(e) => setCheckboxListString(e.currentTarget.value)}
-        />
-
-        {/* Controls */}
-        <div className="w-full flex justify-between pt-2">
-          <Button 
-            onClick={() => {setEditMode(false); generateCheckboxListString(true)}} 
-            variant="filled"
-            type="submit"
-            color={tailwindColors.red[600]}
-          >
-            Cancel
-          </Button>
-          <Button 
-            onClick={() => {setEditMode(false); generateCheckboxList()}} 
-            variant="filled"
-            type="submit"
-            color={tailwindColors.green[600]}
-          >
-            Save
-          </Button>
-        </div>
-      </div>
+      <EditCheckList 
+        opened={editCheckListModal} 
+        close={() => setEditCheckListModal(false)} 
+        nameSet={[checkListName, setChecklistName]} 
+        checkListSet={[checkBoxListString, setCheckboxListString]}
+        generateCheckboxListString={generateCheckboxListString}
+        generateCheckboxList={generateCheckboxList}
+      />
 
       {/* Generic "are you sure" modal */}
       <Modal
diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
new file mode 100644
index 000000000..12c8002e4
--- /dev/null
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
@@ -0,0 +1,65 @@
+/*
+  The modal to edit a checklist
+*/
+
+import { Button, Modal, TextInput } from "@mantine/core";
+
+// Styling imports
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../../../../tailwind.config.js"
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
+
+export default function EditCheckList({opened, close, nameSet, checkListSet, generateCheckboxListString, generateCheckboxList}) {
+  const [name, setName] = nameSet
+  const [checkboxList, setCheckboxLate] = checkListSet
+
+  return (
+    <Modal 
+      title="Edit Checklist" 
+      opened={opened} 
+      onClose={() => close()} 
+      styles={{
+        content: {
+          borderRadius: "0.5rem",
+        },
+      }}
+      size={"xl"}
+      centered
+    >
+      <div className="flex flex-col gap-2">
+        {/* Inputs */}
+        <TextInput
+          label="Checklist Name"
+          value={name}
+          onChange={(event) => setName(event.currentTarget.value)}
+        />
+        <TextInput 
+          label="Values"
+          description="The checklist items in a comma separated list"
+          value={checkboxList} 
+          onChange={(e) => setCheckboxLate(e.currentTarget.value)}
+        />
+
+        {/* Controls */}
+        <div className="w-full flex justify-between pt-2">
+          <Button 
+            onClick={() => {close(); generateCheckboxListString(true)}} 
+            variant="filled"
+            type="submit"
+            color={tailwindColors.red[600]}
+          >
+            Cancel
+          </Button>
+          <Button 
+            onClick={() => {close(); generateCheckboxList()}} 
+            variant="filled"
+            type="submit"
+            color={tailwindColors.green[600]}
+          >
+            Save
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
\ No newline at end of file

From ecaae1c753b4ae0cd9edf223708b6ffa921ce91e Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sun, 30 Mar 2025 00:19:50 +0000
Subject: [PATCH 08/19] using rich text editor

---
 gcs/package.json                              |  9 +++--
 .../preFlightChecklist/checkListArea.jsx      |  3 +-
 .../preFlightChecklist/checkListEdit.jsx      | 34 ++++++++++++++++---
 gcs/src/main.jsx                              |  1 +
 4 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/gcs/package.json b/gcs/package.json
index 252c734c6..823f1e1ed 100644
--- a/gcs/package.json
+++ b/gcs/package.json
@@ -27,14 +27,19 @@
   "dependencies": {
     "@headlessui/react": "2.1.4",
     "@mantine/code-highlight": "^7.17.1",
-    "@mantine/core": "^7.3.2",
-    "@mantine/hooks": "^7.3.2",
+    "@mantine/core": "^7.17.3",
+    "@mantine/hooks": "^7.17.3",
     "@mantine/notifications": "^7.4.0",
     "@mantine/spotlight": "^7.15.3",
+    "@mantine/tiptap": "^7.17.3",
     "@reduxjs/toolkit": "^2.2.7",
     "@robloche/chartjs-plugin-streaming": "^3.1.0",
     "@tabler/icons-react": "^2.44.0",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tiptap/extension-link": "^2.11.6",
+    "@tiptap/pm": "^2.11.6",
+    "@tiptap/react": "^2.11.6",
+    "@tiptap/starter-kit": "^2.11.6",
     "@tremor/react": "^3.12.1",
     "@turf/turf": "^7.2.0",
     "chart.js": "^4.4.2",
diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
index d6966258e..cdb92a637 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
@@ -20,7 +20,7 @@ export default function CheckListArea({name, items, saveItems, deleteChecklist})
   const [mappedItems, setMappedItems] = useState(generateMappedItems())
 
   function generateCheckboxListString(set = false) {
-    // Go from list to string, returns
+    // Go from list to string, returns0
     var final = ""
     checkBoxList.map((element) => {
       final += element.name + ", "
@@ -36,6 +36,7 @@ export default function CheckListArea({name, items, saveItems, deleteChecklist})
 
   function generateCheckboxList() {
     // Go from string to list, does not return
+    console.log(checkBoxListString)
     var final = []
     checkBoxListString.split(/,\s|,/).map((element) => {
       final.push({
diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
index 12c8002e4..c0f3b3d93 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
@@ -3,6 +3,10 @@
 */
 
 import { Button, Modal, TextInput } from "@mantine/core";
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { RichTextEditor } from '@mantine/tiptap';
+
 
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
@@ -11,7 +15,15 @@ const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 export default function EditCheckList({opened, close, nameSet, checkListSet, generateCheckboxListString, generateCheckboxList}) {
   const [name, setName] = nameSet
-  const [checkboxList, setCheckboxLate] = checkListSet
+  const [checkboxList, setCheckboxList] = checkListSet
+
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: checkboxList,
+    onUpdate: ({ editor }) => {
+      setCheckboxList(editor.getHTML());
+    },
+  });
 
   return (
     <Modal 
@@ -28,17 +40,31 @@ export default function EditCheckList({opened, close, nameSet, checkListSet, gen
     >
       <div className="flex flex-col gap-2">
         {/* Inputs */}
+        <h1>Name</h1>
         <TextInput
-          label="Checklist Name"
           value={name}
           onChange={(event) => setName(event.currentTarget.value)}
         />
-        <TextInput 
+        {/* <TextInput 
           label="Values"
           description="The checklist items in a comma separated list"
           value={checkboxList} 
           onChange={(e) => setCheckboxLate(e.currentTarget.value)}
-        />
+        /> */}
+
+        <div>
+          <h1>Items</h1>
+          <h2 className="text-falcongrey-300 text-sm">Bullet point list of items</h2>
+        </div>
+        <RichTextEditor editor={editor} classNames={{content: "!list-disc"}}>
+          <RichTextEditor.Toolbar sticky stickyOffset={60}>
+            <RichTextEditor.ControlsGroup>
+              <RichTextEditor.BulletList />
+            </RichTextEditor.ControlsGroup>
+          </RichTextEditor.Toolbar>
+
+          <RichTextEditor.Content />
+        </RichTextEditor>
 
         {/* Controls */}
         <div className="w-full flex justify-between pt-2">
diff --git a/gcs/src/main.jsx b/gcs/src/main.jsx
index 4112bcd93..882bd630f 100644
--- a/gcs/src/main.jsx
+++ b/gcs/src/main.jsx
@@ -6,6 +6,7 @@ import "@mantine/core/styles.css"
 import "@mantine/notifications/styles.css"
 import "@mantine/spotlight/styles.css"
 import '@mantine/code-highlight/styles.css'
+import '@mantine/tiptap/styles.css';
 
 // React imports
 import { HashRouter } from "react-router-dom"

From 75e8ae93f7f8833830f9c70859aee8cda442eb16 Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sun, 30 Mar 2025 00:43:48 +0000
Subject: [PATCH 09/19] bruh

---
 .../preFlightChecklist/checkListArea.jsx      | 21 ++++++++++---------
 .../preFlightChecklist/checkListEdit.jsx      | 12 ++---------
 .../preFlightChecklistSection.jsx             |  5 +++--
 3 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
index cdb92a637..2523602af 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
@@ -11,7 +11,7 @@ import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../../tailwind.config.js"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
-export default function CheckListArea({name, items, saveItems, deleteChecklist}) {
+export default function CheckListArea({name, items, saveItems, deleteChecklist, setName}) {
   const [showDeleteModal, setDeleteModal] = useState(false)
   const [editCheckListModal, setEditCheckListModal] = useState(false)
   const [checkListName, setChecklistName] = useState(name);
@@ -21,12 +21,12 @@ export default function CheckListArea({name, items, saveItems, deleteChecklist})
 
   function generateCheckboxListString(set = false) {
     // Go from list to string, returns0
-    var final = ""
+    var final = "<ul>"
     checkBoxList.map((element) => {
-      final += element.name + ", "
+      final += "<li><p>" + element.name + "</p></li>"
     })
 
-    final = final.substring(0, final.length - 2)
+    final += "</ul>"
     if (set) {
       setCheckboxListString(final)
     }
@@ -38,10 +38,10 @@ export default function CheckListArea({name, items, saveItems, deleteChecklist})
     // Go from string to list, does not return
     console.log(checkBoxListString)
     var final = []
-    checkBoxListString.split(/,\s|,/).map((element) => {
+    checkBoxListString.split("<li><p>").splice(1).map((element) => {
       final.push({
         "checked": false,
-        "name": element.trimStart()
+        "name": element.split("</p>")[0].trim()
       })
     })
     setCheckboxList(final)
@@ -49,10 +49,11 @@ export default function CheckListArea({name, items, saveItems, deleteChecklist})
 
   function setChecked(name, value) {
     var final = []
-    checkBoxListString.split(/,\s|,/).map((element) => {
+    checkBoxListString.split("<li><p>").splice(1).map((element) => {
+      var elementName = element.split("</p>")[0].trim()
       final.push({
-        "checked": element.trimStart() == name ? value : checkBoxList.find((e) => e.name == element.trimStart()).checked,
-        "name": element.trimStart()
+        "checked": elementName == name ? value : checkBoxList.find((e) => e.name == elementName).checked,
+        "name": elementName
       })
     })
     setCheckboxList(final)
@@ -90,7 +91,7 @@ export default function CheckListArea({name, items, saveItems, deleteChecklist})
       <EditCheckList 
         opened={editCheckListModal} 
         close={() => setEditCheckListModal(false)} 
-        nameSet={[checkListName, setChecklistName]} 
+        nameSet={[checkListName, setChecklistName, (e) => setName(e)]} 
         checkListSet={[checkBoxListString, setCheckboxListString]}
         generateCheckboxListString={generateCheckboxListString}
         generateCheckboxList={generateCheckboxList}
diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
index c0f3b3d93..4c8e7a3f4 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
@@ -14,7 +14,7 @@ import tailwindConfig from "../../../../tailwind.config.js"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 export default function EditCheckList({opened, close, nameSet, checkListSet, generateCheckboxListString, generateCheckboxList}) {
-  const [name, setName] = nameSet
+  const [name, setName, finaliseName] = nameSet  // Finalise changes it in the selected accordion (ik annoying...)
   const [checkboxList, setCheckboxList] = checkListSet
 
   const editor = useEditor({
@@ -45,12 +45,6 @@ export default function EditCheckList({opened, close, nameSet, checkListSet, gen
           value={name}
           onChange={(event) => setName(event.currentTarget.value)}
         />
-        {/* <TextInput 
-          label="Values"
-          description="The checklist items in a comma separated list"
-          value={checkboxList} 
-          onChange={(e) => setCheckboxLate(e.currentTarget.value)}
-        /> */}
 
         <div>
           <h1>Items</h1>
@@ -71,15 +65,13 @@ export default function EditCheckList({opened, close, nameSet, checkListSet, gen
           <Button 
             onClick={() => {close(); generateCheckboxListString(true)}} 
             variant="filled"
-            type="submit"
             color={tailwindColors.red[600]}
           >
             Cancel
           </Button>
           <Button 
-            onClick={() => {close(); generateCheckboxList()}} 
+            onClick={() => {finaliseName(name); generateCheckboxList(); close()}} 
             variant="filled"
-            type="submit"
             color={tailwindColors.green[600]}
           >
             Save
diff --git a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
index 6d1446fca..2d133ae0f 100644
--- a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
+++ b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
@@ -34,7 +34,7 @@ export default function PreFlightChecklistTab({tabPadding}) {
 
   function createNewChecklist() {
     if (newChecklistName !== "") {
-      preFlightChecklistItems.push({ "name": newChecklistName, "value": [ {"checked": false, "name": "Click 'Edit this checklist' to add new values"} ] })
+      preFlightChecklistItems.push({ "name": newChecklistName, "value": [ {"checked": false, "name": "<ul><li><p>Click 'Edit this checklist' to add new values</p></li></ul>"} ] })
       setPreFlightChecklistItems(preFlightChecklistItems)
       setOpenChecklist(newChecklistName)
       setNewChecklistModal(false)
@@ -55,6 +55,7 @@ export default function PreFlightChecklistTab({tabPadding}) {
           saveItems={(e) => { item.value = e; setPreFlightChecklistItems(preFlightChecklistItems) }} 
           deleteChecklist={() => deleteChecklist(item)}
           name={item.name}
+          setName={(e) => { item.name = e; setOpenChecklist(e) }}
         />
       </Accordion.Panel>
     </Accordion.Item>
@@ -63,7 +64,7 @@ export default function PreFlightChecklistTab({tabPadding}) {
   return (
     <Tabs.Panel value="preFlightChecklist">
       <div className={tabPadding}>
-        {/* List */}
+        {/* List, known issue of not opening the same list if name was changed but it's not worth it */}
         <Accordion variant="separated" defaultValue={openChecklist}>
           {items}
         </Accordion>

From b421269fa571298c9070e6cd177bba4b3b1dea1b Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sun, 30 Mar 2025 00:45:10 +0000
Subject: [PATCH 10/19] lovely

---
 .../dashboard/tabsSectionTabs/preFlightChecklistSection.jsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
index 2d133ae0f..4f0d323d8 100644
--- a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
+++ b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
@@ -34,7 +34,7 @@ export default function PreFlightChecklistTab({tabPadding}) {
 
   function createNewChecklist() {
     if (newChecklistName !== "") {
-      preFlightChecklistItems.push({ "name": newChecklistName, "value": [ {"checked": false, "name": "<ul><li><p>Click 'Edit this checklist' to add new values</p></li></ul>"} ] })
+      preFlightChecklistItems.push({ "name": newChecklistName, "value": [ {"checked": false, "name": "Click 'Edit this checklist' to add new values"} ] })
       setPreFlightChecklistItems(preFlightChecklistItems)
       setOpenChecklist(newChecklistName)
       setNewChecklistModal(false)

From fe11ec6b69100df37a1d1076ddf28bf2f8a2074b Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sun, 30 Mar 2025 00:51:24 +0000
Subject: [PATCH 11/19] fixed styling

---
 gcs/src/css/index.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/gcs/src/css/index.css b/gcs/src/css/index.css
index 3dffba100..718aa0d92 100644
--- a/gcs/src/css/index.css
+++ b/gcs/src/css/index.css
@@ -14,6 +14,10 @@
   -webkit-text-size-adjust: 100%;
 
   @apply bg-falcongrey-800 text-neutral-50 h-full max-h-full min-h-screen;
+
+  ul, ol {
+    list-style: revert;
+  }
 }
 
 :root[data-mantine-color-scheme="dark"] {

From 9bc2ae389006c3156ce0757f8919b62407e46792 Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sun, 30 Mar 2025 00:55:57 +0000
Subject: [PATCH 12/19] formatted

---
 gcs/src/components/customMantineTheme.jsx     |   2 +-
 .../components/dashboard/floatingToolbar.jsx  |  15 ---
 .../preFlightChecklist/checkListArea.jsx      | 114 +++++++++++++-----
 .../preFlightChecklist/checkListEdit.jsx      |  56 ++++++---
 .../preFlightChecklist/preFlightChecklist.jsx |  57 ++++++---
 gcs/src/components/dashboard/tabsSection.jsx  |   2 +-
 .../preFlightChecklistSection.jsx             |  89 ++++++++++----
 gcs/src/components/dashboard/telemetry.jsx    |   9 +-
 gcs/src/components/error/errorBoundary.jsx    |   2 +-
 gcs/src/components/noDroneConnected.jsx       |   2 +-
 gcs/src/css/index.css                         |   9 +-
 gcs/src/dashboard.jsx                         |   4 +-
 gcs/src/main.jsx                              |   4 +-
 13 files changed, 244 insertions(+), 121 deletions(-)

diff --git a/gcs/src/components/customMantineTheme.jsx b/gcs/src/components/customMantineTheme.jsx
index b4133cbd2..ee32fa6c1 100644
--- a/gcs/src/components/customMantineTheme.jsx
+++ b/gcs/src/components/customMantineTheme.jsx
@@ -27,5 +27,5 @@ export const CustomMantineTheme = createTheme({
       tailwindColors.falcongrey[950],
     ],
   },
-  cursorType: 'pointer'
+  cursorType: "pointer",
 })
diff --git a/gcs/src/components/dashboard/floatingToolbar.jsx b/gcs/src/components/dashboard/floatingToolbar.jsx
index f1f465662..c0ae587e9 100644
--- a/gcs/src/components/dashboard/floatingToolbar.jsx
+++ b/gcs/src/components/dashboard/floatingToolbar.jsx
@@ -8,7 +8,6 @@ import { useLocalStorage } from "@mantine/hooks"
 import {
   IconAnchor,
   IconAnchorOff,
-  IconChecklist,
   IconCrosshair,
   IconMapPins,
   IconSun,
@@ -18,8 +17,6 @@ import {
 // Helper Functions
 import { filterMissionItems } from "../../helpers/filterMissions"
 import GetOutsideVisibilityColor from "../../helpers/outsideVisibility"
-import { useState } from "react"
-import PreFlightChecklist from "./preFlightChecklist/preFlightChecklist"
 
 export default function FloatingToolbar({
   missionItems,
@@ -34,7 +31,6 @@ export default function FloatingToolbar({
     key: "outsideVisibility",
     defaultValue: false,
   })
-  const [preflightModal, setPreflightModal] = useState(false);
 
   function updateFollowDroneAction() {
     setFollowDrone(
@@ -129,17 +125,6 @@ export default function FloatingToolbar({
           {outsideVisibility ? <IconSun /> : <IconSunOff />}
         </ActionIcon>
       </Tooltip>
-
-      {/* Preflight checklist */}
-      {/* <Tooltip
-        label="Preflight Checklist"
-      >
-        <ActionIcon
-        >
-          <IconChecklist onClick={() => setPreflightModal(true)} />
-        </ActionIcon>
-      </Tooltip>
-      <PreFlightChecklist showModal={preflightModal} setShowModal={setPreflightModal} /> */}
     </div>
   )
 }
diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
index 2523602af..602866f69 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
@@ -2,8 +2,13 @@
   The Checklist area, this can be edited.
 */
 
-import { Button, Checkbox, Modal, Textarea, TextInput} from "@mantine/core"
+// Native imports
 import { useEffect, useState } from "react"
+
+// 3rd Party Imports
+import { Button, Checkbox, Modal } from "@mantine/core"
+
+// Local Imports
 import EditCheckList from "./checkListEdit.jsx"
 
 // Styling imports
@@ -11,12 +16,20 @@ import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../../tailwind.config.js"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
-export default function CheckListArea({name, items, saveItems, deleteChecklist, setName}) {
+export default function CheckListArea({
+  name,
+  items,
+  saveItems,
+  deleteChecklist,
+  setName,
+}) {
   const [showDeleteModal, setDeleteModal] = useState(false)
   const [editCheckListModal, setEditCheckListModal] = useState(false)
-  const [checkListName, setChecklistName] = useState(name);
+  const [checkListName, setChecklistName] = useState(name)
   const [checkBoxList, setCheckboxList] = useState(items)
-  const [checkBoxListString, setCheckboxListString] = useState(generateCheckboxListString())
+  const [checkBoxListString, setCheckboxListString] = useState(
+    generateCheckboxListString(),
+  )
   const [mappedItems, setMappedItems] = useState(generateMappedItems())
 
   function generateCheckboxListString(set = false) {
@@ -38,33 +51,47 @@ export default function CheckListArea({name, items, saveItems, deleteChecklist,
     // Go from string to list, does not return
     console.log(checkBoxListString)
     var final = []
-    checkBoxListString.split("<li><p>").splice(1).map((element) => {
-      final.push({
-        "checked": false,
-        "name": element.split("</p>")[0].trim()
+    checkBoxListString
+      .split("<li><p>")
+      .splice(1)
+      .map((element) => {
+        final.push({
+          checked: false,
+          name: element.split("</p>")[0].trim(),
+        })
       })
-    })
     setCheckboxList(final)
   }
 
   function setChecked(name, value) {
     var final = []
-    checkBoxListString.split("<li><p>").splice(1).map((element) => {
-      var elementName = element.split("</p>")[0].trim()
-      final.push({
-        "checked": elementName == name ? value : checkBoxList.find((e) => e.name == elementName).checked,
-        "name": elementName
+    checkBoxListString
+      .split("<li><p>")
+      .splice(1)
+      .map((element) => {
+        var elementName = element.split("</p>")[0].trim()
+        final.push({
+          checked:
+            elementName == name
+              ? value
+              : checkBoxList.find((e) => e.name == elementName).checked,
+          name: elementName,
+        })
       })
-    })
     setCheckboxList(final)
   }
 
   function generateMappedItems() {
-    return (
-      checkBoxList.map((element) => {
-        return <Checkbox checked={element.checked} key={element.name} label={element.name} onChange={() => setChecked(element.name, !element.checked)}/>
-      })
-    )
+    return checkBoxList.map((element) => {
+      return (
+        <Checkbox
+          checked={element.checked}
+          key={element.name}
+          label={element.name}
+          onChange={() => setChecked(element.name, !element.checked)}
+        />
+      )
+    })
   }
 
   useEffect(() => {
@@ -79,19 +106,34 @@ export default function CheckListArea({name, items, saveItems, deleteChecklist,
         {mappedItems}
 
         <div className="flex w-full justify-between pt-2">
-          <a className="text-xs text-falcongrey-200 hover:underline hover:cursor-pointer" onClick={() => generateCheckboxList()}>Uncheck all</a>
+          <a
+            className="text-xs text-falcongrey-200 hover:underline hover:cursor-pointer"
+            onClick={() => generateCheckboxList()}
+          >
+            Uncheck all
+          </a>
         </div>
         <div className="flex w-full justify-between flex-row-reverse">
-          <a className="text-xs text-falconred-400 hover:underline hover:cursor-pointer" onClick={() => setDeleteModal(true)}>Delete this checklist</a>
-          <a className="text-xs text-falcongrey-200 hover:underline hover:cursor-pointer" onClick={() => setEditCheckListModal(true)}>Edit this checklist</a>
+          <a
+            className="text-xs text-falconred-400 hover:underline hover:cursor-pointer"
+            onClick={() => setDeleteModal(true)}
+          >
+            Delete this checklist
+          </a>
+          <a
+            className="text-xs text-falcongrey-200 hover:underline hover:cursor-pointer"
+            onClick={() => setEditCheckListModal(true)}
+          >
+            Edit this checklist
+          </a>
         </div>
       </div>
-      
+
       {/* Edit mode */}
-      <EditCheckList 
-        opened={editCheckListModal} 
-        close={() => setEditCheckListModal(false)} 
-        nameSet={[checkListName, setChecklistName, (e) => setName(e)]} 
+      <EditCheckList
+        opened={editCheckListModal}
+        close={() => setEditCheckListModal(false)}
+        nameSet={[checkListName, setChecklistName, (e) => setName(e)]}
         checkListSet={[checkBoxListString, setCheckboxListString]}
         generateCheckboxListString={generateCheckboxListString}
         generateCheckboxList={generateCheckboxList}
@@ -111,10 +153,20 @@ export default function CheckListArea({name, items, saveItems, deleteChecklist,
         withCloseButton={false}
       >
         <div className="flex w-full justify-between pt-4">
-          <Button color={tailwindColors.red[600]} onClick={() => setDeleteModal(false)}>No, cancel</Button>
-          <Button color={tailwindColors.green[600]} onClick={() => deleteChecklist()}>Yes, Continue</Button>
+          <Button
+            color={tailwindColors.red[600]}
+            onClick={() => setDeleteModal(false)}
+          >
+            No, cancel
+          </Button>
+          <Button
+            color={tailwindColors.green[600]}
+            onClick={() => deleteChecklist()}
+          >
+            Yes, Continue
+          </Button>
         </div>
       </Modal>
     </>
   )
-}
\ No newline at end of file
+}
diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
index 4c8e7a3f4..7ff3bdff4 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
@@ -2,34 +2,41 @@
   The modal to edit a checklist
 */
 
-import { Button, Modal, TextInput } from "@mantine/core";
-import { useEditor } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import { RichTextEditor } from '@mantine/tiptap';
-
+// 3rd Party Imports
+import { Button, Modal, TextInput } from "@mantine/core"
+import { useEditor } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import { RichTextEditor } from "@mantine/tiptap"
 
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../../tailwind.config.js"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
-export default function EditCheckList({opened, close, nameSet, checkListSet, generateCheckboxListString, generateCheckboxList}) {
-  const [name, setName, finaliseName] = nameSet  // Finalise changes it in the selected accordion (ik annoying...)
+export default function EditCheckList({
+  opened,
+  close,
+  nameSet,
+  checkListSet,
+  generateCheckboxListString,
+  generateCheckboxList,
+}) {
+  const [name, setName, finaliseName] = nameSet // Finalise changes it in the selected accordion (ik annoying...)
   const [checkboxList, setCheckboxList] = checkListSet
 
   const editor = useEditor({
     extensions: [StarterKit],
     content: checkboxList,
     onUpdate: ({ editor }) => {
-      setCheckboxList(editor.getHTML());
+      setCheckboxList(editor.getHTML())
     },
-  });
+  })
 
   return (
-    <Modal 
-      title="Edit Checklist" 
-      opened={opened} 
-      onClose={() => close()} 
+    <Modal
+      title="Edit Checklist"
+      opened={opened}
+      onClose={() => close()}
       styles={{
         content: {
           borderRadius: "0.5rem",
@@ -48,9 +55,11 @@ export default function EditCheckList({opened, close, nameSet, checkListSet, gen
 
         <div>
           <h1>Items</h1>
-          <h2 className="text-falcongrey-300 text-sm">Bullet point list of items</h2>
+          <h2 className="text-falcongrey-300 text-sm">
+            Bullet point list of items
+          </h2>
         </div>
-        <RichTextEditor editor={editor} classNames={{content: "!list-disc"}}>
+        <RichTextEditor editor={editor} classNames={{ content: "!list-disc" }}>
           <RichTextEditor.Toolbar sticky stickyOffset={60}>
             <RichTextEditor.ControlsGroup>
               <RichTextEditor.BulletList />
@@ -62,15 +71,22 @@ export default function EditCheckList({opened, close, nameSet, checkListSet, gen
 
         {/* Controls */}
         <div className="w-full flex justify-between pt-2">
-          <Button 
-            onClick={() => {close(); generateCheckboxListString(true)}} 
+          <Button
+            onClick={() => {
+              close()
+              generateCheckboxListString(true)
+            }}
             variant="filled"
             color={tailwindColors.red[600]}
           >
             Cancel
           </Button>
-          <Button 
-            onClick={() => {finaliseName(name); generateCheckboxList(); close()}} 
+          <Button
+            onClick={() => {
+              finaliseName(name)
+              generateCheckboxList()
+              close()
+            }}
             variant="filled"
             color={tailwindColors.green[600]}
           >
@@ -80,4 +96,4 @@ export default function EditCheckList({opened, close, nameSet, checkListSet, gen
       </div>
     </Modal>
   )
-}
\ No newline at end of file
+}
diff --git a/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx b/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx
index fc1f3d7f6..bbec8ff0e 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx
@@ -2,48 +2,71 @@
   Preflight checklist modal, a popup that allows the user to tick off things for their flight
 */
 
-import { Modal, Accordion, Button } from "@mantine/core";
-import CheckListArea from "./checkListArea";
-import { useLocalStorage } from "@mantine/hooks";
+import { Modal, Accordion, Button } from "@mantine/core"
+import CheckListArea from "./checkListArea"
+import { useLocalStorage } from "@mantine/hooks"
 
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../../tailwind.config.js"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
-export default function PreFlightChecklist({showModal, setShowModal}) {
-  const [preFlightChecklistItems, setPreFlightChecklistItems] = useLocalStorage({ key: "preFlightCheckList", defaultValue: []})
-  const [openChecklist, setOpenChecklist] = useLocalStorage({ key: "lastOpenedPreFlightCheckList", defaultValue: "" })
+export default function PreFlightChecklist({ showModal, setShowModal }) {
+  const [preFlightChecklistItems, setPreFlightChecklistItems] = useLocalStorage(
+    { key: "preFlightCheckList", defaultValue: [] },
+  )
+  const [openChecklist, setOpenChecklist] = useLocalStorage({
+    key: "lastOpenedPreFlightCheckList",
+    defaultValue: "",
+  })
 
   const items = preFlightChecklistItems.map((item) => (
-    <Accordion.Item key={item.name} value={item.name} onClick={() => setOpenChecklist(item.name)}>
+    <Accordion.Item
+      key={item.name}
+      value={item.name}
+      onClick={() => setOpenChecklist(item.name)}
+    >
       <Accordion.Control>{item.name}</Accordion.Control>
       <Accordion.Panel>
-        <CheckListArea items={item.value} saveItems={(e) => { item.value = e; setPreFlightChecklistItems(preFlightChecklistItems) }} />
+        <CheckListArea
+          items={item.value}
+          saveItems={(e) => {
+            item.value = e
+            setPreFlightChecklistItems(preFlightChecklistItems)
+          }}
+        />
       </Accordion.Panel>
     </Accordion.Item>
-  ));
+  ))
 
   return (
-    <Modal 
-      opened={showModal} 
-      onClose={() => setShowModal(false)} 
+    <Modal
+      opened={showModal}
+      onClose={() => setShowModal(false)}
       size={"xl"}
-      title="Preflight Checklist" 
-      centered 
+      title="Preflight Checklist"
+      centered
       styles={{
         content: {
           borderRadius: "0.5rem",
         },
       }}
-    > 
+    >
       <Accordion variant="separated" defaultValue={openChecklist}>
         {items}
       </Accordion>
       <div className="flex w-full justify-between pt-4">
         <Button color={tailwindColors.red[600]}>Delete a Checklist</Button>
-        <Button color={tailwindColors.green[600]} onClick={() => {preFlightChecklistItems.push({ "name": "test", "value": [] }); setPreFlightChecklistItems(preFlightChecklistItems)}}>Add a new Checklist</Button>
+        <Button
+          color={tailwindColors.green[600]}
+          onClick={() => {
+            preFlightChecklistItems.push({ name: "test", value: [] })
+            setPreFlightChecklistItems(preFlightChecklistItems)
+          }}
+        >
+          Add a new Checklist
+        </Button>
       </div>
     </Modal>
   )
-}
\ No newline at end of file
+}
diff --git a/gcs/src/components/dashboard/tabsSection.jsx b/gcs/src/components/dashboard/tabsSection.jsx
index 29bc57eb6..668221837 100644
--- a/gcs/src/components/dashboard/tabsSection.jsx
+++ b/gcs/src/components/dashboard/tabsSection.jsx
@@ -4,7 +4,7 @@
 */
 
 // 3rd Party Imports
-import { ScrollArea, Tabs } from "@mantine/core"
+import { Tabs } from "@mantine/core"
 
 // Tab Componenents
 import CameraTabsSection from "./tabsSectionTabs/CameraTabsSection"
diff --git a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
index 4f0d323d8..c68c51dc6 100644
--- a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
+++ b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
@@ -3,24 +3,34 @@
  * Contains the preflight checklist
  */
 
-import { Tabs, Accordion, Button, Modal, TextInput, ScrollArea } from "@mantine/core";
-import CheckListArea from "../preFlightChecklist/checkListArea.jsx";
-import { useLocalStorage } from "@mantine/hooks";
+// Native imports
+import { useState } from "react"
+
+// 3rd Party Imports
+import { Tabs, Accordion, Button, Modal, TextInput } from "@mantine/core"
+import { useLocalStorage } from "@mantine/hooks"
+
+// Local imports
+import CheckListArea from "../preFlightChecklist/checkListArea.jsx"
+import { showErrorNotification } from "../../../helpers/notification.js"
 
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../../tailwind.config.js"
-import { useState } from "react";
-import { showErrorNotification } from "../../../helpers/notification.js";
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
-export default function PreFlightChecklistTab({tabPadding}) {
-  const [preFlightChecklistItems, setPreFlightChecklistItems] = useLocalStorage({ key: "preFlightCheckList", defaultValue: []})
-  const [openChecklist, setOpenChecklist] = useLocalStorage({ key: "lastOpenedPreFlightCheckList", defaultValue: "" })
-  
+export default function PreFlightChecklistTab({ tabPadding }) {
+  const [preFlightChecklistItems, setPreFlightChecklistItems] = useLocalStorage(
+    { key: "preFlightCheckList", defaultValue: [] },
+  )
+  const [openChecklist, setOpenChecklist] = useLocalStorage({
+    key: "lastOpenedPreFlightCheckList",
+    defaultValue: "",
+  })
+
   // New checklist
   const [showNewChecklistModal, setNewChecklistModal] = useState(false)
-  const [newChecklistName, setNewChecklistName] = useState("");
+  const [newChecklistName, setNewChecklistName] = useState("")
 
   function deleteChecklist(toDelete) {
     var final = []
@@ -34,7 +44,15 @@ export default function PreFlightChecklistTab({tabPadding}) {
 
   function createNewChecklist() {
     if (newChecklistName !== "") {
-      preFlightChecklistItems.push({ "name": newChecklistName, "value": [ {"checked": false, "name": "Click 'Edit this checklist' to add new values"} ] })
+      preFlightChecklistItems.push({
+        name: newChecklistName,
+        value: [
+          {
+            checked: false,
+            name: "Click 'Edit this checklist' to add new values",
+          },
+        ],
+      })
       setPreFlightChecklistItems(preFlightChecklistItems)
       setOpenChecklist(newChecklistName)
       setNewChecklistModal(false)
@@ -47,20 +65,30 @@ export default function PreFlightChecklistTab({tabPadding}) {
   }
 
   const items = preFlightChecklistItems.map((item) => (
-    <Accordion.Item key={item.name} value={item.name} onClick={() => setOpenChecklist(item.name)}>
+    <Accordion.Item
+      key={item.name}
+      value={item.name}
+      onClick={() => setOpenChecklist(item.name)}
+    >
       <Accordion.Control>{item.name}</Accordion.Control>
       <Accordion.Panel>
-        <CheckListArea 
-          items={item.value} 
-          saveItems={(e) => { item.value = e; setPreFlightChecklistItems(preFlightChecklistItems) }} 
+        <CheckListArea
+          items={item.value}
+          saveItems={(e) => {
+            item.value = e
+            setPreFlightChecklistItems(preFlightChecklistItems)
+          }}
           deleteChecklist={() => deleteChecklist(item)}
           name={item.name}
-          setName={(e) => { item.name = e; setOpenChecklist(e) }}
+          setName={(e) => {
+            item.name = e
+            setOpenChecklist(e)
+          }}
         />
       </Accordion.Panel>
     </Accordion.Item>
-  ));
-  
+  ))
+
   return (
     <Tabs.Panel value="preFlightChecklist">
       <div className={tabPadding}>
@@ -69,7 +97,12 @@ export default function PreFlightChecklistTab({tabPadding}) {
           {items}
         </Accordion>
         {/* Controls */}
-        <Button className="!w-full !mt-4" onClick={() => setNewChecklistModal(true)}>Add a new Checklist</Button>
+        <Button
+          className="!w-full !mt-4"
+          onClick={() => setNewChecklistModal(true)}
+        >
+          Add a new Checklist
+        </Button>
 
         {/* New checklist modal */}
         <Modal
@@ -88,13 +121,25 @@ export default function PreFlightChecklistTab({tabPadding}) {
               label="Checklist Name"
               description="The name of the checklist, you can add values afterwards"
               value={newChecklistName}
-              onChange={(event) => setNewChecklistName(event.currentTarget.value)}
+              onChange={(event) =>
+                setNewChecklistName(event.currentTarget.value)
+              }
             />
           </div>
 
           <div className="flex w-full justify-between pt-6">
-            <Button color={tailwindColors.red[600]} onClick={() => setNewChecklistModal(false)}>Cancel</Button>
-            <Button color={tailwindColors.green[600]} onClick={() => createNewChecklist()}>Create</Button>
+            <Button
+              color={tailwindColors.red[600]}
+              onClick={() => setNewChecklistModal(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              color={tailwindColors.green[600]}
+              onClick={() => createNewChecklist()}
+            >
+              Create
+            </Button>
           </div>
         </Modal>
       </div>
diff --git a/gcs/src/components/dashboard/telemetry.jsx b/gcs/src/components/dashboard/telemetry.jsx
index af7a30f65..3fc86de24 100644
--- a/gcs/src/components/dashboard/telemetry.jsx
+++ b/gcs/src/components/dashboard/telemetry.jsx
@@ -164,14 +164,13 @@ export default function TelemetrySection({
 
         <table>
           <tbody>
-            {batteryData.map(battery => (
+            {batteryData.map((battery) => (
               <tr className="w-full" key={battery.id}>
                 <td className="px-4">BATTERY{battery.id}</td>
                 <td className="font-bold px-2 text-xl text-right">
-                  {(battery.voltages
-                    ? battery.voltages[0] / 1000
-                    : 0
-                  ).toFixed(2)}
+                  {(battery.voltages ? battery.voltages[0] / 1000 : 0).toFixed(
+                    2,
+                  )}
                   V
                 </td>
                 <td className="font-bold px-2 text-xl text-right">
diff --git a/gcs/src/components/error/errorBoundary.jsx b/gcs/src/components/error/errorBoundary.jsx
index ffffa8c33..fdaa9c33d 100644
--- a/gcs/src/components/error/errorBoundary.jsx
+++ b/gcs/src/components/error/errorBoundary.jsx
@@ -7,7 +7,7 @@ import React from "react"
 
 // 3rd Party Imports
 import { Button } from "@mantine/core"
-import { CodeHighlight } from '@mantine/code-highlight'
+import { CodeHighlight } from "@mantine/code-highlight"
 
 export default function ErrorBoundaryFallback({ error }) {
   return (
diff --git a/gcs/src/components/noDroneConnected.jsx b/gcs/src/components/noDroneConnected.jsx
index ee82ea2f3..c836339fa 100644
--- a/gcs/src/components/noDroneConnected.jsx
+++ b/gcs/src/components/noDroneConnected.jsx
@@ -1,4 +1,4 @@
-export default function NoDroneConnected({tab}) {
+export default function NoDroneConnected({ tab }) {
   return (
     <div className="flex items-center justify-center h-full">
       <p className="text-red-400">
diff --git a/gcs/src/css/index.css b/gcs/src/css/index.css
index 718aa0d92..1e82cb715 100644
--- a/gcs/src/css/index.css
+++ b/gcs/src/css/index.css
@@ -15,7 +15,8 @@
 
   @apply bg-falcongrey-800 text-neutral-50 h-full max-h-full min-h-screen;
 
-  ul, ol {
+  ul,
+  ol {
     list-style: revert;
   }
 }
@@ -52,15 +53,15 @@ body {
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background: #1C2021;
+  background: #1c2021;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: #727C7E;
+  background: #727c7e;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #535D5F;
+  background: #535d5f;
 }
diff --git a/gcs/src/dashboard.jsx b/gcs/src/dashboard.jsx
index 443754b36..696274606 100644
--- a/gcs/src/dashboard.jsx
+++ b/gcs/src/dashboard.jsx
@@ -152,7 +152,9 @@ export default function Dashboard() {
     () => ({
       VFR_HUD: (msg) => setTelemetryData(msg),
       BATTERY_STATUS: (msg) => {
-        const battery = localBatteryData.filter(battery => battery.id == msg.id)[0]
+        const battery = localBatteryData.filter(
+          (battery) => battery.id == msg.id,
+        )[0]
         if (battery) {
           Object.assign(battery, msg)
         } else {
diff --git a/gcs/src/main.jsx b/gcs/src/main.jsx
index 882bd630f..5dcd8da21 100644
--- a/gcs/src/main.jsx
+++ b/gcs/src/main.jsx
@@ -5,8 +5,8 @@ import "./css/resizable.css"
 import "@mantine/core/styles.css"
 import "@mantine/notifications/styles.css"
 import "@mantine/spotlight/styles.css"
-import '@mantine/code-highlight/styles.css'
-import '@mantine/tiptap/styles.css';
+import "@mantine/code-highlight/styles.css"
+import "@mantine/tiptap/styles.css"
 
 // React imports
 import { HashRouter } from "react-router-dom"

From 4d41ea82fb33daf1548263de48996b58798dee61 Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sun, 30 Mar 2025 02:03:08 +0100
Subject: [PATCH 13/19] removed unused file

---
 .../preFlightChecklist/preFlightChecklist.jsx | 72 -------------------
 1 file changed, 72 deletions(-)
 delete mode 100644 gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx

diff --git a/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx b/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx
deleted file mode 100644
index bbec8ff0e..000000000
--- a/gcs/src/components/dashboard/preFlightChecklist/preFlightChecklist.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
-  Preflight checklist modal, a popup that allows the user to tick off things for their flight
-*/
-
-import { Modal, Accordion, Button } from "@mantine/core"
-import CheckListArea from "./checkListArea"
-import { useLocalStorage } from "@mantine/hooks"
-
-// Styling imports
-import resolveConfig from "tailwindcss/resolveConfig"
-import tailwindConfig from "../../../../tailwind.config.js"
-const tailwindColors = resolveConfig(tailwindConfig).theme.colors
-
-export default function PreFlightChecklist({ showModal, setShowModal }) {
-  const [preFlightChecklistItems, setPreFlightChecklistItems] = useLocalStorage(
-    { key: "preFlightCheckList", defaultValue: [] },
-  )
-  const [openChecklist, setOpenChecklist] = useLocalStorage({
-    key: "lastOpenedPreFlightCheckList",
-    defaultValue: "",
-  })
-
-  const items = preFlightChecklistItems.map((item) => (
-    <Accordion.Item
-      key={item.name}
-      value={item.name}
-      onClick={() => setOpenChecklist(item.name)}
-    >
-      <Accordion.Control>{item.name}</Accordion.Control>
-      <Accordion.Panel>
-        <CheckListArea
-          items={item.value}
-          saveItems={(e) => {
-            item.value = e
-            setPreFlightChecklistItems(preFlightChecklistItems)
-          }}
-        />
-      </Accordion.Panel>
-    </Accordion.Item>
-  ))
-
-  return (
-    <Modal
-      opened={showModal}
-      onClose={() => setShowModal(false)}
-      size={"xl"}
-      title="Preflight Checklist"
-      centered
-      styles={{
-        content: {
-          borderRadius: "0.5rem",
-        },
-      }}
-    >
-      <Accordion variant="separated" defaultValue={openChecklist}>
-        {items}
-      </Accordion>
-      <div className="flex w-full justify-between pt-4">
-        <Button color={tailwindColors.red[600]}>Delete a Checklist</Button>
-        <Button
-          color={tailwindColors.green[600]}
-          onClick={() => {
-            preFlightChecklistItems.push({ name: "test", value: [] })
-            setPreFlightChecklistItems(preFlightChecklistItems)
-          }}
-        >
-          Add a new Checklist
-        </Button>
-      </div>
-    </Modal>
-  )
-}

From 2cae107ffd07812ae3227cc349135ca1fccecb97 Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sun, 30 Mar 2025 13:19:10 +0100
Subject: [PATCH 14/19] updated styling

---
 .../preFlightChecklist/checkListArea.jsx      | 67 +++++++++++--------
 .../preFlightChecklist/checkListEdit.jsx      | 42 ++++++++++--
 .../preFlightChecklistSection.jsx             |  2 +-
 3 files changed, 74 insertions(+), 37 deletions(-)

diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
index 602866f69..c08fa85f2 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
@@ -6,7 +6,7 @@
 import { useEffect, useState } from "react"
 
 // 3rd Party Imports
-import { Button, Checkbox, Modal } from "@mantine/core"
+import { ActionIcon, Button, Checkbox, Modal, Tooltip } from "@mantine/core"
 
 // Local Imports
 import EditCheckList from "./checkListEdit.jsx"
@@ -14,6 +14,7 @@ import EditCheckList from "./checkListEdit.jsx"
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../../tailwind.config.js"
+import { IconCheckbox, IconEdit, IconTrashX } from "@tabler/icons-react"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 export default function CheckListArea({
@@ -31,6 +32,7 @@ export default function CheckListArea({
     generateCheckboxListString(),
   )
   const [mappedItems, setMappedItems] = useState(generateMappedItems())
+  const [lastToggleCheck, setLastToggleCheck] = useState(false);  // false = uncheck, true = check
 
   function generateCheckboxListString(set = false) {
     // Go from list to string, returns0
@@ -47,7 +49,7 @@ export default function CheckListArea({
     return final
   }
 
-  function generateCheckboxList() {
+  function generateCheckboxList(defaultCheck = false) {
     // Go from string to list, does not return
     console.log(checkBoxListString)
     var final = []
@@ -55,14 +57,22 @@ export default function CheckListArea({
       .split("<li><p>")
       .splice(1)
       .map((element) => {
-        final.push({
-          checked: false,
-          name: element.split("</p>")[0].trim(),
-        })
+        var text = element.split("</p>")[0].trim()
+        if (text !== "") {
+          final.push({
+            checked: defaultCheck,
+            name: element.split("</p>")[0].trim(),
+          })
+        }
       })
     setCheckboxList(final)
   }
 
+  function toggleCheck() {
+    generateCheckboxList(lastToggleCheck)
+    setLastToggleCheck(!lastToggleCheck)
+  }
+
   function setChecked(name, value) {
     var final = []
     checkBoxListString
@@ -103,32 +113,31 @@ export default function CheckListArea({
     <>
       {/* Checkbox area */}
       <div className="flex flex-col gap-2">
-        {mappedItems}
-
-        <div className="flex w-full justify-between pt-2">
-          <a
-            className="text-xs text-falcongrey-200 hover:underline hover:cursor-pointer"
-            onClick={() => generateCheckboxList()}
-          >
-            Uncheck all
-          </a>
-        </div>
-        <div className="flex w-full justify-between flex-row-reverse">
-          <a
-            className="text-xs text-falconred-400 hover:underline hover:cursor-pointer"
-            onClick={() => setDeleteModal(true)}
-          >
-            Delete this checklist
-          </a>
-          <a
-            className="text-xs text-falcongrey-200 hover:underline hover:cursor-pointer"
-            onClick={() => setEditCheckListModal(true)}
-          >
-            Edit this checklist
-          </a>
+        <div className="flex w-full justify-between pb-2">
+          <div className="flex gap-1">
+            <Tooltip label="Toggle all checked/unchecked">
+              <ActionIcon variant="light" radius="md" onClick={() => toggleCheck()}>
+                <IconCheckbox style={{ width: '70%', height: '70%' }} stroke={1.5} />
+              </ActionIcon>
+            </Tooltip>
+            <Tooltip label="Edit list">
+              <ActionIcon variant="light" radius="md" onClick={() => setEditCheckListModal(true)}>
+                <IconEdit style={{ width: '70%', height: '70%' }} stroke={1.5} />
+              </ActionIcon>
+            </Tooltip>
+          </div>
+
+          <Tooltip label="Delete list">
+            <ActionIcon variant="light" color="red" radius="md" onClick={() => setDeleteModal(true)}>
+              <IconTrashX style={{ width: '70%', height: '70%' }} stroke={1.5} />
+            </ActionIcon>
+          </Tooltip>
         </div>
+
+        {mappedItems}
       </div>
 
+
       {/* Edit mode */}
       <EditCheckList
         opened={editCheckListModal}
diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
index 7ff3bdff4..257cf4fdc 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
@@ -5,8 +5,10 @@
 // 3rd Party Imports
 import { Button, Modal, TextInput } from "@mantine/core"
 import { useEditor } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
+import BulletList from "@tiptap/extension-bullet-list"
+import ListItem from '@tiptap/extension-list-item'
 import { RichTextEditor } from "@mantine/tiptap"
+import { Node } from '@tiptap/core'
 
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
@@ -24,8 +26,31 @@ export default function EditCheckList({
   const [name, setName, finaliseName] = nameSet // Finalise changes it in the selected accordion (ik annoying...)
   const [checkboxList, setCheckboxList] = checkListSet
 
+  const Document = Node.create({
+    name: 'doc',
+    topNode: true,
+    content: 'list+',
+  })
+
+  const Paragraph = Node.create({
+    name: 'paragraph',
+    group: 'block',
+    content: 'inline*',
+    parseHTML() {
+      return [{ tag: 'p' }]
+    },
+    renderHTML({ HTMLAttributes }) {
+      return ['p', HTMLAttributes, 0]
+    },
+  })
+
+  const Text = Node.create({
+    name: 'text',
+    group: 'inline',
+  })
+
   const editor = useEditor({
-    extensions: [StarterKit],
+    extensions: [Document, Text, Paragraph, BulletList, ListItem],
     content: checkboxList,
     onUpdate: ({ editor }) => {
       setCheckboxList(editor.getHTML())
@@ -60,11 +85,14 @@ export default function EditCheckList({
           </h2>
         </div>
         <RichTextEditor editor={editor} classNames={{ content: "!list-disc" }}>
-          <RichTextEditor.Toolbar sticky stickyOffset={60}>
-            <RichTextEditor.ControlsGroup>
-              <RichTextEditor.BulletList />
-            </RichTextEditor.ControlsGroup>
-          </RichTextEditor.Toolbar>
+          {/* 
+            Going to keep this for future use with code blocks, no need to delete.
+            <RichTextEditor.Toolbar sticky stickyOffset={60}>
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.BulletList />
+              </RichTextEditor.ControlsGroup>
+            </RichTextEditor.Toolbar>
+          */}
 
           <RichTextEditor.Content />
         </RichTextEditor>
diff --git a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
index c68c51dc6..f9f916b1b 100644
--- a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
+++ b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
@@ -49,7 +49,7 @@ export default function PreFlightChecklistTab({ tabPadding }) {
         value: [
           {
             checked: false,
-            name: "Click 'Edit this checklist' to add new values",
+            name: "Your first item, press edit to add more!",
           },
         ],
       })

From 2c972148dfe235e79149b95f9e690a8557feb1be Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sun, 30 Mar 2025 13:21:07 +0100
Subject: [PATCH 15/19] formatted

---
 .../preFlightChecklist/checkListArea.jsx      | 37 +++++++++++++++----
 .../preFlightChecklist/checkListEdit.jsx      | 22 +++++------
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
index c08fa85f2..132e3b87d 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
@@ -32,7 +32,7 @@ export default function CheckListArea({
     generateCheckboxListString(),
   )
   const [mappedItems, setMappedItems] = useState(generateMappedItems())
-  const [lastToggleCheck, setLastToggleCheck] = useState(false);  // false = uncheck, true = check
+  const [lastToggleCheck, setLastToggleCheck] = useState(false) // false = uncheck, true = check
 
   function generateCheckboxListString(set = false) {
     // Go from list to string, returns0
@@ -116,20 +116,42 @@ export default function CheckListArea({
         <div className="flex w-full justify-between pb-2">
           <div className="flex gap-1">
             <Tooltip label="Toggle all checked/unchecked">
-              <ActionIcon variant="light" radius="md" onClick={() => toggleCheck()}>
-                <IconCheckbox style={{ width: '70%', height: '70%' }} stroke={1.5} />
+              <ActionIcon
+                variant="light"
+                radius="md"
+                onClick={() => toggleCheck()}
+              >
+                <IconCheckbox
+                  style={{ width: "70%", height: "70%" }}
+                  stroke={1.5}
+                />
               </ActionIcon>
             </Tooltip>
             <Tooltip label="Edit list">
-              <ActionIcon variant="light" radius="md" onClick={() => setEditCheckListModal(true)}>
-                <IconEdit style={{ width: '70%', height: '70%' }} stroke={1.5} />
+              <ActionIcon
+                variant="light"
+                radius="md"
+                onClick={() => setEditCheckListModal(true)}
+              >
+                <IconEdit
+                  style={{ width: "70%", height: "70%" }}
+                  stroke={1.5}
+                />
               </ActionIcon>
             </Tooltip>
           </div>
 
           <Tooltip label="Delete list">
-            <ActionIcon variant="light" color="red" radius="md" onClick={() => setDeleteModal(true)}>
-              <IconTrashX style={{ width: '70%', height: '70%' }} stroke={1.5} />
+            <ActionIcon
+              variant="light"
+              color="red"
+              radius="md"
+              onClick={() => setDeleteModal(true)}
+            >
+              <IconTrashX
+                style={{ width: "70%", height: "70%" }}
+                stroke={1.5}
+              />
             </ActionIcon>
           </Tooltip>
         </div>
@@ -137,7 +159,6 @@ export default function CheckListArea({
         {mappedItems}
       </div>
 
-
       {/* Edit mode */}
       <EditCheckList
         opened={editCheckListModal}
diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
index 257cf4fdc..5224a0c07 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
@@ -6,9 +6,9 @@
 import { Button, Modal, TextInput } from "@mantine/core"
 import { useEditor } from "@tiptap/react"
 import BulletList from "@tiptap/extension-bullet-list"
-import ListItem from '@tiptap/extension-list-item'
+import ListItem from "@tiptap/extension-list-item"
 import { RichTextEditor } from "@mantine/tiptap"
-import { Node } from '@tiptap/core'
+import { Node } from "@tiptap/core"
 
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
@@ -27,26 +27,26 @@ export default function EditCheckList({
   const [checkboxList, setCheckboxList] = checkListSet
 
   const Document = Node.create({
-    name: 'doc',
+    name: "doc",
     topNode: true,
-    content: 'list+',
+    content: "list+",
   })
 
   const Paragraph = Node.create({
-    name: 'paragraph',
-    group: 'block',
-    content: 'inline*',
+    name: "paragraph",
+    group: "block",
+    content: "inline*",
     parseHTML() {
-      return [{ tag: 'p' }]
+      return [{ tag: "p" }]
     },
     renderHTML({ HTMLAttributes }) {
-      return ['p', HTMLAttributes, 0]
+      return ["p", HTMLAttributes, 0]
     },
   })
 
   const Text = Node.create({
-    name: 'text',
-    group: 'inline',
+    name: "text",
+    group: "inline",
   })
 
   const editor = useEditor({

From fac31c87c379a285bef46e7e179ebc87f5c78582 Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sun, 30 Mar 2025 13:37:46 +0100
Subject: [PATCH 16/19] spotlight

---
 .../preFlightChecklist/checkListArea.jsx      |   1 +
 .../preFlightChecklist/checkListEdit.jsx      | 102 +++++++++---------
 .../preFlightChecklistSection.jsx             |  60 ++++++-----
 gcs/src/components/spotlight/actions.jsx      |   8 ++
 4 files changed, 99 insertions(+), 72 deletions(-)

diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
index 132e3b87d..51b33c977 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx
@@ -192,6 +192,7 @@ export default function CheckListArea({
           <Button
             color={tailwindColors.green[600]}
             onClick={() => deleteChecklist()}
+            data-autofocus
           >
             Yes, Continue
           </Button>
diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
index 5224a0c07..5fa3c5ced 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
@@ -55,6 +55,7 @@ export default function EditCheckList({
     onUpdate: ({ editor }) => {
       setCheckboxList(editor.getHTML())
     },
+    autofocus: "end"
   })
 
   return (
@@ -70,58 +71,63 @@ export default function EditCheckList({
       size={"xl"}
       centered
     >
-      <div className="flex flex-col gap-2">
-        {/* Inputs */}
-        <h1>Name</h1>
-        <TextInput
-          value={name}
-          onChange={(event) => setName(event.currentTarget.value)}
-        />
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          finaliseName(name)
+          generateCheckboxList()
+          close()
+        }}
+      >
+        <div className="flex flex-col gap-2">
+          {/* Inputs */}
+          <h1>Name</h1>
+          <TextInput
+            value={name}
+            onChange={(event) => setName(event.currentTarget.value)}
+          />
 
-        <div>
-          <h1>Items</h1>
-          <h2 className="text-falcongrey-300 text-sm">
-            Bullet point list of items
-          </h2>
-        </div>
-        <RichTextEditor editor={editor} classNames={{ content: "!list-disc" }}>
-          {/* 
-            Going to keep this for future use with code blocks, no need to delete.
-            <RichTextEditor.Toolbar sticky stickyOffset={60}>
-              <RichTextEditor.ControlsGroup>
-                <RichTextEditor.BulletList />
-              </RichTextEditor.ControlsGroup>
-            </RichTextEditor.Toolbar>
-          */}
+          <div>
+            <h1>Items</h1>
+            <h2 className="text-falcongrey-300 text-sm">
+              Bullet point list of items
+            </h2>
+          </div>
+          <RichTextEditor editor={editor} classNames={{ content: "!list-disc" }}>
+            {/* 
+              Going to keep this for future use with code blocks, no need to delete.
+              <RichTextEditor.Toolbar sticky stickyOffset={60}>
+                <RichTextEditor.ControlsGroup>
+                  <RichTextEditor.BulletList />
+                </RichTextEditor.ControlsGroup>
+              </RichTextEditor.Toolbar>
+            */}
 
-          <RichTextEditor.Content />
-        </RichTextEditor>
+            <RichTextEditor.Content />
+          </RichTextEditor>
 
-        {/* Controls */}
-        <div className="w-full flex justify-between pt-2">
-          <Button
-            onClick={() => {
-              close()
-              generateCheckboxListString(true)
-            }}
-            variant="filled"
-            color={tailwindColors.red[600]}
-          >
-            Cancel
-          </Button>
-          <Button
-            onClick={() => {
-              finaliseName(name)
-              generateCheckboxList()
-              close()
-            }}
-            variant="filled"
-            color={tailwindColors.green[600]}
-          >
-            Save
-          </Button>
+          {/* Controls */}
+          <div className="w-full flex justify-between pt-2">
+            <Button
+              onClick={() => {
+                close()
+                generateCheckboxListString(true)
+              }}
+              variant="filled"
+              color={tailwindColors.red[600]}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              variant="filled"
+              color={tailwindColors.green[600]}
+            >
+              Save
+            </Button>
+          </div>
         </div>
-      </div>
+      </form>
     </Modal>
   )
 }
diff --git a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
index f9f916b1b..288790f53 100644
--- a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
+++ b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
@@ -17,6 +17,7 @@ import { showErrorNotification } from "../../../helpers/notification.js"
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../../tailwind.config.js"
+import { AddCommand } from "../../spotlight/commandHandler.js"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 export default function PreFlightChecklistTab({ tabPadding }) {
@@ -64,6 +65,9 @@ export default function PreFlightChecklistTab({ tabPadding }) {
     showErrorNotification("Name cannot be empty")
   }
 
+  // Add create new checklist as a spotlight command
+  AddCommand("new_preflight_checklist", () => setNewChecklistModal(true))
+
   const items = preFlightChecklistItems.map((item) => (
     <Accordion.Item
       key={item.name}
@@ -116,31 +120,39 @@ export default function PreFlightChecklistTab({ tabPadding }) {
             },
           }}
         >
-          <div className="flex flex-col gap-2">
-            <TextInput
-              label="Checklist Name"
-              description="The name of the checklist, you can add values afterwards"
-              value={newChecklistName}
-              onChange={(event) =>
-                setNewChecklistName(event.currentTarget.value)
-              }
-            />
-          </div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              createNewChecklist()
+            }}
+          >
+            <div className="flex flex-col gap-2">
+              <TextInput
+                label="Checklist Name"
+                description="The name of the checklist, you can add values afterwards"
+                value={newChecklistName}
+                onChange={(event) =>
+                  setNewChecklistName(event.currentTarget.value)
+                }
+                data-autofocus
+              />
+            </div>
 
-          <div className="flex w-full justify-between pt-6">
-            <Button
-              color={tailwindColors.red[600]}
-              onClick={() => setNewChecklistModal(false)}
-            >
-              Cancel
-            </Button>
-            <Button
-              color={tailwindColors.green[600]}
-              onClick={() => createNewChecklist()}
-            >
-              Create
-            </Button>
-          </div>
+            <div className="flex w-full justify-between pt-6">
+              <Button
+                color={tailwindColors.red[600]}
+                onClick={() => setNewChecklistModal(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                color={tailwindColors.green[600]}
+                onClick={() => createNewChecklist()}
+              >
+                Create
+              </Button>
+            </div>
+          </form>
         </Modal>
       </div>
     </Tabs.Panel>
diff --git a/gcs/src/components/spotlight/actions.jsx b/gcs/src/components/spotlight/actions.jsx
index 440bafe58..5c1a4b3c8 100644
--- a/gcs/src/components/spotlight/actions.jsx
+++ b/gcs/src/components/spotlight/actions.jsx
@@ -125,3 +125,11 @@ AddSpotlightAction(
   kbdBadge("Ctrl + ,", badgeColor),
   kbdBadge("⌘ + ,", badgeColor),
 )
+AddSpotlightAction(
+  "new_preflight_checklist",
+  "New Pre-flight Checklist",
+  "command",
+  () => {
+    RunCommand("new_preflight_checklist")
+  }
+)

From faff6e974bc01528f3e05da41a942fd968c9f9c6 Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sun, 30 Mar 2025 13:38:03 +0100
Subject: [PATCH 17/19] formatted

---
 .../dashboard/preFlightChecklist/checkListEdit.jsx         | 7 +++++--
 gcs/src/components/spotlight/actions.jsx                   | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
index 5fa3c5ced..ec1f97d71 100644
--- a/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
+++ b/gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx
@@ -55,7 +55,7 @@ export default function EditCheckList({
     onUpdate: ({ editor }) => {
       setCheckboxList(editor.getHTML())
     },
-    autofocus: "end"
+    autofocus: "end",
   })
 
   return (
@@ -93,7 +93,10 @@ export default function EditCheckList({
               Bullet point list of items
             </h2>
           </div>
-          <RichTextEditor editor={editor} classNames={{ content: "!list-disc" }}>
+          <RichTextEditor
+            editor={editor}
+            classNames={{ content: "!list-disc" }}
+          >
             {/* 
               Going to keep this for future use with code blocks, no need to delete.
               <RichTextEditor.Toolbar sticky stickyOffset={60}>
diff --git a/gcs/src/components/spotlight/actions.jsx b/gcs/src/components/spotlight/actions.jsx
index 5c1a4b3c8..f43df52a6 100644
--- a/gcs/src/components/spotlight/actions.jsx
+++ b/gcs/src/components/spotlight/actions.jsx
@@ -131,5 +131,5 @@ AddSpotlightAction(
   "command",
   () => {
     RunCommand("new_preflight_checklist")
-  }
+  },
 )

From d7ae13c29f4beb72d06bba2be52697b04e40fe83 Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sat, 12 Apr 2025 12:48:48 +0100
Subject: [PATCH 18/19] updated update script to handle yarn

---
 run.bash | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/run.bash b/run.bash
index 9feb29c69..a9771429d 100755
--- a/run.bash
+++ b/run.bash
@@ -8,6 +8,8 @@ if [ -z "$2" ]; then
 else
     cd radio
     pip install -r requirements.txt
+    cd ../gcs
+    yarn
     cd ../
     concurrently "python radio/app.py" "cd gcs && yarn dev" -n "backend,frontend" -c "red,blue"
 fi
\ No newline at end of file

From 7c007732fa3155ac54bddb4417bafa754736a08f Mon Sep 17 00:00:00 2001
From: Julian Jones <julianjones663@gmail.com>
Date: Sat, 12 Apr 2025 12:50:51 +0100
Subject: [PATCH 19/19] fixed

---
 gcs/src/components/navbar.jsx            | 1 +
 gcs/src/components/spotlight/actions.jsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/gcs/src/components/navbar.jsx b/gcs/src/components/navbar.jsx
index e9a75895d..b4b9a7012 100644
--- a/gcs/src/components/navbar.jsx
+++ b/gcs/src/components/navbar.jsx
@@ -264,6 +264,7 @@ export default function Navbar({ currentPage }) {
             borderRadius: "0.5rem",
           },
         }}
+        withCloseButton={false}
       >
         <form
           onSubmit={(e) => {
diff --git a/gcs/src/components/spotlight/actions.jsx b/gcs/src/components/spotlight/actions.jsx
index a3b503e49..f43df52a6 100644
--- a/gcs/src/components/spotlight/actions.jsx
+++ b/gcs/src/components/spotlight/actions.jsx
@@ -12,7 +12,7 @@ import tailwindConfig from "../../../tailwind.config"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 const badgeColor = tailwindColors.falcongrey[600]
 
-let actions = []
+export let actions = []
 function AddSpotlightAction(
   id,
   label,