Feat/shadcn drawer

android/app/build.gradle

@@ -7,7 +7,7 @@ android {
         applicationId "de.reedu.senseboxbike"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 9
+        versionCode 10
         versionName "1.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {

ios/App/App.xcodeproj/project.pbxproj

@@ -354,7 +354,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 8;
+				CURRENT_PROJECT_VERSION = 10;
 				DEVELOPMENT_TEAM = 7D2772F462;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
@@ -375,7 +375,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 8;
+				CURRENT_PROJECT_VERSION = 10;
 				DEVELOPMENT_TEAM = 7D2772F462;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;

ios/App/App/Info.plist

@@ -49,6 +49,8 @@
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
 		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<true/>

ios/App/App/capacitor.config.json

@@ -2,10 +2,7 @@
 	"appId": "de.reedu.senseboxbike",
 	"appName": "senseBox:Bike",
 	"webDir": "out",
-	"server": {
-		"url": "http://192.168.2.135:3000",
-		"cleartext": true
-	},
+	"server": {},
 	"android": {
 		"useLegacyBridge": true
 	}

ios/App/Podfile.lock

@@ -27,7 +27,7 @@ PODS:
     - Capacitor
   - CapacitorShare (5.0.6):
     - Capacitor
-  - GoogleDataTransport (9.2.5):
+  - GoogleDataTransport (9.3.0):
     - GoogleUtilities/Environment (~> 7.7)
     - nanopb (< 2.30910.0, >= 2.30908.0)
     - PromisesObjC (< 3.0, >= 1.2)
@@ -158,7 +158,7 @@ SPEC CHECKSUMS:
   CapacitorPreferences: f03954bcb0ff09c792909e46bff88e3183c16b10
   CapacitorPushNotifications: b31e326c6e4eb216a622041d6ca21a973f34943f
   CapacitorShare: cd41743331cb71d217c029de54b681cbd91e0fcc
-  GoogleDataTransport: 54dee9d48d14580407f8f5fbf2f496e92437a2f2
+  GoogleDataTransport: 57c22343ab29bc686febbf7cbb13bad167c2d8fe
   GoogleMLKit: 2bd0dc6253c4d4f227aad460f69215a504b2980e
   GoogleToolboxForMac: 8bef7c7c5cf7291c687cf5354f39f9db6399ad34
   GoogleUtilities: 0759d1a57ebb953965c2dfe0ba4c82e95ccc2e34
@@ -173,4 +173,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 311cea8045d74436b17d1ac8e92d08fecc40a267
 
-COCOAPODS: 1.11.2
+COCOAPODS: 1.14.3

package.json

@@ -26,9 +26,10 @@
     "@capacitor/preferences": "^5.0.6",
     "@capacitor/push-notifications": "^5.1.0",
     "@capacitor/share": "^5.0.6",
-    "@heroicons/react": "^2.0.18",
-    "@hookform/resolvers": "^3.3.1",
-    "@radix-ui/react-dialog": "^1.0.4",
+    "@heroicons/react": "^2.1.1",
+    "@hookform/resolvers": "^3.3.4",
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-scroll-area": "^1.0.4",
@@ -41,30 +42,31 @@
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-toggle": "^1.0.3",
     "@react-spring/web": "^9.7.3",
-    "@tremor/react": "^3.12.1",
+    "@tremor/react": "^3.12.2",
     "@turf/turf": "^6.5.0",
     "autoprefixer": "10.4.16",
-    "axios": "^1.6.2",
+    "axios": "^1.6.4",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "date-fns": "^2.30.0",
+    "clsx": "^2.1.0",
+    "date-fns": "^3.1.0",
     "eslint": "8.56.0",
     "eslint-config-next": "14.0.4",
     "eslint-config-prettier": "^9.1.0",
     "geist": "^1.2.0",
     "lodash.debounce": "^4.0.8",
-    "lucide-react": "^0.298.0",
+    "lucide-react": "^0.304.0",
+    "mapbox-gl": "^3.0.1",
     "maplibre-gl": "^3.6.2",
     "next": "14.0.4",
     "next-themes": "^0.2.1",
-    "postcss": "8.4.32",
+    "postcss": "8.4.33",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.49.2",
-    "react-map-gl": "^7.1.5",
+    "react-map-gl": "^7.1.7",
     "swiper": "^11.0.5",
-    "tailwind-merge": "^2.1.0",
-    "tailwindcss": "3.3.6",
+    "tailwind-merge": "^2.2.0",
+    "tailwindcss": "3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.3.3",
     "uuid": "^9.0.1",
@@ -76,15 +78,16 @@
     "@capacitor/assets": "^3.0.4",
     "@capacitor/cli": "^5.6.0",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/node": "20.10.5",
-    "@types/react": "18.2.45",
+    "@types/mapbox__mapbox-gl-draw": "^1.4.6",
+    "@types/node": "20.10.6",
+    "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
     "@types/turf": "^3.5.32",
     "@types/uuid": "^9.0.7",
     "eslint-plugin-unused-imports": "^3.0.0",
     "husky": "^8.0.3",
     "prettier": "^3.1.1",
-    "prettier-plugin-tailwindcss": "^0.5.9",
+    "prettier-plugin-tailwindcss": "^0.5.10",
     "tailwindcss-safe-area": "^0.4.0"
   }
 }

src/app/(main)/layout.tsx

