fix: add map mock network for e2e tests

Co-authored-by: Afonso Mendonça Ribeiro <afonso.mendonca.ribeiro@tecnico.ulisboa.pt>

e2e/src/ui/mock-network/map-network.ts

@@ -0,0 +1,32 @@
+import type { MapMarkerResponseDto } from '@immich/sdk';
+import { BrowserContext } from '@playwright/test';
+import { TimelineData } from 'src/ui/generators/timeline';
+
+export const setupMapMockApiRoutes = async (context: BrowserContext, timelineData: TimelineData) => {
+  await context.route('**/api/map/markers', async (route) => {
+    const markers: MapMarkerResponseDto[] = [];
+
+    for (const bucket of timelineData.buckets.values()) {
+      for (const asset of bucket) {
+        // Only include assets with GPS coordinates
+        if (asset.latitude !== null && asset.longitude !== null) {
+          markers.push({
+            id: asset.id,
+            lat: asset.latitude,
+            lon: asset.longitude,
+            city: asset.city,
+            state: null,
+            country: asset.country,
+          });
+        }
+      }
+    }
+    markers.sort((a, b) => a.id.localeCompare(b.id));
+
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      json: markers,
+    });
+  });
+};

e2e/src/ui/specs/map/utils.ts

@@ -72,8 +72,6 @@ export const mapUtils = {
     return page.getByLabel(/map settings/i);
   },
 
-
-
   /**
    * Verify all standard map controls are visible
    */

web/src/lib/components/shared-components/map/Map.svelte

@@ -397,7 +397,7 @@
     {#if onToggleTimeline}
       <Control position="top-right">
         <ControlGroup>
-          <ControlButton onclick={() => onToggleTimeline?.()}>
+          <ControlButton title={$t('timeline')} onclick={() => onToggleTimeline?.()}>
             <Icon
               title={$t('timeline')}
               icon={mdiImageMultiple}

web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -26,12 +26,6 @@
   let isTimelinePanelVisible = $state(false);
   let visibleAssetIds = $state<Set<string>>();
 
-  // Mobile Bottom Sheet State
-  let sheetHeight = $state(50);
-  let isDraggingSheet = $state(false);
-  let innerWidth = $state(1024);
-  let isMobile = $derived(innerWidth < 768);
-
   const isSameBbox = (a: SelectionBBox | undefined, b: SelectionBBox) => {
     if (!a) {
       return false;
@@ -50,7 +44,6 @@
     selectedClusterBBox = undefined;
     selectedClusterIds = new Set();
     visibleAssetIds = undefined;
-    sheetHeight = 50; // Reset for next open
   }
 
   function toggleTimeline() {

web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/MapTimelinePanel.svelte

@@ -139,7 +139,7 @@
     <div class="flex items-center gap-2">
       <Icon icon={mdiImageMultiple} size="20" />
       <p class="text-sm font-medium text-immich-fg dark:text-immich-dark-fg">
-        {$t('assets_count', { values: { count: timelineManager?.assetsCount ?? 0 } })}
+        {$t('assets_count', { values: { count: timelineManager?.assetCount ?? 0 } })}
       </p>
     </div>
     <CloseButton onclick={onClose} />