wip web memories view

* test: fix scroll flicker

* lint

Makefile

@@ -1,46 +1,46 @@
 dev:
-	@printf "This command has been removed. Please use:\n\n    mise dev          # or mise //:dev from another directory\n\n"\n\n >&2 && exit 1
+	@printf "This command has been removed. Please use:\n\n    mise dev          # or mise //:dev from another directory\n\n" >&2 && exit 1
 
 dev-down:
-	@printf "This command has been removed. Please use:\n\n    mise dev-down          # or mise //:dev-down from another directory\n\n"\n\n >&2 && exit 1
+	@printf "This command has been removed. Please use:\n\n    mise dev-down          # or mise //:dev-down from another directory\n\n" >&2 && exit 1
 
 dev-update:
-	@printf "This command has been removed. Please use:\n\n    mise dev-update          # or mise //:dev-update from another directory\n\n"\n\n >&2 && exit 1
+	@printf "This command has been removed. Please use:\n\n    mise dev-update          # or mise //:dev-update from another directory\n\n" >&2 && exit 1
 
 dev-scale:
-	@printf "This command has been removed. Please use:\n\n    mise dev-scale          # or mise //:dev-scale from another directory\n\n"\n\n >&2 && exit 1
+	@printf "This command has been removed. Please use:\n\n    mise dev-scale          # or mise //:dev-scale from another directory\n\n" >&2 && exit 1
 
 dev-docs:
 	npm --prefix docs run start
 
 .PHONY: e2e
 e2e:
-	@printf "This command has been removed. Please use:\n\n    mise e2e          # or mise //:e2e from another directory\n\n"\n\n >&2 && exit 1
+	@printf "This command has been removed. Please use:\n\n    mise e2e          # or mise //:e2e from another directory\n\n" >&2 && exit 1
 
 e2e-dev:
-	@printf "This command has been removed. Please use:\n\n    mise e2e-dev          # or mise //:e2e-dev from another directory\n\n"\n\n >&2 && exit 1
+	@printf "This command has been removed. Please use:\n\n    mise e2e-dev          # or mise //:e2e-dev from another directory\n\n" >&2 && exit 1
 
 e2e-update:
-	@printf "This command has been removed. Please use:\n\n    mise e2e-update          # or mise //:e2e-update from another directory\n\n"\n\n >&2 && exit 1
+	@printf "This command has been removed. Please use:\n\n    mise e2e-update          # or mise //:e2e-update from another directory\n\n" >&2 && exit 1
 
 e2e-down:
-	@printf "This command has been removed. Please use:\n\n    mise e2e-down          # or mise //:e2e-down from another directory\n\n"\n\n >&2 && exit 1
+	@printf "This command has been removed. Please use:\n\n    mise e2e-down          # or mise //:e2e-down from another directory\n\n" >&2 && exit 1
 
 prod:
-	@printf "This command has been removed. Please use:\n\n    mise prod          # or mise //:prod from another directory\n\n"\n\n >&2 && exit 1
+	@printf "This command has been removed. Please use:\n\n    mise prod          # or mise //:prod from another directory\n\n" >&2 && exit 1
 
 prod-down:
-	@printf "This command has been removed. Please use:\n\n    mise prod-down          # or mise //:prod-down from another directory\n\n"\n\n >&2 && exit 1
+	@printf "This command has been removed. Please use:\n\n    mise prod-down          # or mise //:prod-down from another directory\n\n" >&2 && exit 1
 
 prod-scale:
-	@printf "This command has been removed. Please use:\n\n    mise prod-scale          # or mise //:prod-scale from another directory\n\n"\n\n >&2 && exit 1
+	@printf "This command has been removed. Please use:\n\n    mise prod-scale          # or mise //:prod-scale from another directory\n\n" >&2 && exit 1
 
 .PHONY: open-api
 open-api:
-	@printf "This command has been removed. Please use:\n\n    mise open-api          # or mise //:open-api from another directory\n\n"\n\n >&2 && exit 1
+	@printf "This command has been removed. Please use:\n\n    mise open-api          # or mise //:open-api from another directory\n\n" >&2 && exit 1
 
 sql:
