From 65fa2a62716865ff59ba174825f84239cedad4de Mon Sep 17 00:00:00 2001
From: nocnico <nicolas@syntaxdev.de>
Date: Thu, 22 May 2025 01:14:00 +0200
Subject: [PATCH] Add Settings to Navbar, disable ThemeSwap (who uses
 light-mode anyway)

---
 .../dispatch/_components/navbar/Navbar.tsx    |  12 +-
 .../navbar/_components/Connection.tsx         |   2 +-
 .../navbar/_components/Settings.tsx           | 103 ++++++++++++++++++
 .../app/pilot/_components/navbar/Navbar.tsx   |  12 +-
 .../app/pilot/_components/navbar/Settings.tsx | 103 ++++++++++++++++++
 5 files changed, 221 insertions(+), 11 deletions(-)
 create mode 100644 apps/dispatch/app/dispatch/_components/navbar/_components/Settings.tsx
 create mode 100644 apps/dispatch/app/pilot/_components/navbar/Settings.tsx

diff --git a/apps/dispatch/app/dispatch/_components/navbar/Navbar.tsx b/apps/dispatch/app/dispatch/_components/navbar/Navbar.tsx
index 1bdabca4..bd3a30dc 100644
--- a/apps/dispatch/app/dispatch/_components/navbar/Navbar.tsx
+++ b/apps/dispatch/app/dispatch/_components/navbar/Navbar.tsx
@@ -1,14 +1,15 @@
 "use client";
 
 import { Connection } from "./_components/Connection";
-import { ThemeSwap } from "./_components/ThemeSwap";
+/* import { ThemeSwap } from "./_components/ThemeSwap"; */
 import { Audio } from "../../../_components/Audio";
-import { useState } from "react";
+/* import { useState } from "react"; */
 import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
