Fix map height (ish)

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/kidarr-server.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/kidarr-server.iml" filepath="$PROJECT_DIR$/.idea/kidarr-server.iml" />
+    </modules>
+  </component>
+</project>

.idea/prettier.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+    <option name="myRunOnSave" value="true" />
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package.json

@@ -53,6 +53,8 @@
     "@trpc/next": "^10.43.6",
     "@trpc/react-query": "^10.43.6",
     "@trpc/server": "^10.43.6",
+    "@types/leaflet": "^1.9.8",
+    "@types/react-leaflet": "^3.0.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.0",
@@ -61,6 +63,7 @@
     "drizzle-zod": "^0.5.1",
     "embla-carousel-react": "^8.0.0-rc20",
     "http-status-codes": "^2.3.0",
+    "leaflet": "^1.9.4",
     "local-ssl-proxy": "^2.0.5",
     "lucide-react": "^0.314.0",
     "next": "^14.0.4",

src/app/(app)/children/page.tsx

@@ -1,5 +1,5 @@
 import ChildList from "@/components/children/child-list";
-import NewChildModal from "@/components/children/ChildModal";
+import NewChildModal from "@/components/children/child-modal";
 import { api } from "@/trpc/server";
 import { checkAuth } from "@/lib/auth/utils";
 

src/app/debug/page.tsx

@@ -0,0 +1,12 @@
+import { Button } from "@/components/ui/button";
+import React from "react";
+
+const DebugPage = () => {
+  return (
+    <div className="p-8">
+      <Button variant="default">I am button</Button>
+    </div>
+  );
+};
+
+export default DebugPage;

src/components/children/child-list.tsx

