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,11 +63,10 @@ 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 && (
-              <div className="flex items-center gap-2 wrap" style={{ padding: 12 }}>
+            <div className="flex items-center gap-2 wrap">
-                <span className="muted">{error}</span>
+              <span className="msg err" role="alert">{error}</span>
-                <Button variant="ghost" onClick={() => setReload((k) => k + 1)}><FaRotateRight /> Erneut versuchen</Button>
+              <Button onClick={() => setReload((k) => k + 1)}>Erneut versuchen</Button>
             </div>
           )}
           {!error && chats && sorted.length === 0 && <EmptyState title="Noch keine Unterhaltungen" />}
@@ -77,30 +75,28 @@ export default function CustomerChatPage() {
               <button
                 key={c.customerId}
                 type="button"
-                  className={`chat-list-item ${c.customerId === kunde ? 'active' : ''}`}
+                className="chat-list-item"
+                aria-current={c.customerId === kunde ? 'true' : undefined}
                 onClick={() => open(c.customerId)}
               >
                 <span className="chat-list-top">
                   <strong>{c.customerName}</strong>
-                    {c.unreadFromCustomer > 0 && <span className="side-count">{c.unreadFromCustomer}</span>}
+                  <span className="chat-list-time">{formatViewLogTime(c.lastAt)}</span>
                 </span>
                 <span className="chat-list-last">{lastLine(c)}</span>
-                  <span className="chat-list-time">{formatViewLogTime(c.lastAt)}</span>
+                {c.unreadFromCustomer > 0 && <span className="chat-unread">{c.unreadFromCustomer}</span>}
               </button>
             ))}
           </div>
-          </Card>
         </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)}
-              </span>
-            }>
                 <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; }