feat(desktop): empty-state for friends list

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<string | null>(null);
   const [pendingId, setPendingId] = useState<string | null>(null);
   const [actionError, setActionError] = useState<string | null>(null);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+
+  const focusSearch = useCallback(() => {
+    searchInputRef.current?.focus();
+  }, []);
 
   useEffect(() => {
     const id = window.setTimeout(() => setDebounced(query.trim()), 250);
@@ -119,6 +126,7 @@ export function FriendsPage() {
         <div className="relative">
           <SearchIcon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-muted" />
           <input
+            ref={searchInputRef}
             type="search"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
@@ -160,24 +168,38 @@ export function FriendsPage() {
       {loading ? (
         <LoadingRow />
       ) : tab === 'friends' ? (
-        <FriendList
+        accepted.length === 0 ? (
-          items={accepted}
+          <EmptyState
-          emptyKey="app:friends.empty_friends"
+            icon={<AddUserIcon className="h-8 w-8" />}
-          renderActions={(f) => (
+            title={t('app:friends.empty_title', { defaultValue: 'Noch keine Freunde' })}
-            <FriendActions
+            description={t('app:friends.empty_desc', {
-              busy={pendingId === f.peer.userId || pendingId === 'msg-' + f.peer.userId}
+              defaultValue: 'Suche einen Friend per Username oder schicke eine Einladung.',
-              onMessage={() =>
+            })}
-                performAction('msg-' + f.peer.userId, async () => {
+            action={{
-                  const id = await createDm(supabase, f.peer.userId);
+              label: t('app:friends.empty_cta', { defaultValue: 'Friend hinzufügen' }),
-                  navigate('/chats/' + id);
+              onClick: focusSearch,
-                })
+            }}
-              }
+          />
-              onUnfriend={() =>
+        ) : (
-                performAction(f.peer.userId, () => removeFriendship(supabase, f.peer.userId))
+          <FriendList
-              }
+            items={accepted}
-            />
+            emptyKey="app:friends.empty_friends"
-          )}
+            renderActions={(f) => (
-        />
+              <FriendActions
+                busy={pendingId === f.peer.userId || pendingId === 'msg-' + f.peer.userId}
+                onMessage={() =>
+                  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' ? (
         <FriendList
           items={outgoing}