@@ -49,9 +49,7 @@ const Child = ({ child }: { child: CompleteChild }) => {
       <TableCell className="text-right">
         <div className="space-x-1">
           <ConnectDeviceDialog child={child} />
-          <Button>
-            <Icons.edit className="mr-2 h-4 w-4" />
-          </Button>
+          <ChildModal child={child} />
         </div>
       </TableCell>
     </TableRow>

src/components/children/child-modal.tsx

@@ -11,6 +11,7 @@ import {
 } from "../ui/dialog";
 import ChildForm from "./child-form";
 import { type Child } from "@/server/db/schema/children";
+import { Icons } from "../icons";
 
 export default function ChildModal({
   child,
@@ -46,10 +47,14 @@ export default function ChildModal({
           </Button>
         ) : (
           <Button
-            variant={editing ? "ghost" : "outline"}
-            size={editing ? "sm" : "icon"}
+            variant={editing ? "default" : "default"}
+            size={editing ? "sm" : "sm"}
           >
-            {editing ? "Edit" : "+"}
+            {editing ? (
+              <Icons.edit className="h-4 w-4" />
+            ) : (
+              <Icons.add className="h-4 w-4" />
+            )}
           </Button>
         )}
       </DialogTrigger>

src/components/children/connect-device-dialog.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Button } from '@/components/ui/button';
+import React from "react";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -8,21 +8,21 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/components/ui/dialog';
+} from "@/components/ui/dialog";
 
-import { Icons } from '@/components/icons';
-import QRCode from 'react-qr-code';
-import type ChildModel from '@/lib/models/child';
+import { Icons } from "@/components/icons";
+import QRCode from "react-qr-code";
+import { type Child } from "@/server/db/schema/children";
 
 type ConnectDeviceDialogProps = {
-  child: ChildModel;
+  child: Child;
 };
 
 const ConnectDeviceDialog: React.FC<ConnectDeviceDialogProps> = ({ child }) => {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button>
+        <Button size={"sm"}>
           <Icons.connect className="mr-2 h-4 w-4" /> Connect device
         </Button>
       </DialogTrigger>
@@ -34,10 +34,10 @@ const ConnectDeviceDialog: React.FC<ConnectDeviceDialogProps> = ({ child }) => {
           </DialogDescription>
         </DialogHeader>
         <div className="bg-slate-300 ">
-          <div className="p-4 border-8 border-slate-200">
+          <div className="border-8 border-slate-200 p-4">
             <QRCode
               size={190}
-              style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
+              style={{ height: "auto", maxWidth: "100%", width: "100%" }}
               value={child.id}
             />
           </div>

src/components/header/site-header.tsx

@@ -13,45 +13,47 @@ import PresenceIndicator from "@/components/widgets/presence-indicator";
 export function SiteHeader() {
   const { data: session, status } = useSession();
   return (
-    <header className="sticky top-0 z-40 w-full border-b bg-background">
-      <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
-        <MainNav items={siteConfig.mainNav} />
-        <div className="flex flex-1 items-center justify-end space-x-4">
-          <nav className="flex items-center space-x-1">
-            <Link
-              href={siteConfig.links.github}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <div
-                className={buttonVariants({
-                  size: "icon",
-                  variant: "ghost",
-                })}
+    <header className="sticky inset-x-0 top-0 z-50  backdrop-blur-sm duration-300 animate-in slide-in-from-top-1">
+      <div className="flex border-b border-accent bg-background/80 py-2">
+        <div className="container flex items-center justify-between gap-6">
+          <MainNav items={siteConfig.mainNav} />
+          <div className="flex flex-1 items-center justify-end space-x-4">
+            <nav className="flex items-center space-x-1">
+              <Link
+                href={siteConfig.links.github}
+                target="_blank"
+                rel="noreferrer"
               >
-                <Icons.gitHub className="h-5 w-5" />
-                <span className="sr-only">GitHub</span>
-              </div>
-            </Link>
-            <Link
-              href={siteConfig.links.twitter}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <div
-                className={buttonVariants({
-                  size: "icon",
-                  variant: "ghost",
-                })}
+                <div
+                  className={buttonVariants({
+                    size: "icon",
+                    variant: "ghost",
+                  })}
+                >
+                  <Icons.gitHub className="h-5 w-5" />
+                  <span className="sr-only">GitHub</span>
+                </div>
+              </Link>
+              <Link
+                href={siteConfig.links.twitter}
+                target="_blank"
+                rel="noreferrer"
               >
-                <Icons.twitter className="h-5 w-5 fill-current" />
-                <span className="sr-only">Twitter</span>
-              </div>
-            </Link>
-            <ThemeToggle />
-            <PresenceIndicator />
-            <AuthHeader />
-          </nav>
+                <div
+                  className={buttonVariants({
+                    size: "icon",
+                    variant: "ghost",
+                  })}
+                >
+                  <Icons.twitter className="h-5 w-5 fill-current" />
+                  <span className="sr-only">Twitter</span>
+                </div>
+              </Link>
+              <ThemeToggle />
+              <PresenceIndicator />
+              <AuthHeader />
+            </nav>
+          </div>
         </div>
       </div>
     </header>

src/components/maps/main-map.tsx

@@ -19,116 +19,17 @@ type MainMapProps = {
   kids: CompleteChild[];
 };
 const MainMap: React.FC<MainMapProps> = ({ kids }) => {
-  const [isMounted, setIsMounted] = useState(false);
-  useEffect(() => {
-    setIsMounted(true);
-    console.log("MainMap", "kids", kids);
-  }, [kids]);
-  // Draw lines between each ping showing the direction of travel
-  const renderLines = (children: CompleteChild[]) => {
-    return children?.map((child) =>
-      child.devices?.map(
-        (device) => <h2>I AM DEVICE</h2>,
-
-        // device.pings?.map((ping, index) => {
-        //   const nextPing = device.pings[index + 1];
-        //   if (nextPing) {
-        //     return (
-        //       <>
-        //         <Polyline
-        //           key={`${ping.id}-${nextPing.id}`}
-        //           positions={[
-        //             [ping.latitude, ping.longitude],
-        //             [nextPing.latitude, nextPing.longitude],
-        //           ]}
-        //         />
-        //         <MapMarker
-        //           key={ping.id}
-        //           childName={child.name}
-        //           avatar={child.avatar}
-        //           deviceId={device.id}
-        //           deviceName={device.deviceName}
-        //           latitude={ping.latitude}
-        //           longitude={ping.longitude}
-        //           timestamp={ping.timestamp}
-        //         />
-        //       </>
-        //     );
-        //   }
-        //   return null;
-        // }),
-      ),
-    );
-  };
   return (
-    isMounted && (
-      <div>
-        <h1>
-          This is the main <i className="fa fa-map-o" aria-hidden="true"></i>
-        </h1>
-        <MapContainer
-          className="map"
-          center={[51.903614, -8.468399]}
-          zoom={10}
-          scrollWheelZoom={true}
-        >
-          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-          <>
-            {renderLines(kids)}
-            {kids?.map((kid) =>
-              kid.devices?.map((device) => {
-                const latestPing = getLatestPing(device.pings);
-
-                return (
-                  latestPing && (
-                    <MapMarker
-                      key={latestPing.id}
-                      childName={kid.name}
-                      avatar={kid.avatar}
-                      deviceId={device.id}
-                      deviceName={device.deviceName}
-                      latitude={latestPing.latitude}
-                      longitude={latestPing.longitude}
-                      timestamp={latestPing.timestamp}
-                    />
-                  )
-                );
-
-                // Draw coordinates of each ping on the map
-                const renderPings = () => {
-                  return kids?.map((kid) =>
-                    kid.devices?.map((device) =>
-                      device.pings?.map((ping) => (
-                        <Circle
-                          key={ping.id}
-                          center={[ping.latitude, ping.longitude]}
-                          radius={100} // Adjust the radius as needed
-                        />
-                      )),
-                    ),
-                  );
-                };
-
-                return (
-                  latestPing && (
-                    <MapMarker
-                      key={latestPing.id}
-                      childName={kid.name}
-                      avatar={kid.avatar}
-                      deviceId={device.id}
-                      deviceName={device.deviceName}
-                      latitude={latestPing.latitude}
-                      longitude={latestPing.longitude}
-                      timestamp={latestPing.timestamp}
-                    />
-                  )
-                );
-              }),
-            )}
-          </>
-        </MapContainer>
-      </div>
-    )
+    <div>
+      <MapContainer
+        className="map"
+        center={[51.903614, -8.468399]}
+        zoom={10}
+        scrollWheelZoom={true}
+      >
+        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+      </MapContainer>
+    </div>
   );
 };
 export default MainMap;

src/styles/globals.css

@@ -1,76 +1,85 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
- 
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
- 
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
- 
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
- 
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
- 
+    --card: 258 70% 100%;
+    --ring: 258 58% 37%;
+    --input: 220 13% 91%;
+    --muted: 258 29% 85%;
+    --accent: 258 19% 81%;
+    --border: 220 13% 91%;
+    --popover: 258 70% 100%;
+    --primary: 258 58% 37%;
+    --secondary: 258 19% 81%;
+    --background: 258 70% 100%;
+    --foreground: 258 77% 0%;
+    --destructive: 19 98% 27%;
+    --card-foreground: 258 77% 0%;
+    --muted-foreground: 258 10% 40%;
+    --accent-foreground: 258 19% 21%;
+    --popover-foreground: 258 77% 0%;
+    --primary-foreground: 258 58% 97%;
+    --secondary-foreground: 258 19% 21%;
+    --destructive-foreground: 19 98% 87%;
     --radius: 0.5rem;
   }
- 
+
   .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
- 
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
- 
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
- 
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
- 
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
- 
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
- 
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+    --card: 258 53% 3%;
+    --ring: 258 58% 37%;
+    --input: 215 27.9% 16.9%;
+    --muted: 258 29% 15%;
+    --accent: 258 15% 10%;
+    --border: 215 27.9% 16.9%;
+    --popover: 258 53% 3%;
+    --primary: 258 58% 37%;
+    --secondary: 258 15% 10%;
+    --background: 258 53% 3%;
+    --foreground: 258 40% 97%;
+    --destructive: 19 98% 46%;
+    --card-foreground: 258 40% 97%;
+    --muted-foreground: 258 10% 60%;
+    --accent-foreground: 258 15% 70%;
+    --popover-foreground: 258 40% 97%;
+    --primary-foreground: 258 58% 97%;
+    --secondary-foreground: 258 15% 70%;
+    --destructive-foreground: 0 0% 100%;
   }
 }
- 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+
+.map {
+  width: 100%;
+  height: 40rem;
+}
+
+img.leaflet-marker-icon {
+  border-radius: 50%;
+  border: 2px solid red;
+}
+
+.leaflet-control {
+  z-index: 0 !important;
+}
+
+.leaflet-pane {
+  z-index: 0 !important;
+}
+
+.leaflet-top,
+.leaflet-bottom {
+  z-index: 0 !important;
+}
+
+.leaflet-popup-content-wrapper {
+  border-radius: 0px;
+  padding: 0px !important;
+}
+
+.leaflet-popup-content {
+  padding: 0px !important;
+  border-radius: 0px !important;
+  margin-right: 0px !important;
+  margin-left: 0px !important;
 }