Design P6: Chat-Liste als Haarlinien-Zeilen, Zaehler und Zurueck-Pfeil als Text, side-count entfaellt

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/pages/CustomerChatPage.jsx

@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { FaArrowLeft, FaRotateRight } from 'react-icons/fa6'
 import { PageHeader, Card, Button, EmptyState, AutocompleteInput } from '../components/ui'
 import ChatThread from '../components/chat/ChatThread'
 import { useCustomers } from '../hooks/useCustomers'
@@ -64,43 +63,40 @@ export default function CustomerChatPage() {
       <div className={`chat-page ${kunde ? 'has-thread' : ''}`}>
         <div className="chat-side">
           <AutocompleteInput value={query} onChange={onPick} getSuggestions={suggestions} placeholder="Neue Nachricht an Kunde…" />
-          <Card pad={false}>
+          {error && (
-            {error && (
+            <div className="flex items-center gap-2 wrap">
-              <div className="flex items-center gap-2 wrap" style={{ padding: 12 }}>
+              <span className="msg err" role="alert">{error}</span>
-                <span className="muted">{error}</span>
+              <Button onClick={() => setReload((k) => k + 1)}>Erneut versuchen</Button>
-                <Button variant="ghost" onClick={() => setReload((k) => k + 1)}><FaRotateRight /> Erneut versuchen</Button>
-              </div>
-            )}
-            {!error && chats && sorted.length === 0 && <EmptyState title="Noch keine Unterhaltungen" />}
-            <div className="chat-list">
-              {sorted.map((c) => (
-                <button
-                  key={c.customerId}
-                  type="button"
-                  className={`chat-list-item ${c.customerId === kunde ? 'active' : ''}`}
-                  onClick={() => open(c.customerId)}
-                >
-                  <span className="chat-list-top">
-                    <strong>{c.customerName}</strong>
-                    {c.unreadFromCustomer > 0 && <span className="side-count">{c.unreadFromCustomer}</span>}
-                  </span>
-                  <span className="chat-list-last">{lastLine(c)}</span>
-                  <span className="chat-list-time">{formatViewLogTime(c.lastAt)}</span>
-                </button>
-              ))}
             </div>
-          </Card>
+          )}
+          {!error && chats && sorted.length === 0 && <EmptyState title="Noch keine Unterhaltungen" />}
+          <div className="chat-list">
+            {sorted.map((c) => (
+              <button
+                key={c.customerId}
+                type="button"
+                className="chat-list-item"
+                aria-current={c.customerId === kunde ? 'true' : undefined}
+                onClick={() => open(c.customerId)}
+              >
+                <span className="chat-list-top">
+                  <strong>{c.customerName}</strong>
+                  <span className="chat-list-time">{formatViewLogTime(c.lastAt)}</span>
+                </span>
+                <span className="chat-list-last">{lastLine(c)}</span>
+                {c.unreadFromCustomer > 0 && <span className="chat-unread">{c.unreadFromCustomer}</span>}
+              </button>
+            ))}
+          </div>
         </div>
         <div className="chat-main">
           {kunde ? (
-            <Card title={
+            <>
-              <span className="flex items-center gap-2">
+              <Button className="chat-back" onClick={() => setParams({})}>← Alle Unterhaltungen</Button>
-                <Button variant="ghost" size="sm" className="chat-back" onClick={() => setParams({})}><FaArrowLeft /> Alle Unterhaltungen</Button>
+              <Card title={nameOf(kunde)}>
-                {nameOf(kunde)}
+                <ChatThread key={kunde} customerId={kunde} customerName={nameOf(kunde)} />
-              </span>
+              </Card>
-            }>
+            </>
-              <ChatThread key={kunde} customerId={kunde} customerName={nameOf(kunde)} />
-            </Card>
           ) : (
             <Card><EmptyState title="Unterhaltung links auswählen" hint="Oder oben eine neue Nachricht an einen Kunden beginnen." /></Card>
           )}

src/styles/global.css

@@ -1295,9 +1295,6 @@ select.form-control {
 .text-grey { color: var(--text-2); }
 .text-red { color: var(--red-fg); }
 
-/* Zaehler der Altliste: .side-count bis P6 (Chat-Liste) */
-.side-count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
-
 /* Neutral: Karte, Raster */
 .card { margin-bottom: 16px; background: none; border: 0; border-radius: 0; color: var(--text); }
 .card-header { padding: 0 0 8px; background: none; border-bottom: 1px solid var(--line); color: var(--text); font-weight: 600; }