pavel/discord
1
0
Fork 0
Code Issues Pull requests Projects Releases 60 Packages Wiki Activity Actions

improvements
All checks were successful
/ upload (release) Successful in 19s
Details

Browse source
This commit is contained in:
pavel 2026-02-13 20:10:52 +01:00
commit a4bb3cfcca
7 changed files with 556 additions and 364 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/chat.rs
View file

@ -23,6 +23,10 @@ pub enum ServerEvent {
other_user_id: Uuid, other_user_id: Uuid,
message: serde_json::Value, message: serde_json::Value,
}, },
UserPresence {
user_id: Uuid,
online: bool,
},
} }
#[derive(Deserialize)] #[derive(Deserialize)]
@ -43,6 +47,18 @@ impl ChatHub {
clients.remove(&user_id); clients.remove(&user_id);
} }
pub async fn get_online_users(&self) -> Vec<Uuid> {
let clients = self.clients.read().await;
clients.keys().cloned().collect()
}
pub async fn broadcast_all(&self, event: ServerEvent) {
let clients = self.clients.read().await;
for tx in clients.values() {
let _ = tx.send(event.clone());
}
}
pub async fn broadcast_to_user(&self, user_id: Uuid, event: ServerEvent) { pub async fn broadcast_to_user(&self, user_id: Uuid, event: ServerEvent) {
let clients = self.clients.read().await; let clients = self.clients.read().await;
if let Some(tx) = clients.get(&user_id) { if let Some(tx) = clients.get(&user_id) {
@ -65,6 +81,13 @@ pub async fn handle_socket(state: AppState, socket: WebSocket, user_id: Uuid) {
let (tx, mut rx) = mpsc::unbounded_channel::<ServerEvent>(); let (tx, mut rx) = mpsc::unbounded_channel::<ServerEvent>();
state.chat.add_client(user_id, tx).await; state.chat.add_client(user_id, tx).await;
state
.chat
.broadcast_all(ServerEvent::UserPresence {
user_id,
online: true,
})
.await;
let send_task = tokio::spawn(async move { let send_task = tokio::spawn(async move {
while let Some(event) = rx.recv().await { while let Some(event) = rx.recv().await {
@ -85,4 +108,11 @@ pub async fn handle_socket(state: AppState, socket: WebSocket, user_id: Uuid) {
send_task.abort(); send_task.abort();
state.chat.remove_client(user_id).await; state.chat.remove_client(user_id).await;
state
.chat
.broadcast_all(ServerEvent::UserPresence {
user_id,
online: false,
})
.await;
} }

9
src/handlers.rs
View file

@ -26,6 +26,7 @@ pub fn routes() -> Router<AppState> {
"/dms/{other_user_id}/messages", "/dms/{other_user_id}/messages",
get(list_dm_messages).post(send_dm_message), get(list_dm_messages).post(send_dm_message),
) )
.route("/presence", get(presence_list))
.route("/rtc-config", get(rtc_config)) .route("/rtc-config", get(rtc_config))
.route("/guilds", get(list_guilds).post(create_guild)) .route("/guilds", get(list_guilds).post(create_guild))
.route("/guilds/{guild_id}/members", get(list_guild_members)) .route("/guilds/{guild_id}/members", get(list_guild_members))
@ -293,6 +294,14 @@ async fn me(State(state): State<AppState>, user: AuthUser) -> Result<impl IntoRe
Ok(Json(me)) Ok(Json(me))
} }
async fn presence_list(
State(state): State<AppState>,
_user: AuthUser,
) -> Result<impl IntoResponse, ApiError> {
let users = state.chat.get_online_users().await;
Ok(Json(users))
}
async fn list_dm_conversations( async fn list_dm_conversations(
State(state): State<AppState>, State(state): State<AppState>,
user: AuthUser, user: AuthUser,

55
static/app.js
View file

@ -23,6 +23,7 @@ const state = {
voicePresencePollId: null, voicePresencePollId: null,
chatWs: null, chatWs: null,
lastMessageId: null, lastMessageId: null,
onlineUsers: new Set(),
}; };
const el = { const el = {
@ -141,6 +142,14 @@ function formatDate(isoString) {
} }
let audioCtx = null; let audioCtx = null;
// Global interaction listener to unlock AudioContext (autoplay policy)
window.addEventListener('click', () => {
if (audioCtx && audioCtx.state === 'suspended') {
audioCtx.resume();
}
}, { once: true });
function playSound(type) { function playSound(type) {
try { try {
if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
@ -274,9 +283,16 @@ function renderChannels() {
function renderDMs() { function renderDMs() {
el.dmList.innerHTML = ""; el.dmList.innerHTML = "";
for (const dm of state.dmConversations) { for (const dm of state.dmConversations) {
const isOnline = state.onlineUsers.has(dm.user_id);
const row = document.createElement("button"); const row = document.createElement("button");
row.className = `channel-row ${state.selectedDmUserId === dm.user_id ? "active" : ""}`; row.className = `channel-row ${state.selectedDmUserId === dm.user_id ? "active" : ""}`;
row.innerHTML = `<i data-lucide="message-circle"></i> <span>${escapeHtml(dm.display_name)}</span>`; row.innerHTML = `
<div class="avatar-wrapper">
<i data-lucide="message-circle"></i>
<div class="status-dot ${isOnline ? "online" : ""}"></div>
</div>
<span>${escapeHtml(dm.display_name)}</span>
`;
row.onclick = async () => { row.onclick = async () => {
state.selectedDmUserId = dm.user_id; state.selectedDmUserId = dm.user_id;
state.selectedDmDisplayName = dm.display_name; state.selectedDmDisplayName = dm.display_name;
@ -329,11 +345,7 @@ function renderMessages(messages) {
} }
if (messages.length > 0) { if (messages.length > 0) {
const latest = messages[0]; state.lastMessageId = messages[0].id;
if (state.lastMessageId && latest.id !== state.lastMessageId && latest.author_user_id !== state.me?.id) {
playSound(state.selectedDmUserId ? 'dm' : 'message');
}
state.lastMessageId = latest.id;
} }
el.messageList.scrollTop = el.messageList.scrollHeight; el.messageList.scrollTop = el.messageList.scrollHeight;
@ -342,10 +354,14 @@ function renderMessages(messages) {
function renderMembers() { function renderMembers() {
el.memberList.innerHTML = ""; el.memberList.innerHTML = "";
for (const m of state.members) { for (const m of state.members) {
const isOnline = state.onlineUsers.has(m.id);
const row = document.createElement("div"); const row = document.createElement("div");
row.className = "member-row"; row.className = "member-row";
row.innerHTML = ` row.innerHTML = `
<div class="member-avatar">${shortName(m.display_name)}</div> <div class="member-avatar">
${shortName(m.display_name)}
<div class="status-dot ${isOnline ? "online" : ""}"></div>
</div>
<div class="member-name">${escapeHtml(m.display_name)}</div> <div class="member-name">${escapeHtml(m.display_name)}</div>
`; `;
row.style.cursor = "pointer"; row.style.cursor = "pointer";
@ -476,21 +492,31 @@ function initChatWs() {
ws.onmessage = (event) => { ws.onmessage = (event) => {
const msg = JSON.parse(event.data); const msg = JSON.parse(event.data);
const authorId = msg.message?.author_user_id;
const isFromMe = authorId && state.me && authorId === state.me.id;
if (msg.type === "message_created") { if (msg.type === "message_created") {
if (!isFromMe) playSound('message');
if (state.selectedTextChannelId === msg.channel_id) { if (state.selectedTextChannelId === msg.channel_id) {
// Optimization: we could just push the message, but refresh for now
api(`/channels/${state.selectedTextChannelId}/messages?limit=100`).then(renderMessages); api(`/channels/${state.selectedTextChannelId}/messages?limit=100`).then(renderMessages);
} else {
// Even if not active, play sound
playSound('message');
} }
} else if (msg.type === "dm_created") { } else if (msg.type === "dm_created") {
if (!isFromMe) playSound('dm');
if (state.selectedDmUserId === msg.other_user_id) { if (state.selectedDmUserId === msg.other_user_id) {
api(`/dms/${state.selectedDmUserId}/messages?limit=100`).then(renderMessages); api(`/dms/${state.selectedDmUserId}/messages?limit=100`).then(renderMessages);
} else {
playSound('dm'); playSound('dm');
loadDMConversations().then(renderDMs); loadDMConversations().then(renderDMs);
} else {
loadDMConversations().then(renderDMs);
} }
} else if (msg.type === "user_presence") {
if (msg.online) {
state.onlineUsers.add(msg.user_id);
} else {
state.onlineUsers.delete(msg.user_id);
}
renderMembers();
renderDMs();
} }
}; };
@ -918,6 +944,11 @@ async function init() {
await loadGuilds(); await loadGuilds();
await loadDMConversations(); await loadDMConversations();
try {
const online = await api("/presence");
state.onlineUsers = new Set(online);
} catch (err) { console.warn("presence sync failed", err); }
if (state.guilds.length > 0) { if (state.guilds.length > 0) {
const lastGuildId = localStorage.getItem(LAST_GUILD_STORAGE_KEY); const lastGuildId = localStorage.getItem(LAST_GUILD_STORAGE_KEY);
const guild = state.guilds.find((g) => g.id === lastGuildId) || state.guilds[0]; const guild = state.guilds.find((g) => g.id === lastGuildId) || state.guilds[0];

545
static/styles.css
View file

@ -22,7 +22,9 @@
--font-main: "gg sans", "Inter", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-main: "gg sans", "Inter", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
* { box-sizing: border-box; } * {
box-sizing: border-box;
}
body { body {
margin: 0; margin: 0;
@ -34,15 +36,46 @@ body {
} }
/* Scrollbars */ /* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar {
::-webkit-scrollbar-track { background: transparent; } width: 8px;
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 4px; } height: 8px;
::-webkit-scrollbar-thumb:hover { background: #242529; } }
button { border: 0; cursor: pointer; transition: all 150ms ease; background: none; color: inherit; font: inherit; padding: 0; } ::-webkit-scrollbar-track {
input, select { border: 0; outline: none; background: var(--bg-input); color: var(--text-normal); font: inherit; } background: transparent;
}
.hidden { display: none !important; } ::-webkit-scrollbar-thumb {
background: var(--bg-tertiary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #242529;
}
button {
border: 0;
cursor: pointer;
transition: all 150ms ease;
background: none;
color: inherit;
font: inherit;
padding: 0;
}
input,
select {
border: 0;
outline: none;
background: var(--bg-input);
color: var(--text-normal);
font: inherit;
}
.hidden {
display: none !important;
}
/* Auth Screen */ /* Auth Screen */
.auth-screen { .auth-screen {
@ -52,6 +85,7 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
background-image: url("https://discord.com/assets/f9a15998e94589d343f7.png"); background-image: url("https://discord.com/assets/f9a15998e94589d343f7.png");
background-size: cover; background-size: cover;
} }
.auth-card { .auth-card {
width: min(480px, 92vw); width: min(480px, 92vw);
background: var(--bg-sidebar); background: var(--bg-sidebar);
@ -60,6 +94,7 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
text-align: center; text-align: center;
} }
.brand-large { .brand-large {
width: 80px; width: 80px;
height: 80px; height: 80px;
@ -72,8 +107,17 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
font-weight: 800; font-weight: 800;
margin: 0 auto 20px; margin: 0 auto 20px;
} }
.auth-card h1 { margin: 0 0 8px; color: var(--text-strong); }
.auth-card p { margin: 0 0 24px; color: var(--text-muted); } .auth-card h1 {
margin: 0 0 8px;
color: var(--text-strong);
}
.auth-card p {
margin: 0 0 24px;
color: var(--text-muted);
}
#login-btn { #login-btn {
width: 100%; width: 100%;
background: var(--brand); background: var(--brand);
@ -83,7 +127,10 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
} }
#login-btn:hover { background: var(--brand-hover); }
#login-btn:hover {
background: var(--brand-hover);
}
/* Main Layout */ /* Main Layout */
.shell { .shell {
@ -104,7 +151,11 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
overflow-y: auto; overflow-y: auto;
scrollbar-width: none; scrollbar-width: none;
} }
.server-rail::-webkit-scrollbar { display: none; }
.server-rail::-webkit-scrollbar {
display: none;
}
.guild-list { .guild-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -112,7 +163,8 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
padding: 6px 0; padding: 6px 0;
} }
.brand, .guild-pill { .brand,
.guild-pill {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 50%; border-radius: 50%;
@ -124,8 +176,16 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
background: var(--bg-sidebar); background: var(--bg-sidebar);
} }
.brand { background: var(--brand); color: #fff; border-radius: 16px; margin-bottom: 2px; } .brand {
.brand:hover { border-radius: 16px; } background: var(--brand);
color: #fff;
border-radius: 16px;
margin-bottom: 2px;
}
.brand:hover {
border-radius: 16px;
}
.separator { .separator {
width: 32px; width: 32px;
@ -135,7 +195,8 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
border-radius: 1px; border-radius: 1px;
} }
.guild-pill:hover, .guild-pill.active { .guild-pill:hover,
.guild-pill.active {
border-radius: 16px; border-radius: 16px;
background: var(--brand); background: var(--brand);
color: #fff; color: #fff;
@ -151,11 +212,23 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.guild-pill:hover::before { height: 20px; }
.guild-pill.active::before { height: 40px; }
.action-pill { color: var(--green); } .guild-pill:hover::before {
.action-pill:hover { background: var(--green); color: #fff; } height: 20px;
}
.guild-pill.active::before {
height: 40px;
}
.action-pill {
color: var(--green);
}
.action-pill:hover {
background: var(--green);
color: #fff;
}
/* Channel Sidebar */ /* Channel Sidebar */
.channel-sidebar { .channel-sidebar {
@ -175,7 +248,11 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
cursor: pointer; cursor: pointer;
transition: background-color 0.1s; transition: background-color 0.1s;
} }
.sidebar-header:hover { background: var(--bg-modifier-hover); }
.sidebar-header:hover {
background: var(--bg-modifier-hover);
}
.sidebar-header h2 { .sidebar-header h2 {
margin: 0; margin: 0;
font-size: 15px; font-size: 15px;
@ -185,11 +262,13 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.sidebar-header-actions { .sidebar-header-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
} }
.header-action-btn { .header-action-btn {
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -198,18 +277,27 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
place-items: center; place-items: center;
color: var(--text-muted); color: var(--text-muted);
} }
.header-action-btn:hover { .header-action-btn:hover {
background: var(--bg-modifier-hover); background: var(--bg-modifier-hover);
color: var(--text-normal); color: var(--text-normal);
} }
.header-action-btn i { .header-action-btn i {
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
.sidebar-scroll { flex: 1; overflow-y: auto; padding-top: 12px; } .sidebar-scroll {
flex: 1;
overflow-y: auto;
padding-top: 12px;
}
.sidebar-group {
margin-bottom: 20px;
}
.sidebar-group { margin-bottom: 20px; }
.group-title { .group-title {
padding: 0 8px 0 2px; padding: 0 8px 0 2px;
display: flex; display: flex;
@ -221,9 +309,21 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
letter-spacing: 0.24px; letter-spacing: 0.24px;
cursor: pointer; cursor: pointer;
} }
.group-title:hover { color: var(--text-normal); }
.group-toggle { width: 12px; height: 12px; margin-right: 2px; } .group-title:hover {
.group-title span { flex: 1; } color: var(--text-normal);
}
.group-toggle {
width: 12px;
height: 12px;
margin-right: 2px;
}
.group-title span {
flex: 1;
}
.add-btn { .add-btn {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -233,13 +333,24 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
display: grid; display: grid;
place-items: center; place-items: center;
} }
.add-btn:hover { .add-btn:hover {
opacity: 1; opacity: 1;
background: var(--bg-modifier-hover); background: var(--bg-modifier-hover);
} }
.add-btn i { width: 16px; height: 16px; }
.channel-list { padding: 0 8px; display: flex; flex-direction: column; gap: 2px; } .add-btn i {
width: 16px;
height: 16px;
}
.channel-list {
padding: 0 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.channel-row { .channel-row {
display: flex; display: flex;
align-items: center; align-items: center;
@ -249,12 +360,28 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
font-weight: 500; font-weight: 500;
gap: 6px; gap: 6px;
} }
.channel-row:hover { background: var(--bg-modifier-hover); color: var(--text-normal); }
.channel-row.active { background: var(--bg-modifier-selected); color: var(--text-strong); } .channel-row:hover {
.channel-row i { width: 20px; height: 20px; opacity: 0.6; } background: var(--bg-modifier-hover);
color: var(--text-normal);
}
.channel-row.active {
background: var(--bg-modifier-selected);
color: var(--text-strong);
}
.channel-row i {
width: 20px;
height: 20px;
opacity: 0.6;
}
/* Sidebar Footer */ /* Sidebar Footer */
.sidebar-footer { background: var(--bg-secondary); padding: 0; } .sidebar-footer {
background: var(--bg-secondary);
padding: 0;
}
.user-panel { .user-panel {
padding: 8px; padding: 8px;
@ -263,9 +390,15 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
gap: 8px; gap: 8px;
height: 52px; height: 52px;
} }
.user-panel:hover { background: var(--bg-modifier-hover); }
.avatar-wrapper { position: relative; } .user-panel:hover {
background: var(--bg-modifier-hover);
}
.avatar-wrapper {
position: relative;
}
.avatar { .avatar {
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -277,6 +410,7 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
} }
.status-dot { .status-dot {
position: absolute; position: absolute;
bottom: -2px; bottom: -2px;
@ -286,9 +420,16 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
border-radius: 50%; border-radius: 50%;
border: 3px solid var(--bg-secondary); border: 3px solid var(--bg-secondary);
} }
.status-dot.online { background: var(--green); }
.user-info { flex: 1; min-width: 0; } .status-dot.online {
background: var(--green);
}
.user-info {
flex: 1;
min-width: 0;
}
.display-name { .display-name {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
@ -297,9 +438,17 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.user-status { font-size: 12px; color: var(--text-muted); }
.user-actions { display: flex; gap: 2px; } .user-status {
font-size: 12px;
color: var(--text-muted);
}
.user-actions {
display: flex;
gap: 2px;
}
.user-actions button { .user-actions button {
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -308,8 +457,16 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
place-items: center; place-items: center;
color: var(--text-muted); color: var(--text-muted);
} }
.user-actions button:hover { background: var(--bg-modifier-hover); color: var(--text-normal); }
.user-actions i { width: 20px; height: 20px; } .user-actions button:hover {
background: var(--bg-modifier-hover);
color: var(--text-normal);
}
.user-actions i {
width: 20px;
height: 20px;
}
/* Voice Connection */ /* Voice Connection */
.voice-connection { .voice-connection {
@ -317,12 +474,40 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
background: var(--bg-secondary); background: var(--bg-secondary);
border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
} }
.vc-info { display: flex; align-items: center; gap: 8px; }
.vc-icon { color: var(--green); width: 20px; } .vc-info {
.vc-text { flex: 1; display: flex; flex-direction: column; } display: flex;
.vc-status { color: var(--green); font-size: 14px; font-weight: 700; } align-items: center;
.vc-name { color: var(--text-muted); font-size: 12px; } gap: 8px;
.vc-actions { display: flex; gap: 4px; } }
.vc-icon {
color: var(--green);
width: 20px;
}
.vc-text {
flex: 1;
display: flex;
flex-direction: column;
}
.vc-status {
color: var(--green);
font-size: 14px;
font-weight: 700;
}
.vc-name {
color: var(--text-muted);
font-size: 12px;
}
.vc-actions {
display: flex;
gap: 4px;
}
.vc-actions button { .vc-actions button {
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -331,7 +516,11 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
display: grid; display: grid;
place-items: center; place-items: center;
} }
.vc-actions button:hover { background: var(--bg-modifier-hover); color: var(--text-normal); }
.vc-actions button:hover {
background: var(--bg-modifier-hover);
color: var(--text-normal);
}
/* Chat Pane */ /* Chat Pane */
.chat-pane { .chat-pane {
@ -350,8 +539,18 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
} }
.header-icon { color: var(--text-muted); width: 24px; }
.chat-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-strong); } .header-icon {
color: var(--text-muted);
width: 24px;
}
.chat-header h3 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--text-strong);
}
.message-list { .message-list {
flex: 1; flex: 1;
@ -365,7 +564,10 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
gap: 16px; gap: 16px;
margin-top: 1.0625rem; margin-top: 1.0625rem;
} }
.msg:hover { background: rgba(0,0,0,0.05); }
.msg:hover {
background: rgba(0, 0, 0, 0.05);
}
.msg-avatar { .msg-avatar {
width: 40px; width: 40px;
@ -379,36 +581,77 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
font-weight: 600; font-weight: 600;
} }
.msg-content { flex: 1; min-width: 0; } .msg-content {
.msg-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } flex: 1;
min-width: 0;
}
.msg-header {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 4px;
}
.msg-author { .msg-author {
font-weight: 600; font-weight: 600;
color: var(--text-strong); color: var(--text-strong);
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
} }
.msg-author:hover { text-decoration: underline; }
.msg-time { font-size: 12px; color: var(--text-muted); }
.msg-body { color: var(--text-normal); line-height: 1.375rem; white-space: pre-wrap; word-wrap: break-word; }
.msg-grouped { margin-top: 0; padding-top: 0; padding-bottom: 0; } .msg-author:hover {
.msg-grouped .msg-avatar, .msg-grouped .msg-header { display: none; } text-decoration: underline;
.msg-grouped .msg-content { padding-left: 56px; } }
.msg-time {
font-size: 12px;
color: var(--text-muted);
}
.msg-body {
color: var(--text-normal);
line-height: 1.375rem;
white-space: pre-wrap;
word-wrap: break-word;
}
.msg-grouped {
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
}
.msg-grouped .msg-avatar,
.msg-grouped .msg-header {
display: none;
}
.msg-grouped .msg-content {
padding-left: 56px;
}
/* Chat Input */ /* Chat Input */
.chat-input-wrapper { padding: 0 16px 24px; } .chat-input-wrapper {
padding: 0 16px 24px;
}
.message-form { .message-form {
background: var(--bg-input); background: var(--bg-input);
border-radius: 8px; border-radius: 8px;
padding: 11px 16px; padding: 11px 16px;
} }
.message-form input { .message-form input {
width: 100%; width: 100%;
background: transparent; background: transparent;
color: var(--text-normal); color: var(--text-normal);
font-size: 16px; font-size: 16px;
} }
.message-form input::placeholder { color: var(--text-muted); }
.message-form input::placeholder {
color: var(--text-muted);
}
/* Member List */ /* Member List */
.utility-sidebar { .utility-sidebar {
@ -416,7 +659,13 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.member-list-wrapper { flex: 1; overflow-y: auto; padding: 12px 8px; }
.member-list-wrapper {
flex: 1;
overflow-y: auto;
padding: 12px 8px;
}
.member-row { .member-row {
display: flex; display: flex;
align-items: center; align-items: center;
@ -426,7 +675,12 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
color: var(--text-muted); color: var(--text-muted);
cursor: pointer; cursor: pointer;
} }
.member-row:hover { background: var(--bg-modifier-hover); color: var(--text-normal); }
.member-row:hover {
background: var(--bg-modifier-hover);
color: var(--text-normal);
}
.member-avatar { .member-avatar {
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -439,23 +693,67 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
font-weight: 600; font-weight: 600;
flex-shrink: 0; flex-shrink: 0;
} }
.member-name { .member-name {
font-weight: 500;
font-size: 15px;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/* Presence Badges */
.avatar-wrapper {
position: relative;
display: inline-block;
}
.status-badge {
position: absolute;
bottom: -2px;
right: -2px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--bg-sidebar);
background: #747f8d;
/* Gray for offline */
}
.status-badge.online {
background: var(--green);
}
.member-avatar,
.msg-avatar {
position: relative;
}
.status-dot {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--bg-sidebar);
background: #747f8d;
}
.status-dot.online {
background: var(--green);
}
/* Modals */ /* Modals */
.modal-container { .modal-container {
position: fixed; position: fixed;
top: 0; left: 0; right: 0; bottom: 0; top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85); background: rgba(0, 0, 0, 0.85);
display: grid; display: grid;
place-items: center; place-items: center;
z-index: 1000; z-index: 1000;
} }
.modal { .modal {
background: var(--bg-sidebar); background: var(--bg-sidebar);
width: min(440px, 95vw); width: min(440px, 95vw);
@ -463,8 +761,17 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
padding: 24px; padding: 24px;
color: var(--text-normal); color: var(--text-normal);
} }
.modal h2 { margin: 0 0 16px; text-align: center; color: var(--text-strong); }
.form-item { margin-bottom: 20px; } .modal h2 {
margin: 0 0 16px;
text-align: center;
color: var(--text-strong);
}
.form-item {
margin-bottom: 20px;
}
.form-item label { .form-item label {
display: block; display: block;
font-size: 12px; font-size: 12px;
@ -472,6 +779,7 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 8px; margin-bottom: 8px;
} }
.form-item input { .form-item input {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
@ -485,8 +793,17 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
justify-content: flex-end; justify-content: flex-end;
gap: 16px; gap: 16px;
} }
.cancel-btn { padding: 10px 20px; color: var(--text-strong); font-weight: 500; }
.cancel-btn:hover { text-decoration: underline; } .cancel-btn {
padding: 10px 20px;
color: var(--text-strong);
font-weight: 500;
}
.cancel-btn:hover {
text-decoration: underline;
}
.submit-btn { .submit-btn {
background: var(--brand); background: var(--brand);
color: #fff; color: #fff;
@ -494,12 +811,28 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
border-radius: 3px; border-radius: 3px;
font-weight: 600; font-weight: 600;
} }
.submit-btn:hover { background: var(--brand-hover); }
.submit-btn:hover {
background: var(--brand-hover);
}
/* Radio Group for Channel Type */ /* Radio Group for Channel Type */
.radio-group { display: flex; flex-direction: column; gap: 8px; } .radio-group {
.radio-item { cursor: pointer; position: relative; } display: flex;
.radio-item input { position: absolute; opacity: 0; } flex-direction: column;
gap: 8px;
}
.radio-item {
cursor: pointer;
position: relative;
}
.radio-item input {
position: absolute;
opacity: 0;
}
.radio-box { .radio-box {
display: flex; display: flex;
align-items: center; align-items: center;
@ -509,21 +842,45 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
border-radius: 4px; border-radius: 4px;
transition: all 0.1s; transition: all 0.1s;
} }
.radio-item input:checked + .radio-box { background: var(--bg-modifier-selected); color: var(--text-strong); }
.radio-box i { width: 24px; height: 24px; color: var(--text-muted); } .radio-item input:checked+.radio-box {
.radio-text { display: flex; flex-direction: column; } background: var(--bg-modifier-selected);
.radio-text strong { font-size: 16px; } color: var(--text-strong);
.radio-text span { font-size: 12px; color: var(--text-muted); } }
.radio-box i {
width: 24px;
height: 24px;
color: var(--text-muted);
}
.radio-text {
display: flex;
flex-direction: column;
}
.radio-text strong {
font-size: 16px;
}
.radio-text span {
font-size: 12px;
color: var(--text-muted);
}
/* Mobile Overlay */ /* Mobile Overlay */
.overlay { .overlay {
position: fixed; position: fixed;
top: 0; left: 0; right: 0; bottom: 0; top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
z-index: 90; z-index: 90;
opacity: 1; opacity: 1;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
} }
.overlay.hidden { .overlay.hidden {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
@ -541,28 +898,37 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
background: transparent; background: transparent;
margin-right: 8px; margin-right: 8px;
} }
.mobile-toggle-btn:hover { .mobile-toggle-btn:hover {
background: var(--bg-modifier-hover); background: var(--bg-modifier-hover);
border-radius: 4px; border-radius: 4px;
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {
.shell { grid-template-columns: 72px 240px 1fr; } .shell {
grid-template-columns: 72px 240px 1fr;
}
.utility-sidebar { .utility-sidebar {
position: fixed; position: fixed;
top: 0; bottom: 0; right: 0; top: 0;
bottom: 0;
right: 0;
width: 240px; width: 240px;
z-index: 100; z-index: 100;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5); box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
transform: translateX(100%); transform: translateX(100%);
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
.utility-sidebar.active { .utility-sidebar.active {
transform: translateX(0); transform: translateX(0);
display: flex; display: flex;
} }
.chat-header .mobile-toggle-btn { display: flex; } .chat-header .mobile-toggle-btn {
display: flex;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -571,9 +937,11 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
} }
/* Hide sidebars by default on mobile */ /* Hide sidebars by default on mobile */
.server-rail, .channel-sidebar { .server-rail,
.channel-sidebar {
position: fixed; position: fixed;
top: 0; bottom: 0; top: 0;
bottom: 0;
z-index: 100; z-index: 100;
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
@ -587,7 +955,8 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
.channel-sidebar { .channel-sidebar {
left: 72px; left: 72px;
width: 240px; width: 240px;
transform: translateX(-312px); /* 72 + 240 */ transform: translateX(-312px);
/* 72 + 240 */
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
} }
@ -595,9 +964,11 @@ input, select { border: 0; outline: none; background: var(--bg-input); color: va
.shell.menu-open .server-rail { .shell.menu-open .server-rail {
transform: translateX(0); transform: translateX(0);
} }
.shell.menu-open .channel-sidebar { .shell.menu-open .channel-sidebar {
transform: translateX(0); transform: translateX(0);
display: flex; /* Override display: none from previous rule */ display: flex;
/* Override display: none from previous rule */
} }
/* Adjust chat header for mobile */ /* Adjust chat header for mobile */

249
static/vendor/deepfilternet3/index.esm.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
static/vendor/deepfilternet3/v2/models/DeepFilterNet3_onnx.tar.gz vendored
View file

Binary file not shown.

BIN
static/vendor/deepfilternet3/v2/pkg/df_bg.wasm vendored
View file

Binary file not shown.