@@ -0,0 +1,20 @@
+import { TopBar } from '@/components/ui/TopBar'
+import '@/styles/globals.css'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="relative h-full w-full">
+      <main className="h-full w-full overflow-auto landscape:pl-safe">
+        {children}
+      </main>
+      <div className="absolute top-0 w-screen backdrop-blur pt-safe" />
+      <header className="absolute right-0 top-0 w-fit mt-safe">
+        <TopBar />
+      </header>
+    </div>
+  )
+}

src/app/layout.tsx

@@ -1,4 +1,3 @@
-import { TopBar } from '@/components/ui/TopBar'
 import { Toaster } from '@/components/ui/toaster'
 import { cn } from '@/lib/utils'
 import type { Metadata, Viewport } from 'next'
@@ -30,15 +29,11 @@ export default function RootLayout({
         <AuthChecker />
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <div
-            className="flex h-full max-h-full w-full flex-col bg-background px-safe pt-safe landscape:px-0"
+            className="flex h-full max-h-full w-full flex-col bg-background px-safe landscape:px-0"
             vaul-drawer-wrapper=""
           >
-            <header>
-              <TopBar />
-            </header>
-            <main className="flex-1 overflow-auto landscape:pl-safe">
-              {children}
-            </main>
+            {children}
+
             <Toaster />
           </div>
         </ThemeProvider>

src/app/tracks/navbar.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { ArrowLeftIcon } from 'lucide-react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+const titles: Record<string, string> = {
+  '/': '',
+  '/tracks': 'Tracks',
+}
+
+const Navbar = () => {
+  const pathname = usePathname()
+
+  const isHome = pathname === '/'
+
+  return (
+    <div className="pointer-events-auto sticky top-0 z-10 flex w-full items-center justify-between border-b border-muted px-4 pb-4 pt-2 landscape:px-safe-or-4">
+      <div className="flex items-center gap-2">
+        {!isHome && (
+          <Link href="/">
+            <ArrowLeftIcon className="h-7 w-7" />
+          </Link>
+        )}
+        <h1 className="text-xl">{titles[pathname]}</h1>
+      </div>
+    </div>
+  )
+}
+
+export { Navbar }

src/app/tracks/page.tsx

@@ -1,9 +1,15 @@
 import TrackWrapper from '@/components/Tracks/track-wrapper'
+import { Navbar } from './navbar'
 
 export default function TracksPage() {
   return (
-    <div className="h-full w-full overflow-scroll p-4 pb-safe-or-4">
-      <TrackWrapper />
-    </div>
+    <main className="h-full w-full p-safe">
+      <header>
+        <Navbar />
+      </header>
+      <div className="h-full w-full overflow-scroll p-4 pb-safe-or-4">
+        <TrackWrapper />
+      </div>
+    </main>
   )
 }

src/components/Device/DeviceMapWrapper.tsx

@@ -1,47 +1,46 @@
 'use client'
 
 import { useState } from 'react'
-import { Drawer } from 'vaul'
 import MeasurementsGrid from '../Map/MeasurementsGrid'
+import WizardDrawer from '../Wizard/WizardDrawer'
+import { Drawer, DrawerContent } from '../ui/drawer'
 import TrajectoryMap from './TrajectoryMap'
 
 export default function DeviceMapWrapper() {
   const [snap, setSnap] = useState(0.2)
 
   return (
-    <div className="flex h-full w-full portrait:flex-col">
-      <div className="relative h-full w-full">
-        <TrajectoryMap paddingBottom={snap} />
-      </div>
-      <div className="portrait:border-b landscape:border-r-2">
-        <Drawer.Root
-          open
-          modal={false}
-          dismissible={false}
-          snapPoints={[0.2, 0.55]}
-          activeSnapPoint={snap}
-          setActiveSnapPoint={snap => {
-            if (!snap) return
-            if (typeof snap === 'string') {
-              setSnap(parseFloat(snap))
-            } else if (snap < 0.2) {
-              setSnap(0.2)
-            } else {
-              setSnap(snap)
-            }
-          }}
-        >
-          <Drawer.Portal>
-            <Drawer.Content className="fixed bottom-0 left-0 right-0 z-30 flex h-full max-h-[95%] flex-col rounded-t-lg border-t bg-background pb-safe focus:outline-none">
-              <div
-                className="mx-auto mb-2 mt-4 h-1.5 w-12 flex-shrink-0 rounded-full bg-muted"
-                onClick={() => setSnap(0.55)}
-              />
+    <>
+      <div className="flex h-full w-full portrait:flex-col">
+        <div className="relative h-full w-full">
+          <TrajectoryMap paddingBottom={snap} />
+        </div>
+        <div className="portrait:border-b landscape:border-r-2">
+          <Drawer
+            open
+            modal={false}
+            dismissible={false}
+            snapPoints={[0.2, 0.55]}
+            activeSnapPoint={snap}
+            shouldScaleBackground={false}
+            setActiveSnapPoint={snap => {
+              if (!snap) return
+              if (typeof snap === 'string') {
+                setSnap(parseFloat(snap))
+              } else if (snap < 0.2) {
+                setSnap(0.2)
+              } else {
+                setSnap(snap)
+              }
+            }}
+          >
+            <DrawerContent className="h-full">
               <MeasurementsGrid />
-            </Drawer.Content>
-          </Drawer.Portal>
-        </Drawer.Root>
+            </DrawerContent>
+          </Drawer>
+        </div>
       </div>
-    </div>
+      <WizardDrawer />
+    </>
   )
 }