feat: scroll timeline to today's date on first load

closes #869b9vhrj

assets/controllers/timeline_scroll_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+    static targets = [ 'today' ]
+
+    connect() {
+        if (false === this.hasTodayTarget) {
+            return
+        }
+
+        requestAnimationFrame(() => {
+            const containerRect = this.element.getBoundingClientRect()
+            const todayRect = this.todayTarget.getBoundingClientRect()
+
+            const scrollLeft = todayRect.left - containerRect.left + this.element.scrollLeft
+            const centered = scrollLeft - (this.element.clientWidth / 2) + (todayRect.width / 2)
+            const maxScrollLeft = this.element.scrollWidth - this.element.clientWidth
+
+            this.element.scrollLeft = Math.min(Math.max(0, centered), maxScrollLeft)
+        })
+    }
+}

templates/administrative/assignment/timeline.html.twig

@@ -68,12 +68,12 @@
             {% endif %}
         </div>
     </div>
-    <div class="scroll-container border border-gray-300 mb-4">
+    <div class="scroll-container border border-gray-300 mb-4" {{ stimulus_controller('timeline-scroll') }}>
         <table>
             <tr class="[&_th]:sticky [&_th]:top-0 [&_th]:z-10">
                 <th></th>
                 {% for day in filterDto.period %}
-                    <th>
+                    <th{% if day|date('Y-m-d') == 'now'|date('Y-m-d') %} {{ stimulus_target('timeline-scroll', 'today') }}{% endif %}>
                         {{ day | date('d.m.Y') }}
                     </th>
                 {% endfor %}