From ef5ac4bc97d05693f58f2be10af49b6d76bc26b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rgen=20Loe=20Kvalberg?= <jolokv@nve.no>
Date: Mon, 11 May 2026 09:29:34 +0200
Subject: [PATCH] Flytt bildevisning til egen tab

---
 .../observation-image-carousel.component.ts   |  2 +-
 .../image-list/image-list.component.css       |  3 +-
 .../image-list/image-list.component.html      | 92 ++++++++++++-------
 .../image-list/image-list.component.ts        | 18 ++++
 .../list-controls.component.html              | 14 ---
 .../list-controls/list-controls.component.ts  | 12 +--
 src/app/pages/observation-list/list.page.ts   | 61 ------------
 .../observation-list.component.css            |  4 +-
 .../observation-list.component.html           | 84 +++++++++++------
 .../observation-list.component.ts             | 18 ++++
 src/app/pages/tabs/tabs.page.html             | 16 +++-
 src/app/pages/tabs/tabs.page.ts               |  4 +-
 src/app/pages/tabs/tabs.routes.ts             | 52 ++++++-----
 src/app/pages/tabs/tabs.service.ts            |  5 +-
 src/assets/i18n/en.json                       |  3 +-
 src/assets/i18n/nb.json                       |  3 +-
 16 files changed, 208 insertions(+), 183 deletions(-)
 delete mode 100644 src/app/pages/observation-list/list.page.ts

