Add Messages route

Now you can see a list of all your messages (including chats and
groupchats)!

src/App.svelte

@@ -5,6 +5,7 @@
 
   import Home from './routes/Home.svelte'
   import Login from './routes/Login.svelte'
+  import Messages from './routes/Messages.svelte'
   import Redirect from './routes/Redirect.svelte'
 
   import { titleStore, softkeysStore } from './stores.ts'
@@ -19,6 +20,7 @@
   const routes = {
     '/': Home,
     '/login': Login,
+    '/messages': Messages,
     '*': Redirect,
   }
 

src/components/ListItem.svelte

@@ -0,0 +1,39 @@
+<script>
+  export let text = 'List Item'
+  export let subtext = ''
+  export let indicator = false
+  export let tabindex = -1
+  export let autofocus = false
+  export let fullheight = false
+</script>
+
+<div class="list-item-indicator focusable{fullheight ? ' fullheight' : ''}" {tabindex} {autofocus}>
+  {#if text}
+  <p class="list-item-indicator__text">{text}</p>
+  {/if}
+  {#if subtext}
+  <p class="list-item-indicator__subtext">{subtext}</p>
+  {/if}
+  {#if indicator}
+  <span class="list-item-indicator__indicator"></span>
+  {/if}
+</div>
+
+<style>
+.list-item-indicator__text,
+.list-item-indicator__subtext {
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.fullheight {
+  height: auto;
+  min-height: 6rem;
+}
+
+.fullheight .list-item-indicator__text,
+.fullheight .list-item-indicator__subtext {
+  white-space: normal;
+  overflow: auto;
+}
+</style>

src/routes/Login.svelte

@@ -3,13 +3,13 @@
   import Input from '../components/Input.svelte'
   import Checkbox from '../components/Checkbox.svelte'
 
-  import { pop } from 'svelte-spa-router'
   import {
     titleStore,
     softkeysStore,
     xmppConnected,
   } from '../stores.ts'
 
+  import { push, pop } from 'svelte-spa-router'
   import converse from '../converse.js'
 
   let xmppConnecting = false
@@ -67,6 +67,13 @@
   let advancedSettings
   let boshURL
   let wsURL
+
+  $: {
+    if ($xmppConnected) {
+      // Navigate to chat screen when connected
+      push('/messages')
+    }
+  }
 </script>
 
 <Text>

src/routes/Messages.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import Text from '../components/Text.svelte'
+  import ListItem from '../components/ListItem.svelte'
+
+  import { push } from 'svelte-spa-router'
+  import { _converse } from '@converse/headless/core'
+
+  import {
+    titleStore,
+    softkeysStore,
+    xmppConnected,
+  } from '../stores.ts'
+
+  titleStore.update(() => 'Convo')
+
+  softkeysStore.update((k) => {
+    k.left.label = 'new'
+    k.left.callback = () => {}
+
+    k.center.label = 'Open'
+    k.center.callback = () => {}
+
+    k.right.label = 'Options'
+    k.right.callback = () => {}
+
+    return k
+  })
+
+  // Run this and unsubscribe after one
+  // second. (The xmppConnected.subscribe function
+  // returns the unsubscribe callback, which we
+  // then call with setTimeout after 1000 ms)
+  setTimeout(xmppConnected.subscribe(value => {
+    if (!value) {
+      push('/redirect') // redirects to home
+    }
+  }), 1000)
+
+  let chatboxes = []
+
+  _converse.on('chatBoxesFetched', () => {
+    chatboxes = _converse.chatboxes?.toArray() || []
+  })
+
+  _converse.on('message', () => {
+    chatboxes = _converse.chatboxes?.toArray() || []
+  })
+</script>
+
+{#if !chatboxes.length}
+<Text>
+  <p>You have no conversations. How about starting one?</p>
+</Text>
+{:else}
+  {#each chatboxes as convo, index}
+    <ListItem
+      text={convo.attributes.nickname || convo.attributes.id}
+      subtext={convo.messages?.last()?.attributes?.body || undefined}
+      tabindex={index}
+    />
+  {/each}
+{/if}