add datalist for previous connections

src/Model/model.ts

@@ -15,6 +15,7 @@ export const didRequestConnection = React.restoreState(
   false
 );
 export const currentAddress = React.restoreState("current-address", "");
+export const previousAddresses = React.restoreListState<string>("previous-addresses")
 
 export const cannotDisonnect = React.createProxyState(
   [isConnected],
@@ -39,6 +40,7 @@ export function connect(): void {
   if (cannotConnect.value == true) return;
 
   currentAddress.value = serverAddressInput.value;
+  previousAddresses.add(currentAddress.value);
 
   isConnected.value = false;
   didRequestConnection.value = true;

src/Views/connectionSection.tsx

@@ -9,6 +9,7 @@ import {
   connect,
   deleteMailbox,
   disconnect,
+  previousAddresses,
   requestMailbox,
   resetAddressInput,
   serverAddressInput,
@@ -16,6 +17,10 @@ import {
 
 import { translation } from "../translations";
 
+const addressConverter: React.ListItemConverter<string> = (address) => {
+  return <option>{address}</option>;
+};
+
 export function ConnectionSection() {
   return (
     <div class="flex-column">
@@ -29,7 +34,13 @@ export function ConnectionSection() {
             bind:value={serverAddressInput}
             on:enter={connect}
             placeholder={translation.serverAddressPlaceholder}
+            list="previous-addresses"
           ></input>
+          <datalist
+            hidden
+            id="previous-addresses"
+            children:append={[previousAddresses, addressConverter]}
+          ></datalist>
         </div>
       </label>
       <div class="flex-row width-input justify-end">