enhanced overall Chat experience

apps/dispatch/app/_components/left/Chat.tsx

@@ -85,18 +85,18 @@ export const Chat = () => {
 										Keine Chatpartner gefunden
 									</option>
 								)}
-								{filteredDispatcher?.length ||
-									(filteredAircrafts?.length && (
-										<option disabled value="default">
-											Chatpartner auswählen
-										</option>
-									))}
+								{(filteredDispatcher?.length || filteredAircrafts?.length) && (
+									<option disabled value="default">
+										Chatpartner auswählen
+									</option>
+								)}
 
 								{filteredDispatcher?.map((dispatcher) => (
 									<option key={dispatcher.userId} value={dispatcher.userId}>
 										{dispatcher.zone} - {asPublicUser(dispatcher.publicUser).fullName}
 									</option>
 								))}
+
 								{filteredAircrafts?.map((aircraft) => (
 									<option key={aircraft.userId} value={aircraft.userId}>
 										{aircraft.Station.bosCallsignShort} -{" "}
@@ -111,7 +111,8 @@ export const Chat = () => {
 									const dispatcherUser = dispatcher?.find((d) => d.userId === addTabValue);
 									const user = aircraftUser || dispatcherUser;
 									if (!user) return;
-									addChat(addTabValue, asPublicUser(user.publicUser).fullName);
+									let role = "Station" in user ? user.Station.bosCallsignShort : user.zone;
+									addChat(addTabValue, `${asPublicUser(user.publicUser).fullName} (${role})`);
 									setSelectedChat(addTabValue);
 								}}
 							>
@@ -124,21 +125,13 @@ export const Chat = () => {
 								if (!chat) return null;
 								return (
 									<Fragment key={userId}>
-										<input
-											type="radio"
-											className="tab"
-											aria-label={`<${chat.name}>`}
-											checked={selectedChat === userId}
-											onClick={() => {
-												setChatNotification(userId, false);
-											}}
-											onChange={(e) => {
-												if (e.target.checked) {
-													// Handle tab change
-													setSelectedChat(userId);
-												}
-											}}
-										/>
+										<a
+											className={cn("indicator tab", selectedChat === userId && "tab-active")}
+											onClick={() => setSelectedChat(userId)}
+										>
+											{chat.name}
+											{chat.notification && <span className="indicator-item status status-info" />}
+										</a>
 										<div className="tab-content bg-base-100 border-base-300 p-6 overflow-y-auto">
 											{chat.messages.map((chatMessage) => {
 												const isSender = chatMessage.senderId === session.data?.user.id;
@@ -162,64 +155,71 @@ export const Chat = () => {
 								);
 							})}
 						</div>
-						<div className="join">
-							<div className="w-full">
-								<label className="input join-item w-full">
-									<input
-										type="text"
-										required
-										className="w-full"
-										onChange={(e) => {
-											setMessage(e.target.value);
-										}}
-										onKeyDown={(e) => {
-											if (e.key === "Enter" && !e.shiftKey) {
-												e.preventDefault();
-												if (message.length < 1) return;
-												if (!selectedChat) return;
-												setSending(true);
-												sendMessage(selectedChat, message)
-													.then(() => {
-														setMessage("");
-														setSending(false);
-													})
-													.catch(() => {
-														setSending(false);
-													});
-											}
-										}}
-										value={message}
-									/>
-								</label>
+						{!selectedChat && (
+							<div role="alert" className="alert alert-info alert-outline">
+								<span>Wähle einen Nutzer aus und drücke auf + um einen Chat zu starten</span>
 							</div>
-							<button
-								className="btn btn-soft join-item"
-								onClick={(e) => {
-									e.preventDefault();
-									if (message.length < 1) return;
-									if (!selectedChat) return;
-									setSending(true);
-									sendMessage(selectedChat, message)
-										.then(() => {
-											setMessage("");
-											setSending(false);
-										})
-										.catch(() => {
-											setSending(false);
-										});
-									return false;
-								}}
-								disabled={sending}
-								role="button"
-								onSubmit={() => false} // prevent submit event for react hook form
-							>
-								{sending ? (
-									<span className="loading loading-spinner loading-sm"></span>
-								) : (
-									<PaperPlaneIcon />
-								)}
-							</button>
-						</div>
+						)}
+						{selectedChat && (
+							<div className="join">
+								<div className="w-full">
+									<label className="input join-item w-full">
+										<input
+											type="text"
+											required
+											className="w-full"
+											onChange={(e) => {
+												setMessage(e.target.value);
+											}}
+											onKeyDown={(e) => {
+												if (e.key === "Enter" && !e.shiftKey) {
+													e.preventDefault();
+													if (message.length < 1) return;
+													if (!selectedChat) return;
+													setSending(true);
+													sendMessage(selectedChat, message)
+														.then(() => {
+															setMessage("");
+															setSending(false);
+														})
+														.catch(() => {
+															setSending(false);
+														});
+												}
+											}}
+											value={message}
+										/>
+									</label>
+								</div>
+								<button
+									className="btn btn-soft join-item"
+									onClick={(e) => {
+										e.preventDefault();
+										if (message.length < 1) return;
+										if (!selectedChat) return;
+										setSending(true);
+										sendMessage(selectedChat, message)
+											.then(() => {
+												setMessage("");
+												setSending(false);
+											})
+											.catch(() => {
+												setSending(false);
+											});
+										return false;
+									}}
+									disabled={sending}
+									role="button"
+									onSubmit={() => false} // prevent submit event for react hook form
+								>
+									{sending ? (
+										<span className="loading loading-spinner loading-sm"></span>
+									) : (
+										<PaperPlaneIcon />
+									)}
+								</button>
+							</div>
+						)}
 					</div>
 				</div>
 			)}