Merge remote-tracking branch 'origin/main' into lighter_buckets_web

web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { getKey } from '$lib/utils';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { removeSharedLinkAssets, type SharedLinkResponseDto } from '@immich/sdk';
   import { mdiDeleteOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
   import { NotificationType, notificationController } from '../../shared-components/notification/notification';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
-  import { t } from 'svelte-i18n';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -34,7 +34,7 @@
         assetIdsDto: {
           assetIds: [...getAssets()].map((asset) => asset.id),
         },
-        key: getKey(),
+        key: authManager.key,
       });
 
       for (const result of results) {

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -149,7 +149,7 @@
         </div>
       {/if}
 
-      <span class="w-full truncate first-letter:capitalize ml-2.5" title={getDateLocaleString(dateGroup.date)}>
+      <span class="w-full truncate first-letter:capitalize ms-2.5" title={getDateLocaleString(dateGroup.date)}>
         {dateGroup.groupTitle}
       </span>
     </div>

web/src/lib/components/photos-page/asset-grid.svelte

@@ -751,7 +751,7 @@
 <!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
 <section
   id="asset-grid"
-  class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ml-0': !isEmpty }]}
+  class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
   style:margin-right={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
   tabindex="-1"
   bind:clientHeight={assetStore.viewportHeight}

web/src/lib/components/photos-page/memory-lane.svelte

@@ -45,9 +45,9 @@
     onscroll={onScroll}
   >
     {#if canScrollLeft || canScrollRight}
-      <div class="sticky left-0 z-20">
+      <div class="sticky start-0 z-20">
         {#if canScrollLeft}
-          <div class="absolute left-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
+          <div class="absolute start-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
             <button
               type="button"
               class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
@@ -60,7 +60,7 @@
           </div>
         {/if}
         {#if canScrollRight}
-          <div class="absolute right-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
+          <div class="absolute end-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
             <button
               type="button"
               class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
@@ -77,7 +77,7 @@
     <div class="inline-block" use:resizeObserver={({ width }) => (innerWidth = width)}>
       {#each memoryStore.memories as memory (memory.id)}
         <a
-          class="memory-card relative mr-2 md:mr-4 last:mr-0 inline-block aspect-[3/4] md:aspect-[4/3] max-md:h-[150px] xl:aspect-video h-[215px] rounded-xl"
+          class="memory-card relative me-2 md:me-4 last:me-0 inline-block aspect-[3/4] md:aspect-[4/3] max-md:h-[150px] xl:aspect-video h-[215px] rounded-xl"
           href="{AppRoute.MEMORY}?{QueryParameter.ID}={memory.assets[0].id}"
         >
           <img
@@ -86,11 +86,11 @@
             alt={$t('memory_lane_title', { values: { title: $getAltText(toTimelineAsset(memory.assets[0])) } })}
             draggable="false"
           />
-          <p class="absolute bottom-2 left-4 z-10 text-lg text-white max-md:text-sm">
+          <p class="absolute bottom-2 start-4 z-10 text-lg text-white max-md:text-sm">
             {$memoryLaneTitle(memory)}
           </p>
           <div
-            class="absolute left-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"
+            class="absolute start-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"
           ></div>
         </a>
       {/each}

web/src/lib/components/photos-page/skeleton.svelte

@@ -14,7 +14,7 @@
     {title}
   </div>
   <div
-    class="animate-pulse absolute h-full ml-[10px] mr-[10px]"
+    class="animate-pulse absolute h-full ms-[10px] me-[10px]"
     style:width="calc(100% - 20px)"
     data-skeleton="true"
   ></div>