-	@printf "This command has been removed. Please use:\n\n    mise sql               # or mise //:sql from another directory\n\n"\n\n >&2 && exit 1
+	@printf "This command has been removed. Please use:\n\n    mise sql               # or mise //:sql from another directory\n\n" >&2 && exit 1
 
 
 renovate:
@@ -52,16 +52,7 @@ renovate:
 MODULES = e2e server web cli sdk docs .github
 
 test-e2e:
-	docker compose -f ./e2e/docker-compose.yml build
-	pnpm --filter immich-e2e run test
-	pnpm --filter immich-e2e run test:web
+	@printf "This command has been removed. Please use:\n\n    mise //e2e:test               # or mise //e2e:test-web for web tests, respectively\n\n" >&2 && exit 1
 
 clean:
-	find . -name "node_modules" -type d -prune -exec rm -rf {} +
-	find . -name "dist" -type d -prune -exec rm -rf '{}' +
-	find . -name "build" -type d -prune -exec rm -rf '{}' +
-	find . -name ".svelte-kit" -type d -prune -exec rm -rf '{}' +
-	find . -name "coverage" -type d -prune -exec rm -rf '{}' +
-	find . -name ".pnpm-store" -type d -prune -exec rm -rf '{}' +
-	command -v docker >/dev/null 2>&1 && docker compose -f ./docker/docker-compose.dev.yml down -v --remove-orphans || true
-	command -v docker >/dev/null 2>&1 && docker compose -f ./e2e/docker-compose.yml down -v --remove-orphans || true
+	@printf "This command has been removed. Please use:\n\n    mise clean               # or mise //:clean from another directory\n\n" >&2 && exit 1

e2e/mise.toml

@@ -1,11 +1,21 @@
 [tasks.install]
 run = "pnpm install --filter immich-e2e --frozen-lockfile"
 
+[tasks.build]
+dir = "{{ config_root }}"
+run = "docker compose build"
+
 [tasks.test]
+depends = ["//e2e:build", "//e2e:ci-setup"]
 env._.path = "./node_modules/.bin"
 run = "vitest --run"
 
+[tasks.playwright-install]
+env._.path = "./node_modules/.bin"
+run = "playwright install"
+
 [tasks."test-web"]
+depends = ["//e2e:build", "//e2e:ci-setup", "//e2e:playwright-install"]
 env._.path = "./node_modules/.bin"
 run = "playwright test"
 
@@ -30,7 +40,12 @@ run = "tsc --noEmit"
 
 
 [tasks.ci-setup]
-depends = ["//:sdk:install", "//:sdk:build", "//cli:install", "//cli:build"]
+depends = [
+  "//:sdk:install",
+  "//:sdk:build",
+  "//packages/cli:install",
+  "//packages/cli:build",
+]
 run = { task = ":install" }
 
 

mise.toml

@@ -165,3 +165,14 @@ run = "pnpm format"
 
 [tasks."i18n:format-fix"]
 run = "pnpm format:fix"
+
+[tasks.clean]
+run = [
+  "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
+  "find . -name 'dist' -type d -prune -exec rm -rf '{}' +",
+  "find . -name 'build' -type d -prune -exec rm -rf '{}' +",
+  "find . -name '.svelte-kit' -type d -prune -exec rm -rf '{}' +",
+  "find . -name 'coverage' -type d -prune -exec rm -rf '{}' +",
+  "find . -name '.pnpm-store' -type d -prune -exec rm -rf '{}' +",
+  { task = "//:*-down" },
+]

web/src/lib/components/assets/thumbnail/Thumbnail.svelte

@@ -205,11 +205,7 @@
 </script>
 
 <div
-  class={[
-    'group flex overflow-hidden transition-[background-color,border-radius] focus-visible:outline-none',
-    backgroundColorClass,
-    { 'rounded-xl': selected },
-  ]}
+  class={['group flex overflow-hidden focus-visible:outline-none', backgroundColorClass, { 'rounded-xl': selected }]}
   style:width="{width}px"
   style:height="{height}px"
   onmouseenter={onMouseEnter}
