From b7d7a852538c70dcb532561f814749c4f391162f Mon Sep 17 00:00:00 2001
From: byGalax <dennis@landmann.dev>
Date: Sat, 16 May 2026 16:51:37 +0200
Subject: [PATCH] feat(desktop): empty-state for chat list

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/desktop/src/pages/ChatsPage.tsx | 46 +++++++++++++++-------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/apps/desktop/src/pages/ChatsPage.tsx b/apps/desktop/src/pages/ChatsPage.tsx
index 8f00d0b..6ee0f89 100644
--- a/apps/desktop/src/pages/ChatsPage.tsx
+++ b/apps/desktop/src/pages/ChatsPage.tsx
@@ -2,10 +2,11 @@ import { acceptDm, type ConversationSummary, isConversationMuted } from '@chat-a
 import { extractErrorCode } from '@chat-app/shared/i18n';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { NavLink, Outlet, useParams } from 'react-router-dom';
+import { NavLink, Outlet, useNavigate, useParams } from 'react-router-dom';
 
 import { ConversationRowMenu } from '../components/ConversationRowMenu';
 import { CreateGroupDialog } from '../components/CreateGroupDialog';
+import { EmptyState } from '../components/EmptyState';
 import {
   AddUserIcon,
   ArchiveIcon,
@@ -119,6 +120,7 @@ function ConversationList({
   archivedCount,
 }: ConversationListProps) {
   const { t } = useTranslation(['app']);
+  const navigate = useNavigate();
 
   return (
     <aside
@@ -223,27 +225,27 @@ function ConversationList({
       ) : error ? (
         <p className="px-4 py-2 text-xs text-rose-500 dark:text-rose-300">{error}</p>
       ) : items.length === 0 ? (
-        <div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
-          <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-line bg-surface-3 text-accent">
-            {showArchived ? (
-              <ArchiveIcon className="h-5 w-5" />
-            ) : (
-              <ChatBubbleIcon className="h-5 w-5" />
-            )}
-          </div>
-          <p className="text-sm text-fg-muted">
-            {showArchived
-              ? t('app:chats.archived_empty_title', { defaultValue: 'Nichts archiviert' })
-              : t('app:chats.empty_title')}
-          </p>
-          <p className="text-xs text-fg-muted/80">
-            {showArchived
-              ? t('app:chats.archived_empty_subtitle', {
-                  defaultValue: 'Archivierte Unterhaltungen erscheinen hier.',
-                })
-              : t('app:chats.empty_subtitle')}
-          </p>
-        </div>
+        showArchived ? (
+          <EmptyState
+            icon={<ArchiveIcon className="h-8 w-8" />}
+            title={t('app:chats.archived_empty_title', { defaultValue: 'Nichts archiviert' })}
+            description={t('app:chats.archived_empty_subtitle', {
+              defaultValue: 'Archivierte Unterhaltungen erscheinen hier.',
+            })}
+          />
+        ) : (
+          <EmptyState
+            icon={<ChatBubbleIcon className="h-8 w-8" />}
+            title={t('app:chats.empty_title', { defaultValue: 'Noch keine Chats' })}
+            description={t('app:chats.empty_desc', {
+              defaultValue: 'Lade einen Freund ein und schreibe die erste Nachricht.',
+            })}
+            action={{
+              label: t('app:chats.empty_cta', { defaultValue: 'Freunde verwalten' }),
+              onClick: () => navigate('/friends'),
+            }}
+          />
+        )
       ) : (
         <VirtualConversationList
           items={items}