10 Commits

Author SHA1 Message Date
eafd12758a fixed up duplicate dm's
Some checks failed
Release / release (ubuntu-22.04) (push) Has been cancelled
Release / release (windows-latest) (push) Has been cancelled
2026-04-18 23:04:56 -04:00
80a217fc5b Some changes codex made that I want to test how they work 2026-04-18 20:42:58 -04:00
effaf64bcf chore: updated to v0.1.1
Some checks failed
Release / release (ubuntu-22.04) (push) Has been cancelled
Release / release (windows-latest) (push) Has been cancelled
2026-04-18 01:42:47 -04:00
1cbcda1cc7 feat: add copy user ID to message author context menu 2026-04-18 01:33:11 -04:00
47ec72defd feat: wire delete_message, update_profile, add_contact into frontend UI 2026-04-18 01:29:36 -04:00
fbe37d8310 feat: restore session on app launch instead of failing to login screen 2026-04-18 01:28:13 -04:00
eced53aecd feat: persist session token across app restarts 2026-04-18 01:27:50 -04:00
d9590987a5 feat: add tauri-plugin-store for session persistence 2026-04-18 00:48:46 -04:00
e817e81619 docs: add implementation plan for persistent login and unused commands 2026-04-17 23:55:32 -04:00
9cf9f2a8fb docs: add design spec for persistent login and unused commands UI
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-17 23:48:52 -04:00
24 changed files with 3349 additions and 315 deletions

0
.codex Normal file
View File

View File

@@ -0,0 +1,998 @@
# Persistent Login + Unused Commands Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Persist the JWT session token across app launches so users sign in once per machine, and wire the three unused backend commands (`delete_message`, `update_profile`, `add_contact`) into the frontend UI.
**Architecture:** The Rust backend gains `tauri-plugin-store` for token persistence; `signin`/`signup`/`signout` commands save/clear the token, and a new `restore_session` command re-authenticates on startup. Frontend UI adds a message delete option to the context menu, an inline profile-edit form in the sidebar footer, and an inline add-contact form in the sidebar contacts section.
**Tech Stack:** Rust/Tauri 2, tauri-plugin-store 2, SurrealDB 3, Svelte 5, TypeScript
---
## File Map
| File | Change |
|------|--------|
| `src-tauri/Cargo.toml` | Add `tauri-plugin-store = "2"` |
| `src-tauri/src/lib.rs` | Register store plugin; add `restore_session` to invoke_handler |
| `src-tauri/src/commands/user.rs` | Add `AppHandle` to `signin`/`signup`/`signout`; save/clear token in store; add `restore_session` command |
| `src/routes/+page.svelte` | Replace `get_me` with `restore_session` in `init()`; add `deleteMessage`, `updateProfile`, `addContact` handlers; thread new props to components |
| `src/lib/components/ChatMain.svelte` | Add `user` prop and `onDeleteMessage` prop; add delete item to message context menu |
| `src/lib/components/Sidebar.svelte` | Add `onUpdateProfile` and `onAddContact` props; add inline profile-edit form; add inline add-contact form |
---
## Task 1: Add tauri-plugin-store dependency
**Files:**
- Modify: `src-tauri/Cargo.toml`
- Modify: `src-tauri/src/lib.rs`
- [ ] **Step 1: Add the crate to Cargo.toml**
Open `src-tauri/Cargo.toml`. In the `[dependencies]` section, add after `tauri-plugin-opener`:
```toml
tauri-plugin-store = "2"
```
- [ ] **Step 2: Register the plugin in lib.rs**
Open `src-tauri/src/lib.rs`. The current builder chain is:
```rust
tauri::Builder::default()
.plugin(tauri_plugin_opener::init())
.setup(|app| {
```
Change it to:
```rust
tauri::Builder::default()
.plugin(tauri_plugin_opener::init())
.plugin(tauri_plugin_store::Builder::default().build())
.setup(|app| {
```
- [ ] **Step 3: Verify it compiles**
```bash
cd src-tauri && cargo check 2>&1
```
Expected: no errors. You will see it downloading and compiling tauri-plugin-store. If you see "use of undeclared crate or module `tauri_plugin_store`", double-check the Cargo.toml spelling.
- [ ] **Step 4: Commit**
```bash
git add src-tauri/Cargo.toml src-tauri/Cargo.lock src-tauri/src/lib.rs
git commit -m "feat: add tauri-plugin-store for session persistence"
```
---
## Task 2: Update user commands for token persistence
**Files:**
- Modify: `src-tauri/src/commands/user.rs`
- Modify: `src-tauri/src/lib.rs`
This task updates `signin`, `signup`, `signout` to save/clear the token in the store, and adds the new `restore_session` command.
- [ ] **Step 1: Replace the contents of commands/user.rs**
Replace the entire file with:
```rust
use tauri::{AppHandle, State};
use tauri_plugin_store::StoreExt;
use crate::db::{AppState, SURREAL_ACCESS, SURREAL_DB, SURREAL_NS};
use crate::error::{into_err, AppError};
use crate::models::{Contact, User};
const SESSION_STORE: &str = "session.json";
const TOKEN_KEY: &str = "token";
/// Create a new user account via SurrealDB Record Auth SIGNUP.
/// Returns the created User record. Persists the JWT token to disk.
#[tauri::command]
pub async fn signup(
state: State<'_, AppState>,
app_handle: AppHandle,
email: String,
username: String,
password: String,
) -> Result<User, String> {
let credentials = surrealdb::opt::auth::Record {
access: SURREAL_ACCESS.to_string(),
namespace: SURREAL_NS.to_string(),
database: SURREAL_DB.to_string(),
params: serde_json::json!({
"email": email,
"username": username,
"password": password,
}),
};
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
.db
.query("SELECT * FROM $auth")
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
result.pop().ok_or_else(|| into_err(AppError::Auth("signup succeeded but $auth not set".into())))
}
/// Authenticate an existing user via SurrealDB Record Auth SIGNIN.
/// Returns the JWT token string. Persists the token to disk.
#[tauri::command]
pub async fn signin(
state: State<'_, AppState>,
app_handle: AppHandle,
email: String,
password: String,
) -> Result<String, String> {
let credentials = surrealdb::opt::auth::Record {
access: SURREAL_ACCESS.to_string(),
namespace: SURREAL_NS.to_string(),
database: SURREAL_DB.to_string(),
params: serde_json::json!({
"email": email,
"password": password,
}),
};
let token_str = state.db.signin(credentials).await.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)
}
/// Clear the current session. Invalidates the token in state and removes it from disk.
#[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(())
}
/// Attempt to restore a previous session from the persisted token on disk.
/// Authenticates the DB connection with the stored JWT.
/// Returns the authenticated User on success, or an error if no token exists
/// or the token is expired/invalid (in which case the stored token is also cleared).
#[tauri::command]
pub async fn restore_session(
state: State<'_, AppState>,
app_handle: AppHandle,
) -> Result<User, String> {
let token_str = load_token(&app_handle)?.ok_or_else(|| {
AppError::Auth("no saved session".into()).to_string()
})?;
match state.db.authenticate(surrealdb::opt::auth::Jwt::from(token_str.clone())).await {
Ok(_) => {
*state.token.lock().unwrap() = Some(token_str);
let mut result: Vec<User> = state
.db
.query("SELECT * FROM $auth")
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
result.pop().ok_or_else(|| into_err(AppError::Auth("session restored but $auth not set".into())))
}
Err(_) => {
// Token expired or invalid — purge it so next launch shows auth screen.
let _ = clear_token(&app_handle);
*state.token.lock().unwrap() = None;
Err(AppError::Auth("session expired, please sign in again".into()).to_string())
}
}
}
/// Fetch the currently authenticated user record.
#[tauri::command]
pub async fn get_me(state: State<'_, AppState>) -> Result<User, String> {
let mut result: Vec<User> = state
.db
.query("SELECT * FROM $auth")
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
result.pop().ok_or_else(|| into_err(AppError::Auth("not authenticated".into())))
}
/// Update mutable profile fields. Only provided fields are changed.
#[tauri::command]
pub async fn update_profile(
state: State<'_, AppState>,
username: Option<String>,
avatar: Option<String>,
) -> Result<User, String> {
let mut result: Vec<User> = state
.db
.query(
"UPDATE $auth SET
username = $username ?? username,
avatar = $avatar ?? avatar
RETURN AFTER",
)
.bind(("username", username))
.bind(("avatar", avatar))
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
result.pop().ok_or_else(|| into_err(AppError::NotFound("user".into())))
}
/// Return the contacts list for the current user.
#[tauri::command]
pub async fn get_contacts(state: State<'_, AppState>) -> Result<Vec<User>, String> {
let result: Vec<User> = state
.db
.query("SELECT target.* FROM contact WHERE owner = $auth")
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
Ok(result)
}
/// Add a user to the current user's contact list.
#[tauri::command]
pub async fn add_contact(
state: State<'_, AppState>,
user_id: String,
) -> Result<Contact, String> {
let mut result: Vec<Contact> = state
.db
.query("CREATE contact SET owner = $auth, target = type::record('user', $uid)")
.bind(("uid", user_id))
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
result.pop().ok_or_else(|| into_err(AppError::NotFound("contact after create".into())))
}
// ── Private helpers ───────────────────────────────────────────────────────────
fn save_token(app: &AppHandle, token: &str) -> Result<(), String> {
let store = app.store(SESSION_STORE).map_err(|e| e.to_string())?;
store.set(TOKEN_KEY, serde_json::json!(token));
store.save().map_err(|e| e.to_string())
}
fn load_token(app: &AppHandle) -> Result<Option<String>, String> {
let store = app.store(SESSION_STORE).map_err(|e| e.to_string())?;
Ok(store.get(TOKEN_KEY).and_then(|v| v.as_str().map(String::from)))
}
fn clear_token(app: &AppHandle) -> Result<(), String> {
let store = app.store(SESSION_STORE).map_err(|e| e.to_string())?;
store.delete(TOKEN_KEY);
store.save().map_err(|e| e.to_string())
}
```
- [ ] **Step 2: Add restore_session to the invoke_handler in lib.rs**
Open `src-tauri/src/lib.rs`. The invoke_handler currently lists the commands. Add `commands::user::restore_session` so the handler looks like:
```rust
.invoke_handler(tauri::generate_handler![
commands::user::signup,
commands::user::signin,
commands::user::signout,
commands::user::get_me,
commands::user::restore_session,
commands::user::update_profile,
commands::user::get_contacts,
commands::user::add_contact,
commands::chat::create_room,
commands::chat::get_rooms,
commands::chat::send_message,
commands::chat::get_messages,
commands::chat::delete_message,
commands::chat::subscribe_room,
commands::chat::unsubscribe_room,
])
```
- [ ] **Step 3: Verify it compiles**
```bash
cd src-tauri && cargo check 2>&1
```
Expected: no errors. Common failure:
- `"method not found in surrealdb::Surreal<Client>"` for `authenticate` — check that `surrealdb::opt::auth::Jwt` is the right type for your surrealdb 3.x version. If `Jwt::from(string)` fails, try `token_str.as_str().parse().unwrap_or_default()` or consult `cargo doc --open` for the `authenticate` signature.
- `"cannot find value TOKEN_KEY"` — make sure the constant is defined at module level, not inside a function.
- [ ] **Step 4: Commit**
```bash
git add src-tauri/src/commands/user.rs src-tauri/src/lib.rs
git commit -m "feat: persist session token across app restarts"
```
---
## Task 3: Update frontend init() to use restore_session
**Files:**
- Modify: `src/routes/+page.svelte`
- [ ] **Step 1: Replace the init() function**
In `src/routes/+page.svelte`, find the `init()` function (lines 3746):
```typescript
async function init() {
try {
user = await cmd<User>('get_me');
view = 'app';
await loadRooms();
contacts = await cmd<User[]>('get_contacts').catch(() => []);
} catch {
view = 'auth';
}
}
```
Replace with:
```typescript
async function init() {
try {
user = await cmd<User>('restore_session');
view = 'app';
await loadRooms();
contacts = await cmd<User[]>('get_contacts').catch(() => []);
} catch {
view = 'auth';
}
}
```
Only the `cmd` call changes — `'get_me'``'restore_session'`. Everything else stays the same.
- [ ] **Step 2: Verify TypeScript types**
```bash
pnpm check 2>&1
```
Expected: no errors.
- [ ] **Step 3: Commit**
```bash
git add src/routes/+page.svelte
git commit -m "feat: restore session on app launch instead of failing to login screen"
```
---
## Task 4: Wire delete_message into the UI
**Files:**
- Modify: `src/routes/+page.svelte`
- Modify: `src/lib/components/ChatMain.svelte`
- [ ] **Step 1: Add deleteMessage handler in +page.svelte**
In `src/routes/+page.svelte`, find the `sendMessage()` function (around line 111). Add the new function directly after it, before `onMount`:
```typescript
async function deleteMessage(msgId: string) {
err = '';
try {
await cmd('delete_message', { messageId: msgId });
messages = messages.filter(m => full(m.id) !== msgId);
} catch (e) { err = String(e); }
}
```
- [ ] **Step 2: Pass onDeleteMessage and user to ChatMain**
In the same file, find the `<ChatMain ... />` block in the template (around line 156):
```svelte
<ChatMain
{activeRoom}
{messages}
{err}
bind:fMsg
onSendMessage={sendMessage}
onShowMenu={showMenu}
/>
```
Replace with:
```svelte
<ChatMain
{activeRoom}
{messages}
{user}
{err}
bind:fMsg
onSendMessage={sendMessage}
onDeleteMessage={deleteMessage}
onShowMenu={showMenu}
/>
```
- [ ] **Step 3: Update ChatMain.svelte to accept user and onDeleteMessage props**
Open `src/lib/components/ChatMain.svelte`. Find the `interface Props` block (lines 613):
```typescript
interface Props {
activeRoom: Room | null;
messages: Message[];
err: string;
fMsg: string;
onSendMessage: () => void;
onShowMenu: (e: MouseEvent, items: ContextMenuItem[]) => void;
}
```
Replace with:
```typescript
interface Props {
activeRoom: Room | null;
messages: Message[];
user: User | null;
err: string;
fMsg: string;
onSendMessage: () => void;
onDeleteMessage: (msgId: string) => void;
onShowMenu: (e: MouseEvent, items: ContextMenuItem[]) => void;
}
```
- [ ] **Step 4: Update destructuring in ChatMain.svelte**
Find the destructuring block (lines 1623):
```typescript
let {
activeRoom,
messages,
err,
fMsg = $bindable(),
onSendMessage,
onShowMenu,
}: Props = $props();
```
Replace with:
```typescript
let {
activeRoom,
messages,
user,
err,
fMsg = $bindable(),
onSendMessage,
onDeleteMessage,
onShowMenu,
}: Props = $props();
```
- [ ] **Step 5: Add User import to ChatMain.svelte**
Find the import line at the top of the script block:
```typescript
import type { Room, Message, ContextMenuItem } from '$lib/types';
```
Replace with:
```typescript
import type { User, Room, Message, ContextMenuItem } from '$lib/types';
```
- [ ] **Step 6: Add delete option to message context menu**
Find the `oncontextmenu` handler on the message `<div>` (around line 82 of ChatMain.svelte):
```svelte
oncontextmenu={(e) => onShowMenu(e, [{ label: 'Copy message', action: () => navigator.clipboard.writeText(msg.body) }])}
```
Replace with:
```svelte
oncontextmenu={(e) => {
const items: ContextMenuItem[] = [
{ label: 'Copy message', action: () => navigator.clipboard.writeText(msg.body) },
];
if (user && full(msg.author) === full(user.id)) {
items.push({ label: 'Delete message', action: () => onDeleteMessage(full(msg.id)) });
}
onShowMenu(e, items);
}}
```
- [ ] **Step 7: Verify TypeScript types**
```bash
pnpm check 2>&1
```
Expected: no errors.
- [ ] **Step 8: Commit**
```bash
git add src/routes/+page.svelte src/lib/components/ChatMain.svelte
git commit -m "feat: add delete message to context menu"
```
---
## Task 5: Wire update_profile into the sidebar
**Files:**
- Modify: `src/routes/+page.svelte`
- Modify: `src/lib/components/Sidebar.svelte`
- [ ] **Step 1: Add updateProfile handler in +page.svelte**
In `src/routes/+page.svelte`, add after `deleteMessage()`:
```typescript
async function updateProfile(fields: { username?: string; avatar?: string }) {
user = await cmd<User>('update_profile', fields);
}
```
- [ ] **Step 2: Pass onUpdateProfile to Sidebar**
Find the `<Sidebar ... />` block in the template:
```svelte
<Sidebar
{user}
{rooms}
{contacts}
{activeRoom}
bind:showNewRoom
bind:fRoom
onSelectRoom={selectRoom}
onCreateRoom={createRoom}
onSignout={signout}
onShowMenu={showMenu}
/>
```
Replace with:
```svelte
<Sidebar
{user}
{rooms}
{contacts}
{activeRoom}
bind:showNewRoom
bind:fRoom
onSelectRoom={selectRoom}
onCreateRoom={createRoom}
onSignout={signout}
onShowMenu={showMenu}
onUpdateProfile={updateProfile}
/>
```
- [ ] **Step 3: Add onUpdateProfile prop and profile edit form to Sidebar.svelte**
Open `src/lib/components/Sidebar.svelte`. Make the following changes:
**3a — Add `onUpdateProfile` to the `interface Props` block:**
Find:
```typescript
interface Props {
user: User | null;
rooms: Room[];
contacts: User[];
activeRoom: Room | null;
showNewRoom: boolean;
fRoom: string;
onSelectRoom: (room: Room) => void;
onCreateRoom: () => void;
onSignout: () => void;
onShowMenu: (e: MouseEvent, items: ContextMenuItem[]) => void;
}
```
Replace with:
```typescript
interface Props {
user: User | null;
rooms: Room[];
contacts: User[];
activeRoom: Room | null;
showNewRoom: boolean;
fRoom: string;
onSelectRoom: (room: Room) => void;
onCreateRoom: () => void;
onSignout: () => void;
onShowMenu: (e: MouseEvent, items: ContextMenuItem[]) => void;
onUpdateProfile: (fields: { username?: string; avatar?: string }) => Promise<void>;
}
```
**3b — Add `onUpdateProfile` to the destructuring block:**
Find:
```typescript
let {
user,
rooms,
contacts,
activeRoom,
showNewRoom = $bindable(),
fRoom = $bindable(),
onSelectRoom,
onCreateRoom,
onSignout,
onShowMenu,
}: Props = $props();
```
Replace with:
```typescript
let {
user,
rooms,
contacts,
activeRoom,
showNewRoom = $bindable(),
fRoom = $bindable(),
onSelectRoom,
onCreateRoom,
onSignout,
onShowMenu,
onUpdateProfile,
}: Props = $props();
```
**3c — Add local state and submit handler for the profile form. Add after the destructuring block:**
```typescript
let showEditProfile = $state(false);
let fProfileUsername = $state('');
let fProfileAvatar = $state('');
let profileErr = $state('');
function openEditProfile() {
fProfileUsername = user?.username ?? '';
fProfileAvatar = user?.avatar ?? '';
profileErr = '';
showEditProfile = true;
}
async function submitProfile() {
profileErr = '';
try {
await onUpdateProfile({
username: fProfileUsername.trim() || undefined,
avatar: fProfileAvatar.trim() || undefined,
});
showEditProfile = false;
} catch (e) { profileErr = String(e); }
}
```
**3d — Update the user footer in the template.** Find the `<!-- User footer -->` section:
```svelte
<!-- User footer -->
<div class="user-footer">
<div class="user-pill">
<span class="avatar">{user?.username?.[0]?.toUpperCase() ?? '?'}</span>
<span class="user-name">{user?.username ?? ''}</span>
</div>
<button class="icon-btn signout" title="Sign out" onclick={onSignout}>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</svg>
</button>
</div>
```
Replace with:
```svelte
<!-- User footer -->
{#if showEditProfile}
<div class="edit-profile-form">
<input class="field-sm" placeholder="username" bind:value={fProfileUsername}
onkeydown={(e) => e.key === 'Enter' && submitProfile()}
onkeyup={(e) => e.key === 'Escape' && (showEditProfile = false)} />
<input class="field-sm" placeholder="avatar url (optional)" bind:value={fProfileAvatar}
onkeydown={(e) => e.key === 'Enter' && submitProfile()}
onkeyup={(e) => e.key === 'Escape' && (showEditProfile = false)} />
{#if profileErr}<p class="form-err">{profileErr}</p>{/if}
<div class="form-row">
<button class="btn-xs" onclick={submitProfile}>save</button>
<button class="btn-xs btn-ghost" onclick={() => showEditProfile = false}>cancel</button>
</div>
</div>
{/if}
<div class="user-footer">
<button class="user-pill" title="Edit profile" onclick={openEditProfile}>
<span class="avatar">{user?.username?.[0]?.toUpperCase() ?? '?'}</span>
<span class="user-name">{user?.username ?? ''}</span>
</button>
<button class="icon-btn signout" title="Sign out" onclick={onSignout}>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</svg>
</button>
</div>
```
**3e — Add styles for the new elements.** In the `<style>` block, add before the final `</style>`:
```css
.edit-profile-form {
display: flex; flex-direction: column; gap: 6px;
padding: 10px 12px;
border-top: 1px solid var(--border-subtle);
animation: rise 0.15s ease;
}
.form-row {
display: flex; gap: 6px;
}
.btn-ghost {
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
}
.btn-ghost:hover { opacity: 0.8; border-color: var(--muted); }
.form-err {
font-size: 10px; color: var(--danger);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-pill {
display: flex; align-items: center; gap: 8px; min-width: 0;
background: none; border: none; cursor: pointer; padding: 0;
font-family: inherit; text-align: left;
}
.user-pill:hover .user-name { color: var(--text); }
```
Note: the existing `.user-pill` in the style block is a `div` style with no cursor. We are replacing the `<div class="user-pill">` with a `<button class="user-pill">` — the new CSS above supersedes any existing `.user-pill` rule. If there's a conflicting rule already in the file, remove the old one.
- [ ] **Step 4: Verify TypeScript types**
```bash
pnpm check 2>&1
```
Expected: no errors.
- [ ] **Step 5: Commit**
```bash
git add src/routes/+page.svelte src/lib/components/Sidebar.svelte
git commit -m "feat: add inline profile editor to sidebar footer"
```
---
## Task 6: Wire add_contact into the sidebar
**Files:**
- Modify: `src/routes/+page.svelte`
- Modify: `src/lib/components/Sidebar.svelte`
- [ ] **Step 1: Add addContact handler in +page.svelte**
In `src/routes/+page.svelte`, add after `updateProfile()`:
```typescript
async function addContact(userId: string) {
await cmd('add_contact', { userId });
contacts = await cmd<User[]>('get_contacts').catch(() => []);
}
```
- [ ] **Step 2: Pass onAddContact to Sidebar**
Find the `<Sidebar ... />` block and add `onAddContact`:
```svelte
<Sidebar
{user}
{rooms}
{contacts}
{activeRoom}
bind:showNewRoom
bind:fRoom
onSelectRoom={selectRoom}
onCreateRoom={createRoom}
onSignout={signout}
onShowMenu={showMenu}
onUpdateProfile={updateProfile}
onAddContact={addContact}
/>
```
- [ ] **Step 3: Add onAddContact prop and add-contact form to Sidebar.svelte**
**3a — Add `onAddContact` to the `interface Props` block:**
Find in Sidebar.svelte:
```typescript
onUpdateProfile: (fields: { username?: string; avatar?: string }) => Promise<void>;
}
```
Replace with:
```typescript
onUpdateProfile: (fields: { username?: string; avatar?: string }) => Promise<void>;
onAddContact: (userId: string) => Promise<void>;
}
```
**3b — Add `onAddContact` to the destructuring block:**
Find:
```typescript
onUpdateProfile,
}: Props = $props();
```
Replace with:
```typescript
onUpdateProfile,
onAddContact,
}: Props = $props();
```
**3c — Add local state and handler for the add-contact form. Add after the profile form state (after `submitProfile()`):**
```typescript
let showAddContact = $state(false);
let fContactId = $state('');
let contactErr = $state('');
async function submitContact() {
if (!fContactId.trim()) return;
contactErr = '';
try {
await onAddContact(fContactId.trim());
fContactId = '';
showAddContact = false;
} catch (e) { contactErr = String(e); }
}
```
**3d — Update the CONTACTS section header and add the form.** Find:
```svelte
<!-- Contacts -->
{#if contacts.length > 0}
<div class="section-label">CONTACTS</div>
<div class="contact-list">
```
Replace with:
```svelte
<!-- Contacts -->
<div class="section-label-row">
<span class="section-label">CONTACTS</span>
<button class="icon-btn" title="Add contact" onclick={() => { showAddContact = !showAddContact; }}>
{showAddContact ? '×' : '+'}
</button>
</div>
{#if showAddContact}
<div class="new-room-form">
<input class="field-sm" placeholder="user id" bind:value={fContactId}
onkeydown={(e) => e.key === 'Enter' && submitContact()} />
<button class="btn-xs" onclick={submitContact}>add</button>
</div>
{#if contactErr}<p class="form-err" style="padding: 0 12px 6px">{contactErr}</p>{/if}
{/if}
{#if contacts.length > 0}
<div class="contact-list">
```
The original code has `{#if contacts.length > 0}` wrapping both the label and list. We are moving the label outside that condition so the "+" button is always visible. The list itself stays inside `{#if contacts.length > 0}`.
- [ ] **Step 4: Add section-label-row style to Sidebar.svelte**
In the `<style>` block, add:
```css
.section-label-row {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 14px 5px 14px;
}
.section-label-row .section-label {
padding: 0;
}
```
Also update the original `.section-label` rule if needed — the existing rule has `padding: 14px 14px 5px`. Since `.section-label-row` handles padding for the row, the `.section-label` inside it needs `padding: 0`. The `section-label-row .section-label` override above handles this.
- [ ] **Step 5: Verify TypeScript types**
```bash
pnpm check 2>&1
```
Expected: no errors.
- [ ] **Step 6: Commit**
```bash
git add src/routes/+page.svelte src/lib/components/Sidebar.svelte
git commit -m "feat: add contact by user ID from sidebar"
```
---
## Task 7: Final build verification
- [ ] **Step 1: Full Rust build**
```bash
cd src-tauri && cargo build 2>&1
```
Expected: compiles successfully. If you see linker errors on Linux, ensure `libwebkit2gtk-4.1-dev` and related Tauri system deps are installed.
- [ ] **Step 2: Full frontend type check**
```bash
pnpm check 2>&1
```
Expected: no errors.
- [ ] **Step 3: Manual functional test checklist**
Start the app with `pnpm tauri dev`, then verify:
- [ ] Sign in → close app → reopen → lands on app view (not auth screen)
- [ ] Sign in → close app → reopen → username shown in sidebar footer
- [ ] Sign out → close app → reopen → lands on auth screen
- [ ] Send a message as User A → right-click own message → "Delete message" appears → click it → message disappears
- [ ] Send a message as User A → right-click someone else's message → "Delete message" does NOT appear
- [ ] Click username pill in sidebar footer → profile edit form expands → edit username → save → sidebar shows new username
- [ ] Press Escape in profile edit form → form closes without saving
- [ ] Click "+" next to CONTACTS → input appears → type a user ID → click add → contacts list refreshes
- [ ] Invalid user ID in add-contact → error shown in form

