feat: add app state

services/frontend/src/lib/app-state/index.ts

@@ -0,0 +1,32 @@
+import { readable } from "svelte/store"
+
+export type AppRoutes = 'rooms' | 'settings'
+
+export class AppState<Routes extends string = AppRoutes> {
+  route: Routes
+  selectedRoom?: string
+
+  constructor(route: Routes) {
+    this.route = route
+  }
+}
+
+export const appState = (() => {
+  const appState = new AppState<AppRoutes>('rooms')
+  let setter: (value: AppState) => void
+  const store = readable(appState, (set) => {
+    setter = set
+  })
+
+  return {
+    subscribe: store.subscribe,
+    setRoute(route: AppRoutes) {
+      appState.route = route
+      setter(appState)
+    },
+    setRoom(room: string) {
+      appState.selectedRoom = room
+      setter(appState)
+    }
+  }
+})()

services/frontend/src/lib/views/AppView.svelte

@@ -2,10 +2,10 @@
   import NavBar from '$lib/components/nav/NavBar.svelte'
   import { get } from 'svelte/store'
   import { client } from '../../matrix'
-  import { currentRoomStore } from '../../stores/matrix.store'
   import { eventsStore } from '../../stores/matrix.store'
   import MessageEvent from '$lib/components/message/MessageEvent.svelte'
   import { onMount } from 'svelte';
+  import { appState } from '$lib/app-state';
 
   let message = ''
   let chatContainer: HTMLElement
@@ -22,7 +22,7 @@
     message = ''
 
     try {
-      await client.sendMessage(get(currentRoomStore)!, {
+      await client.sendMessage(get(appState)!.selectedRoom!, {
         msgtype: "m.text",
         body: msg,
       })
@@ -49,17 +49,17 @@
 
   $: {
     // Use the current room store so it gets updated when channel is changed
-    $currentRoomStore
+    $appState
+    $eventsStore
     scrollToBottom()
   }
 </script>
 
 <div class="flex flex-row">
-  <NavBar extraClass="sticky top-0 h-screen" on:routeSwitch={(room) => $currentRoomStore = room.detail.roomId}/>
+  <NavBar extraClass="sticky top-0 h-screen" on:routeSwitch={(room) => appState.setRoom(room.detail.roomId)}/>
   <div class="w-full h-screen overflow-y-auto relative2">
     <main bind:this={chatContainer} class="py-2 w-full h-full overflow-x-hidden break-words">
-      <p>{ $currentRoomStore }</p>
-      {#if $currentRoomStore}
+      {#if $appState.selectedRoom}
         <div class="flex flex-col gap-2">
           {#each $eventsStore ?? [] as event (event.getId())}
             <MessageEvent event={event} />

services/frontend/src/routes/+page.svelte

@@ -7,16 +7,24 @@
 
 {#if $stateStore === null || $stateStore === SyncState.Prepared }
   <div class="h-full w-full min-h-screen flex flex-col gap-8 items-center justify-center preserve-3d">
-    <div class="text-8xl i-bx:loader-alt animate-c-spin" />
+    <div class="text-8xl i-bx:loader-alt animate-cspin" />
     <h1 class="text-4xl font-bold">{$t('app.loading')}...</h1>
   </div>
 {:else} 
   <AppView />
 {/if}
 
 <style>
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 
-.animate-c-spin {
+.animate-cspin {
   animation: spin 500ms linear infinite;
 }
 </style>

services/frontend/src/stores/matrix.store.ts

@@ -1,8 +1,7 @@
 import { writable } from 'svelte/store'
 import { createMatrixReadable } from '../matrix'
 import { ClientEvent, MatrixEventEvent, RoomEvent } from 'matrix-js-sdk'
-
-export const currentRoomStore = writable<string | undefined>(undefined)
+import { appState } from '$lib/app-state'
 
 export const roomsStore = createMatrixReadable((client) => {
   return client.getRooms().sort((a, b) => b.getLastActiveTimestamp() - a.getLastActiveTimestamp())
@@ -12,9 +11,9 @@ export const roomsStore = createMatrixReadable((client) => {
 })
 
 export const eventsStore = createMatrixReadable((client, values) => {
-  return client.getRoom(values)?.getLiveTimeline().getEvents()
+  return client.getRoom(values.selectedRoom)?.getLiveTimeline().getEvents()
 }, {
   initialValue: undefined,
   events: [RoomEvent.Timeline, MatrixEventEvent.Decrypted],
-  dependencies: currentRoomStore,
+  dependencies: appState,
 })