Use left softkey to send a message

Earlier, we were using the centre softkey but this is a bit too
easy to trigger by mistake. Now, we use the centre softkey for
the more mundane but arguably equally important "Enter"...which
doesn't actually work because we're using a single-line input and
not a multi-line textarea, but we'll get to that sometime. Or,
maybe the centre key can become something more funky such as...
an emoji selector?

Fixes #4

src/routes/Chat.svelte

@@ -15,7 +15,8 @@
 
   export let params = {}
   let title
-  let centerSoftkeyLabel = ' '
+  let centerSoftkeyLabel = 'Enter'
+  let leftSoftkeyLabel = ' '
   let chatbox
   let messages
   let chatListEl
@@ -44,14 +45,13 @@
   }
 
   softkeysStore.update((k) => {
-    k.left.label = 'Back'
-    k.left.callback = () => { push('/messages') }
-
-    k.center.label = 'Enter'
-    k.center.callback = async () => {
+    k.left.label = leftSoftkeyLabel
+    k.left.callback = async () => {
       let el = document.querySelector('.compose-box input')
-      if(document.activeElement == el) {
-        // Send only if not blank
+
+      // Send message if textbox activated
+      if (document.activeElement == el) {
+         // Send only if not blank
         if (!!composeBox) {
           let messageText = composeBox
           composeBox = ''
@@ -65,10 +65,28 @@
           // update the message list
           messages = [...chatbox.messages]
         }
-      } else {
+      }
+  }
+
+    k.center.label = centerSoftkeyLabel
+    k.center.callback = () => {
+
+      // Focus input if not already focused
+      let el = document.querySelector('.compose-box input')
+      if (document.activeElement != el) {
         // focus the input element
         el.focus()
+      } else {
+
+        // Otherwise, we literally type an Enter
+        if (!composeBox) composeBox = ''
+        composeBox = composeBox + '\n'
+
+        // FIXME: compose box should be a textarea for
+        // this to actually work.
+
       }
+
     }
 
     k.right.label = 'Options'
@@ -93,13 +111,20 @@
     // scroll to last message, for convenience
     scrollToLatest()
 
+    centerSoftkeyLabel = 'Enter'
+
     if (!!composeBox) {
-      centerSoftkeyLabel = 'Send'
+      leftSoftkeyLabel = 'Send'
     } else {
-      centerSoftkeyLabel = ' '
+      leftSoftkeyLabel = ' '
     }
   }
 
+  function onComposeBoxBlur() {
+    centerSoftkeyLabel = 'Compose'
+    leftSoftkeyLabel = ' '
+  }
+
   function updateCenterSoftkeyLabel() {
     softkeysStore.update((k) => {
       k.center.label = centerSoftkeyLabel
@@ -108,21 +133,36 @@
     })
   }
 
-  function updateComposeLabel() {
-    // We're using 'Send' as a proxy for
-    // checking if the box is focused
-    if (!composeBox && centerSoftkeyLabel == 'Send') {
-      centerSoftkeyLabel = ' ' // hack
+  function updateLeftSoftkeyLabel() {
+    softkeysStore.update((k) => {
+      k.left.label = leftSoftkeyLabel
 
-      // We have to do this since reactivity
-      // doesn't recurse
-      updateCenterSoftkeyLabel()
-    } else if (!!composeBox && centerSoftkeyLabel == ' ') {
-      centerSoftkeyLabel = 'Send'
+      return k
+    })
+  }
 
-      // We have to do this since reactivity
-      // doesn't recurse
-      updateCenterSoftkeyLabel()
+  function onComposeBoxUpdate() {
+    /*
+     * We're assuming the compose box is focused here,
+     * because how else did it get updated? If this is
+     * problematic, we can add an `if` condition here
+     * to check if it is indeed the active element.
+     * Either way, it only updates the label, not the
+     * action itself (which is admittedly more or
+     * less confusing depending on how you look at it).
+     */
+
+    // Clear 'Send' button if empty
+    if (leftSoftkeyLabel == 'Send' && !composeBox) {
+      leftSoftkeyLabel = ' '
+
+      // We have to do this since reactivity doesn't recurse
+      updateLeftSoftkeyLabel()
+    } else if (leftSoftkeyLabel == ' ' && !!composeBox) {
+      leftSoftkeyLabel = 'Send'
+
+      // Again, no recursion in reactivity
+      updateLeftSoftkeyLabel()
     }
   }
 
@@ -132,9 +172,15 @@
     return k
   })
 
+  $: softkeysStore.update((k) => {
+    k.left.label = leftSoftkeyLabel
+
+    return k
+  })
+
   $: {
     !composeBox // whenever this changes
-    updateComposeLabel()
+    onComposeBoxUpdate()
   }
 
   onMount(() => {
@@ -173,7 +219,7 @@
     autofocus={true}
     label='Compose'
     on:focus={onComposeBoxFocus}
-    on:blur={() => { centerSoftkeyLabel = 'Compose' }}
+    on:blur={onComposeBoxBlur}
   />
 </div>