feat: file variety, user status, DND gate, drag-drop, mentions, link preview, emoji picker, soundboard, ringtone
Attachments
- Video: native <video controls>, decrypted blob, metadata preload
- PDF: collapsible <object> viewer with download + preview toggle
- Generic: file card with lazy decrypt, mime-to-extension map
- MessageBubble dispatch: audio/image/video/pdf/generic by mime
- Composer accept widened from image/* to any; AttachmentPreview renders
non-images as file cards
User status
- usePeerPresence returns { state, statusMessage } and tracks both fields
via realtime updates
- ConversationHeader subtitle shows custom status_message when peer is
online/idle/dnd (with message set); falls back to localized presence
label; always "Offline" when state === 'offline'
- UserBar: status_message input in dropdown (max 128 chars, save on
blur/Enter), subtitle uses same precedence as peer view
- AuthContext: auto-flip offline → online on session mount; best-effort
offline on beforeunload/pagehide; respects explicit idle/dnd/invisible
- i18n: presence.status_placeholder (DE + EN)
DND
- CallUI: incoming ring suppressed when own presence === 'dnd' (outgoing
rings stay audible — user-initiated)
- CallContext: presenceRef mirrors profile.presenceState, incoming-call
and missed-call OS notifications skipped under DND
- ConversationsContext already gated message tone + notify
Drag/drop + paste
- Page-root drag handlers feed ingestFiles; overlay shown while dragging
- Textarea onPaste extracts clipboard image items
@mentions in groups
- MentionAutocomplete: keyboard-driven dropdown, arrow/enter/tab/esc
- Composer onChange parses trailing @token, auto-open
- renderBodyWithMentions highlights @username tokens in bubbles
Link previews
- Migration 20260421000003_link_previews.sql (cache table, auth read,
service-role write via edge function)
- Edge function og-preview: POST {url}, fetches HTML (6s timeout, 1MB
cap), regex-parses OG/twitter/description, upserts cache
- useLinkPreview hook with in-memory cache + inflight dedup
- LinkPreviewCard rendered from first URL in message body
Emoji picker
- Built-in curated set (~250 emojis) across five categories
- Search by keyword/emoji char/category, recent list persisted in
localStorage
- Trigger button next to + and voice buttons in composer
Soundboard + ringtone + mic pipeline
- Pulled in (user-authored) SoundboardManagerDialog/Panel/Settings,
RingtoneSettings, mic pipeline + hotkeys + storage modules
- AuthContext imports updateOwnProfile for presence auto-flip
Fixes
- AttachmentAudio min-width so bubbles don't collapse to 0px on peer
side
- Focus flicker: visibility/online wake refresh throttled to 30s,
focus listener dropped, loading flag only on first fetch
This commit is contained in:
@@ -0,0 +1,83 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import {
|
||||
listSounds,
|
||||
subscribeSoundboardChanges,
|
||||
type SoundboardEntry,
|
||||
} from '../lib/soundboardStorage';
|
||||
import { SoundboardManagerDialog } from './SoundboardManagerDialog';
|
||||
import { ArrowRightIcon } from './icons';
|
||||
|
||||
// Entry point into the soundboard manager from the settings page. Shows a
|
||||
// tiny summary (count, category count) and opens the big dialog on click.
|
||||
export function SoundboardSettings() {
|
||||
const { t } = useTranslation(['app']);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [entries, setEntries] = useState<SoundboardEntry[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const refresh = async () => {
|
||||
try {
|
||||
const all = await listSounds();
|
||||
if (!cancelled) setEntries(all);
|
||||
} catch (err: unknown) {
|
||||
console.warn('listSounds failed', err);
|
||||
}
|
||||
};
|
||||
void refresh();
|
||||
const unsub = subscribeSoundboardChanges(() => {
|
||||
void refresh();
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
unsub();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const categoryCount = new Set(entries.map((e) => e.category ?? '__uncat')).size;
|
||||
const withHotkey = entries.filter((e) => e.hotkey !== null).length;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium text-fg">
|
||||
{t('app:soundboard.summary_title', { defaultValue: 'Deine Sounds' })}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-fg-muted">
|
||||
{entries.length === 0
|
||||
? t('app:soundboard.summary_empty', {
|
||||
defaultValue: 'Noch keine Sounds vorhanden.',
|
||||
})
|
||||
: t('app:soundboard.summary_counts', {
|
||||
defaultValue:
|
||||
'{{sounds}} Sounds · {{categories}} Kategorien · {{hotkeys}} mit Hotkey',
|
||||
sounds: entries.length,
|
||||
categories: categoryCount,
|
||||
hotkeys: withHotkey,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
className="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:brightness-110"
|
||||
>
|
||||
<span>
|
||||
{t('app:soundboard.manage', { defaultValue: 'Verwalten' })}
|
||||
</span>
|
||||
<ArrowRightIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[11px] text-fg-muted">
|
||||
{t('app:soundboard.settings_hint', {
|
||||
defaultValue:
|
||||
'Hotkeys sind optional. Sounds lassen sich auch während eines Anrufs direkt im UI abspielen.',
|
||||
})}
|
||||
</p>
|
||||
<SoundboardManagerDialog open={open} onClose={() => setOpen(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user