+import { SettingsBtn } from "./_components/Settings";
 
 export default function Navbar() {
-	const [isDark, setIsDark] = useState(false);
+	/* const [isDark, setIsDark] = useState(false);
 
 	const toggleTheme = () => {
 		const newTheme = !isDark;
@@ -17,7 +18,7 @@ export default function Navbar() {
 			"data-theme",
 			newTheme ? "nord" : "dark",
 		);
-	};
+	}; */
 
 	return (
 		<div className="navbar bg-base-100 shadow-sm flex gap-5 justify-between">
@@ -32,8 +33,9 @@ export default function Navbar() {
 				<div className="flex items-center">
 					<Connection />
 				</div>
-				<ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
+				{/* <ThemeSwap isDark={isDark} toggleTheme={toggleTheme} /> */}
 				<div className="flex items-center">
+					<SettingsBtn />
 					<Link
 						href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
 						target="_blank"
diff --git a/apps/dispatch/app/dispatch/_components/navbar/_components/Connection.tsx b/apps/dispatch/app/dispatch/_components/navbar/_components/Connection.tsx
index c5b1209c..5023e6ab 100644
--- a/apps/dispatch/app/dispatch/_components/navbar/_components/Connection.tsx
+++ b/apps/dispatch/app/dispatch/_components/navbar/_components/Connection.tsx
@@ -38,7 +38,7 @@ export const ConnectionBtn = () => {
 					onClick={() => {
 						modalRef.current?.showModal();
 					}}
-					className="btn btn-soft btn-info"
+					className="btn btn-sm btn-soft btn-info"
 				>
 					{connection.status == "disconnected"
 						? "Verbinden"
diff --git a/apps/dispatch/app/dispatch/_components/navbar/_components/Settings.tsx b/apps/dispatch/app/dispatch/_components/navbar/_components/Settings.tsx
new file mode 100644
index 00000000..5a51934f
--- /dev/null
+++ b/apps/dispatch/app/dispatch/_components/navbar/_components/Settings.tsx
@@ -0,0 +1,103 @@
+"use client";
+import { useRef } from "react";
+import { GearIcon } from "@radix-ui/react-icons";
+import { SettingsIcon, Volume2 } from "lucide-react";
+
+export const SettingsBtn = () => {
+	const modalRef = useRef<HTMLDialogElement>(null);
+
+	return (
+		<div>
+			<button
+				className="btn btn-ghost"
+				onSubmit={() => false}
+				onClick={() => {
+					modalRef.current?.showModal();
+				}}
+			>
+				<GearIcon className="w-5 h-5" />
+			</button>
+
+			<dialog ref={modalRef} className="modal">
+				<div className="modal-box">
+					<h3 className="flex items-center gap-2 text-lg font-bold mb-5">
+						<SettingsIcon size={20} /> Einstellungen
+					</h3>
+					<div className="flex flex-col items-center justify-center">
+						<fieldset className="fieldset w-full">
+							<label className="floating-label w-full text-base">
+								<span>Eingabegerät</span>
+								<select className="input w-full" defaultValue={0}>
+									<option key={0} value={0} disabled>
+										Bitte wähle ein Eingabegerät...
+									</option>
+									<option key={1} value={1}>
+										Audiogerät 1
+									</option>
+									<option key={2} value={2}>
+										Audiogerät 2
+									</option>
+									<option key={3} value={3}>
+										Audiogerät 3
+									</option>
+								</select>
+							</label>
+						</fieldset>
+						{/* FÜGE HIER BITTE DEN MIKROFONAUSSCHLAG EIN WIE IN DER V1 */}
+						<div className="divider w-full" />
+					</div>
+					<p className="flex items-center gap-2 text-base mb-2">
+						<Volume2 size={20} /> Ausgabelautstärke
+					</p>
+					<div className="w-full">
+						<input
+							type="range"
+							min={0}
+							max={100}
+							defaultValue={40}
+							className="range range-xs range-accent w-full"
+						/>
+						<div className="flex justify-between px-2.5 mt-2 text-xs">
+							<span>0</span>
+							<span>25</span>
+							<span>50</span>
+							<span>75</span>
+							<span>100</span>
+						</div>
+					</div>
+
+					<div className="flex justify-between modal-action">
+						<button
+							className="btn btn-soft"
+							type="submit"
+							onSubmit={() => false}
+							onClick={() => {
+								modalRef.current?.close();
+							}}
+						>
+							Schließen
+						</button>
+						<button
+							className="btn btn-soft btn-success"
+							type="submit"
+							onSubmit={() => false}
+							onClick={() => {
+								modalRef.current?.close();
+							}}
+						>
+							Speichern
+						</button>
+					</div>
+				</div>
+			</dialog>
+		</div>
+	);
+};
+
+export const Settings = () => {
+	return (
+		<div>
+			<SettingsBtn />
+		</div>
+	);
+};
diff --git a/apps/dispatch/app/pilot/_components/navbar/Navbar.tsx b/apps/dispatch/app/pilot/_components/navbar/Navbar.tsx
index 53cfc32e..53241866 100644
--- a/apps/dispatch/app/pilot/_components/navbar/Navbar.tsx
+++ b/apps/dispatch/app/pilot/_components/navbar/Navbar.tsx
@@ -1,14 +1,15 @@
 "use client";
 
 import { Connection } from "./Connection";
-import { ThemeSwap } from "./ThemeSwap";
+/* import { ThemeSwap } from "./ThemeSwap"; */
 import { Audio } from "../../../_components/Audio";
-import { useState } from "react";
+/* import { useState } from "react"; */
 import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
+import { Settings } from "./Settings";
 
 export default function Navbar() {
-	const [isDark, setIsDark] = useState(false);
+	/* const [isDark, setIsDark] = useState(false);
 
 	const toggleTheme = () => {
 		const newTheme = !isDark;
@@ -17,7 +18,7 @@ export default function Navbar() {
 			"data-theme",
 			newTheme ? "nord" : "dark",
 		);
-	};
+	}; */
 
 	return (
 		<div className="navbar bg-base-100 shadow-sm flex gap-5 justify-between">
@@ -32,8 +33,9 @@ export default function Navbar() {
 				<div className="flex items-center">
 					<Connection />
 				</div>
-				<ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
+				{/* <ThemeSwap isDark={isDark} toggleTheme={toggleTheme} /> */}
 				<div className="flex items-center">
+					<Settings />
 					<Link
 						href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
 						target="_blank"
diff --git a/apps/dispatch/app/pilot/_components/navbar/Settings.tsx b/apps/dispatch/app/pilot/_components/navbar/Settings.tsx
new file mode 100644
index 00000000..5a51934f
--- /dev/null
+++ b/apps/dispatch/app/pilot/_components/navbar/Settings.tsx
@@ -0,0 +1,103 @@
+"use client";
+import { useRef } from "react";
+import { GearIcon } from "@radix-ui/react-icons";
+import { SettingsIcon, Volume2 } from "lucide-react";
+
+export const SettingsBtn = () => {
+	const modalRef = useRef<HTMLDialogElement>(null);
+
+	return (
+		<div>
+			<button
+				className="btn btn-ghost"
+				onSubmit={() => false}
+				onClick={() => {
+					modalRef.current?.showModal();
+				}}
+			>
+				<GearIcon className="w-5 h-5" />
+			</button>
+
+			<dialog ref={modalRef} className="modal">
+				<div className="modal-box">
+					<h3 className="flex items-center gap-2 text-lg font-bold mb-5">
+						<SettingsIcon size={20} /> Einstellungen
+					</h3>
+					<div className="flex flex-col items-center justify-center">
+						<fieldset className="fieldset w-full">
+							<label className="floating-label w-full text-base">
+								<span>Eingabegerät</span>
+								<select className="input w-full" defaultValue={0}>
+									<option key={0} value={0} disabled>
+										Bitte wähle ein Eingabegerät...
+									</option>
+									<option key={1} value={1}>
+										Audiogerät 1
+									</option>
+									<option key={2} value={2}>
+										Audiogerät 2
+									</option>
+									<option key={3} value={3}>
+										Audiogerät 3
+									</option>
+								</select>
+							</label>
+						</fieldset>
+						{/* FÜGE HIER BITTE DEN MIKROFONAUSSCHLAG EIN WIE IN DER V1 */}
+						<div className="divider w-full" />
+					</div>
+					<p className="flex items-center gap-2 text-base mb-2">
+						<Volume2 size={20} /> Ausgabelautstärke
+					</p>
+					<div className="w-full">
+						<input
+							type="range"
+							min={0}
+							max={100}
+							defaultValue={40}
+							className="range range-xs range-accent w-full"
+						/>
+						<div className="flex justify-between px-2.5 mt-2 text-xs">
+							<span>0</span>
+							<span>25</span>
+							<span>50</span>
+							<span>75</span>
+							<span>100</span>
+						</div>
+					</div>
+
+					<div className="flex justify-between modal-action">
+						<button
+							className="btn btn-soft"
+							type="submit"
+							onSubmit={() => false}
+							onClick={() => {
+								modalRef.current?.close();
+							}}
+						>
+							Schließen
+						</button>
+						<button
+							className="btn btn-soft btn-success"
+							type="submit"
+							onSubmit={() => false}
+							onClick={() => {
+								modalRef.current?.close();
+							}}
+						>
+							Speichern
+						</button>
+					</div>
+				</div>
+			</dialog>
+		</div>
+	);
+};
+
+export const Settings = () => {
+	return (
+		<div>
+			<SettingsBtn />
+		</div>
+	);
+};