fix(web): timeline and asset viewer RTL support (#26513)

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -18,6 +18,7 @@
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { languageManager } from '$lib/managers/language-manager.svelte';
   import { Route } from '$lib/route';
   import { getGlobalActions } from '$lib/services/app.service';
   import { getAssetActions, handleReplaceAsset } from '$lib/services/asset.service';
@@ -36,6 +37,7 @@
   import { ActionButton, CommandPaletteDefaultProvider, type ActionItem } from '@immich/ui';
   import {
     mdiArrowLeft,
+    mdiArrowRight,
     mdiCompare,
     mdiDotsVertical,
     mdiImageSearch,
@@ -84,7 +86,7 @@
   const Close: ActionItem = $derived({
     title: $t('go_back'),
     type: $t('assets'),
-    icon: mdiArrowLeft,
+    icon: languageManager.rtl ? mdiArrowRight : mdiArrowLeft,
     $if: () => !!onClose,
     onAction: () => onClose?.(),
     shortcuts: [{ key: 'Escape' }],

web/src/lib/components/asset-viewer/editor/transform-tool/transform-tool.svelte

@@ -134,7 +134,7 @@
             ></div>
           {/if}
         </Button>
-        <span class="text-sm text-white text-left">{ratio.label}</span>
+        <span class="text-sm text-white">{ratio.label}</span>
       </HStack>
     {/each}
   </div>

web/src/lib/components/asset-viewer/slideshow-bar.svelte

@@ -2,6 +2,7 @@
   import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
   import ProgressBar from '$lib/components/shared-components/progress-bar/progress-bar.svelte';
   import { ProgressBarStatus } from '$lib/constants';
+  import { languageManager } from '$lib/managers/language-manager.svelte';
   import SlideshowSettingsModal from '$lib/modals/SlideshowSettingsModal.svelte';
   import { SlideshowNavigation, slideshowStore } from '$lib/stores/slideshow.store';
   import { AssetTypeEnum } from '@immich/sdk';
@@ -199,7 +200,7 @@
       variant="ghost"
       shape="round"
       color="secondary"
-      icon={mdiChevronLeft}
+      icon={languageManager.rtl ? mdiChevronRight : mdiChevronLeft}
       onclick={onPrevious}
       aria-label={$t('previous')}
     />
@@ -207,7 +208,7 @@
       variant="ghost"
       shape="round"
       color="secondary"
-      icon={mdiChevronRight}
+      icon={languageManager.rtl ? mdiChevronLeft : mdiChevronRight}
       onclick={onNext}
       aria-label={$t('next')}
     />

web/src/lib/components/timeline/AssetLayout.svelte

@@ -47,7 +47,7 @@
       data-asset-id={asset.id}
       class="absolute"
       style:top={position.top + 'px'}
-      style:left={position.left + 'px'}
+      style:inset-inline-start={position.left + 'px'}
       style:width={position.width + 'px'}
       style:height={position.height + 'px'}
       out:scale|global={{ start: 0.1, duration: scaleDuration }}

web/src/lib/components/timeline/Month.svelte

@@ -54,7 +54,6 @@
 </script>
 
 {#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
-  {@const absoluteWidth = dayGroup.left}
   {@const isDayGroupSelected = assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <section
@@ -64,7 +63,8 @@
     ]}
     data-group
     style:position="absolute"
-    style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`}
+    style:inset-inline-start={dayGroup.start + 'px'}
+    style:top={dayGroup.top + 'px'}
     onmouseenter={() => (hoveredDayGroup = dayGroup.groupTitle)}
     onmouseleave={() => (hoveredDayGroup = null)}
   >

web/src/lib/components/timeline/Timeline.svelte

@@ -617,7 +617,7 @@
 <section
   id="asset-grid"
   class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
-  style:margin-right={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
+  style:margin-inline-end={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
   tabindex="-1"
   bind:clientHeight={timelineManager.viewportHeight}
   bind:clientWidth={timelineManager.viewportWidth}

web/src/lib/managers/timeline-manager/day-group.svelte.ts

@@ -21,7 +21,7 @@ export class DayGroup {
   intersecting = $derived.by(() => this.viewerAssets.some((viewAsset) => viewAsset.intersecting));
 
   #top: number = $state(0);
-  #left: number = $state(0);
+  #start: number = $state(0);
   #row = $state(0);
   #col = $state(0);
   #deferredLayout = false;
@@ -41,12 +41,12 @@ export class DayGroup {
     this.#top = value;
   }
 
-  get left() {
+  get start() {
-    return this.#left;
+    return this.#start;
   }
 
-  set left(value: number) {
+  set start(value: number) {
-    this.#left = value;
+    this.#start = value;
   }
 
   get row() {

web/src/lib/managers/timeline-manager/internal/layout-support.svelte.ts

@@ -39,7 +39,7 @@ export function layoutMonthGroup(timelineManager: TimelineManager, month: MonthG
     if (fitsInCurrentRow) {
       dayGroup.row = dayGroupRow;
       dayGroup.col = dayGroupCol++;
-      dayGroup.left = cumulativeWidth;
+      dayGroup.start = cumulativeWidth;
       dayGroup.top = cumulativeHeight;
 
       cumulativeWidth += dayGroup.width + timelineManager.gap;
@@ -53,7 +53,7 @@ export function layoutMonthGroup(timelineManager: TimelineManager, month: MonthG
       // Position at start of new row
       dayGroup.row = dayGroupRow;
       dayGroup.col = dayGroupCol;
-      dayGroup.left = 0;
+      dayGroup.start = 0;
       dayGroup.top = cumulativeHeight;
 
       dayGroupCol++;