layout improvement

Author: Dominik Schröder

src/app/layout.tsx

@@ -42,7 +42,7 @@ export default async function RootLayout({
         <link rel="manifest" href="/site.webmanifest" />
         <link
           rel="apple-touch-icon"
-          href="apple-icon-180.png"
+          href="/apple-icon-180.png"
         />
 
         <meta
@@ -52,172 +52,172 @@ export default async function RootLayout({
 
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2048-2732.jpg"
+          href="/apple-splash-2048-2732.jpg"
           media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2732-2048.jpg"
+          href="/apple-splash-2732-2048.jpg"
           media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1668-2388.jpg"
+          href="/apple-splash-1668-2388.jpg"
           media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2388-1668.jpg"
+          href="/apple-splash-2388-1668.jpg"
           media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1536-2048.jpg"
+          href="/apple-splash-1536-2048.jpg"
           media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2048-1536.jpg"
+          href="/apple-splash-2048-1536.jpg"
           media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1488-2266.jpg"
+          href="/apple-splash-1488-2266.jpg"
           media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2266-1488.jpg"
+          href="/apple-splash-2266-1488.jpg"
           media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1640-2360.jpg"
+          href="/apple-splash-1640-2360.jpg"
           media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2360-1640.jpg"
+          href="/apple-splash-2360-1640.jpg"
           media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1668-2224.jpg"
+          href="/apple-splash-1668-2224.jpg"
           media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2224-1668.jpg"
+          href="/apple-splash-2224-1668.jpg"
           media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1620-2160.jpg"
+          href="/apple-splash-1620-2160.jpg"
           media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2160-1620.jpg"
+          href="/apple-splash-2160-1620.jpg"
           media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1290-2796.jpg"
+          href="/apple-splash-1290-2796.jpg"
           media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2796-1290.jpg"
+          href="/apple-splash-2796-1290.jpg"
           media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1179-2556.jpg"
+          href="/apple-splash-1179-2556.jpg"
           media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2556-1179.jpg"
+          href="/apple-splash-2556-1179.jpg"
           media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1284-2778.jpg"
+          href="/apple-splash-1284-2778.jpg"
           media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2778-1284.jpg"
+          href="/apple-splash-2778-1284.jpg"
           media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1170-2532.jpg"
+          href="/apple-splash-1170-2532.jpg"
           media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2532-1170.jpg"
+          href="/apple-splash-2532-1170.jpg"
           media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1125-2436.jpg"
+          href="/apple-splash-1125-2436.jpg"
           media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2436-1125.jpg"
+          href="/apple-splash-2436-1125.jpg"
           media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1242-2688.jpg"
+          href="/apple-splash-1242-2688.jpg"
           media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2688-1242.jpg"
+          href="/apple-splash-2688-1242.jpg"
           media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-828-1792.jpg"
+          href="/apple-splash-828-1792.jpg"
           media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1792-828.jpg"
+          href="/apple-splash-1792-828.jpg"
           media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1242-2208.jpg"
+          href="/apple-splash-1242-2208.jpg"
           media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-2208-1242.jpg"
+          href="/apple-splash-2208-1242.jpg"
           media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-750-1334.jpg"
+          href="/apple-splash-750-1334.jpg"
           media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1334-750.jpg"
+          href="/apple-splash-1334-750.jpg"
           media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-640-1136.jpg"
+          href="/apple-splash-640-1136.jpg"
           media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
         />
         <link
           rel="apple-touch-startup-image"
-          href="apple-splash-1136-640.jpg"
+          href="/apple-splash-1136-640.jpg"
           media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
         />
         <Analytics />

src/app/map/page.tsx

@@ -7,6 +7,7 @@ import {
   type FC,
   type RefObject,
   createRef,
+  useEffect,
 } from "react";
 
 import {IconButton, Paper} from "@mui/material";
@@ -17,14 +18,22 @@ import ReactMapGL, {
   NavigationControl,
   GeolocateControl,
   FullscreenControl,
-  useControl,
   Layer,
   Source,
-  type ControlPosition,
   type MapRef,
-  useMap,
+  type SkyLayer,
 } from "react-map-gl";
 
+const skyLayer: SkyLayer = {
+  id: "sky",
+  type: "sky",
+  paint: {
+    "sky-type": "atmosphere",
+    "sky-atmosphere-sun": [0.0, 0.0],
+    "sky-atmosphere-sun-intensity": 15,
+  },
+};
+
 import Overlay from "~/components/Map/Overlay";
 
 import "mapbox-gl/dist/mapbox-gl.css";
@@ -39,36 +48,13 @@ import {categorySettings} from "~/settings/category";
 import {listSettings} from "~/settings/list";
 
 import {Download} from "~/components/Map/DownloadControl";
-import {SelectionControl} from "~/components/Map/SelectionControl";
+import {Selection} from "~/components/Map/SelectionControl";
 import {LayerSwitcher} from "~/components/Map/LayerSwitcher";
 import type {Activity} from "~/server/db/schema";
 import {MapContextValue} from "react-map-gl/dist/esm/components/map";
 import PhotoLayer from "~/components/Map/Photo";
-import {
-  Camera,
-  CameraAlt,
-  CameraFront,
-} from "@mui/icons-material";
-import mapboxgl from "mapbox-gl";
-
-function Selection() {
-  const {setSelected} = useStore((state) => ({
-    setSelected: state.setSelected,
-  }));
-
-  useControl(
-    (context: MapContextValue) =>
-      new SelectionControl({
-        context,
-        layers: ["routeLayerBG", "routeLayerBGsel"],
-        source: "routeSource",
-        selectionHandler: (sel: number[]) => {
-          setSelected(Array.from(new Set(sel)));
-        },
-      })
-  );
-  return null;
-}
+import {CameraAlt} from "@mui/icons-material";
+import mapboxgl, {MapboxEvent} from "mapbox-gl";
 
 function RouteLayer() {
   const {filterIDs} = useStore((state) => ({
@@ -223,6 +209,7 @@ function Map() {
   const mapRefLoc = createRef<MapRef>();
 
   const loaded = useStore((state) => state.loaded);
+  const [terrain, setTerrain] = useState(false);
   const [viewport, setViewport] = useState(mapPosition);
 
   const overlayMaps = useMemo(
@@ -290,6 +277,8 @@ function Map() {
             );
           }
         }}
+        optimizeForTerrain={true}
+        onLoad={(event: MapboxEvent) => console.log(event)}
         projection={
           "globe" as unknown as mapboxgl.Projection
         }
@@ -335,6 +324,7 @@ function Map() {
           tileSize={512}
           maxzoom={14}
         />
+        <Layer {...skyLayer} />
         <NavigationControl position="top-right" />
         <GeolocateControl position="top-right" />
         <FullscreenControl position="top-right" />

src/app/stats/[name]/layout.tsx

@@ -151,6 +151,7 @@ export default function Stats({
           sx={{
             display: "inline-flex",
             width: `calc(100% - 40px)`,
+            minHeight: "40px",
           }}
         >
           {Object.entries(tabs).map(([url, tab]) => (
@@ -159,6 +160,11 @@ export default function Stats({
               label={tab.label}
               component={Link}
               href={url}
+              sx={{
+                minHeight: "40px",
+                py: "8px",
+                fontSize: "0.8rem",
+              }}
             />
           ))}
         </MuiTabs>
@@ -199,7 +205,7 @@ export default function Stats({
           height: "60px",
           display: settingsOpen ? "block" : "none",
           borderTop: 1,
-          zIndex: 1,
+          //zIndex: 1,
           boxShadow: 1,
           borderColor: "divider",
           overflowY: "hidden",

src/components/MainContainer.tsx

@@ -61,7 +61,6 @@ export default function MainContainer({
         .get("activities")
         ?.split(",")
         .map(Number);
-      console.log("loading activities", activities);
       load(activities)
         .then(console.log)
         .catch(console.error);
@@ -70,7 +69,6 @@ export default function MainContainer({
     }
 
     async function load(activities?: number[]) {
-      console.log("loading activities");
       const nActivities = await loadFromDB({
         ids: activities,
       });

src/components/Map/LayerSwitcher.tsx

@@ -39,6 +39,9 @@ export function LayerSwitcher() {
   }));
 
   const map = useMap();
+
+  if (map.current == undefined) return;
+
   const [anchorEl, setAnchorEl] =
     useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);