frontend: perform primary action in most modals by pressing enter

frontend/src/components/overlays/CreateAccount.svelte

@@ -40,6 +40,12 @@ import { maybeFly } from "../../animations";
             overlayStore.open("login", {});
         }
     };
+    const onKeydown = async (e) => {
+        if (e.code !== "Enter")
+            return;
+
+        await create();
+    };
 </script>
 
 <style>
@@ -52,7 +58,7 @@ import { maybeFly } from "../../animations";
     }
 </style>
 
-<div class="modal-backdrop modal-backdrop-opaque">
+<div class="modal-backdrop modal-backdrop-opaque" on:keydown="{ onKeydown }">
     <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation on:outroend="{ outroEnd }">
         <div class="modal-header">
             <span class="h4">Create an Account</span>

frontend/src/components/overlays/CreateChannel.svelte

@@ -22,6 +22,12 @@ import { maybeFade, maybeFly } from "../../animations";
         }
         close();
     };
+    const onKeydown = async (e) => {
+        if (e.code !== "Enter")
+            return;
+
+        await create();
+    };
 </script>
 
 <style>
@@ -30,7 +36,7 @@ import { maybeFade, maybeFly } from "../../animations";
     }
 </style>
 
-<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
+<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }">
     <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
         <div class="modal-header">
             <span class="h4">Create Channel</span>

frontend/src/components/overlays/EditChannel.svelte

@@ -34,6 +34,12 @@
         }
         close();
     };
+    const onKeydown = async (e) => {
+        if (e.code !== "Enter")
+            return;
+
+        await save();
+    };
 </script>
 
 <style>
@@ -46,7 +52,7 @@
     }
 </style>
 
-<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
+<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }">
     <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
         <div class="modal-header">
             <span class="h4">Edit Channel</span>

frontend/src/components/overlays/EditMessage.svelte

@@ -34,6 +34,12 @@ import { maybeFade, maybeFly } from "../../animations";
         }
         close();
     };
+    const onKeydown = async (e) => {
+        if (e.code !== "Enter")
+            return;
+
+        await save();
+    };
 </script>
 
 <style>
@@ -46,7 +52,7 @@ import { maybeFade, maybeFly } from "../../animations";
     }
 </style>
 
-<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
+<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }">
     <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
         <div class="modal-header">
             <span class="h4">Edit Message</span>

frontend/src/components/overlays/Login.svelte

@@ -44,6 +44,12 @@ import { maybeFly } from "../../animations";
             overlayStore.open("createAccount", {});
         }
     };
+    const onKeydown = async (e) => {
+        if (e.code !== "Enter")
+            return;
+
+        await login();
+    };
 </script>
 
 <style>
@@ -56,7 +62,7 @@ import { maybeFly } from "../../animations";
     }
 </style>
 
-<div class="modal-backdrop modal-backdrop-opaque">
+<div class="modal-backdrop modal-backdrop-opaque" on:keydown="{ onKeydown }">
     <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation on:outroend="{ outroEnd }">
         <div class="modal-header">
             <span class="h4">Welcome back!</span>