chore: updated to version 0.1.4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "oxyde",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "description": "A simple Tauri chat app, built with rust, vite, and surrealdb",
   "type": "module",
   "scripts": {

src-tauri/Cargo.lock

@@ -3824,7 +3824,7 @@ dependencies = [
 
 [[package]]
 name = "oxyde"
-version = "0.1.1"
+version = "0.1.4"
 dependencies = [
  "futures-util",
  "serde",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "oxyde"
-version = "0.1.1"
+version = "0.1.4"
 description = "A simple Tauri chat app, built with rust, vite, and surrealdb"
 authors = ["qdust41"]
 edition = "2021"

src-tauri/src/commands/chat.rs

@@ -1,4 +1,5 @@
 use std::collections::HashMap;
+use std::sync::{Arc, Mutex};
 
 use futures_util::StreamExt;
 use surrealdb::types::{RecordId, RecordIdKey};
@@ -6,13 +7,35 @@ use surrealdb::Notification;
 use tauri::{AppHandle, Emitter, State};
 use uuid::Uuid;
 
-use crate::db::AppState;
 use crate::error::{into_err, AppError};
-use crate::models::{Message, MessageReaction, MessageReactionSummary, Room, User};
+use surrealdb::engine::remote::ws::Client;
+use surrealdb::Surreal;
+
+use crate::models::{Message, MessageReaction, MessageReactionSummary, MessageSnippet, Room, User};
+use crate::AppState;
 
 const DEFAULT_PAGE_SIZE: i64 = 50;
 const MAX_PAGE_SIZE: i64 = 100;
 const MAX_MESSAGE_LEN: usize = 4000;
+const MAX_CACHED_ROOMS: usize = 5;
+
+fn cache_put(
+    cache: &Arc<Mutex<HashMap<String, Vec<Message>>>>,
+    order: &Arc<Mutex<Vec<String>>>,
+    room_id: &str,
+    messages: Vec<Message>,
+) {
+    let mut c = cache.lock().unwrap();
+    let mut o = order.lock().unwrap();
+    c.insert(room_id.to_string(), messages);
+    o.retain(|id| id != room_id);
+    o.insert(0, room_id.to_string());
+    while o.len() > MAX_CACHED_ROOMS {
+        if let Some(evicted) = o.pop() {
+            c.remove(&evicted);
+        }
+    }
+}
 const MAX_ROOM_NAME_LEN: usize = 80;
 
 /// Wrapper emitted to the frontend for each LIVE query notification.
@@ -143,6 +166,22 @@ async fn hydrate_reactions(
     Ok(())
 }
 
+async fn hydrate_replies(db: &Surreal<Client>, messages: &mut [Message]) -> Result<(), String> {
+    for message in messages.iter_mut() {
+        if let Some(reply_to_id) = &message.reply_to {
+            let mut result: Vec<MessageSnippet> = db
+                .query("SELECT id, author_username, body FROM message WHERE id = $id")
+                .bind(("id", reply_to_id.clone()))
+                .await
+                .map_err(into_err)?
+                .take(0)
+                .map_err(into_err)?;
+            message.replied_to_message = result.pop();
+        }
+    }
+    Ok(())
+}
+
 async fn hydrate_direct_rooms(
     state: &State<'_, AppState>,
     rooms: &mut [Room],
@@ -422,12 +461,32 @@ pub async fn send_message(
         .take(0)
         .map_err(into_err)?;
 
-    result
+    let mut msg = result
         .pop()
-        .ok_or_else(|| into_err(AppError::NotFound("message after create".into())))
+        .ok_or_else(|| into_err(AppError::NotFound("message after create".into())))?;
+
+    hydrate_replies(&state.db, std::slice::from_mut(&mut msg)).await?;
+    Ok(msg)
+}
+
+/// Return cached messages for a room without hitting the remote DB.
+/// Returns an empty vec if the room has not been cached yet.
+#[tauri::command]
+pub async fn get_cached_messages(
+    state: State<'_, AppState>,
+    room_id: String,
+) -> Result<Vec<Message>, String> {
+    Ok(state
+        .msg_cache
+        .lock()
+        .unwrap()
+        .get(&room_id)
+        .cloned()
+        .unwrap_or_default())
 }
 
 /// Fetch a bounded page of messages in a room, oldest first.
+/// Also updates the in-process message cache.
 #[tauri::command]
 pub async fn get_messages(
     state: State<'_, AppState>,
@@ -451,11 +510,11 @@ pub async fn get_messages(
     let mut response = state
         .db
         .query(query)
-        .bind(("room_id", room_id))
+        .bind(("room_id", room_id.clone()))
         .bind(("limit", limit));
 
-    if let Some(before) = before {
+    if let Some(ref before) = before {
-        response = response.bind(("before", before));
+        response = response.bind(("before", before.clone()));
     }
 
     let mut result: Vec<Message> = response
@@ -467,6 +526,24 @@ pub async fn get_messages(
     result.reverse();
     let user = current_user(&state).await?;
     hydrate_reactions(&state, &user, &mut result).await?;
+    hydrate_replies(&state.db, &mut result).await?;
+
+    if before.is_none() {
+        cache_put(
+            &state.msg_cache,
+            &state.cache_order,
+            &room_id,
+            result.clone(),
+        );
+    } else {
+        let mut c = state.msg_cache.lock().unwrap();
+        if let Some(existing) = c.get_mut(&room_id) {
+            let mut merged = result.clone();
+            merged.extend_from_slice(existing);
+            *existing = merged;
+        }
+    }
+
     Ok(result)
 }
 
@@ -563,7 +640,8 @@ pub async fn mark_room_read(state: State<'_, AppState>, room_id: String) -> Resu
 }
 
 /// Start a LIVE query for new messages in a room.
-/// Spawns a background tokio task that emits "chat:message" Tauri events.
+/// Spawns a background tokio task that emits "chat:message" Tauri events
+/// and keeps the in-process message cache in sync.
 ///
 /// Returns a local subscription UUID — pass it to `unsubscribe_room` on cleanup.
 /// Aborting the JoinHandle drops the stream, which closes the LIVE query automatically.
@@ -574,6 +652,9 @@ pub async fn subscribe_room(
     room_id: String,
 ) -> Result<String, String> {
     let db = state.db.clone();
+    let msg_cache = Arc::clone(&state.msg_cache);
+    let cache_order = Arc::clone(&state.cache_order);
+    let room_id_cache = room_id.clone();
 
     let mut stream = db
         .query("LIVE SELECT * FROM message WHERE room = type::record('room', $room_id)")
@@ -587,11 +668,44 @@ pub async fn subscribe_room(
 
     let handle = tokio::spawn(async move {
         while let Some(Ok(notification)) = stream.next().await {
+            let action = format!("{:?}", notification.action);
+            let mut data = notification.data.clone();
+
+            if data.reply_to.is_some() {
+                let _ = hydrate_replies(&db, std::slice::from_mut(&mut data)).await;
+            }
+
+            {
+                let mut c = msg_cache.lock().unwrap();
+                let mut o = cache_order.lock().unwrap();
+                if let Some(msgs) = c.get_mut(&room_id_cache) {
+                    match action.as_str() {
+                        "Create" => msgs.push(data.clone()),
+                        "Update" => {
+                            if let Some(m) = msgs.iter_mut().find(|m| m.id == data.id) {
+                                *m = data.clone();
+                            }
+                        }
+                        "Delete" => msgs.retain(|m| m.id != data.id),
+                        _ => {}
+                    }
+                } else if action == "Create" {
+                    c.insert(room_id_cache.clone(), vec![data.clone()]);
+                    o.retain(|id| id != &room_id_cache);
+                    o.insert(0, room_id_cache.clone());
+                    while o.len() > MAX_CACHED_ROOMS {
+                        if let Some(evicted) = o.pop() {
+                            c.remove(&evicted);
+                        }
+                    }
+                }
+            }
+
             let _ = app_handle.emit(
                 "chat:message",
                 &LiveMessageEvent {
-                    action: format!("{:?}", notification.action),
+                    action,
-                    data: &notification.data,
+                    data: &data,
                 },
             );
         }

src-tauri/src/commands/user.rs

@@ -1,9 +1,10 @@
 use tauri::{AppHandle, State};
 use tauri_plugin_store::StoreExt;
 
-use crate::db::{AppState, SURREAL_ACCESS, SURREAL_DB, SURREAL_NS};
+use crate::db::{SURREAL_ACCESS, SURREAL_DB, SURREAL_NS};
 use crate::error::{into_err, AppError};
 use crate::models::{Contact, User};
+use crate::AppState;
 
 const SESSION_STORE: &str = "session.json";
 const TOKEN_KEY: &str = "token";
@@ -86,7 +87,6 @@ pub async fn signup(
     };
     let token = state.db.signup(credentials).await.map_err(into_err)?;
     let token_str = token.access.into_insecure_token();
-    *state.token.lock().unwrap() = Some(token_str.clone());
     save_token(&app_handle, &token_str)?;
 
     let mut result: Vec<User> = state
@@ -130,7 +130,6 @@ pub async fn signin(
         .map_err(into_err)?
         .access
         .into_insecure_token();
-    *state.token.lock().unwrap() = Some(token_str.clone());
     save_token(&app_handle, &token_str)?;
     Ok(token_str)
 }
@@ -139,7 +138,6 @@ pub async fn signin(
 #[tauri::command]
 pub async fn signout(state: State<'_, AppState>, app_handle: AppHandle) -> Result<(), String> {
     state.db.invalidate().await.map_err(into_err)?;
-    *state.token.lock().unwrap() = None;
     clear_token(&app_handle)?;
     Ok(())
 }
@@ -162,8 +160,6 @@ pub async fn restore_session(
         .await
     {
         Ok(_) => {
-            *state.token.lock().unwrap() = Some(token_str);
-
             let mut result: Vec<User> = state
                 .db
                 .query("SELECT * FROM $auth")
@@ -178,7 +174,6 @@ pub async fn restore_session(
         }
         Err(_) => {
             let _ = clear_token(&app_handle);
-            *state.token.lock().unwrap() = None;
             Err(AppError::Auth("session expired, please sign in again".into()).to_string())
         }
     }

src-tauri/src/db.rs

@@ -1,15 +1,11 @@
-use std::collections::HashMap;
 use std::env;
-use std::sync::{Arc, LazyLock, Mutex};
+use std::sync::LazyLock;
 
 use surrealdb::engine::remote::ws::{Client, Ws, Wss};
 use surrealdb::Surreal;
-use tokio::task::JoinHandle;
-use uuid::Uuid;
 
 use crate::error::AppError;
 
-// This should set the env variable correctly both during compile time and runtime (for development).
 pub static SURREAL_URL: LazyLock<String> = LazyLock::new(|| {
     option_env!("SURREAL_URL")
         .map(str::to_string)
@@ -33,19 +29,6 @@ pub static SURREAL_ACCESS: LazyLock<String> = LazyLock::new(|| {
         .unwrap_or_else(|| env::var("SURREAL_ACCESS").unwrap_or_else(|_| "account".to_string()))
 });
 
-pub struct AppState {
-    /// Long-lived authenticated WebSocket connection to SurrealDB.
-    pub db: Arc<Surreal<Client>>,
-    /// JWT token from Record Auth signin. Used to re-authenticate on reconnect.
-    /// std::sync::Mutex is intentional: lock is acquired and released before any .await.
-    pub token: Mutex<Option<String>>,
-    /// Active LIVE query tasks keyed by their SurrealDB LIVE query UUID.
-    /// Abort a handle + KILL the query to clean up.
-    /// std::sync::Mutex is intentional: guards are never held across .await points.
-    /// If a future command needs to lock across .await, switch to tokio::sync::Mutex.
-    pub subscriptions: Mutex<HashMap<Uuid, JoinHandle<()>>>,
-}
-
 /// Connect to SurrealDB over WebSocket and select namespace/database.
 /// URL may include protocol prefix: `ws://`, `wss://`, `http://`, or `https://`.
 /// `wss://` and `https://` use TLS; others use plain WebSocket.

src-tauri/src/lib.rs

@@ -1,14 +1,30 @@
 use std::collections::HashMap;
 use std::sync::{Arc, Mutex};
 
+use surrealdb::engine::remote::ws::Client;
+use surrealdb::Surreal;
 use tauri::Manager;
+use tokio::task::JoinHandle;
+use uuid::Uuid;
 
 mod commands;
 mod db;
 mod error;
 mod models;
 
-use db::{init_db, AppState, SURREAL_DB, SURREAL_NS, SURREAL_URL};
+use db::{init_db, SURREAL_DB, SURREAL_NS, SURREAL_URL};
+use models::Message;
+
+pub struct AppState {
+    pub db: Arc<Surreal<Client>>,
+    /// In-process message cache keyed by room_id string. Arc so the live-event
+    /// task in subscribe_room can hold a reference without borrowing AppState.
+    pub msg_cache: Arc<Mutex<HashMap<String, Vec<Message>>>>,
+    /// LRU order of cached room IDs (front = most recent). Evicts beyond 5.
+    pub cache_order: Arc<Mutex<Vec<String>>>,
+    /// std::sync::Mutex is intentional: guards are never held across .await points.
+    pub subscriptions: Mutex<HashMap<Uuid, JoinHandle<()>>>,
+}
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
@@ -28,7 +44,8 @@ pub fn run() {
 
                 let state = AppState {
                     db: Arc::new(surreal),
-                    token: Mutex::new(None),
+                    msg_cache: Arc::new(Mutex::new(HashMap::new())),
+                    cache_order: Arc::new(Mutex::new(Vec::new())),
                     subscriptions: Mutex::new(HashMap::new()),
                 };
 
@@ -52,6 +69,7 @@ pub fn run() {
             commands::chat::get_or_create_direct_room,
             commands::chat::send_message,
             commands::chat::get_messages,
+            commands::chat::get_cached_messages,
             commands::chat::delete_message,
             commands::chat::edit_message,
             commands::chat::toggle_reaction,

src-tauri/src/models.rs

@@ -37,6 +37,13 @@ pub struct RoomMember {
     pub muted: Option<bool>,
 }
 
+#[derive(Debug, Clone, Serialize, Deserialize, SurrealValue)]
+pub struct MessageSnippet {
+    pub id: RecordId,
+    pub author_username: Option<String>,
+    pub body: String,
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize, SurrealValue)]
 pub struct Message {
     pub id: RecordId,
@@ -48,6 +55,7 @@ pub struct Message {
     pub updated: Option<Datetime>,
     pub deleted: Option<bool>,
     pub reply_to: Option<RecordId>,
+    pub replied_to_message: Option<MessageSnippet>,
     pub reactions: Option<Vec<MessageReactionSummary>>,
 }
 

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "oxyde",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "identifier": "com.jimweaver.oxyde",
   "build": {
     "beforeDevCommand": "pnpm dev",

src/app.html

@@ -1,19 +1,23 @@
 <!doctype html>
 <html lang="en">
-  <head>
+    <head>
-    <meta charset="utf-8" />
+        <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Oxyde</title>
+        <title>Oxyde</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+        <link
-    <link
+            rel="preconnect"
-      href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Martian+Mono:wght@300;400;500;600&display=swap"
+            href="https://fonts.gstatic.com"
-      rel="stylesheet"
+            crossorigin=""
-    />
+        />
-    %sveltekit.head%
+        <link
-  </head>
+            href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Martian+Mono:wght@300;400;500;600&display=swap"
-  <body data-sveltekit-preload-data="hover">
+            rel="stylesheet"
-    <div style="display: contents">%sveltekit.body%</div>
+        />
-  </body>
+        %sveltekit.head%
+    </head>
+    <body data-sveltekit-preload-data="hover">
+        <div style="display: contents">%sveltekit.body%</div>
+    </body>
 </html>

src/lib/components/AuthCard.svelte

@@ -1,119 +1,205 @@
 <script lang="ts">
-  interface Props {
+    interface Props {
-    authMode: 'signin' | 'signup';
+        authMode: "signin" | "signup";
-    err: string;
+        err: string;
-    fEmail: string;
+        fEmail: string;
-    fPass: string;
+        fPass: string;
-    fUser: string;
+        fUser: string;
-    onSignin: () => void;
+        onSignin: () => void;
-    onSignup: () => void;
+        onSignup: () => void;
-    onToggleMode: () => void;
+        onToggleMode: () => void;
-  }
+    }
 
-  let {
+    let {
-    authMode,
+        authMode,
-    err,
+        err,
-    fEmail = $bindable(),
+        fEmail = $bindable(),
-    fPass  = $bindable(),
+        fPass = $bindable(),
-    fUser  = $bindable(),
+        fUser = $bindable(),
-    onSignin,
+        onSignin,
-    onSignup,
+        onSignup,
-    onToggleMode,
+        onToggleMode,
-  }: Props = $props();
+    }: Props = $props();
 </script>
 
 <div class="auth-wrap">
-  <div class="auth-card">
+    <div class="auth-card">
-    <h1 class="auth-brand">OXYDE</h1>
+        <h1 class="auth-brand">OXYDE</h1>
-    <p class="auth-tagline">realtime · native · focused</p>
+        <p class="auth-tagline">realtime · native · focused</p>
 
-    {#if err}
+        {#if err}
-      <div class="err-banner">{err}</div>
+            <div class="err-banner">{err}</div>
-    {/if}
+        {/if}
 
-    {#if authMode === 'signin'}
+        {#if authMode === "signin"}
-      <div class="field-stack">
+            <div class="field-stack">
-        <input class="field" type="email" placeholder="email" bind:value={fEmail} autocomplete="email" />
+                <input
-        <input class="field" type="password" placeholder="password" bind:value={fPass}
+                    class="field"
-          onkeydown={(e) => e.key === 'Enter' && onSignin()} autocomplete="current-password" />
+                    type="email"
-        <button class="btn-primary" onclick={onSignin}>sign in</button>
+                    placeholder="email"
-      </div>
+                    bind:value={fEmail}
-      <button class="btn-ghost" onclick={onToggleMode}>
+                    autocomplete="email"
-        no account? create one →
+                />
-      </button>
+                <input
-    {:else}
+                    class="field"
-      <div class="field-stack">
+                    type="password"
-        <input class="field" type="text"     placeholder="username" bind:value={fUser} autocomplete="username" />
+                    placeholder="password"
-        <input class="field" type="email"    placeholder="email"    bind:value={fEmail} autocomplete="email" />
+                    bind:value={fPass}
-        <input class="field" type="password" placeholder="password" bind:value={fPass}
+                    onkeydown={(e) => e.key === "Enter" && onSignin()}
-          onkeydown={(e) => e.key === 'Enter' && onSignup()} autocomplete="new-password" />
+                    autocomplete="current-password"
-        <button class="btn-primary" onclick={onSignup}>create account</button>
+                />
-      </div>
+                <button class="btn-primary" onclick={onSignin}>sign in</button>
-      <button class="btn-ghost" onclick={onToggleMode}>
+            </div>
-        ← back to sign in
+            <button class="btn-ghost" onclick={onToggleMode}>
-      </button>
+                no account? create one →
-    {/if}
+            </button>
-  </div>
+        {:else}
+            <div class="field-stack">
+                <input
+                    class="field"
+                    type="text"
+                    placeholder="username"
+                    bind:value={fUser}
+                    autocomplete="username"
+                />
+                <input
+                    class="field"
+                    type="email"
+                    placeholder="email"
+                    bind:value={fEmail}
+                    autocomplete="email"
+                />
+                <input
+                    class="field"
+                    type="password"
+                    placeholder="password"
+                    bind:value={fPass}
+                    onkeydown={(e) => e.key === "Enter" && onSignup()}
+                    autocomplete="new-password"
+                />
+                <button class="btn-primary" onclick={onSignup}
+                    >create account</button
+                >
+            </div>
+            <button class="btn-ghost" onclick={onToggleMode}>
+                ← back to sign in
+            </button>
+        {/if}
+    </div>
 </div>
 
 <style>
-  .auth-wrap {
+    .auth-wrap {
-    display: flex; align-items: center; justify-content: center;
+        display: flex;
-    height: 100vh; background: var(--bg);
+        align-items: center;
-    animation: rise 0.28s ease;
+        justify-content: center;
-  }
+        height: 100vh;
-  @keyframes rise {
+        background: var(--bg);
-    from { opacity: 0; transform: translateY(10px); }
+        animation: rise 0.28s ease;
-    to   { opacity: 1; transform: translateY(0); }
+    }
-  }
+    @keyframes rise {
-  .auth-card {
+        from {
-    width: 360px; padding: 52px 44px;
+            opacity: 0;
-    background: var(--sidebar-bg);
+            transform: translateY(10px);
-    border: 1px solid var(--border);
+        }
-    border-radius: var(--r);
+        to {
-  }
+            opacity: 1;
-  .auth-brand {
+            transform: translateY(0);
-    font-family: 'Cormorant Garamond', Georgia, serif;
+        }
-    font-size: 52px; font-weight: 700;
+    }
-    color: var(--accent); letter-spacing: 0.22em;
+    .auth-card {
-    text-align: center;
+        width: 360px;
-  }
+        padding: 52px 44px;
-  .auth-tagline {
+        background: var(--sidebar-bg);
-    text-align: center; color: var(--muted);
+        border: 1px solid var(--border);
-    font-size: 9.5px; letter-spacing: 0.15em;
+        border-radius: var(--r);
-    margin-top: 8px; margin-bottom: 36px;
+    }
-  }
+    .auth-brand {
-  .err-banner {
+        font-family: "Cormorant Garamond", Georgia, serif;
-    padding: 10px 14px; margin-bottom: 18px;
+        font-size: 52px;
-    background: rgba(184, 48, 48, 0.10);
+        font-weight: 700;
-    border: 1px solid rgba(184, 48, 48, 0.28);
+        color: var(--accent);
-    border-radius: var(--r);
+        letter-spacing: 0.22em;
-    color: #d98080; font-size: 11px; line-height: 1.5;
+        text-align: center;
-  }
+    }
-  .field-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
+    .auth-tagline {
-  .field {
+        text-align: center;
-    width: 100%; padding: 10px 14px;
+        color: var(--muted);
-    background: var(--bg);
+        font-size: 9.5px;
-    border: 1px solid var(--border); border-radius: var(--r);
+        letter-spacing: 0.15em;
-    color: var(--text); font-family: inherit; font-size: 12px;
+        margin-top: 8px;
-    outline: none; transition: border-color 0.12s;
+        margin-bottom: 36px;
-  }
+    }
-  .field:focus { border-color: var(--accent); }
+    .err-banner {
-  .field::placeholder { color: var(--muted); }
+        padding: 10px 14px;
-  .btn-primary {
+        margin-bottom: 18px;
-    width: 100%; padding: 11px;
+        background: rgba(184, 48, 48, 0.1);
-    background: var(--accent); border: none; border-radius: var(--r);
+        border: 1px solid rgba(184, 48, 48, 0.28);
-    color: #fff; font-family: inherit; font-size: 12px;
+        border-radius: var(--r);
-    font-weight: 500; letter-spacing: 0.07em;
+        color: #d98080;
-    cursor: pointer; transition: opacity 0.12s, transform 0.08s;
+        font-size: 11px;
-  }
+        line-height: 1.5;
-  .btn-primary:hover  { opacity: 0.85; }
+    }
-  .btn-primary:active { transform: scale(0.98); }
+    .field-stack {
-  .btn-ghost {
+        display: flex;
-    display: block; width: 100%; text-align: center;
+        flex-direction: column;
-    padding: 9px; background: none; border: none;
+        gap: 10px;
-    color: var(--muted); font-family: inherit; font-size: 11px;
+        margin-bottom: 14px;
-    cursor: pointer; transition: color 0.12s;
+    }
-  }
+    .field {
-  .btn-ghost:hover { color: var(--text-2); }
+        width: 100%;
+        padding: 10px 14px;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: var(--r);
+        color: var(--text);
+        font-family: inherit;
+        font-size: 12px;
+        outline: none;
+        transition: border-color 0.12s;
+    }
+    .field:focus {
+        border-color: var(--accent);
+    }
+    .field::placeholder {
+        color: var(--muted);
+    }
+    .btn-primary {
+        width: 100%;
+        padding: 11px;
+        background: var(--accent);
+        border: none;
+        border-radius: var(--r);
+        color: #fff;
+        font-family: inherit;
+        font-size: 12px;
+        font-weight: 500;
+        letter-spacing: 0.07em;
+        cursor: pointer;
+        transition:
+            opacity 0.12s,
+            transform 0.08s;
+    }
+    .btn-primary:hover {
+        opacity: 0.85;
+    }
+    .btn-primary:active {
+        transform: scale(0.98);
+    }
+    .btn-ghost {
+        display: block;
+        width: 100%;
+        text-align: center;
+        padding: 9px;
+        background: none;
+        border: none;
+        color: var(--muted);
+        font-family: inherit;
+        font-size: 11px;
+        cursor: pointer;
+        transition: color 0.12s;
+    }
+    .btn-ghost:hover {
+        color: var(--text-2);
+    }
 </style>

src/lib/components/ChatMain.svelte

@@ -1,379 +1,631 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+    import { tick } from "svelte";
-  import type { User, Room, Message, ContextMenuItem } from '$lib/types';
+    import type { User, Room, Message, ContextMenuItem } from "$lib/types";
-  import { full, sid, fmt } from '$lib/helpers';
+    import { full, sid, fmt } from "$lib/helpers";
 
-  interface Props {
+    interface Props {
-    activeRoom: Room | null;
+        activeRoom: Room | null;
-    messages: Message[];
+        messages: Message[];
-    user: User | null;
+        user: User | null;
-    err: string;
+        err: string;
-    hasOlderMessages: boolean;
+        hasOlderMessages: boolean;
-    isLoadingOlder: boolean;
+        isLoadingOlder: boolean;
-    fMsg: string;
+        fMsg: string;
-    replyTo: Message | null;
+        replyTo: Message | null;
-    onLoadOlderMessages: () => void;
+        onLoadOlderMessages: () => void;
-    onSendMessage: () => void;
+        onSendMessage: () => void;
-    onDeleteMessage: (msgId: string) => void;
+        onDeleteMessage: (msgId: string) => void;
-    onEditMessage: (msgId: string, body: string) => void;
+        onEditMessage: (msgId: string, body: string) => void;
-    onToggleReaction: (msgId: string, emoji: string) => void;
+        onToggleReaction: (msgId: string, emoji: string) => void;
-    onShowMenu: (e: MouseEvent, items: ContextMenuItem[]) => void;
+        onShowMenu: (e: MouseEvent, items: ContextMenuItem[]) => void;
-  }
+    }
 
-  let {
+    let {
-    activeRoom,
+        activeRoom,
-    messages,
+        messages,
-    user,
+        user,
-    err,
+        err,
-    hasOlderMessages,
+        hasOlderMessages,
-    isLoadingOlder,
+        isLoadingOlder,
-    fMsg      = $bindable(),
+        fMsg = $bindable(),
-    replyTo   = $bindable(),
+        replyTo = $bindable(),
-    onLoadOlderMessages,
+        onLoadOlderMessages,
-    onSendMessage,
+        onSendMessage,
-    onDeleteMessage,
+        onDeleteMessage,
-    onEditMessage,
+        onEditMessage,
-    onToggleReaction,
+        onToggleReaction,
-    onShowMenu,
+        onShowMenu,
-  }: Props = $props();
+    }: Props = $props();
 
-  let msgEl: HTMLElement;
+    let msgEl: HTMLElement;
-  let inputEl: HTMLTextAreaElement;
+    let inputEl: HTMLTextAreaElement;
-  let editingId = $state<string | null>(null);
+    let editingId = $state<string | null>(null);
-  let editBody = $state('');
+    let editBody = $state("");
 
-  function scrollBottom() {
+    function scrollBottom() {
-    tick().then(() => { if (msgEl) msgEl.scrollTop = msgEl.scrollHeight; });
+        tick().then(() => {
-  }
+            if (msgEl) msgEl.scrollTop = msgEl.scrollHeight;
+        });
+    }
 
-  function autoResize() {
+    function autoResize() {
-    if (!inputEl) return;
+        if (!inputEl) return;
-    inputEl.style.height = 'auto';
+        inputEl.style.height = "auto";
-    inputEl.style.height = Math.min(inputEl.scrollHeight, 160) + 'px';
+        inputEl.style.height = Math.min(inputEl.scrollHeight, 160) + "px";
-  }
+    }
 
-  function onKey(e: KeyboardEvent) {
+    function onKey(e: KeyboardEvent) {
-    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); onSendMessage(); }
+        if (e.key === "Enter" && !e.shiftKey) {
-  }
+            e.preventDefault();
+            onSendMessage();
+        }
+    }
 
-  function roomLabel(room: Room | null): string {
+    function roomLabel(room: Room | null): string {
-    if (!room) return 'select a room';
+        if (!room) return "select a room";
-    if (room.kind === 'direct') return room.other_user?.username ?? room.name ?? 'direct message';
+        if (room.kind === "direct")
-    return room.name ?? 'untitled';
+            return room.other_user?.username ?? room.name ?? "direct message";
-  }
+        return room.name ?? "untitled";
+    }
 
-  function isGrouped(i: number): boolean {
+    function isGrouped(i: number): boolean {
-    if (i === 0) return false;
+        if (i === 0) return false;
-    if (messages[i].deleted || messages[i - 1].deleted) return false;
+        if (messages[i].deleted || messages[i - 1].deleted) return false;
-    return full(messages[i].author) === full(messages[i - 1].author);
+        return full(messages[i].author) === full(messages[i - 1].author);
-  }
+    }
 
-  function beginEdit(msg: Message) {
+    function beginEdit(msg: Message) {
-    editingId = full(msg.id);
+        editingId = full(msg.id);
-    editBody = msg.body;
+        editBody = msg.body;
-  }
+    }
 
-  function submitEdit(msg: Message) {
+    function submitEdit(msg: Message) {
-    if (!editBody.trim()) return;
+        if (!editBody.trim()) return;
-    onEditMessage(full(msg.id), editBody.trim());
+        onEditMessage(full(msg.id), editBody.trim());
-    editingId = null;
+        editingId = null;
-    editBody = '';
+        editBody = "";
-  }
+    }
 
-  function quickReact(msg: Message) {
+    function quickReact(msg: Message) {
-    onToggleReaction(full(msg.id), '+1');
+        onToggleReaction(full(msg.id), "+1");
-  }
+    }
 
-  // Scroll to bottom when messages change
+    // Scroll to bottom when messages change
-  $effect(() => {
+    $effect(() => {
-    messages.length; // track length
+        messages.length; // track length
-    scrollBottom();
+        scrollBottom();
-  });
+    });
 
-  // Reset textarea height after message is cleared
+    // Reset textarea height after message is cleared
-  $effect(() => {
+    $effect(() => {
-    if (fMsg === '') autoResize();
+        if (fMsg === "") autoResize();
-  });
+    });
 </script>
 
 <main class="main">
+    <!-- Channel header -->
+    <header class="channel-header">
+        <span class="ch-hash">{activeRoom?.kind === "direct" ? "@" : "#"}</span>
+        <span class="ch-name">{roomLabel(activeRoom)}</span>
+        {#if err}<span class="header-err">{err}</span>{/if}
+    </header>
 
-  <!-- Channel header -->
+    <!-- Message list -->
-  <header class="channel-header">
+    <div class="messages" bind:this={msgEl}>
-    <span class="ch-hash">{activeRoom?.kind === 'direct' ? '@' : '#'}</span>
+        {#if !activeRoom}
-    <span class="ch-name">{roomLabel(activeRoom)}</span>
+            <div class="empty-state">
-    {#if err}<span class="header-err">{err}</span>{/if}
+                <span class="empty-icon">#</span>
-  </header>
+                <p>select a room to start chatting</p>
-
-  <!-- Message list -->
-  <div class="messages" bind:this={msgEl}>
-    {#if !activeRoom}
-      <div class="empty-state">
-        <span class="empty-icon">#</span>
-        <p>select a room to start chatting</p>
-      </div>
-    {:else if messages.length === 0}
-      <div class="empty-state">
-        <span class="empty-icon">#</span>
-        <p>no messages yet — say hello</p>
-      </div>
-    {:else}
-      {#if hasOlderMessages}
-        <button class="load-older" onclick={onLoadOlderMessages} disabled={isLoadingOlder}>
-          {isLoadingOlder ? 'loading...' : 'load older messages'}
-        </button>
-      {/if}
-      {#each messages as msg, i (full(msg.id))}
-        <div
-          class="msg"
-          class:grouped={isGrouped(i)}
-          role="listitem"
-          oncontextmenu={(e) => {
-            const items: ContextMenuItem[] = [
-              { label: 'Copy message', action: () => navigator.clipboard.writeText(msg.body) },
-              { label: 'Reply', action: () => replyTo = msg },
-              { label: 'React +1', action: () => onToggleReaction(full(msg.id), '+1') },
-            ];
-            if (user && full(msg.author) === full(user.id) && !msg.deleted) {
-              items.push({ label: 'Edit message', action: () => beginEdit(msg) });
-              items.push({ label: 'Delete message', action: () => onDeleteMessage(full(msg.id)) });
-            }
-            onShowMenu(e, items);
-          }}
-        >
-          {#if !isGrouped(i)}
-            <div class="msg-header">
-              <span
-                class="msg-author"
-                role="button"
-                tabindex="0"
-                oncontextmenu={(e) => { e.stopPropagation(); onShowMenu(e, [
-                  { label: 'Copy username', action: () => navigator.clipboard.writeText(msg.author_username ?? sid(msg.author)) },
-                  { label: 'Copy user ID',  action: () => navigator.clipboard.writeText(sid(msg.author)) },
-                ]); }}
-              >{msg.author_username ?? sid(msg.author)}</span>
-              <span class="msg-time">{fmt(msg.created)}</span>
-              {#if msg.updated}<span class="msg-time">edited</span>{/if}
             </div>
-          {/if}
+        {:else if messages.length === 0}
-          {#if msg.reply_to}
+            <div class="empty-state">
-            <div class="reply-chip">replying to {sid(msg.reply_to)}</div>
+                <span class="empty-icon">#</span>
-          {/if}
+                <p>no messages yet — say hello</p>
-          {#if !msg.deleted}
-            <div class="msg-actions" aria-label="message actions">
-              <button title="Reply" onclick={() => replyTo = msg}>reply</button>
-              <button title="React" onclick={() => quickReact(msg)}>+1</button>
-              {#if user && full(msg.author) === full(user.id)}
-                <button title="Edit" onclick={() => beginEdit(msg)}>edit</button>
-              {/if}
             </div>
-          {/if}
+        {:else}
-          {#if msg.deleted}
+            {#if hasOlderMessages}
-            <p class="msg-body deleted">message deleted</p>
-          {:else if editingId === full(msg.id)}
-            <div class="edit-row">
-              <textarea class="edit-input" bind:value={editBody} rows="2"></textarea>
-              <button class="mini-btn" onclick={() => submitEdit(msg)}>save</button>
-              <button class="mini-btn ghost" onclick={() => editingId = null}>cancel</button>
-            </div>
-          {:else}
-            <p class="msg-body">{msg.body}</p>
-          {/if}
-          {#if msg.reactions?.length}
-            <div class="reactions">
-              {#each msg.reactions as reaction}
                 <button
-                  class="reaction"
+                    class="load-older"
-                  class:mine={reaction.reacted_by_me}
+                    onclick={onLoadOlderMessages}
-                  onclick={() => onToggleReaction(full(msg.id), reaction.emoji)}
+                    disabled={isLoadingOlder}
                 >
-                  {reaction.emoji} {reaction.count}
+                    {isLoadingOlder ? "loading..." : "load older messages"}
                 </button>
-              {/each}
+            {/if}
-            </div>
+            {#each messages as msg, i (full(msg.id))}
-          {/if}
+                <div
-        </div>
+                    class="msg"
-      {/each}
+                    class:grouped={isGrouped(i)}
-    {/if}
+                    role="listitem"
-  </div>
+                    oncontextmenu={(e) => {
-
+                        const items: ContextMenuItem[] = [
-  <!-- Input bar -->
+                            {
-  {#if replyTo}
+                                label: "Copy message",
-    <div class="reply-bar">
+                                action: () =>
-      <span>replying to {replyTo.author_username ?? sid(replyTo.author)}</span>
+                                    navigator.clipboard.writeText(msg.body),
-      <button class="mini-btn ghost" onclick={() => replyTo = null}>cancel</button>
+                            },
+                            { label: "Reply", action: () => (replyTo = msg) },
+                            {
+                                label: "React +1",
+                                action: () =>
+                                    onToggleReaction(full(msg.id), "+1"),
+                            },
+                        ];
+                        if (
+                            user &&
+                            full(msg.author) === full(user.id) &&
+                            !msg.deleted
+                        ) {
+                            items.push({
+                                label: "Edit message",
+                                action: () => beginEdit(msg),
+                            });
+                            items.push({
+                                label: "Delete message",
+                                action: () => onDeleteMessage(full(msg.id)),
+                            });
+                        }
+                        onShowMenu(e, items);
+                    }}
+                >
+                    {#if !isGrouped(i)}
+                        <div class="msg-header">
+                            <span
+                                class="msg-author"
+                                role="button"
+                                tabindex="0"
+                                oncontextmenu={(e) => {
+                                    e.stopPropagation();
+                                    onShowMenu(e, [
+                                        {
+                                            label: "Copy username",
+                                            action: () =>
+                                                navigator.clipboard.writeText(
+                                                    msg.author_username ??
+                                                        sid(msg.author),
+                                                ),
+                                        },
+                                        {
+                                            label: "Copy user ID",
+                                            action: () =>
+                                                navigator.clipboard.writeText(
+                                                    sid(msg.author),
+                                                ),
+                                        },
+                                    ]);
+                                }}
+                                >{msg.author_username ?? sid(msg.author)}</span
+                            >
+                            <span class="msg-time">{fmt(msg.created)}</span>
+                            {#if msg.updated}<span class="msg-time">edited</span
+                                >{/if}
+                        </div>
+                    {/if}
+                    {#if msg.reply_to}
+                        <div class="reply-chip">
+                            {#if msg.replied_to_message}
+                                replying to {msg.replied_to_message.author_username ?? 'unknown'}: {msg.replied_to_message.body.length > 80 ? msg.replied_to_message.body.slice(0, 80) + '…' : msg.replied_to_message.body}
+                            {:else}
+                                replying to message
+                            {/if}
+                        </div>
+                    {/if}
+                    {#if !msg.deleted}
+                        <div class="msg-actions" aria-label="message actions">
+                            <button
+                                title="Reply"
+                                onclick={() => (replyTo = msg)}>reply</button
+                            >
+                            <button
+                                title="React"
+                                onclick={() => quickReact(msg)}>+1</button
+                            >
+                            {#if user && full(msg.author) === full(user.id)}
+                                <button
+                                    title="Edit"
+                                    onclick={() => beginEdit(msg)}>edit</button
+                                >
+                            {/if}
+                        </div>
+                    {/if}
+                    {#if msg.deleted}
+                        <p class="msg-body deleted">message deleted</p>
+                    {:else if editingId === full(msg.id)}
+                        <div class="edit-row">
+                            <textarea
+                                class="edit-input"
+                                bind:value={editBody}
+                                rows="2"
+                            ></textarea>
+                            <button
+                                class="mini-btn"
+                                onclick={() => submitEdit(msg)}>save</button
+                            >
+                            <button
+                                class="mini-btn ghost"
+                                onclick={() => (editingId = null)}
+                                >cancel</button
+                            >
+                        </div>
+                    {:else}
+                        <p class="msg-body">{msg.body}</p>
+                    {/if}
+                    {#if msg.reactions?.length}
+                        <div class="reactions">
+                            {#each msg.reactions as reaction}
+                                <button
+                                    class="reaction"
+                                    class:mine={reaction.reacted_by_me}
+                                    onclick={() =>
+                                        onToggleReaction(
+                                            full(msg.id),
+                                            reaction.emoji,
+                                        )}
+                                >
+                                    {reaction.emoji}
+                                    {reaction.count}
+                                </button>
+                            {/each}
+                        </div>
+                    {/if}
+                </div>
+            {/each}
+        {/if}
     </div>
-  {/if}
-  <div class="input-bar">
-    <textarea
-      bind:this={inputEl}
-      class="msg-input"
-      placeholder={activeRoom ? `message ${activeRoom.kind === 'direct' ? '@' : '#'}${roomLabel(activeRoom)}` : 'select a room first'}
-      bind:value={fMsg}
-      onkeydown={onKey}
-      oninput={autoResize}
-      disabled={!activeRoom}
-      rows="1"
-    ></textarea>
-    <button title="" class="send-btn" onclick={onSendMessage} disabled={!activeRoom || !fMsg.trim()}>
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-        <line x1="22" y1="2" x2="11" y2="13"/>
-        <polygon points="22 2 15 22 11 13 2 9 22 2"/>
-      </svg>
-    </button>
-  </div>
 
+    <!-- Input bar -->
+    {#if replyTo}
+        <div class="reply-bar">
+            <span
+                >replying to {replyTo.author_username ??
+                    sid(replyTo.author)}</span
+            >
+            <button class="mini-btn ghost" onclick={() => (replyTo = null)}
+                >cancel</button
+            >
+        </div>
+    {/if}
+    <div class="input-bar">
+        <textarea
+            bind:this={inputEl}
+            class="msg-input"
+            placeholder={activeRoom
+                ? `message ${activeRoom.kind === "direct" ? "@" : "#"}${roomLabel(activeRoom)}`
+                : "select a room first"}
+            bind:value={fMsg}
+            onkeydown={onKey}
+            oninput={autoResize}
+            disabled={!activeRoom}
+            rows="1"
+        ></textarea>
+        <button
+            title=""
+            class="send-btn"
+            onclick={onSendMessage}
+            disabled={!activeRoom || !fMsg.trim()}
+        >
+            <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+            >
+                <line x1="22" y1="2" x2="11" y2="13" />
+                <polygon points="22 2 15 22 11 13 2 9 22 2" />
+            </svg>
+        </button>
+    </div>
 </main>
 
 <style>
-  .main {
+    .main {
-    flex: 1; display: flex; flex-direction: column;
+        flex: 1;
-    overflow: hidden; background: var(--bg);
+        display: flex;
-  }
+        flex-direction: column;
-  .channel-header {
+        overflow: hidden;
-    display: flex; align-items: center; gap: 9px;
+        background: var(--bg);
-    padding: 0 24px; height: 50px;
+    }
-    border-bottom: 1px solid var(--border);
+    .channel-header {
-    flex-shrink: 0;
+        display: flex;
-  }
+        align-items: center;
-  .ch-hash { font-size: 17px; color: var(--muted); }
+        gap: 9px;
-  .ch-name { font-size: 14px; font-weight: 500; color: var(--text); }
+        padding: 0 24px;
-  .header-err {
+        height: 50px;
-    margin-left: auto; font-size: 10px; color: #d98080;
+        border-bottom: 1px solid var(--border);
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+        flex-shrink: 0;
-    max-width: 280px;
+    }
-  }
+    .ch-hash {
+        font-size: 17px;
+        color: var(--muted);
+    }
+    .ch-name {
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--text);
+    }
+    .header-err {
+        margin-left: auto;
+        font-size: 10px;
+        color: #d98080;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 280px;
+    }
 
-  .messages {
+    .messages {
-    flex: 1; overflow-y: auto;
+        flex: 1;
-    padding: 20px 24px 8px;
+        overflow-y: auto;
-    display: flex; flex-direction: column;
+        padding: 20px 24px 8px;
-  }
+        display: flex;
-  .messages::-webkit-scrollbar { width: 4px; }
+        flex-direction: column;
-  .messages::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 2px; }
+    }
-  .messages::-webkit-scrollbar-track { background: transparent; }
+    .messages::-webkit-scrollbar {
-  .load-older {
+        width: 4px;
-    align-self: center; margin-bottom: 12px; padding: 6px 10px;
+    }
-    background: var(--surface); border: 1px solid var(--border);
+    .messages::-webkit-scrollbar-thumb {
-    border-radius: var(--r); color: var(--text-2);
+        background: var(--surface-2);
-    font-family: inherit; font-size: 11px; cursor: pointer;
+        border-radius: 2px;
-  }
+    }
-  .load-older:hover { border-color: var(--accent); color: var(--text); }
+    .messages::-webkit-scrollbar-track {
-  .load-older:disabled { opacity: 0.5; cursor: wait; }
+        background: transparent;
+    }
+    .load-older {
+        align-self: center;
+        margin-bottom: 12px;
+        padding: 6px 10px;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--r);
+        color: var(--text-2);
+        font-family: inherit;
+        font-size: 11px;
+        cursor: pointer;
+    }
+    .load-older:hover {
+        border-color: var(--accent);
+        color: var(--text);
+    }
+    .load-older:disabled {
+        opacity: 0.5;
+        cursor: wait;
+    }
 
-  .empty-state {
+    .empty-state {
-    flex: 1; display: flex; flex-direction: column;
+        flex: 1;
-    align-items: center; justify-content: center;
+        display: flex;
-    gap: 12px; color: var(--muted);
+        flex-direction: column;
-  }
+        align-items: center;
-  .empty-icon {
+        justify-content: center;
-    font-size: 32px; opacity: 0.2;
+        gap: 12px;
-    font-family: 'Cormorant Garamond', Georgia, serif;
+        color: var(--muted);
-  }
+    }
-  .empty-state p { font-size: 11px; letter-spacing: 0.07em; }
+    .empty-icon {
+        font-size: 32px;
+        opacity: 0.2;
+        font-family: "Cormorant Garamond", Georgia, serif;
+    }
+    .empty-state p {
+        font-size: 11px;
+        letter-spacing: 0.07em;
+    }
 
-  .msg { padding: 1px 0; }
+    .msg {
-  .msg:hover .msg-actions,
+        padding: 1px 0;
-  .msg:focus-within .msg-actions { opacity: 1; pointer-events: auto; }
+    }
-  .msg.grouped { padding-top: 1px; }
+    .msg:hover .msg-actions,
+    .msg:focus-within .msg-actions {
+        opacity: 1;
+        pointer-events: auto;
+    }
+    .msg.grouped {
+        padding-top: 1px;
+    }
 
-  .msg-header {
+    .msg-header {
-    display: flex; align-items: baseline; gap: 9px;
+        display: flex;
-    margin-top: 16px; margin-bottom: 3px;
+        align-items: baseline;
-  }
+        gap: 9px;
-  .msg-author { font-size: 12px; font-weight: 500; color: var(--accent); }
+        margin-top: 16px;
-  .msg-time   { font-size: 9.5px; color: var(--muted); }
+        margin-bottom: 3px;
+    }
+    .msg-author {
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--accent);
+    }
+    .msg-time {
+        font-size: 9.5px;
+        color: var(--muted);
+    }
 
-  .msg-body {
+    .msg-body {
-    color: var(--text); font-size: 13px;
+        color: var(--text);
-    line-height: 1.6; white-space: pre-wrap; word-break: break-word;
+        font-size: 13px;
-    animation: msgIn 0.14s ease;
+        line-height: 1.6;
-  }
+        white-space: pre-wrap;
-  .msg.grouped .msg-body { color: var(--text-2); }
+        word-break: break-word;
-  .msg-body.deleted { color: var(--muted); font-style: italic; }
+        animation: msgIn 0.14s ease;
-  .msg-actions {
+    }
-    float: right; display: flex; gap: 4px; margin-left: 8px;
+    .msg.grouped .msg-body {
-    opacity: 0; pointer-events: none; transition: opacity 0.1s;
+        color: var(--text-2);
-  }
+    }
-  .msg-actions button {
+    .msg-body.deleted {
-    padding: 2px 5px; background: var(--surface);
+        color: var(--muted);
-    border: 1px solid var(--border); border-radius: var(--r);
+        font-style: italic;
-    color: var(--muted); font-family: inherit; font-size: 9.5px;
+    }
-    cursor: pointer;
+    .msg-actions {
-  }
+        float: right;
-  .msg-actions button:hover { border-color: var(--accent); color: var(--accent); }
+        display: flex;
-  .reply-chip {
+        gap: 4px;
-    display: inline-flex; margin: 2px 0 3px; padding: 3px 6px;
+        margin-left: 8px;
-    border-left: 2px solid var(--accent); background: var(--surface);
+        opacity: 0;
-    color: var(--muted); font-size: 10px;
+        pointer-events: none;
-  }
+        transition: opacity 0.1s;
-  .edit-row {
+    }
-    display: flex; align-items: flex-end; gap: 6px;
+    .msg-actions button {
-    margin-top: 3px;
+        padding: 2px 5px;
-  }
+        background: var(--surface);
-  .edit-input {
+        border: 1px solid var(--border);
-    flex: 1; resize: vertical; min-height: 44px; max-height: 120px;
+        border-radius: var(--r);
-    padding: 7px 9px; background: var(--surface);
+        color: var(--muted);
-    border: 1px solid var(--border); border-radius: var(--r);
+        font-family: inherit;
-    color: var(--text); font-family: inherit; font-size: 12px;
+        font-size: 9.5px;
-  }
+        cursor: pointer;
-  .mini-btn {
+    }
-    padding: 6px 8px; background: var(--accent); border: none;
+    .msg-actions button:hover {
-    border-radius: var(--r); color: #fff; font-family: inherit;
+        border-color: var(--accent);
-    font-size: 10px; cursor: pointer;
+        color: var(--accent);
-  }
+    }
-  .mini-btn.ghost {
+    .reply-chip {
-    background: transparent; border: 1px solid var(--border); color: var(--muted);
+        display: inline-flex;
-  }
+        margin: 2px 0 3px;
-  .reactions {
+        padding: 3px 6px;
-    display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap;
+        border-left: 2px solid var(--accent);
-  }
+        background: var(--surface);
-  .reaction {
+        color: var(--muted);
-    padding: 2px 6px; background: var(--surface);
+        font-size: 10px;
-    border: 1px solid var(--border); border-radius: var(--r);
+    }
-    color: var(--text-2); font-family: inherit; font-size: 10px;
+    .edit-row {
-    cursor: pointer;
+        display: flex;
-  }
+        align-items: flex-end;
-  .reaction.mine { border-color: var(--accent); color: var(--accent); }
+        gap: 6px;
-  @keyframes msgIn {
+        margin-top: 3px;
-    from { opacity: 0; transform: translateY(3px); }
+    }
-    to   { opacity: 1; transform: translateY(0); }
+    .edit-input {
-  }
+        flex: 1;
+        resize: vertical;
+        min-height: 44px;
+        max-height: 120px;
+        padding: 7px 9px;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--r);
+        color: var(--text);
+        font-family: inherit;
+        font-size: 12px;
+    }
+    .mini-btn {
+        padding: 6px 8px;
+        background: var(--accent);
+        border: none;
+        border-radius: var(--r);
+        color: #fff;
+        font-family: inherit;
+        font-size: 10px;
+        cursor: pointer;
+    }
+    .mini-btn.ghost {
+        background: transparent;
+        border: 1px solid var(--border);
+        color: var(--muted);
+    }
+    .reactions {
+        display: flex;
+        gap: 5px;
+        margin-top: 4px;
+        flex-wrap: wrap;
+    }
+    .reaction {
+        padding: 2px 6px;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--r);
+        color: var(--text-2);
+        font-family: inherit;
+        font-size: 10px;
+        cursor: pointer;
+    }
+    .reaction.mine {
+        border-color: var(--accent);
+        color: var(--accent);
+    }
+    @keyframes msgIn {
+        from {
+            opacity: 0;
+            transform: translateY(3px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
 
-  .input-bar {
+    .input-bar {
-    display: flex; align-items: flex-end; gap: 8px;
+        display: flex;
-    padding: 12px 24px 16px;
+        align-items: flex-end;
-    border-top: 1px solid var(--border);
+        gap: 8px;
-    flex-shrink: 0;
+        padding: 12px 24px 16px;
-  }
+        border-top: 1px solid var(--border);
-  .reply-bar {
+        flex-shrink: 0;
-    display: flex; align-items: center; justify-content: space-between;
+    }
-    padding: 8px 24px; border-top: 1px solid var(--border);
+    .reply-bar {
-    color: var(--text-2); font-size: 11px; background: var(--surface);
+        display: flex;
-  }
+        align-items: center;
-  .msg-input {
+        justify-content: space-between;
-    flex: 1; resize: none;
+        padding: 8px 24px;
-    padding: 9px 13px;
+        border-top: 1px solid var(--border);
-    background: var(--surface);
+        color: var(--text-2);
-    border: 1px solid var(--border); border-radius: var(--r);
+        font-size: 11px;
-    color: var(--text); font-family: inherit; font-size: 13px;
+        background: var(--surface);
-    line-height: 1.55; outline: none;
+    }
-    transition: border-color 0.12s;
+    .msg-input {
-    max-height: 160px; overflow-y: auto;
+        flex: 1;
-  }
+        resize: none;
-  .msg-input:focus        { border-color: var(--accent); }
+        padding: 9px 13px;
-  .msg-input:disabled     { opacity: 0.35; cursor: not-allowed; }
+        background: var(--surface);
-  .msg-input::placeholder { color: var(--muted); }
+        border: 1px solid var(--border);
-  .msg-input::-webkit-scrollbar { width: 0; }
+        border-radius: var(--r);
+        color: var(--text);
+        font-family: inherit;
+        font-size: 13px;
+        line-height: 1.55;
+        outline: none;
+        transition: border-color 0.12s;
+        max-height: 160px;
+        overflow-y: auto;
+    }
+    .msg-input:focus {
+        border-color: var(--accent);
+    }
+    .msg-input:disabled {
+        opacity: 0.35;
+        cursor: not-allowed;
+    }
+    .msg-input::placeholder {
+        color: var(--muted);
+    }
+    .msg-input::-webkit-scrollbar {
+        width: 0;
+    }
 
-  .send-btn {
+    .send-btn {
-    width: 34px; height: 34px; flex-shrink: 0;
+        width: 34px;
-    display: flex; align-items: center; justify-content: center;
+        height: 34px;
-    background: var(--accent); border: none; border-radius: var(--r);
+        flex-shrink: 0;
-    color: #fff; cursor: pointer;
+        display: flex;
-    transition: opacity 0.12s, transform 0.08s;
+        align-items: center;
-  }
+        justify-content: center;
-  .send-btn:hover    { opacity: 0.82; }
+        background: var(--accent);
-  .send-btn:active   { transform: scale(0.93); }
+        border: none;
-  .send-btn:disabled { opacity: 0.25; cursor: not-allowed; transform: none; }
+        border-radius: var(--r);
+        color: #fff;
+        cursor: pointer;
+        transition:
+            opacity 0.12s,
+            transform 0.08s;
+    }
+    .send-btn:hover {
+        opacity: 0.82;
+    }
+    .send-btn:active {
+        transform: scale(0.93);
+    }
+    .send-btn:disabled {
+        opacity: 0.25;
+        cursor: not-allowed;
+        transform: none;
+    }
 </style>

src/lib/components/ContextMenu.svelte

@@ -1,112 +1,133 @@
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
+    import { onMount, onDestroy } from "svelte";
-  import type { ContextMenuItem } from '$lib/types';
+    import type { ContextMenuItem } from "$lib/types";
 
-  interface Props {
+    interface Props {
-    x: number;
+        x: number;
-    y: number;
+        y: number;
-    items: ContextMenuItem[];
+        items: ContextMenuItem[];
-    onclose: () => void;
+        onclose: () => void;
-  }
+    }
 
-  let { x, y, items, onclose }: Props = $props();
+    let { x, y, items, onclose }: Props = $props();
 
-  let menuEl: HTMLElement;
+    let menuEl: HTMLElement;
-  let copiedIndex = $state<number | null>(null);
+    let copiedIndex = $state<number | null>(null);
-  let closeTimer: ReturnType<typeof setTimeout> | null = null;
+    let closeTimer: ReturnType<typeof setTimeout> | null = null;
 
-  // Flip position if menu would overflow viewport
+    // Flip position if menu would overflow viewport
-  onMount(() => {
+    onMount(() => {
-    if (!menuEl) return;
+        if (!menuEl) return;
-    const rect = menuEl.getBoundingClientRect();
+        const rect = menuEl.getBoundingClientRect();
-    if (rect.right > window.innerWidth)  menuEl.style.left = (x - rect.width)  + 'px';
+        if (rect.right > window.innerWidth)
-    if (rect.bottom > window.innerHeight) menuEl.style.top = (y - rect.height) + 'px';
+            menuEl.style.left = x - rect.width + "px";
-  });
+        if (rect.bottom > window.innerHeight)
+            menuEl.style.top = y - rect.height + "px";
+    });
 
-  onDestroy(() => {
+    onDestroy(() => {
-    if (closeTimer !== null) clearTimeout(closeTimer);
+        if (closeTimer !== null) clearTimeout(closeTimer);
-  });
+    });
 
-  function handleItem(item: ContextMenuItem, index: number) {
+    function handleItem(item: ContextMenuItem, index: number) {
-    item.action();
+        item.action();
-    copiedIndex = index;
+        copiedIndex = index;
-    closeTimer = setTimeout(onclose, 1200);
+        closeTimer = setTimeout(onclose, 1200);
-  }
+    }
 
-  function onWindowClick() { onclose(); }
+    function onWindowClick() {
-  function onWindowKey(e: KeyboardEvent) { if (e.key === 'Escape') onclose(); }
+        onclose();
-  function onWindowContext(e: MouseEvent) { e.preventDefault(); onclose(); }
+    }
+    function onWindowKey(e: KeyboardEvent) {
+        if (e.key === "Escape") onclose();
+    }
+    function onWindowContext(e: MouseEvent) {
+        e.preventDefault();
+        onclose();
+    }
 </script>
 
 <svelte:window
-  onclick={onWindowClick}
+    onclick={onWindowClick}
-  onkeydown={onWindowKey}
+    onkeydown={onWindowKey}
-  oncontextmenu={onWindowContext}
+    oncontextmenu={onWindowContext}
 />
 
 <ul
-  class="ctx-menu"
+    class="ctx-menu"
-  bind:this={menuEl}
+    bind:this={menuEl}
-  style="left:{x}px; top:{y}px"
+    style="left:{x}px; top:{y}px"
-  onclick={(e) => e.stopPropagation()}
+    onclick={(e) => e.stopPropagation()}
-  onkeydown={(e) => e.stopPropagation()}
+    onkeydown={(e) => e.stopPropagation()}
-  oncontextmenu={(e) => { e.preventDefault(); e.stopPropagation(); }}
+    oncontextmenu={(e) => {
-  role="menu"
+        e.preventDefault();
+        e.stopPropagation();
+    }}
+    role="menu"
 >
-  {#each items as item, i}
+    {#each items as item, i}
-    <li role="menuitem">
+        <li role="menuitem">
-      <button
+            <button
-        class="ctx-item"
+                class="ctx-item"
-        class:copied={copiedIndex === i}
+                class:copied={copiedIndex === i}
-        onclick={() => handleItem(item, i)}
+                onclick={() => handleItem(item, i)}
-      >
+            >
-        {copiedIndex === i ? 'Copied!' : item.label}
+                {copiedIndex === i ? "Copied!" : item.label}
-      </button>
+            </button>
-    </li>
+        </li>
-  {/each}
+    {/each}
 </ul>
 
 <style>
-  .ctx-menu {
+    .ctx-menu {
-    margin: 0;
+        margin: 0;
-    position: fixed;
+        position: fixed;
-    list-style: none;
+        list-style: none;
-    min-width: 160px;
+        min-width: 160px;
-    padding: 4px;
+        padding: 4px;
-    background: var(--surface);
+        background: var(--surface);
-    border: 1px solid var(--border);
+        border: 1px solid var(--border);
-    border-radius: var(--r);
+        border-radius: var(--r);
-    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-    z-index: 9999;
+        z-index: 9999;
-    animation: rise 0.15s ease;
+        animation: rise 0.15s ease;
-  }
+    }
-  @keyframes rise {
+    @keyframes rise {
-    from { opacity: 0; transform: translateY(4px); }
+        from {
-    to   { opacity: 1; transform: translateY(0); }
+            opacity: 0;
-  }
+            transform: translateY(4px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
 
-  .ctx-item {
+    .ctx-item {
-    display: block;
+        display: block;
-    width: 100%;
+        width: 100%;
-    padding: 7px 12px;
+        padding: 7px 12px;
-    background: none;
+        background: none;
-    border: none;
+        border: none;
-    border-left: 2px solid transparent;
+        border-left: 2px solid transparent;
-    border-radius: var(--r);
+        border-radius: var(--r);
-    color: var(--text-2);
+        color: var(--text-2);
-    font-family: inherit;
+        font-family: inherit;
-    font-size: 11px;
+        font-size: 11px;
-    text-align: left;
+        text-align: left;
-    cursor: pointer;
+        cursor: pointer;
-    transition: background 0.1s, color 0.1s, border-color 0.1s;
+        transition:
-  }
+            background 0.1s,
-  .ctx-item:hover {
+            color 0.1s,
-    background: var(--surface-2);
+            border-color 0.1s;
-    color: var(--text);
+    }
-    border-left-color: var(--accent);
+    .ctx-item:hover {
-  }
+        background: var(--surface-2);
-  .ctx-item.copied {
+        color: var(--text);
-    color: var(--accent);
+        border-left-color: var(--accent);
-    background: var(--accent-soft);
+    }
-  }
+    .ctx-item.copied {
+        color: var(--accent);
+        background: var(--accent-soft);
+    }
 </style>

src/lib/components/LoadingScreen.svelte

@@ -1,29 +1,46 @@
 <div class="loading">
-  <span class="brand-mark">OXYDE</span>
+    <span class="brand-mark">OXYDE</span>
-  <div class="spinner"></div>
+    <div class="spinner"></div>
 </div>
 
 <style>
-  .loading {
+    .loading {
-    display: flex; flex-direction: column;
+        display: flex;
-    align-items: center; justify-content: center;
+        flex-direction: column;
-    height: 100vh; gap: 20px;
+        align-items: center;
-    background: var(--bg);
+        justify-content: center;
-  }
+        height: 100vh;
-  .brand-mark {
+        gap: 20px;
-    font-family: 'Cormorant Garamond', Georgia, serif;
+        background: var(--bg);
-    font-size: 32px; font-weight: 700;
+    }
-    color: var(--accent);
+    .brand-mark {
-    letter-spacing: 0.22em;
+        font-family: "Cormorant Garamond", Georgia, serif;
-    animation: pulse 1.6s ease-in-out infinite;
+        font-size: 32px;
-  }
+        font-weight: 700;
-  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
+        color: var(--accent);
-  .spinner {
+        letter-spacing: 0.22em;
-    width: 20px; height: 20px;
+        animation: pulse 1.6s ease-in-out infinite;
-    border: 1.5px solid var(--border);
+    }
-    border-top-color: var(--accent);
+    @keyframes pulse {
-    border-radius: 50%;
+        0%,
-    animation: spin 0.75s linear infinite;
+        100% {
-  }
+            opacity: 1;
-  @keyframes spin { to { transform: rotate(360deg); } }
+        }
+        50% {
+            opacity: 0.45;
+        }
+    }
+    .spinner {
+        width: 20px;
+        height: 20px;
+        border: 1.5px solid var(--border);
+        border-top-color: var(--accent);
+        border-radius: 50%;
+        animation: spin 0.75s linear infinite;
+    }
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
 </style>

src/lib/helpers.ts

@@ -2,33 +2,39 @@
 // 3.x format: { table: "user", key: { String: "abc" } }
 // 2.x format: { tb:    "user", id:  { String: "abc" } }  (kept for compat)
 export function sid(thing: any): string {
-  if (!thing) return '';
+  if (!thing) return "";
-  if (typeof thing === 'string') {
+  if (typeof thing === "string") {
-    const i = thing.indexOf(':');
+    const i = thing.indexOf(":");
     const id = i >= 0 ? thing.slice(i + 1) : thing;
-    return id.replace(/[⟨⟩]/g, '');
+    return id.replace(/[⟨⟩]/g, "");
   }
   // 3.x: key field (may be nested variant or plain string)
   const key = thing?.key ?? thing?.id;
-  if (typeof key === 'string') return key.replace(/[⟨⟩]/g, '');
+  if (typeof key === "string") return key.replace(/[⟨⟩]/g, "");
-  if (key?.String)                    return key.String;
+  if (key?.String) return key.String;
-  if (key?.Uuid)                      return key.Uuid;
+  if (key?.Uuid) return key.Uuid;
-  if (key?.Number !== undefined)      return String(key.Number);
+  if (key?.Number !== undefined) return String(key.Number);
   return JSON.stringify(thing);
 }
 
 // Return canonical "table:id" string for equality checks
 export function full(thing: any): string {
-  if (typeof thing === 'string') return thing;
+  if (typeof thing === "string") return thing;
-  const table = thing?.table ?? thing?.tb ?? '';
+  const table = thing?.table ?? thing?.tb ?? "";
   return `${table}:${sid(thing)}`;
 }
 
 export function fmt(ts: string): string {
-  return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  return new Date(ts).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
 }
 
-export async function cmd<T>(name: string, args?: Record<string, unknown>): Promise<T> {
+export async function cmd<T>(
-  const { invoke } = await import('@tauri-apps/api/core');
+  name: string,
+  args?: Record<string, unknown>,
+): Promise<T> {
+  const { invoke } = await import("@tauri-apps/api/core");
   return invoke<T>(name, args);
 }

src/lib/types.ts

@@ -1,8 +1,65 @@
-export interface User    { id: any; username: string; email?: string; avatar?: string; created?: string; }
+export interface User {
-export interface Room    { id: any; name?: string; kind?: 'public' | 'private' | 'direct'; direct_key?: string; created: string; updated?: string; created_by?: any; last_message?: Message; unread_count?: number; other_user?: User; }
+  id: any;
-export interface RoomMember { id: any; room: any; user: any; role: 'owner' | 'member'; joined: string; last_read_at?: string; muted?: boolean; }
+  username: string;
-export interface MessageReactionSummary { emoji: string; count: number; reacted_by_me: boolean; }
+  email?: string;
-export interface Message { id: any; room: any; author: any; author_username?: string; body: string; created: string; updated?: string; deleted?: boolean; reply_to?: any; reactions?: MessageReactionSummary[]; }
+  avatar?: string;
-export interface UserSearchResult { id: any; username: string; avatar?: string; }
+  created?: string;
-export interface LiveEvent { action: 'Create' | 'Update' | 'Delete'; data: Message; }
+}
-export interface ContextMenuItem { label: string; action: () => void; }
+export interface Room {
+  id: any;
+  name?: string;
+  kind?: "public" | "private" | "direct";
+  direct_key?: string;
+  created: string;
+  updated?: string;
+  created_by?: any;
+  last_message?: Message;
+  unread_count?: number;
+  other_user?: User;
+}
+export interface RoomMember {
+  id: any;
+  room: any;
+  user: any;
+  role: "owner" | "member";
+  joined: string;
+  last_read_at?: string;
+  muted?: boolean;
+}
+export interface MessageReactionSummary {
+  emoji: string;
+  count: number;
+  reacted_by_me: boolean;
+}
+export interface Message {
+  id: any;
+  room: any;
+  author: any;
+  author_username?: string;
+  body: string;
+  created: string;
+  updated?: string;
+  deleted?: boolean;
+  reply_to?: any;
+  replied_to_message?: MessageSnippet;
+  reactions?: MessageReactionSummary[];
+}
+
+export interface MessageSnippet {
+  id: any;
+  author_username?: string;
+  body: string;
+}
+export interface UserSearchResult {
+  id: any;
+  username: string;
+  avatar?: string;
+}
+export interface LiveEvent {
+  action: "Create" | "Update" | "Delete";
+  data: Message;
+}
+export interface ContextMenuItem {
+  label: string;
+  action: () => void;
+}

src/routes/+page.svelte

@@ -26,6 +26,7 @@
     let hasOlderMessages = $state(false);
     let isLoadingOlder = $state(false);
     let unreadCounts = $state<Record<string, number>>({});
+    let roomSelectionToken = 0;
 
     let view = $state<"loading" | "auth" | "app">("loading");
     let authMode = $state<"signin" | "signup">("signin");
@@ -101,6 +102,7 @@
     }
 
     async function signout() {
+        roomSelectionToken += 1;
         await cmd("signout").catch(() => {});
         if (subId) {
             await cmd("unsubscribe_room", { subId }).catch(() => {});
@@ -119,64 +121,125 @@
     }
 
     // ─── Rooms ────────────────────────────────────────────────────────────────
+    function isCurrentRoomSelection(token: number, roomId: string) {
+        return (
+            token === roomSelectionToken &&
+            activeRoom !== null &&
+            sid(activeRoom.id) === roomId
+        );
+    }
+
+    function onlyRoomMessages(roomId: string, source: Message[]) {
+        return source.filter((message) => sid(message.room) === roomId);
+    }
+
     async function loadRooms() {
         rooms = await cmd<Room[]>("get_rooms");
         if (rooms.length && !activeRoom) await selectRoom(rooms[0]);
     }
 
     async function selectRoom(room: Room) {
-        if (subId) {
+        const token = ++roomSelectionToken;
-            await cmd("unsubscribe_room", { subId }).catch(() => {});
+        const roomId = sid(room.id);
-            subId = null;
+        const previousSubId = subId;
-        }
+        const previousUnlisten = unlisten;
-        if (unlisten) {
+
-            unlisten();
+        subId = null;
-            unlisten = null;
+        unlisten = null;
-        }
 
         activeRoom = room;
+        messages = [];
+        hasOlderMessages = false;
+        isLoadingOlder = false;
         replyTo = null;
-        messages = await cmd<Message[]>("get_messages", {
+
-            roomId: sid(room.id),
+        if (previousSubId) {
+            await cmd("unsubscribe_room", { subId: previousSubId }).catch(
+                () => {},
+            );
+        }
+        if (previousUnlisten) {
+            previousUnlisten();
+        }
+        if (token !== roomSelectionToken) return;
+
+        const cached = await cmd<Message[]>("get_cached_messages", { roomId });
+        if (!isCurrentRoomSelection(token, roomId)) return;
+        if (cached.length > 0) {
+            messages = onlyRoomMessages(roomId, cached);
+            hasOlderMessages = false;
+        }
+
+        const fresh = await cmd<Message[]>("get_messages", {
+            roomId,
             limit: 50,
         });
-        hasOlderMessages = messages.length === 50;
+        if (!isCurrentRoomSelection(token, roomId)) return;
-        unreadCounts = { ...unreadCounts, [sid(room.id)]: 0 };
+        messages = onlyRoomMessages(roomId, fresh);
-        await cmd("mark_room_read", { roomId: sid(room.id) }).catch(() => {});
+        hasOlderMessages = fresh.length === 50;
+        unreadCounts = { ...unreadCounts, [roomId]: 0 };
+        await cmd("mark_room_read", { roomId }).catch(() => {});
+        if (!isCurrentRoomSelection(token, roomId)) return;
 
-        subId = await cmd<string>("subscribe_room", { roomId: sid(room.id) });
+        const nextSubId = await cmd<string>("subscribe_room", { roomId });
+        if (!isCurrentRoomSelection(token, roomId)) {
+            await cmd("unsubscribe_room", { subId: nextSubId }).catch(() => {});
+            return;
+        }
+        subId = nextSubId;
         const { listen } = await import("@tauri-apps/api/event");
-        unlisten = await listen<LiveEvent>("chat:message", ({ payload }) => {
+        const nextUnlisten = await listen<LiveEvent>(
-            const { action, data } = payload;
+            "chat:message",
-            const eventRoomId = sid(data.room);
+            ({ payload }) => {
-            const currentRoomId = activeRoom ? sid(activeRoom.id) : "";
+                const { action, data } = payload;
-            if (eventRoomId !== currentRoomId) {
+                const eventRoomId = sid(data.room);
-                unreadCounts = {
+                const currentRoomId = activeRoom ? sid(activeRoom.id) : "";
-                    ...unreadCounts,
+                if (eventRoomId !== currentRoomId) {
-                    [eventRoomId]: (unreadCounts[eventRoomId] ?? 0) + 1,
+                    unreadCounts = {
-                };
+                        ...unreadCounts,
-                if (
+                        [eventRoomId]: (unreadCounts[eventRoomId] ?? 0) + 1,
-                    "Notification" in window &&
+                    };
-                    Notification.permission === "granted" &&
+                    if (
-                    document.hidden
+                        "Notification" in window &&
-                ) {
+                        Notification.permission === "granted" &&
-                    new Notification(data.author_username ?? "New message", {
+                        document.hidden
-                        body: data.body || "New message",
+                    ) {
-                    });
+                        new Notification(
+                            data.author_username ?? "New message",
+                            {
+                                body: data.body || "New message",
+                            },
+                        );
+                    }
+                    return;
                 }
-                return;
+                if (action === "Create") {
-            }
+                    messages = [...messages, data];
-            if (action === "Create") {
+                } else if (action === "Delete") {
-                messages = [...messages, data];
+                    messages = messages.filter(
-            } else if (action === "Delete") {
+                        (m) => full(m.id) !== full(data.id),
-                messages = messages.filter((m) => full(m.id) !== full(data.id));
+                    );
-            } else if (action === "Update") {
+                } else if (action === "Update") {
-                messages = messages.map((m) =>
+                    messages = messages.map((m) =>
-                    full(m.id) === full(data.id) ? data : m,
+                        full(m.id) === full(data.id) ? data : m,
+                    );
+                }
+                cmd("mark_room_read", { roomId: currentRoomId }).catch(
+                    () => {},
                 );
+            },
+        );
+        if (!isCurrentRoomSelection(token, roomId)) {
+            nextUnlisten();
+            if (subId === nextSubId) {
+                await cmd("unsubscribe_room", { subId: nextSubId }).catch(
+                    () => {},
+                );
+                subId = null;
             }
-            cmd("mark_room_read", { roomId: currentRoomId }).catch(() => {});
+            return;
-        });
+        }
+        unlisten = nextUnlisten;
     }
 
     async function loadOlderMessages() {
@@ -187,19 +250,24 @@
             messages.length === 0
         )
             return;
+        const roomId = sid(activeRoom.id);
+        const token = roomSelectionToken;
         isLoadingOlder = true;
         try {
             const older = await cmd<Message[]>("get_messages", {
-                roomId: sid(activeRoom.id),
+                roomId,
                 before: messages[0].created,
                 limit: 50,
             });
-            messages = [...older, ...messages];
+            if (!isCurrentRoomSelection(token, roomId)) return;
+            messages = [...onlyRoomMessages(roomId, older), ...messages];
             hasOlderMessages = older.length === 50;
         } catch (e) {
             err = String(e);
         } finally {
-            isLoadingOlder = false;
+            if (isCurrentRoomSelection(token, roomId)) {
+                isLoadingOlder = false;
+            }
         }
     }
 
@@ -267,10 +335,15 @@
         try {
             await cmd("toggle_reaction", { messageId: msgId, emoji });
             if (activeRoom) {
-                messages = await cmd<Message[]>("get_messages", {
+                const roomId = sid(activeRoom.id);
-                    roomId: sid(activeRoom.id),
+                const token = roomSelectionToken;
+                const refreshed = await cmd<Message[]>("get_messages", {
+                    roomId,
                     limit: Math.max(50, Math.min(messages.length, 100)),
                 });
+                if (isCurrentRoomSelection(token, roomId)) {
+                    messages = onlyRoomMessages(roomId, refreshed);
+                }
             }
         } catch (e) {
             err = String(e);