feat: matrix

src/env.d.ts

@@ -14,6 +14,7 @@ interface ImportMetaEnv {
   readonly VITE_LEARN_URL: string;
   readonly VITE_LATEST_FIRMWARE: string;
   readonly VITE_STORE_URL: string;
+  readonly VITE_MATRIX_URL: string;
 }
 
 interface ImportMeta {

src/lib/charrecorder/CharRecorder.svelte

@@ -11,11 +11,13 @@
     cursor = false,
     keys = false,
     children,
+    ondone,
   }: {
     replay: ReplayPlayer | Replay;
     cursor?: boolean;
     keys?: boolean;
     children?: Snippet;
+    ondone?: () => void;
   } = $props();
 
   let replayPlayer: ReplayPlayer | undefined = $state();
@@ -61,6 +63,7 @@
     const unsubscribePlayer = player.subscribe(apply);
     textRenderer = renderer;
 
+    player.onDone = ondone;
     player.start();
     apply();
     setTimeout(() => {

src/lib/charrecorder/core/player.ts

@@ -18,6 +18,8 @@ export class ReplayPlayer {
 
   private subscribers = new Set<(value: TextToken | undefined) => void>();
 
+  onDone?: () => void;
+
   constructor(
     readonly replay: Replay,
     plugins: ReplayPlugin[] = [],
@@ -37,8 +39,13 @@ export class ReplayPlayer {
     if (
       this.replayCursor >= this.replay.keys.length &&
       this.releaseAt.size === 0
-    )
+    ) {
+      if (this.onDone) {
+        this.onDone();
+      }
       return;
+    }
+
     const now = performance.now() - this.startTime;
 
     while (
@@ -118,7 +125,12 @@ export class ReplayPlayer {
   start(delay = 200): this {
     this.replayCursor = 0;
     this.stepper = new ReplayStepper([], this.replay.challenge);
-    if (this.replay.keys.length === 0) return this;
+    if (this.replay.keys.length === 0) {
+      if (this.onDone) {
+        this.onDone();
+      }
+      return this;
+    }
     setTimeout(() => {
       this.startTime = performance.now();
       this.animationFrameId = requestAnimationFrame(this.updateLoop.bind(this));

src/lib/charrecorder/core/recorder.ts

@@ -1,6 +1,10 @@
 import { ReplayPlayer } from "./player.js";
 import type { Replay, ReplayEvent, TransmittableKeyEvent } from "./types.js";
 
+function maybeRound<T>(value: T, round: boolean): T {
+  return typeof value === "number" && round ? (Math.round(value) as T) : value;
+}
+
 export class ReplayRecorder {
   private held = new Map<string, [string, number]>();
 
@@ -39,7 +43,7 @@ export class ReplayRecorder {
         this.player.playLiveEvent(event.key, event.code),
       );
     } else {
-      const [key, start] = this.held.get(event.code)!;
+      const [key, start] = this.held.get(event.code) ?? ["", 0];
       const delta = event.timeStamp - start;
       this.held.delete(event.code);
 
@@ -50,16 +54,24 @@ export class ReplayRecorder {
     }
   }
 
-  finish(trim = true) {
+  finish(trim = true, round = true) {
     return {
-      start: trim ? this.replay[0]?.[2] : this.start,
-      finish: trim
-        ? Math.max(...this.replay.map((it) => it[2] + it[3]))
-        : performance.now(),
+      start: maybeRound(trim ? this.replay[0]?.[2] : this.start, round),
+      finish: maybeRound(
+        trim
+          ? Math.max(...this.replay.map((it) => it[2] + it[3]))
+          : performance.now(),
+        round,
+      ),
       keys: this.replay
         .map(
           ([key, code, at, duration]) =>
-            [key, code, Math.round(at), Math.round(duration)] as const,
+            [
+              key,
+              code,
+              maybeRound(at, round),
+              maybeRound(duration, round),
+            ] as const,
         )
         .sort((a, b) => a[2] - b[2]),
     };

src/lib/chat/MatrixRoomMembers.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { RoomMember } from "matrix-js-sdk";
+  import { matrixClient, memberColor } from "./chat";
+  import { theme } from "$lib/preferences";
+  import { hexFromArgb } from "@material/material-color-utilities";
+
+  let { members }: { members: RoomMember[] } = $props();
+</script>
+
+<div class="member-list">
+  {#each members as member (member.userId)}
+    {@const avatar = member.getMxcAvatarUrl()}
+    <div class="member">
+      {#if avatar}
+        <img
+          class="avatar"
+          src={$matrixClient.mxcUrlToHttp(avatar, 32, 32)}
+          alt={member.name}
+          width="32"
+          height="32"
+        />
+      {:else}
+        {@const color = memberColor(member, $theme)}
+        {@const modeColor = $theme.mode === "dark" ? color.dark : color.light}
+        <div
+          style:background={hexFromArgb(modeColor.color)}
+          style:color={hexFromArgb(modeColor.onColor)}
+          class="avatar avatar-placeholder icon"
+        >
+          person
+        </div>
+      {/if}
+      <span>{member.name}</span>
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  .avatar {
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+  }
+
+  .avatar-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+  }
+
+  .member {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .member-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 8px;
+    overflow-y: auto;
+    height: 100%;
+  }
+
+  span {
+    word-break: break-all;
+  }
+</style>

src/lib/chat/MatrixRooms.svelte

@@ -0,0 +1,73 @@
+<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/MatrixTimeline.svelte

@@ -0,0 +1,251 @@
+<script lang="ts">
+  import type {
+    EventTimeline,
+    MatrixEvent,
+    MsgType,
+    Room,
+    RoomEvent,
+    RoomMember,
+    RoomMemberEvent,
+  } from "matrix-js-sdk";
+  import { onDestroy, onMount, tick } from "svelte";
+  import { matrixClient } from "./chat";
+  import MatrixEventComponent from "./events/MatrixEvent.svelte";
+  import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
+  import { ReplayRecorder } from "$lib/charrecorder/core/recorder";
+  import { type Socket, io } from "socket.io-client";
+  import { SvelteMap } from "svelte/reactivity";
+
+  let { timeline }: { timeline: EventTimeline } = $props();
+
+  const excludeEvents = ["m.reaction", "m.room.redaction"];
+
+  let events = $state(
+    timeline
+      .getEvents()
+      .filter((it) => !excludeEvents.includes(it.getType()))
+      .reverse(),
+  );
+
+  let recorder = $state(new ReplayRecorder());
+  let showCursor = $state(false);
+
+  let timelineElement: HTMLElement = $state()!;
+
+  async function onTimeline(
+    event: MatrixEvent,
+    room?: Room,
+    toStartOfTimeline?: boolean,
+  ) {
+    if (room?.roomId !== timeline.getRoomId()) return;
+    const sender = event.getSender();
+    if (sender) {
+      live.delete(sender);
+    }
+    if (excludeEvents.includes(event.getType())) return;
+    if (toStartOfTimeline) {
+      events.push(event);
+    } else {
+      const needScroll = timelineElement.scrollTop < 20;
+      events.unshift(event);
+      if (needScroll) {
+        await tick();
+        timelineElement.scroll({
+          top: 0,
+          behavior: "smooth",
+        });
+      }
+    }
+  }
+
+  let typing = $state<string[]>([]);
+
+  function onTyping(event: MatrixEvent, member: RoomMember) {
+    typing = event.event.content?.["user_ids"] ?? [];
+  }
+
+  async function send() {
+    const roomId = timeline.getRoomId();
+    if (!roomId) return;
+    const finalText = recorder.player.stepper.text
+      .map((token) => token.text)
+      .join("");
+    const finalRecording = recorder.finish();
+    if (!finalText) return;
+    recorder = new ReplayRecorder();
+    await $matrixClient.sendMessage(roomId, {
+      msgtype: "m.text" as MsgType.Text,
+      body: finalText,
+      // @ts-expect-error
+      "m.replay": finalRecording,
+    });
+  }
+
+  function onKey(event: KeyboardEvent) {
+    if (event.type === "keyup" && event.key === "Enter" && !event.shiftKey) {
+      send();
+      return;
+    } else {
+      recorder.next(event);
+    }
+
+    if (event.type === "keyup" && recorder.player.stepper.text.length === 0) {
+      recorder = new ReplayRecorder();
+    } else {
+      socket.emit("message", {
+        timeStamp: event.timeStamp,
+        type: event.type,
+        key: event.key,
+        code: event.code,
+        username: $matrixClient.getUserId(),
+      });
+    }
+  }
+
+  let socket: Socket = $state()!;
+  let live = new SvelteMap<string, ReplayRecorder>();
+
+  onMount(() => {
+    socket = io("https://srv.charachorder.io");
+    socket.emit("join", timeline.getRoomId());
+
+    socket.on("message", async ({ message }) => {
+      let userRecorder = live.get(message.username);
+      if (!userRecorder) {
+        userRecorder = new ReplayRecorder();
+        live.set(message.username, userRecorder);
+      }
+
+      await tick();
+
+      userRecorder.next(message);
+
+      if (userRecorder.player.stepper.text.length === 0) {
+        live.delete(message.username);
+      }
+    });
+
+    $matrixClient.on("Room.timeline" as RoomEvent.Timeline, onTimeline);
+    $matrixClient.on("RoomMember.typing" as RoomMemberEvent.Typing, onTyping);
+  });
+
+  onDestroy(() => {
+    socket?.disconnect();
+    $matrixClient.off("Room.timeline" as RoomEvent.Timeline, onTimeline);
+    $matrixClient.off("RoomMember.typing" as RoomMemberEvent.Typing, onTyping);
+  });
+</script>
+
+<section>
+  <div bind:this={timelineElement} class="timeline">
+    {#each live.entries() as [userId, recorder] (userId)}
+      {@const roomId = timeline.getRoomId()}
+      {#if roomId}
+        {@const room = $matrixClient.getRoom(roomId)}
+        {@const member = room?.getMember(userId)}
+        {#if member}
+          <MatrixEventComponent sender={member} replay={recorder.player} />
+        {/if}
+      {/if}
+    {/each}
+    {#each events as event, i (event.event["event_id"])}
+      {@const prev = events[i + 1]}
+      <MatrixEventComponent {event} sender={event.sender} {prev} {timeline} />
+    {/each}
+  </div>
+
+  <div class="static-elements">
+    <div class="indicators"></div>
+    <div class="input-box">
+      <button class="icon">add</button>
+      <div
+        role="textbox"
+        tabindex="0"
+        class="input"
+        onkeydown={onKey}
+        onkeyup={onKey}
+        onfocusin={() => (showCursor = true)}
+        onfocusout={() => (showCursor = false)}
+      >
+        <CharRecorder replay={recorder.player} cursor={showCursor} />
+      </div>
+      <button class="icon" onclick={send}>send</button>
+    </div>
+  </div>
+</section>
+
+<style lang="scss">
+  $border-radius: 16px;
+
+  h2 {
+    height: min-content;
+  }
+
+  .input {
+    border: 1px solid var(--md-sys-color-outline);
+    flex-grow: 1;
+    cursor: text;
+    padding: 0.5em;
+    font-size: 1rem;
+    border-radius: $border-radius;
+
+    text-wrap: wrap;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-break: break-word;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .input-box {
+    display: flex;
+    gap: 4px;
+    padding-block: 8px;
+    flex-shrink: 0;
+    width: 100%;
+  }
+
+  .static-elements {
+    position: relative;
+    width: 100%;
+  }
+
+  .timeline {
+    contain: content;
+    height: auto;
+    display: flex;
+    flex-direction: column-reverse;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  .back-to-present {
+    position: fixed;
+    bottom: 0;
+  }
+
+  .scroll-controls {
+    position: sticky;
+    bottom: 0;
+    min-height: 16px;
+    background: linear-gradient(
+      to bottom,
+      transparent,
+      var(--md-sys-color-background)
+    );
+  }
+
+  section {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    justify-content: flex-end;
+
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/lib/chat/chat.ts

@@ -0,0 +1,35 @@
+import { writable, type Writable } from "svelte/store";
+import type { MatrixClient, RoomMember } from "matrix-js-sdk";
+import { persistentWritable } from "$lib/storage";
+import {
+  themeFromSourceColor,
+  argbFromHex,
+  type CustomColorGroup,
+} from "@material/material-color-utilities";
+import type { UserTheme } from "$lib/preferences";
+
+export const matrixClient: Writable<MatrixClient> = writable();
+
+export const currentRoomId = persistentWritable<string | null>(
+  "currentRoomId",
+  null,
+);
+
+export function memberColor(
+  member: RoomMember,
+  theme: UserTheme,
+): CustomColorGroup {
+  let hash = 0;
+  member.userId.split("").forEach((char) => {
+    hash = char.charCodeAt(0) + ((hash << 5) - hash);
+  });
+  let color = "#";
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += value.toString(16).padStart(2, "0");
+  }
+
+  return themeFromSourceColor(argbFromHex(theme.color), [
+    { value: argbFromHex(color), name: "member", blend: true },
+  ]).customColors.find((c) => c.color.name === "member")!;
+}

src/lib/chat/events/MatrixEvent.svelte

@@ -0,0 +1,357 @@
+<script lang="ts">
+  import type {
+    EventTimeline,
+    MatrixEvent,
+    MatrixEventEvent,
+    Relations,
+    RelationsEvent,
+    RoomMember,
+  } from "matrix-js-sdk";
+  import MatrixMessageEvent from "./MatrixMessageEvent.svelte";
+  import { matrixClient, memberColor } from "../chat";
+  import { theme } from "$lib/preferences";
+  import { hexFromArgb } from "@material/material-color-utilities";
+  import { fade } from "svelte/transition";
+  import type { Replay } from "$lib/charrecorder/core/types";
+  import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
+  import type { ReplayPlayer } from "$lib/charrecorder/core/player";
+  import { onDestroy, onMount } from "svelte";
+  import { writable } from "svelte/store";
+
+  let {
+    event,
+    prev,
+    sender,
+    replay: replayPlayer,
+    timeline,
+  }: {
+    event?: MatrixEvent;
+    prev?: MatrixEvent;
+    sender?: RoomMember | null;
+    replay?: Replay | ReplayPlayer;
+    timeline?: EventTimeline;
+  } = $props();
+
+  let toolbarHover = $state(false);
+  let mainHover = $state(false);
+
+  let hover = $derived(toolbarHover || mainHover);
+
+  let replay: Replay | undefined = $state();
+
+  let reactions: Relations | undefined = $state(
+    timeline && event?.event.event_id
+      ? timeline
+          .getTimelineSet()
+          .relations.getChildEventsForEvent(
+            event.event.event_id,
+            "m.annotation",
+            "m.reaction",
+          )
+      : undefined,
+  );
+  let annotations = writable<[string, Set<MatrixEvent>][] | null | undefined>();
+
+  function createRelations() {
+    if (!timeline || !event?.event.event_id) return;
+    reactions?.off("Relations.add" as RelationsEvent.Add, createRelations);
+    reactions?.off(
+      "Relations.remove" as RelationsEvent.Remove,
+      createRelations,
+    );
+    reactions = timeline
+      .getTimelineSet()
+      .relations.getChildEventsForEvent(
+        event.event.event_id,
+        "m.annotation",
+        "m.reaction",
+      );
+    reactions?.on("Relations.add" as RelationsEvent.Add, createRelations);
+    reactions?.on("Relations.remove" as RelationsEvent.Remove, createRelations);
+    reactions?.on(
+      "Relations.redaction" as RelationsEvent.Redaction,
+      createRelations,
+    );
+    annotations.set(
+      reactions?.getSortedAnnotationsByKey()?.filter(([, it]) => it.size > 0),
+    );
+    console.log("create");
+  }
+
+  onMount(() => {
+    createRelations();
+    event?.on(
+      "Event.relationsCreated" as MatrixEventEvent.RelationsCreated,
+      createRelations,
+    );
+  });
+
+  onDestroy(() => {
+    event?.off(
+      "Event.relationsCreated" as MatrixEventEvent.RelationsCreated,
+      createRelations,
+    );
+    reactions?.off("Relations.add" as RelationsEvent.Remove, createRelations);
+    reactions?.off(
+      "Relations.remove" as RelationsEvent.Remove,
+      createRelations,
+    );
+    reactions?.off(
+      "Relations.redaction" as RelationsEvent.Redaction,
+      createRelations,
+    );
+  });
+</script>
+
+<div
+  class="event"
+  role="log"
+  onmouseover={() => (mainHover = true)}
+  onfocus={() => (mainHover = true)}
+  onmouseout={() => (mainHover = false)}
+  onblur={() => (mainHover = false)}
+>
+  {#if event && hover}
+    <div class="backdrop" transition:fade={{ duration: 100 }}></div>
+  {/if}
+
+  {#if sender && !(prev && prev?.getType() === event?.getType() && prev.sender?.userId === event.sender?.userId)}
+    {@const color = memberColor(sender, $theme)}
+    {@const avatarMxc = sender.getMxcAvatarUrl()}
+    {#if avatarMxc}
+      {@const avatar = $matrixClient.mxcUrlToHttp(avatarMxc, 32, 32)}
+      <img
+        class="avatar"
+        src={avatar}
+        alt={sender.name}
+        width="32"
+        height="32"
+      />
+    {:else}
+      <div
+        class="avatar avatar-placeholder icon"
+        style:background={hexFromArgb(
+          $theme.mode === "dark" ? color.dark.color : color.light.color,
+        )}
+        style:color={hexFromArgb(
+          $theme.mode === "dark" ? color.dark.onColor : color.light.onColor,
+        )}
+      >
+        person
+      </div>
+    {/if}
+
+    <div
+      class="sender"
+      style:color={hexFromArgb(
+        $theme.mode === "dark" ? color.dark.color : color.light.color,
+      )}
+    >
+      <strong>{sender.name}</strong>
+      {#if replay || replayPlayer}
+        <div class="dots">
+          {#each new Array(3) as _, i}
+            <div
+              style:animation-delay={i * 0.2 + "s"}
+              style:background={hexFromArgb(
+                $theme.mode === "dark" ? color.dark.color : color.light.color,
+              )}
+              class="dot"
+            ></div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="content">
+    {#if event}
+      {#if event.getType() === "m.room.message"}
+        <MatrixMessageEvent {event} bind:replay />
+      {:else}
+        <details>
+          <summary>{event.getType()}</summary>
+          <pre>{JSON.stringify(event.event, null, 2)}</pre>
+        </details>
+      {/if}
+    {/if}
+    {#if replayPlayer}
+      <CharRecorder replay={replayPlayer} cursor={true} keys={true} />
+    {/if}
+  </div>
+
+  {#if event && hover}
+    <div
+      role="toolbar"
+      tabindex="0"
+      class="toolbar"
+      transition:fade={{ duration: 100 }}
+      onmouseover={() => (toolbarHover = true)}
+      onfocus={() => (toolbarHover = true)}
+      onmouseout={() => (toolbarHover = false)}
+      onblur={() => (toolbarHover = false)}
+    >
+      <button class="icon">add_reaction</button>
+      <button class="icon">reply</button>
+      {#if event.event.content?.["m.replay"]}
+        {#if replay}
+          <button class="icon" onclick={() => (replay = undefined)}>stop</button
+          >
+        {:else}
+          <button
+            class="icon"
+            onclick={() => (replay = event.event.content?.["m.replay"])}
+            >replay</button
+          >
+        {/if}
+      {/if}
+      <button class="icon">more_horiz</button>
+    </div>
+  {/if}
+
+  {#if $annotations && $annotations.length > 0}
+    <div class="reactions">
+      {#each $annotations as [reaction, events]}
+        <button class="reaction"
+          >{reaction} <span class="count">{events.size}</span></button
+        >
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  details {
+    opacity: 0.5;
+    word-wrap: break-word;
+  }
+
+  pre {
+    text-wrap: wrap;
+    word-wrap: break-word;
+  }
+
+  .toolbar {
+    position: absolute;
+    top: -26px;
+    right: 0;
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    z-index: 100;
+
+    button {
+      font-size: 16px;
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .dots {
+    display: flex;
+    gap: 2px;
+  }
+
+  @keyframes bounce {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-4px);
+    }
+  }
+
+  .dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    animation: bounce 1s infinite;
+  }
+
+  .sender,
+  .avatar {
+    margin-block: 2px 4px;
+  }
+
+  .avatar {
+    grid-area: avatar;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    translate: 0 2px;
+  }
+
+  div.avatar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .sender {
+    display: flex;
+    grid-area: sender;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .reactions {
+    grid-area: reactions;
+    margin-top: 2px;
+    display: flex;
+    gap: 4px;
+  }
+
+  .reaction {
+    border: 1px solid var(--md-sys-color-outline);
+    padding: 6px;
+    border-radius: 6px;
+    height: 24px;
+    display: flex;
+    font-size: 12px;
+
+    > .count {
+      font-size: 10px;
+    }
+  }
+
+  .event {
+    display: grid;
+    position: relative;
+    padding-inline: 0.5em;
+    margin-inline: 0.5em;
+    padding-block: 0.25em;
+    border-radius: 4px;
+
+    grid-template-areas:
+      "avatar sender date"
+      "avatar content content"
+      "none reactions reactions";
+    grid-template-columns: 32px 1fr auto;
+  }
+
+  .content {
+    grid-area: content;
+    text-wrap: wrap;
+    word-wrap: break-word;
+  }
+
+  .reactions,
+  .content,
+  .sender {
+    margin-inline: 8px;
+  }
+
+  .backdrop {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    opacity: 0.25;
+
+    background: var(--md-sys-color-surface-variant);
+
+    border-radius: 8px;
+  }
+</style>

src/lib/chat/events/MatrixMessageEvent.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import CharRecorder from "$lib/charrecorder/CharRecorder.svelte";
+  import type { Replay } from "$lib/charrecorder/core/types";
+  import type { MatrixClient, MatrixEvent } from "matrix-js-sdk";
+  import { fade } from "svelte/transition";
+  import { matrixClient } from "../chat";
+
+  let { event, replay = $bindable() }: { event: MatrixEvent; replay?: Replay } =
+    $props();
+</script>
+
+<div>
+  {#if event.event.content?.msgtype === "m.image"}
+    <img
+      src={$matrixClient.mxcUrlToHttp(event.event.content["url"])}
+      alt={event.event.content["body"]}
+    />
+  {:else}
+    <span class="content" style:opacity={replay && 0}
+      >{event.event.content?.["body"]}</span
+    >
+  {/if}
+  {#if replay}
+    <div class="replay" out:fade>
+      <CharRecorder
+        {replay}
+        cursor={true}
+        keys={true}
+        ondone={() => (replay = undefined)}
+      />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  div {
+    position: relative;
+    min-height: 1.5em;
+  }
+
+  img {
+    max-width: 100%;
+    max-height: 16em;
+    border-radius: 8px;
+  }
+
+  .content {
+    transition: opacity 0.2s;
+  }
+
+  .replay {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+</style>

src/lib/learn/stats.ts

@@ -0,0 +1,11 @@
+import { persistentWritable } from "$lib/storage";
+
+interface ChordStats {
+  level: number;
+  lastUprank: number;
+}
+
+export const chordStats = persistentWritable<Record<string, ChordStats>>(
+  "chord-stats",
+  {},
+);

src/lib/preferences.ts

@@ -6,9 +6,14 @@ export interface UserPreferences {
   autoConnect: boolean;
 }
 
-export const theme = persistentWritable("user-theme", {
+export interface UserTheme {
+  color: string;
+  mode: "light" | "dark" | "auto";
+}
+
+export const theme = persistentWritable<UserTheme>("user-theme", {
   color: "#6D81C7",
-  mode: "dark" as "light" | "dark" | "auto",
+  mode: "dark",
 });
 
 export const userPreferences = persistentWritable<UserPreferences>(

src/routes/(app)/PageTransition.svelte

@@ -56,3 +56,9 @@
     {@render children()}
   </main>
 {/if}
+
+<style lang="scss">
+  main {
+    padding: 0;
+  }
+</style>

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

@@ -1 +1,184 @@
-<h2>WIP</h2>
+<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";
+
+  let loggedIn = $state(false);
+  let ready = $state(false);
+
+  let store: IndexedDBStore;
+  let cryptoStore: IndexedDBCryptoStore;
+
+  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();
+  }
+
+  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}
+          {/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}
+
+<style lang="scss">
+  .chat {
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    > *:not(:last-child) {
+      border-right: 1px solid var(--md-sys-color-outline);
+    }
+  }
+
+  .room {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .timeline {
+    flex-grow: 1;
+  }
+
+  .rooms {
+    flex-shrink: 0;
+  }
+
+  .members {
+    width: 200px;
+    flex-shrink: 0;
+  }
+</style>

src/routes/(app)/config/chords/+page.svelte

@@ -262,9 +262,7 @@
             {/if}
             {#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord] (JSON.stringify(chord?.id))}
               {#if chord}
-                <tr>
-                  <ChordEdit {chord} onduplicate={() => (page = 0)} />
-                </tr>
+                <ChordEdit {chord} onduplicate={() => (page = 0)} />
               {/if}
             {/each}</tbody
           >
@@ -397,7 +395,7 @@
 
   table {
     height: fit-content;
-    overflow: hidden;
+    overflow-y: hidden;
     transition: all 1s ease;
   }
 </style>

src/routes/(app)/config/chords/ChordEdit.svelte

@@ -89,33 +89,37 @@
   }
 </script>
 
-<th>
-  <ChordActionEdit {chord} onsubmit={() => {}} />
-</th>
-<td>
-  <ChordPhraseEdit {chord} />
-</td>
-<td class="table-buttons">
-  {#if !chord.deleted}
-    <button transition:slide class="icon compact" onclick={remove}
-      >delete</button
-    >
-  {:else}
-    <button transition:slide class="icon compact" onclick={restore}
-      >restore_from_trash</button
-    >
-  {/if}
-  <button disabled={chord.deleted} class="icon compact" onclick={duplicate}
-    >content_copy</button
-  >
-  <button
-    class="icon compact"
-    class:disabled={chord.isApplied}
-    onclick={restore}>undo</button
-  >
-  <div class="separator"></div>
-  <button class="icon compact" onclick={share}>share</button>
-</td>
+<tr>
+  <th>
+    <ChordActionEdit {chord} onsubmit={() => {}} />
+  </th>
+  <td class="phrase-edit">
+    <ChordPhraseEdit {chord} />
+  </td>
+  <td>
+    <div class="table-buttons">
+      {#if !chord.deleted}
+        <button transition:slide class="icon compact" onclick={remove}
+          >delete</button
+        >
+      {:else}
+        <button transition:slide class="icon compact" onclick={restore}
+          >restore_from_trash</button
+        >
+      {/if}
+      <button disabled={chord.deleted} class="icon compact" onclick={duplicate}
+        >content_copy</button
+      >
+      <button
+        class="icon compact"
+        class:disabled={chord.isApplied}
+        onclick={restore}>undo</button
+      >
+      <div class="separator"></div>
+      <button class="icon compact" onclick={share}>share</button>
+    </div>
+  </td>
+</tr>
 
 <style lang="scss">
   .separator {
@@ -132,17 +136,29 @@
     transition: opacity 75ms ease;
   }
 
-  td {
+  .phrase-edit {
+    position: relative;
+  }
+
+  tr {
     position: relative;
   }
 
   .table-buttons {
     opacity: 0;
     transition: opacity 75ms ease;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(100%, -50%);
+    background: var(--md-sys-color-surface-variant);
   }
 
-  :global(tr):focus-within > .table-buttons,
-  :global(tr):hover > .table-buttons {
+  .icon {
+    font-size: 18px;
+  }
+
+  tr:hover .table-buttons {
     opacity: 1;
   }
 </style>

src/routes/(app)/config/chords/ChordEditActions.svelte

@@ -0,0 +1,21 @@
+<div class="table-buttons">
+  {#if !chord.deleted}
+    <button transition:slide class="icon compact" onclick={remove}
+      >delete</button
+    >
+  {:else}
+    <button transition:slide class="icon compact" onclick={restore}
+      >restore_from_trash</button
+    >
+  {/if}
+  <button disabled={chord.deleted} class="icon compact" onclick={duplicate}
+    >content_copy</button
+  >
+  <button
+    class="icon compact"
+    class:disabled={chord.isApplied}
+    onclick={restore}>undo</button
+  >
+  <div class="separator"></div>
+  <button class="icon compact" onclick={share}>share</button>
+</div>