diff --git a/apps/desktop/src/pages/FriendsPage.tsx b/apps/desktop/src/pages/FriendsPage.tsx index bbb973e..1e247e2 100644 --- a/apps/desktop/src/pages/FriendsPage.tsx +++ b/apps/desktop/src/pages/FriendsPage.tsx @@ -8,12 +8,14 @@ import { sendFriendRequest, } from '@chat-app/shared/friends'; import { extractErrorCode } from '@chat-app/shared/i18n'; -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { Avatar } from '../components/Avatar'; +import { EmptyState } from '../components/EmptyState'; import { + AddUserIcon, AlertIcon, ChatBubbleIcon, CheckCircleIcon, @@ -39,6 +41,11 @@ export function FriendsPage() { const [searchError, setSearchError] = useState(null); const [pendingId, setPendingId] = useState(null); const [actionError, setActionError] = useState(null); + const searchInputRef = useRef(null); + + const focusSearch = useCallback(() => { + searchInputRef.current?.focus(); + }, []); useEffect(() => { const id = window.setTimeout(() => setDebounced(query.trim()), 250); @@ -119,6 +126,7 @@ export function FriendsPage() {
setQuery(e.target.value)} @@ -160,24 +168,38 @@ export function FriendsPage() { {loading ? ( ) : tab === 'friends' ? ( - ( - - performAction('msg-' + f.peer.userId, async () => { - const id = await createDm(supabase, f.peer.userId); - navigate('/chats/' + id); - }) - } - onUnfriend={() => - performAction(f.peer.userId, () => removeFriendship(supabase, f.peer.userId)) - } - /> - )} - /> + accepted.length === 0 ? ( + } + title={t('app:friends.empty_title', { defaultValue: 'Noch keine Freunde' })} + description={t('app:friends.empty_desc', { + defaultValue: 'Suche einen Friend per Username oder schicke eine Einladung.', + })} + action={{ + label: t('app:friends.empty_cta', { defaultValue: 'Friend hinzufügen' }), + onClick: focusSearch, + }} + /> + ) : ( + ( + + performAction('msg-' + f.peer.userId, async () => { + const id = await createDm(supabase, f.peer.userId); + navigate('/chats/' + id); + }) + } + onUnfriend={() => + performAction(f.peer.userId, () => removeFriendship(supabase, f.peer.userId)) + } + /> + )} + /> + ) ) : tab === 'pending' ? (