Style tweak: make all but selected list icons rounded

In our case, "list icons" usually means "avatars" so think
"rounded avatars, except the currently selected one which remains
square". This makes things look a bit more polished, but still
allow you to properly see the full avatar when you actually need
to.

src/components/ListItem.svelte

@@ -2,7 +2,7 @@
   export let text = 'List Item'
   export let subtext = ''
   export let indicator = false
-  export let image
+  export let image = undefined
   export let tabindex = -1
   export let autofocus = false
   export let fullheight = false
@@ -88,4 +88,13 @@
 .list-item-indicator__subtext::first-letter {
   text-transform: none;
 }
+
+/* Make all but the selected icon rounded */
+.list-item-icon__icon {
+  border-radius: 0.6rem;
+}
+
+.list-item-icon:focus .list-item-icon__icon {
+  border-radius: 0;
+}
 </style>

src/components/OptionsMenu.svelte

@@ -2,12 +2,19 @@
   import { onMount } from 'svelte'
   export let title = "Options"
 
+  // Function to call in order to close the menu.
+  // This is triggerd either with the "back" button
+  // or when one of the options is selected.
+  export let toggler = function() {
+    console.error("You didn't provide a toggler function to close the options menu!")
+  }
+
   // Special navigation for the options menu
   function optionNav(move) {
     let currentIndex = Number(document.activeElement.dataset.index || 0)
     let next = currentIndex + move
     let items = document
-      .querySelectorAll('.options .list-item-indicator')
+      .querySelectorAll('.options .list-item')
 
     // Loop around if at end
     if (next < 0) next = items.length - 1
@@ -23,15 +30,21 @@
       case 'ArrowUp':
         optionNav(-1)
         e.stopPropagation()
-	return
+	break
       case 'ArrowDown':
         optionNav(1)
 	e.stopPropagation()
-	return
+	break
       case 'Enter':
+        toggler()
         document.activeElement.click()
 	e.stopPropagation()
-	return
+        break
+      case 'Backspace':
+        toggler()
+        e.stopPropagation()
+	e.preventDefault()
+	break
     }
   }
 
@@ -42,7 +55,7 @@
 
     // Focus the first option item
     let optionItems = document
-      .querySelectorAll('.options .list-item-indicator');
+      .querySelectorAll('.options .list-item');
 
     // Set the index attributes (We assume this won't
     // change too often/until the next time the menu

src/routes/Chat.svelte

@@ -26,6 +26,9 @@
 
   // Whether the options menu is visible or not
   let optionsMenuVisible = false
+  function toggleOptionsMenu() {
+    optionsMenuVisible = !optionsMenuVisible
+  }
 
 
   $: title = chatbox?.attributes?.nickname || chatbox?.attributes?.id || params.chatID || 'Convo'
@@ -96,9 +99,7 @@
     }
 
     k.right.label = 'Options'
-    k.right.callback = () => {
-      optionsMenuVisible = !optionsMenuVisible
-    }
+    k.right.callback = toggleOptionsMenu
 
     return k
   })
@@ -244,7 +245,10 @@
 </div>
 
 {#if optionsMenuVisible}
-<OptionsMenu title="Options">
+<OptionsMenu
+  title="Options"
+  toggler={toggleOptionsMenu}
+>
   <ListItem
     text="Close conversation"
     onclick={closeChat}