From 92bb42950e57572aac220b6ad81751e3b2b5c75e Mon Sep 17 00:00:00 2001
From: waclaw66 <waclaw66@seznam.cz>
Date: Fri, 3 Nov 2023 14:54:02 +0100
Subject: [PATCH] fix(web): scrollbar year label visibility (#4820)

* fixes year label visibility

* format fix
---
 .../scrollbar/scrollbar.svelte                | 57 +++++++++++++------
 1 file changed, 39 insertions(+), 18 deletions(-)

diff --git a/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte b/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
index 24490329b4..222654c593 100644
--- a/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
+++ b/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
@@ -21,11 +21,27 @@
 
   $: hoverY = height - windowHeight + clientY;
   $: scrollY = toScrollY(timelineY);
-  $: segments = $assetStore.buckets.map((bucket) => ({
-    count: bucket.assets.length,
-    height: toScrollY(bucket.bucketHeight),
-    timeGroup: bucket.bucketDate,
-  }));
+
+  class Segment {
+    public count;
+    public height;
+    public timeGroup;
+
+    constructor({ count = 0, height = 0, timeGroup = '' }) {
+      this.count = count;
+      this.height = height;
+      this.timeGroup = timeGroup;
+    }
+  }
+
+  $: segments = $assetStore.buckets.map(
+    (bucket) =>
+      new Segment({
+        count: bucket.assets.length,
+        height: toScrollY(bucket.bucketHeight),
+        timeGroup: bucket.bucketDate,
+      }),
+  );
 
   const dispatch = createEventDispatcher<{ scrollTimeline: number }>();
   const scrollTimeline = () => dispatch('scrollTimeline', toTimelineY(hoverY));
@@ -51,6 +67,23 @@
       isAnimating = false;
     });
   };
+
+  const prevYearSegmentHeight = (segments: Segment[], index: number) => {
+    var prevYear = null;
+    var height = 0;
+    for (var i = index; i >= 0; i--) {
+      const curr = segments[i];
+      const currYear = fromLocalDateTime(curr.timeGroup).year;
+      if (prevYear && prevYear != currYear) {
+        break;
+      }
+
+      height += curr.height;
+      prevYear = currYear;
+    }
+
+    return height;
+  };
 </script>
 
 <svelte:window bind:innerHeight={windowHeight} />
@@ -98,18 +131,6 @@
       {@const label = `${date.toLocaleString({ month: 'short' })} ${year}`}
       {@const lastGroupYear = fromLocalDateTime(segments[index - 1]?.timeGroup).year}
 
-      <!-- Check if the next three segments are different years then don't render
-      to avoid overlapse -->
-      {@const canRenderYear = segments.slice(index + 1, index + 3).reduce((_, curr) => {
-        const nextGroupYear = fromLocalDateTime(curr.timeGroup).year;
-
-        if (nextGroupYear !== year || curr.height < 1) {
-          return false;
-        }
-
-        return true;
-      }, true)}
-
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
         id="time-segment"
@@ -118,7 +139,7 @@
         aria-label={segment.timeGroup + ' ' + segment.count}
         on:mousemove={() => (hoverLabel = label)}
       >
-        {#if lastGroupYear !== year && canRenderYear}
+        {#if lastGroupYear !== year && (index == 0 || prevYearSegmentHeight(segments, index - 1) > 16)}
           <div
             aria-label={segment.timeGroup + ' ' + segment.count}
             class="absolute right-0 z-10 pr-5 text-xs font-medium dark:text-immich-dark-fg font-mono"