fixed theme toggle

2025-02-02 20:23:30 +01:00
parent 3104e8c30d
commit 93804855f1
9 changed files with 199 additions and 122 deletions
--- a/apps/dispatch/app/(dispatch)/_components/Map.tsx
+++ b/apps/dispatch/app/(dispatch)/_components/Map.tsx
@@ -1,27 +1,28 @@
-"use client"
-import { useEffect, useRef } from "react";
+'use client';
+import { useEffect, useRef } from 'react';

-import L from "leaflet";
-import "leaflet/dist/leaflet.css";
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';

 export default () => {
  const mapRef = useRef<HTMLDivElement>(null);

-    useEffect(() => {
-        if (!mapRef.current) return;
-    
-        // Initialisiere die Leaflet-Karte
-        const map = L.map(mapRef.current).setView([51.1657, 10.4515], 6); // Deutschland
-    
-        // OpenStreetMap Tile Layer hinzufügen
-        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> contributors',
-        }).addTo(map);
-    
-        return () => {
-          map.remove(); // Karte beim Unmounten bereinigen
-        };
-      }, []);
-  return <div ref={mapRef} className="w-full h-[500px] rounded-lg shadow-lg" />;
+  useEffect(() => {
+    if (!mapRef.current) return;

-}
+    // Initialisiere die Leaflet-Karte
+    const map = L.map(mapRef.current).setView([51.1657, 10.4515], 6); // Deutschland
+
+    // OpenStreetMap Tile Layer hinzufügen
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> contributors',
+    }).addTo(map);
+
+    return () => {
+      map.remove(); // Karte beim Unmounten bereinigen
+    };
+  }, []);
+
+  return <div ref={mapRef} className="w-full h-full rounded-lg shadow-lg" />;
+};
--- a/apps/dispatch/app/(dispatch)/_components/Navbar.tsx
+++ b/apps/dispatch/app/(dispatch)/_components/Navbar.tsx
@@ -1,64 +1,71 @@
-"use client"; 
-import "../globals.css";
-import { ToggleTalkButton } from "../_components/ToggleTalkButton";
-import { ChangeRufgruppe } from "../_components/ChangeRufgruppe";
-import { Notifications } from "../_components/Notifications";
+'use client';
+import { ToggleTalkButton } from '../_components/ToggleTalkButton';
+import { ChangeRufgruppe } from '../_components/ChangeRufgruppe';
+import { Notifications } from '../_components/Notifications';
+import { MoonIcon, SunIcon } from '@radix-ui/react-icons';

 export default function Navbar() {
  return (
    <div className="navbar bg-base-100 shadow-sm">
-  <div className="flex-1">
-    <a className="btn btn-ghost text-xl">VAR Leitstelle V2</a>
-  </div>
-  <div className="flex gap-2">
-    <ul className="menu menu-horizontal bg-base-200 rounded-box">
-    <li>
-      <ToggleTalkButton />
-    </li>
-    <li>
-      <ChangeRufgruppe />
-    </li>
-  </ul>
-  </div>
-  <div className="flex gap-2">
-    <Notifications />
-  </div>
-  <div className="flex gap-2">
-      <label className="btn btn-ghost swap swap-rotate">
-      {/* this hidden checkbox controls the state */}
-      <input type="checkbox" className="theme-controller" value="synthwave" />
-
-      {/* sun icon */}
-      <svg
-        className="swap-off h-7 w-7 fill-current"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24">
-        <path
-          d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
-      </svg>
-
-      {/* moon icon */}
-      <svg
-        className="swap-on h-7 w-7 fill-current"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24">
-        <path
-          d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
-      </svg>
-    </label>
-    <div className="dropdown dropdown-end">
-      <div tabIndex={0} role="button" className="btn btn-ghost">...
-        
+      <div className="flex-1">
+        <a className="btn btn-ghost text-xl">VAR Leitstelle V2</a>
+      </div>
+      <div className="flex gap-2">
+        <ul className="menu menu-horizontal bg-base-200 rounded-box">
+          <li>
+            <ToggleTalkButton />
+          </li>
+          <li>
+            <ChangeRufgruppe />
+          </li>
+        </ul>
+      </div>
+      <div className="flex gap-2">
+        <Notifications />
+      </div>
+      <div className="flex gap-2">
+        <label className="swap swap-rotate">
+          {/* this hidden checkbox controls the state */}
+          <input type="checkbox" className="theme-controller" value="dark" />
+
+          {/* sun icon */}
+          <svg
+            className="swap-off h-10 w-10 fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+          </svg>
+
+          {/* moon icon */}
+          <svg
+            className="swap-on h-10 w-10 fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+          </svg>
+        </label>
+        <div className="dropdown dropdown-end">
+          <div tabIndex={0} role="button" className="btn btn-ghost">
+            ...
+          </div>
+          <ul
+            tabIndex={0}
+            className="menu menu-sm dropdown-content bg-base-100 box z-1 mt-3 w-52 p-2 shadow"
+          >
+            <li>
+              <a className="justify-between">Profil</a>
+            </li>
+            <li>
+              <a>Einstellungen</a>
+            </li>
+            <li>
+              <a>Logout</a>
+            </li>
+          </ul>
+        </div>
      </div>
-      <ul
-        tabIndex={0}
-        className="menu menu-sm dropdown-content bg-base-100 box z-1 mt-3 w-52 p-2 shadow">
-        <li><a className="justify-between">Profil</a></li>
-        <li><a>Einstellungen</a></li>
-        <li><a>Logout</a></li>
-      </ul>
    </div>
-  </div>
-</div>
  );
 }
