From e1d2b2d0c67929535853b96949fae59f89ed32bc Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Thu, 23 Nov 2023 14:07:09 +1000
Subject: [PATCH 01/18] fix for allowed apps/folders writing incorrectly to
 config file

---
 src-tauri/src/main.rs | 71 ++++++++++++++++++++++++++++++++++---------
 1 file changed, 56 insertions(+), 15 deletions(-)

diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index a57b02e..cb0b134 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -157,7 +157,10 @@ async fn enable_wiresock(tunnel: Tunnel, app_handle: tauri::AppHandle) -> Result
     {
         let state = WIRESOCK_STATE.lock().unwrap();
         if state.wiresock_status != "STOPPED" {
-            println!("wiresock_state at start of enable_wiresock is {:?}", &*state);
+            println!(
+                "wiresock_state at start of enable_wiresock is {:?}",
+                &*state
+            );
             return Err("enable_wiresock is already running".into());
         }
     }
@@ -231,25 +234,61 @@ async fn enable_wiresock(tunnel: Tunnel, app_handle: tauri::AppHandle) -> Result
         )
         .unwrap();
     }
+
+    // Rules
+
+    // Allowed
+
+    // Allowed Apps
+    let mut allowed_apps = String::new();
     if !tunnel.rules.allowed.apps.is_empty() {
-        writeln!(
-            &mut w,
-            "AllowedApps = {} {}",
-            tunnel.rules.allowed.apps, tunnel.rules.allowed.folders
-        )
-        .unwrap();
+        allowed_apps = format!("AllowedApps = {}", tunnel.rules.allowed.apps);
     }
