Added soem things

apps/dispatch/app/pilot/_components/mrt/Mrt.tsx

@@ -74,7 +74,6 @@ export const Mrt = () => {
 				width: "auto",
 				maxHeight: "100%",
 				maxWidth: "100%",
-				overflow: "hidden",
 				color: "white",
 				gridTemplateColumns:
 					"21.83% 4.43% 24.42% 18.08% 5.93% 1.98% 6.00% 1.69% 6.00% 9.35%",

apps/dispatch/app/pilot/_components/navbar/Audio.tsx

@@ -1,143 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { usePilotConnectionStore } from "_store/pilot/connectionStore";
-import {
-	Disc,
-	Mic,
-	PlugZap,
-	ServerCrash,
-	ShieldQuestion,
-	Signal,
-	SignalLow,
-	SignalMedium,
-	WifiOff,
-	ZapOff,
-} from "lucide-react";
-import { useAudioStore } from "_store/audioStore";
-import { cn } from "helpers/cn";
-import { ConnectionQuality } from "livekit-client";
-import { ROOMS } from "_data/livekitRooms";
-
-export const Audio = () => {
-	const connection = usePilotConnectionStore();
-	const {
-		isTalking,
-		toggleTalking,
-		connect,
-		state,
-		connectionQuality,
-		disconnect,
-		remoteParticipants,
-		room,
-		message,
-	} = useAudioStore();
-	const [selectedRoom, setSelectedRoom] = useState<string>("LST_01");
-
-	useEffect(() => {
-		const joinRoom = async () => {
-			if (connection.status != "connected") return;
-			if (state === "connected") return;
-			connect(selectedRoom);
-		};
-
-		joinRoom();
-
-		return () => {
-			disconnect();
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [connection.status]);
-
-	return (
-		<>
-			<div className="bg-base-200 rounded-box flex items-center gap-2 p-1">
-				{state === "error" && (
-					<div className="h-4 flex items-center">{message}</div>
-				)}
-				<button
-					onClick={() => {
-						if (state === "connected") toggleTalking();
-						if (state === "error" || state === "disconnected")
-							connect(selectedRoom);
-					}}
-					className={cn(
-						"btn btn-sm btn-soft border-none hover:bg-inherit",
-						!isTalking && "bg-transparent hover:bg-sky-400/20",
-						isTalking && "bg-red-500 hover:bg-red-600",
-						state === "disconnected" && "bg-red-500 hover:bg-red-500",
-						state === "error" && "bg-red-500 hover:bg-red-500",
-						state === "connecting" &&
-							"bg-yellow-500 hover:bg-yellow-500 cursor-default",
-					)}
-				>
-					{state === "connected" && <Mic className="w-5 h-5" />}
-					{state === "disconnected" && <WifiOff className="w-5 h-5" />}
-					{state === "connecting" && <PlugZap className="w-5 h-5" />}
-					{state === "error" && <ServerCrash className="w-5 h-5" />}
-				</button>
-
-				{state === "connected" && (
-					<details className="dropdown relative z-[1050]">
-						<summary className="dropdown btn btn-ghost flex items-center gap-1">
-							{connectionQuality === ConnectionQuality.Excellent && (
-								<Signal className="w-5 h-5" />
-							)}
-							{connectionQuality === ConnectionQuality.Good && (
-								<SignalMedium className="w-5 h-5" />
-							)}
-							{connectionQuality === ConnectionQuality.Poor && (
-								<SignalLow className="w-5 h-5" />
-							)}
-							{connectionQuality === ConnectionQuality.Lost && (
-								<ZapOff className="w-5 h-5" />
-							)}
-							{connectionQuality === ConnectionQuality.Unknown && (
-								<ShieldQuestion className="w-5 h-5" />
-							)}
-							<div className="badge badge-sm badge-soft badge-success">
-								{remoteParticipants}
-							</div>
-						</summary>
-						<ul className="menu dropdown-content bg-base-200 rounded-box z-[1050] w-52 p-2 shadow-sm">
-							{ROOMS.map((r) => (
-								<li key={r}>
-									<button
-										className="btn btn-sm btn-ghost text-left flex items-center justify-start gap-2 relative"
-										onClick={() => {
-											if (selectedRoom === r) return;
-											setSelectedRoom(r);
-											connect(r);
-										}}
-									>
-										{room?.name === r && (
-											<Disc
-												className="text-success text-sm absolute left-2"
-												width={15}
-											/>
-										)}
-										<span className="flex-1 text-center">{r}</span>
-									</button>
-								</li>
-							))}
-							<li>
-								<button
-									className="btn btn-sm btn-ghost text-left flex items-center justify-start gap-2 relative"
-									onClick={() => {
-										disconnect();
-									}}
-								>
-									<WifiOff
-										className="text-error text-sm absolute left-2"
-										width={15}
-									/>
-									<span className="flex-1 text-center">Disconnect</span>
-								</button>
-							</li>
-						</ul>
-					</details>
-				)}
-			</div>
-		</>
-	);
-};

apps/dispatch/app/pilot/_components/navbar/Connection.tsx

@@ -147,7 +147,9 @@ export const ConnectionBtn = () => {
 									}}
 									className="btn btn-soft btn-info"
 								>
-									Verbinden
+									{connection.status == "disconnected"
+										? "Verbinden"
+										: connection.status}
 								</button>
 							)}
 						</form>

apps/dispatch/app/pilot/_components/navbar/Navbar.tsx

@@ -2,7 +2,7 @@
 
 import { Connection } from "./Connection";
 import { ThemeSwap } from "./ThemeSwap";
-import { Audio } from "./Audio";
+import { Audio } from "../../../_components/Audio";
 import { useState } from "react";
 import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
 import Link from "next/link";