--- a/apps/dispatch/app/(dispatch)/_components/ToggleTalkButton.tsx
+++ b/apps/dispatch/app/(dispatch)/_components/ToggleTalkButton.tsx
@@ -1,5 +1,5 @@
-"use client"; 
-import { useTalkStore } from "../_store/useTalkStore";
+'use client';
+import { useTalkStore } from '../../_store/useTalkStore';

 export const ToggleTalkButton = () => {
  const { isTalking, toggleTalking } = useTalkStore();
@@ -8,21 +8,25 @@ export const ToggleTalkButton = () => {
    <button
      onClick={toggleTalking}
      className={`${
-        isTalking ? "bg-red-500 hover:bg-red-600" : "bg-transparent hover:bg-neutral-300"
+        isTalking
+          ? 'bg-red-500 hover:bg-red-600'
+          : 'bg-transparent hover:bg-neutral-300'
      }`}
    >
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor">
-            <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="2"
-            d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z" />
-        </svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-5 w-5"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z"
+        />
+      </svg>
    </button>
  );
-};
+};
--- a/apps/dispatch/app/(dispatch)/layout.tsx
+++ b/apps/dispatch/app/(dispatch)/layout.tsx
@@ -1,9 +1,9 @@
-import type { Metadata } from "next";
-import Navbar from "./_components/Navbar";
+import type { Metadata } from 'next';
+import Navbar from './_components/Navbar';

 export const metadata: Metadata = {
-  title: "VAR Leitstelle v2",
-  description: "Die neue VAR Leitstelle.",
+  title: 'VAR Leitstelle v2',
+  description: 'Die neue VAR Leitstelle.',
 };

 export default function RootLayout({
@@ -12,11 +12,9 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="de" data-theme="light">
-      <body>
-        <Navbar />
-        {children}
-      </body>
-    </html>
+    <>
+      <Navbar />
+      {children}
+    </>
  );
 }