View File

@@ -0,0 +1,338 @@
# Near-Term Chat Features Implementation Plan
> **For agentic workers:** Use this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. Prefer small, verified slices over one large migration.
**Goal:** Implement the seven highest-impact improvements from the modern chat backlog: direct messages, unread counts and notifications, message editing/reactions/replies, user search, pagination, room membership/private rooms, and stronger token/input safety.
**Architecture:** Move Oxyde from public global rooms toward permissioned conversations. Introduce room membership and room kind first, then layer direct messages, unread state, richer message metadata, search, pagination, notifications, and security hardening on top. Frontend state should keep room summaries separate from loaded message pages so sidebar updates do not force full message reloads.
**Tech Stack:** SvelteKit 5, TypeScript, Tauri 2, Rust, SurrealDB 3, Tauri plugins.
---
## Delivery Order
1. Room membership and private rooms.
2. User search instead of raw user IDs.
3. Direct messages.
4. Message pagination and scroll behavior.
5. Unread counts and notifications.
6. Message editing, reactions, and replies.
7. Secure token storage and validation limits.
This order reduces rework: direct messages and unread counts both depend on membership; richer messages are easier after pagination and room summaries are in place.
---
## Shared Data Model Target
### Tables
| Table | Purpose |
|---|---|
| `room` | Conversation container. Add `kind`, `name`, `created_by`, `created`, `updated`. |
| `room_member` | Membership and per-user room state. Stores `room`, `user`, `role`, `joined`, `last_read_at`, `muted`. |
| `message` | Message body and metadata. Add `updated`, `deleted`, `reply_to`. |
| `message_reaction` | One reaction per user/message/emoji. |
| `contact` | Existing contact graph. Keep, then improve with search/request flows later. |
### Permission Rules
- Users can select rooms only when they are members.
- Users can select messages only for rooms where they are members.
- Users can create messages only in rooms where they are members.
- Users can update/delete only their own messages.
- Users can select room members only for rooms where they are members.
- Direct-message rooms should only include the two participants.
### Suggested Models
Update `src-tauri/src/models.rs` and `src/lib/types.ts` to include:
```ts
export interface Room {
id: any;
name?: string;
kind: 'public' | 'private' | 'direct';
created_by?: any;
created: string;
updated?: string;
last_message?: Message;
unread_count?: number;
}
export interface RoomMember {
id: any;
room: any;
user: any;
role: 'owner' | 'member';
joined: string;
last_read_at?: string;
muted?: boolean;
}
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[];
}
export interface MessageReactionSummary {
emoji: string;
count: number;
reacted_by_me: boolean;
}
```
---
## File Map
| File | Change |
|---|---|
| `surreal/schema.surql` | Add membership, richer message fields, reaction table, indexes, permissions, validation. |
| `src-tauri/src/models.rs` | Add `RoomMember`, richer `Room`, richer `Message`, reaction models, room summary structs. |
| `src/lib/types.ts` | Mirror backend types for frontend state. |
| `src-tauri/src/commands/chat.rs` | Add membership-aware room/message queries, pagination, edit/reply/reaction/read commands. |
| `src-tauri/src/commands/user.rs` | Add user search and eventually credential/profile validation improvements. |
| `src-tauri/src/commands/mod.rs` | Register any new command modules if split. |
| `src-tauri/src/lib.rs` | Register new commands and notification/keychain plugins if used. |
| `src/routes/+page.svelte` | Split room summaries, active room, message page state, unread updates, notification hooks. |
| `src/lib/components/Sidebar.svelte` | User search, direct-message entry points, unread counts, private room UI. |
| `src/lib/components/ChatMain.svelte` | Pagination, edit UI, reply UI, reactions, read markers. |
| `src/lib/components/AuthCard.svelte` | Validation and copy changes if encryption wording changes. |
| `src/lib/helpers.ts` | Add date/cursor helpers and user display helpers as needed. |
---
## Task 1: Room Membership And Private Rooms
**Goal:** Replace global room visibility with explicit membership. Support public rooms as joinable conversations and private rooms as invite-only conversations.
**Files:**
- Modify: `surreal/schema.surql`
- Modify: `src-tauri/src/models.rs`
- Modify: `src/lib/types.ts`
- Modify: `src-tauri/src/commands/chat.rs`
- Modify: `src/routes/+page.svelte`
- Modify: `src/lib/components/Sidebar.svelte`
- [ ] Add `kind` to `room`: `public`, `private`, `direct`.
- [ ] Add `created_by` and `updated` to `room`.
- [ ] Add `room_member` table with `room`, `user`, `role`, `joined`, `last_read_at`, `muted`.
- [ ] Add unique index on `room_member(room, user)`.
- [ ] Update room permissions so `select` requires membership, except optionally public room discovery.
- [ ] Update message permissions so `select` and `create` require room membership.
- [ ] Update `create_room` to create the room and insert the creator as owner/member in one command.
- [ ] Update `get_rooms` to return only rooms where the current user is a member.
- [ ] Add `join_public_room(room_id)` if public room discovery remains available.
- [ ] Add `invite_to_room(room_id, user_id)` for owner/member invitation, depending on chosen rules.
- [ ] Add UI affordances for private/public room creation.
- [ ] Verify old public-room behavior still works for rooms the user creates.
**Acceptance Criteria:**
- A user cannot see rooms they are not a member of.
- A user cannot fetch or send messages in rooms they are not a member of.
- Creating a room makes the creator a member.
- Existing room list and message send flows still work for the creator.
---
## Task 2: User Search Instead Of Raw User IDs
**Goal:** Let users find people by username or email instead of manually copying record IDs.
**Files:**
- Modify: `surreal/schema.surql`
- Modify: `src-tauri/src/commands/user.rs`
- Modify: `src-tauri/src/lib.rs`
- Modify: `src/lib/types.ts`
- Modify: `src/lib/components/Sidebar.svelte`
- Modify: `src/routes/+page.svelte`
- [ ] Add indexes for searchable fields, at least `username`; keep `email` unique.
- [ ] Add validation and privacy rules for what search returns.
- [ ] Add `search_users(query: String) -> Vec<UserSearchResult>`.
- [ ] Exclude the current user from search results.
- [ ] Return safe user fields only: id, username, avatar, maybe email only if product rules allow it.
- [ ] Replace add-contact raw ID field with a search box and selectable results.
- [ ] Use selected search result IDs for `add_contact`, `invite_to_room`, and direct-message creation.
- [ ] Add debouncing in the frontend so search does not run on every keystroke immediately.
**Acceptance Criteria:**
- Contacts can be added without knowing a raw SurrealDB record ID.
- Empty/short searches do not spam the backend.
- Search results do not expose password/token/internal fields.
---
## Task 3: Direct Messages
**Goal:** Add one-to-one conversations that behave like rooms but are created from contacts or user search.
**Files:**
- Modify: `surreal/schema.surql`
- Modify: `src-tauri/src/models.rs`
- Modify: `src-tauri/src/commands/chat.rs`
- Modify: `src/lib/types.ts`
- Modify: `src/routes/+page.svelte`
- Modify: `src/lib/components/Sidebar.svelte`
- Modify: `src/lib/components/ChatMain.svelte`
- [ ] Add `room.kind = 'direct'`.
- [ ] Decide direct room naming: no stored name, display as other participant's username.
- [ ] Add a stable uniqueness guard for direct rooms. Use a deterministic participant key if SurrealDB indexes cannot enforce two-member uniqueness directly.
- [ ] Add `get_or_create_direct_room(user_id) -> Room`.
- [ ] Insert both participants into `room_member` when creating a direct room.
- [ ] Add command/query support to hydrate direct-room display names and avatars.
- [ ] Add "Message" action to contacts/search results.
- [ ] Show direct messages in a separate sidebar section or mixed with rooms using clear labels.
**Acceptance Criteria:**
- Starting a DM with the same user opens the existing direct room.
- Both participants can see and send messages in the DM.
- No third user can read or join the DM.
---
## Task 4: Pagination And Scroll Behavior
**Goal:** Avoid loading every message at once and preserve a stable reading experience.
**Files:**
- Modify: `src-tauri/src/commands/chat.rs`
- Modify: `src/lib/types.ts`
- Modify: `src/routes/+page.svelte`
- Modify: `src/lib/components/ChatMain.svelte`
- Modify: `src/lib/helpers.ts`
- [ ] Change `get_messages(room_id)` into a paginated command, for example `get_messages(room_id, before?: datetime, limit?: number)`.
- [ ] Return messages newest-page aware but render oldest-to-newest in the UI.
- [ ] Add an index on `message(room, created)`.
- [ ] Track `hasOlderMessages`, `isLoadingOlder`, and `oldestCursor` in page state.
- [ ] Load older messages when the user scrolls near the top.
- [ ] Preserve scroll offset after prepending older messages.
- [ ] Only auto-scroll to bottom when the user is already near the bottom or the message is authored by the current user.
- [ ] Keep the live subscription for new messages in the active room.
**Acceptance Criteria:**
- Opening a room loads a bounded number of messages.
- Scrolling upward loads older messages without jumping.
- New incoming messages do not force-scroll users who are reading history.
---
## Task 5: Unread Counts And Notifications
**Goal:** Make missed messages visible in the sidebar and via desktop notifications when appropriate.
**Files:**
- Modify: `surreal/schema.surql`
- Modify: `src-tauri/src/models.rs`
- Modify: `src-tauri/src/commands/chat.rs`
- Modify: `src-tauri/src/lib.rs`
- Modify: `src/lib/types.ts`
- Modify: `src/routes/+page.svelte`
- Modify: `src/lib/components/Sidebar.svelte`
- [ ] Add or use `room_member.last_read_at`.
- [ ] Add `mark_room_read(room_id)` command.
- [ ] Update room summary query to include `last_message` and `unread_count`.
- [ ] Mark the active room read when opened and when the user reaches the bottom.
- [ ] Increment/update unread room summaries when live events arrive for inactive rooms.
- [ ] Add visual unread badges in the sidebar.
- [ ] Add Tauri notification plugin if not already available.
- [ ] Request notification permission at a sensible moment.
- [ ] Send native notifications for messages in inactive rooms when the app is unfocused and the room is not muted.
- [ ] Add `muted` support from `room_member.muted` to suppress notifications.
**Acceptance Criteria:**
- Inactive room messages increase unread count.
- Opening or reading a room clears its unread count for the current user.
- Desktop notifications fire only when useful and respect muted rooms.
---
## Task 6: Message Editing, Reactions, And Replies
**Goal:** Add the message interactions users expect without disrupting the current simple composer.
**Files:**
- Modify: `surreal/schema.surql`
- Modify: `src-tauri/src/models.rs`
- Modify: `src-tauri/src/commands/chat.rs`
- Modify: `src/lib/types.ts`
- Modify: `src/routes/+page.svelte`
- Modify: `src/lib/components/ChatMain.svelte`
- Modify: `src/lib/components/ContextMenu.svelte` if richer menu state is needed.
- [ ] Add `updated`, `deleted`, and `reply_to` fields to `message`.
- [ ] Replace hard delete with soft delete for normal message deletion.
- [ ] Add `edit_message(message_id, body)` command with author-only permission.
- [ ] Add `send_message(room_id, body, reply_to?)`.
- [ ] Add `message_reaction` table with `message`, `user`, `emoji`, `created`.
- [ ] Add unique index on `message_reaction(message, user, emoji)`.
- [ ] Add `toggle_reaction(message_id, emoji)` command.
- [ ] Include reaction summaries when fetching messages.
- [ ] Add context menu actions for edit, reply, delete, copy.
- [ ] Add inline edit mode for the user's own messages.
- [ ] Add reply preview above the composer and reply reference rendering in the message list.
- [ ] Add a small reaction picker or a short default emoji row.
- [ ] Ensure live update events update edited messages, deleted messages, and reactions.
**Acceptance Criteria:**
- Users can edit only their own messages.
- Replies show enough context to identify the parent message.
- Reactions toggle reliably and aggregate counts across users.
- Deleted messages leave a useful placeholder instead of breaking replies.
---
## Task 7: Secure Token Storage And Validation Limits
**Goal:** Reduce security and data-quality risks before the app grows more social features.
**Files:**
- Modify: `src-tauri/Cargo.toml`
- Modify: `src-tauri/src/lib.rs`
- Modify: `src-tauri/src/commands/user.rs`
- Modify: `src-tauri/src/commands/chat.rs`
- Modify: `surreal/schema.surql`
- Modify: `src/lib/components/AuthCard.svelte`
- Modify: `src/lib/components/Sidebar.svelte`
- Modify: `src/lib/components/ChatMain.svelte`
- [ ] Replace plain `tauri-plugin-store` token persistence with OS-backed secure storage where practical.
- [ ] If secure storage is not immediately available on every target platform, isolate token storage behind helper functions so the backend can swap implementations later.
- [ ] Add username length and character validation.
- [ ] Add email length validation.
- [ ] Add password minimum length in signup.
- [ ] Add room name length validation.
- [ ] Add message body length validation.
- [ ] Add avatar URL validation or remove avatar URL until uploads/proxying exist.
- [ ] Add SurrealDB schema assertions where possible, and duplicate key user-facing errors in Rust for better messages.
- [ ] Remove or revise the auth tagline claim `encrypted` unless end-to-end encryption is implemented.
- [ ] Add tests for validation boundaries in Rust command-level helpers where possible.
**Acceptance Criteria:**
- Session tokens are not stored as plain JSON when a supported secure storage path is available.
- Invalid inputs fail before they create malformed records.
- Error messages are useful to users.
- Product copy no longer overclaims encryption.
---
## Verification Plan
- [ ] Run `pnpm check` after each frontend slice.
- [ ] Run `cargo test` or `cargo check` inside `src-tauri` after each Rust slice.
- [ ] Manually test with two users: public room, private room, direct message, message send, edit, reply, reaction, unread clear, notification, and signout/session restore.
- [ ] Test permission failures by trying to fetch a room/message as a non-member.
- [ ] Test scroll pagination with enough messages to require at least three pages.

