add history of previous connections, remodel storageModel to use backslash as path separator

src/View/Components/option.tsx

@@ -7,3 +7,9 @@ export function Option(text: string, value: string, selectedOnCreate: boolean) {
     </option>
   );
 }
+
+export const StringToOption: React.StateItemConverter<string> = (
+  string: string
+) => {
+  return Option(string, string, false);
+};

src/View/Modals/connectionModal.tsx

@@ -10,7 +10,11 @@ export function ConnectionModal(connectionViewModel: ConnectionViewModel) {
       toggle:open={connectionViewModel.isShowingConnectionModal}
     >
       <div>
-        <main></main>
+        <main>
+          <h2>{translations.connectionModal.connectionModalHeadline}</h2>
+
+          
+        </main>
         <button on:click={connectionViewModel.hideConnectionModal}>
           {translations.general.closeButton}
           <span class="icon">close</span>

src/View/homePage.tsx

@@ -2,8 +2,9 @@ import "./homePage.css";
 
 import * as React from "bloatless-react";
 
+import { Option, StringToOption } from "./Components/option";
+
 import ConnectionViewModel from "../ViewModel/connectionViewModel";
-import { Option } from "./Components/option";
 import SettingsViewModel from "../ViewModel/settingsViewModel";
 import { translations } from "./translations";
 
@@ -21,10 +22,19 @@ export function HomePage(
         <div>
           <span>{translations.homePage.serverAddress}</span>
           <input
+            list="previous-connection-list"
             placeholder={translations.homePage.serverAddressPlaceholder}
             bind:value={connectionViewModel.serverAddressInput}
             on:enter={connectionViewModel.connect}
           ></input>
+          <datalist
+            hidden
+            id="previous-connection-list"
+            children:append={[
+              connectionViewModel.previousAddresses,
+              StringToOption,
+            ]}
+          ></datalist>
         </div>
       </label>
 

src/View/translations.ts

@@ -64,8 +64,8 @@ const englishTranslations = {
     addChatButton: "Add chat",
   },
 
-  settings: {
-    settingsHeadline: "Settings",
+  connectionModal: {
+    connectionModalHeadline: "Manage Connections",
 
     ///
   },