--- a/apps/dispatch/app/(dispatch)/page.tsx
+++ b/apps/dispatch/app/(dispatch)/page.tsx
@@ -1,8 +1,11 @@
-"use client"
-import dynamic from "next/dynamic"
-const MyAwesomeMap = dynamic(() => import("./_components/Map"), { ssr: false })
+'use client';
+import dynamic from 'next/dynamic';
+const Map = dynamic(() => import('./_components/Map'), { ssr: false });

 export default () => {
-
-  return <MyAwesomeMap />
-}
+  return (
+    <div className="relative flex-1">
+      <Map />
+    </div>
+  );
+};
--- a/apps/dispatch/app/layout.tsx
+++ b/apps/dispatch/app/layout.tsx
@@ -1,19 +1,19 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
+import type { Metadata } from 'next';
+import localFont from 'next/font/local';
+import './globals.css';

 const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
+  src: './fonts/GeistVF.woff',
+  variable: '--font-geist-sans',
 });
 const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
+  src: './fonts/GeistMonoVF.woff',
+  variable: '--font-geist-mono',
 });

 export const metadata: Metadata = {
-  title: "VAR Leitstelle v2",
-  description: "Die neue VAR Leitstelle.",
+  title: 'VAR Leitstelle v2',
+  description: 'Die neue VAR Leitstelle.',
 };

 export default function RootLayout({
@@ -23,7 +23,9 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="de" data-theme="light">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} h-screen flex flex-col`}
+      >
        {children}
      </body>
    </html>
--- a/apps/dispatch/package.json
+++ b/apps/dispatch/package.json
@@ -11,6 +11,7 @@
    "check-types": "tsc --noEmit"
  },
  "dependencies": {
+    "@radix-ui/react-icons": "^1.3.2",
    "@repo/ui": "*",
    "@tailwindcss/postcss": "^4.0.2",
    "leaflet": "^1.9.4",
--- a/apps/dispatch/tailwind.config.ts
+++ b/apps/dispatch/tailwind.config.ts
@@ -6,6 +6,7 @@ export default {
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
+
  theme: {
    extend: {
      colors: {
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,17 +21,21 @@
    "apps/dispatch": {
      "version": "0.1.0",
      "dependencies": {
+        "@radix-ui/react-icons": "^1.3.2",
        "@repo/ui": "*",
        "@tailwindcss/postcss": "^4.0.2",
+        "leaflet": "^1.9.4",
        "next": "^15.1.0",
        "postcss": "^8.5.1",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
-        "tailwindcss": "^4.0.2"
+        "tailwindcss": "^4.0.2",
+        "zustand": "^5.0.3"
      },
      "devDependencies": {
        "@repo/eslint-config": "*",
        "@repo/typescript-config": "*",
+        "@types/leaflet": "^1.9.16",
        "@types/node": "^20",
        "@types/react": "18.3.1",
        "@types/react-dom": "18.3.0",
@@ -1166,6 +1170,14 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
+      "integrity": "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
    "node_modules/@repo/db": {
      "resolved": "packages/database",
      "link": true
@@ -1548,6 +1560,12 @@
      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
      "dev": true
    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true
+    },
    "node_modules/@types/glob": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@@ -1598,6 +1616,15 @@
      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
      "dev": true
    },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.16",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.16.tgz",
+      "integrity": "sha512-wzZoyySUxkgMZ0ihJ7IaUIblG8Rdc8AbbZKLneyn+QjYsj5q1QU7TEKYqwTr10BGSzY5LI7tJk9Ifo+mEjdFRw==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
    "node_modules/@types/minimatch": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
@@ -1617,13 +1644,13 @@
      "version": "15.7.14",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
-      "dev": true
+      "devOptional": true
    },
    "node_modules/@types/react": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz",
      "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "@types/prop-types": "*",
        "csstype": "^3.0.2"
@@ -5534,6 +5561,11 @@
        "node": ">=0.10"
      }
    },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
    "node_modules/levn": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -9035,6 +9067,34 @@
        "url": "https://github.com/sponsors/colinhacks"
      }
    },
+    "node_modules/zustand": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.3.tgz",
+      "integrity": "sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    },
    "packages/database": {
      "name": "@repo/db",
      "version": "0.0.0",