View File

@@ -0,0 +1,128 @@
# Design: Persistent Login + Unused Commands UI
**Date:** 2026-04-17
**Status:** Approved
---
## Overview
Two features:
1. **Persistent login** — users sign in once per machine; the session is restored on next app launch unless they explicitly sign out.
2. **Unused commands** — wire `delete_message`, `update_profile`, and `add_contact` into the frontend; currently these backend commands have no UI.
---
## Feature 1: Persistent Login
### Architecture
Use `tauri-plugin-store` (official Tauri v2 JSON store plugin) to persist the JWT token to disk in the app data directory.
Store file: `session.json`
Store key: `"token"` (string value)
### Backend changes
**`Cargo.toml`**
- Add `tauri-plugin-store = "2"`
**`lib.rs`**
- Register `.plugin(tauri_plugin_store::Builder::default().build())` in `tauri::Builder`
**`commands/user.rs`**
- `signin`: add `app_handle: AppHandle` parameter. After setting `state.token`, open the store and write the token string under key `"token"`.
- `signup`: same — after setting `state.token`, write token to store.
- `signout`: add `app_handle: AppHandle` parameter. After `db.invalidate()`, open the store and delete the `"token"` key.
- New command `restore_session`: opens the store, reads `"token"`. If absent → return error (frontend shows auth screen). If present → call `state.db.authenticate(jwt)` with the token, then query `SELECT * FROM $auth`. If the query returns a user → update `state.token` and return `User`. If authenticate fails (expired/invalid) → delete the token from the store, clear `state.token`, return error.
**`lib.rs` invoke_handler**
- Add `commands::user::restore_session` to the handler list.
### Frontend changes
**`src/routes/+page.svelte`**
- `init()`: replace `cmd<User>('get_me')` with `cmd<User>('restore_session')`. Behaviour is identical from the frontend's perspective — success → app view, error → auth view.
No other frontend changes needed for this feature; token save/clear happens entirely on the Rust side inside the existing signin/signup/signout commands.
### Data flow
```
App launch → init() → restore_session
├─ token on disk, valid → User returned → app view
├─ token on disk, expired → store cleared → error → auth view
└─ no token → error → auth view
signin/signup → token saved to store automatically
signout → token removed from store automatically
```
---
## Feature 2: Unused Commands UI
### 2a. Delete Message
**Backend:** `delete_message(message_id: String)` already exists. Enforces `WHERE author = $auth` so only the author can delete.
**`src/routes/+page.svelte`**
- Add `deleteMessage(msgId: string)`: calls `cmd('delete_message', { messageId: msgId })`, then filters the deleted message from local `messages` state on success.
- Pass `onDeleteMessage: (msgId: string) => void` prop to `ChatMain`.
**`src/lib/components/ChatMain.svelte`**
- Accept `onDeleteMessage` prop.
- Message context menu: add `{ label: 'Delete message', action: () => onDeleteMessage(full(msg.id)) }` item, only when `full(msg.author) === full(user?.id)` (own messages only — avoids confusing menu items for others' messages; backend already enforces the constraint server-side).
- `ChatMain` needs `user` prop passed from parent to perform the author check.
### 2b. Update Profile
**Backend:** `update_profile(username?: String, avatar?: String)` already exists. Returns updated `User`.
**`src/lib/components/Sidebar.svelte`**
- Add `showEditProfile: boolean` local state (default `false`).
- Clicking the user pill (name/avatar area) in the footer toggles `showEditProfile`.
- When open: render an inline edit form above the footer (same visual pattern as the new-room form — fade-in animation, small field + save button).
- Fields: `username` (pre-filled with current value), `avatar` (pre-filled, optional URL).
- Save button calls `onUpdateProfile({ username, avatar })` callback.
- Cancel button (or pressing Escape) closes the form without saving.
- Add `onUpdateProfile: (fields: { username?: string; avatar?: string }) => Promise<void>` to Sidebar's Props interface.
**`src/routes/+page.svelte`**
- Add `updateProfile(fields)` function: calls `cmd<User>('update_profile', fields)` → updates `user` state with returned value.
- Pass `onUpdateProfile={updateProfile}` to `Sidebar`.
### 2c. Add Contact
**Backend:** `add_contact(user_id: String)` already exists. Returns a `Contact` record.
**`src/lib/components/Sidebar.svelte`**
- Add `showAddContact: boolean` local state (default `false`).
- Add a "+" `icon-btn` next to the CONTACTS section label (always visible even when contacts list is empty) to toggle `showAddContact`.
- When open: render inline form (same pattern as new-room form) with a single text input labelled "user id".
- On submit: call `onAddContact(userId)` callback, then close form.
- Add `onAddContact: (userId: string) => Promise<void>` to Sidebar's Props interface.
**`src/routes/+page.svelte`**
- Add `addContact(userId: string)` function: calls `cmd('add_contact', { userId })` → on success calls `get_contacts` to refresh the contacts list and update `contacts` state.
- Pass `onAddContact={addContact}` to `Sidebar`.
---
## Error handling
- `restore_session`: any error (missing token, expired, network) → auth view. No toast/message needed — user just sees the login screen.
- `deleteMessage`: errors shown in existing `err` state variable (already displayed in channel header).
- `updateProfile`: errors surfaced inside the edit form (local error state in Sidebar).
- `addContact`: errors surfaced inside the add-contact form (local error state in Sidebar).
---
## Out of scope
- User search (no backend command exists; add_contact uses raw user IDs for now)
- Token refresh / expiry detection during an active session
- Avatar image upload (update_profile accepts URL strings only)

View File

@@ -0,0 +1,93 @@
# Modern Chat App Todo
**Date:** 2026-04-18
**Status:** Draft
## Overview
Oxyde currently has a compact chat foundation: authentication, persistent session restore, public rooms, live message updates, contacts, profile editing, message delete, and context menus. This backlog lists user-facing improvements that would make it feel closer to a modern desktop chat app.
## Core Chat
- [ ] Add message editing, with an edited timestamp or marker.
- [ ] Add replies or lightweight threads so users can respond to a specific message.
- [ ] Add reactions, starting with emoji reactions on messages.
- [ ] Add read receipts or "seen by" state for direct and group conversations.
- [ ] Add typing indicators per room.
- [ ] Add message pagination or infinite scroll instead of loading every message in a room.
- [ ] Add message search across the current room and all rooms.
- [ ] Add link previews for URLs in messages.
- [ ] Add file and image attachments with preview support.
- [ ] Add Markdown-style formatting for code, links, bold text, lists, and multiline blocks.
## Rooms And Conversations
- [ ] Add private direct messages between contacts.
- [ ] Add room membership instead of fully public rooms.
- [ ] Add invite flows for rooms and contacts instead of requiring raw user IDs.
- [ ] Add room settings: rename room, delete room, leave room.
- [ ] Add pinned messages per room.
- [ ] Add room unread counts and last-message previews in the sidebar.
- [ ] Add notification badges when messages arrive outside the active room.
- [ ] Add muted rooms or per-room notification settings.
## Contacts And Identity
- [ ] Replace "add contact by user ID" with user search by username or email.
- [ ] Add contact requests and approval instead of immediately adding contacts.
- [ ] Show real avatars instead of only username initials.
- [ ] Add presence states: online, idle, offline, and do-not-disturb.
- [ ] Add profile cards when clicking or right-clicking a user.
- [ ] Add account settings for email and password changes.
- [ ] Add password reset or recovery flow.
## Reliability And UX
- [ ] Add optimistic sending states: sending, sent, failed, retry.
- [ ] Add offline handling and reconnect indicators.
- [ ] Add local draft persistence per room.
- [ ] Preserve scroll position when switching rooms.
- [ ] Avoid always auto-scrolling if the user is reading older messages.
- [ ] Add empty, error, and loading states for room list, contacts, and messages.
- [ ] Add toast notifications for copy, delete, save, and failed actions.
- [ ] Add keyboard shortcuts: room switcher, search, focus composer, escape modals.
- [ ] Add accessibility pass: focus states, ARIA labels, keyboard context menus.
## Security And Privacy
- [ ] Clarify whether "encrypted" is real; the auth screen says encrypted, but messages currently appear stored as plain text.
- [ ] Add end-to-end encryption or remove encryption claims until implemented.
- [ ] Store session tokens more securely where possible, ideally via OS keychain or credential storage instead of plain app store JSON.
- [ ] Add rate limits or abuse protection for room and message creation.
- [ ] Add validation and length limits for usernames, room names, avatars, and message bodies.
- [ ] Add block and report user flows.
## Desktop App Polish
- [ ] Add native notifications for background messages.
- [ ] Add tray behavior or "minimize to tray" settings.
- [ ] Add app update flow.
- [ ] Add deep links or app links for room invites.
- [ ] Add platform-specific menu items: preferences, quit, about.
- [ ] Add window state persistence: size, position, last active room.
- [ ] Add themes, including light, dark, and system options.
- [ ] Add responsive layout for narrower windows.
## Data Model And Backend
- [ ] Add room membership tables and permissions. Rooms and messages are currently broadly selectable in `surreal/schema.surql`.
- [ ] Add message metadata fields like `updated`, `deleted`, `reply_to`, `attachments`, and `reactions`.
- [ ] Add indexes for common queries: messages by room and created timestamp, contacts by owner, room memberships.
- [ ] Add proper soft delete for messages instead of hard delete.
- [ ] Add migrations or versioning for schema changes.
- [ ] Add tests around auth permissions, contact visibility, message ownership, and live subscriptions.
## Near-Term Best Bets
- [ ] Direct messages.
- [ ] Unread counts and notifications.
- [ ] Message editing, reactions, and replies.
- [ ] User search instead of raw user IDs.
- [ ] Pagination or infinite scroll.
- [ ] Room membership and private rooms.
- [ ] Secure token storage and validation limits.

View File

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

19
src-tauri/Cargo.lock generated
View File

@@ -3824,7 +3824,7 @@ dependencies = [
[[package]]
name = "oxyde"
version = "0.1.0"
version = "0.1.1"
dependencies = [
"futures-util",
"serde",
@@ -3834,6 +3834,7 @@ dependencies = [
"tauri",
"tauri-build",
"tauri-plugin-opener",
"tauri-plugin-store",
"thiserror 2.0.18",
"tokio",
"uuid",
@@ -6341,6 +6342,22 @@ dependencies = [
"zbus",
]
[[package]]
name = "tauri-plugin-store"
version = "2.4.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5ca1a8ff83c269b115e98726ffc13f9e548a10161544a92ad121d6d0a96e16ea"
dependencies = [
"dunce",
"serde",
"serde_json",
"tauri",
"tauri-plugin",
"thiserror 2.0.18",
"tokio",
"tracing",
]
[[package]]
name = "tauri-runtime"
version = "2.10.1"

View File

@@ -1,8 +1,8 @@
[package]
name = "oxyde"
version = "0.1.0"
description = "A Tauri App"
authors = ["you"]
version = "0.1.1"
description = "A simple Tauri chat app, built with rust, vite, and surrealdb"
authors = ["qdust41"]
edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
@@ -20,6 +20,7 @@ tauri-build = { version = "2", features = [] }
[dependencies]
tauri = { version = "2", features = [] }
tauri-plugin-opener = "2"
tauri-plugin-store = "2"
serde = { version = "1", features = ["derive"] }
serde_json = "1"
surrealdb = { version = "3.0.5", features = ["native-tls"] }
@@ -28,4 +29,3 @@ tokio = { version = "1.52.0", features = ["full"] }
thiserror = "2.0.18"
uuid = { version = "1", features = ["v4"] }
futures-util = "0.3"

View File

@@ -1,11 +1,19 @@
use std::collections::HashMap;
use futures_util::StreamExt;
use surrealdb::types::{RecordId, RecordIdKey};
use surrealdb::Notification;
use tauri::{AppHandle, Emitter, State};
use uuid::Uuid;
use futures_util::StreamExt;
use surrealdb::Notification;
use crate::db::AppState;
use crate::error::{into_err, AppError};
use crate::models::{Message, Room};
use crate::models::{Message, MessageReaction, MessageReactionSummary, Room, User};
const DEFAULT_PAGE_SIZE: i64 = 50;
const MAX_PAGE_SIZE: i64 = 100;
const MAX_MESSAGE_LEN: usize = 4000;
const MAX_ROOM_NAME_LEN: usize = 80;
/// Wrapper emitted to the frontend for each LIVE query notification.
/// Includes the action type so the frontend can distinguish create/update/delete.
@@ -15,36 +23,356 @@ struct LiveMessageEvent<'a> {
data: &'a Message,
}
/// Create a new chat room.
fn validate_room_name(name: &str) -> Result<(), String> {
let trimmed = name.trim();
if trimmed.is_empty() {
return Err(AppError::Auth("room name is required".into()).to_string());
}
if trimmed.chars().count() > MAX_ROOM_NAME_LEN {
return Err(AppError::Auth(format!(
"room name must be {MAX_ROOM_NAME_LEN} characters or less"
))
.to_string());
}
Ok(())
}
fn validate_message_body(body: &str) -> Result<(), String> {
let trimmed = body.trim();
if trimmed.is_empty() {
return Err(AppError::Auth("message cannot be empty".into()).to_string());
}
if trimmed.chars().count() > MAX_MESSAGE_LEN {
return Err(AppError::Auth(format!(
"message must be {MAX_MESSAGE_LEN} characters or less"
))
.to_string());
}
Ok(())
}
fn record_key_string(id: &RecordId) -> String {
match &id.key {
RecordIdKey::String(value) => value.clone(),
RecordIdKey::Number(value) => value.to_string(),
RecordIdKey::Uuid(value) => value.to_string(),
other => format!("{other:?}"),
}
}
fn user_record_key(user_id: &str) -> String {
let user_id = user_id.trim();
if let Some((table, key)) = user_id.split_once(':') {
if table == "user" {
return format!("user:{key}");
}
}
format!("user:{user_id}")
}
fn user_id_key(user_id: &str) -> String {
let user_id = user_id.trim();
if let Some((table, key)) = user_id.split_once(':') {
if table == "user" {
return key.to_string();
}
}
user_id.to_string()
}
fn direct_room_key(current_user: &RecordId, target_user_id: &str) -> String {
let mut participants = [
user_record_key(&record_key_string(current_user)),
user_record_key(target_user_id),
];
participants.sort();
participants.join("|")
}
async fn current_user(state: &State<'_, AppState>) -> Result<User, String> {
let mut result: Vec<User> = state
.db
.query("SELECT * FROM $auth")
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
result
.pop()
.ok_or_else(|| into_err(AppError::Auth("not authenticated".into())))
}
async fn hydrate_reactions(
state: &State<'_, AppState>,
user: &User,
messages: &mut [Message],
) -> Result<(), String> {
for message in messages {
let reactions: Vec<MessageReaction> = state
.db
.query("SELECT * FROM message_reaction WHERE message = $message")
.bind(("message", message.id.clone()))
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
let mut grouped: HashMap<String, MessageReactionSummary> = HashMap::new();
for reaction in reactions {
let entry = grouped
.entry(reaction.emoji.clone())
.or_insert(MessageReactionSummary {
emoji: reaction.emoji,
count: 0,
reacted_by_me: false,
});
entry.count += 1;
if reaction.user == user.id {
entry.reacted_by_me = true;
}
}
let mut summaries: Vec<MessageReactionSummary> = grouped.into_values().collect();
summaries.sort_by(|a, b| a.emoji.cmp(&b.emoji));
message.reactions = Some(summaries);
}
Ok(())
}
async fn hydrate_direct_rooms(
state: &State<'_, AppState>,
rooms: &mut [Room],
) -> Result<(), String> {
for room in rooms.iter_mut().filter(|room| room.kind == "direct") {
let mut users: Vec<User> = state
.db
.query(
"SELECT * FROM user
WHERE id IN (
SELECT VALUE user FROM room_member
WHERE room = $room AND user != $auth
)
LIMIT 1",
)
.bind(("room", room.id.clone()))
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
room.other_user = users.pop();
}
Ok(())
}
fn dedupe_direct_rooms(rooms: Vec<Room>) -> Vec<Room> {
let mut seen_direct_users = HashMap::new();
let mut deduped = Vec::with_capacity(rooms.len());
for room in rooms {
if room.kind == "direct" {
if let Some(other_user) = &room.other_user {
let key = user_record_key(&record_key_string(&other_user.id));
if seen_direct_users.insert(key, ()).is_some() {
continue;
}
}
}
deduped.push(room);
}
deduped
}
/// Create a new chat room and add the creator as owner.
#[tauri::command]
pub async fn create_room(
state: State<'_, AppState>,
name: String,
kind: Option<String>,
) -> Result<Room, String> {
validate_room_name(&name)?;
let room_kind = kind.unwrap_or_else(|| "public".to_string());
if !matches!(room_kind.as_str(), "public" | "private") {
return Err(AppError::Auth("room kind must be public or private".into()).to_string());
}
let mut result: Vec<Room> = state
.db
.query("CREATE room SET name = $name, created = time::now()")
.bind(("name", name))
.query(
"CREATE room SET
name = $name,
kind = $kind,
created_by = $auth,
created = time::now(),
updated = time::now()",
)
.bind(("name", name.trim().to_string()))
.bind(("kind", room_kind))
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
result.pop().ok_or_else(|| into_err(AppError::NotFound("room after create".into())))
let room = result
.pop()
.ok_or_else(|| into_err(AppError::NotFound("room after create".into())))?;
state
.db
.query(
"CREATE room_member SET
room = $room,
user = $auth,
role = 'owner',
joined = time::now(),
last_read_at = time::now(),
muted = false",
)
.bind(("room", room.id.clone()))
.await
.map_err(into_err)?;
Ok(room)
}
/// Fetch all rooms.
/// Fetch public rooms and rooms the current user belongs to.
#[tauri::command]
pub async fn get_rooms(state: State<'_, AppState>) -> Result<Vec<Room>, String> {
let result: Vec<Room> = state
let mut result: Vec<Room> = state
.db
.query("SELECT * FROM room ORDER BY created DESC")
.query(
"SELECT * FROM room
WHERE kind = 'public' OR id IN (SELECT VALUE room FROM room_member WHERE user = $auth)
ORDER BY updated DESC, created DESC",
)
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
Ok(result)
hydrate_direct_rooms(&state, &mut result).await?;
Ok(dedupe_direct_rooms(result))
}
/// Add a user to a room. Room owners can invite others.
#[tauri::command]
pub async fn invite_to_room(
state: State<'_, AppState>,
room_id: String,
user_id: String,
) -> Result<(), String> {
state
.db
.query(
"CREATE room_member SET
room = type::record('room', $room_id),
user = type::record('user', $user_id),
role = 'member',
joined = time::now(),
muted = false",
)
.bind(("room_id", room_id))
.bind(("user_id", user_id))
.await
.map_err(into_err)?;
Ok(())
}
/// Return an existing direct room for two users or create it.
#[tauri::command]
pub async fn get_or_create_direct_room(
state: State<'_, AppState>,
user_id: String,
) -> Result<Room, String> {
let me = current_user(&state).await?;
let target_user_id = user_id_key(&user_id);
let current_user_key = record_key_string(&me.id);
if user_record_key(&current_user_key) == user_record_key(&target_user_id) {
return Err(
AppError::Auth("cannot start a direct message with yourself".into()).to_string(),
);
}
let direct_key = direct_room_key(&me.id, &target_user_id);
let mut existing: Vec<Room> = state
.db
.query("SELECT * FROM room WHERE kind = 'direct' AND direct_key = $direct_key LIMIT 1")
.bind(("direct_key", direct_key.clone()))
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
if let Some(mut room) = existing.pop() {
hydrate_direct_rooms(&state, std::slice::from_mut(&mut room)).await?;
return Ok(room);
}
let mut existing_by_members: Vec<Room> = state
.db
.query(
"SELECT * FROM room
WHERE kind = 'direct'
AND id IN (SELECT VALUE room FROM room_member WHERE user = $auth)
AND id IN (SELECT VALUE room FROM room_member WHERE user = type::record('user', $user_id))
ORDER BY updated DESC, created DESC
LIMIT 1",
)
.bind(("user_id", target_user_id.clone()))
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
if let Some(mut room) = existing_by_members.pop() {
hydrate_direct_rooms(&state, std::slice::from_mut(&mut room)).await?;
return Ok(room);
}
let mut created: Vec<Room> = state
.db
.query(
"CREATE room SET
name = NONE,
kind = 'direct',
direct_key = $direct_key,
created_by = $auth,
created = time::now(),
updated = time::now()",
)
.bind(("direct_key", direct_key))
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
let room = created
.pop()
.ok_or_else(|| into_err(AppError::NotFound("direct room after create".into())))?;
state
.db
.query(
"CREATE room_member SET room = $room, user = $auth, role = 'owner', joined = time::now(), last_read_at = time::now(), muted = false;
CREATE room_member SET room = $room, user = type::record('user', $user_id), role = 'member', joined = time::now(), muted = false;",
)
.bind(("room", room.id.clone()))
.bind(("user_id", target_user_id))
.await
.map_err(into_err)?;
let mut room = room;
hydrate_direct_rooms(&state, std::slice::from_mut(&mut room)).await?;
Ok(room)
}
/// Send a message to a room.
@@ -53,54 +381,101 @@ pub async fn send_message(
state: State<'_, AppState>,
room_id: String,
body: String,
reply_to: Option<String>,
) -> Result<Message, String> {
let mut result: Vec<Message> = state
.db
.query(
validate_message_body(&body)?;
let query = if reply_to.is_some() {
"CREATE message SET
room = type::record('room', $room_id),
author = $auth,
author_username = $auth.username,
body = $body,
created = time::now()",
)
reply_to = type::record('message', $reply_to),
deleted = false,
created = time::now();
UPDATE type::record('room', $room_id) SET updated = time::now();"
} else {
"CREATE message SET
room = type::record('room', $room_id),
author = $auth,
author_username = $auth.username,
body = $body,
deleted = false,
created = time::now();
UPDATE type::record('room', $room_id) SET updated = time::now();"
};
let mut response = state
.db
.query(query)
.bind(("room_id", room_id))
.bind(("body", body))
.bind(("body", body.trim().to_string()));
if let Some(reply_to) = reply_to {
response = response.bind(("reply_to", reply_to));
}
let mut result: Vec<Message> = response
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
result.pop().ok_or_else(|| into_err(AppError::NotFound("message after create".into())))
result
.pop()
.ok_or_else(|| into_err(AppError::NotFound("message after create".into())))
}
/// Fetch all messages in a room, oldest first.
/// Fetch a bounded page of messages in a room, oldest first.
#[tauri::command]
pub async fn get_messages(
state: State<'_, AppState>,
room_id: String,
before: Option<String>,
limit: Option<i64>,
) -> Result<Vec<Message>, String> {
let result: Vec<Message> = state
let limit = limit.unwrap_or(DEFAULT_PAGE_SIZE).clamp(1, MAX_PAGE_SIZE);
let query = if before.is_some() {
"SELECT * FROM message
WHERE room = type::record('room', $room_id) AND created < <datetime>$before
ORDER BY created DESC
LIMIT $limit"
} else {
"SELECT * FROM message
WHERE room = type::record('room', $room_id)
ORDER BY created DESC
LIMIT $limit"
};
let mut response = state
.db
.query("SELECT * FROM message WHERE room = type::record('room', $room_id) ORDER BY created ASC")
.query(query)
.bind(("room_id", room_id))
.bind(("limit", limit));
if let Some(before) = before {
response = response.bind(("before", before));
}
let mut result: Vec<Message> = response
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
result.reverse();
let user = current_user(&state).await?;
hydrate_reactions(&state, &user, &mut result).await?;
Ok(result)
}
/// Delete a message by its ID string (e.g. "message:abc123").
/// Soft-delete a message by its ID string.
#[tauri::command]
pub async fn delete_message(
state: State<'_, AppState>,
message_id: String,
) -> Result<(), String> {
pub async fn delete_message(state: State<'_, AppState>, message_id: String) -> Result<(), String> {
state
.db
.query("DELETE type::record($id) WHERE author = $auth")
.query("UPDATE type::record($id) SET deleted = true, body = '', updated = time::now() WHERE author = $auth")
.bind(("id", message_id))
.await
.map_err(into_err)?;
@@ -108,6 +483,85 @@ pub async fn delete_message(
Ok(())
}
/// Edit the current user's message.
#[tauri::command]
pub async fn edit_message(
state: State<'_, AppState>,
message_id: String,
body: String,
) -> Result<Message, String> {
validate_message_body(&body)?;
let mut result: Vec<Message> = state
.db
.query("UPDATE type::record($id) SET body = $body, updated = time::now() WHERE author = $auth RETURN AFTER")
.bind(("id", message_id))
.bind(("body", body.trim().to_string()))
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
result
.pop()
.ok_or_else(|| into_err(AppError::NotFound("message".into())))
}
/// Toggle one emoji reaction for the current user.
#[tauri::command]
pub async fn toggle_reaction(
state: State<'_, AppState>,
message_id: String,
emoji: String,
) -> Result<(), String> {
let emoji = emoji.trim();
if emoji.is_empty() || emoji.chars().count() > 16 {
return Err(AppError::Auth("invalid reaction".into()).to_string());
}
let existing: Vec<MessageReaction> = state
.db
.query("SELECT * FROM message_reaction WHERE message = type::record($message_id) AND user = $auth AND emoji = $emoji")
.bind(("message_id", message_id.clone()))
.bind(("emoji", emoji.to_string()))
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
if existing.is_empty() {
state
.db
.query("CREATE message_reaction SET message = type::record($message_id), user = $auth, emoji = $emoji, created = time::now()")
.bind(("message_id", message_id))
.bind(("emoji", emoji.to_string()))
.await
.map_err(into_err)?;
} else {
state
.db
.query("DELETE message_reaction WHERE message = type::record($message_id) AND user = $auth AND emoji = $emoji")
.bind(("message_id", message_id))
.bind(("emoji", emoji.to_string()))
.await
.map_err(into_err)?;
}
Ok(())
}
/// Mark the room read for the current user.
#[tauri::command]
pub async fn mark_room_read(state: State<'_, AppState>, room_id: String) -> Result<(), String> {
state
.db
.query("UPDATE room_member SET last_read_at = time::now() WHERE room = type::record('room', $room_id) AND user = $auth")
.bind(("room_id", room_id))
.await
.map_err(into_err)?;
Ok(())
}
/// Start a LIVE query for new messages in a room.
/// Spawns a background tokio task that emits "chat:message" Tauri events.
///
@@ -133,10 +587,13 @@ pub async fn subscribe_room(
let handle = tokio::spawn(async move {
while let Some(Ok(notification)) = stream.next().await {
let _ = app_handle.emit("chat:message", &LiveMessageEvent {
let _ = app_handle.emit(
"chat:message",
&LiveMessageEvent {
action: format!("{:?}", notification.action),
data: &notification.data,
});
},
);
}
});
@@ -148,10 +605,7 @@ pub async fn subscribe_room(
/// Stop a LIVE query subscription.
/// Aborts the background task — dropping the stream closes the LIVE query.
#[tauri::command]
pub async fn unsubscribe_room(
state: State<'_, AppState>,
sub_id: String,
) -> Result<(), String> {
pub async fn unsubscribe_room(state: State<'_, AppState>, sub_id: String) -> Result<(), String> {
let uuid = sub_id
.parse::<Uuid>()
.map_err(|e| into_err(AppError::Subscription(e.to_string())))?;

View File

@@ -1,31 +1,93 @@
use tauri::State;
use tauri::{AppHandle, State};
use tauri_plugin_store::StoreExt;
use crate::db::{AppState, SURREAL_ACCESS, SURREAL_DB, SURREAL_NS};
use crate::error::{into_err, AppError};
use crate::models::{Contact, User};
const SESSION_STORE: &str = "session.json";
const TOKEN_KEY: &str = "token";
const MIN_PASSWORD_LEN: usize = 8;
const MAX_USERNAME_LEN: usize = 32;
const MAX_EMAIL_LEN: usize = 254;
fn validate_email(email: &str) -> Result<(), String> {
let email = email.trim();
if email.is_empty() || email.len() > MAX_EMAIL_LEN || !email.contains('@') {
return Err(AppError::Auth("enter a valid email address".into()).to_string());
}
Ok(())
}
fn validate_password(password: &str) -> Result<(), String> {
if password.chars().count() < MIN_PASSWORD_LEN {
return Err(AppError::Auth(format!(
"password must be at least {MIN_PASSWORD_LEN} characters"
))
.to_string());
}
Ok(())
}
fn validate_username(username: &str) -> Result<(), String> {
let username = username.trim();
if username.is_empty() || username.chars().count() > MAX_USERNAME_LEN {
return Err(
AppError::Auth(format!("username must be 1-{MAX_USERNAME_LEN} characters")).to_string(),
);
}
if !username
.chars()
.all(|c| c.is_ascii_alphanumeric() || c == '_' || c == '-' || c == '.')
{
return Err(
AppError::Auth("username can use letters, numbers, _, -, and .".into()).to_string(),
);
}
Ok(())
}
fn validate_avatar(avatar: &Option<String>) -> Result<(), String> {
if let Some(avatar) = avatar {
let avatar = avatar.trim();
if !avatar.is_empty() && !(avatar.starts_with("https://") || avatar.starts_with("http://"))
{
return Err(
AppError::Auth("avatar must be a valid http or https URL".into()).to_string(),
);
}
}
Ok(())
}
/// Create a new user account via SurrealDB Record Auth SIGNUP.
/// Returns the created User record.
/// Returns the created User record. Persists the JWT token to disk.
#[tauri::command]
pub async fn signup(
state: State<'_, AppState>,
app_handle: AppHandle,
email: String,
username: String,
password: String,
) -> Result<User, String> {
validate_email(&email)?;
validate_username(&username)?;
validate_password(&password)?;
let credentials = surrealdb::opt::auth::Record {
access: SURREAL_ACCESS.to_string(),
namespace: SURREAL_NS.to_string(),
database: SURREAL_DB.to_string(),
params: serde_json::json!({
"email": email,
"username": username,
"email": email.trim(),
"username": username.trim(),
"password": password,
}),
};
// into_insecure_token() returns the raw JWT String directly (3.x API).
let token = state.db.signup(credentials).await.map_err(into_err)?;
*state.token.lock().unwrap() = Some(token.access.into_insecure_token());
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
.db
@@ -35,41 +97,94 @@ pub async fn signup(
.take(0)
.map_err(into_err)?;
result.pop().ok_or_else(|| into_err(AppError::Auth("signup succeeded but $auth not set".into())))
result
.pop()
.ok_or_else(|| into_err(AppError::Auth("signup succeeded but $auth not set".into())))
}
/// Authenticate an existing user via SurrealDB Record Auth SIGNIN.
/// Returns the JWT token string.
/// Returns the JWT token string. Persists the token to disk.
#[tauri::command]
pub async fn signin(
state: State<'_, AppState>,
app_handle: AppHandle,
email: String,
password: String,
) -> Result<String, String> {
validate_email(&email)?;
validate_password(&password)?;
let credentials = surrealdb::opt::auth::Record {
access: SURREAL_ACCESS.to_string(),
namespace: SURREAL_NS.to_string(),
database: SURREAL_DB.to_string(),
params: serde_json::json!({
"email": email,
"email": email.trim(),
"password": password,
}),
};
let token_str = state.db.signin(credentials).await.map_err(into_err)?.access.into_insecure_token();
let token_str = state
.db
.signin(credentials)
.await
.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)
}
/// Clear the current session. Invalidates the token in state.
/// Clear the current session. Invalidates the token in state and removes it from disk.
#[tauri::command]
pub async fn signout(state: State<'_, AppState>) -> Result<(), String> {
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(())
}
/// Attempt to restore a previous session from the persisted token on disk.
/// Authenticates the DB connection with the stored JWT.
/// Returns the authenticated User on success, or an error if no token exists
/// or the token is expired/invalid (in which case the stored token is also cleared).
#[tauri::command]
pub async fn restore_session(
state: State<'_, AppState>,
app_handle: AppHandle,
) -> Result<User, String> {
let token_str = load_token(&app_handle)?
.ok_or_else(|| AppError::Auth("no saved session".into()).to_string())?;
match state
.db
.authenticate(surrealdb::opt::auth::Token::from(token_str.clone()))
.await
{
Ok(_) => {
*state.token.lock().unwrap() = Some(token_str);
let mut result: Vec<User> = state
.db
.query("SELECT * FROM $auth")
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
result.pop().ok_or_else(|| {
into_err(AppError::Auth("session restored but $auth not set".into()))
})
}
Err(_) => {
let _ = clear_token(&app_handle);
*state.token.lock().unwrap() = None;
Err(AppError::Auth("session expired, please sign in again".into()).to_string())
}
}
}
/// Fetch the currently authenticated user record.
/// Relies on the DB connection being authenticated (token set via signin/signup).
#[tauri::command]
pub async fn get_me(state: State<'_, AppState>) -> Result<User, String> {
let mut result: Vec<User> = state
@@ -80,7 +195,9 @@ pub async fn get_me(state: State<'_, AppState>) -> Result<User, String> {
.take(0)
.map_err(into_err)?;
result.pop().ok_or_else(|| into_err(AppError::Auth("not authenticated".into())))
result
.pop()
.ok_or_else(|| into_err(AppError::Auth("not authenticated".into())))
}
/// Update mutable profile fields. Only provided fields are changed.
@@ -90,6 +207,11 @@ pub async fn update_profile(
username: Option<String>,
avatar: Option<String>,
) -> Result<User, String> {
if let Some(username) = &username {
validate_username(username)?;
}
validate_avatar(&avatar)?;
let mut result: Vec<User> = state
.db
.query(
@@ -98,23 +220,40 @@ pub async fn update_profile(
avatar = $avatar ?? avatar
RETURN AFTER",
)
.bind(("username", username))
.bind(("avatar", avatar))
.bind(("username", username.map(|s| s.trim().to_string())))
.bind((
"avatar",
avatar
.map(|s| s.trim().to_string())
.filter(|s| !s.is_empty()),
))
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
result.pop().ok_or_else(|| into_err(AppError::NotFound("user".into())))
result
.pop()
.ok_or_else(|| into_err(AppError::NotFound("user".into())))
}
/// Return the contacts list for the current user.
/// Contacts are `contact` records where `owner = $auth`.
/// Search users by username. Returns safe profile fields only.
#[tauri::command]
pub async fn get_contacts(state: State<'_, AppState>) -> Result<Vec<User>, String> {
pub async fn search_users(state: State<'_, AppState>, query: String) -> Result<Vec<User>, String> {
let query = query.trim();
if query.chars().count() < 2 {
return Ok(Vec::new());
}
let result: Vec<User> = state
.db
.query("SELECT target.* FROM contact WHERE owner = $auth")
.query(
"SELECT id, username, email, avatar, created FROM user
WHERE id != $auth AND string::lowercase(username) CONTAINS string::lowercase($query)
ORDER BY username
LIMIT 10",
)
.bind(("query", query.to_string()))
.await
.map_err(into_err)?
.take(0)
@@ -123,12 +262,27 @@ pub async fn get_contacts(state: State<'_, AppState>) -> Result<Vec<User>, Strin
Ok(result)
}
/// Add a user to the current user's contact list. Stub — returns the Contact record.
/// Return the contacts list for the current user.
#[tauri::command]
pub async fn add_contact(
state: State<'_, AppState>,
user_id: String,
) -> Result<Contact, String> {
pub async fn get_contacts(state: State<'_, AppState>) -> Result<Vec<User>, String> {
let result: Vec<User> = state
.db
.query(
"SELECT * FROM user
WHERE id IN (SELECT VALUE target FROM contact WHERE owner = $auth)
ORDER BY username",
)
.await
.map_err(into_err)?
.take(0)
.map_err(into_err)?;
Ok(result)
}
/// Add a user to the current user's contact list.
#[tauri::command]
pub async fn add_contact(state: State<'_, AppState>, user_id: String) -> Result<Contact, String> {
let mut result: Vec<Contact> = state
.db
.query("CREATE contact SET owner = $auth, target = type::record('user', $uid)")
@@ -138,5 +292,28 @@ pub async fn add_contact(
.take(0)
.map_err(into_err)?;
result.pop().ok_or_else(|| into_err(AppError::NotFound("contact after create".into())))
result
.pop()
.ok_or_else(|| into_err(AppError::NotFound("contact after create".into())))
}
// ── Private helpers ───────────────────────────────────────────────────────────
fn save_token(app: &AppHandle, token: &str) -> Result<(), String> {
let store = app.store(SESSION_STORE).map_err(|e| e.to_string())?;
store.set(TOKEN_KEY, serde_json::json!(token));
store.save().map_err(|e| e.to_string())
}
fn load_token(app: &AppHandle) -> Result<Option<String>, String> {
let store = app.store(SESSION_STORE).map_err(|e| e.to_string())?;
Ok(store
.get(TOKEN_KEY)
.and_then(|v| v.as_str().map(String::from)))
}
fn clear_token(app: &AppHandle) -> Result<(), String> {
let store = app.store(SESSION_STORE).map_err(|e| e.to_string())?;
store.delete(TOKEN_KEY);
store.save().map_err(|e| e.to_string())
}

View File

@@ -1,6 +1,6 @@
use std::collections::HashMap;
use std::sync::{Arc, Mutex, LazyLock};
use std::env;
use std::sync::{Arc, LazyLock, Mutex};
use surrealdb::engine::remote::ws::{Client, Ws, Wss};
use surrealdb::Surreal;
@@ -13,26 +13,24 @@ use crate::error::AppError;
pub static SURREAL_URL: LazyLock<String> = LazyLock::new(|| {
option_env!("SURREAL_URL")
.map(str::to_string)
.unwrap_or_else(|| env::var("SURREAL_URL")
.unwrap_or_else(|_| "ws://localhost:8000".to_string()))
.unwrap_or_else(|| {
env::var("SURREAL_URL").unwrap_or_else(|_| "ws://localhost:8000".to_string())
})
});
pub static SURREAL_NS: LazyLock<String> = LazyLock::new(|| {
option_env!("SURREAL_NS")
.map(str::to_string)
.unwrap_or_else(|| env::var("SURREAL_NS")
.unwrap_or_else(|_| "dev".to_string()))
.unwrap_or_else(|| env::var("SURREAL_NS").unwrap_or_else(|_| "dev".to_string()))
});
pub static SURREAL_DB: LazyLock<String> = LazyLock::new(|| {
option_env!("SURREAL_DB")
.map(str::to_string)
.unwrap_or_else(|| env::var("SURREAL_DB")
.unwrap_or_else(|_| "oxyde".to_string()))
.unwrap_or_else(|| env::var("SURREAL_DB").unwrap_or_else(|_| "oxyde".to_string()))
});
pub static SURREAL_ACCESS: LazyLock<String> = LazyLock::new(|| {
option_env!("SURREAL_ACCESS")
.map(str::to_string)
.unwrap_or_else(|| env::var("SURREAL_ACCESS")
.unwrap_or_else(|_| "account".to_string()))
.unwrap_or_else(|| env::var("SURREAL_ACCESS").unwrap_or_else(|_| "account".to_string()))
});
pub struct AppState {

View File

@@ -14,10 +14,15 @@ use db::{init_db, AppState, SURREAL_DB, SURREAL_NS, SURREAL_URL};
pub fn run() {
tauri::Builder::default()
.plugin(tauri_plugin_opener::init())
.plugin(tauri_plugin_store::Builder::default().build())
.setup(|app| {
let app_handle = app.handle().clone();
tauri::async_runtime::block_on(async move {
let surreal = init_db(SURREAL_URL.as_str(), SURREAL_NS.as_str(), SURREAL_DB.as_str())
let surreal = init_db(
SURREAL_URL.as_str(),
SURREAL_NS.as_str(),
SURREAL_DB.as_str(),
)
.await
.expect("Failed to connect to SurrealDB");
@@ -36,14 +41,21 @@ pub fn run() {
commands::user::signin,
commands::user::signout,
commands::user::get_me,
commands::user::restore_session,
commands::user::update_profile,
commands::user::search_users,
commands::user::get_contacts,
commands::user::add_contact,
commands::chat::create_room,
commands::chat::get_rooms,
commands::chat::invite_to_room,
commands::chat::get_or_create_direct_room,
commands::chat::send_message,
commands::chat::get_messages,
commands::chat::delete_message,
commands::chat::edit_message,
commands::chat::toggle_reaction,
commands::chat::mark_room_read,
commands::chat::subscribe_room,
commands::chat::unsubscribe_room,
])

View File

@@ -6,7 +6,7 @@ use surrealdb_types::SurrealValue;
pub struct User {
pub id: RecordId,
pub username: String,
pub email: String,
pub email: Option<String>,
pub avatar: Option<String>,
pub created: Datetime,
}
@@ -14,8 +14,27 @@ pub struct User {
#[derive(Debug, Clone, Serialize, Deserialize, SurrealValue)]
pub struct Room {
pub id: RecordId,
pub name: String,
pub name: Option<String>,
pub kind: String,
pub created_by: Option<RecordId>,
pub direct_key: Option<String>,
pub created: Datetime,
pub updated: Option<Datetime>,
pub last_message: Option<Message>,
pub unread_count: Option<i64>,
pub other_user: Option<User>,
}
#[derive(Debug, Clone, Serialize, Deserialize, SurrealValue)]
#[allow(dead_code)]
pub struct RoomMember {
pub id: RecordId,
pub room: RecordId,
pub user: RecordId,
pub role: String,
pub joined: Datetime,
pub last_read_at: Option<Datetime>,
pub muted: Option<bool>,
}
#[derive(Debug, Clone, Serialize, Deserialize, SurrealValue)]
@@ -26,6 +45,26 @@ pub struct Message {
pub author_username: Option<String>,
pub body: String,
pub created: Datetime,
pub updated: Option<Datetime>,
pub deleted: Option<bool>,
pub reply_to: Option<RecordId>,
pub reactions: Option<Vec<MessageReactionSummary>>,
}
#[derive(Debug, Clone, Serialize, Deserialize, SurrealValue)]
pub struct MessageReaction {
pub id: RecordId,
pub message: RecordId,
pub user: RecordId,
pub emoji: String,
pub created: Datetime,
}
#[derive(Debug, Clone, Serialize, Deserialize, SurrealValue)]
pub struct MessageReactionSummary {
pub emoji: String,
pub count: i64,
pub reacted_by_me: bool,
}
#[derive(Debug, Clone, Serialize, Deserialize, SurrealValue)]
@@ -45,7 +84,10 @@ mod tests {
fn _assert_serialize<T: Serialize + for<'de> Deserialize<'de>>() {}
_assert_serialize::<User>();
_assert_serialize::<Room>();
_assert_serialize::<RoomMember>();
_assert_serialize::<Message>();
_assert_serialize::<MessageReaction>();
_assert_serialize::<MessageReactionSummary>();
_assert_serialize::<Contact>();
}
}

View File

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

View File

@@ -25,7 +25,7 @@
<div class="auth-wrap">
<div class="auth-card">
<h1 class="auth-brand">OXYDE</h1>
<p class="auth-tagline">encrypted · realtime · distributed</p>
<p class="auth-tagline">realtime · native · focused</p>
{#if err}
<div class="err-banner">{err}</div>

View File

@@ -1,28 +1,46 @@
<script lang="ts">
import { tick } from 'svelte';
import type { Room, Message, ContextMenuItem } from '$lib/types';
import type { User, Room, Message, ContextMenuItem } from '$lib/types';
import { full, sid, fmt } from '$lib/helpers';
interface Props {
activeRoom: Room | null;
messages: Message[];
user: User | null;
err: string;
hasOlderMessages: boolean;
isLoadingOlder: boolean;
fMsg: string;
replyTo: Message | null;
onLoadOlderMessages: () => void;
onSendMessage: () => void;
onDeleteMessage: (msgId: string) => void;
onEditMessage: (msgId: string, body: string) => void;
onToggleReaction: (msgId: string, emoji: string) => void;
onShowMenu: (e: MouseEvent, items: ContextMenuItem[]) => void;
}
let {
activeRoom,
messages,
user,
err,
hasOlderMessages,
isLoadingOlder,
fMsg = $bindable(),
replyTo = $bindable(),
onLoadOlderMessages,
onSendMessage,
onDeleteMessage,
onEditMessage,
onToggleReaction,
onShowMenu,
}: Props = $props();
let msgEl: HTMLElement;
let inputEl: HTMLTextAreaElement;
let editingId = $state<string | null>(null);
let editBody = $state('');
function scrollBottom() {
tick().then(() => { if (msgEl) msgEl.scrollTop = msgEl.scrollHeight; });
@@ -38,11 +56,34 @@
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); onSendMessage(); }
}
function roomLabel(room: Room | null): string {
if (!room) return 'select a room';
if (room.kind === 'direct') return room.other_user?.username ?? room.name ?? 'direct message';
return room.name ?? 'untitled';
}
function isGrouped(i: number): boolean {
if (i === 0) return false;
if (messages[i].deleted || messages[i - 1].deleted) return false;
return full(messages[i].author) === full(messages[i - 1].author);
}
function beginEdit(msg: Message) {
editingId = full(msg.id);
editBody = msg.body;
}
function submitEdit(msg: Message) {
if (!editBody.trim()) return;
onEditMessage(full(msg.id), editBody.trim());
editingId = null;
editBody = '';
}
function quickReact(msg: Message) {
onToggleReaction(full(msg.id), '+1');
}
// Scroll to bottom when messages change
$effect(() => {
messages.length; // track length
@@ -59,8 +100,8 @@
<!-- Channel header -->
<header class="channel-header">
<span class="ch-hash">#</span>
<span class="ch-name">{activeRoom?.name ?? 'select a room'}</span>
<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>
@@ -77,33 +118,97 @@
<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)}
oncontextmenu={(e) => onShowMenu(e, [{ label: 'Copy message', action: () => navigator.clipboard.writeText(msg.body) }])}
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"
oncontextmenu={(e) => { e.stopPropagation(); onShowMenu(e, [{ label: 'Copy username', action: () => navigator.clipboard.writeText(msg.author_username ?? sid(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">replying to {sid(msg.reply_to)}</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>
<!-- 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.name}` : 'select a room first'}
placeholder={activeRoom ? `message ${activeRoom.kind === 'direct' ? '@' : '#'}${roomLabel(activeRoom)}` : 'select a room first'}
bind:value={fMsg}
onkeydown={onKey}
oninput={autoResize}
@@ -147,6 +252,14 @@
.messages::-webkit-scrollbar { width: 4px; }
.messages::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 2px; }
.messages::-webkit-scrollbar-track { 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 {
flex: 1; display: flex; flex-direction: column;
@@ -160,6 +273,8 @@
.empty-state p { font-size: 11px; letter-spacing: 0.07em; }
.msg { padding: 1px 0; }
.msg:hover .msg-actions,
.msg:focus-within .msg-actions { opacity: 1; pointer-events: auto; }
.msg.grouped { padding-top: 1px; }
.msg-header {
@@ -175,6 +290,51 @@
animation: msgIn 0.14s ease;
}
.msg.grouped .msg-body { color: var(--text-2); }
.msg-body.deleted { color: var(--muted); font-style: italic; }
.msg-actions {
float: right; display: flex; gap: 4px; margin-left: 8px;
opacity: 0; pointer-events: none; transition: opacity 0.1s;
}
.msg-actions button {
padding: 2px 5px; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--r);
color: var(--muted); font-family: inherit; font-size: 9.5px;
cursor: pointer;
}
.msg-actions button:hover { border-color: var(--accent); color: var(--accent); }
.reply-chip {
display: inline-flex; margin: 2px 0 3px; padding: 3px 6px;
border-left: 2px solid var(--accent); background: var(--surface);
color: var(--muted); font-size: 10px;
}
.edit-row {
display: flex; align-items: flex-end; gap: 6px;
margin-top: 3px;
}
.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); }
@@ -186,6 +346,11 @@
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.reply-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 24px; border-top: 1px solid var(--border);
color: var(--text-2); font-size: 11px; background: var(--surface);
}
.msg-input {
flex: 1; resize: none;
padding: 9px 13px;

View File

@@ -49,6 +49,7 @@
bind:this={menuEl}
style="left:{x}px; top:{y}px"
onclick={(e) => e.stopPropagation()}
onkeydown={(e) => e.stopPropagation()}
oncontextmenu={(e) => { e.preventDefault(); e.stopPropagation(); }}
role="menu"
>

View File

@@ -1,6 +1,7 @@
<script lang="ts">
import type { User, Room, ContextMenuItem } from '$lib/types';
import { full } from '$lib/helpers';
import { onDestroy, onMount } from 'svelte';
import type { User, Room, ContextMenuItem, UserSearchResult } from '$lib/types';
import { full, sid } from '$lib/helpers';
interface Props {
user: User | null;
@@ -9,10 +10,17 @@
activeRoom: Room | null;
showNewRoom: boolean;
fRoom: string;
fRoomKind: 'public' | 'private';
unreadCounts: Record<string, number>;
onSelectRoom: (room: Room) => void;
onCreateRoom: () => void;
onSignout: () => void;
onShowMenu: (e: MouseEvent, items: ContextMenuItem[]) => void;
onUpdateProfile: (fields: { username?: string; avatar?: string }) => Promise<void>;
onAddContact: (userId: string) => Promise<void>;
onSearchUsers: (query: string) => Promise<UserSearchResult[]>;
onStartDirectMessage: (userId: string) => Promise<void>;
onInviteToRoom: (userId: string) => Promise<void>;
}
let {
@@ -22,14 +30,150 @@
activeRoom,
showNewRoom = $bindable(),
fRoom = $bindable(),
fRoomKind = $bindable(),
unreadCounts,
onSelectRoom,
onCreateRoom,
onSignout,
onShowMenu,
onUpdateProfile,
onAddContact,
onSearchUsers,
onStartDirectMessage,
onInviteToRoom,
}: Props = $props();
function roomLabel(room: Room): string {
if (room.kind === 'direct') return room.other_user?.username ?? room.name ?? 'direct message';
return room.name ?? 'untitled';
}
const minSidebarWidth = 228;
const maxSidebarWidth = 440;
let sidebarWidth = $state(282);
let resizing = $state(false);
function clampSidebarWidth(width: number) {
return Math.min(maxSidebarWidth, Math.max(minSidebarWidth, width));
}
function setSidebarWidth(width: number) {
sidebarWidth = clampSidebarWidth(width);
localStorage.setItem('oxyde.sidebarWidth', String(sidebarWidth));
}
function onResizeMove(e: PointerEvent) {
if (!resizing) return;
setSidebarWidth(e.clientX);
}
function stopResize() {
resizing = false;
}
function startResize(e: PointerEvent) {
resizing = true;
e.preventDefault();
}
function onResizeKey(e: KeyboardEvent) {
if (e.key === 'ArrowLeft') {
e.preventDefault();
setSidebarWidth(sidebarWidth - 16);
} else if (e.key === 'ArrowRight') {
e.preventDefault();
setSidebarWidth(sidebarWidth + 16);
}
}
onMount(() => {
const stored = Number(localStorage.getItem('oxyde.sidebarWidth'));
if (Number.isFinite(stored)) sidebarWidth = clampSidebarWidth(stored);
window.addEventListener('pointermove', onResizeMove);
window.addEventListener('pointerup', stopResize);
});
onDestroy(() => {
window.removeEventListener('pointermove', onResizeMove);
window.removeEventListener('pointerup', stopResize);
});
// ── Profile edit ──────────────────────────────────────────────────────────
let showEditProfile = $state(false);
let fProfileUsername = $state('');
let fProfileAvatar = $state('');
let profileErr = $state('');
function openEditProfile() {
fProfileUsername = user?.username ?? '';
fProfileAvatar = user?.avatar ?? '';
profileErr = '';
showEditProfile = true;
}
async function submitProfile() {
profileErr = '';
try {
await onUpdateProfile({
username: fProfileUsername.trim() || undefined,
avatar: fProfileAvatar.trim() || undefined,
});
showEditProfile = false;
} catch (e) { profileErr = String(e); }
}
// ── Add contact ───────────────────────────────────────────────────────────
let showAddContact = $state(false);
let fContactQuery = $state('');
let searchResults = $state<UserSearchResult[]>([]);
let searchBusy = $state(false);
let contactErr = $state('');
let searchTimer: ReturnType<typeof setTimeout> | null = null;
async function runUserSearch() {
const query = fContactQuery.trim();
searchResults = [];
if (query.length < 2) return;
contactErr = '';
searchBusy = true;
try {
searchResults = await onSearchUsers(query);
} catch (e) { contactErr = String(e); }
finally { searchBusy = false; }
}
function scheduleUserSearch() {
if (searchTimer) clearTimeout(searchTimer);
searchTimer = setTimeout(runUserSearch, 220);
}
async function submitContact(userId: string) {
contactErr = '';
try {
await onAddContact(userId);
fContactQuery = '';
searchResults = [];
showAddContact = false;
} catch (e) { contactErr = String(e); }
}
async function startDm(userId: string) {
contactErr = '';
try {
await onStartDirectMessage(userId);
showAddContact = false;
} catch (e) { contactErr = String(e); }
}
async function invite(userId: string) {
contactErr = '';
try {
await onInviteToRoom(userId);
} catch (e) { contactErr = String(e); }
}
</script>
<aside class="sidebar">
<aside class="sidebar" class:resizing style="width:{sidebarWidth}px; min-width:{sidebarWidth}px">
<!-- Header -->
<div class="sidebar-head">
@@ -42,50 +186,134 @@
<!-- New room form -->
{#if showNewRoom}
<div class="new-room-form">
<div class="panel-form">
<div class="panel-title">new room</div>
<input class="field-sm" placeholder="room name" bind:value={fRoom}
onkeydown={(e) => e.key === 'Enter' && onCreateRoom()} />
<div class="form-row">
<div class="segmented" aria-label="room visibility">
<button class:active={fRoomKind === 'public'} onclick={() => fRoomKind = 'public'}>public</button>
<button class:active={fRoomKind === 'private'} onclick={() => fRoomKind = 'private'}>private</button>
</div>
<button class="btn-xs" onclick={onCreateRoom}>create</button>
</div>
</div>
{/if}
<!-- Rooms -->
<div class="section-label">ROOMS</div>
<nav class="room-list">
{#each rooms as room (full(room.id))}
{#each rooms.filter((room) => room.kind !== 'direct') as room (full(room.id))}
<button
class="room-item"
class:active={activeRoom && full(room.id) === full(activeRoom.id)}
onclick={() => onSelectRoom(room)}
oncontextmenu={(e) => onShowMenu(e, [{ label: 'Copy room name', action: () => navigator.clipboard.writeText(room.name) }])}
oncontextmenu={(e) => onShowMenu(e, [{ label: 'Copy room name', action: () => navigator.clipboard.writeText(roomLabel(room)) }])}
>
<span class="hash">#</span>
<span class="room-name">{room.name}</span>
<span class="hash">{room.kind === 'direct' ? '@' : '#'}</span>
<span class="room-name">{roomLabel(room)}</span>
{#if unreadCounts[sid(room.id)]}
<span class="unread">{unreadCounts[sid(room.id)]}</span>
{/if}
</button>
{:else}
<p class="list-empty">no rooms — create one above</p>
{/each}
</nav>
<!-- Direct messages -->
<div class="section-label">DIRECT</div>
<nav class="dm-list">
{#each rooms.filter((room) => room.kind === 'direct') as room (full(room.id))}
<button
class="room-item"
class:active={activeRoom && full(room.id) === full(activeRoom.id)}
onclick={() => onSelectRoom(room)}
oncontextmenu={(e) => onShowMenu(e, [{ label: 'Copy name', action: () => navigator.clipboard.writeText(roomLabel(room)) }])}
>
<span class="hash">@</span>
<span class="room-name">{roomLabel(room)}</span>
{#if unreadCounts[sid(room.id)]}
<span class="unread">{unreadCounts[sid(room.id)]}</span>
{/if}
</button>
{:else}
<p class="list-empty">no direct messages</p>
{/each}
</nav>
<!-- Contacts -->
<div class="section-label-row">
<span class="section-label">CONTACTS</span>
<button class="icon-btn" title="Add contact" onclick={() => { showAddContact = !showAddContact; }}>
{showAddContact ? '×' : '+'}
</button>
</div>
{#if showAddContact}
<div class="panel-form">
<div class="panel-title">find people</div>
<input class="field-sm" placeholder="search username" bind:value={fContactQuery}
oninput={scheduleUserSearch}
onkeydown={(e) => e.key === 'Enter' && runUserSearch()} />
<div class="form-row">
<span class="helper-text">2+ characters</span>
<button class="btn-xs" onclick={runUserSearch} disabled={searchBusy}>
{searchBusy ? '...' : 'find'}
</button>
</div>
</div>
{#if contactErr}<p class="form-err" style="padding: 0 12px 6px">{contactErr}</p>{/if}
{#if searchResults.length > 0}
<div class="search-results">
{#each searchResults as result (full(result.id))}
<div class="search-result">
<span class="avatar mini">{result.username[0]?.toUpperCase() ?? '?'}</span>
<span class="contact-name">{result.username}</span>
<div class="row-actions">
{#if activeRoom && activeRoom.kind !== 'direct'}
<button class="mini-action" title="Invite" onclick={() => invite(sid(result.id))}>invite</button>
{/if}
<button class="mini-action" title="Add contact" onclick={() => submitContact(sid(result.id))}>add</button>
<button class="mini-action primary" title="Message" onclick={() => startDm(sid(result.id))}>msg</button>
</div>
</div>
{/each}
</div>
{/if}
{/if}
{#if contacts.length > 0}
<div class="section-label">CONTACTS</div>
<div class="contact-list">
{#each contacts as c}
{#each contacts as c (full(c.id))}
<div class="contact-item">
<span class="presence online"></span>
<span class="contact-name">{c.username}</span>
<button class="mini-action contact-action" onclick={() => startDm(sid(c.id))}>msg</button>
</div>
{/each}
</div>
{/if}
<!-- User footer -->
{#if showEditProfile}
<div class="edit-profile-form">
<input class="field-sm" placeholder="username" bind:value={fProfileUsername}
onkeydown={(e) => e.key === 'Enter' && submitProfile()}
onkeyup={(e) => e.key === 'Escape' && (showEditProfile = false)} />
<input class="field-sm" placeholder="avatar url (optional)" bind:value={fProfileAvatar}
onkeydown={(e) => e.key === 'Enter' && submitProfile()}
onkeyup={(e) => e.key === 'Escape' && (showEditProfile = false)} />
{#if profileErr}<p class="form-err">{profileErr}</p>{/if}
<div class="form-row">
<button class="btn-xs" onclick={submitProfile}>save</button>
<button class="btn-xs btn-ghost" onclick={() => showEditProfile = false}>cancel</button>
</div>
</div>
{/if}
<div class="user-footer">
<div class="user-pill">
<button class="user-pill" title="Edit profile" onclick={openEditProfile}>
<span class="avatar">{user?.username?.[0]?.toUpperCase() ?? '?'}</span>
<span class="user-name">{user?.username ?? ''}</span>
</div>
</button>
<button class="icon-btn signout" title="Sign out" onclick={onSignout}>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
@@ -95,16 +323,39 @@
</button>
</div>
<button
class="resize-handle"
aria-label="Resize sidebar"
title="Resize sidebar"
onpointerdown={startResize}
onkeydown={onResizeKey}
></button>
</aside>
<style>
.sidebar {
width: 282px; min-width: 282px;
position: relative;
background: var(--sidebar-bg);
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
overflow: hidden;
}
.sidebar.resizing,
.sidebar.resizing * { cursor: col-resize; user-select: none; }
.resize-handle {
position: absolute; top: 0; right: -3px; bottom: 0;
width: 6px; cursor: col-resize; z-index: 4;
padding: 0; border: 0; background: transparent;
}
.resize-handle::after {
content: ''; position: absolute; top: 0; right: 2px; bottom: 0;
width: 1px; background: transparent;
transition: background 0.12s;
}
.resize-handle:hover::after,
.resize-handle:focus-visible::after,
.sidebar.resizing .resize-handle::after { background: var(--accent); }
.sidebar-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 14px 14px;
@@ -127,12 +378,16 @@
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn.signout:hover { border-color: var(--danger); color: var(--danger); }
.new-room-form {
display: flex; gap: 6px; align-items: center;
padding: 10px 12px;
.panel-form {
display: flex; flex-direction: column; gap: 7px;
padding: 10px 12px 11px;
border-bottom: 1px solid var(--border-subtle);
animation: rise 0.15s ease;
}
.panel-title {
font-size: 9px; letter-spacing: 0.14em;
color: var(--muted); text-transform: uppercase;
}
@keyframes rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
@@ -154,6 +409,30 @@
transition: opacity 0.12s;
}
.btn-xs:hover { opacity: 0.82; }
.btn-xs:disabled { opacity: 0.45; cursor: wait; }
.form-row {
display: flex; align-items: center; justify-content: space-between;
gap: 7px; min-width: 0;
}
.helper-text {
color: var(--muted); font-size: 10px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.segmented {
display: flex; min-width: 0;
border: 1px solid var(--border); border-radius: var(--r);
overflow: hidden; background: var(--bg);
}
.segmented button {
padding: 5px 8px; background: transparent; border: none;
border-right: 1px solid var(--border);
color: var(--muted); font-family: inherit; font-size: 10px;
cursor: pointer;
}
.segmented button:last-child { border-right: 0; }
.segmented button.active {
background: var(--accent-soft); color: var(--accent);
}
.section-label {
padding: 14px 14px 5px;
@@ -161,8 +440,10 @@
color: var(--muted); font-weight: 500;
}
.room-list { flex: 1; overflow-y: auto; padding: 3px 8px; }
.room-list::-webkit-scrollbar { width: 0; }
.room-list { flex: 1; min-height: 70px; overflow-y: auto; padding: 3px 8px; }
.dm-list { max-height: 28%; overflow-y: auto; padding: 3px 8px; flex-shrink: 0; }
.room-list::-webkit-scrollbar,
.dm-list::-webkit-scrollbar { width: 0; }
.room-item {
display: flex; align-items: center; gap: 5px;
@@ -182,12 +463,42 @@
.hash { color: var(--muted); font-size: 14px; flex-shrink: 0; }
.room-item.active .hash { color: var(--accent); }
.room-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread {
min-width: 18px; height: 18px; margin-left: auto;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r); background: var(--accent); color: #fff;
font-size: 10px; padding: 0 5px;
}
.list-empty { padding: 8px 7px; color: var(--muted); font-size: 10.5px; }
.contact-list { padding: 3px 8px; }
.contact-list { padding: 3px 8px; max-height: 24%; overflow-y: auto; flex-shrink: 0; }
.contact-item {
display: flex; align-items: center; gap: 7px;
padding: 5px 7px; color: var(--muted); font-size: 12px;
border-left: 2px solid transparent;
}
.contact-item:hover { background: var(--surface); color: var(--text-2); }
.contact-action { margin-left: auto; }
.search-results {
padding: 4px 8px 8px;
border-bottom: 1px solid var(--border-subtle);
}
.search-result {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center; gap: 7px;
padding: 5px 4px; color: var(--text-2); font-size: 11px;
}
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.mini-action {
padding: 3px 6px; background: transparent;
border: 1px solid var(--border); border-radius: var(--r);
color: var(--muted); font-family: inherit; font-size: 10px;
cursor: pointer; white-space: nowrap;
}
.mini-action:hover { border-color: var(--accent); color: var(--accent); }
.mini-action.primary {
background: var(--accent-soft); border-color: rgba(181, 98, 26, 0.28);
color: var(--accent);
}
.presence {
width: 6px; height: 6px; border-radius: 50%;
@@ -202,13 +513,40 @@
border-top: 1px solid var(--border);
background: var(--surface); margin-top: auto;
}
.user-pill { display: flex; align-items: center; gap: 8px; min-width: 0; }
.user-pill {
display: flex; align-items: center; gap: 8px; min-width: 0;
background: none; border: none; cursor: pointer; padding: 0;
font-family: inherit; text-align: left;
}
.user-pill:hover .user-name { color: var(--text); }
.section-label-row {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 14px 5px 14px;
}
.section-label-row .section-label { padding: 0; }
.edit-profile-form {
display: flex; flex-direction: column; gap: 6px;
padding: 10px 12px;
border-top: 1px solid var(--border-subtle);
animation: rise 0.15s ease;
}
.btn-ghost {
background: transparent; border: 1px solid var(--border); color: var(--muted);
}
.btn-ghost:hover { opacity: 0.8; border-color: var(--muted); }
.form-err {
font-size: 10px; color: var(--danger);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avatar {
width: 26px; height: 26px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--accent); border-radius: var(--r);
color: #fff; font-size: 11px; font-weight: 600;
}
.avatar.mini { width: 20px; height: 20px; font-size: 9px; }
.user-name {
font-size: 12px; color: var(--text-2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

View File

@@ -1,5 +1,8 @@
export interface User { id: any; username: string; email: string; avatar?: string; created: string; }
export interface Room { id: any; name: string; created: string; }
export interface Message { id: any; room: any; author: any; author_username?: string; body: string; created: string; }
export interface User { id: any; username: string; email?: string; avatar?: string; created?: string; }
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; reactions?: MessageReactionSummary[]; }
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; }

View File

@@ -1,12 +1,19 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import LoadingScreen from '$lib/components/LoadingScreen.svelte';
import AuthCard from '$lib/components/AuthCard.svelte';
import Sidebar from '$lib/components/Sidebar.svelte';
import ChatMain from '$lib/components/ChatMain.svelte';
import ContextMenu from '$lib/components/ContextMenu.svelte';
import type { User, Room, Message, LiveEvent, ContextMenuItem } from '$lib/types';
import { sid, full, cmd } from '$lib/helpers';
import { onMount, onDestroy } from "svelte";
import LoadingScreen from "$lib/components/LoadingScreen.svelte";
import AuthCard from "$lib/components/AuthCard.svelte";
import Sidebar from "$lib/components/Sidebar.svelte";
import ChatMain from "$lib/components/ChatMain.svelte";
import ContextMenu from "$lib/components/ContextMenu.svelte";
import type {
User,
Room,
Message,
LiveEvent,
ContextMenuItem,
UserSearchResult,
} from "$lib/types";
import { sid, full, cmd } from "$lib/helpers";
// ─── State ────────────────────────────────────────────────────────────────
let user = $state<User | null>(null);
@@ -16,17 +23,28 @@
let contacts = $state<User[]>([]);
let subId = $state<string | null>(null);
let unlisten = $state<(() => void) | null>(null);
let hasOlderMessages = $state(false);
let isLoadingOlder = $state(false);
let unreadCounts = $state<Record<string, number>>({});
let view = $state<'loading' | 'auth' | 'app'>('loading');
let authMode = $state<'signin' | 'signup'>('signin');
let showNewRoom= $state(false);
let err = $state('');
let view = $state<"loading" | "auth" | "app">("loading");
let authMode = $state<"signin" | "signup">("signin");
let showNewRoom = $state(false);
let err = $state("");
let fEmail = $state(''); let fPass = $state('');
let fUser = $state(''); let fMsg = $state('');
let fRoom = $state('');
let fEmail = $state("");
let fPass = $state("");
let fUser = $state("");
let fMsg = $state("");
let fRoom = $state("");
let fRoomKind = $state<"public" | "private">("public");
let replyTo = $state<Message | null>(null);
let contextMenu = $state<{ x: number; y: number; items: ContextMenuItem[] } | null>(null);
let contextMenu = $state<{
x: number;
y: number;
items: ContextMenuItem[];
} | null>(null);
function showMenu(e: MouseEvent, items: ContextMenuItem[]) {
e.preventDefault();
@@ -36,98 +54,279 @@
// ─── Auth ─────────────────────────────────────────────────────────────────
async function init() {
try {
user = await cmd<User>('get_me');
view = 'app';
user = await cmd<User>("restore_session");
view = "app";
await loadRooms();
contacts = await cmd<User[]>('get_contacts').catch(() => []);
contacts = await cmd<User[]>("get_contacts").catch(() => []);
requestNotificationPermission();
} catch {
view = 'auth';
view = "auth";
}
}
async function signin() {
err = '';
err = "";
try {
await cmd('signin', { email: fEmail, password: fPass });
user = await cmd<User>('get_me');
view = 'app';
await cmd("signin", { email: fEmail, password: fPass });
user = await cmd<User>("get_me");
view = "app";
await loadRooms();
contacts = await cmd<User[]>('get_contacts').catch(() => []);
} catch (e) { err = String(e); }
contacts = await cmd<User[]>("get_contacts").catch(() => []);
requestNotificationPermission();
} catch (e) {
err = String(e);
}
}
async function signup() {
err = '';
err = "";
try {
user = await cmd<User>('signup', { email: fEmail, username: fUser, password: fPass });
view = 'app';
user = await cmd<User>("signup", {
email: fEmail,
username: fUser,
password: fPass,
});
view = "app";
await loadRooms();
} catch (e) { err = String(e); }
requestNotificationPermission();
} catch (e) {
err = String(e);
}
}
function requestNotificationPermission() {
if ("Notification" in window && Notification.permission === "default") {
Notification.requestPermission().catch(() => {});
}
}
async function signout() {
await cmd('signout').catch(() => {});
if (subId) { await cmd('unsubscribe_room', { subId }).catch(() => {}); subId = null; }
if (unlisten){ unlisten(); unlisten = null; }
user = null; rooms = []; messages = []; activeRoom = null;
view = 'auth';
await cmd("signout").catch(() => {});
if (subId) {
await cmd("unsubscribe_room", { subId }).catch(() => {});
subId = null;
}
if (unlisten) {
unlisten();
unlisten = null;
}
user = null;
rooms = [];
messages = [];
activeRoom = null;
unreadCounts = {};
view = "auth";
}
// ─── Rooms ────────────────────────────────────────────────────────────────
async function loadRooms() {
rooms = await cmd<Room[]>('get_rooms');
rooms = await cmd<Room[]>("get_rooms");
if (rooms.length && !activeRoom) await selectRoom(rooms[0]);
}
async function selectRoom(room: Room) {
if (subId) { await cmd('unsubscribe_room', { subId }).catch(() => {}); subId = null; }
if (unlisten){ unlisten(); unlisten = null; }
if (subId) {
await cmd("unsubscribe_room", { subId }).catch(() => {});
subId = null;
}
if (unlisten) {
unlisten();
unlisten = null;
}
activeRoom = room;
messages = await cmd<Message[]>('get_messages', { roomId: sid(room.id) });
subId = await cmd<string>('subscribe_room', { roomId: sid(room.id) });
const { listen } = await import('@tauri-apps/api/event');
unlisten = await listen<LiveEvent>('chat:message', ({ payload }) => {
const { action, data } = payload;
if (action === 'Create') { messages = [...messages, data]; }
else if (action === 'Delete') { messages = messages.filter(m => full(m.id) !== full(data.id)); }
else if (action === 'Update') { messages = messages.map(m => full(m.id) === full(data.id) ? data : m); }
replyTo = null;
messages = await cmd<Message[]>("get_messages", {
roomId: sid(room.id),
limit: 50,
});
hasOlderMessages = messages.length === 50;
unreadCounts = { ...unreadCounts, [sid(room.id)]: 0 };
await cmd("mark_room_read", { roomId: sid(room.id) }).catch(() => {});
subId = await cmd<string>("subscribe_room", { roomId: sid(room.id) });
const { listen } = await import("@tauri-apps/api/event");
unlisten = await listen<LiveEvent>("chat:message", ({ payload }) => {
const { action, data } = payload;
const eventRoomId = sid(data.room);
const currentRoomId = activeRoom ? sid(activeRoom.id) : "";
if (eventRoomId !== currentRoomId) {
unreadCounts = {
...unreadCounts,
[eventRoomId]: (unreadCounts[eventRoomId] ?? 0) + 1,
};
if (
"Notification" in window &&
Notification.permission === "granted" &&
document.hidden
) {
new Notification(data.author_username ?? "New message", {
body: data.body || "New message",
});
}
return;
}
if (action === "Create") {
messages = [...messages, data];
} else if (action === "Delete") {
messages = messages.filter((m) => full(m.id) !== full(data.id));
} else if (action === "Update") {
messages = messages.map((m) =>
full(m.id) === full(data.id) ? data : m,
);
}
cmd("mark_room_read", { roomId: currentRoomId }).catch(() => {});
});
}
async function loadOlderMessages() {
if (
!activeRoom ||
isLoadingOlder ||
!hasOlderMessages ||
messages.length === 0
)
return;
isLoadingOlder = true;
try {
const older = await cmd<Message[]>("get_messages", {
roomId: sid(activeRoom.id),
before: messages[0].created,
limit: 50,
});
messages = [...older, ...messages];
hasOlderMessages = older.length === 50;
} catch (e) {
err = String(e);
} finally {
isLoadingOlder = false;
}
}
async function createRoom() {
if (!fRoom.trim()) return;
err = '';
err = "";
try {
const r = await cmd<Room>('create_room', { name: fRoom.trim() });
const r = await cmd<Room>("create_room", {
name: fRoom.trim(),
kind: fRoomKind,
});
rooms = [r, ...rooms];
fRoom = ''; showNewRoom = false;
fRoom = "";
showNewRoom = false;
await selectRoom(r);
} catch (e) { err = String(e); }
} catch (e) {
err = String(e);
}
}
// ─── Messages ─────────────────────────────────────────────────────────────
async function sendMessage() {
if (!fMsg.trim() || !activeRoom) return;
err = '';
err = "";
try {
await cmd('send_message', { roomId: sid(activeRoom.id), body: fMsg.trim() });
fMsg = '';
} catch (e) { err = String(e); }
await cmd("send_message", {
roomId: sid(activeRoom.id),
body: fMsg.trim(),
replyTo: replyTo ? sid(replyTo.id) : null,
});
fMsg = "";
replyTo = null;
} catch (e) {
err = String(e);
}
}
async function deleteMessage(msgId: string) {
err = "";
try {
await cmd("delete_message", { messageId: msgId });
messages = messages.filter((m) => full(m.id) !== msgId);
} catch (e) {
err = String(e);
}
}
async function editMessage(msgId: string, body: string) {
err = "";
try {
const updated = await cmd<Message>("edit_message", {
messageId: msgId,
body,
});
messages = messages.map((m) =>
full(m.id) === full(updated.id) ? updated : m,
);
} catch (e) {
err = String(e);
}
}
async function toggleReaction(msgId: string, emoji: string) {
err = "";
try {
await cmd("toggle_reaction", { messageId: msgId, emoji });
if (activeRoom) {
messages = await cmd<Message[]>("get_messages", {
roomId: sid(activeRoom.id),
limit: Math.max(50, Math.min(messages.length, 100)),
});
}
} catch (e) {
err = String(e);
}
}
async function updateProfile(fields: {
username?: string;
avatar?: string;
}) {
user = await cmd<User>("update_profile", fields);
}
async function addContact(userId: string) {
await cmd("add_contact", { userId });
contacts = await cmd<User[]>("get_contacts").catch(() => []);
}
async function searchUsers(query: string) {
return await cmd<UserSearchResult[]>("search_users", { query });
}
async function startDirectMessage(userId: string) {
err = "";
try {
const room = await cmd<Room>("get_or_create_direct_room", {
userId,
});
if (!rooms.some((r) => full(r.id) === full(room.id)))
rooms = [room, ...rooms];
await selectRoom(room);
} catch (e) {
err = String(e);
}
}
async function inviteToActiveRoom(userId: string) {
if (!activeRoom || activeRoom.kind === "direct") return;
err = "";
try {
await cmd("invite_to_room", { roomId: sid(activeRoom.id), userId });
} catch (e) {
err = String(e);
}
}
onMount(init);
onDestroy(async () => {
if (subId) await cmd('unsubscribe_room', { subId }).catch(() => {});
if (subId) await cmd("unsubscribe_room", { subId }).catch(() => {});
if (unlisten) unlisten();
});
</script>
{#if view === 'loading'}
{#if view === "loading"}
<LoadingScreen />
{:else if view === 'auth'}
{:else if view === "auth"}
<AuthCard
{authMode}
{err}
@@ -136,9 +335,11 @@
bind:fUser
onSignin={signin}
onSignup={signup}
onToggleMode={() => { authMode = authMode === 'signin' ? 'signup' : 'signin'; err = ''; }}
onToggleMode={() => {
authMode = authMode === "signin" ? "signup" : "signin";
err = "";
}}
/>
{:else}
<div class="app">
<Sidebar
@@ -148,17 +349,32 @@
{activeRoom}
bind:showNewRoom
bind:fRoom
bind:fRoomKind
{unreadCounts}
onSelectRoom={selectRoom}
onCreateRoom={createRoom}
onSignout={signout}
onShowMenu={showMenu}
onUpdateProfile={updateProfile}
onAddContact={addContact}
onSearchUsers={searchUsers}
onStartDirectMessage={startDirectMessage}
onInviteToRoom={inviteToActiveRoom}
/>
<ChatMain
{activeRoom}
{messages}
{user}
{err}
{hasOlderMessages}
{isLoadingOlder}
bind:fMsg
bind:replyTo
onLoadOlderMessages={loadOlderMessages}
onSendMessage={sendMessage}
onDeleteMessage={deleteMessage}
onEditMessage={editMessage}
onToggleReaction={toggleReaction}
onShowMenu={showMenu}
/>
</div>
@@ -167,18 +383,24 @@
x={contextMenu.x}
y={contextMenu.y}
items={contextMenu.items}
onclose={() => contextMenu = null}
onclose={() => (contextMenu = null)}
/>
{/if}
{/if}
<style>
/* ─── Reset & base ──────────────────────────────────────────────────────── */
:global(*, *::before, *::after) { box-sizing: border-box; margin: 0; padding: 0; }
:global(*, *::before, *::after) {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:global(html, body) {
width: 100%; height: 100%; overflow: hidden;
width: 100%;
height: 100%;
overflow: hidden;
background: #09090b;
font-family: 'Martian Mono', 'Courier New', monospace;
font-family: "Martian Mono", "Courier New", monospace;
font-size: 13px;
color: #ddd8d0;
-webkit-font-smoothing: antialiased;
@@ -204,11 +426,19 @@
}
.app {
display: flex; height: 100vh; width: 100%;
display: flex;
height: 100vh;
width: 100%;
animation: rise 0.2s ease;
}
@keyframes rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>

2
surreal/connect-database.sh Executable file
View File

@@ -0,0 +1,2 @@
#!/usr/bin/bash
surreal sql -e http://127.0.0.1:8000 --namespace dev --database oxyde --user root --pass root

1
surreal/import-database.sh Executable file
View File

@@ -0,0 +1 @@
surreal import --endpoint http://localhost:8000 --user root --pass root --ns dev --db oxyde schema.surql

View File

@@ -16,7 +16,7 @@ DEFINE ACCESS account ON DATABASE TYPE RECORD
DEFINE TABLE user SCHEMAFULL
PERMISSIONS
FOR select WHERE id = $auth OR $auth IN (SELECT owner FROM contact WHERE target = id)
FOR select WHERE $auth != NONE
FOR update WHERE id = $auth
FOR create NONE
FOR delete NONE;
@@ -26,25 +26,63 @@ DEFINE FIELD password ON user TYPE string;
DEFINE FIELD avatar ON user TYPE option<string>;
DEFINE FIELD created ON user TYPE datetime DEFAULT time::now();
DEFINE INDEX email_idx ON user FIELDS email UNIQUE;
DEFINE INDEX username_idx ON user FIELDS username;
DEFINE TABLE room SCHEMAFULL
PERMISSIONS
FOR select, create FULL
FOR update, delete NONE;
DEFINE FIELD name ON room TYPE string;
FOR select WHERE created_by = $auth OR id IN (SELECT VALUE room FROM room_member WHERE user = $auth) OR kind = "public"
FOR create FULL
FOR update WHERE id IN (SELECT VALUE room FROM room_member WHERE user = $auth AND role = "owner")
FOR delete NONE;
DEFINE FIELD name ON room TYPE option<string>;
DEFINE FIELD kind ON room TYPE string DEFAULT "public" ASSERT $value IN ["public", "private", "direct"];
DEFINE FIELD created_by ON room TYPE option<record<user>>;
DEFINE FIELD direct_key ON room TYPE option<string>;
DEFINE FIELD created ON room TYPE datetime DEFAULT time::now();
DEFINE FIELD updated ON room TYPE datetime DEFAULT time::now();
DEFINE INDEX direct_key_idx ON room FIELDS direct_key UNIQUE;
DEFINE TABLE room_member SCHEMAFULL
PERMISSIONS
FOR select WHERE room IN (SELECT VALUE room FROM room_member WHERE user = $auth)
FOR create WHERE user = $auth OR room IN (SELECT VALUE room FROM room_member WHERE user = $auth AND role = "owner")
FOR update WHERE user = $auth OR room IN (SELECT VALUE room FROM room_member WHERE user = $auth AND role = "owner")
FOR delete WHERE user = $auth OR room IN (SELECT VALUE room FROM room_member WHERE user = $auth AND role = "owner");
DEFINE FIELD room ON room_member TYPE record<room>;
DEFINE FIELD user ON room_member TYPE record<user>;
DEFINE FIELD role ON room_member TYPE string DEFAULT "member" ASSERT $value IN ["owner", "member"];
DEFINE FIELD joined ON room_member TYPE datetime DEFAULT time::now();
DEFINE FIELD last_read_at ON room_member TYPE option<datetime>;
DEFINE FIELD muted ON room_member TYPE bool DEFAULT false;
DEFINE INDEX unique_room_member ON room_member FIELDS room, user UNIQUE;
DEFINE TABLE message SCHEMAFULL
PERMISSIONS
FOR select FULL
FOR create WHERE author = $auth
FOR select WHERE room.kind = "public" OR room IN (SELECT VALUE room FROM room_member WHERE user = $auth)
FOR create WHERE author = $auth AND (room.kind = "public" OR room IN (SELECT VALUE room FROM room_member WHERE user = $auth))
FOR update WHERE author = $auth
FOR delete WHERE author = $auth;
DEFINE FIELD room ON message TYPE record<room>;
DEFINE FIELD author ON message TYPE record<user>;
DEFINE FIELD author_username ON message TYPE option<string>;
DEFINE FIELD body ON message TYPE string;
DEFINE FIELD body ON message TYPE string ASSERT string::len($value) <= 4000;
DEFINE FIELD created ON message TYPE datetime DEFAULT time::now();
DEFINE FIELD updated ON message TYPE option<datetime>;
DEFINE FIELD deleted ON message TYPE bool DEFAULT false;
DEFINE FIELD reply_to ON message TYPE option<record<message>>;
DEFINE INDEX message_room_created ON message FIELDS room, created;
DEFINE TABLE message_reaction SCHEMAFULL
PERMISSIONS
FOR select WHERE message.room.kind = "public" OR message.room IN (SELECT VALUE room FROM room_member WHERE user = $auth)
FOR create WHERE user = $auth AND (message.room.kind = "public" OR message.room IN (SELECT VALUE room FROM room_member WHERE user = $auth))
FOR update NONE
FOR delete WHERE user = $auth;
DEFINE FIELD message ON message_reaction TYPE record<message>;
DEFINE FIELD user ON message_reaction TYPE record<user>;
DEFINE FIELD emoji ON message_reaction TYPE string ASSERT string::len($value) <= 16;
DEFINE FIELD created ON message_reaction TYPE datetime DEFAULT time::now();
DEFINE INDEX unique_message_reaction ON message_reaction FIELDS message, user, emoji UNIQUE;
DEFINE TABLE contact SCHEMAFULL
PERMISSIONS

View File

@@ -1,7 +1,6 @@
import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
// @ts-expect-error process is a nodejs global
const host = process.env.TAURI_DEV_HOST;
// https://vite.dev/config/