-    if !tunnel.rules.disallowed.apps.is_empty() {
-        writeln!(
-            &mut w,
-            "DisallowedApps = {} {}",
-            tunnel.rules.disallowed.apps, tunnel.rules.disallowed.folders
-        )
-        .unwrap();
+
+    // Allowed Folders
+    if !tunnel.rules.allowed.folders.is_empty() {
+        if !allowed_apps.is_empty() {
+            // Ensure there is comma between the allowed apps and allowed folders
+            allowed_apps = format!("{}, {}", allowed_apps, tunnel.rules.allowed.folders);
+        } else {
+            allowed_apps = format!("AllowedApps = {}", tunnel.rules.allowed.folders);
+        }
     }
+
+    // Write Allowed Apps/Folders to the config file
+    if !allowed_apps.is_empty() {
+        writeln!(&mut w, "{}", allowed_apps).unwrap();
+    }
+
+    // Allowed IP Addresses
     if !tunnel.rules.allowed.ipAddresses.is_empty() {
         writeln!(&mut w, "AllowedIPs = {}", tunnel.rules.allowed.ipAddresses).unwrap();
     }
+
+    // Disallowed
+
+    // Disallowed Apps
+    let mut disallowed_apps = String::new();
+    if !tunnel.rules.disallowed.apps.is_empty() {
+        disallowed_apps = format!("DisallowedApps = {}", tunnel.rules.disallowed.apps);
+    }
+
+    // Disallowed Folders
+    if !tunnel.rules.disallowed.folders.is_empty() {
+        if !disallowed_apps.is_empty() {
+            // Ensure there is comma between the disallowed apps and disallowed folders
+            disallowed_apps = format!("{}, {}", disallowed_apps, tunnel.rules.disallowed.folders);
+        } else {
+            disallowed_apps = format!("DisallowedApps = {}", tunnel.rules.disallowed.folders);
+        }
+    }
+
+    // Write Disallowed Apps/Folders to the config file
+    if !disallowed_apps.is_empty() {
+        writeln!(&mut w, "{}", disallowed_apps).unwrap();
+    }
+
+    // Disallowed IP Addresses
     if !tunnel.rules.disallowed.ipAddresses.is_empty() {
         writeln!(
             &mut w,
@@ -326,7 +365,9 @@ async fn enable_wiresock(tunnel: Tunnel, app_handle: tauri::AppHandle) -> Result
             update_state(&app_handle, |state| {
                 state.wiresock_status = "STOPPED".to_string();
                 state.tunnel_status = "DISCONNECTED".to_string();
-                state.logs.push("Tunnel Disabled. Wiresock process stopped".into())
+                state
+                    .logs
+                    .push("Tunnel Disabled. Wiresock process stopped".into())
             });
         }
         Err(e) => println!("error attempting to wait: {}", e),

From 7efe408ba57ac367b0cfcc0f8bf4d23790a628c1 Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Thu, 23 Nov 2023 14:22:06 +1000
Subject: [PATCH 02/18] fix for displaying seperated rules

---
 src/components/containers/TunnelDisplay.tsx | 30 +++++++++++----------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/containers/TunnelDisplay.tsx b/src/components/containers/TunnelDisplay.tsx
index 21eb064..7d5b874 100644
--- a/src/components/containers/TunnelDisplay.tsx
+++ b/src/components/containers/TunnelDisplay.tsx
@@ -27,13 +27,11 @@ function TunnelDisplay({ selectedTunnel, wiresockState, enableTunnel, disableTun
       <div className="flex flex-col sm:flex-row">
         {/* Start of name, status and buttons */}
         <div className="flex-col mb-4 sm:mb-0">
-
           {/* Tunnel name */}
           <h1 className="text-xl font-semibold leading-7 text-gray-900">{selectedTunnel?.name}</h1>
 
           {/* Tunnel status section */}
           <div className="flex items-center align-center mt-1">
-
             {/* Start of Tunnel status icon */}
             <div
               className={`${
@@ -51,10 +49,8 @@ function TunnelDisplay({ selectedTunnel, wiresockState, enableTunnel, disableTun
                 ? 'Enabled'
                 : 'Disabled'}
             </p>
-            
           </div>
           {/* End tunnel status section */}
-
         </div>
         {/* End of name, status and buttons */}
 
@@ -112,21 +108,27 @@ function TunnelDisplay({ selectedTunnel, wiresockState, enableTunnel, disableTun
           <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
             <dt className="text-sm font-medium leading-6 text-gray-900">Allowed</dt>
             <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-              {selectedTunnel.rules.allowed.apps}
-              {selectedTunnel.rules.allowed.folders.length > 0 ? `, ${selectedTunnel.rules.allowed.folders}` : ''}
-              {selectedTunnel.rules.allowed.ipAddresses.length > 0
-                ? `, ${selectedTunnel.rules.allowed.ipAddresses}`
-                : ''}
+              {/* Create an array of the values and seperate with a comma */}
+              {[
+                selectedTunnel.rules.allowed.apps,
+                selectedTunnel.rules.allowed.folders,
+                selectedTunnel.rules.allowed.ipAddresses,
+              ]
+                .filter(Boolean)
+                .join(', ')}
             </dd>
           </div>
           <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
             <dt className="text-sm font-medium leading-6 text-gray-900">Disallowed</dt>
             <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-              {selectedTunnel.rules.disallowed.apps}
-              {selectedTunnel.rules.disallowed.folders.length > 0 ? `, ${selectedTunnel.rules.disallowed.folders}` : ''}
-              {selectedTunnel.rules.disallowed.ipAddresses.length > 0
-                ? `, ${selectedTunnel.rules.disallowed.ipAddresses}`
-                : ''}
+              {/* Create an array of the values and seperate with a comma */}
+              {[
+                selectedTunnel.rules.disallowed.apps,
+                selectedTunnel.rules.disallowed.folders,
+                selectedTunnel.rules.disallowed.ipAddresses,
+              ]
+                .filter(Boolean)
+                .join(', ')}
             </dd>
           </div>
         </dl>

From 121d07a4df6192f5dc9f8a4247db47fc97f5cd77 Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Thu, 23 Nov 2023 17:41:10 +1000
Subject: [PATCH 03/18] minor change to add some commenting

---
 src/main.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index d238181..c355348 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -26,10 +26,16 @@ function Main(): JSX.Element {
   /* ------------------------- */
   /* ------- useState -------- */
   /* ------------------------- */
+  // For checking if Wiresock is installed on app launch, so we know to show the setup component or not.
   const [isWiresockInstalled, setIsWiresockInstalled] = useState<boolean | null>(null)
+
+  // For keeping track of the state of the wiresock process and tunnel connection status emitted from Tauri.
   const [wiresockState, setWiresockState] = useState<WiresockStateModel | null>(null)
+
+  // Keep track of whether auto connect has already fired. Don't want it running again on component reload.
   const [hasRunAutoConnect, setHasRunAutoConnect] = useState(false)
 
+  // Keep track of which tunnel the UI is showing
   const [selectedTunnel, setSelectedTunnel] = useState<Tunnel | null>(() => {
     // Get the previously selected tunnel from settings on first load
     const selectedTunnelID = getSelectedTunnelIDFromStorage()
@@ -40,8 +46,8 @@ function Main(): JSX.Element {
     }
   })
 
+  // Get the tunnel configs from local storage
   const [tunnels, setTunnels] = useState<Record<string, Tunnel>>(() => {
-    // Get the tunnels from settings
     const tunnelsFromStorage = getTunnelsFromStorage()
     const filteredTunnels = Object.fromEntries(
       Object.entries(tunnelsFromStorage).filter(([_, value]) => value !== null),
@@ -62,7 +68,7 @@ function Main(): JSX.Element {
   }, [])
 
   // Wait for wiresockState data to arrive from Tauri
-  // Auto connect a tunnel if there is one set
+  // Auto connect a tunnel if one is set
   useEffect(() => {
     if (!hasRunAutoConnect && wiresockState !== null && wiresockState.wiresock_status === 'STOPPED') {
       setHasRunAutoConnect(true)

From b3309d059d27f7b9f80a9edb2ed333cf46a0ebe2 Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Thu, 23 Nov 2023 17:56:27 +1000
Subject: [PATCH 04/18] minor updates to default html page

---
 index.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 03abf55..7a420d6 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tauri + React + TS</title>
+    <title>TunnlTo</title>
   </head>
 
   <body>

From 82376184da43f6464ad5c45ef5c97d1aceac049f Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Sat, 25 Nov 2023 11:20:43 +1000
Subject: [PATCH 05/18] tunnel converter. improved local storage handling.

---
 src/components/containers/Sidebar.tsx      |   6 +-
 src/components/containers/TunnelEditor.tsx | 137 ++++++++++++---------
 src/main.tsx                               | 129 ++++++++++++++-----
 src/models/Tunnel.ts                       |  14 ++-
 src/utilities/storageUtils.ts              |  62 ++++++----
 5 files changed, 223 insertions(+), 125 deletions(-)

diff --git a/src/components/containers/Sidebar.tsx b/src/components/containers/Sidebar.tsx
index f6e748f..cd7b9c9 100644
--- a/src/components/containers/Sidebar.tsx
+++ b/src/components/containers/Sidebar.tsx
@@ -4,13 +4,13 @@ import { useNavigate } from 'react-router-dom'
 import type WiresockStateModel from '../../models/WiresockStateModel.ts'
 
 interface SidebarProps {
-  childHandleTunnelSelect: (tunnel: Tunnel) => void
   tunnels: Record<string, Tunnel> | null
   selectedTunnel: Tunnel | null
   wiresockState: WiresockStateModel | null
+  setSelectedTunnel: (tunnel: Tunnel) => void
 }
 
-function Sidebar({ childHandleTunnelSelect, tunnels, selectedTunnel, wiresockState }: SidebarProps): JSX.Element {
+function Sidebar({ tunnels, selectedTunnel, wiresockState, setSelectedTunnel }: SidebarProps): JSX.Element {
   const menuItems = tunnels != null ? Object.keys(tunnels) : []
   const navigate = useNavigate()
 
@@ -36,7 +36,7 @@ function Sidebar({ childHandleTunnelSelect, tunnels, selectedTunnel, wiresockSta
                 : 'text-gray-300 hover:bg-gray-700 hover:text-white'
             } rounded-md px-2 cursor-pointer text-sm font-medium py-2 flex items-center align-center`}
             onClick={() => {
-              if (tunnels != null) childHandleTunnelSelect(tunnels[item])
+              if (tunnels != null) setSelectedTunnel(tunnels[item])
             }}
           >
             {tunnels != null ? tunnels[item].name : ''}
diff --git a/src/components/containers/TunnelEditor.tsx b/src/components/containers/TunnelEditor.tsx
index 6935186..d31f5e7 100644
--- a/src/components/containers/TunnelEditor.tsx
+++ b/src/components/containers/TunnelEditor.tsx
@@ -1,47 +1,48 @@
 import { useState, useRef } from 'react'
 import Tunnel from '../../models/Tunnel.ts'
 import { useNavigate } from 'react-router-dom'
-import { saveTunnelInStorage, deleteTunnelFromStorage } from '../../utilities/storageUtils.ts'
 import DeleteModal from '../DeleteModal.tsx'
 import { ExclamationTriangleIcon, EyeIcon, EyeSlashIcon, LinkIcon } from '@heroicons/react/24/outline'
 
 interface ConfigProps {
   tunnels: Record<string, Tunnel>
   selectedTunnel: Tunnel | null
-  childHandleTunnelSelect: (tunnel: Tunnel | null) => void
+  setSelectedTunnel: (tunnel: Tunnel | null) => void
+  setTunnels: (tunnels: Record<string, Tunnel>) => void
 }
 
-function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: ConfigProps): JSX.Element {
+function TunnelEditor({ tunnels, selectedTunnel, setSelectedTunnel, setTunnels }: ConfigProps): JSX.Element {
+  /* ------------------------- */
+  /* ------- useState -------- */
+  /* ------------------------- */
+
   const [wasValidated, setWasValidated] = useState(false)
   const [nameError, setNameError] = useState(false)
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
   const [isPrivateKeyHidden, setIsPrivateKeyHidden] = useState(true)
   const [isPublicKeyHidden, setIsPublicKeyHidden] = useState(true)
   const [isPresharedKeyHidden, setIsPresharedKeyHidden] = useState(true)
-  const [tunnel, setTunnel] = useState<Tunnel>(() => {
+  const [editedTunnel, setEditedTunnel] = useState<Tunnel>(() => {
+    // If a tunnel is passed in we are editing it, otherwise we are creating a new tunnel
     if (selectedTunnel === null) {
-      // Generate a unique ID and return a new Tunnel with that ID
-      let uniqueId = ''
-      const characters = 'abcdefghijklmnopqrstuvwxyz0123456789'
-
-      do {
-        uniqueId = ''
-        for (let i = 0; i < 4; i++) {
-          uniqueId += characters.charAt(Math.floor(Math.random() * characters.length))
-        }
-      } while (Object.prototype.hasOwnProperty.call(tunnels, uniqueId))
-
-      const newTunnel = new Tunnel()
-      newTunnel.id = uniqueId
+      const newTunnel = new Tunnel(tunnels)
       return newTunnel
     } else {
       return selectedTunnel
     }
   })
 
+  /* ------------------------- */
+  /* ------- variables ------- */
+  /* ------------------------- */
+
   const navigate = useNavigate()
   const formRef = useRef<HTMLFormElement>(null)
 
+  /* ------------------------- */
+  /* ------- functions ------- */
+  /* ------------------------- */
+
   function toggleKeyVisibility(key: 'privateKey' | 'publicKey' | 'presharedKey'): void {
     if (key === 'privateKey') {
       setIsPrivateKeyHidden(!isPrivateKeyHidden)
@@ -58,26 +59,26 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
 
     if (keys.length === 1) {
       if (keys[0] === 'name') {
-        setTunnel({ ...tunnel, name: value ?? '' })
+        setEditedTunnel({ ...editedTunnel, name: value ?? '' })
       }
     } else if (keys.length === 2) {
       if (keys[0] === 'interface') {
-        setTunnel({
-          ...tunnel,
-          interface: { ...tunnel?.interface, [keys[1]]: value },
+        setEditedTunnel({
+          ...editedTunnel,
+          interface: { ...editedTunnel?.interface, [keys[1]]: value },
         })
       } else if (keys[0] === 'peer') {
-        setTunnel({ ...tunnel, peer: { ...tunnel?.peer, [keys[1]]: value } })
+        setEditedTunnel({ ...editedTunnel, peer: { ...editedTunnel?.peer, [keys[1]]: value } })
       }
     } else if (keys.length === 3) {
       if (keys[0] === 'rules') {
         if (keys[1] === 'allowed' || keys[1] === 'disallowed') {
-          setTunnel({
-            ...tunnel,
+          setEditedTunnel({
+            ...editedTunnel,
             rules: {
-              ...tunnel?.rules,
+              ...editedTunnel?.rules,
               [keys[1]]: {
-                ...tunnel?.rules[keys[1]],
+                ...editedTunnel?.rules[keys[1]],
                 [keys[2]]: value,
               },
             },
@@ -93,19 +94,37 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
 
   function handleUserDeleteDecision(decision: 'delete' | 'cancel'): void {
     if (decision === 'delete') {
-      if (selectedTunnel !== null) deleteTunnelFromStorage(tunnels, selectedTunnel.id)
-
-      // Notify parent that the selected tunenl no longer exists
-      childHandleTunnelSelect(null)
-
+      deleteTunnel()
       navigate('/')
     }
   }
 
+  function deleteTunnel(): void {
+    // Create a copy of the tunnels object
+    const updatedTunnels = { ...tunnels }
+
+    // Delete the tunnel from the copied object
+    Reflect.deleteProperty(updatedTunnels, editedTunnel.id)
+
+    setTunnels(updatedTunnels)
+
+    setSelectedTunnel(null)
+  }
+
+  function saveTunnel(): void {
+    // Create a new object that includes all tunnels and the new tunnel
+    const updatedTunnels = { ...tunnels, [editedTunnel.id]: editedTunnel }
+
+    // Update the state
+    setTunnels(updatedTunnels)
+
+    setSelectedTunnel(editedTunnel)
+  }
+
   function handleNameCheck(): void {
     // Check the desired name isn't already in use
     for (const x of Object.values(tunnels)) {
-      if (x.name === tunnel.name && x.id !== tunnel.id) {
+      if (x.name === editedTunnel.name && x.id !== editedTunnel.id) {
         // Alert the user
         setNameError(true)
         return
@@ -120,13 +139,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
 
     if (formRef.current?.checkValidity() === true && !nameError) {
       // Form is valid
-
-      // Update or Add the new tunnel
-      saveTunnelInStorage(tunnels, tunnel)
-
-      // Notify parent of a new selected tunnel
-      // If a user creates a new tunnel, this tells the parent to show the new tunnel on TunnelDisplay
-      childHandleTunnelSelect(tunnel)
+      saveTunnel()
 
       navigate('/')
     } else {
@@ -155,8 +168,10 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
       <div className="flex flex-row items-center gap-2 mt-4">
         <LinkIcon className="h-4 w-4 text-gray-600" />
         <a
-          href="https://github.com/TunnlTo/desktop-app#documentation" target="_blank"
-          className="text-sm leading-6 text-gray-600 hover:text-gray-900" rel="noreferrer"
+          href="https://github.com/TunnlTo/desktop-app#documentation"
+          target="_blank"
+          className="text-sm leading-6 text-gray-600 hover:text-gray-900"
+          rel="noreferrer"
         >
           Documentation
         </a>
@@ -165,8 +180,10 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
       <div className="flex flex-row items-center gap-2 mb-6 mt-2">
         <LinkIcon className="h-4 w-4 text-gray-600" />
         <a
-          href="https://github.com/TunnlTo/desktop-app#example-configurations" target="_blank"
-          className="text-sm leading-6 text-gray-600 hover:text-gray-900" rel="noreferrer"
+          href="https://github.com/TunnlTo/desktop-app#example-configurations"
+          target="_blank"
+          className="text-sm leading-6 text-gray-600 hover:text-gray-900"
+          rel="noreferrer"
         >
           Examples
         </a>
@@ -180,7 +197,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
               Name
             </label>
             <input
-              value={tunnel?.name}
+              value={editedTunnel?.name}
               onChange={handleInputChange}
               onBlur={handleNameCheck}
               type="text"
@@ -214,7 +231,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
             </label>
             <div className="mt-2 flex rounded-md shadow-sm">
               <input
-                value={tunnel?.interface?.ipAddress}
+                value={editedTunnel?.interface?.ipAddress}
                 onChange={handleInputChange}
                 type="text"
                 name="interface.ipAddress"
@@ -235,7 +252,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
             </label>
             <div className="mt-2">
               <input
-                value={tunnel?.interface?.port}
+                value={editedTunnel?.interface?.port}
                 onChange={handleInputChange}
                 type="text"
                 name="interface.port"
@@ -267,7 +284,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
             </label>
             <div className="mt-2">
               <input
-                value={tunnel?.interface?.privateKey}
+                value={editedTunnel?.interface?.privateKey}
                 onChange={handleInputChange}
                 type={isPrivateKeyHidden ? 'password' : 'text'}
                 name="interface.privateKey"
@@ -286,7 +303,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
             </label>
             <div className="mt-2">
               <input
-                value={tunnel?.interface?.dns}
+                value={editedTunnel?.interface?.dns}
                 onChange={handleInputChange}
                 type="text"
                 name="interface.dns"
@@ -300,7 +317,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
             </label>
             <div className="mt-2">
               <input
-                value={tunnel?.interface?.mtu}
+                value={editedTunnel?.interface?.mtu}
                 onChange={handleInputChange}
                 placeholder="1420"
                 type="text"
@@ -326,7 +343,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
             </label>
             <div className="mt-2">
               <input
-                value={tunnel?.peer?.endpoint}
+                value={editedTunnel?.peer?.endpoint}
                 onChange={handleInputChange}
                 type="text"
                 name="peer.endpoint"
@@ -345,7 +362,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
             </label>
             <div className="mt-2">
               <input
-                value={tunnel?.peer?.port}
+                value={editedTunnel?.peer?.port}
                 onChange={handleInputChange}
                 type="text"
                 name="peer.port"
@@ -377,7 +394,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
             </label>
             <div className="mt-2">
               <input
-                defaultValue={tunnel?.peer?.publicKey}
+                defaultValue={editedTunnel?.peer?.publicKey}
                 onChange={handleInputChange}
                 type={isPublicKeyHidden ? 'password' : 'text'}
                 name="peer.publicKey"
@@ -412,7 +429,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
             </label>
             <div className="mt-2">
               <input
-                defaultValue={tunnel?.peer?.presharedKey}
+                defaultValue={editedTunnel?.peer?.presharedKey}
                 onChange={handleInputChange}
                 type={isPresharedKeyHidden ? 'password' : 'text'}
                 name="peer.presharedKey"
@@ -428,7 +445,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
             </label>
             <div className="mt-2">
               <input
-                value={tunnel?.peer?.persistentKeepalive}
+                value={editedTunnel?.peer?.persistentKeepalive}
                 placeholder="25"
                 onChange={handleInputChange}
                 type="text"
@@ -460,7 +477,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
               </label>
               <div className="mt-2">
                 <textarea
-                  value={tunnel?.rules?.allowed.apps}
+                  value={editedTunnel?.rules?.allowed.apps}
                   onChange={handleInputChange}
                   id="rules.allowed.apps"
                   name="rules.allowed.apps"
@@ -473,7 +490,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
               </label>
               <div className="mt-2">
                 <textarea
-                  value={tunnel?.rules?.allowed.folders}
+                  value={editedTunnel?.rules?.allowed.folders}
                   onChange={handleInputChange}
                   id="rules.allowed.folders"
                   name="rules.allowed.folders"
@@ -489,7 +506,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
               </label>
               <div className="mt-2">
                 <textarea
-                  value={tunnel?.rules?.allowed.ipAddresses}
+                  value={editedTunnel?.rules?.allowed.ipAddresses}
                   onChange={handleInputChange}
                   id="rules.allowed.ipAddresses"
                   name="rules.allowed.ipAddresses"
@@ -510,7 +527,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
               </label>
               <div className="mt-2">
                 <textarea
-                  value={tunnel?.rules?.disallowed.apps}
+                  value={editedTunnel?.rules?.disallowed.apps}
                   onChange={handleInputChange}
                   id="rules.disallowed.apps"
                   name="rules.disallowed.apps"
@@ -526,7 +543,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
               </label>
               <div className="mt-2">
                 <textarea
-                  value={tunnel?.rules?.disallowed.folders}
+                  value={editedTunnel?.rules?.disallowed.folders}
                   onChange={handleInputChange}
                   id="rules.disallowed.folders"
                   name="rules.disallowed.folders"
@@ -542,7 +559,7 @@ function TunnelEditor({ tunnels, selectedTunnel, childHandleTunnelSelect }: Conf
               </label>
               <div className="mt-2">
                 <textarea
-                  value={tunnel?.rules?.disallowed.ipAddresses}
+                  value={editedTunnel?.rules?.disallowed.ipAddresses}
                   onChange={handleInputChange}
                   id="rules.disallowed.ipAddresses"
                   name="rules.disallowed.ipAddresses"
diff --git a/src/main.tsx b/src/main.tsx
index c355348..6a2e8f7 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import ReactDOM from 'react-dom/client'
 import './main.css'
 import type SettingsModel from './models/SettingsModel.ts'
-import type Tunnel from './models/Tunnel.ts'
+import Tunnel from './models/Tunnel.ts'
 import { invoke } from '@tauri-apps/api'
 import { listen } from '@tauri-apps/api/event'
 import type WiresockStateModel from './models/WiresockStateModel.ts'
@@ -13,9 +13,10 @@ import TunnelEditor from './components/containers/TunnelEditor.tsx'
 import {
   getSelectedTunnelIDFromStorage,
   getTunnelFromStorage,
-  getTunnelsFromStorage,
-  deleteSelectedTunnelIDFromStorage,
+  getAllTunnelsFromStorage,
   getSettingsFromStorage,
+  saveSelectedTunnelIDInStorage,
+  saveAllTunnelsInStorage,
 } from './utilities/storageUtils.ts'
 import Settings from './components/containers/Settings.tsx'
 import Setup from './components/containers/Setup.tsx'
@@ -26,6 +27,7 @@ function Main(): JSX.Element {
   /* ------------------------- */
   /* ------- useState -------- */
   /* ------------------------- */
+
   // For checking if Wiresock is installed on app launch, so we know to show the setup component or not.
   const [isWiresockInstalled, setIsWiresockInstalled] = useState<boolean | null>(null)
 
@@ -35,38 +37,43 @@ function Main(): JSX.Element {
   // Keep track of whether auto connect has already fired. Don't want it running again on component reload.
   const [hasRunAutoConnect, setHasRunAutoConnect] = useState(false)
 
+  // Get the tunnel configs from local storage
+  const [tunnels, setTunnels] = useState<Record<string, Tunnel>>(getAllTunnelsFromStorage())
+
   // Keep track of which tunnel the UI is showing
   const [selectedTunnel, setSelectedTunnel] = useState<Tunnel | null>(() => {
-    // Get the previously selected tunnel from settings on first load
+    // Retrieve the selected tunnel id from local storage
     const selectedTunnelID = getSelectedTunnelIDFromStorage()
-    if (selectedTunnelID !== null) {
-      return getTunnelFromStorage(selectedTunnelID)
-    } else {
-      return null
-    }
-  })
 
-  // Get the tunnel configs from local storage
-  const [tunnels, setTunnels] = useState<Record<string, Tunnel>>(() => {
-    const tunnelsFromStorage = getTunnelsFromStorage()
-    const filteredTunnels = Object.fromEntries(
-      Object.entries(tunnelsFromStorage).filter(([_, value]) => value !== null),
-    )
-    return filteredTunnels
+    // Retrieve the associated tunnel data
+    return selectedTunnelID != null ? getTunnelFromStorage(selectedTunnelID) : null
   })
 
   /* ------------------------- */
   /* ------- useEffect ------- */
   /* ------------------------- */
 
+  // Functions to run on component mount/dismount
   useEffect(() => {
-    // Check if Wiresock is installed
     void checkWiresockInstalled()
-
-    // Setup Tauri event listeners
     void setupTauriEventListener()
+    convertOldData()
   }, [])
 
+  // Monitor selectedTunnel for changes
+  useEffect(() => {
+    if (selectedTunnel !== null) {
+      saveSelectedTunnelIDInStorage(selectedTunnel.id)
+    }
+  }, [selectedTunnel])
+
+  // Monitor tunnels for changes
+  useEffect(() => {
+    if (tunnels !== null) {
+      saveAllTunnelsInStorage(tunnels)
+    }
+  }, [tunnels])
+
   // Wait for wiresockState data to arrive from Tauri
   // Auto connect a tunnel if one is set
   useEffect(() => {
@@ -90,6 +97,69 @@ function Main(): JSX.Element {
   /* ------- functions ------- */
   /* ------------------------- */
 
+  // Convert local storage data for versions <1.0.0 to the 1.0.0 data structure changes.
+  function convertOldData(): void {
+    // Get all keys from local storage
+    const keys = Object.keys(localStorage)
+
+    // Remove the old selectedTunnel key
+    localStorage.removeItem('selectedTunnel')
+
+    // Filter keys that start with 'tunnel-wireguard-'
+    const oldTunnelKeys = keys.filter((key) => key.startsWith('tunnel-wireguard-'))
+
+    // Iterate over each old tunnel key
+    oldTunnelKeys.forEach((oldTunnelKey) => {
+      // Get the old tunnel data from local storage
+      const oldTunnelData = localStorage.getItem(oldTunnelKey)
+
+      if (oldTunnelData != null) {
+        // Parse the old tunnel data into a JavaScript object
+        const oldTunnel = JSON.parse(oldTunnelData)
+
+        // Create a new Tunnel object and assign the old tunnel data to it
+        const newTunnel = new Tunnel(tunnels)
+        newTunnel.name = oldTunnel.name
+
+        // Interface
+
+        newTunnel.interface.privateKey = oldTunnel.privateKey
+        newTunnel.interface.dns = oldTunnel.dns
+        newTunnel.interface.mtu = oldTunnel.mtu
+        // The /32 is no longer required
+        const [interfaceIpAddress] = oldTunnel.interfaceAddress.split('/')
+        newTunnel.interface.ipAddress = interfaceIpAddress
+
+        // Peer
+
+        newTunnel.peer.publicKey = oldTunnel.publicKey
+        newTunnel.peer.presharedKey = oldTunnel.presharedKey
+        // The old endpoint had the port included and now it is seperated
+        const [peerEndpoint, peerPort] = oldTunnel.endpoint.split(':')
+        newTunnel.peer.endpoint = peerEndpoint
+        newTunnel.peer.port = peerPort
+
+        // Rules
+
+        newTunnel.rules.allowed.apps = oldTunnel.allowedApps
+        newTunnel.rules.disallowed.apps = oldTunnel.disallowedApps
+        newTunnel.rules.allowed.ipAddresses = oldTunnel.allowedIPs
+        newTunnel.rules.disallowed.ipAddresses = oldTunnel.disallowedIPs
+
+        // Save the new tunnel
+        saveTunnelInStorage(tunnels, newTunnel)
+        console.log(`Migrated tunnel "${oldTunnel.name}" to TunnlTo v1.0.0 data structure.`)
+
+        // Update the tunnels useState
+        setTunnels(getAllTunnelsFromStorage())
+
+        // Delete the old tunnel from local storage
+        localStorage.removeItem(oldTunnelKey)
+        console.log(`Removed old version of "${oldTunnel.name}" tunnel data from local storage.`)
+      }
+    })
+  }
+
   async function checkWiresockInstalled(): Promise<void> {
     console.log('Checking if Wiresock is installed')
 
@@ -116,17 +186,6 @@ function Main(): JSX.Element {
     await invoke('get_wiresock_state')
   }
 
-  function parentHandleTunnelSelect(tunnel: Tunnel | null): void {
-    if (tunnel === null) {
-      deleteSelectedTunnelIDFromStorage()
-      setSelectedTunnel(null)
-    } else {
-      localStorage.setItem('selectedTunnelID', tunnel.id)
-      setSelectedTunnel(tunnel)
-    }
-    setTunnels(getTunnelsFromStorage())
-  }
-
   function enableTunnel(tunnelData?: Tunnel): void {
     // use tunnelData if provided, otherwise use selectedTunnel
     invoke('enable_wiresock', {
@@ -163,10 +222,10 @@ function Main(): JSX.Element {
                   <div className="flex min-h-screen w-full bg-gray-100">
                     <div>
                       <Sidebar
-                        childHandleTunnelSelect={parentHandleTunnelSelect}
                         tunnels={tunnels}
                         selectedTunnel={selectedTunnel}
                         wiresockState={wiresockState}
+                        setSelectedTunnel={setSelectedTunnel}
                       />
                     </div>
                     {selectedTunnel !== null && (
@@ -197,7 +256,8 @@ function Main(): JSX.Element {
                   <TunnelEditor
                     tunnels={tunnels}
                     selectedTunnel={selectedTunnel}
-                    childHandleTunnelSelect={parentHandleTunnelSelect}
+                    setSelectedTunnel={setSelectedTunnel}
+                    setTunnels={setTunnels}
                   />
                 </div>
               }
@@ -209,7 +269,8 @@ function Main(): JSX.Element {
                   <TunnelEditor
                     tunnels={tunnels}
                     selectedTunnel={null}
-                    childHandleTunnelSelect={parentHandleTunnelSelect}
+                    setSelectedTunnel={setSelectedTunnel}
+                    setTunnels={setTunnels}
                   />
                 </div>
               }
diff --git a/src/models/Tunnel.ts b/src/models/Tunnel.ts
index af12c50..0a91001 100644
--- a/src/models/Tunnel.ts
+++ b/src/models/Tunnel.ts
@@ -30,7 +30,7 @@ export default class Tunnel {
     }
   }
 
-  constructor() {
+  constructor(tunnels: Record<string, Tunnel>) {
     this.id = ''
     this.name = ''
     this.interface = {
@@ -59,5 +59,17 @@ export default class Tunnel {
         ipAddresses: '',
       },
     }
+
+    let uniqueId = ''
+    const characters = 'abcdefghijklmnopqrstuvwxyz0123456789'
+
+    do {
+      uniqueId = ''
+      for (let i = 0; i < 4; i++) {
+        uniqueId += characters.charAt(Math.floor(Math.random() * characters.length))
+      }
+    } while (Object.prototype.hasOwnProperty.call(tunnels, uniqueId))
+
+    this.id = uniqueId
   }
 }
diff --git a/src/utilities/storageUtils.ts b/src/utilities/storageUtils.ts
index cf92cd6..5ed7624 100644
--- a/src/utilities/storageUtils.ts
+++ b/src/utilities/storageUtils.ts
@@ -1,57 +1,65 @@
 import type Tunnel from '../models/Tunnel.ts'
 import SettingsModel from '../models/SettingsModel.ts'
 
-// Retrieve the existing tunnels data from local storage
-export function getTunnelsFromStorage(): Record<string, Tunnel> {
+/* --------------- */
+/* Tunnels         */
+/* --------------- */
+
+// Get all tunnels
+export function getAllTunnelsFromStorage(): Record<string, Tunnel> {
   const tunnelsStorageItem = localStorage.getItem('tunnels')
   const tunnels = tunnelsStorageItem !== null ? JSON.parse(tunnelsStorageItem) : {}
   return tunnels
 }
 
-// Retrieve a tunnels data from local storage
+// Save all tunnels
+export function saveAllTunnelsInStorage(tunnels: Record<string, Tunnel>): void {
+  localStorage.setItem('tunnels', JSON.stringify(tunnels))
+}
+
+/* --------------- */
+/* Tunnel          */
+/* --------------- */
+
+// Get data for a tunnel
 export function getTunnelFromStorage(tunnelID: string): Tunnel | null {
-  const tunnels = getTunnelsFromStorage()
+  const tunnels = getAllTunnelsFromStorage()
   if (tunnels[tunnelID] !== null) {
     return tunnels[tunnelID]
   }
   return null
 }
 
-// Get the most recently selected tunnel from local storage
-export function getSelectedTunnelIDFromStorage(): string | null {
-  return localStorage.getItem('selectedTunnelID')
-}
+/* --------------- */
+/* Selected Tunnel */
+/* --------------- */
 
-// Save a tunnel to local storage
-export function saveTunnelInStorage(tunnels: Record<string, Tunnel>, tunnel: Tunnel): void {
-  tunnels[tunnel.id] = tunnel
-
-  // Store the updated tunnels data in local storage
-  localStorage.setItem('tunnels', JSON.stringify(tunnels))
+// Delete the selected tunnel
+export function deleteSelectedTunnelIDFromStorage(): void {
+  localStorage.removeItem('selectedTunnelID')
 }
 
-// Delete a tunnel from local storage
-export function deleteTunnelFromStorage(tunnels: Record<string, Tunnel>, tunnelID: string): void {
-  Reflect.deleteProperty(tunnels, tunnelID)
-
-  // Store the updated tunnels data in local storage
-  localStorage.setItem('tunnels', JSON.stringify(tunnels))
+// Get the selected tunnel
+export function getSelectedTunnelIDFromStorage(): string | null {
+  return localStorage.getItem('selectedTunnelID')
 }
 
-// Delete the selected tunnel from local storage
-export function deleteSelectedTunnelIDFromStorage(): void {
-  localStorage.removeItem('selectedTunnelID')
+// Save the selected tunnel
+export function saveSelectedTunnelIDInStorage(selectedTunnelID: string): void {
+  localStorage.setItem('selectedTunnelID', selectedTunnelID)
 }
 
-// Save a tunnel to local storage
+/* --------------- */
+/* Settings        */
+/* --------------- */
+
+// Save settings
 export function saveSettingsInStorage(settings: SettingsModel): void {
-  // Store the settings data in local storage
   localStorage.setItem('settings', JSON.stringify(settings))
 }
 
-// Save a tunnel to local storage
+// Get the settings
 export function getSettingsFromStorage(): SettingsModel {
-  // Get the settings from local storage
   const settingsStorageItem = localStorage.getItem('settings')
   const settings = settingsStorageItem !== null ? JSON.parse(settingsStorageItem) : new SettingsModel()
   return settings

From 36f89bb27f61e6816902b208b5e97e5adbdec8e4 Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Sat, 25 Nov 2023 11:50:20 +1000
Subject: [PATCH 06/18] moved old data converter to storageUtils

---
 src/main.tsx                  | 74 ++++-----------------------------
 src/utilities/storageUtils.ts | 78 ++++++++++++++++++++++++++++++++++-
 2 files changed, 86 insertions(+), 66 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index 6a2e8f7..8f4f99b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import ReactDOM from 'react-dom/client'
 import './main.css'
 import type SettingsModel from './models/SettingsModel.ts'
-import Tunnel from './models/Tunnel.ts'
+import type Tunnel from './models/Tunnel.ts'
 import { invoke } from '@tauri-apps/api'
 import { listen } from '@tauri-apps/api/event'
 import type WiresockStateModel from './models/WiresockStateModel.ts'
@@ -17,6 +17,9 @@ import {
   getSettingsFromStorage,
   saveSelectedTunnelIDInStorage,
   saveAllTunnelsInStorage,
+  removePreVersion1Tunnel,
+  removePreVersion1SelectedTunnel,
+  convertOldData,
 } from './utilities/storageUtils.ts'
 import Settings from './components/containers/Settings.tsx'
 import Setup from './components/containers/Setup.tsx'
@@ -57,7 +60,11 @@ function Main(): JSX.Element {
   useEffect(() => {
     void checkWiresockInstalled()
     void setupTauriEventListener()
-    convertOldData()
+
+    const updatedTunnels = convertOldData(tunnels)
+    if (updatedTunnels !== null) {
+      setTunnels(updatedTunnels)
+    }
   }, [])
 
   // Monitor selectedTunnel for changes
@@ -97,69 +104,6 @@ function Main(): JSX.Element {
   /* ------- functions ------- */
   /* ------------------------- */
 
-  // Convert local storage data for versions <1.0.0 to the 1.0.0 data structure changes.
-  function convertOldData(): void {
-    // Get all keys from local storage
-    const keys = Object.keys(localStorage)
-
-    // Remove the old selectedTunnel key
-    localStorage.removeItem('selectedTunnel')
-
-    // Filter keys that start with 'tunnel-wireguard-'
-    const oldTunnelKeys = keys.filter((key) => key.startsWith('tunnel-wireguard-'))
-
-    // Iterate over each old tunnel key
-    oldTunnelKeys.forEach((oldTunnelKey) => {
-      // Get the old tunnel data from local storage
-      const oldTunnelData = localStorage.getItem(oldTunnelKey)
-
-      if (oldTunnelData != null) {
-        // Parse the old tunnel data into a JavaScript object
-        const oldTunnel = JSON.parse(oldTunnelData)
-
-        // Create a new Tunnel object and assign the old tunnel data to it
-        const newTunnel = new Tunnel(tunnels)
-        newTunnel.name = oldTunnel.name
-
-        // Interface
-
-        newTunnel.interface.privateKey = oldTunnel.privateKey
-        newTunnel.interface.dns = oldTunnel.dns
-        newTunnel.interface.mtu = oldTunnel.mtu
-        // The /32 is no longer required
-        const [interfaceIpAddress] = oldTunnel.interfaceAddress.split('/')
-        newTunnel.interface.ipAddress = interfaceIpAddress
-
-        // Peer
-
-        newTunnel.peer.publicKey = oldTunnel.publicKey
-        newTunnel.peer.presharedKey = oldTunnel.presharedKey
-        // The old endpoint had the port included and now it is seperated
-        const [peerEndpoint, peerPort] = oldTunnel.endpoint.split(':')
-        newTunnel.peer.endpoint = peerEndpoint
-        newTunnel.peer.port = peerPort
-
-        // Rules
-
-        newTunnel.rules.allowed.apps = oldTunnel.allowedApps
-        newTunnel.rules.disallowed.apps = oldTunnel.disallowedApps
-        newTunnel.rules.allowed.ipAddresses = oldTunnel.allowedIPs
-        newTunnel.rules.disallowed.ipAddresses = oldTunnel.disallowedIPs
-
-        // Save the new tunnel
-        saveTunnelInStorage(tunnels, newTunnel)
-        console.log(`Migrated tunnel "${oldTunnel.name}" to TunnlTo v1.0.0 data structure.`)
-
-        // Update the tunnels useState
-        setTunnels(getAllTunnelsFromStorage())
-
-        // Delete the old tunnel from local storage
-        localStorage.removeItem(oldTunnelKey)
-        console.log(`Removed old version of "${oldTunnel.name}" tunnel data from local storage.`)
-      }
-    })
-  }
-
   async function checkWiresockInstalled(): Promise<void> {
     console.log('Checking if Wiresock is installed')
 
diff --git a/src/utilities/storageUtils.ts b/src/utilities/storageUtils.ts
index 5ed7624..5c3b474 100644
--- a/src/utilities/storageUtils.ts
+++ b/src/utilities/storageUtils.ts
@@ -1,4 +1,4 @@
-import type Tunnel from '../models/Tunnel.ts'
+import Tunnel from '../models/Tunnel.ts'
 import SettingsModel from '../models/SettingsModel.ts'
 
 /* --------------- */
@@ -49,6 +49,11 @@ export function saveSelectedTunnelIDInStorage(selectedTunnelID: string): void {
   localStorage.setItem('selectedTunnelID', selectedTunnelID)
 }
 
+// Remove selectedTunnel key that was used in <1.0.0
+export function removePreVersion1SelectedTunnel(): void {
+  localStorage.removeItem('selectedTunnel')
+}
+
 /* --------------- */
 /* Settings        */
 /* --------------- */
@@ -64,3 +69,74 @@ export function getSettingsFromStorage(): SettingsModel {
   const settings = settingsStorageItem !== null ? JSON.parse(settingsStorageItem) : new SettingsModel()
   return settings
 }
+
+/* --------------------------------------------- */
+/* Local storage data migration for <1.0.0 data  */
+/* --------------------------------------------- */
+
+// Convert local storage data for versions <1.0.0 to the 1.0.0 data structure changes.
+export function convertOldData(tunnels: Record<string, Tunnel>): Record<string, Tunnel> | null {
+  // Remove old selected tunnel data
+  removePreVersion1SelectedTunnel()
+
+  // Get all keys from local storage
+  const keys = Object.keys(localStorage)
+
+  // Filter keys that start with 'tunnel-wireguard-'
+  const oldTunnelKeys = keys.filter((key) => key.startsWith('tunnel-wireguard-'))
+
+  if (oldTunnelKeys.length === 0) {
+    return null
+  }
+
+  let updatedTunnels = { ...tunnels }
+
+  // Iterate over each old tunnel key
+  oldTunnelKeys.forEach((oldTunnelKey) => {
+    // Get the old tunnel data from local storage
+    const oldTunnelData = localStorage.getItem(oldTunnelKey)
+
+    if (oldTunnelData != null) {
+      // Parse the old tunnel data into a JavaScript object
+      const oldTunnel = JSON.parse(oldTunnelData)
+
+      // Create a new Tunnel object and assign the old tunnel data to it
+      const newTunnel = new Tunnel(tunnels)
+      newTunnel.name = oldTunnel.name
+
+      // Interface
+
+      newTunnel.interface.privateKey = oldTunnel.privateKey
+      newTunnel.interface.dns = oldTunnel.dns
+      newTunnel.interface.mtu = oldTunnel.mtu
+      // The /32 is no longer required
+      const [interfaceIpAddress] = oldTunnel.interfaceAddress.split('/')
+      newTunnel.interface.ipAddress = interfaceIpAddress
+
+      // Peer
+
+      newTunnel.peer.publicKey = oldTunnel.publicKey
+      newTunnel.peer.presharedKey = oldTunnel.presharedKey
+      // The old endpoint had the port included and now it is seperated
+      const [peerEndpoint, peerPort] = oldTunnel.endpoint.split(':')
+      newTunnel.peer.endpoint = peerEndpoint
+      newTunnel.peer.port = peerPort
+
+      // Rules
+
+      newTunnel.rules.allowed.apps = oldTunnel.allowedApps
+      newTunnel.rules.disallowed.apps = oldTunnel.disallowedApps
+      newTunnel.rules.allowed.ipAddresses = oldTunnel.allowedIPs
+      newTunnel.rules.disallowed.ipAddresses = oldTunnel.disallowedIPs
+
+      // Delete the old tunnel from local storage
+      localStorage.removeItem(oldTunnelKey)
+      console.log(`Removed old version of "${oldTunnel.name}" tunnel data from local storage.`)
+
+      // Create a new object that includes all existing tunnels and the new tunnel
+      updatedTunnels = { ...updatedTunnels, [newTunnel.id]: newTunnel }
+    }
+  })
+
+  return updatedTunnels
+}

From 005305a8a83c3e077b031f95a17b6a81a3e6199f Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Sat, 25 Nov 2023 11:55:16 +1000
Subject: [PATCH 07/18] removed unused imports. fixed lint script

---
 package.json | 2 +-
 src/main.tsx | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/package.json b/package.json
index f6dabfa..5aa5fb3 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "tauri": "tauri",
-    "lint": "npx eslint './src/**/*.{ts,tsx}'"
+    "lint": "npx eslint \"./src/**/*.{ts,tsx}\""
   },
   "dependencies": {
     "@headlessui/react": "^1.7.17",
diff --git a/src/main.tsx b/src/main.tsx
index 8f4f99b..d0b50a2 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -17,8 +17,6 @@ import {
   getSettingsFromStorage,
   saveSelectedTunnelIDInStorage,
   saveAllTunnelsInStorage,
-  removePreVersion1Tunnel,
-  removePreVersion1SelectedTunnel,
   convertOldData,
 } from './utilities/storageUtils.ts'
 import Settings from './components/containers/Settings.tsx'

From 19440412a315909764c55f4cdf7282961e71852c Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Sat, 25 Nov 2023 14:00:55 +1000
Subject: [PATCH 08/18] added tunnels model

---
 src/components/containers/Settings.tsx     | 14 +++----
 src/components/containers/Sidebar.tsx      | 29 ++++++++-----
 src/components/containers/TunnelEditor.tsx | 47 +++++++++-------------
 src/main.tsx                               | 32 ++++++---------
 src/models/Tunnel.ts                       |  4 +-
 src/models/TunnelManager.ts                | 36 +++++++++++++++++
 src/utilities/storageUtils.ts              | 18 +++++----
 7 files changed, 104 insertions(+), 76 deletions(-)
 create mode 100644 src/models/TunnelManager.ts

diff --git a/src/components/containers/Settings.tsx b/src/components/containers/Settings.tsx
index 4575765..033c4b1 100644
--- a/src/components/containers/Settings.tsx
+++ b/src/components/containers/Settings.tsx
@@ -1,15 +1,15 @@
-import type Tunnel from '../../models/Tunnel.ts'
 import type SettingsModel from '../../models/SettingsModel.ts'
 import { useNavigate } from 'react-router-dom'
 import { useState } from 'react'
 import { getSettingsFromStorage, saveSettingsInStorage } from '../../utilities/storageUtils.ts'
 import { enable, isEnabled, disable } from 'tauri-plugin-autostart-api'
+import type TunnelManager from '../../models/TunnelManager.ts'
 
 interface SettingsProps {
-  tunnels: Record<string, Tunnel> | null
+  tunnelManager: TunnelManager | null
 }
 
-function Settings({ tunnels }: SettingsProps): JSX.Element {
+function Settings({ tunnelManager }: SettingsProps): JSX.Element {
   const [settings, setSettings] = useState<SettingsModel>(() => {
     return getSettingsFromStorage()
   })
@@ -25,10 +25,10 @@ function Settings({ tunnels }: SettingsProps): JSX.Element {
   async function enableAutoStart(): Promise<void> {
     try {
       // Note: If trying to enable autostart when its already enabled, it returns a system cannot find specified file error,
-      //       so we check if its current status first to avoid the error 
+      //       so we check if its current status first to avoid the error
       const isAutoStartEnabled: boolean = await isEnabled()
       console.log('AutoStart enabled:', isAutoStartEnabled)
-      
+
       if (settings.autoStart && !isAutoStartEnabled) {
         // Handle user turning on autostart
         await enable()
@@ -99,8 +99,8 @@ function Settings({ tunnels }: SettingsProps): JSX.Element {
             className="block rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
           >
             <option value="">Disabled</option>
-            {tunnels != null &&
-              Object.values(tunnels).map((tunnel, index) => (
+            {tunnelManager?.tunnels != null &&
+              Object.values(tunnelManager.tunnels).map((tunnel, index) => (
                 <option key={index} value={tunnel.id}>
                   {tunnel.name}
                 </option>
diff --git a/src/components/containers/Sidebar.tsx b/src/components/containers/Sidebar.tsx
index cd7b9c9..ac105c8 100644
--- a/src/components/containers/Sidebar.tsx
+++ b/src/components/containers/Sidebar.tsx
@@ -2,16 +2,18 @@ import { Cog6ToothIcon } from '@heroicons/react/24/outline'
 import type Tunnel from '../../models/Tunnel.ts'
 import { useNavigate } from 'react-router-dom'
 import type WiresockStateModel from '../../models/WiresockStateModel.ts'
+import type TunnelManager from '../../models/TunnelManager.ts'
 
 interface SidebarProps {
-  tunnels: Record<string, Tunnel> | null
+  tunnelManager: TunnelManager | null
   selectedTunnel: Tunnel | null
   wiresockState: WiresockStateModel | null
   setSelectedTunnel: (tunnel: Tunnel) => void
 }
 
-function Sidebar({ tunnels, selectedTunnel, wiresockState, setSelectedTunnel }: SidebarProps): JSX.Element {
-  const menuItems = tunnels != null ? Object.keys(tunnels) : []
+function Sidebar({ tunnelManager, selectedTunnel, wiresockState, setSelectedTunnel }: SidebarProps): JSX.Element {
+  const { tunnels } = tunnelManager ?? {}
+  const menuItems = Object.keys(tunnels ?? {})
   const navigate = useNavigate()
 
   function handleAddTunnelButtonClick(): void {
@@ -22,25 +24,30 @@ function Sidebar({ tunnels, selectedTunnel, wiresockState, setSelectedTunnel }:
     navigate('/settings')
   }
 
+  function handleListItemClick(id: string): void {
+    const selectedTunnel = tunnels?.[id]
+    if (selectedTunnel != null) {
+      setSelectedTunnel(selectedTunnel)
+    }
+  }
+
   return (
     <div className="bg-gray-800 w-64 p-4 flex flex-col min-h-screen">
       <h1 className="text-4xl font-semibold text-gray-300 mb-8">TunnlTo</h1>
       <div className="font-medium text-gray-200 text-xs mb-4">Your tunnels</div>
       <ul className="space-y-2">
-        {menuItems.map((item, index) => (
+        {menuItems.map((id) => (
           <li
-            key={index}
+            key={id}
             className={`${
-              selectedTunnel?.id === item
-                ? 'bg-gray-900 text-white'
-                : 'text-gray-300 hover:bg-gray-700 hover:text-white'
+              selectedTunnel?.id === id ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'
             } rounded-md px-2 cursor-pointer text-sm font-medium py-2 flex items-center align-center`}
             onClick={() => {
-              if (tunnels != null) setSelectedTunnel(tunnels[item])
+              handleListItemClick(id)
             }}
           >
-            {tunnels != null ? tunnels[item].name : ''}
-            {wiresockState?.tunnel_status === 'CONNECTED' && wiresockState.tunnel_id === item ? (
+            {tunnels?.[id]?.name ?? ''}
+            {wiresockState?.tunnel_status === 'CONNECTED' && wiresockState.tunnel_id === id ? (
               <span className="ml-auto bg-green-400/30 p-1 text-green-400 flex-none rounded-full" aria-hidden="true">
                 <div className="h-2 w-2 rounded-full bg-current" />
               </span>
diff --git a/src/components/containers/TunnelEditor.tsx b/src/components/containers/TunnelEditor.tsx
index d31f5e7..134f3bd 100644
--- a/src/components/containers/TunnelEditor.tsx
+++ b/src/components/containers/TunnelEditor.tsx
@@ -3,15 +3,21 @@ import Tunnel from '../../models/Tunnel.ts'
 import { useNavigate } from 'react-router-dom'
 import DeleteModal from '../DeleteModal.tsx'
 import { ExclamationTriangleIcon, EyeIcon, EyeSlashIcon, LinkIcon } from '@heroicons/react/24/outline'
+import type TunnelManager from '../../models/TunnelManager.ts'
 
 interface ConfigProps {
-  tunnels: Record<string, Tunnel>
+  tunnelManager: TunnelManager
   selectedTunnel: Tunnel | null
   setSelectedTunnel: (tunnel: Tunnel | null) => void
-  setTunnels: (tunnels: Record<string, Tunnel>) => void
+  setTunnelManager: (tunnelManager: TunnelManager) => void
 }
 
-function TunnelEditor({ tunnels, selectedTunnel, setSelectedTunnel, setTunnels }: ConfigProps): JSX.Element {
+function TunnelEditor({
+  tunnelManager,
+  selectedTunnel,
+  setSelectedTunnel,
+  setTunnelManager,
+}: ConfigProps): JSX.Element {
   /* ------------------------- */
   /* ------- useState -------- */
   /* ------------------------- */
@@ -25,7 +31,7 @@ function TunnelEditor({ tunnels, selectedTunnel, setSelectedTunnel, setTunnels }
   const [editedTunnel, setEditedTunnel] = useState<Tunnel>(() => {
     // If a tunnel is passed in we are editing it, otherwise we are creating a new tunnel
     if (selectedTunnel === null) {
-      const newTunnel = new Tunnel(tunnels)
+      const newTunnel = new Tunnel(tunnelManager.getTunnelIDList())
       return newTunnel
     } else {
       return selectedTunnel
@@ -100,38 +106,23 @@ function TunnelEditor({ tunnels, selectedTunnel, setSelectedTunnel, setTunnels }
   }
 
   function deleteTunnel(): void {
-    // Create a copy of the tunnels object
-    const updatedTunnels = { ...tunnels }
-
-    // Delete the tunnel from the copied object
-    Reflect.deleteProperty(updatedTunnels, editedTunnel.id)
-
-    setTunnels(updatedTunnels)
-
+    tunnelManager.removeTunnel(editedTunnel.id)
+    setTunnelManager(tunnelManager)
     setSelectedTunnel(null)
   }
 
   function saveTunnel(): void {
-    // Create a new object that includes all tunnels and the new tunnel
-    const updatedTunnels = { ...tunnels, [editedTunnel.id]: editedTunnel }
-
-    // Update the state
-    setTunnels(updatedTunnels)
-
+    tunnelManager.addTunnel(editedTunnel)
+    setTunnelManager(tunnelManager)
     setSelectedTunnel(editedTunnel)
   }
 
   function handleNameCheck(): void {
-    // Check the desired name isn't already in use
-    for (const x of Object.values(tunnels)) {
-      if (x.name === editedTunnel.name && x.id !== editedTunnel.id) {
-        // Alert the user
-        setNameError(true)
-        return
-      } else {
-        setNameError(false)
-      }
-    }
+    const tunnelNames = tunnelManager.getTunnelNames()
+    const currentTunnelName = editedTunnel.name
+
+    const isNameUsedByAnotherTunnel = tunnelNames.includes(currentTunnelName)
+    setNameError(isNameUsedByAnotherTunnel)
   }
 
   function handleSaveButtonClick(event: React.FormEvent): void {
diff --git a/src/main.tsx b/src/main.tsx
index d0b50a2..c800e7a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -13,14 +13,13 @@ import TunnelEditor from './components/containers/TunnelEditor.tsx'
 import {
   getSelectedTunnelIDFromStorage,
   getTunnelFromStorage,
-  getAllTunnelsFromStorage,
   getSettingsFromStorage,
   saveSelectedTunnelIDInStorage,
-  saveAllTunnelsInStorage,
   convertOldData,
 } from './utilities/storageUtils.ts'
 import Settings from './components/containers/Settings.tsx'
 import Setup from './components/containers/Setup.tsx'
+import TunnelManager from './models/TunnelManager.ts'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 
@@ -38,8 +37,8 @@ function Main(): JSX.Element {
   // Keep track of whether auto connect has already fired. Don't want it running again on component reload.
   const [hasRunAutoConnect, setHasRunAutoConnect] = useState(false)
 
-  // Get the tunnel configs from local storage
-  const [tunnels, setTunnels] = useState<Record<string, Tunnel>>(getAllTunnelsFromStorage())
+  // Get the tunnels from local storage
+  const [tunnelManager, setTunnelManager] = useState(new TunnelManager())
 
   // Keep track of which tunnel the UI is showing
   const [selectedTunnel, setSelectedTunnel] = useState<Tunnel | null>(() => {
@@ -59,9 +58,9 @@ function Main(): JSX.Element {
     void checkWiresockInstalled()
     void setupTauriEventListener()
 
-    const updatedTunnels = convertOldData(tunnels)
-    if (updatedTunnels !== null) {
-      setTunnels(updatedTunnels)
+    const updatedTunnelManager = convertOldData(tunnelManager)
+    if (updatedTunnelManager !== null) {
+      setTunnelManager(updatedTunnelManager)
     }
   }, [])
 
@@ -72,13 +71,6 @@ function Main(): JSX.Element {
     }
   }, [selectedTunnel])
 
-  // Monitor tunnels for changes
-  useEffect(() => {
-    if (tunnels !== null) {
-      saveAllTunnelsInStorage(tunnels)
-    }
-  }, [tunnels])
-
   // Wait for wiresockState data to arrive from Tauri
   // Auto connect a tunnel if one is set
   useEffect(() => {
@@ -164,7 +156,7 @@ function Main(): JSX.Element {
                   <div className="flex min-h-screen w-full bg-gray-100">
                     <div>
                       <Sidebar
-                        tunnels={tunnels}
+                        tunnelManager={tunnelManager}
                         selectedTunnel={selectedTunnel}
                         wiresockState={wiresockState}
                         setSelectedTunnel={setSelectedTunnel}
@@ -196,10 +188,10 @@ function Main(): JSX.Element {
               element={
                 <div className="flex min-h-screen justify-center">
                   <TunnelEditor
-                    tunnels={tunnels}
+                    tunnelManager={tunnelManager}
                     selectedTunnel={selectedTunnel}
                     setSelectedTunnel={setSelectedTunnel}
-                    setTunnels={setTunnels}
+                    setTunnelManager={setTunnelManager}
                   />
                 </div>
               }
@@ -209,10 +201,10 @@ function Main(): JSX.Element {
               element={
                 <div className="flex min-h-screen justify-center">
                   <TunnelEditor
-                    tunnels={tunnels}
+                    tunnelManager={tunnelManager}
                     selectedTunnel={null}
                     setSelectedTunnel={setSelectedTunnel}
-                    setTunnels={setTunnels}
+                    setTunnelManager={setTunnelManager}
                   />
                 </div>
               }
@@ -221,7 +213,7 @@ function Main(): JSX.Element {
               path="/settings"
               element={
                 <div className="flex min-h-screen justify-center">
-                  <Settings tunnels={tunnels} />
+                  <Settings tunnelManager={tunnelManager} />
                 </div>
               }
             />
diff --git a/src/models/Tunnel.ts b/src/models/Tunnel.ts
index 0a91001..fb55c4f 100644
--- a/src/models/Tunnel.ts
+++ b/src/models/Tunnel.ts
@@ -30,7 +30,7 @@ export default class Tunnel {
     }
   }
 
-  constructor(tunnels: Record<string, Tunnel>) {
+  constructor(tunnelIDList: string[]) {
     this.id = ''
     this.name = ''
     this.interface = {
@@ -68,7 +68,7 @@ export default class Tunnel {
       for (let i = 0; i < 4; i++) {
         uniqueId += characters.charAt(Math.floor(Math.random() * characters.length))
       }
-    } while (Object.prototype.hasOwnProperty.call(tunnels, uniqueId))
+    } while (tunnelIDList.includes(uniqueId))
 
     this.id = uniqueId
   }
diff --git a/src/models/TunnelManager.ts b/src/models/TunnelManager.ts
new file mode 100644
index 0000000..fab78cb
--- /dev/null
+++ b/src/models/TunnelManager.ts
@@ -0,0 +1,36 @@
+import { getAllTunnelsFromStorage, saveAllTunnelsInStorage } from '../utilities/storageUtils'
+import type Tunnel from './Tunnel'
+
+export default class TunnelManager {
+  tunnels: Record<string, Tunnel>
+
+  constructor() {
+    this.tunnels = getAllTunnelsFromStorage()
+  }
+
+  addTunnel(tunnel: Tunnel): void {
+    this.tunnels[tunnel.id] = tunnel
+    saveAllTunnelsInStorage(this.tunnels)
+  }
+
+  removeTunnel(tunnelID: string): void {
+    Reflect.deleteProperty(this.tunnels, tunnelID)
+    saveAllTunnelsInStorage(this.tunnels)
+  }
+
+  getTunnel(tunnelID: string): Tunnel | null {
+    return this.tunnels[tunnelID]
+  }
+
+  getTunnelIDList(): string[] {
+    return Object.keys(this.tunnels)
+  }
+
+  getTunnelNames(): string[] {
+    const tunnelNames: string[] = []
+    for (const tunnel of Object.values(this.tunnels)) {
+      tunnelNames.push(tunnel.name)
+    }
+    return tunnelNames
+  }
+}
diff --git a/src/utilities/storageUtils.ts b/src/utilities/storageUtils.ts
index 5c3b474..b831d33 100644
--- a/src/utilities/storageUtils.ts
+++ b/src/utilities/storageUtils.ts
@@ -1,5 +1,6 @@
 import Tunnel from '../models/Tunnel.ts'
 import SettingsModel from '../models/SettingsModel.ts'
+import type TunnelManager from '../models/TunnelManager.ts'
 
 /* --------------- */
 /* Tunnels         */
@@ -75,7 +76,7 @@ export function getSettingsFromStorage(): SettingsModel {
 /* --------------------------------------------- */
 
 // Convert local storage data for versions <1.0.0 to the 1.0.0 data structure changes.
-export function convertOldData(tunnels: Record<string, Tunnel>): Record<string, Tunnel> | null {
+export function convertOldData(tunnelManager: TunnelManager): TunnelManager | null {
   // Remove old selected tunnel data
   removePreVersion1SelectedTunnel()
 
@@ -89,8 +90,6 @@ export function convertOldData(tunnels: Record<string, Tunnel>): Record<string,
     return null
   }
 
-  let updatedTunnels = { ...tunnels }
-
   // Iterate over each old tunnel key
   oldTunnelKeys.forEach((oldTunnelKey) => {
     // Get the old tunnel data from local storage
@@ -101,7 +100,10 @@ export function convertOldData(tunnels: Record<string, Tunnel>): Record<string,
       const oldTunnel = JSON.parse(oldTunnelData)
 
       // Create a new Tunnel object and assign the old tunnel data to it
-      const newTunnel = new Tunnel(tunnels)
+      const newTunnel = new Tunnel(oldTunnel)
+
+      // Name
+
       newTunnel.name = oldTunnel.name
 
       // Interface
@@ -109,7 +111,7 @@ export function convertOldData(tunnels: Record<string, Tunnel>): Record<string,
       newTunnel.interface.privateKey = oldTunnel.privateKey
       newTunnel.interface.dns = oldTunnel.dns
       newTunnel.interface.mtu = oldTunnel.mtu
-      // The /32 is no longer required
+      // /32 is no longer required
       const [interfaceIpAddress] = oldTunnel.interfaceAddress.split('/')
       newTunnel.interface.ipAddress = interfaceIpAddress
 
@@ -133,10 +135,10 @@ export function convertOldData(tunnels: Record<string, Tunnel>): Record<string,
       localStorage.removeItem(oldTunnelKey)
       console.log(`Removed old version of "${oldTunnel.name}" tunnel data from local storage.`)
 
-      // Create a new object that includes all existing tunnels and the new tunnel
-      updatedTunnels = { ...updatedTunnels, [newTunnel.id]: newTunnel }
+      // Add it to the tunnelManager
+      tunnelManager.addTunnel(newTunnel)
     }
   })
 
-  return updatedTunnels
+  return tunnelManager
 }

From 1e87872fa3c193098b354401d039bf32f26e6e08 Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Sat, 25 Nov 2023 14:40:37 +1000
Subject: [PATCH 09/18] now storing selectedTunnelID instead of selectedTunnel

---
 src/components/containers/Sidebar.tsx       | 16 +++----
 src/components/containers/TunnelDisplay.tsx | 50 ++++++++++++---------
 src/components/containers/TunnelEditor.tsx  | 25 +++++++----
 src/main.tsx                                | 36 +++++++--------
 4 files changed, 69 insertions(+), 58 deletions(-)

diff --git a/src/components/containers/Sidebar.tsx b/src/components/containers/Sidebar.tsx
index ac105c8..951625e 100644
--- a/src/components/containers/Sidebar.tsx
+++ b/src/components/containers/Sidebar.tsx
@@ -1,17 +1,16 @@
 import { Cog6ToothIcon } from '@heroicons/react/24/outline'
-import type Tunnel from '../../models/Tunnel.ts'
 import { useNavigate } from 'react-router-dom'
 import type WiresockStateModel from '../../models/WiresockStateModel.ts'
 import type TunnelManager from '../../models/TunnelManager.ts'
 
 interface SidebarProps {
   tunnelManager: TunnelManager | null
-  selectedTunnel: Tunnel | null
+  selectedTunnelID: string | null
   wiresockState: WiresockStateModel | null
-  setSelectedTunnel: (tunnel: Tunnel) => void
+  setSelectedTunnelID: (tunnelID: string) => void
 }
 
-function Sidebar({ tunnelManager, selectedTunnel, wiresockState, setSelectedTunnel }: SidebarProps): JSX.Element {
+function Sidebar({ tunnelManager, selectedTunnelID, wiresockState, setSelectedTunnelID }: SidebarProps): JSX.Element {
   const { tunnels } = tunnelManager ?? {}
   const menuItems = Object.keys(tunnels ?? {})
   const navigate = useNavigate()
@@ -24,11 +23,8 @@ function Sidebar({ tunnelManager, selectedTunnel, wiresockState, setSelectedTunn
     navigate('/settings')
   }
 
-  function handleListItemClick(id: string): void {
-    const selectedTunnel = tunnels?.[id]
-    if (selectedTunnel != null) {
-      setSelectedTunnel(selectedTunnel)
-    }
+  function handleListItemClick(tunnelID: string): void {
+    setSelectedTunnelID(tunnelID)
   }
 
   return (
@@ -40,7 +36,7 @@ function Sidebar({ tunnelManager, selectedTunnel, wiresockState, setSelectedTunn
           <li
             key={id}
             className={`${
-              selectedTunnel?.id === id ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'
+              selectedTunnelID === id ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'
             } rounded-md px-2 cursor-pointer text-sm font-medium py-2 flex items-center align-center`}
             onClick={() => {
               handleListItemClick(id)
diff --git a/src/components/containers/TunnelDisplay.tsx b/src/components/containers/TunnelDisplay.tsx
index 7d5b874..3709d65 100644
--- a/src/components/containers/TunnelDisplay.tsx
+++ b/src/components/containers/TunnelDisplay.tsx
@@ -1,16 +1,23 @@
-import type Tunnel from '../../models/Tunnel.ts'
 import { useNavigate } from 'react-router-dom'
 import type WiresockStateModel from '../../models/WiresockStateModel.ts'
 import Logs from '../Logs.tsx'
+import type TunnelManager from '../../models/TunnelManager.ts'
 
 interface ConfigProps {
-  selectedTunnel: Tunnel
+  selectedTunnelID: string
   wiresockState: WiresockStateModel | null
   enableTunnel: () => void
   disableTunnel: () => Promise<void>
+  tunnelManager: TunnelManager
 }
 
-function TunnelDisplay({ selectedTunnel, wiresockState, enableTunnel, disableTunnel }: ConfigProps): JSX.Element {
+function TunnelDisplay({
+  selectedTunnelID,
+  wiresockState,
+  enableTunnel,
+  disableTunnel,
+  tunnelManager,
+}: ConfigProps): JSX.Element {
   const navigate = useNavigate()
 
   function handleEditButtonClick(): void {
@@ -28,14 +35,16 @@ function TunnelDisplay({ selectedTunnel, wiresockState, enableTunnel, disableTun
         {/* Start of name, status and buttons */}
         <div className="flex-col mb-4 sm:mb-0">
           {/* Tunnel name */}
-          <h1 className="text-xl font-semibold leading-7 text-gray-900">{selectedTunnel?.name}</h1>
+          <h1 className="text-xl font-semibold leading-7 text-gray-900">
+            {tunnelManager?.getTunnel(selectedTunnelID)?.name}
+          </h1>
 
           {/* Tunnel status section */}
           <div className="flex items-center align-center mt-1">
             {/* Start of Tunnel status icon */}
             <div
               className={`${
-                wiresockState?.tunnel_status === 'CONNECTED' && wiresockState.tunnel_id === selectedTunnel.id
+                wiresockState?.tunnel_status === 'CONNECTED' && wiresockState.tunnel_id === selectedTunnelID
                   ? 'bg-green-400/30 p-1 text-green-400'
                   : 'text-red-400'
               } flex-none rounded-full mr-2`}
@@ -45,7 +54,7 @@ function TunnelDisplay({ selectedTunnel, wiresockState, enableTunnel, disableTun
 
             {/* Tunnel status description */}
             <p className="max-w-2xl text-sm leading-6 text-gray-500">
-              {wiresockState?.tunnel_status === 'CONNECTED' && wiresockState.tunnel_id === selectedTunnel.id
+              {wiresockState?.tunnel_status === 'CONNECTED' && wiresockState.tunnel_id === selectedTunnelID
                 ? 'Enabled'
                 : 'Disabled'}
             </p>
@@ -68,10 +77,10 @@ function TunnelDisplay({ selectedTunnel, wiresockState, enableTunnel, disableTun
           {/* Enable/Disable Button */}
           <button
             type="button"
-            disabled={wiresockState?.tunnel_id !== selectedTunnel.id && wiresockState?.tunnel_status === 'CONNECTED'}
+            disabled={wiresockState?.tunnel_id !== selectedTunnelID && wiresockState?.tunnel_status === 'CONNECTED'}
             onClick={() => {
               void (async () => {
-                if (wiresockState?.tunnel_status === 'CONNECTED' && wiresockState.tunnel_id === selectedTunnel.id) {
+                if (wiresockState?.tunnel_status === 'CONNECTED' && wiresockState.tunnel_id === selectedTunnelID) {
                   await disableTunnel()
                 } else {
                   enableTunnel()
@@ -79,14 +88,14 @@ function TunnelDisplay({ selectedTunnel, wiresockState, enableTunnel, disableTun
               })()
             }}
             className={`${
-              wiresockState?.tunnel_status === 'CONNECTED' && wiresockState.tunnel_id === selectedTunnel.id
+              wiresockState?.tunnel_status === 'CONNECTED' && wiresockState.tunnel_id === selectedTunnelID
                 ? 'bg-red-500 hover:bg-red-400 focus-visible:outline-red-500'
-                : wiresockState?.tunnel_status === 'CONNECTED' && wiresockState.tunnel_id !== selectedTunnel.id
+                : wiresockState?.tunnel_status === 'CONNECTED' && wiresockState.tunnel_id !== selectedTunnelID
                   ? 'bg-gray-500 cursor-not-allowed'
                   : 'bg-green-500 hover:bg-green-400 focus-visible:outline-green-500'
             } w-24 rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2`}
           >
-            {wiresockState?.tunnel_status === 'CONNECTED' && wiresockState.tunnel_id === selectedTunnel.id
+            {wiresockState?.tunnel_status === 'CONNECTED' && wiresockState.tunnel_id === selectedTunnelID
               ? 'Disable'
               : 'Enable'}
           </button>
@@ -101,8 +110,9 @@ function TunnelDisplay({ selectedTunnel, wiresockState, enableTunnel, disableTun
           <div className="pt-4 pb-4 items-center sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
             <dt className="text-sm font-medium leading-6 text-gray-900">Peer Endpoint</dt>
             <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-              {selectedTunnel.peer.endpoint.length > 0 ? `${selectedTunnel.peer.endpoint}:` : ''}
-              {selectedTunnel.peer.port}
+              {`${tunnelManager?.getTunnel(selectedTunnelID)?.peer.endpoint}:${tunnelManager?.getTunnel(
+                selectedTunnelID,
+              )?.peer.port}`}
             </dd>
           </div>
           <div className="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
@@ -110,9 +120,9 @@ function TunnelDisplay({ selectedTunnel, wiresockState, enableTunnel, disableTun
             <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
               {/* Create an array of the values and seperate with a comma */}
               {[
-                selectedTunnel.rules.allowed.apps,
-                selectedTunnel.rules.allowed.folders,
-                selectedTunnel.rules.allowed.ipAddresses,
+                tunnelManager?.getTunnel(selectedTunnelID)?.rules.allowed.apps,
+                tunnelManager?.getTunnel(selectedTunnelID)?.rules.allowed.folders,
+                tunnelManager?.getTunnel(selectedTunnelID)?.rules.allowed.ipAddresses,
               ]
                 .filter(Boolean)
                 .join(', ')}
@@ -123,9 +133,9 @@ function TunnelDisplay({ selectedTunnel, wiresockState, enableTunnel, disableTun
             <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
               {/* Create an array of the values and seperate with a comma */}
               {[
-                selectedTunnel.rules.disallowed.apps,
-                selectedTunnel.rules.disallowed.folders,
-                selectedTunnel.rules.disallowed.ipAddresses,
+                tunnelManager?.getTunnel(selectedTunnelID)?.rules.disallowed.apps,
+                tunnelManager?.getTunnel(selectedTunnelID)?.rules.disallowed.folders,
+                tunnelManager?.getTunnel(selectedTunnelID)?.rules.disallowed.ipAddresses,
               ]
                 .filter(Boolean)
                 .join(', ')}
@@ -136,7 +146,7 @@ function TunnelDisplay({ selectedTunnel, wiresockState, enableTunnel, disableTun
       {/* End of the tunnel config data section **/}
 
       {/* Start of the logs section **/}
-      {wiresockState?.tunnel_id === selectedTunnel.id ? (
+      {wiresockState?.tunnel_id === selectedTunnelID ? (
         <div className="overflow-y-auto pt-4">
           <h2 className="text-base font-semibold leading-7 text-gray-700 pb-4">Connection Logs</h2>
           <Logs wiresockState={wiresockState} />
diff --git a/src/components/containers/TunnelEditor.tsx b/src/components/containers/TunnelEditor.tsx
index 134f3bd..72bcf0a 100644
--- a/src/components/containers/TunnelEditor.tsx
+++ b/src/components/containers/TunnelEditor.tsx
@@ -7,15 +7,15 @@ import type TunnelManager from '../../models/TunnelManager.ts'
 
 interface ConfigProps {
   tunnelManager: TunnelManager
-  selectedTunnel: Tunnel | null
-  setSelectedTunnel: (tunnel: Tunnel | null) => void
+  selectedTunnelID: string | null
+  setSelectedTunnelID: (tunnelID: string | null) => void
   setTunnelManager: (tunnelManager: TunnelManager) => void
 }
 
 function TunnelEditor({
   tunnelManager,
-  selectedTunnel,
-  setSelectedTunnel,
+  selectedTunnelID,
+  setSelectedTunnelID,
   setTunnelManager,
 }: ConfigProps): JSX.Element {
   /* ------------------------- */
@@ -30,11 +30,18 @@ function TunnelEditor({
   const [isPresharedKeyHidden, setIsPresharedKeyHidden] = useState(true)
   const [editedTunnel, setEditedTunnel] = useState<Tunnel>(() => {
     // If a tunnel is passed in we are editing it, otherwise we are creating a new tunnel
-    if (selectedTunnel === null) {
+    if (selectedTunnelID === null) {
       const newTunnel = new Tunnel(tunnelManager.getTunnelIDList())
       return newTunnel
     } else {
-      return selectedTunnel
+      const getTunnel = tunnelManager?.getTunnel(selectedTunnelID)
+      if (getTunnel !== null) {
+        return getTunnel
+      } else {
+        // Problem retrieving the tunnel from storage
+        const newTunnel = new Tunnel(tunnelManager.getTunnelIDList())
+        return newTunnel
+      }
     }
   })
 
@@ -108,13 +115,13 @@ function TunnelEditor({
   function deleteTunnel(): void {
     tunnelManager.removeTunnel(editedTunnel.id)
     setTunnelManager(tunnelManager)
-    setSelectedTunnel(null)
+    setSelectedTunnelID(null)
   }
 
   function saveTunnel(): void {
     tunnelManager.addTunnel(editedTunnel)
     setTunnelManager(tunnelManager)
-    setSelectedTunnel(editedTunnel)
+    setSelectedTunnelID(editedTunnel.id)
   }
 
   function handleNameCheck(): void {
@@ -581,7 +588,7 @@ function TunnelEditor({
           >
             Cancel
           </button>
-          {selectedTunnel !== null && (
+          {selectedTunnelID !== null && (
             <button
               onClick={handleDeleteButtonClick}
               type="button"
diff --git a/src/main.tsx b/src/main.tsx
index c800e7a..84adfe6 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -41,12 +41,9 @@ function Main(): JSX.Element {
   const [tunnelManager, setTunnelManager] = useState(new TunnelManager())
 
   // Keep track of which tunnel the UI is showing
-  const [selectedTunnel, setSelectedTunnel] = useState<Tunnel | null>(() => {
-    // Retrieve the selected tunnel id from local storage
-    const selectedTunnelID = getSelectedTunnelIDFromStorage()
-
-    // Retrieve the associated tunnel data
-    return selectedTunnelID != null ? getTunnelFromStorage(selectedTunnelID) : null
+  const [selectedTunnelID, setSelectedTunnelID] = useState<string | null>(() => {
+    // Retrieve the selected tunnel ID from storage
+    return getSelectedTunnelIDFromStorage() ?? null
   })
 
   /* ------------------------- */
@@ -64,12 +61,12 @@ function Main(): JSX.Element {
     }
   }, [])
 
-  // Monitor selectedTunnel for changes
+  // Monitor selectedTunnelID for changes
   useEffect(() => {
-    if (selectedTunnel !== null) {
-      saveSelectedTunnelIDInStorage(selectedTunnel.id)
+    if (selectedTunnelID !== null) {
+      saveSelectedTunnelIDInStorage(selectedTunnelID)
     }
-  }, [selectedTunnel])
+  }, [selectedTunnelID])
 
   // Wait for wiresockState data to arrive from Tauri
   // Auto connect a tunnel if one is set
@@ -123,7 +120,7 @@ function Main(): JSX.Element {
   function enableTunnel(tunnelData?: Tunnel): void {
     // use tunnelData if provided, otherwise use selectedTunnel
     invoke('enable_wiresock', {
-      tunnel: tunnelData ?? selectedTunnel,
+      tunnel: tunnelData ?? (selectedTunnelID != null ? tunnelManager.getTunnel(selectedTunnelID) : null),
     }).catch((error) => {
       // Handle any issues starting the wiresock_process or the tunnel connecting
       console.error('Invoking enable_wiresock returned error: ', error)
@@ -157,17 +154,18 @@ function Main(): JSX.Element {
                     <div>
                       <Sidebar
                         tunnelManager={tunnelManager}
-                        selectedTunnel={selectedTunnel}
+                        selectedTunnelID={selectedTunnelID}
                         wiresockState={wiresockState}
-                        setSelectedTunnel={setSelectedTunnel}
+                        setSelectedTunnelID={setSelectedTunnelID}
                       />
                     </div>
-                    {selectedTunnel !== null && (
+                    {selectedTunnelID !== null && (
                       <TunnelDisplay
-                        selectedTunnel={selectedTunnel}
+                        selectedTunnelID={selectedTunnelID}
                         wiresockState={wiresockState}
                         enableTunnel={enableTunnel}
                         disableTunnel={disableTunnel}
+                        tunnelManager={tunnelManager}
                       />
                     )}
                   </div>
@@ -189,8 +187,8 @@ function Main(): JSX.Element {
                 <div className="flex min-h-screen justify-center">
                   <TunnelEditor
                     tunnelManager={tunnelManager}
-                    selectedTunnel={selectedTunnel}
-                    setSelectedTunnel={setSelectedTunnel}
+                    selectedTunnelID={selectedTunnelID}
+                    setSelectedTunnelID={setSelectedTunnelID}
                     setTunnelManager={setTunnelManager}
                   />
                 </div>
@@ -202,8 +200,8 @@ function Main(): JSX.Element {
                 <div className="flex min-h-screen justify-center">
                   <TunnelEditor
                     tunnelManager={tunnelManager}
-                    selectedTunnel={null}
-                    setSelectedTunnel={setSelectedTunnel}
+                    selectedTunnelID={null}
+                    setSelectedTunnelID={setSelectedTunnelID}
                     setTunnelManager={setTunnelManager}
                   />
                 </div>

From ec8206e34353dac33a5bb711dacc88a6b283e163 Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Sat, 25 Nov 2023 14:51:36 +1000
Subject: [PATCH 10/18] bumped version to 1.0.1

---
 src-tauri/Cargo.lock | 2 +-
 src-tauri/Cargo.toml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index d8513ab..1c78a3b 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -4172,7 +4172,7 @@ checksum = "3528ecfd12c466c6f163363caf2d02a71161dd5e1cc6ae7b34207ea2d42d81ed"
 
 [[package]]
 name = "tunnlto"
-version = "1.0.0"
+version = "1.0.1"
 dependencies = [
  "home",
  "lazy_static",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index df9ada5..d84f969 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "tunnlto"
-version = "1.0.0"
+version = "1.0.1"
 description = "TunnlTo"
 authors = ["Brendan Osborne"]
 license = ""

From 7a48d9c55da9534cdbedf9c32f6fdf83d9136563 Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Sat, 25 Nov 2023 15:11:49 +1000
Subject: [PATCH 11/18] fixed bug in data converter. fixed version bump

---
 src-tauri/tauri.conf.json     | 2 +-
 src/utilities/storageUtils.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 85d2d38..b1e8fdb 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "TunnlTo",
-    "version": "1.0.0"
+    "version": "1.0.1"
   },
   "tauri": {
     "systemTray": {
diff --git a/src/utilities/storageUtils.ts b/src/utilities/storageUtils.ts
index b831d33..afaa255 100644
--- a/src/utilities/storageUtils.ts
+++ b/src/utilities/storageUtils.ts
@@ -100,7 +100,7 @@ export function convertOldData(tunnelManager: TunnelManager): TunnelManager | nu
       const oldTunnel = JSON.parse(oldTunnelData)
 
       // Create a new Tunnel object and assign the old tunnel data to it
-      const newTunnel = new Tunnel(oldTunnel)
+      const newTunnel = new Tunnel(tunnelManager.getTunnelIDList())
 
       // Name
 

From 2bdc8cd88218b3a8f79ba935f9129ec8d58a9bc1 Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Sat, 25 Nov 2023 17:00:26 +1000
Subject: [PATCH 12/18] bring readme into line with main branch

---
 README.md | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 1916930..0a997c0 100644
--- a/README.md
+++ b/README.md
@@ -174,10 +174,9 @@ The list of applications that can use the tunnel.
 - Use the full path to the executable
 - List the process name without the .exe extension
 - List the process name with the .exe extension
-- File paths with spaces should be encapsulated in "inverted commas".
 
 #### Examples
-- `"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"`
+- `C:\Program Files (x86)\Google\Chrome\Application\chrome.exe`
 - `chrome, msoffice, firefox`
 
 ### Allow Folders
@@ -185,14 +184,13 @@ The list of applications that can use the tunnel.
 
 - Use a comma to separate multiple folders.
 - If this parameter is used, the Allowed IP's parameter must also be set.
-- File paths with spaces should be encapsulated in "inverted commas".
 
 #### Options
 - List a folder path (which should include at least one slash or backslash), and all executables within that folder and its subfolders will be included.
-- File paths with spaces should be encapsulated in "inverted commas".
 
 #### Examples
-- `"C:\Program Files (x86)\"`
+- `C:\Program Files (x86)\`
+- `D:\Work Apps\, C:\Program Files\Slack\`
 
 ### Allow IP Addresses
 The list of IP addresses and IP ranges that can use the tunnel.
@@ -218,7 +216,7 @@ Apps that cannot use the tunnel.
 - List the process name with the .exe extension
 
 #### Examples
-- `"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"`
+- `C:\Program Files (x86)\Google\Chrome\Application\chrome.exe`
 - `chrome, msoffice,`
 - `firefox.exe`
 
@@ -227,13 +225,13 @@ The folders containing apps that cannot use the tunnel.
 
 - Allowed Folders takes precedence, and if both are specified, then Allowed Apps is matched first.
 - Use a comma to separate multiple folders.
-- File paths with spaces should be encapsulated in "inverted commas".
 
 #### Options
 - List a folder path (which should include at least one slash or backslash), and all executables within that folder and its subfolders will be excluded.
 
-#### Examples
-- `"C:\Program Files (x86)\"`
+#### Example
+- `C:\Program Files (x86)\`
+- `D:\Work Apps\, C:\Program Files\Slack\`
 
 ### Disallow IP Addresses
 The IP addresses and IP ranges that cannot use the tunnel.
@@ -301,7 +299,7 @@ In this example, all apps in the `C:\Work Apps\` folder are routed through the t
 ### Configuration
 
 - DNS: `10.64.0.1`
-- Allowed Apps: `"C:\Work Apps\"`
+- Allowed Apps: `D:\Work Apps\`
 - Allowed IP's: `0.0.0.0/0`
 
 ## Route a specific IP address range when used by a specific app through a tunnel
@@ -356,7 +354,7 @@ You utilise an overseas VPN server for faster ping times to an overseas region i
 
 ### Expected Outcome
 
-Counter Strike traffic is routed through the tunnel except for when a specific IP address range is accessed by the game. In this case the IP range would be the local servers.
+Counter Strike traffic is routed through the tunnel except for when a specific IP address range is accessed by the game. In this case the IP range are local servers.
 
 ### Configuration
 
@@ -381,4 +379,4 @@ Copyright (c) 2023 TunnlTo. TunnlTo is not currently licensed.
 
 - [WireSock](https://www.wiresock.net/) and its creator [Vadim Smirnov](https://www.ntkernel.com/)
 - [WireGuard](https://www.wireguard.com/)
-- [Tauri](https://tauri.app/)
+- [Tauri](https://tauri.app/)
\ No newline at end of file

From 05130e4619cf422d3ab25815d91fde45f8972fd3 Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Sat, 25 Nov 2023 18:55:48 +1000
Subject: [PATCH 13/18] check for supported version of wiresock

---
 package-lock.json                   | 231 ++++++++--------------------
 src-tauri/Cargo.lock                |  12 +-
 src-tauri/Cargo.toml                |   2 +-
 src-tauri/src/main.rs               |  58 ++++---
 src/components/containers/Setup.tsx |  17 +-
 src/main.tsx                        |  42 +++--
 6 files changed, 145 insertions(+), 217 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9f8c8d1..5809507 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -123,6 +123,15 @@
         "url": "https://opencollective.com/babel"
       }
     },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/generator": {
       "version": "7.23.0",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
@@ -154,6 +163,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/helper-environment-visitor": {
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
@@ -1299,39 +1317,6 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "node_modules/@typescript-eslint/parser": {
       "version": "6.9.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.9.1.tgz",
@@ -1444,39 +1429,6 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "node_modules/@typescript-eslint/utils": {
       "version": "6.9.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.9.1.tgz",
@@ -1502,39 +1454,6 @@
         "eslint": "^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/@typescript-eslint/utils/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "node_modules/@typescript-eslint/visitor-keys": {
       "version": "6.9.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.9.1.tgz",
@@ -1925,39 +1844,6 @@
         "semver": "^7.0.0"
       }
     },
-    "node_modules/builtins/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/builtins/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/builtins/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "node_modules/call-bind": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
@@ -2625,6 +2511,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/eslint-plugin-n": {
       "version": "16.2.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-16.2.0.tgz",
@@ -2651,39 +2546,6 @@
         "eslint": ">=7.0.0"
       }
     },
-    "node_modules/eslint-plugin-n/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/eslint-plugin-n/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/eslint-plugin-n/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "node_modules/eslint-plugin-promise": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-6.1.1.tgz",
@@ -2755,6 +2617,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -4746,14 +4617,38 @@
       }
     },
     "node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
       "bin": {
         "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
+    "node_modules/semver/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
     "node_modules/set-function-length": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 1c78a3b..aa50e7c 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -4186,7 +4186,7 @@ dependencies = [
  "tauri-plugin-single-instance",
  "tauri-plugin-window-state",
  "windows 0.43.0",
- "winreg 0.51.0",
+ "winreg 0.52.0",
 ]
 
 [[package]]
@@ -4898,6 +4898,16 @@ dependencies = [
  "windows-sys 0.48.0",
 ]
 
+[[package]]
+name = "winreg"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a277a57398d4bfa075df44f501a17cfdf8542d224f0d36095a2adc7aee4ef0a5"
+dependencies = [
+ "cfg-if",
+ "windows-sys 0.48.0",
+]
+
 [[package]]
 name = "wry"
 version = "0.24.4"
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index d84f969..e764ea8 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -17,7 +17,7 @@ tauri = { version = "1.5", features = ["api-all", "devtools", "system-tray", "up
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 home = "0.5.5"
-winreg = "0.51.0"
+winreg = "0.52.0"
 sysinfo = "0.29.10"
 once_cell = "1.18.0"
 lazy_static = "1.4.0"
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index cb0b134..1a90438 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -15,7 +15,6 @@ use lazy_static::lazy_static;
 use once_cell::sync::OnceCell;
 use serde::Serialize;
 use std::sync::Mutex;
-use sysinfo::{System, SystemExt};
 use tauri::Manager;
 use tauri::{CustomMenuItem, SystemTray, SystemTrayEvent, SystemTrayMenu, SystemTrayMenuItem};
 use tauri_plugin_autostart::MacosLauncher;
@@ -412,6 +411,38 @@ fn get_wiresock_install_path() -> Result<String, String> {
     Ok(wiresock_location)
 }
 
+#[tauri::command]
+fn get_wiresock_version() -> Result<String, String> {
+    println!("Starting get_wiresock_version");
+
+    let uninstall_keys = RegKey::predef(HKEY_LOCAL_MACHINE)
+        .open_subkey("SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Uninstall")
+        .map_err(|e| e.to_string())?;
+
+    for name in uninstall_keys.enum_keys().map(|x| x.unwrap()) {
+        let subkey = uninstall_keys
+            .open_subkey(&name)
+            .map_err(|e| e.to_string())?;
+        match subkey.get_value::<String, _>("DisplayName") {
+            Ok(display_name) => {
+                if display_name.starts_with("WireSock VPN Client") {
+                    println!("Found WireSock VPN Client key");
+                    match subkey.get_value::<String, _>("DisplayVersion") {
+                        Ok(version) => {
+                            println!("DisplayVersion: {}", version);
+                            return Ok(version);
+                        }
+                        Err(e) => eprintln!("Error getting display version: {:?}", e),
+                    }
+                }
+            }
+            Err(_) => (),
+        }
+    }
+
+    Ok("wiresock_not_installed".into())
+}
+
 #[tauri::command]
 fn disable_wiresock() -> Result<(), String> {
     println!("Attempting to stop WireSock");
@@ -487,26 +518,6 @@ fn check_wiresock_service() -> Result<String, String> {
     }
 }
 
-#[tauri::command]
-fn check_wiresock_process() -> Result<String, String> {
-    let s = System::new_all();
-
-    for _process in s.processes_by_exact_name("wiresock-client.exe") {
-        println!("WireSock client is running");
-        return Ok("WIRESOCK_IS_RUNNING".into());
-    }
-
-    Ok("WIRESOCK_NOT_RUNNING".into())
-}
-
-#[tauri::command]
-fn check_wiresock_installed() -> Result<String, String> {
-    match get_wiresock_install_path() {
-        Ok(_result) => return Ok("WIRESOCK_INSTALLED".into()),
-        Err(_e) => return Ok("WIRESOCK_NOT_INSTALLED".into()),
-    }
-}
-
 fn main() {
     // Initialize global job object
     if let Ok(child_process_tracker) = ChildProcessTracker::new() {
@@ -524,11 +535,10 @@ fn main() {
         .invoke_handler(tauri::generate_handler![
             enable_wiresock,
             disable_wiresock,
-            check_wiresock_process,
             install_wiresock,
-            check_wiresock_installed,
             check_wiresock_service,
-            get_wiresock_state
+            get_wiresock_state,
+            get_wiresock_version
         ])
         .system_tray(SystemTray::new().with_menu(tray_menu))
         .on_system_tray_event(|app, event| match event {
diff --git a/src/components/containers/Setup.tsx b/src/components/containers/Setup.tsx
index 3a3a3a8..4514c06 100644
--- a/src/components/containers/Setup.tsx
+++ b/src/components/containers/Setup.tsx
@@ -2,10 +2,11 @@ import { useState } from 'react'
 import { invoke } from '@tauri-apps/api'
 
 interface SetupProps {
-  setIsWiresockInstalled: (isWireSockInstalled: boolean) => void
+  supportedWiresockInstalled: boolean
+  setSupportedWiresockInstalled: (supportedWiresockInstalled: boolean) => void
 }
 
-function Setup({ setIsWiresockInstalled }: SetupProps): JSX.Element {
+function Setup({ supportedWiresockInstalled, setSupportedWiresockInstalled }: SetupProps): JSX.Element {
   const [errorMessage, setErrorMessage] = useState('')
   const [installing, setInstalling] = useState(false)
 
@@ -18,7 +19,7 @@ function Setup({ setIsWiresockInstalled }: SetupProps): JSX.Element {
         console.info(result)
         if (result === 'WIRESOCK_INSTALLED') {
           // Tell the parent that WireSock is now installed and it will handle routing to a new page
-          setIsWiresockInstalled(true)
+          setSupportedWiresockInstalled(true)
         }
       } catch (error) {
         console.error('Error in handleInstallButtonClick: ', error)
@@ -29,12 +30,14 @@ function Setup({ setIsWiresockInstalled }: SetupProps): JSX.Element {
   }
 
   return (
-    <div className="flex flex-col items-center justify-center w-2/3 mx-auto space-y-6">
+    <div className="flex flex-col items-center justify-center w-1/2 text-center mx-auto space-y-6">
       <div className="flex flex-col items-center border-b border-gray-200 pb-6">
-        <h1 className="text-2xl font-semibold leading-7 text-gray-900">Setup</h1>
+        <h1 className="text-2xl font-semibold leading-7 text-gray-900">
+        {supportedWiresockInstalled ? 'Install WireSock' : <>Uh oh! <br /><br /> An unsupported version of WireSock is currently installed.</>}        </h1>
         <p className="pt-6 text-sm leading-6 text-gray-600 text-center">
-          Installation of WireSock is required. WireSock serves as a network driver designed to manage WireGuard
-          connections and facilitate split tunneling.
+          {supportedWiresockInstalled
+            ? 'WireSock serves as a network driver designed to manage WireGuard connections and facilitate split tunneling.'
+            : 'But don\'t worry! Simply click the Install WireSock button to get the supported version.'}
         </p>
       </div>
 
diff --git a/src/main.tsx b/src/main.tsx
index 84adfe6..f97e30e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -28,9 +28,6 @@ function Main(): JSX.Element {
   /* ------- useState -------- */
   /* ------------------------- */
 
-  // For checking if Wiresock is installed on app launch, so we know to show the setup component or not.
-  const [isWiresockInstalled, setIsWiresockInstalled] = useState<boolean | null>(null)
-
   // For keeping track of the state of the wiresock process and tunnel connection status emitted from Tauri.
   const [wiresockState, setWiresockState] = useState<WiresockStateModel | null>(null)
 
@@ -40,6 +37,9 @@ function Main(): JSX.Element {
   // Get the tunnels from local storage
   const [tunnelManager, setTunnelManager] = useState(new TunnelManager())
 
+  // For deciding where to route
+  const [supportedWiresockInstalled, setSupportedWiresockInstalled] = useState<boolean | null>(null)
+
   // Keep track of which tunnel the UI is showing
   const [selectedTunnelID, setSelectedTunnelID] = useState<string | null>(() => {
     // Retrieve the selected tunnel ID from storage
@@ -52,8 +52,8 @@ function Main(): JSX.Element {
 
   // Functions to run on component mount/dismount
   useEffect(() => {
-    void checkWiresockInstalled()
     void setupTauriEventListener()
+    void getWiresockVersion()
 
     const updatedTunnelManager = convertOldData(tunnelManager)
     if (updatedTunnelManager !== null) {
@@ -91,17 +91,24 @@ function Main(): JSX.Element {
   /* ------- functions ------- */
   /* ------------------------- */
 
-  async function checkWiresockInstalled(): Promise<void> {
-    console.log('Checking if Wiresock is installed')
+  async function getWiresockVersion(): Promise<void> {
+    console.log('Checking Wiresock version')
 
-    const result = await invoke('check_wiresock_installed')
+    const result = await invoke('get_wiresock_version')
+
+    if (result === 'wiresock_not_installed') {
+      console.log('WireSock is not installed')
+      setSupportedWiresockInstalled(false)
+      return
+    }
 
-    if (result === 'WIRESOCK_INSTALLED') {
-      setIsWiresockInstalled(true)
-      console.log('Wiresock is installed')
-    } else if (result === 'WIRESOCK_NOT_INSTALLED') {
-      console.log('Wiresock is not installed. Router will load the setup component.')
-      setIsWiresockInstalled(false)
+    console.log('Wiresock version is ', result)
+    if (result === '1.2.32.1') {
+      console.log('Supported version of Wiresock installed')
+      setSupportedWiresockInstalled(true)
+    } else {
+      console.log('An unsupported version of Wiresock is installed')
+      setSupportedWiresockInstalled(false)
     }
   }
 
@@ -144,9 +151,9 @@ function Main(): JSX.Element {
       <div>
         <Router>
           <Routes>
-            {isWiresockInstalled === null ? (
+            {supportedWiresockInstalled === null ? (
               <Route path="*" element={<div>Loading...</div>} />
-            ) : isWiresockInstalled ? (
+            ) : supportedWiresockInstalled ? (
               <Route
                 path="/"
                 element={
@@ -176,7 +183,10 @@ function Main(): JSX.Element {
                 path="/"
                 element={
                   <div className="flex min-h-screen justify-center">
-                    <Setup setIsWiresockInstalled={setIsWiresockInstalled} />
+                    <Setup
+                      supportedWiresockInstalled={supportedWiresockInstalled}
+                      setSupportedWiresockInstalled={setSupportedWiresockInstalled}
+                    />
                   </div>
                 }
               />

From 3e007295a3ff0c6fd0625cbe4b4df463cdaae211 Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Mon, 27 Nov 2023 10:25:06 +1000
Subject: [PATCH 14/18] diff text for setup depending on wiresock version

---
 src/components/containers/Setup.tsx | 14 +++++++-------
 src/main.tsx                        | 10 +++++-----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/containers/Setup.tsx b/src/components/containers/Setup.tsx
index 4514c06..e375452 100644
--- a/src/components/containers/Setup.tsx
+++ b/src/components/containers/Setup.tsx
@@ -2,8 +2,8 @@ import { useState } from 'react'
 import { invoke } from '@tauri-apps/api'
 
 interface SetupProps {
-  supportedWiresockInstalled: boolean
-  setSupportedWiresockInstalled: (supportedWiresockInstalled: boolean) => void
+  supportedWiresockInstalled: string
+  setSupportedWiresockInstalled: (supportedWiresockInstalled: string) => void
 }
 
 function Setup({ supportedWiresockInstalled, setSupportedWiresockInstalled }: SetupProps): JSX.Element {
@@ -19,7 +19,7 @@ function Setup({ supportedWiresockInstalled, setSupportedWiresockInstalled }: Se
         console.info(result)
         if (result === 'WIRESOCK_INSTALLED') {
           // Tell the parent that WireSock is now installed and it will handle routing to a new page
-          setSupportedWiresockInstalled(true)
+          setSupportedWiresockInstalled('supported_version_installed')
         }
       } catch (error) {
         console.error('Error in handleInstallButtonClick: ', error)
@@ -33,11 +33,11 @@ function Setup({ supportedWiresockInstalled, setSupportedWiresockInstalled }: Se
     <div className="flex flex-col items-center justify-center w-1/2 text-center mx-auto space-y-6">
       <div className="flex flex-col items-center border-b border-gray-200 pb-6">
         <h1 className="text-2xl font-semibold leading-7 text-gray-900">
-        {supportedWiresockInstalled ? 'Install WireSock' : <>Uh oh! <br /><br /> An unsupported version of WireSock is currently installed.</>}        </h1>
+        {supportedWiresockInstalled !== 'unsupported_version_installed' ? 'Install WireSock' : <>Uh oh! <br /><br /> An unsupported version of WireSock is currently installed.</>}        </h1>
         <p className="pt-6 text-sm leading-6 text-gray-600 text-center">
-          {supportedWiresockInstalled
-            ? 'WireSock serves as a network driver designed to manage WireGuard connections and facilitate split tunneling.'
-            : 'But don\'t worry! Simply click the Install WireSock button to get the supported version.'}
+          {supportedWiresockInstalled !== 'unsupported_version_installed'
+            ? 'WireSock is a network driver to manage WireGuard connections and facilitate split tunneling. It is required by TunnlTo.'
+            : 'But don\'t worry! Simply click the Install WireSock button to install the supported version.'}
         </p>
       </div>
 
diff --git a/src/main.tsx b/src/main.tsx
index f97e30e..c1f238f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -38,7 +38,7 @@ function Main(): JSX.Element {
   const [tunnelManager, setTunnelManager] = useState(new TunnelManager())
 
   // For deciding where to route
-  const [supportedWiresockInstalled, setSupportedWiresockInstalled] = useState<boolean | null>(null)
+  const [supportedWiresockInstalled, setSupportedWiresockInstalled] = useState<string | null>(null)
 
   // Keep track of which tunnel the UI is showing
   const [selectedTunnelID, setSelectedTunnelID] = useState<string | null>(() => {
@@ -98,17 +98,17 @@ function Main(): JSX.Element {
 
     if (result === 'wiresock_not_installed') {
       console.log('WireSock is not installed')
-      setSupportedWiresockInstalled(false)
+      setSupportedWiresockInstalled('wiresock_not_installed')
       return
     }
 
     console.log('Wiresock version is ', result)
     if (result === '1.2.32.1') {
       console.log('Supported version of Wiresock installed')
-      setSupportedWiresockInstalled(true)
+      setSupportedWiresockInstalled('supported_version_installed')
     } else {
       console.log('An unsupported version of Wiresock is installed')
-      setSupportedWiresockInstalled(false)
+      setSupportedWiresockInstalled('unsupported_version_installed')
     }
   }
 
@@ -153,7 +153,7 @@ function Main(): JSX.Element {
           <Routes>
             {supportedWiresockInstalled === null ? (
               <Route path="*" element={<div>Loading...</div>} />
-            ) : supportedWiresockInstalled ? (
+            ) : supportedWiresockInstalled === 'supported_version_installed' ? (
               <Route
                 path="/"
                 element={

From e486333a93dfc98819b88e5a30de465b93ddee55 Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Mon, 27 Nov 2023 13:07:09 +1000
Subject: [PATCH 15/18] add seperation of interface ipv4 and ipv6 addresses

---
 src-tauri/src/main.rs                      |  42 +-
 src-tauri/src/tunnel.rs                    |   3 +-
 src/components/containers/TunnelEditor.tsx | 471 ++++++++++++---------
 src/models/Tunnel.ts                       |   6 +-
 4 files changed, 312 insertions(+), 210 deletions(-)

diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 1a90438..5201405 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -198,33 +198,71 @@ async fn enable_wiresock(tunnel: Tunnel, app_handle: tauri::AppHandle) -> Result
 
     // Interface section
     writeln!(&mut w, "[Interface]").unwrap();
+
+    // Interface Private Key
     writeln!(&mut w, "PrivateKey = {}", tunnel.interface.privateKey).unwrap();
-    writeln!(&mut w, "Address = {}", tunnel.interface.ipAddress).unwrap();
+
+    // Interface addresses
+    let mut interface_addresses = String::new();
+
+    if !tunnel.interface.ipv4Address.is_empty() {
+        interface_addresses = format!("Address = {}", tunnel.interface.ipv4Address);
+    }
+
+    if !tunnel.interface.ipv6Address.is_empty() {
+        if !interface_addresses.is_empty() {
+            // Ensure there is comma between the ipv4 and ipv6 addresses
+            interface_addresses =
+                format!("{}, {}", interface_addresses, tunnel.interface.ipv6Address);
+        } else {
+            // There is no ipv4 address set, but a ipv6 address is set
+            interface_addresses = format!("Address = {}", tunnel.interface.ipv6Address);
+        }
+    }
+
+    // Write the interface addresses to the config file
+    if !interface_addresses.is_empty() {
+        writeln!(&mut w, "{}", interface_addresses).unwrap();
+    }
+
+    // Interface ListenPort
     if !tunnel.interface.port.is_empty() {
         writeln!(&mut w, "ListenPort = {}", tunnel.interface.port).unwrap();
     }
+
+    // Interface DNS
     if !tunnel.interface.dns.is_empty() {
         writeln!(&mut w, "DNS = {}", tunnel.interface.dns).unwrap();
     }
+
+    // Interface MTU
     if !tunnel.interface.mtu.is_empty() {
         writeln!(&mut w, "MTU = {}", tunnel.interface.mtu).unwrap();
     }
 
-    // Put a space between the sections for readability
+    // Put a space between the interface and peer sections for readability
     writeln!(&mut w, "").unwrap();
 
     // Peer section
     writeln!(&mut w, "[Peer]").unwrap();
+
+    // Peer Public Key
     writeln!(&mut w, "PublicKey = {}", tunnel.peer.publicKey).unwrap();
+
+    // Peer Preshared Key
     if !tunnel.peer.presharedKey.is_empty() {
         writeln!(&mut w, "PresharedKey = {}", tunnel.peer.presharedKey).unwrap();
     }
+
+    // Peer Endpoint
     writeln!(
         &mut w,
         "Endpoint = {}:{}",
         tunnel.peer.endpoint, tunnel.peer.port
     )
     .unwrap();
+
+    // Peer Persistent Keep-alive
     if !tunnel.peer.persistentKeepalive.is_empty() {
         writeln!(
             &mut w,
diff --git a/src-tauri/src/tunnel.rs b/src-tauri/src/tunnel.rs
index aaef2bf..9c75fe9 100644
--- a/src-tauri/src/tunnel.rs
+++ b/src-tauri/src/tunnel.rs
@@ -3,7 +3,8 @@ use serde::{Deserialize, Serialize};
 #[allow(non_snake_case)]
 #[derive(Debug, Deserialize, Serialize)]
 pub struct Interface {
-    pub ipAddress: String,
+    pub ipv4Address: String,
+    pub ipv6Address: String,
     pub port: String,
     pub privateKey: String,
     pub dns: String,
diff --git a/src/components/containers/TunnelEditor.tsx b/src/components/containers/TunnelEditor.tsx
index 72bcf0a..1a33f26 100644
--- a/src/components/containers/TunnelEditor.tsx
+++ b/src/components/containers/TunnelEditor.tsx
@@ -24,6 +24,7 @@ function TunnelEditor({
 
   const [wasValidated, setWasValidated] = useState(false)
   const [nameError, setNameError] = useState(false)
+  const [ipError, setIpError] = useState(false)
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
   const [isPrivateKeyHidden, setIsPrivateKeyHidden] = useState(true)
   const [isPublicKeyHidden, setIsPublicKeyHidden] = useState(true)
@@ -56,6 +57,16 @@ function TunnelEditor({
   /* ------- functions ------- */
   /* ------------------------- */
 
+  function handleIpValidation(): void {
+    if ((editedTunnel.interface.ipv4Address.length === 0) && (editedTunnel.interface.ipv6Address.length === 0)) {
+      console.log('Setting ip error to true')
+      setIpError(true)
+    } else {
+      console.log('Setting ip error to false')
+      setIpError(false)
+    }
+  }
+
   function toggleKeyVisibility(key: 'privateKey' | 'publicKey' | 'presharedKey'): void {
     if (key === 'privateKey') {
       setIsPrivateKeyHidden(!isPrivateKeyHidden)
@@ -78,10 +89,10 @@ function TunnelEditor({
       if (keys[0] === 'interface') {
         setEditedTunnel({
           ...editedTunnel,
-          interface: { ...editedTunnel?.interface, [keys[1]]: value },
+          interface: { ...editedTunnel.interface, [keys[1]]: value },
         })
       } else if (keys[0] === 'peer') {
-        setEditedTunnel({ ...editedTunnel, peer: { ...editedTunnel?.peer, [keys[1]]: value } })
+        setEditedTunnel({ ...editedTunnel, peer: { ...editedTunnel.peer, [keys[1]]: value } })
       }
     } else if (keys.length === 3) {
       if (keys[0] === 'rules') {
@@ -89,9 +100,9 @@ function TunnelEditor({
           setEditedTunnel({
             ...editedTunnel,
             rules: {
-              ...editedTunnel?.rules,
+              ...editedTunnel.rules,
               [keys[1]]: {
-                ...editedTunnel?.rules[keys[1]],
+                ...editedTunnel.rules[keys[1]],
                 [keys[2]]: value,
               },
             },
@@ -135,7 +146,9 @@ function TunnelEditor({
   function handleSaveButtonClick(event: React.FormEvent): void {
     event?.preventDefault() // Prevent form from submitting
 
-    if (formRef.current?.checkValidity() === true && !nameError) {
+    handleIpValidation()
+
+    if (formRef.current?.checkValidity() === true && !nameError && !ipError) {
       // Form is valid
       saveTunnel()
 
@@ -195,7 +208,7 @@ function TunnelEditor({
               Name
             </label>
             <input
-              value={editedTunnel?.name}
+              value={editedTunnel.name}
               onChange={handleInputChange}
               onBlur={handleNameCheck}
               type="text"
@@ -223,106 +236,143 @@ function TunnelEditor({
             <p className="mt-1 text-sm leading-6 text-gray-600">Configure the local network interface.</p>
           </div>
 
-          <div className="sm:col-span-4">
-            <label htmlFor="interface.ipAddress" className="block text-sm font-medium leading-6 text-gray-900">
-              IP Address
-            </label>
-            <div className="mt-2 flex rounded-md shadow-sm">
-              <input
-                value={editedTunnel?.interface?.ipAddress}
-                onChange={handleInputChange}
-                type="text"
-                name="interface.ipAddress"
-                id="interface.ipAddress"
-                required
-                className={`${
-                  wasValidated ? 'invalid:ring-pink-600' : ''
-                } block w-full min-w-0 flex-1 rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
-              />
-              <span className="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm">
-                /32
-              </span>
+          <div className="sm:col-span-full grid grid-cols-1 sm:grid-cols-12">
+            <div className="sm:col-span-4">
+              <label htmlFor="interface.ipv4Address" className="block text-sm font-medium leading-6 text-gray-900">
+                IPv4 Address
+              </label>
+              <div className="mt-2 flex rounded-md shadow-sm">
+                <input
+                  value={editedTunnel.interface.ipv4Address}
+                  onChange={handleInputChange}
+                  type="text"
+                  name="interface.ipv4Address"
+                  id="interface.ipv4Address"
+                  onBlur={handleIpValidation}
+                  className={`${
+                    ipError ? 'ring-pink-600' : ''
+                  } block w-full min-w-0 flex-1 rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
+                />
+                <span className="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm">
+                  /32
+                </span>
+              </div>
             </div>
           </div>
-          <div className="sm:col-span-2">
-            <label htmlFor="interface.port" className="block text-sm font-medium leading-6 text-gray-900">
-              Port
-            </label>
-            <div className="mt-2">
-              <input
-                value={editedTunnel?.interface?.port}
-                onChange={handleInputChange}
-                type="text"
-                name="interface.port"
-                id="interface.port"
-                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-              />
+
+          <div className="sm:col-span-full grid grid-cols-1 sm:grid-cols-12">
+            <div className="sm:col-span-7">
+              <label htmlFor="interface.ipv6Address" className="block text-sm font-medium leading-6 text-gray-900">
+                IPv6 Address
+              </label>
+              <div className="mt-2 flex rounded-md shadow-sm">
+                <input
+                  value={editedTunnel.interface.ipv6Address}
+                  onChange={handleInputChange}
+                  type="text"
+                  name="interface.ipv6Address"
+                  id="interface.ipv6Address"
+                  onBlur={handleIpValidation}
+                  className={`${
+                    ipError ? 'ring-pink-600' : ''
+                  } block w-full min-w-0 flex-1 rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
+                />
+                <span className="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm">
+                  /128
+                </span>
+              </div>
             </div>
           </div>
 
-          <div className="sm:col-span-full">
-            <label
-              htmlFor="interface.privateKey"
-              className="text-sm font-medium leading-6 text-gray-900 flex items-center"
-            >
-              Private Key
-              <button
-                type="button"
-                onClick={() => {
-                  toggleKeyVisibility('privateKey')
-                }}
-                className="inline-block ml-2"
+          <div className="sm:col-span-full grid grid-cols-1 sm:grid-cols-12">
+            <div className="sm:col-span-3">
+              <label htmlFor="interface.port" className="block text-sm font-medium leading-6 text-gray-900">
+                Port
+              </label>
+              <div className="mt-2">
+                <input
+                  value={editedTunnel.interface.port}
+                  onChange={handleInputChange}
+                  type="text"
+                  name="interface.port"
+                  id="interface.port"
+                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="sm:col-span-full grid grid-cols-1 sm:grid-cols-12">
+            <div className="sm:col-span-full">
+              <label
+                htmlFor="interface.privateKey"
+                className="text-sm font-medium leading-6 text-gray-900 flex items-center"
               >
-                {isPrivateKeyHidden ? (
-                  <EyeIcon className="h-4 w-4 text-gray-600" />
-                ) : (
-                  <EyeSlashIcon className="h-4 w-4 text-gray-600" />
-                )}
-              </button>
-            </label>
-            <div className="mt-2">
-              <input
-                value={editedTunnel?.interface?.privateKey}
-                onChange={handleInputChange}
-                type={isPrivateKeyHidden ? 'password' : 'text'}
-                name="interface.privateKey"
-                id="interface.privateKey"
-                required
-                className={`${
-                  wasValidated ? 'invalid:ring-pink-600' : ''
-                } block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
-              />
+                Private Key
+                <button
+                  type="button"
+                  onClick={() => {
+                    toggleKeyVisibility('privateKey')
+                  }}
+                  className="inline-block ml-2"
+                >
+                  {isPrivateKeyHidden ? (
+                    <EyeIcon className="h-4 w-4 text-gray-600" />
+                  ) : (
+                    <EyeSlashIcon className="h-4 w-4 text-gray-600" />
+                  )}
+                </button>
+              </label>
+              <div className="mt-2">
+                <input
+                  value={editedTunnel.interface.privateKey}
+                  onChange={handleInputChange}
+                  type={isPrivateKeyHidden ? 'password' : 'text'}
+                  name="interface.privateKey"
+                  id="interface.privateKey"
+                  required
+                  className={`${
+                    wasValidated ? 'invalid:ring-pink-600' : ''
+                  } block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
+                />
+              </div>
             </div>
           </div>
 
-          <div className="sm:col-span-3 space-y-4">
-            <label htmlFor="interface.dns" className="block text-sm font-medium leading-6 text-gray-900">
-              DNS
-            </label>
-            <div className="mt-2">
-              <input
-                value={editedTunnel?.interface?.dns}
-                onChange={handleInputChange}
-                type="text"
-                name="interface.dns"
-                id="interface.dns"
-                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-              />
+          <div className="sm:col-span-full grid grid-cols-1 sm:grid-cols-12">
+            <div className="sm:col-span-3">
+              <label htmlFor="interface.dns" className="block text-sm font-medium leading-6 text-gray-900">
+                DNS
+              </label>
+              <div className="mt-2">
+                <input
+                  value={editedTunnel.interface.dns}
+                  onChange={handleInputChange}
+                  type="text"
+                  name="interface.dns"
+                  id="interface.dns"
+                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                />
+              </div>
             </div>
+          </div>
 
-            <label htmlFor="interface.mtu" className="block text-sm font-medium leading-6 text-gray-900">
-              MTU
-            </label>
-            <div className="mt-2">
-              <input
-                value={editedTunnel?.interface?.mtu}
-                onChange={handleInputChange}
-                placeholder="1420"
-                type="text"
-                name="interface.mtu"
-                id="interface.mtu"
-                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-              />
+          <div className="sm:col-span-full grid grid-cols-1 sm:grid-cols-12">
+            <div className="sm:col-span-3">
+              <label htmlFor="interface.mtu" className="block text-sm font-medium leading-6 text-gray-900">
+                MTU
+              </label>
+              <div className="mt-2">
+                <input
+                  value={editedTunnel.interface.mtu}
+                  onChange={handleInputChange}
+                  placeholder="1420"
+                  type="text"
+                  name="interface.mtu"
+                  id="interface.mtu"
+                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -335,122 +385,132 @@ function TunnelEditor({
             <p className="mt-1 text-sm leading-6 text-gray-600">Details of the remote WireGuard peer.</p>
           </div>
 
-          <div className="sm:col-span-3">
-            <label htmlFor="peer.endpoint" className="block text-sm font-medium leading-6 text-gray-900">
-              Endpoint
-            </label>
-            <div className="mt-2">
-              <input
-                value={editedTunnel?.peer?.endpoint}
-                onChange={handleInputChange}
-                type="text"
-                name="peer.endpoint"
-                id="peer.endpoint"
-                required
-                className={`${
-                  wasValidated ? 'invalid:ring-pink-600' : ''
-                } block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
-              />
+          <div className="sm:col-span-full grid grid-cols-1 sm:grid-cols-12">
+            <div className="sm:col-span-3">
+              <label htmlFor="peer.endpoint" className="block text-sm font-medium leading-6 text-gray-900">
+                Endpoint Address
+              </label>
+              <div className="mt-2">
+                <input
+                  value={editedTunnel.peer.endpoint}
+                  onChange={handleInputChange}
+                  type="text"
+                  name="peer.endpoint"
+                  id="peer.endpoint"
+                  required
+                  className={`${
+                    wasValidated ? 'invalid:ring-pink-600' : ''
+                  } block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
+                />
+              </div>
             </div>
           </div>
 
-          <div className="sm:col-span-2">
-            <label htmlFor="peer.port" className="block text-sm font-medium leading-6 text-gray-900">
-              Port
-            </label>
-            <div className="mt-2">
-              <input
-                value={editedTunnel?.peer?.port}
-                onChange={handleInputChange}
-                type="text"
-                name="peer.port"
-                id="peer.port"
-                required
-                className={`${
-                  wasValidated ? 'invalid:ring-pink-600' : ''
-                } block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
-              />
+          <div className="sm:col-span-full grid grid-cols-1 sm:grid-cols-12">
+            <div className="sm:col-span-3">
+              <label htmlFor="peer.port" className="block text-sm font-medium leading-6 text-gray-900">
+                Port
+              </label>
+              <div className="mt-2">
+                <input
+                  value={editedTunnel.peer.port}
+                  onChange={handleInputChange}
+                  type="text"
+                  name="peer.port"
+                  id="peer.port"
+                  required
+                  className={`${
+                    wasValidated ? 'invalid:ring-pink-600' : ''
+                  } block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
+                />
+              </div>
             </div>
           </div>
 
-          <div className="sm:col-span-full">
-            <label htmlFor="peer.publicKey" className="text-sm font-medium leading-6 text-gray-900 flex items-center">
-              Public Key
-              <button
-                type="button"
-                onClick={() => {
-                  toggleKeyVisibility('publicKey')
-                }}
-                className="inline-block ml-2"
-              >
-                {isPublicKeyHidden ? (
-                  <EyeIcon className="h-4 w-4 text-gray-600" />
-                ) : (
-                  <EyeSlashIcon className="h-4 w-4 text-gray-600" />
-                )}
-              </button>
-            </label>
-            <div className="mt-2">
-              <input
-                defaultValue={editedTunnel?.peer?.publicKey}
-                onChange={handleInputChange}
-                type={isPublicKeyHidden ? 'password' : 'text'}
-                name="peer.publicKey"
-                id="peer.publicKey"
-                required
-                className={`${
-                  wasValidated ? 'invalid:ring-pink-600' : ''
-                } block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
-              />
+          <div className="sm:col-span-full grid grid-cols-1 sm:grid-cols-12">
+            <div className="sm:col-span-full">
+              <label htmlFor="peer.publicKey" className="text-sm font-medium leading-6 text-gray-900 flex items-center">
+                Public Key
+                <button
+                  type="button"
+                  onClick={() => {
+                    toggleKeyVisibility('publicKey')
+                  }}
+                  className="inline-block ml-2"
+                >
+                  {isPublicKeyHidden ? (
+                    <EyeIcon className="h-4 w-4 text-gray-600" />
+                  ) : (
+                    <EyeSlashIcon className="h-4 w-4 text-gray-600" />
+                  )}
+                </button>
+              </label>
+              <div className="mt-2">
+                <input
+                  defaultValue={editedTunnel.peer.publicKey}
+                  onChange={handleInputChange}
+                  type={isPublicKeyHidden ? 'password' : 'text'}
+                  name="peer.publicKey"
+                  id="peer.publicKey"
+                  required
+                  className={`${
+                    wasValidated ? 'invalid:ring-pink-600' : ''
+                  } block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
+                />
+              </div>
             </div>
           </div>
 
-          <div className="sm:col-span-full">
-            <label
-              htmlFor="peer.presharedKey"
-              className="text-sm font-medium leading-6 text-gray-900 flex items-center"
-            >
-              Preshared Key
-              <button
-                type="button"
-                onClick={() => {
-                  toggleKeyVisibility('presharedKey')
-                }}
-                className="inline-block ml-2"
+          <div className="sm:col-span-full grid grid-cols-1 sm:grid-cols-12">
+            <div className="sm:col-span-full">
+              <label
+                htmlFor="peer.presharedKey"
+                className="text-sm font-medium leading-6 text-gray-900 flex items-center"
               >
-                {isPresharedKeyHidden ? (
-                  <EyeIcon className="h-4 w-4 text-gray-600" />
-                ) : (
-                  <EyeSlashIcon className="h-4 w-4 text-gray-600" />
-                )}
-              </button>
-            </label>
-            <div className="mt-2">
-              <input
-                defaultValue={editedTunnel?.peer?.presharedKey}
-                onChange={handleInputChange}
-                type={isPresharedKeyHidden ? 'password' : 'text'}
-                name="peer.presharedKey"
-                id="peer.presharedKey"
-                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-              />
+                Preshared Key
+                <button
+                  type="button"
+                  onClick={() => {
+                    toggleKeyVisibility('presharedKey')
+                  }}
+                  className="inline-block ml-2"
+                >
+                  {isPresharedKeyHidden ? (
+                    <EyeIcon className="h-4 w-4 text-gray-600" />
+                  ) : (
+                    <EyeSlashIcon className="h-4 w-4 text-gray-600" />
+                  )}
+                </button>
+              </label>
+              <div className="mt-2">
+                <input
+                  defaultValue={editedTunnel.peer.presharedKey}
+                  onChange={handleInputChange}
+                  type={isPresharedKeyHidden ? 'password' : 'text'}
+                  name="peer.presharedKey"
+                  id="peer.presharedKey"
+                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                />
+              </div>
             </div>
           </div>
 
-          <div className="sm:col-span-3">
-            <label htmlFor="peer.persistentKeepalive" className="block text-sm font-medium leading-6 text-gray-900">
-              Persistent Keep-Alive
-            </label>
-            <div className="mt-2">
-              <input
-                value={editedTunnel?.peer?.persistentKeepalive}
-                placeholder="25"
-                onChange={handleInputChange}
-                type="text"
-                name="peer.persistentKeepalive"
-                id="peer.persistentKeepalive"
-                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-              />
+          <div className="sm:col-span-full grid grid-cols-1 sm:grid-cols-12">
+            <div className="sm:col-span-3">
+              <label htmlFor="peer.persistentKeepalive" className="block text-sm font-medium leading-6 text-gray-900">
+                Persistent Keep-Alive
+              </label>
+              <div className="mt-2">
+                <input
+                  value={editedTunnel.peer.persistentKeepalive}
+                  placeholder="25"
+                  onChange={handleInputChange}
+                  type="text"
+                  name="peer.persistentKeepalive"
+                  id="peer.persistentKeepalive"
+                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -460,7 +520,7 @@ function TunnelEditor({
         <div className="border-b border-gray-900/10 pb-8 pt-4">
           <h2 className="text-base font-semibold leading-7 text-gray-900">Rules</h2>
           <p className="mt-1 text-sm leading-6 text-gray-600">
-            Configure what should and should not route through the tunnel.
+            Configure what should and should not route through the tunnel. Seperate entries with a comma.
           </p>
 
           {/* Beginning of Allow/Disallow section **/}
@@ -475,7 +535,7 @@ function TunnelEditor({
               </label>
               <div className="mt-2">
                 <textarea
-                  value={editedTunnel?.rules?.allowed.apps}
+                  value={editedTunnel.rules.allowed.apps}
                   onChange={handleInputChange}
                   id="rules.allowed.apps"
                   name="rules.allowed.apps"
@@ -488,7 +548,7 @@ function TunnelEditor({
               </label>
               <div className="mt-2">
                 <textarea
-                  value={editedTunnel?.rules?.allowed.folders}
+                  value={editedTunnel.rules.allowed.folders}
                   onChange={handleInputChange}
                   id="rules.allowed.folders"
                   name="rules.allowed.folders"
@@ -504,7 +564,7 @@ function TunnelEditor({
               </label>
               <div className="mt-2">
                 <textarea
-                  value={editedTunnel?.rules?.allowed.ipAddresses}
+                  value={editedTunnel.rules.allowed.ipAddresses}
                   onChange={handleInputChange}
                   id="rules.allowed.ipAddresses"
                   name="rules.allowed.ipAddresses"
@@ -525,7 +585,7 @@ function TunnelEditor({
               </label>
               <div className="mt-2">
                 <textarea
-                  value={editedTunnel?.rules?.disallowed.apps}
+                  value={editedTunnel.rules.disallowed.apps}
                   onChange={handleInputChange}
                   id="rules.disallowed.apps"
                   name="rules.disallowed.apps"
@@ -541,7 +601,7 @@ function TunnelEditor({
               </label>
               <div className="mt-2">
                 <textarea
-                  value={editedTunnel?.rules?.disallowed.folders}
+                  value={editedTunnel.rules.disallowed.folders}
                   onChange={handleInputChange}
                   id="rules.disallowed.folders"
                   name="rules.disallowed.folders"
@@ -557,7 +617,7 @@ function TunnelEditor({
               </label>
               <div className="mt-2">
                 <textarea
-                  value={editedTunnel?.rules?.disallowed.ipAddresses}
+                  value={editedTunnel.rules.disallowed.ipAddresses}
                   onChange={handleInputChange}
                   id="rules.disallowed.ipAddresses"
                   name="rules.disallowed.ipAddresses"
@@ -578,6 +638,7 @@ function TunnelEditor({
         <div className={`${wasValidated ? 'visible' : 'invisible'} flex flex-row flex-auto gap-x-2 items-center`}>
           <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
           <p className="text-red-600 text-sm">Some required fields are empty.</p>
+          {ipError && <p className="text-red-600 text-sm">At least one IP address is required.</p>}
         </div>
 
         <div className="flex justify-end gap-x-6">
diff --git a/src/models/Tunnel.ts b/src/models/Tunnel.ts
index fb55c4f..e7f58fe 100644
--- a/src/models/Tunnel.ts
+++ b/src/models/Tunnel.ts
@@ -2,7 +2,8 @@ export default class Tunnel {
   id: string
   name: string
   interface: {
-    ipAddress: string
+    ipv4Address: string
+    ipv6Address: string
     port: string
     privateKey: string
     dns: string
@@ -34,7 +35,8 @@ export default class Tunnel {
     this.id = ''
     this.name = ''
     this.interface = {
-      ipAddress: '',
+      ipv4Address: '',
+      ipv6Address: '',
       port: '',
       privateKey: '',
       dns: '',

From 330ff225ff988b68677a22266f0f6e9156ac0bf7 Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Mon, 27 Nov 2023 14:29:31 +1000
Subject: [PATCH 16/18] added 1.0.0 > 1.0.1 tunnel data structure converter

---
 src/main.tsx                  | 17 +++++++++++---
 src/utilities/storageUtils.ts | 44 ++++++++++++++++++++++++++++++++++-
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index c1f238f..c1e848b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -16,6 +16,7 @@ import {
   getSettingsFromStorage,
   saveSelectedTunnelIDInStorage,
   convertOldData,
+  convertInterfaceIPAddresses,
 } from './utilities/storageUtils.ts'
 import Settings from './components/containers/Settings.tsx'
 import Setup from './components/containers/Setup.tsx'
@@ -55,10 +56,20 @@ function Main(): JSX.Element {
     void setupTauriEventListener()
     void getWiresockVersion()
 
-    const updatedTunnelManager = convertOldData(tunnelManager)
-    if (updatedTunnelManager !== null) {
-      setTunnelManager(updatedTunnelManager)
+    // Handle <1.0.0 > 1.0.0 tunnel data structure changes
+    const convertOldResult = convertOldData(tunnelManager)
+    if (convertOldResult !== null) {
+      // Update tunnelManager state with converted data
+      setTunnelManager(convertOldResult)
     }
+
+    // Handle 1.0.0 > 1.0.1 tunnel data structure changes
+    // Use functional update form of setState to ensure we're working with the most recent state
+    setTunnelManager((currentTunnelManager) => {
+      // Convert interface IP addresses and update state
+      const convertInterfaceResult = convertInterfaceIPAddresses(currentTunnelManager)
+      return convertInterfaceResult ?? currentTunnelManager
+    })
   }, [])
 
   // Monitor selectedTunnelID for changes
diff --git a/src/utilities/storageUtils.ts b/src/utilities/storageUtils.ts
index afaa255..199380e 100644
--- a/src/utilities/storageUtils.ts
+++ b/src/utilities/storageUtils.ts
@@ -71,6 +71,48 @@ export function getSettingsFromStorage(): SettingsModel {
   return settings
 }
 
+/* ------------------------------------------------- */
+/* Update tunnel data structure from 1.0.0 to 1.0.1  */
+/* ------------------------------------------------- */
+
+export function convertInterfaceIPAddresses(tunnelManager: TunnelManager): TunnelManager | null {
+  // Iterate over each tunnel in the manager
+  for (const tunnelId in tunnelManager.tunnels) {
+    const tunnel = tunnelManager.tunnels[tunnelId]
+    // Check if the tunnel has an ipAddress field in its interface
+    const ipAddress = (tunnel.interface as any).ipAddress
+    if (ipAddress !== undefined && ipAddress !== null) {
+      // Split the ipAddress field by comma and remove spaces
+      const ipAddresses = ipAddress.replace(/\s/g, '').split(',')
+
+      // Iterate over each IP address
+      for (const ip of ipAddresses) {
+        // If the address has a : we assume its ipv6, otherwise if it has a . we assume its ipv4
+        if (ip.includes(':') === true) {
+          // Add the IP address to the ipv6Address field
+          tunnel.interface.ipv6Address = ip
+        } else if (ip.includes('.') === true) {
+          // Add the IP address to the ipv4Address field
+          tunnel.interface.ipv4Address = ip
+        }
+      }
+
+      // Remove the ipAddress field
+      delete (tunnel.interface as any).ipAddress
+
+      // Remove the old tunnel from the manager
+      tunnelManager.removeTunnel(tunnelId)
+
+      // Add the updated tunnel back to the manager
+      tunnelManager.addTunnel(tunnel)
+
+      console.log(`Updated ${tunnelId} tunnel data structure from v1.0.0 to v1.0.1`)
+    }
+  }
+
+  return tunnelManager
+}
+
 /* --------------------------------------------- */
 /* Local storage data migration for <1.0.0 data  */
 /* --------------------------------------------- */
@@ -113,7 +155,7 @@ export function convertOldData(tunnelManager: TunnelManager): TunnelManager | nu
       newTunnel.interface.mtu = oldTunnel.mtu
       // /32 is no longer required
       const [interfaceIpAddress] = oldTunnel.interfaceAddress.split('/')
-      newTunnel.interface.ipAddress = interfaceIpAddress
+      newTunnel.interface.ipv4Address = interfaceIpAddress
 
       // Peer
 

From 2f1c7ab71e1899bb8c91229778055ac7a37f8443 Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Tue, 28 Nov 2023 09:47:47 +1000
Subject: [PATCH 17/18] interface addresses now save empty values when no value
 provided

---
 src/utilities/storageUtils.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/utilities/storageUtils.ts b/src/utilities/storageUtils.ts
index 199380e..5424d94 100644
--- a/src/utilities/storageUtils.ts
+++ b/src/utilities/storageUtils.ts
@@ -79,8 +79,10 @@ export function convertInterfaceIPAddresses(tunnelManager: TunnelManager): Tunne
   // Iterate over each tunnel in the manager
   for (const tunnelId in tunnelManager.tunnels) {
     const tunnel = tunnelManager.tunnels[tunnelId]
+
     // Check if the tunnel has an ipAddress field in its interface
     const ipAddress = (tunnel.interface as any).ipAddress
+
     if (ipAddress !== undefined && ipAddress !== null) {
       // Split the ipAddress field by comma and remove spaces
       const ipAddresses = ipAddress.replace(/\s/g, '').split(',')
@@ -97,6 +99,14 @@ export function convertInterfaceIPAddresses(tunnelManager: TunnelManager): Tunne
         }
       }
 
+      // If tunnel parameters do not have values we save them with empty values
+      if (tunnel.interface.ipv4Address === undefined) {
+        tunnel.interface.ipv4Address = ''
+      }
+      if (tunnel.interface.ipv6Address === undefined) {
+        tunnel.interface.ipv6Address = ''
+      }
+
       // Remove the ipAddress field
       delete (tunnel.interface as any).ipAddress
 

From fcba429adcdd2c13fb03429e150aadd1c4362eaf Mon Sep 17 00:00:00 2001
From: Brendan Osborne <brendan.r.osborne@gmail.com>
Date: Tue, 28 Nov 2023 11:11:50 +1000
Subject: [PATCH 18/18] added feedback and issues buttons

---
 src/components/containers/Sidebar.tsx | 34 +++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/containers/Sidebar.tsx b/src/components/containers/Sidebar.tsx
index 951625e..e027cab 100644
--- a/src/components/containers/Sidebar.tsx
+++ b/src/components/containers/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { Cog6ToothIcon } from '@heroicons/react/24/outline'
+import { Cog6ToothIcon, ChatBubbleBottomCenterTextIcon, BugAntIcon } from '@heroicons/react/24/outline'
 import { useNavigate } from 'react-router-dom'
 import type WiresockStateModel from '../../models/WiresockStateModel.ts'
 import type TunnelManager from '../../models/TunnelManager.ts'
@@ -58,10 +58,40 @@ function Sidebar({ tunnelManager, selectedTunnelID, wiresockState, setSelectedTu
       >
         Add Tunnel
       </button>
+      <a
+        href="https://github.com/TunnlTo/desktop-app/discussions/110"
+        target="_blank"
+        className="flex w-full mt-auto"
+        rel="noreferrer"
+      >
+        <button
+          type="button"
+          className="flex flex-grow items-center align-center gap-3 bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-2 cursor-pointer text-sm font-medium py-2"
+        >
+          <ChatBubbleBottomCenterTextIcon className="h-6 w-6" aria-hidden="true" />
+          Feedback
+        </button>
+      </a>
+
+      <a
+        href="https://github.com/TunnlTo/desktop-app/issues"
+        target="_blank"
+        className="flex w-full"
+        rel="noreferrer"
+      >
+        <button
+          type="button"
+          className="flex flex-grow items-center align-center gap-3 bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-2 cursor-pointer text-sm font-medium py-2"
+        >
+          <BugAntIcon className="h-6 w-6" aria-hidden="true" />
+          Issues
+        </button>
+      </a>
+
       <button
         type="button"
         onClick={handleSettingsButtonClick}
-        className="flex items-center align-center gap-3 mt-auto ali bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-2 cursor-pointer text-sm font-medium py-2"
+        className="flex items-center align-center gap-3 bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-2 cursor-pointer text-sm font-medium py-2"
       >
         <Cog6ToothIcon className="h-6 w-6" aria-hidden="true" />
         Settings