@@ -249,16 +245,8 @@
       ]}
     >
       <ImageThumbnail
-        class={[
-          'absolute transition-[border-radius] group-focus-visible:rounded-lg',
-          { 'rounded-xl': selected },
-          imageClass,
-        ]}
-        brokenAssetClass={[
-          'z-1 absolute group-focus-visible:rounded-lg transition-[border-radius]',
-          { 'rounded-xl': selected },
-          brokenAssetClass,
-        ]}
+        class={['absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, imageClass]}
+        brokenAssetClass={['z-1 absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, brokenAssetClass]}
         url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
         altText={$getAltText(asset)}
         widthStyle="{width}px"

web/src/lib/managers/memory-manager.svelte.ts

@@ -1,9 +1,16 @@
-import { deleteMemory, type MemoryResponseDto, removeMemoryAssets, searchMemories, updateMemory } from '@immich/sdk';
+import {
+  deleteMemory,
+  type MemoryResponseDto,
+  removeMemoryAssets,
+  searchMemories,
+  updateMemory,
+  MemorySearchOrder,
+  MemoryType,
+} from '@immich/sdk';
 import { DateTime } from 'luxon';
 import { authManager } from '$lib/managers/auth-manager.svelte';
 import { eventManager } from '$lib/managers/event-manager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import { asLocalTimeISO } from '$lib/utils/date-time';
 import { toTimelineAsset } from '$lib/utils/timeline-util';
 
 type MemoryIndex = {
@@ -22,8 +29,21 @@ export type MemoryAsset = MemoryIndex & {
 
 class MemoryManager {
   #loading: Promise<void> | undefined;
+  #filters:
+    | {
+        $for?: string;
+        isSaved?: boolean;
+        isTrashed?: boolean;
+        order?: MemorySearchOrder;
+        page?: number;
+        size?: number;
+        $type?: MemoryType;
+      }
+    | undefined;
 
   constructor() {
+    this.#filters = undefined;
+
     eventManager.on({
       AuthLogout: () => this.clearCache(),
       AuthUserLoaded: () => this.initialize(),
@@ -37,6 +57,20 @@ class MemoryManager {
     this.scheduleHourlyRefresh();
   }
 
+  get filters() {
+    return this.#filters;
+  }
+
+  set filters(filters) {
+    this.#filters = filters;
+    this.clearCache();
+    if (this.#loading === undefined) {
+      this.#loading = this.load();
+    } else {
+      void this.#loading.then(() => (this.#loading = this.load()));
+    }
+  }
+
   ready() {
     return this.initialize();
   }
@@ -131,8 +165,10 @@ class MemoryManager {
   }
 
   private async load() {
-    const memories = await searchMemories({ $for: asLocalTimeISO(DateTime.now()) });
-    this.memories = memories.filter((memory) => memory.assets.length > 0);
+    if (this.#filters !== undefined) {
+      const memories = await searchMemories(this.#filters);
+      this.memories = memories.filter((memory) => memory.assets.length > 0);
+    }
   }
 
   private scheduleHourlyRefresh() {

web/src/lib/utils.ts

@@ -20,12 +20,13 @@ import {
   type UserResponseDto,
 } from '@immich/sdk';
 import { toastManager, type ActionItem, type IfLike } from '@immich/ui';
+import { DateTime } from 'luxon';
 import { init, register, t } from 'svelte-i18n';
 import { derived, get } from 'svelte/store';
 import { defaultLang, locales } from '$lib/constants';
 import { authManager } from '$lib/managers/auth-manager.svelte';
 import { downloadManager } from '$lib/managers/download-manager.svelte';
-import { alwaysLoadOriginalFile, lang } from '$lib/stores/preferences.store';
+import { alwaysLoadOriginalFile, lang, locale } from '$lib/stores/preferences.store';
 import { isWebCompatibleImage } from '$lib/utils/asset-utils';
 import { handleError } from '$lib/utils/handle-error';
 import { langs } from '$lib/utils/i18n';
@@ -358,9 +359,13 @@ export const handlePromiseError = <T>(promise: Promise<T>): void => {
 
 export const memoryLaneTitle = derived(t, ($t) => {
   return (memory: MemoryResponseDto) => {
-    const now = new Date();
     if (memory.type === MemoryType.OnThisDay) {
-      return $t('years_ago', { values: { years: now.getFullYear() - memory.data.year } });
+      const now = new Date();
+      const memoryDate = new Date(memory.memoryAt);
+
+      return memoryDate.getUTCDate() === now.getDate() && memoryDate.getUTCMonth() === now.getMonth()
+        ? $t('years_ago', { values: { years: now.getFullYear() - memory.data.year } })
+        : DateTime.fromJSDate(memoryDate).toLocaleString(DateTime.DATE_MED, { locale: get(locale) });
     }
 
     return $t('unknown');

web/src/routes/(user)/explore/+page.svelte

@@ -6,10 +6,10 @@
   import SingleGridRow from '$lib/components/shared-components/SingleGridRow.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { Route } from '$lib/route';
-  import { getAssetMediaUrl, getPeopleThumbnailUrl } from '$lib/utils';
+  import { getAssetMediaUrl, getPeopleThumbnailUrl, memoryLaneTitle } from '$lib/utils';
   import { getAssetInfo, AssetMediaSize, type SearchExploreResponseDto } from '@immich/sdk';
   import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { Icon } from '@immich/ui';
+  import { Icon, ImageCarousel } from '@immich/ui';
   import { mdiHeart } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -28,13 +28,22 @@
     return targetField?.items || [];
   };
 
-  let places = $derived(getFieldItems(data.items, 'exifInfo.city'));
+  let places = $derived(getFieldItems(data.explore, 'exifInfo.city'));
   let recents = $derived(
-    getFieldItems(data.items, 'createdAt').sort((a, b) => new Date(b.value).getTime() - new Date(a.value).getTime()),
+    getFieldItems(data.explore, 'createdAt').sort((a, b) => new Date(b.value).getTime() - new Date(a.value).getTime()),
+  );
+  let people = $state(data.people.people);
+  let memories = $derived(
+    data.memories.map((memory) => ({
+      id: memory.id,
+      title: $memoryLaneTitle(memory),
+      href: Route.memories({ id: memory.assets[0].id }),
+      alt: $t('memory_lane_title', { values: { title: $getAltText(toTimelineAsset(memory.assets[0])) } }),
+      src: getAssetMediaUrl({ id: memory.assets[0].id }),
+    })),
   );
-  let people = $state(data.response.people);
 
-  let hasPeople = $derived(data.response.total > 0);
+  let hasPeople = $derived(data.people.total > 0);
 
   const onPersonThumbnailReady = ({ id }: { id: string }) => {
     for (const person of people) {
@@ -124,6 +133,20 @@
     </div>
   {/if}
 
+  {#if memories.length > 0}
+    <div class="mt-2 mb-6">
+      <div class="flex justify-between">
+        <p class="mb-4 font-medium dark:text-immich-dark-fg">{$t('memories')}</p>
+        <a
+          href={Route.memories()}
+          class="pe-4 text-sm font-medium hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
+          draggable="false">{$t('view_all')}</a
+        >
+      </div>
+      <ImageCarousel items={memories} />
+    </div>
+  {/if}
+
   {#if recents.length > 0}
     <div class="mt-2 mb-6">
       <div class="flex justify-between">

web/src/routes/(user)/explore/+page.ts

@@ -1,16 +1,24 @@
-import { getAllPeople, getExploreData } from '@immich/sdk';
+import { getAllPeople, getExploreData, MemorySearchOrder } from '@immich/sdk';
+import { memoryManager } from '$lib/managers/memory-manager.svelte';
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
   await authenticate(url);
-  const [items, response] = await Promise.all([getExploreData(), getAllPeople({ withHidden: false })]);
+  memoryManager.filters = { size: 12, order: MemorySearchOrder.Desc };
+
+  const [explore, people] = await Promise.all([
+    getExploreData(),
+    getAllPeople({ withHidden: false }),
+    memoryManager.ready(),
+  ]);
   const $t = await getFormatter();
 
   return {
-    items,
-    response,
+    explore,
+    people,
+    memories: memoryManager.memories,
     meta: {
       title: $t('explore'),
     },

web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,5 +1,81 @@
-<script>
+<script lang="ts">
+  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import type { PageData } from './$types';
+  import { Route } from '$lib/route';
+  import { getAssetMediaUrl, memoryLaneTitle } from '$lib/utils';
+  import { t } from 'svelte-i18n';
+  import { mdiHeartOutline, mdiHeart } from '@mdi/js';
+  import { Button, Icon } from '@immich/ui';
+  import { locale } from '$lib/stores/preferences.store';
+  import { getAltText } from '$lib/utils/thumbnail-util';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { page } from '$app/state';
   import MemoryViewer from './MemoryViewer.svelte';
+  import { QueryParameter } from '$lib/constants';
+  import { memoryManager } from '$lib/managers/memory-manager.svelte';
+  import { clearQueryParam, setQueryValue } from '$lib/utils/navigation';
+
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
+
+  let memories = $derived(data.memories);
+  let onlyFavorites = $state(page.url.searchParams.get('favorites') === 'true');
+
+  const toggleFavorites = async () => {
+    onlyFavorites = !onlyFavorites;
+    memoryManager.filters = onlyFavorites ? { isSaved: true } : {};
+    await memoryManager.ready();
+    memories = memoryManager.memories;
+
+    if (onlyFavorites) {
+      void setQueryValue('favorites', 'true');
+    } else {
+      void clearQueryParam('favorites', page.url);
+    }
+  };
 </script>
 
-<MemoryViewer />
+{#if page.url.searchParams.has(QueryParameter.ID)}
+  <MemoryViewer />
+{:else}
+  <UserPageLayout title={data.meta.title} description={`(${memories.length.toLocaleString($locale)})`}>
+    {#snippet buttons()}
+      <div class="flex place-items-center gap-2">
+        <Button
+          leadingIcon={mdiHeartOutline}
+          size="small"
+          variant={onlyFavorites ? 'filled' : 'ghost'}
+          color="secondary"
+          onclick={() => toggleFavorites()}>{$t('only_favorites')}</Button
+        >
+      </div>
+    {/snippet}
+    {#if memories.length > 0}
+      <div class="grid w-full grid-cols-2 gap-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-7">
+        {#each memories as memory (memory.id)}
+          <a href={Route.memories({ id: memory.assets[0].id })} class="item-card relative inline-block aspect-video">
+            {#if memory.isSaved}
+              <div class="absolute inset-s-2 top-2 z-2">
+                <Icon data-icon-favorite icon={mdiHeart} size="24" class="text-white" />
+              </div>
+            {/if}
+            <img
+              src={getAssetMediaUrl({ id: memory.assets[0].id })}
+              alt={$getAltText(toTimelineAsset(memory.assets[0]))}
+              class="size-full object-cover brightness-75"
+              loading="lazy"
+            />
+            <span
+              class="absolute bottom-2 w-full px-1 text-center text-sm font-medium text-ellipsis text-white capitalize backdrop-blur-[1px] hover:cursor-pointer"
+            >
+              {$memoryLaneTitle(memory)}
+            </span>
+          </a>
+        {/each}
+      </div>
+    {:else}{/if}
+  </UserPageLayout>
+{/if}

web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,3 +1,6 @@
+import { isEqual } from 'lodash-es';
+import { QueryParameter } from '$lib/constants';
+import { memoryManager } from '$lib/managers/memory-manager.svelte';
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
@@ -6,10 +9,20 @@ export const load = (async ({ url }) => {
   const user = await authenticate(url);
   const $t = await getFormatter();
 
+  const filters = url.searchParams.get('favorites') === 'true' ? { isSaved: true } : {};
+  if (
+    !(url.searchParams.has(QueryParameter.ID) && memoryManager.memories.length > 0) &&
+    !isEqual(memoryManager.filters, filters)
+  ) {
+    memoryManager.filters = filters;
+    await memoryManager.ready();
+  }
+
   return {
     user,
+    memories: memoryManager.memories,
     meta: {
-      title: $t('memory'),
+      title: $t('memories'),
     },
   };
 }) satisfies PageLoad;

web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte

@@ -82,6 +82,7 @@
   let progressBarController: Tween<number> | undefined = $state(undefined);
   let videoPlayer: HTMLVideoElement | undefined = $state();
   const asHref = (asset: { id: string }) => `?${QueryParameter.ID}=${asset.id}`;
+  let previousPage = $state(Route.memories());
 
   const handleNavigate = async (asset?: { id: string }) => {
     if (assetViewerManager.isViewing) {
@@ -106,7 +107,7 @@
   const handlePreviousAsset = () => handleNavigate(current?.previous?.asset);
   const handleNextMemory = () => handleNavigate(current?.nextMemory?.assets[0]);
   const handlePreviousMemory = () => handleNavigate(current?.previousMemory?.assets[0]);
-  const handleEscape = async () => goto(Route.photos());
+  const handleEscape = async () => goto(previousPage);
   const handleSelectAll = () =>
     assetMultiSelectManager.selectAssets(current?.memory.assets.map((a) => toTimelineAsset(a)) || []);
 
@@ -249,7 +250,7 @@
 
   const init = (target: Page | NavigationTarget | null) => {
     if (memoryManager.memories.length === 0) {
-      return handlePromiseError(goto(Route.photos()));
+      return handlePromiseError(goto(previousPage));
     }
 
     current = loadFromParams(target);
@@ -281,6 +282,10 @@
   };
 
   afterNavigate(({ from, to }) => {
+    if (from?.url !== null && !from?.url.searchParams.has(QueryParameter.ID)) {
+      previousPage = from!.url.toString();
+    }
+
     memoryManager.ready().then(
       () => {
         let target;
@@ -381,7 +386,7 @@
             icon={mdiClose}
             aria-label={$t('close')}
             size="large"
-            onclick={() => goto(Route.photos())}
+            onclick={() => goto(previousPage)}
           />
           <p class="text-lg">
             {$memoryLaneTitle(current.memory)}

web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte

@@ -33,12 +33,14 @@
     type OnLink,
     type OnUnlink,
   } from '$lib/utils/actions';
+  import { asLocalTimeISO } from '$lib/utils/date-time';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { getAltText } from '$lib/utils/thumbnail-util';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { AssetVisibility } from '@immich/sdk';
   import { ActionButton, CommandPaletteDefaultProvider, ImageCarousel } from '@immich/ui';
   import { mdiDotsVertical } from '@mdi/js';
+  import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
 
   let timelineManager = $state<TimelineManager>() as TimelineManager;
@@ -81,6 +83,10 @@
     assetMultiSelectManager.clear();
   };
 
+  if (memoryManager.filters === undefined || memoryManager.filters.$for !== asLocalTimeISO(DateTime.now())) {
+    memoryManager.filters = { $for: asLocalTimeISO(DateTime.now()) };
+  }
+
   const items = $derived(
     memoryManager.memories.map((memory) => ({
       id: memory.id,

web/src/routes/(user)/workflows/[workflowId]/+page.svelte

@@ -45,9 +45,9 @@
   import { cloneDeep, isEqual } from 'lodash-es';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import WorkflowStepCard from '$lib/components/workflows/WorkflowStepCard.svelte';
-  import WorkflowJsonEditor from '$lib/components/workflows/WorkflowJsonEditor.svelte';
-  import WorkflowSummary from '$lib/components/workflows/WorkflowSummary.svelte';
+  import WorkflowJsonEditor from './WorkflowJsonEditor.svelte';
+  import WorkflowStepCard from './WorkflowStepCard.svelte';
+  import WorkflowSummary from './WorkflowSummary.svelte';
 
   type WorkflowJsonContent = Required<
     Pick<WorkflowUpdateDto, 'description' | 'enabled' | 'name' | 'steps' | 'trigger'>