fix some typescript errors

website/src/lib/assets/layers.ts

@@ -186,8 +186,8 @@ export const basemaps: { [key: string]: string | StyleSpecification } = {
             },
         ],
     },
-    ignFrPlan: ignFrPlan,
+    ignFrPlan: ignFrPlan as StyleSpecification,
-    ignFrTopo: ignFrTopo,
+    ignFrTopo: ignFrTopo as StyleSpecification,
     ignFrScan25: {
         version: 8,
         sources: {
@@ -209,7 +209,7 @@ export const basemaps: { [key: string]: string | StyleSpecification } = {
             },
         ],
     },
-    ignFrSatellite: ignFrSatellite,
+    ignFrSatellite: ignFrSatellite as StyleSpecification,
     ignEs: {
         version: 8,
         sources: {
@@ -366,7 +366,7 @@ export const overlays: { [key: string]: string | StyleSpecification } = {
             },
         ],
     },
-    bikerouterGravel: bikerouterGravel,
+    bikerouterGravel: bikerouterGravel as StyleSpecification,
     swisstopoSlope: {
         version: 8,
         sources: {

website/src/lib/components/Menu.svelte

@@ -319,7 +319,7 @@
                                 $copied.length === 0 ||
                                 ($selection.size > 0 &&
                                     !allowedPastes[$copied[0].level].includes(
-                                        $selection.getSelected().pop()?.level
+                                        $selection.getSelected().pop()!.level
                                     ))}
                             onclick={pasteSelection}
                         >
@@ -659,7 +659,7 @@
     on:dragover={(e) => e.preventDefault()}
     on:drop={(e) => {
         e.preventDefault();
-        if (e.dataTransfer.files.length > 0) {
+        if (e.dataTransfer && e.dataTransfer.files.length > 0) {
             loadFiles(e.dataTransfer.files);
         }
     }}

website/src/lib/components/ModeSwitch.svelte

@@ -3,11 +3,18 @@
     import { Moon, Sun } from '@lucide/svelte';
     import { mode, setMode } from 'mode-watcher';
     import { i18n } from '$lib/i18n.svelte';
+
+    let {
+        class: className = '',
+    }: {
+        class?: string;
+    } = $props();
 </script>
 
 <Button
     variant="ghost"
     size="icon"
+    class={className}
     onclick={() => {
         setMode(mode.current === 'light' ? 'dark' : 'light');
     }}

website/src/lib/components/Nav.svelte

@@ -3,7 +3,7 @@
     import { Button } from '$lib/components/ui/button';
     import AlgoliaDocSearch from '$lib/components/AlgoliaDocSearch.svelte';
     import ModeSwitch from '$lib/components/ModeSwitch.svelte';
-    import { BookOpenText, Home, Map } from '@lucide/svelte';
+    import { BookOpenText, House, Map } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
     import { getURLForLanguage } from '$lib/utils';
 </script>
@@ -15,7 +15,7 @@
             <Logo class="h-8 hidden sm:block" width="153" />
         </a>
         <Button variant="link" class="text-base px-0" href={getURLForLanguage(i18n.lang, '/')}>
-            <Home size="18" />
+            <House size="18" />
             {i18n._('homepage.home')}
         </Button>
         <Button variant="link" class="text-base px-0" href={getURLForLanguage(i18n.lang, '/app')}>
@@ -27,6 +27,6 @@
             {i18n._('menu.help')}
         </Button>
         <AlgoliaDocSearch class="ml-auto" />
-        <ModeSwitch class="hidden xs:block" />
+        <ModeSwitch class="hidden xs:inline-flex" />
     </div>
 </nav>

website/src/lib/components/map/gpx-layer/gpx-layer.ts

@@ -156,7 +156,7 @@ export class GPXLayer {
         }
 
         try {
-            let source = _map.getSource(this.fileId);
+            let source = _map.getSource(this.fileId) as mapboxgl.GeoJSONSource | undefined;
             if (source) {
                 source.setData(this.getGeoJSON());
             } else {

website/src/lib/components/map/layer-control/LayerControl.svelte

@@ -227,8 +227,9 @@
 </CustomControl>
 
 <svelte:window
-    on:click={(e) => {
+    on:click={(e: MouseEvent) => {
-        if (open && !cancelEvents && !container.contains(e.target)) {
+        const target = e.target as Node | null;
+        if (open && !cancelEvents && target && container && !container.contains(target)) {
             closeLayerControl();
         }
     }}

website/src/lib/components/map/layer-control/OverpassPopup.svelte

@@ -5,7 +5,7 @@
     import { i18n } from '$lib/i18n.svelte';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
     import type { WaypointType } from 'gpx';
-    import type { PopupItem } from '$lib/components/map/map';
+    import type { PopupItem } from '$lib/components/map/map-popup';
     import { fileActions } from '$lib/logic/file-actions';
     import { selection } from '$lib/logic/selection';
 

website/src/lib/components/map/layer-control/overpass-layer.ts

@@ -74,7 +74,7 @@ export class OverpassLayer {
         let d = get(data);
 
         try {
-            let source = this.map.getSource('overpass');
+            let source = this.map.getSource('overpass') as mapboxgl.GeoJSONSource | undefined;
             if (source) {
                 source.setData(d);
             } else {
@@ -284,9 +284,9 @@ function getQuery(query: string) {
 }
 
 function getQueryItem(tags: Record<string, string | boolean | string[]>) {
-    let arrayEntry = Object.entries(tags).find(([_, value]) => Array.isArray(value));
+    let arrayEntry = Object.values(tags).find((value) => Array.isArray(value));
     if (arrayEntry !== undefined) {
-        return arrayEntry[1]
+        return arrayEntry
             .map(
                 (val) =>
                     `nwr${Object.entries(tags)

website/src/lib/components/map/street-view-control/mapillary.ts

@@ -135,12 +135,19 @@ export class MapillaryLayer {
     }
 
     onMouseEnter(e: mapboxgl.MapMouseEvent) {
-        this.active = true;
+        if (
+            e.features &&
+            e.features.length > 0 &&
+            e.features[0].properties &&
+            e.features[0].properties.id
+        ) {
+            this.active = true;
 
-        this.viewer.resize();
+            this.viewer.resize();
-        this.viewer.moveTo(e.features[0].properties.id);
+            this.viewer.moveTo(e.features[0].properties.id);
 
-        mapCursor.notify(MapCursorState.MAPILLARY_HOVER, true);
+            mapCursor.notify(MapCursorState.MAPILLARY_HOVER, true);
+        }
     }
 
     onMouseLeave() {

website/src/lib/components/toolbar/tools/Time.svelte

@@ -324,7 +324,8 @@
                 if (
                     startDate === undefined ||
                     startTime === undefined ||
-                    effectiveSpeed === undefined
+                    effectiveSpeed === undefined ||
+                    movingTime === undefined
                 ) {
                     return;
                 }
@@ -347,12 +348,12 @@
                     if (item instanceof ListFileItem) {
                         if (artificial || !$gpxStatistics.global.time.moving) {
                             file.createArtificialTimestamps(
-                                getDate(startDate, startTime),
+                                getDate(startDate!, startTime!),
-                                movingTime
+                                movingTime!
                             );
                         } else {
                             file.changeTimestamps(
-                                getDate(startDate, startTime),
+                                getDate(startDate!, startTime!),
                                 effectiveSpeed,
                                 ratio
                             );
@@ -360,13 +361,13 @@
                     } else if (item instanceof ListTrackItem) {
                         if (artificial || !$gpxStatistics.global.time.moving) {
                             file.createArtificialTimestamps(
-                                getDate(startDate, startTime),
+                                getDate(startDate!, startTime!),
-                                movingTime,
+                                movingTime!,
                                 item.getTrackIndex()
                             );
                         } else {
                             file.changeTimestamps(
-                                getDate(startDate, startTime),
+                                getDate(startDate!, startTime!),
                                 effectiveSpeed,
                                 ratio,
                                 item.getTrackIndex()
@@ -375,14 +376,14 @@
                     } else if (item instanceof ListTrackSegmentItem) {
                         if (artificial || !$gpxStatistics.global.time.moving) {
                             file.createArtificialTimestamps(
-                                getDate(startDate, startTime),
+                                getDate(startDate!, startTime!),
-                                movingTime,
+                                movingTime!,
                                 item.getTrackIndex(),
                                 item.getSegmentIndex()
                             );
                         } else {
                             file.changeTimestamps(
-                                getDate(startDate, startTime),
+                                getDate(startDate!, startTime!),
                                 effectiveSpeed,
                                 ratio,
                                 item.getTrackIndex(),

website/src/lib/components/toolbar/tools/routing/routing-controls.ts

@@ -494,7 +494,7 @@ export class RoutingControls {
                         segment.trkpt[before].time && segment.trkpt[before + 1].time
                             ? new Date(
                                   (1 - ratio) * segment.trkpt[before].time.getTime() +
-                                      ratio * segment.trkpt[before + 1].time.getTime()
+                                      ratio * segment.trkpt[before + 1].time!.getTime()
                               )
                             : undefined;
                     point._data = {
@@ -540,7 +540,7 @@ export class RoutingControls {
             fileActionManager.applyToFile(this.fileId, (file) =>
                 file.replaceTrackPoints(anchor.trackIndex, anchor.segmentIndex, 0, 0, [])
             );
-        } else if (previousAnchor === null) {
+        } else if (previousAnchor === null && nextAnchor !== null) {
             // First point, remove trackpoints until nextAnchor
             fileActionManager.applyToFile(this.fileId, (file) =>
                 file.replaceTrackPoints(
@@ -551,7 +551,7 @@ export class RoutingControls {
                     []
                 )
             );
-        } else if (nextAnchor === null) {
+        } else if (nextAnchor === null && previousAnchor !== null) {
             // Last point, remove trackpoints from previousAnchor
             fileActionManager.applyToFile(this.fileId, (file) => {
                 let segment = file.getSegment(anchor.trackIndex, anchor.segmentIndex);
@@ -563,7 +563,7 @@ export class RoutingControls {
                     []
                 );
             });
-        } else {
+        } else if (previousAnchor !== null && nextAnchor !== null) {
             // Route between previousAnchor and nextAnchor
             this.routeBetweenAnchors(
                 [previousAnchor, nextAnchor],

website/src/lib/components/ui/time-picker/TimePicker.svelte

@@ -49,7 +49,7 @@
         } else {
             untrack(() => {
                 if (value != computeValue()) {
-                    let rounded = Math.max(Math.round(value), 1);
+                    let rounded = Math.max(Math.round(value!), 1);
                     if (showHours) {
                         hours = Math.floor(rounded / 3600);
                         minutes = Math.floor((rounded % 3600) / 60)
@@ -66,14 +66,19 @@
 
     let container: HTMLDivElement;
     let countKeyPress = 0;
-    function onKeyPress(e) {
+    function onKeyPress(e: KeyboardEvent) {
-        if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(e.key)) {
+        const target = e.target as HTMLInputElement | null;
+        if (target && ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(e.key)) {
             countKeyPress++;
             if (countKeyPress === 2) {
-                if (e.target.id === 'hours') {
+                const nextInput =
-                    container.querySelector('#minutes')?.focus();
+                    target.id === 'hours'
-                } else if (e.target.id === 'minutes') {
+                        ? (container.querySelector('#minutes') as HTMLInputElement)
-                    container.querySelector('#seconds')?.focus();
+                        : target.id === 'minutes'
+                          ? (container.querySelector('#seconds') as HTMLInputElement)
+                          : null;
+                if (nextInput) {
+                    nextInput.focus();
                 }
             }
         }
@@ -172,6 +177,7 @@
         margin: 0;
     }
     div :global(input[type='number']) {
+        appearance: textfield;
         -moz-appearance: textfield;
     }
 </style>

website/src/lib/logic/file-actions.ts

@@ -15,7 +15,7 @@ import {
     type ListItem,
 } from '$lib/components/file-list/file-list';
 import { i18n } from '$lib/i18n.svelte';
-import { freeze } from 'immer';
+import { freeze, type WritableDraft } from 'immer';
 import {
     distance,
     GPXFile,
@@ -395,6 +395,7 @@ export const fileActions = {
                 }
             }
             if (targetFile) {
+                targetFile = targetFile as GPXFile;
                 if (target instanceof ListFileItem) {
                     targetFile.replaceTracks(0, targetFile.trk.length - 1, toMerge.trk);
                     targetFile.replaceWaypoints(0, targetFile.wpt.length - 1, toMerge.wpt);
@@ -1059,7 +1060,10 @@ export function moveItems(
 
     let files = [fromParent.getFileId(), toParent.getFileId()];
     let callbacks = [
-        (file, context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
+        (
+            file: WritableDraft<GPXFile>,
+            context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[]
+        ) => {
             fromItems.forEach((item) => {
                 if (item instanceof ListTrackItem) {
                     file.replaceTracks(item.getTrackIndex(), item.getTrackIndex(), []);
@@ -1077,7 +1081,10 @@ export function moveItems(
                 }
             });
         },
-        (file, context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
+        (
+            file: WritableDraft<GPXFile>,
+            context: (GPXFile | Track | TrackSegment | Waypoint[] | Waypoint)[]
+        ) => {
             toItems.forEach((item, i) => {
                 if (item instanceof ListTrackItem) {
                     if (context[i] instanceof Track) {