Tickets: Abschlussfixes P2 - Termin ohne Umbruch in der Zeitspanne, Art in der Liste, Laden statt Leerzustand, Unterstuetzung entsperrt bei Fehler, Aufraeumen

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

src/pages/TicketPage.jsx

@@ -54,7 +54,7 @@ export default function TicketPage() {
   if (error || !ticket) {
     return (
       <div className="page">
-        <p className="msg err" role="alert">Fehler: {error || 'Das Ticket konnte nicht geladen werden.'}</p>
+        <p className="msg err" role="alert">Fehler: {error}</p>
         <div className="mt-2">{back}</div>
       </div>
     )
@@ -63,6 +63,18 @@ export default function TicketPage() {
   return <TicketView key={ticket.$id} ticket={ticket} updateWorkorder={updateWorkorder} tab={activeTab} />
 }
 
+// Datum und Uhrzeitspanne bleiben je in einer Zeile: umbrechen darf nur das Komma dazwischen.
+// Rohtext ohne ", " (unlesbare Altwerte) bricht weiter frei um.
+function AppointmentText({ text }) {
+  const at = text.indexOf(', ')
+  if (at === -1) return text
+  return (
+    <>
+      <span className="nowrap">{text.slice(0, at)}</span>, <span className="nowrap">{text.slice(at + 2)}</span>
+    </>
+  )
+}
+
 function TicketView({ ticket, updateWorkorder, tab }) {
   const location = useLocation()
   const navigate = useNavigate()
@@ -204,7 +216,7 @@ function TicketView({ ticket, updateWorkorder, tab }) {
         </div>
         <div className="fact">
           <div className="k">Termin</div>
-          <div className="v">{appointment || <span className="faint">Kein Termin</span>}</div>
+          <div className="v">{appointment ? <AppointmentText text={appointment} /> : <span className="faint">Kein Termin</span>}</div>
         </div>
         <div className="fact">
           <div className="k">Fällig</div>

src/pages/TicketsPage.jsx

@@ -19,7 +19,7 @@ import {
 } from '../lib/ticketListUrl'
 import { isRowActivation } from '../lib/rowClick'
 import { ticketPath, ticketRef } from '../lib/ticketRoutes'
-import { TYPE_FILTERS } from '../lib/ticketStatus'
+import { TYPE_FILTERS, ticketTypeLabel } from '../lib/ticketStatus'
 import { TIME_MAX_ROWS, minutesCellText } from '../lib/ticketTimes'
 import { appointmentText, assigneeLabel, ticketNumber } from '../lib/ticketView'
 
@@ -91,12 +91,6 @@ function TicketList() {
   const { employees } = useEmployees()
   const { byWoid, capped, version } = useTicketMinutes(workorders)
 
-  // Der Ladehinweis ohne Zeilen gilt nur dem allerersten Laden; danach bleiben die alten Zeilen stehen
-  const [loaded, setLoaded] = useState(false)
-  useEffect(() => {
-    if (!loading) setLoaded(true)
-  }, [loading])
-
   // Mit welchem Limit wurden die gezeigten Zeilen geladen? Nach "Mehr laden" ist state.limit schon größer,
   // die Zeilen sind es erst mit der Antwort: der Knopf bleibt bis dahin stehen (und ist gesperrt).
   // Im Ruhezustand heißt das: Zeilen >= state.limit und state.limit unter der Obergrenze von nextLimit.
@@ -122,6 +116,9 @@ function TicketList() {
     return { id: tab.id, label: tab.label, count }
   })
 
+  // Die Art steht in der Zeile, solange der Filter keine einzelne Art festlegt
+  const showType = state.typeId === 'orders' || state.typeId === 'all'
+
   // byWoid ist eine an Ort und Stelle ergänzte Map: erst `version` zeigt eine Änderung an
   const rows = useMemo(
     () =>
@@ -147,6 +144,7 @@ function TicketList() {
               <div className="cell-sub">
                 {ticket.customerName || 'Unbekannt'}
                 {ticket.customerLocation ? ` · ${ticket.customerLocation}` : ''}
+                {showType && ticket.type ? ` · ${ticketTypeLabel(ticket.type)}` : ''}
               </div>
             </td>
             <td><StatusPill status={ticket.status} /></td>
@@ -157,11 +155,12 @@ function TicketList() {
           </tr>
         )
       }),
-    [workorders, employees, byWoid, version, listSearch, navigate]
+    [workorders, employees, byWoid, version, listSearch, navigate, showType]
   )
 
   let content
-  if (!loaded && loading) {
+  // Ladezustand, solange keine Zeilen da sind (erstes Laden und Filterwechsel auf eine leere Liste); mit Zeilen bleiben die alten stehen
+  if (loading && workorders.length === 0) {
     content = <div className="loading">Wird geladen …</div>
   } else if (error) {
     content = <p className="msg err" role="alert">Fehler: {error}</p>