fixes #118

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

@@ -10,9 +10,11 @@ import { getConnectedDispatcherAPI } from "_querys/dispatcher";
 import { getConnectedAircraftsAPI } from "_querys/aircrafts";
 import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
 import { usePilotConnectionStore } from "_store/pilot/connectionStore";
+import { Trash } from "lucide-react";
 
 export const Chat = () => {
 	const {
+		removeChat,
 		setReportTabOpen,
 		chatOpen,
 		setChatOpen,
@@ -50,13 +52,21 @@ export const Chat = () => {
 		setOwnId(session.data?.user.id);
 	}, [session.data?.user.id, setOwnId]);
 
-	const filteredDispatcher = dispatcher?.filter((d) => d.userId !== session.data?.user.id);
+	const filteredDispatcher = dispatcher?.filter(
+		(d) => d.userId !== session.data?.user.id && !chats[d.userId],
+	);
 	const filteredAircrafts = aircrafts?.filter(
-		(a) => a.userId !== session.data?.user.id && dispatcherConnected,
+		(a) => a.userId !== session.data?.user.id && dispatcherConnected && chats[a.userId],
 	);
 
 	const btnActive = pilotConnected || dispatcherConnected;
 
+	useEffect(() => {
+		if (!filteredDispatcher?.length && !filteredAircrafts?.length) {
+			setAddTabValue("default");
+		}
+	}, [filteredDispatcher, filteredAircrafts]);
+
 	useEffect(() => {
 		if (!btnActive) {
 			setChatOpen(false);
@@ -146,13 +156,17 @@ export const Chat = () => {
 							<button
 								className="btn btn-sm btn-soft btn-primary join-item"
 								onClick={() => {
+									if (addTabValue === "default") return;
 									const aircraftUser = aircrafts?.find((a) => a.userId === addTabValue);
 									const dispatcherUser = dispatcher?.find((d) => d.userId === addTabValue);
 									const user = aircraftUser || dispatcherUser;
+									console.log("Adding chat for user:", addTabValue, user);
 									if (!user) return;
 									const role = "Station" in user ? user.Station.bosCallsignShort : user.zone;
+									console.log("Adding chat for user:", addTabValue);
 									addChat(addTabValue, `${asPublicUser(user.publicUser).fullName} (${role})`);
 									setSelectedChat(addTabValue);
+									setAddTabValue("default");
 								}}
 							>
 								<span className="text-xl">+</span>
@@ -164,7 +178,7 @@ export const Chat = () => {
 								if (!chat) return null;
 								return (
 									<Fragment key={userId}>
-										<a
+										<div
 											className={cn("indicator tab", selectedChat === userId && "tab-active")}
 											onClick={() => {
 												if (selectedChat === userId) {
@@ -176,7 +190,7 @@ export const Chat = () => {
 										>
 											{chat.name}
 											{chat.notification && <span className="indicator-item status status-info" />}
-										</a>
+										</div>
 										<div className="tab-content bg-base-100 border-base-300 max-h-[250px] overflow-y-auto p-6">
 											{/* So macht man kein overflow handeling, weiß ich. Aber es funktioniert... */}
 											{chat.messages.map((chatMessage) => {
@@ -208,6 +222,16 @@ export const Chat = () => {
 						)}
 						{selectedChat && (
 							<div className="join">
+								<button
+									className="join-item btn btn-error btn-outline"
+									onClick={(e) => {
+										e.stopPropagation();
+										removeChat(selectedChat);
+									}}
+									type="button"
+								>
+									<Trash size={16} />
+								</button>
 								<div className="w-full">
 									<label className="input join-item w-full">
 										<input

apps/dispatch/app/_store/leftMenuStore.ts

@@ -19,6 +19,7 @@ interface ChatStore {
 	sendMessage: (userId: string, message: string) => Promise<void>;
 	addChat: (userId: string, name: string) => void;
 	addMessage: (userId: string, message: ChatMessage) => void;
+	removeChat: (userId: string) => void;
 }
 
 export const useLeftMenuStore = create<ChatStore>((set, get) => ({
@@ -37,6 +38,15 @@ export const useLeftMenuStore = create<ChatStore>((set, get) => ({
 			setChatNotification(chatId, false); // Set notification to false when chat is selected
 		}
 	},
+	removeChat: (userId: string) => {
+		const { chats, setSelectedChat, selectedChat } = get();
+		const newChats = { ...chats };
+		delete newChats[userId];
+		set({ chats: newChats });
+		if (selectedChat === userId) {
+			setSelectedChat(null);
+		}
+	},
 	setOwnId: (id: string) => set({ ownId: id }),
 	chats: {},
 	sendMessage: (userId: string, message: string) => {