diff --git a/src/app/components/observation/observation-image-carousel/observation-image-carousel.component.ts b/src/app/components/observation/observation-image-carousel/observation-image-carousel.component.ts
index fbd7631c2..7680691a9 100644
--- a/src/app/components/observation/observation-image-carousel/observation-image-carousel.component.ts
+++ b/src/app/components/observation/observation-image-carousel/observation-image-carousel.component.ts
@@ -60,7 +60,7 @@ export class ObservationImageCarouselComponent {
   layerComments = computed(() => this.snowProfile()?.comments());
   showsComments = computed(() => !!this.snowProfile()?.showComments());
 
-  isImageListView = computed(() => this.router.url.includes('search/pictures'));
+  isImageListView = computed(() => this.router.url.includes('/images'));
   roundedDownOrientationValue = computed(() => {
     const item = this.currentItem();
     if (item.type === 'SnowProfile') {
diff --git a/src/app/pages/observation-list/image-list/image-list.component.css b/src/app/pages/observation-list/image-list/image-list.component.css
index c522a678b..ffc1bf64d 100644
--- a/src/app/pages/observation-list/image-list/image-list.component.css
+++ b/src/app/pages/observation-list/image-list/image-list.component.css
@@ -1,6 +1,5 @@
 :host {
-  display: block;
-  height: 100%;
+  display: contents;
 }
 
 ion-content {
diff --git a/src/app/pages/observation-list/image-list/image-list.component.html b/src/app/pages/observation-list/image-list/image-list.component.html
index 44a944d05..e8e307664 100644
--- a/src/app/pages/observation-list/image-list/image-list.component.html
+++ b/src/app/pages/observation-list/image-list/image-list.component.html
@@ -1,34 +1,64 @@
 <!-- En liste av bilder fra observasjoner, organisert i tabellform -->
-<ion-content>
-  <ion-refresher slot="fixed" (ionRefresh)="refresh()">
-    <ion-refresher-content></ion-refresher-content>
-  </ion-refresher>
-
-  <div class="list-header">
-    <p>{{ "OBSERVATION_LIST.IMAGES_DESCRIPTION" | translate }}</p>
-    <app-list-controls pageType="images"></app-list-controls>
-  </div>
-
-  <div class="grid" #grid>
-    @for (reg of registrations(); track reg.RegId) {
-      @for (attachment of reg.Attachments; track attachment.AttachmentId) {
-        <app-grid-image
-          [attachment]="attachment"
-          (click)="openImageCarousel(attachment.Url, reg.RegId, reg.Attachments)"
-        ></app-grid-image>
-      }
-    } @empty {
-      @if (error().hasError) {
-        <app-error-state></app-error-state>
-      } @else if (isLoading()) {
-        <p>{{ "OBSERVATION_LIST.LOADING" | translate }}</p>
-      } @else {
-        <app-empty-state></app-empty-state>
-      }
+<ion-split-pane contentId="main-content-image-list">
+  <ion-menu side="start" menuId="list-filter" contentId="main-content-image-list" max-edge-start="0">
+    @defer {
+      <app-filter-menu>
+        <!-- TODO: Legg til filter for kartutsnitt her  -->
+      </app-filter-menu>
     }
-  </div>
+  </ion-menu>
+
+  <div id="main-content-image-list" class="ion-page">
+    <app-header>
+      <!-- Høyremeny -->
+      <ion-buttons slot="end">
+        <ion-menu-button color="light"> </ion-menu-button>
+      </ion-buttons>
+
+      <!-- Venstremeny / filtermeny -->
+      <ion-buttons slot="start">
+        <ion-menu-button menu="list-filter" color="light">
+          <ion-icon name="options-outline"></ion-icon>
+        </ion-menu-button>
+      </ion-buttons>
+
+      <ion-title>{{ "OBSERVATION_LIST.TITLE" | translate }}</ion-title>
+    </app-header>
 
-  <ion-infinite-scroll (ionInfinite)="loadNextPage()" [disabled]="disableInfiniteScroll()">
-    <ion-infinite-scroll-content> </ion-infinite-scroll-content>
-  </ion-infinite-scroll>
-</ion-content>
+    <ion-content>
+      <ion-refresher slot="fixed" (ionRefresh)="refresh()">
+        <ion-refresher-content></ion-refresher-content>
+      </ion-refresher>
+
+      <div class="list-header">
+        <p>{{ "OBSERVATION_LIST.IMAGES_DESCRIPTION" | translate }}</p>
+        <app-list-controls pageType="images"></app-list-controls>
+      </div>
+
+      <div class="grid" #grid>
+        @for (reg of registrations(); track reg.RegId) {
+          @for (attachment of reg.Attachments; track attachment.AttachmentId) {
+            <app-grid-image
+              [attachment]="attachment"
+              (click)="openImageCarousel(attachment.Url, reg.RegId, reg.Attachments)"
+            ></app-grid-image>
+          }
+        } @empty {
+          @if (error().hasError) {
+            <app-error-state></app-error-state>
+          } @else if (isLoading()) {
+            <p>{{ "OBSERVATION_LIST.LOADING" | translate }}</p>
+          } @else {
+            <app-empty-state></app-empty-state>
+          }
+        }
+      </div>
+
+      <ion-infinite-scroll (ionInfinite)="loadNextPage()" [disabled]="disableInfiniteScroll()">
+        <ion-infinite-scroll-content> </ion-infinite-scroll-content>
+      </ion-infinite-scroll>
+    </ion-content>
+
+    <app-add-menu></app-add-menu>
+  </div>
+</ion-split-pane>
diff --git a/src/app/pages/observation-list/image-list/image-list.component.ts b/src/app/pages/observation-list/image-list/image-list.component.ts
index b7708bbf8..693898998 100644
--- a/src/app/pages/observation-list/image-list/image-list.component.ts
+++ b/src/app/pages/observation-list/image-list/image-list.component.ts
@@ -17,6 +17,12 @@ import {
   IonRefresherContent,
   LoadingController,
   ModalController,
+  IonSplitPane,
+  IonMenu,
+  IonButtons,
+  IonMenuButton,
+  IonIcon,
+  IonTitle,
 } from '@ionic/angular/standalone';
 import { tap, combineLatest, map, firstValueFrom } from 'rxjs';
 import { SearchCriteriaService } from 'src/app/core/services/search-criteria/search-criteria.service';
@@ -32,6 +38,9 @@ import { ObservationImageCarouselComponent } from 'src/app/components/observatio
 import { AttachmentViewModel, SearchService } from 'src/app/modules/common-regobs-api';
 import { LoggingService } from 'src/app/modules/shared/services/logging/logging.service';
 import { CarouselItems } from 'src/app/components/observation/observation-image-carousel/models';
+import { FilterMenuComponent } from 'src/app/modules/side-menu/components/filter-menu/filter-menu.component';
+import { HeaderComponent } from 'src/app/modules/shared/components/header/header.component';
+import { AddMenuComponent } from 'src/app/modules/shared/components/add-menu/add-menu.component';
 
 const DEBUG_TAG = 'ImageList';
 
@@ -51,6 +60,15 @@ const DEBUG_TAG = 'ImageList';
     ListControlsComponent,
     GridImageComponent,
     TranslatePipe,
+    IonSplitPane,
+    IonMenu,
+    FilterMenuComponent,
+    HeaderComponent,
+    IonButtons,
+    IonMenuButton,
+    IonIcon,
+    IonTitle,
+    AddMenuComponent,
   ],
   templateUrl: './image-list.component.html',
   styleUrl: './image-list.component.css',
diff --git a/src/app/pages/observation-list/list-controls/list-controls.component.html b/src/app/pages/observation-list/list-controls/list-controls.component.html
index bacaf93fd..ccbb59dc5 100644
--- a/src/app/pages/observation-list/list-controls/list-controls.component.html
+++ b/src/app/pages/observation-list/list-controls/list-controls.component.html
@@ -8,20 +8,6 @@
 </ion-checkbox>
 
 <div class="selects">
-  <ion-select
-    [label]="'OBSERVATION_LIST.VIEW_TYPE' | translate"
-    fill="outline"
-    [value]="pageType()"
-    interface="popover"
-    color="primary"
-    (ionChange)="navigate($event.target.value)"
-  >
-    <ion-select-option value="observations">{{
-      "OBSERVATION_LIST.VIEW_TYPE_OBSERVATIONS" | translate
-    }}</ion-select-option>
-    <ion-select-option value="images">{{ "OBSERVATION_LIST.VIEW_TYPE_IMAGES" | translate }}</ion-select-option>
-  </ion-select>
-
   <ion-select
     [label]="'OBSERVATION_LIST.SORT_BY_TEXT' | translate"
     fill="outline"
diff --git a/src/app/pages/observation-list/list-controls/list-controls.component.ts b/src/app/pages/observation-list/list-controls/list-controls.component.ts
index ff47de0b9..a2aace011 100644
--- a/src/app/pages/observation-list/list-controls/list-controls.component.ts
+++ b/src/app/pages/observation-list/list-controls/list-controls.component.ts
@@ -1,5 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
-import { Router } from '@angular/router';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { IonCheckbox, IonSelect, IonSelectOption } from '@ionic/angular/standalone';
 import {
   SearchCriteriaOrderBy,
@@ -7,8 +6,6 @@ import {
 } from 'src/app/core/services/search-criteria/search-criteria.service';
 import { TranslatePipe } from '@ngx-translate/core';
 
-type Page = 'observations' | 'images';
-
 /**
  * Kontrollene i toppen av listevisninga. Viser knapper for "Sortert etter oppdatert tid", osv.
  */
@@ -21,9 +18,6 @@ type Page = 'observations' | 'images';
 })
 export class ListControlsComponent {
   private searchCriteria = inject(SearchCriteriaService);
-  private router = inject(Router);
-
-  pageType = input<Page>('observations');
 
   extentCheckboxValue = this.searchCriteria.isExtentCriteriaActive;
   extentCheckboxDisabled = this.searchCriteria.isExtentCriteriaDisabled;
@@ -33,10 +27,6 @@ export class ListControlsComponent {
     this.searchCriteria.isExtentCriteriaActive.update((isActive) => !isActive);
   }
 
-  navigate(page: Page) {
-    this.router.navigate(['search', page === 'observations' ? 'list' : 'pictures']);
-  }
-
   setOrderBy(orderBy: SearchCriteriaOrderBy) {
     this.searchCriteria.orderBy.set(orderBy);
   }
diff --git a/src/app/pages/observation-list/list.page.ts b/src/app/pages/observation-list/list.page.ts
deleted file mode 100644
index 01c2e3ca3..000000000
--- a/src/app/pages/observation-list/list.page.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { HeaderComponent } from '../../modules/shared/components/header/header.component';
-import { AddMenuComponent } from '../../modules/shared/components/add-menu/add-menu.component';
-import { RouterOutlet } from '@angular/router';
-import { TranslatePipe } from '@ngx-translate/core';
-import { IonButtons, IonIcon, IonMenu, IonMenuButton, IonSplitPane, IonTitle } from '@ionic/angular/standalone';
-import { FilterMenuComponent } from 'src/app/modules/side-menu/components/filter-menu/filter-menu.component';
-
-/**
- * Show a list of observation data that meets current search filter.
- * The page have two views/modes: 1) A list of observation cards, and 2) A grid of images from the observations.
- */
-@Component({
-  selector: 'app-list-page',
-  template: `
-    <ion-split-pane contentId="main-content-list-page">
-      <ion-menu side="start" menuId="list-filter" contentId="main-content-list-page" max-edge-start="0">
-        @defer {
-          <app-filter-menu>
-            <!-- TODO: Legg til filter for kartutsnitt her  -->
-          </app-filter-menu>
-        }
-      </ion-menu>
-
-      <div id="main-content-list-page" class="ion-page">
-        <app-header>
-          <!-- Høyremeny -->
-          <ion-buttons slot="end">
-            <ion-menu-button color="light"> </ion-menu-button>
-          </ion-buttons>
-
-          <!-- Venstremeny / filtermeny -->
-          <ion-buttons slot="start">
-            <ion-menu-button menu="list-filter" color="light">
-              <ion-icon name="options-outline"></ion-icon>
-            </ion-menu-button>
-          </ion-buttons>
-
-          <ion-title>{{ 'OBSERVATION_LIST.TITLE' | translate }}</ion-title>
-        </app-header>
-        <router-outlet></router-outlet>
-        <app-add-menu></app-add-menu>
-      </div>
-    </ion-split-pane>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    AddMenuComponent,
-    FilterMenuComponent,
-    HeaderComponent,
-    IonButtons,
-    IonIcon,
-    IonMenu,
-    IonMenuButton,
-    IonSplitPane,
-    IonTitle,
-    RouterOutlet,
-    TranslatePipe,
-  ],
-})
-export class ObservationListPage {}
diff --git a/src/app/pages/observation-list/observation-list/observation-list.component.css b/src/app/pages/observation-list/observation-list/observation-list.component.css
index cf13da887..98d6d3dbb 100644
--- a/src/app/pages/observation-list/observation-list/observation-list.component.css
+++ b/src/app/pages/observation-list/observation-list/observation-list.component.css
@@ -1,7 +1,5 @@
 :host {
-  display: block;
-  height: 100%;
-  width: 100%;
+  display: contents;
 }
 
 .list-header {
diff --git a/src/app/pages/observation-list/observation-list/observation-list.component.html b/src/app/pages/observation-list/observation-list/observation-list.component.html
index f61e0ee15..2abdf594a 100644
--- a/src/app/pages/observation-list/observation-list/observation-list.component.html
+++ b/src/app/pages/observation-list/observation-list/observation-list.component.html
@@ -1,31 +1,61 @@
 <!-- Viser observasjoner i en liste -->
-<ion-content>
-  <ion-refresher slot="fixed" (ionRefresh)="refresh()">
-    <ion-refresher-content></ion-refresher-content>
-  </ion-refresher>
-
-  @if (isDesktop()) {
-    <div class="list-header">
-      <p>{{ isLoading() ? " - " : count() }} {{ "OBSERVATION_LIST.COUNT_POSTFIX" | translate }}</p>
-      <app-list-controls></app-list-controls>
-    </div>
-  }
-
-  <div class="list">
-    @for (reg of registrations(); track reg.RegId) {
-      <app-observation class="obs" [registration]="reg"></app-observation>
-    } @empty {
-      @if (error().hasError) {
-        <app-error-state></app-error-state>
-      } @else if (isLoading()) {
-        <p>{{ "OBSERVATION_LIST.LOADING" | translate }}</p>
-      } @else {
-        <app-empty-state></app-empty-state>
-      }
+<ion-split-pane contentId="main-content-list-page">
+  <ion-menu side="start" menuId="list-filter" contentId="main-content-list-page" max-edge-start="0">
+    @defer {
+      <app-filter-menu>
+        <!-- TODO: Legg til filter for kartutsnitt her  -->
+      </app-filter-menu>
     }
+  </ion-menu>
+
+  <div id="main-content-list-page" class="ion-page">
+    <app-header>
+      <!-- Høyremeny -->
+      <ion-buttons slot="end">
+        <ion-menu-button color="light"> </ion-menu-button>
+      </ion-buttons>
+
+      <!-- Venstremeny / filtermeny -->
+      <ion-buttons slot="start">
+        <ion-menu-button menu="list-filter" color="light">
+          <ion-icon name="options-outline"></ion-icon>
+        </ion-menu-button>
+      </ion-buttons>
+
+      <ion-title>{{ "OBSERVATION_LIST.TITLE" | translate }}</ion-title>
+    </app-header>
+
+    <ion-content>
+      <ion-refresher slot="fixed" (ionRefresh)="refresh()">
+        <ion-refresher-content></ion-refresher-content>
+      </ion-refresher>
+
+      @if (isDesktop()) {
+        <div class="list-header">
+          <p>{{ isLoading() ? " - " : count() }} {{ "OBSERVATION_LIST.COUNT_POSTFIX" | translate }}</p>
+          <app-list-controls></app-list-controls>
+        </div>
+      }
+
+      <div class="list">
+        @for (reg of registrations(); track reg.RegId) {
+          <app-observation class="obs" [registration]="reg"></app-observation>
+        } @empty {
+          @if (error().hasError) {
+            <app-error-state></app-error-state>
+          } @else if (isLoading()) {
+            <p>{{ "OBSERVATION_LIST.LOADING" | translate }}</p>
+          } @else {
+            <app-empty-state></app-empty-state>
+          }
+        }
+
+        <ion-infinite-scroll (ionInfinite)="loadNextPage()" [disabled]="disableInfiniteScroll()">
+          <ion-infinite-scroll-content> </ion-infinite-scroll-content>
+        </ion-infinite-scroll>
+      </div>
+    </ion-content>
 
-    <ion-infinite-scroll (ionInfinite)="loadNextPage()" [disabled]="disableInfiniteScroll()">
-      <ion-infinite-scroll-content> </ion-infinite-scroll-content>
-    </ion-infinite-scroll>
+    <app-add-menu></app-add-menu>
   </div>
-</ion-content>
+</ion-split-pane>
diff --git a/src/app/pages/observation-list/observation-list/observation-list.component.ts b/src/app/pages/observation-list/observation-list/observation-list.component.ts
index 415156aa1..cc8fbd723 100644
--- a/src/app/pages/observation-list/observation-list/observation-list.component.ts
+++ b/src/app/pages/observation-list/observation-list/observation-list.component.ts
@@ -6,6 +6,12 @@ import {
   IonInfiniteScrollContent,
   IonRefresher,
   IonRefresherContent,
+  IonSplitPane,
+  IonMenu,
+  IonButtons,
+  IonMenuButton,
+  IonIcon,
+  IonTitle,
 } from '@ionic/angular/standalone';
 import { combineLatest, map, tap } from 'rxjs';
 import { ObservationComponent } from 'src/app/components/observation/observation/observation.component';
@@ -18,6 +24,9 @@ import { ListControlsComponent } from '../list-controls/list-controls.component'
 import { TranslatePipe } from '@ngx-translate/core';
 import { BreakpointService } from 'src/app/core/services/breakpoint.service';
 import { UpdateObservationsService } from 'src/app/modules/side-menu/components/update-observations/update-observations.service';
+import { FilterMenuComponent } from 'src/app/modules/side-menu/components/filter-menu/filter-menu.component';
+import { HeaderComponent } from 'src/app/modules/shared/components/header/header.component';
+import { AddMenuComponent } from 'src/app/modules/shared/components/add-menu/add-menu.component';
 
 @Component({
   selector: 'app-observation-list',
@@ -32,6 +41,15 @@ import { UpdateObservationsService } from 'src/app/modules/side-menu/components/
     EmptyStateComponent,
     ListControlsComponent,
     TranslatePipe,
+    IonSplitPane,
+    IonMenu,
+    FilterMenuComponent,
+    HeaderComponent,
+    IonButtons,
+    IonMenuButton,
+    IonIcon,
+    IonTitle,
+    AddMenuComponent,
   ],
   templateUrl: './observation-list.component.html',
   styleUrl: './observation-list.component.css',
diff --git a/src/app/pages/tabs/tabs.page.html b/src/app/pages/tabs/tabs.page.html
index 38a7b7cfa..f204f65cc 100644
--- a/src/app/pages/tabs/tabs.page.html
+++ b/src/app/pages/tabs/tabs.page.html
@@ -13,9 +13,9 @@
           <ion-label>{{ "TABS.MAP" | translate }}</ion-label>
         </ion-tab-button>
         <ion-tab-button
-          [class.tab-button--active]="selectedTab() === 'search'"
-          tab="search"
-          [selected]="selectedTab() === 'search'"
+          [class.tab-button--active]="selectedTab() === 'list'"
+          tab="list"
+          [selected]="selectedTab() === 'list'"
           [layout]="iconLayout()"
         >
           <ion-icon name="list" aria-hidden="true"></ion-icon>
@@ -34,6 +34,16 @@
             }
           </ion-tab-button>
         } @else {
+          <ion-tab-button
+            [class.tab-button--active]="selectedTab() === 'images'"
+            tab="images"
+            [selected]="selectedTab() === 'images'"
+            [layout]="iconLayout()"
+          >
+            <ion-icon name="images-outline" aria-hidden="true"></ion-icon>
+            <ion-label>{{ "TABS.IMAGES" | translate }}</ion-label>
+          </ion-tab-button>
+
           <ion-tab-button
             class="tab-button--desktop"
             [href]="warningsLink()"
diff --git a/src/app/pages/tabs/tabs.page.ts b/src/app/pages/tabs/tabs.page.ts
index fd3a8d8c6..0186544b5 100644
--- a/src/app/pages/tabs/tabs.page.ts
+++ b/src/app/pages/tabs/tabs.page.ts
@@ -9,7 +9,7 @@ import { WarningService } from '../../core/services/warning/warning.service';
 import { TABS, TabsService } from './tabs.service';
 import { TranslatePipe } from '@ngx-translate/core';
 import { addIcons } from 'ionicons';
-import { mapOutline, list, warning, openOutline, analyticsOutline } from 'ionicons/icons';
+import { mapOutline, list, warning, openOutline, analyticsOutline, imagesOutline } from 'ionicons/icons';
 import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { BreakpointService } from 'src/app/core/services/breakpoint.service';
 import { Capacitor } from '@capacitor/core';
@@ -40,7 +40,7 @@ export class TabsPage {
   isNative = Capacitor.isNativePlatform();
 
   constructor() {
-    addIcons({ mapOutline, list, warning, openOutline, analyticsOutline });
+    addIcons({ mapOutline, list, warning, openOutline, analyticsOutline, imagesOutline });
     combineLatest([
       this.searchCriteriaService.searchCriteria$,
       toObservable(this.searchCriteriaService.isExtentCriteriaActive),
diff --git a/src/app/pages/tabs/tabs.routes.ts b/src/app/pages/tabs/tabs.routes.ts
index d98ffc861..7ce64c225 100644
--- a/src/app/pages/tabs/tabs.routes.ts
+++ b/src/app/pages/tabs/tabs.routes.ts
@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { TabsPage } from './tabs.page';
 import { canActivateStartWizard } from '../../core/guards/start-wizard.guard';
 import { desktopBlockGuard } from 'src/app/core/guards/desktop-block.guard';
+import { TABS } from './tabs.service';
 
 /**
  * Ruter for navigasjon mellom faner nederst på skjermen
@@ -18,7 +19,7 @@ export const routes: Routes = [
         loadComponent: () => import('../home/home.page').then((m) => m.HomePage),
       },
       {
-        path: 'home',
+        path: TABS.HOME,
         redirectTo: '',
       },
       {
@@ -26,42 +27,43 @@ export const routes: Routes = [
         loadComponent: () => import('../trip/trip.page').then((m) => m.TripPage),
       },
       {
-        path: 'search',
-        loadComponent: () => import('../observation-list/list.page').then((m) => m.ObservationListPage),
-        children: [
-          {
-            path: 'list',
-            loadComponent: () =>
-              import('../observation-list/observation-list/observation-list.component').then(
-                (m) => m.ObservationListComponent
-              ),
-          },
-          {
-            path: 'pictures',
-            loadComponent: () =>
-              import('../observation-list/image-list/image-list.component').then((m) => m.ImageListComponent),
-          },
-          {
-            path: '',
-            redirectTo: 'list',
-            pathMatch: 'full',
-          },
-        ],
+        path: TABS.OBSERVATION_LIST,
+        loadComponent: () =>
+          import('../observation-list/observation-list/observation-list.component').then(
+            (m) => m.ObservationListComponent
+          ),
+      },
+      {
+        path: TABS.IMAGES,
+        loadComponent: () =>
+          import('../observation-list/image-list/image-list.component').then((m) => m.ImageListComponent),
       },
       {
-        path: 'warning-list',
+        path: TABS.WARNING_LIST,
         loadComponent: () => import('../warning-list/warning-list.page').then((m) => m.WarningListPage),
         canActivate: [desktopBlockGuard],
       },
       // Redirect from old regobs.no route
       {
         path: 'observation/search',
-        redirectTo: 'search',
+        redirectTo: TABS.OBSERVATION_LIST,
       },
       // Support old route used in app
+      {
+        path: 'search/list',
+        redirectTo: TABS.OBSERVATION_LIST,
+      },
+      {
+        path: 'search/pictures',
+        redirectTo: TABS.IMAGES,
+      },
       {
         path: 'observation-list',
-        redirectTo: 'search',
+        redirectTo: TABS.OBSERVATION_LIST,
+      },
+      {
+        path: 'search',
+        redirectTo: TABS.OBSERVATION_LIST,
       },
     ],
   },
diff --git a/src/app/pages/tabs/tabs.service.ts b/src/app/pages/tabs/tabs.service.ts
index c95f729fb..c97744af6 100644
--- a/src/app/pages/tabs/tabs.service.ts
+++ b/src/app/pages/tabs/tabs.service.ts
@@ -5,7 +5,8 @@ import { Location } from '@angular/common';
 
 export enum TABS {
   HOME = 'home',
-  OBSERVATION_LIST = 'search',
+  OBSERVATION_LIST = 'list',
+  IMAGES = 'images',
   WARNING_LIST = 'warning-list',
   PLANS = 'plans',
 }
@@ -36,6 +37,8 @@ export class TabsService {
     const cleanPath = path.includes('?') ? path.slice(0, path.indexOf('?')) : path;
     if (cleanPath.indexOf(TABS.OBSERVATION_LIST) > -1) {
       return TABS.OBSERVATION_LIST;
+    } else if (cleanPath.indexOf(TABS.IMAGES) > -1) {
+      return TABS.IMAGES;
     } else if (cleanPath.indexOf(TABS.WARNING_LIST) > -1) {
       return TABS.WARNING_LIST;
     } else if (cleanPath.indexOf(TABS.PLANS) > -1) {
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 13d57197f..1ae360802 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1103,7 +1103,8 @@
     "LIST": "List",
     "MAP": "Map",
     "TRIPS": "Trips",
-    "WARNINGS": "Warnings"
+    "WARNINGS": "Warnings",
+    "IMAGES": "Images"
   },
   "TRIP": {
     "COMMENT_CAPTION": "Description (required)",
diff --git a/src/assets/i18n/nb.json b/src/assets/i18n/nb.json
index b787d0c6e..363aa0642 100644
--- a/src/assets/i18n/nb.json
+++ b/src/assets/i18n/nb.json
@@ -1100,7 +1100,8 @@
   "TABS": {
     "LIST": "Liste",
     "MAP": "Kart",
-    "WARNINGS": "Varsler"
+    "WARNINGS": "Varsler",
+    "IMAGES": "Bilder"
   },
   "TRIP": {
     "COMMENT_CAPTION": "Beskrivelse (obligatorisk)",