feat: matrix

package.json

@@ -69,6 +69,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
+    "rxjs": "^7.8.1",
     "sass": "^1.77.8",
     "socket.io-client": "^4.7.5",
     "stylelint": "^16.8.1",

pnpm-lock.yaml

@@ -113,6 +113,9 @@ importers:
       prettier-plugin-svelte:
         specifier: ^3.2.6
         version: 3.2.6(prettier@3.3.3)(svelte@5.0.0-next.221)
+      rxjs:
+        specifier: ^7.8.1
+        version: 7.8.1
       sass:
         specifier: ^1.77.8
         version: 1.77.8

src/lib/chat/MatrixRooms.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-  import type { Room } from "matrix-js-sdk";
-  import { matrixClient, currentRoomId } from "./chat";
-
-  let { rooms }: { rooms: Room[] } = $props();
-</script>
-
-<div class="rooms">
-  {#each $matrixClient.getRooms() as room}
-    {@const avatar = room.getMxcAvatarUrl()}
-    <button
-      class:active={$currentRoomId === room.roomId}
-      class="room"
-      onclick={() => ($currentRoomId = room.roomId)}
-    >
-      {#if avatar}
-        <img
-          alt={room.name}
-          src={$matrixClient.mxcUrlToHttp(avatar, 16, 16)}
-          width="16"
-          height="16"
-        />
-      {:else}
-        <div>#</div>
-      {/if}
-      <div>{room.name}</div>
-    </button>
-  {/each}
-
-  {#await $matrixClient.publicRooms()}
-    <div>Loading...</div>
-  {:then rooms}
-    {#each rooms.chunk as room}
-      <button class="room" onclick={() => ($currentRoomId = room.roomId)}>
-        <div>#</div>
-        <div>{room.name}</div>
-      </button>
-    {/each}
-  {:catch error}
-    <div>{error.message}</div>
-  {/await}
-</div>
-
-<style lang="scss">
-  .rooms {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    padding: 8px;
-    padding-left: 0;
-    width: 100%;
-  }
-
-  .room {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 0.5rem;
-    cursor: pointer;
-    padding-block: 2px;
-    min-height: 0;
-    height: unset;
-    padding-inline: 16px;
-    padding-block: 4px;
-    border-radius: 8px;
-    width: 100%;
-
-    &.active {
-      background: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  }
-</style>

src/lib/chat/chat.ts

@@ -1,5 +1,10 @@
-import { writable, type Writable } from "svelte/store";
-import type { MatrixClient, RoomMember } from "matrix-js-sdk";
+import { derived, writable, type Writable } from "svelte/store";
+import type {
+  ClientEvent,
+  LoginResponse,
+  MatrixClient,
+  RoomMember,
+} from "matrix-js-sdk";
 import { persistentWritable } from "$lib/storage";
 import {
   themeFromSourceColor,
@@ -7,14 +12,83 @@ import {
   type CustomColorGroup,
 } from "@material/material-color-utilities";
 import type { UserTheme } from "$lib/preferences";
+import { MatrixRx } from "./matrix-rx/client";
 
 export const matrixClient: Writable<MatrixClient> = writable();
 
+export const isLoggedIn: Writable<boolean> = writable(false);
+
+export const matrix = derived(
+  [matrixClient, isLoggedIn],
+  ([matrixClient, isLoggedIn]) =>
+    isLoggedIn ? new MatrixRx(matrixClient) : undefined,
+);
+
 export const currentRoomId = persistentWritable<string | null>(
   "currentRoomId",
   null,
 );
 
+function getStoredLogin(): LoginResponse | undefined {
+  try {
+    return JSON.parse(localStorage.getItem("matrix-login")!);
+  } catch {
+    return undefined;
+  }
+}
+
+export function storeLogin(response: LoginResponse) {
+  localStorage.setItem("matrix-login", JSON.stringify(response));
+}
+
+export async function initMatrixClient() {
+  const { createClient, IndexedDBStore, IndexedDBCryptoStore } = await import(
+    "matrix-js-sdk"
+  );
+
+  const storedLogin = getStoredLogin();
+
+  const store = new IndexedDBStore({
+    dbName: "matrix",
+    indexedDB: window.indexedDB,
+  });
+  const cryptoStore = new IndexedDBCryptoStore(
+    window.indexedDB,
+    "matrix-crypto",
+  );
+
+  const client = createClient({
+    baseUrl: import.meta.env.VITE_MATRIX_URL,
+    userId: storedLogin?.user_id,
+    accessToken: storedLogin?.access_token,
+    timelineSupport: true,
+    store,
+    cryptoStore,
+  });
+
+  console.log("store");
+  await store.startup();
+  console.log("cryptoStore");
+  await cryptoStore.startup();
+  console.log("client");
+  await client.startClient();
+  client.once("sync" as ClientEvent.Sync, () => {
+    isLoggedIn.set(client.isLoggedIn());
+  });
+
+  const loginToken = new URLSearchParams(window.location.search).get(
+    "loginToken",
+  );
+  if (loginToken) {
+    storeLogin(await client.loginWithToken(loginToken));
+    window.history.replaceState({}, document.title, window.location.pathname);
+    isLoggedIn.set(client.isLoggedIn());
+  }
+
+  matrixClient.set(client);
+  console.log("done");
+}
+
 export function memberColor(
   member: RoomMember,
   theme: UserTheme,

src/lib/chat/matrix-rx/client.ts

@@ -0,0 +1,71 @@
+import type { Direction, MatrixClient, Room } from "matrix-js-sdk";
+import {
+  filter,
+  map,
+  type Observable,
+  of,
+  distinctUntilChanged,
+  merge,
+} from "rxjs";
+import { fromMatrixClientEvent } from "./events";
+
+function roomListDistinct(prev: Room[], curr: Room[]) {
+  if (prev.length !== curr.length) return false;
+  for (let i = 0; i < prev.length; i++) {
+    if (prev[i]!.roomId !== curr[i]!.roomId) return false;
+  }
+  return true;
+}
+
+export class MatrixRx {
+  topLevelRooms$: Observable<Room[]>;
+
+  topLevelSpaces$: Observable<Room[]>;
+
+  topLevelChats$: Observable<Room[]>;
+
+  constructor(private client: MatrixClient) {
+    this.topLevelRooms$ = merge(
+      of([]),
+      fromMatrixClientEvent(client, "Room"),
+      fromMatrixClientEvent(client, "deleteRoom"),
+      fromMatrixClientEvent(client, "Room.myMembership"),
+      fromMatrixClientEvent(client, "Room.CurrentStateUpdated").pipe(
+        filter(
+          ([_room, prev, curr]) =>
+            prev.getStateEvents("m.space.parent").length !==
+            curr.getStateEvents("m.space.parent").length,
+        ),
+      ),
+    ).pipe(
+      map(() =>
+        this.client.getVisibleRooms().filter(
+          (room) =>
+            room.getMyMembership() !== "leave" &&
+            room
+              .getLiveTimeline()
+              .getState("f" as Direction.Forward)
+              ?.getStateEvents("m.space.parent").length === 0,
+        ),
+      ),
+      distinctUntilChanged(roomListDistinct),
+    );
+
+    this.topLevelSpaces$ = this.topLevelRooms$.pipe(
+      map((rooms) => rooms.filter((room) => room.isSpaceRoom())),
+      distinctUntilChanged(roomListDistinct),
+    );
+
+    this.topLevelChats$ = this.topLevelRooms$.pipe(
+      map((rooms) => rooms.filter((room) => !room.isSpaceRoom())),
+      distinctUntilChanged(roomListDistinct),
+    );
+  }
+}
+
+export class SpaceRx {
+  constructor(
+    private client: MatrixClient,
+    private space: Room,
+  ) {}
+}

src/lib/chat/matrix-rx/events.ts

@@ -0,0 +1,11 @@
+import type { ClientEventHandlerMap, MatrixClient } from "matrix-js-sdk";
+import { fromEvent, type Observable } from "rxjs";
+
+export function fromMatrixClientEvent<T extends keyof ClientEventHandlerMap>(
+  client: MatrixClient,
+  eventName: `${T}`, // hack so we can use strings instead of enums
+): Observable<Parameters<ClientEventHandlerMap[T]>> {
+  return fromEvent(client, eventName) as Observable<
+    Parameters<ClientEventHandlerMap[T]>
+  >;
+}

src/lib/chat/matrix-rx/rooms.ts

@@ -0,0 +1,85 @@
+import type {
+  MatrixClient,
+  MatrixEvent,
+  Room,
+  Direction,
+  RoomState,
+  RoomStateEventHandlerMap,
+  EventType,
+} from "matrix-js-sdk";
+import { fromMatrixClientEvent } from "./events";
+import {
+  map,
+  filter,
+  merge,
+  startWith,
+  Observable,
+  of,
+  fromEvent,
+  concat,
+  defer,
+} from "rxjs";
+
+export function matrixRoom$(
+  client: MatrixClient,
+  roomId: string | undefined,
+): Observable<Room | undefined> {
+  return merge([
+    fromMatrixClientEvent(client, "Room").pipe(
+      filter(([room]) => room.roomId === roomId),
+    ),
+    fromMatrixClientEvent(client, "deleteRoom").pipe(
+      filter(([id]) => id === roomId),
+    ),
+  ]).pipe(
+    startWith([]),
+    map(() => client.getRoom(roomId) ?? undefined),
+  );
+}
+
+export function roomTimeline$(
+  client: MatrixClient,
+  room: Room | undefined,
+): Observable<MatrixEvent[] | undefined> {
+  if (!room) return of(undefined);
+  const eventTimeline = room.getLiveTimeline();
+
+  return fromMatrixClientEvent(client, "Room.timeline").pipe(
+    filter(
+      ([, eventRoom]) =>
+        eventRoom !== undefined && eventRoom.roomId === room.roomId,
+    ),
+    startWith([]),
+    map(() => eventTimeline.getEvents()),
+  );
+}
+
+export function roomCurrentStateEvents$(
+  client: MatrixClient,
+  room: Room,
+  eventType: EventType | string,
+): Observable<MatrixEvent[]> {
+  return concat(
+    defer(() =>
+      of(
+        room
+          .getLiveTimeline()
+          .getState("f" as Direction.Forward)
+          ?.getStateEvents(eventType) ?? [],
+      ),
+    ),
+    fromMatrixClientEvent(client, "Room.CurrentStateUpdated").pipe(
+      filter(([room]) => room.roomId === room.roomId),
+      map(([_room, _prev, curr]) => curr.getStateEvents(eventType)),
+    ),
+  );
+}
+
+export function fromRoomStateEvent<T extends keyof RoomStateEventHandlerMap>(
+  state: RoomState,
+  eventName: `${T}`,
+): Observable<Parameters<RoomStateEventHandlerMap[T]>> {
+  return fromEvent(state, eventName) as Observable<
+    Parameters<RoomStateEventHandlerMap[T]>
+  >;
+}

src/lib/chat/matrix-rx/timeline.ts

@@ -0,0 +1,19 @@
+import type { EventTimeline, MatrixClient, MatrixEvent } from "matrix-js-sdk";
+import { filter, map, of, startWith, type Observable } from "rxjs";
+import { fromMatrixClientEvent } from "./events";
+
+export function roomTimeline(
+  client: MatrixClient,
+  roomId: string | undefined,
+): Observable<MatrixEvent[]> {
+  if (!roomId) return of([]);
+  const room = client.getRoom(roomId);
+  if (!room) return of([]);
+  const eventTimeline = room.getLiveTimeline();
+
+  return fromMatrixClientEvent(client, "Room.timeline").pipe(
+    filter(([, room]) => room?.roomId === roomId),
+    startWith([]),
+    map(() => eventTimeline.getEvents()),
+  );
+}

src/lib/storage.ts

@@ -9,10 +9,17 @@ export function persistentWritable<T>(
 ): Writable<T> {
   if (browser) {
     const persistedValue = localStorage.getItem(key);
-    const store =
-      persistedValue !== null
-        ? writable(JSON.parse(persistedValue))
-        : writable(value);
+    let store: Writable<T>;
+    try {
+      store =
+        persistedValue !== null
+          ? writable(JSON.parse(persistedValue))
+          : writable(value);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      store = writable(value);
+    }
     store.subscribe((value) => {
       if (!condition || condition())
         localStorage.setItem(key, JSON.stringify(value));

src/routes/(app)/+layout.svelte

@@ -15,7 +15,6 @@
   import { initSerial } from "$lib/serial/connection";
   import type { LayoutData } from "./$types";
   import { browser } from "$app/environment";
-  import BrowserWarning from "./BrowserWarning.svelte";
   import "tippy.js/animations/shift-away.css";
   import "tippy.js/dist/tippy.css";
   import tippy from "tippy.js";
@@ -30,6 +29,7 @@
   import { restoreFromFile } from "$lib/backup/backup";
   import { goto } from "$app/navigation";
   import { hotkeys } from "$lib/title";
+  import { initMatrixClient } from "$lib/chat/chat";
 
   const locale =
     ((browser && localStorage.getItem("locale")) as Locales) || detectLocale();
@@ -66,6 +66,9 @@
     if (browser && $userPreferences.autoConnect && (await canAutoConnect())) {
       await initSerial();
     }
+    if (browser) {
+      await initMatrixClient();
+    }
 
     if (data.importFile) {
       restoreFromFile(data.importFile);
@@ -128,10 +131,6 @@
   </PageTransition>
 
   <Footer />
-
-  {#if import.meta.env.TAURI_FAMILY === undefined && browser && !("serial" in navigator)}
-    <BrowserWarning />
-  {/if}
 </div>
 
 <style lang="scss">

src/routes/(app)/chat/+page.svelte

@@ -1,184 +1,84 @@
 <script lang="ts">
-  import { browser } from "$app/environment";
-  import { onDestroy, onMount, setContext } from "svelte";
-  import type {
-    IndexedDBStore,
-    IndexedDBCryptoStore,
-    LoginResponse,
-  } from "matrix-js-sdk";
-  import MatrixTimeline from "$lib/chat/MatrixTimeline.svelte";
-  import { matrixClient, currentRoomId } from "$lib/chat/chat";
-  import MatrixRooms from "$lib/chat/MatrixRooms.svelte";
-  import MatrixRoomMembers from "$lib/chat/MatrixRoomMembers.svelte";
+  import { isLoggedIn, matrix } from "$lib/chat/chat";
+  import { flip } from "svelte/animate";
+  import { slide } from "svelte/transition";
+  import Login from "./Login.svelte";
 
-  let loggedIn = $state(false);
-  let ready = $state(false);
+  let { children } = $props();
 
-  let store: IndexedDBStore;
-  let cryptoStore: IndexedDBCryptoStore;
+  let spaces = $derived($matrix?.topLevelSpaces$);
 
-  onMount(async () => {
-    if (!browser) return;
-    const { createClient, IndexedDBStore, IndexedDBCryptoStore } = await import(
-      "matrix-js-sdk"
-    );
-
-    const storedLogin = getStoredLogin();
-
-    store = new IndexedDBStore({
-      dbName: "matrix",
-      indexedDB: window.indexedDB,
-    });
-    cryptoStore = new IndexedDBCryptoStore(window.indexedDB, "matrix-crypto");
-
-    $matrixClient = createClient({
-      baseUrl: import.meta.env.VITE_MATRIX_URL,
-      userId: storedLogin?.user_id,
-      accessToken: storedLogin?.access_token,
-      timelineSupport: true,
-      store,
-      cryptoStore,
-    });
-
-    const loginToken = new URLSearchParams(window.location.search).get(
-      "loginToken",
-    );
-    if (loginToken) {
-      await handleLogin(await $matrixClient.loginWithToken(loginToken));
-      window.history.replaceState({}, document.title, window.location.pathname);
-    }
-
-    await postLogin();
-  });
-
-  async function passwordLogin(event: SubmitEvent) {
-    event.preventDefault();
-    const form = event.target as HTMLFormElement;
-    const username = (form.elements.namedItem("username") as HTMLInputElement)
-      .value;
-    const password = (form.elements.namedItem("password") as HTMLInputElement)
-      .value;
-
-    await handleLogin(
-      await $matrixClient.loginWithPassword(username, password),
-    );
-    await postLogin();
+  function spaceShort(name: string) {
+    return name
+      .split(" ")
+      .map((it) => it[0])
+      .join("");
   }
-
-  async function handleLogin(response: LoginResponse) {
-    localStorage.setItem("matrix-login", JSON.stringify(response));
-  }
-
-  async function postLogin() {
-    loggedIn = $matrixClient.isLoggedIn();
-
-    if (loggedIn) {
-      await store.startup();
-      await cryptoStore.startup();
-      await $matrixClient.startClient();
-      $matrixClient.once("sync", function (state, prevState, res) {
-        ready = true;
-      });
-    }
-  }
-
-  function getStoredLogin(): LoginResponse | undefined {
-    try {
-      return JSON.parse(localStorage.getItem("matrix-login")!);
-    } catch {
-      return undefined;
-    }
-  }
-
-  onDestroy(() => {
-    if ($matrixClient) {
-      $matrixClient.stopClient();
-    }
-  });
 </script>
 
-{#if $matrixClient && loggedIn}
-  {#if ready}
-    <div class="chat">
-      <div class="rooms">
-        <button
-          onclick={() => {
-            $matrixClient.logout(true);
-            $matrixClient.clearStores();
-            localStorage.removeItem("matrix-login");
-            window.location.reload();
-          }}>logout</button
-        >
-        <MatrixRooms rooms={$matrixClient.getRooms()} />
-      </div>
-      {#if $currentRoomId}
-        {@const room = $matrixClient.getRoom($currentRoomId)}
-        {#key room}
-          {#if room}
-            <div class="timeline">
-              <MatrixTimeline timeline={room.getLiveTimeline()} />
-            </div>
-            <div class="members">
-              <MatrixRoomMembers members={room.getJoinedMembers()} />
-            </div>
-          {/if}
-        {/key}
-      {/if}
-    </div>
-  {/if}
-{:else if $matrixClient}
-  {#await $matrixClient.loginFlows() then flows}
-    {#each flows.flows as flow}
-      {#if flow.type === "m.login.sso"}
-        <a
-          href={$matrixClient.getSsoLoginUrl(`${window.location.origin}/chat/`)}
-        >
-          {#each flow.identity_providers as idp}
-            {#if idp.icon}
-              <img src={$matrixClient.mxcUrlToHttp(idp.icon)} alt={idp.name} />
-            {:else}
-              {idp.name}
-            {/if}
+{#if $isLoggedIn}
+  <div class="layout">
+    <nav class="spaces">
+      <a href="/chat/chats" class="icon chats">chat</a>
+      <hr />
+      {#if $spaces}
+        <ul>
+          {#each $spaces as space (space.roomId)}
+            <li animate:flip transition:slide>
+              <a class="space" href="/chat/space/{space.roomId}">
+                {spaceShort(space.name)}
+              </a>
+            </li>
           {/each}
-        </a>
-      {:else if flow.type === "m.login.password"}
-        <form onsubmit={passwordLogin}>
-          <input name="username" type="text" placeholder="Username" />
-          <input name="password" type="password" placeholder="Password" />
-          <button type="submit">Login</button>
-        </form>
+        </ul>
       {/if}
-    {/each}
-  {/await}
+      <button class="icon">add</button>
+    </nav>
+  </div>
+{:else}
+  <Login />
 {/if}
 
 <style lang="scss">
-  .chat {
-    display: flex;
-    width: 100%;
-    height: 100%;
-
-    > *:not(:last-child) {
-      border-right: 1px solid var(--md-sys-color-outline);
-    }
-  }
-
-  .room {
+  nav {
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
   }
 
-  .timeline {
-    flex-grow: 1;
+  .layout {
+    display: flex;
+    height: 100%;
+    width: 100%;
   }
 
-  .rooms {
-    flex-shrink: 0;
+  hr {
+    width: 60%;
+    height: 1px;
   }
 
-  .members {
-    width: 200px;
-    flex-shrink: 0;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  button,
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    width: 56px;
+    height: 56px;
+    background: var(--md-sys-color-surface-variant);
+  }
+
+  .chats {
+    font-size: 24px;
+  }
+
+  .space {
+    font-size: 20px;
+    margin-bottom: 8px;
   }
 </style>

src/routes/(app)/chat/Login.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { matrixClient } from "$lib/chat/chat";
+
+  function passwordLogin() {
+    // TODO
+  }
+</script>
+
+{#if $matrixClient}
+  {#await $matrixClient.loginFlows() then flows}
+    {#each flows.flows as flow}
+      {#if flow.type === "m.login.sso"}
+        <a
+          href={$matrixClient.getSsoLoginUrl(`${window.location.origin}/chat/`)}
+        >
+          {#each flow.identity_providers as idp}
+            {#if idp.icon}
+              <img src={$matrixClient.mxcUrlToHttp(idp.icon)} alt={idp.name} />
+            {:else}
+              {idp.name}
+            {/if}
+          {/each}
+        </a>
+      {:else if flow.type === "m.login.password"}
+        <form onsubmit={passwordLogin}>
+          <input name="username" type="text" placeholder="Username" />
+          <input name="password" type="password" placeholder="Password" />
+          <button type="submit">Login</button>
+        </form>
+      {/if}
+    {/each}
+  {/await}
+{/if}