diff --git a/src/app.html b/src/app.html index 7b6ac94..e72f634 100644 --- a/src/app.html +++ b/src/app.html @@ -1,19 +1,23 @@ - - - - - Oxyde - - - - %sveltekit.head% - - -
%sveltekit.body%
- + + + + + Oxyde + + + + %sveltekit.head% + + +
%sveltekit.body%
+ diff --git a/src/lib/components/AuthCard.svelte b/src/lib/components/AuthCard.svelte index bebc535..801675a 100644 --- a/src/lib/components/AuthCard.svelte +++ b/src/lib/components/AuthCard.svelte @@ -1,119 +1,205 @@
-
-

OXYDE

-

realtime · native · focused

+
+

OXYDE

+

realtime · native · focused

- {#if err} -
{err}
- {/if} + {#if err} +
{err}
+ {/if} - {#if authMode === 'signin'} -
- - e.key === 'Enter' && onSignin()} autocomplete="current-password" /> - -
- - {:else} -
- - - e.key === 'Enter' && onSignup()} autocomplete="new-password" /> - -
- - {/if} -
+ {#if authMode === "signin"} +
+ + e.key === "Enter" && onSignin()} + autocomplete="current-password" + /> + +
+ + {:else} +
+ + + e.key === "Enter" && onSignup()} + autocomplete="new-password" + /> + +
+ + {/if} +
diff --git a/src/lib/components/ChatMain.svelte b/src/lib/components/ChatMain.svelte index 8abf03b..eb8ecae 100644 --- a/src/lib/components/ChatMain.svelte +++ b/src/lib/components/ChatMain.svelte @@ -1,379 +1,627 @@
+ +
+ {activeRoom?.kind === "direct" ? "@" : "#"} + {roomLabel(activeRoom)} + {#if err}{err}{/if} +
- -
- {activeRoom?.kind === 'direct' ? '@' : '#'} - {roomLabel(activeRoom)} - {#if err}{err}{/if} -
- - -
- {#if !activeRoom} -
- # -

select a room to start chatting

-
- {:else if messages.length === 0} -
- # -

no messages yet — say hello

-
- {:else} - {#if hasOlderMessages} - - {/if} - {#each messages as msg, i (full(msg.id))} -
{ - 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)} -
- { 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)} - {fmt(msg.created)} - {#if msg.updated}edited{/if} + +
+ {#if !activeRoom} +
+ # +

select a room to start chatting

- {/if} - {#if msg.reply_to} -
replying to {sid(msg.reply_to)}
- {/if} - {#if !msg.deleted} -
- - - {#if user && full(msg.author) === full(user.id)} - - {/if} + {:else if messages.length === 0} +
+ # +

no messages yet — say hello

- {/if} - {#if msg.deleted} -

message deleted

- {:else if editingId === full(msg.id)} -
- - - -
- {:else} -

{msg.body}

- {/if} - {#if msg.reactions?.length} -
- {#each msg.reactions as reaction} + {:else} + {#if hasOlderMessages} - {/each} -
- {/if} -
- {/each} - {/if} -
- - - {#if replyTo} -
- replying to {replyTo.author_username ?? sid(replyTo.author)} - + {/if} + {#each messages as msg, i (full(msg.id))} +
{ + 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)} +
+ { + 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)} + {fmt(msg.created)} + {#if msg.updated}edited{/if} +
+ {/if} + {#if msg.reply_to} +
+ replying to {sid(msg.reply_to)} +
+ {/if} + {#if !msg.deleted} +
+ + + {#if user && full(msg.author) === full(user.id)} + + {/if} +
+ {/if} + {#if msg.deleted} +

message deleted

+ {:else if editingId === full(msg.id)} +
+ + + +
+ {:else} +

{msg.body}

+ {/if} + {#if msg.reactions?.length} +
+ {#each msg.reactions as reaction} + + {/each} +
+ {/if} +
+ {/each} + {/if}
- {/if} -
- - -
+ + {#if replyTo} +
+ replying to {replyTo.author_username ?? + sid(replyTo.author)} + +
+ {/if} +
+ + +
diff --git a/src/lib/components/ContextMenu.svelte b/src/lib/components/ContextMenu.svelte index 99613b2..1216846 100644 --- a/src/lib/components/ContextMenu.svelte +++ b/src/lib/components/ContextMenu.svelte @@ -1,112 +1,133 @@ diff --git a/src/lib/components/LoadingScreen.svelte b/src/lib/components/LoadingScreen.svelte index 1812562..181a7e7 100644 --- a/src/lib/components/LoadingScreen.svelte +++ b/src/lib/components/LoadingScreen.svelte @@ -1,29 +1,46 @@
- OXYDE - + OXYDE +
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte index 8850e79..af1532d 100644 --- a/src/lib/components/Sidebar.svelte +++ b/src/lib/components/Sidebar.svelte @@ -1,554 +1,877 @@ - diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts index 6afe6fb..29093a8 100644 --- a/src/lib/helpers.ts +++ b/src/lib/helpers.ts @@ -2,33 +2,39 @@ // 3.x format: { table: "user", key: { String: "abc" } } // 2.x format: { tb: "user", id: { String: "abc" } } (kept for compat) export function sid(thing: any): string { - if (!thing) return ''; - if (typeof thing === 'string') { - const i = thing.indexOf(':'); + if (!thing) return ""; + if (typeof thing === "string") { + const i = thing.indexOf(":"); const id = i >= 0 ? thing.slice(i + 1) : thing; - return id.replace(/[⟨⟩]/g, ''); + return id.replace(/[⟨⟩]/g, ""); } // 3.x: key field (may be nested variant or plain string) const key = thing?.key ?? thing?.id; - if (typeof key === 'string') return key.replace(/[⟨⟩]/g, ''); - if (key?.String) return key.String; - if (key?.Uuid) return key.Uuid; - if (key?.Number !== undefined) return String(key.Number); + if (typeof key === "string") return key.replace(/[⟨⟩]/g, ""); + if (key?.String) return key.String; + if (key?.Uuid) return key.Uuid; + if (key?.Number !== undefined) return String(key.Number); return JSON.stringify(thing); } // Return canonical "table:id" string for equality checks export function full(thing: any): string { - if (typeof thing === 'string') return thing; - const table = thing?.table ?? thing?.tb ?? ''; + if (typeof thing === "string") return thing; + const table = thing?.table ?? thing?.tb ?? ""; return `${table}:${sid(thing)}`; } export function fmt(ts: string): string { - return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + return new Date(ts).toLocaleTimeString([], { + hour: "2-digit", + minute: "2-digit", + }); } -export async function cmd(name: string, args?: Record): Promise { - const { invoke } = await import('@tauri-apps/api/core'); +export async function cmd( + name: string, + args?: Record, +): Promise { + const { invoke } = await import("@tauri-apps/api/core"); return invoke(name, args); } diff --git a/src/lib/types.ts b/src/lib/types.ts index 0a73e29..eafc4f4 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -1,8 +1,65 @@ -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; } +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; + replied_to_message?: MessageSnippet; + reactions?: MessageReactionSummary[]; +} + +export interface MessageSnippet { + id: any; + author_username?: string; + body: string; +} +export interface UserSearchResult { + id: any; + username: string; + avatar?: string; +} +export interface LiveEvent { + action: "Create" | "Update" | "Delete"; + data: Message; +} +export interface ContextMenuItem { + label: string; + action: () => void; +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ace54eb..bf22883 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -154,7 +154,9 @@ replyTo = null; if (previousSubId) { - await cmd("unsubscribe_room", { subId: previousSubId }).catch(() => {}); + await cmd("unsubscribe_room", { subId: previousSubId }).catch( + () => {}, + ); } if (previousUnlisten) { previousUnlisten(); @@ -186,41 +188,53 @@ } subId = nextSubId; const { listen } = await import("@tauri-apps/api/event"); - const nextUnlisten = await listen("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", - }); + const nextUnlisten = await listen( + "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; } - 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, + 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( + () => {}, ); - } - cmd("mark_room_read", { roomId: currentRoomId }).catch(() => {}); - }); + }, + ); if (!isCurrentRoomSelection(token, roomId)) { nextUnlisten(); if (subId === nextSubId) { - await cmd("unsubscribe_room", { subId: nextSubId }).catch(() => {}); + await cmd("unsubscribe_room", { subId: nextSubId }).catch( + () => {}, + ); subId = null; } return;