From b72a9b169cc6dc4fa7de5b1e4cc1e893edc2d8bc Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Sat, 13 Sep 2025 12:54:56 +0200
Subject: [PATCH] feat(schedule): make initial scroll to work start work

---
 .../schedule-week.component.html              |  2 ++
 .../schedule/schedule/schedule.component.html | 32 ++++++++++---------
 .../schedule/schedule/schedule.component.scss | 10 ++++++
 .../schedule/schedule/schedule.component.ts   | 23 +++++++++++--
 4 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/src/app/features/schedule/schedule-week/schedule-week.component.html b/src/app/features/schedule/schedule-week/schedule-week.component.html
index 3437a2d09..6a84ad6f3 100644
--- a/src/app/features/schedule/schedule-week/schedule-week.component.html
+++ b/src/app/features/schedule/schedule-week/schedule-week.component.html
@@ -50,6 +50,7 @@
   <!-- Work Start and End -->
   @if (workStartEnd()) {
     <div
+      id="work-start"
       class="work-start"
       style="grid-row: {{ workStartEnd()!.workStartRow }}"
     >
@@ -64,6 +65,7 @@
   }
 
   <div
+    id="current-time"
     class="current-time"
     style="grid-column: 2;  grid-row: {{ currentTimeRow() }} / span 1"
   >
diff --git a/src/app/features/schedule/schedule/schedule.component.html b/src/app/features/schedule/schedule/schedule.component.html
index 91dd1c5d2..c225e67aa 100644
--- a/src/app/features/schedule/schedule/schedule.component.html
+++ b/src/app/features/schedule/schedule/schedule.component.html
@@ -59,18 +59,20 @@
   </div>
 </header>
 
-@if (isMonthView()) {
-  <schedule-month
-    [events]="events()"
-    [daysToShow]="daysToShow()"
-    [weeksToShow]="weeksToShow()"
-  ></schedule-month>
-} @else {
-  <schedule-week
-    [events]="events()"
-    [beyondBudget]="beyondBudget()"
-    [daysToShow]="daysToShow()"
-    [workStartEnd]="workStartEnd()"
-    [currentTimeRow]="currentTimeRow()"
-  ></schedule-week>
-}
+<div class="scroll-wrapper">
+  @if (isMonthView()) {
+    <schedule-month
+      [events]="events()"
+      [daysToShow]="daysToShow()"
+      [weeksToShow]="weeksToShow()"
+    ></schedule-month>
+  } @else {
+    <schedule-week
+      [events]="events()"
+      [beyondBudget]="beyondBudget()"
+      [daysToShow]="daysToShow()"
+      [workStartEnd]="workStartEnd()"
+      [currentTimeRow]="currentTimeRow()"
+    ></schedule-week>
+  }
+</div>
diff --git a/src/app/features/schedule/schedule/schedule.component.scss b/src/app/features/schedule/schedule/schedule.component.scss
index 96653f703..58bb06e6b 100644
--- a/src/app/features/schedule/schedule/schedule.component.scss
+++ b/src/app/features/schedule/schedule/schedule.component.scss
@@ -4,6 +4,16 @@
   --nr-of-days: 5;
   --nr-of-weeks: 6;
   background: transparent;
+  display: flex;
+  flex-direction: column;
+}
+
+// we need this to prevent problems with route ani and scroll behavior
+.scroll-wrapper {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  overflow-y: scroll;
 }
 
 header {
diff --git a/src/app/features/schedule/schedule/schedule.component.ts b/src/app/features/schedule/schedule/schedule.component.ts
index af5f3dd09..7ecf61642 100644
--- a/src/app/features/schedule/schedule/schedule.component.ts
+++ b/src/app/features/schedule/schedule/schedule.component.ts
@@ -1,6 +1,14 @@
 /* eslint-disable */
-import { ChangeDetectionStrategy, Component, inject, computed } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  computed,
+  OnInit,
+  AfterViewInit,
+} from '@angular/core';
 import { fromEvent } from 'rxjs';
+import { ActivatedRoute, Router } from '@angular/router';
 import { select, Store } from '@ngrx/store';
 import { selectTimelineTasks } from '../../work-context/store/work-context.selectors';
 import { selectPlannerDayMap } from '../../planner/store/planner.selectors';
@@ -39,7 +47,7 @@ import { ScheduleService } from '../schedule.service';
     '[style.--nr-of-days]': 'daysToShow().length',
   },
 })
-export class ScheduleComponent {
+export class ScheduleComponent implements AfterViewInit {
   taskService = inject(TaskService);
   layoutService = inject(LayoutService);
   scheduleService = inject(ScheduleService);
@@ -47,6 +55,7 @@ export class ScheduleComponent {
   private _calendarIntegrationService = inject(CalendarIntegrationService);
   private _store = inject(Store);
   private _globalTrackingIntervalService = inject(GlobalTrackingIntervalService);
+  private _route = inject(ActivatedRoute);
 
   private _currentTimeViewMode = computed(() => this.layoutService.selectedTimeView());
   isMonthView = computed(() => this._currentTimeViewMode() === 'month');
@@ -200,4 +209,14 @@ export class ScheduleComponent {
       });
     }
   }
+
+  ngAfterViewInit(): void {
+    // Handle fragment scrolling manually as a fallback
+    setTimeout(() => {
+      const element = document.getElementById('work-start');
+      if (element) {
+        element.scrollIntoView({ behavior: 'instant', block: 'start' });
+      }
+    }); // Small delay to ensure DOM is fully rendered
+  }
 }