JUSN/tickte-system
0
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed 2026-10-06 14:36:45 +00:00
1 parent ea528486aa
commit cb7ac6edf6
2 files changed
+30 -37
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/CustomerChatPage.jsx
+30 -34
View File
@@ -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 && (
<div className="flex items-center gap-2 wrap" style={{ padding: 12 }}>
<span className="muted">{error}</span>
<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>
))}
{error && (
<div className="flex items-center gap-2 wrap">
<span className="msg err" role="alert">{error}</span>
<Button onClick={() => setReload((k) => k + 1)}>Erneut versuchen</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 variant="ghost" size="sm" className="chat-back" onClick={() => setParams({})}><FaArrowLeft /> Alle Unterhaltungen</Button>
{nameOf(kunde)}
</span>
}>
<ChatThread key={kunde} customerId={kunde} customerName={nameOf(kunde)} />
</Card>
<>
<Button className="chat-back" onClick={() => setParams({})}>← Alle Unterhaltungen</Button>
<Card title={nameOf(kunde)}>
<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
-3
View File
@@ -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; }