From 203cbbbfdb16b50bed7a09761feb7baf0b578df8 Mon Sep 17 00:00:00 2001
From: Snowknight26 <Snowknight26@users.noreply.github.com>
Date: Sat, 1 Jun 2024 21:57:04 -0500
Subject: [PATCH 1/4] fix(web): stop slideshow when pressing escape from asset
 viewer (#9929)

* fix(web): stop slideshow when pressing escape from asset viewer

* Fix formatting
---
 .../lib/components/asset-viewer/asset-viewer.svelte    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 58ba9db425..f5fe57f24b 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -273,10 +273,12 @@
   };
 
   const closeViewer = async () => {
-    $slideshowState = SlideshowState.StopSlideshow;
-    document.body.style.cursor = '';
-    dispatch('close');
-    await navigate({ targetRoute: 'current', assetId: null });
+    if ($slideshowState === SlideshowState.None) {
+      dispatch('close');
+      await navigate({ targetRoute: 'current', assetId: null });
+    } else {
+      $slideshowState = SlideshowState.StopSlideshow;
+    }
   };
 
   const navigateAssetRandom = async () => {

From 5af67d159f8f9f206b0a5a69cd2bcd7996de6c67 Mon Sep 17 00:00:00 2001
From: Jacob Watson <jacobwatson100@gmail.com>
Date: Sun, 2 Jun 2024 22:11:45 +1000
Subject: [PATCH 2/4] fix(web): disable bulk action buttons while items
 selected (#9938)

fix(web):disabled bulk action buttons while items selected
---
 .../trash/[[photos=photos]]/[[assetId=id]]/+page.svelte       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 21616b441b..cf5edaae34 100644
--- a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -97,13 +97,13 @@
 {#if $featureFlags.loaded && $featureFlags.trash}
   <UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
     <div class="flex place-items-center gap-2" slot="buttons">
-      <LinkButton on:click={handleRestoreTrash}>
+      <LinkButton on:click={handleRestoreTrash} disabled={$isMultiSelectState}>
         <div class="flex place-items-center gap-2 text-sm">
           <Icon path={mdiHistory} size="18" />
           Restore all
         </div>
       </LinkButton>
-      <LinkButton on:click={() => handleEmptyTrash()}>
+      <LinkButton on:click={() => handleEmptyTrash()} disabled={$isMultiSelectState}>
         <div class="flex place-items-center gap-2 text-sm">
           <Icon path={mdiDeleteOutline} size="18" />
           Empty trash

From d1135db8cf33901aee6449a6029480198099afa3 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Sun, 2 Jun 2024 14:20:11 +0200
Subject: [PATCH 3/4] refactor(web): remove events from clickOutside action
 (#9943)

---
 web/src/lib/actions/click-outside.ts            | 17 ++---------------
 .../album-page/share-info-modal.svelte          |  2 +-
 .../asset-viewer/activity-viewer.svelte         |  6 ++----
 .../components/asset-viewer/asset-viewer.svelte |  1 -
 web/src/lib/components/elements/dropdown.svelte |  2 +-
 .../components/faces-page/people-card.svelte    |  2 +-
 .../photos-page/actions/delete-assets.svelte    | 11 -----------
 .../asset-select-context-menu.svelte            |  2 +-
 .../context-menu/context-menu.svelte            |  5 ++---
 .../right-click-context-menu.svelte             |  9 +--------
 .../navigation-bar/navigation-bar.svelte        |  7 ++++---
 .../[[assetId=id]]/+page.svelte                 |  2 +-
 .../(user)/photos/[[assetId=id]]/+page.svelte   | 11 +----------
 .../admin/library-management/+page.svelte       |  2 +-
 14 files changed, 18 insertions(+), 61 deletions(-)

diff --git a/web/src/lib/actions/click-outside.ts b/web/src/lib/actions/click-outside.ts
index ddb648a4f2..bbcb0c405b 100644
--- a/web/src/lib/actions/click-outside.ts
+++ b/web/src/lib/actions/click-outside.ts
@@ -1,19 +1,12 @@
 import { matchesShortcut } from '$lib/actions/shortcut';
 import type { ActionReturn } from 'svelte/action';
 
-interface Attributes {
-  /** @deprecated */
-  'on:outclick'?: (e: CustomEvent) => void;
-  /** @deprecated **/
-  'on:escape'?: (e: CustomEvent) => void;
-}
-
 interface Options {
   onOutclick?: () => void;
   onEscape?: () => void;
 }
 
-export function clickOutside(node: HTMLElement, options: Options = {}): ActionReturn<void, Attributes> {
+export function clickOutside(node: HTMLElement, options: Options = {}): ActionReturn {
   const { onOutclick, onEscape } = options;
 
   const handleClick = (event: MouseEvent) => {
@@ -22,11 +15,7 @@ export function clickOutside(node: HTMLElement, options: Options = {}): ActionRe
       return;
     }
 
-    if (onOutclick) {
-      onOutclick();
-    } else {
-      node.dispatchEvent(new CustomEvent('outclick'));
-    }
+    onOutclick?.();
   };
 
   const handleKey = (event: KeyboardEvent) => {
@@ -37,8 +26,6 @@ export function clickOutside(node: HTMLElement, options: Options = {}): ActionRe
     if (onEscape) {
       event.stopPropagation();
       onEscape();
-    } else {
-      node.dispatchEvent(new CustomEvent('escape'));
     }
   };
 
diff --git a/web/src/lib/components/album-page/share-info-modal.svelte b/web/src/lib/components/album-page/share-info-modal.svelte
index 6856b0b357..be47f4e258 100644
--- a/web/src/lib/components/album-page/share-info-modal.svelte
+++ b/web/src/lib/components/album-page/share-info-modal.svelte
@@ -126,7 +126,7 @@
                 />
 
                 {#if selectedMenuUser === user}
-                  <ContextMenu {...position} on:outclick={() => (selectedMenuUser = null)}>
+                  <ContextMenu {...position} onClose={() => (selectedMenuUser = null)}>
                     {#if role === AlbumUserRole.Viewer}
                       <MenuOption on:click={() => handleSetReadonly(user, AlbumUserRole.Editor)} text="Allow edits" />
                     {:else}
diff --git a/web/src/lib/components/asset-viewer/activity-viewer.svelte b/web/src/lib/components/asset-viewer/activity-viewer.svelte
index 0e4b61080b..bb1a50c2f9 100644
--- a/web/src/lib/components/asset-viewer/activity-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/activity-viewer.svelte
@@ -201,8 +201,7 @@
                   <button
                     type="button"
                     class="absolute right-6 rounded-xl items-center bg-gray-300 dark:bg-slate-100 py-3 px-6 text-left text-sm font-medium text-immich-fg hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg dark:hover:bg-red-100 transition-colors"
-                    use:clickOutside
-                    on:outclick={() => (showDeleteReaction[index] = false)}
+                    use:clickOutside={{ onOutclick: () => (showDeleteReaction[index] = false) }}
                     on:click={() => handleDeleteReaction(reaction, index)}
                   >
                     Remove
@@ -254,8 +253,7 @@
                     <button
                       type="button"
                       class="absolute right-6 rounded-xl items-center bg-gray-300 dark:bg-slate-100 py-3 px-6 text-left text-sm font-medium text-immich-fg hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg dark:hover:bg-red-100 transition-colors"
-                      use:clickOutside
-                      on:outclick={() => (showDeleteReaction[index] = false)}
+                      use:clickOutside={{ onOutclick: () => (showDeleteReaction[index] = false) }}
                       on:click={() => handleDeleteReaction(reaction, index)}
                     >
                       Remove
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index f5fe57f24b..ad474f8f8d 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -795,7 +795,6 @@
       <DeleteAssetDialog
         size={1}
         on:cancel={() => (isShowDeleteConfirmation = false)}
-        on:escape={() => (isShowDeleteConfirmation = false)}
         on:confirm={() => deleteAsset()}
       />
     {/if}
diff --git a/web/src/lib/components/elements/dropdown.svelte b/web/src/lib/components/elements/dropdown.svelte
index 19c727ee6a..d98fb517af 100644
--- a/web/src/lib/components/elements/dropdown.svelte
+++ b/web/src/lib/components/elements/dropdown.svelte
@@ -72,7 +72,7 @@
   $: renderedSelectedOption = renderOption(selectedOption);
 </script>
 
-<div use:clickOutside on:outclick={handleClickOutside} on:escape={handleClickOutside}>
+<div use:clickOutside={{ onOutclick: handleClickOutside, onEscape: handleClickOutside }}>
   <!-- BUTTON TITLE -->
   <LinkButton on:click={() => (showMenu = true)} fullwidth {title}>
     <div class="flex place-items-center gap-2 text-sm">
diff --git a/web/src/lib/components/faces-page/people-card.svelte b/web/src/lib/components/faces-page/people-card.svelte
index caa9075cdc..1e508eca7e 100644
--- a/web/src/lib/components/faces-page/people-card.svelte
+++ b/web/src/lib/components/faces-page/people-card.svelte
@@ -87,7 +87,7 @@
 
 {#if showContextMenu}
   <Portal target="body">
-    <ContextMenu {...contextMenuPosition} on:outclick={() => onMenuExit()}>
+    <ContextMenu {...contextMenuPosition} onClose={() => onMenuExit()}>
       <MenuOption on:click={() => onMenuClick('hide-person')} icon={mdiEyeOffOutline} text="Hide person" />
       <MenuOption on:click={() => onMenuClick('change-name')} icon={mdiAccountEditOutline} text="Change name" />
       <MenuOption
diff --git a/web/src/lib/components/photos-page/actions/delete-assets.svelte b/web/src/lib/components/photos-page/actions/delete-assets.svelte
index 9d413ca7f6..2104203d97 100644
--- a/web/src/lib/components/photos-page/actions/delete-assets.svelte
+++ b/web/src/lib/components/photos-page/actions/delete-assets.svelte
@@ -2,7 +2,6 @@
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { createEventDispatcher } from 'svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { mdiTimerSand, mdiDeleteOutline } from '@mdi/js';
   import { type OnDelete, deleteAssets } from '$lib/utils/actions';
@@ -14,10 +13,6 @@
 
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
-  const dispatch = createEventDispatcher<{
-    escape: void;
-  }>();
-
   let isShowConfirmation = false;
   let loading = false;
 
@@ -40,11 +35,6 @@
     isShowConfirmation = false;
     loading = false;
   };
-
-  const escape = () => {
-    dispatch('escape');
-    isShowConfirmation = false;
-  };
 </script>
 
 {#if menuItem}
@@ -60,6 +50,5 @@
     size={getOwnedAssets().size}
     on:confirm={handleDelete}
     on:cancel={() => (isShowConfirmation = false)}
-    on:escape={escape}
   />
 {/if}
diff --git a/web/src/lib/components/photos-page/asset-select-context-menu.svelte b/web/src/lib/components/photos-page/asset-select-context-menu.svelte
index 808a2d9b1a..56c51e4a40 100644
--- a/web/src/lib/components/photos-page/asset-select-context-menu.svelte
+++ b/web/src/lib/components/photos-page/asset-select-context-menu.svelte
@@ -25,7 +25,7 @@
   setContext(() => (showContextMenu = false));
 </script>
 
-<div use:clickOutside on:outclick={() => (showContextMenu = false)}>
+<div use:clickOutside={{ onOutclick: () => (showContextMenu = false) }}>
   <CircleIconButton {title} {icon} on:click={handleShowMenu} />
   {#if showContextMenu}
     <ContextMenu {...contextMenuPosition}>
diff --git a/web/src/lib/components/shared-components/context-menu/context-menu.svelte b/web/src/lib/components/shared-components/context-menu/context-menu.svelte
index fc5b960fa5..1cd36a5675 100644
--- a/web/src/lib/components/shared-components/context-menu/context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/context-menu.svelte
@@ -8,6 +8,7 @@
   export let y = 0;
 
   export let menuElement: HTMLDivElement | undefined = undefined;
+  export let onClose: (() => void) | undefined = undefined;
 
   let left: number;
   let top: number;
@@ -36,9 +37,7 @@
   style:top="{top}px"
   style:left="{left}px"
   role="menu"
-  use:clickOutside
-  on:outclick
-  on:escape
+  use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}
 >
   <div class="flex flex-col rounded-lg">
     <slot />
diff --git a/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte b/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
index 30775d3ec5..4d7f38b5b2 100644
--- a/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte
@@ -49,14 +49,7 @@
       on:contextmenu|preventDefault={reopenContextMenu}
       role="presentation"
     >
-      <ContextMenu
-        {x}
-        {y}
-        {direction}
-        on:outclick={closeContextMenu}
-        on:escape={closeContextMenu}
-        bind:menuElement={contextMenuElement}
-      >
+      <ContextMenu {x} {y} {direction} onClose={closeContextMenu} bind:menuElement={contextMenuElement}>
         <slot />
       </ContextMenu>
     </section>
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index fc4cc58281..c7c5f9eb2d 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -114,9 +114,10 @@
         {/if}
 
         <div
-          use:clickOutside
-          on:outclick={() => (shouldShowAccountInfoPanel = false)}
-          on:escape={() => (shouldShowAccountInfoPanel = false)}
+          use:clickOutside={{
+            onOutclick: () => (shouldShowAccountInfoPanel = false),
+            onEscape: () => (shouldShowAccountInfoPanel = false),
+          }}
         >
           <button
             type="button"
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index f51d6ed4cb..9e62f2a5fa 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -467,7 +467,7 @@
               <CircleIconButton title="Download" on:click={handleDownloadAlbum} icon={mdiFolderDownloadOutline} />
 
               {#if isOwned}
-                <div use:clickOutside on:outclick={() => (viewMode = ViewMode.VIEW)}>
+                <div use:clickOutside={{ onOutclick: () => (viewMode = ViewMode.VIEW) }}>
                   <CircleIconButton title="Album options" on:click={handleOpenAlbumOptions} icon={mdiDotsVertical} />
                   {#if viewMode === ViewMode.ALBUM_OPTIONS}
                     <ContextMenu {...contextMenuPosition}>
diff --git a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
index d510edd25d..2aa8f5244e 100644
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@@ -25,7 +25,6 @@
   import { preferences, user } from '$lib/stores/user.store';
 
   let { isViewing: showAssetViewer } = assetViewingStore;
-  let handleEscapeKey = false;
   const assetStore = new AssetStore({ isArchived: false, withStacked: true, withPartners: true });
   const assetInteractionStore = createAssetInteractionStore();
   const { isMultiSelectState, selectedAssets } = assetInteractionStore;
@@ -43,10 +42,6 @@
     if ($showAssetViewer) {
       return;
     }
-    if (handleEscapeKey) {
-      handleEscapeKey = false;
-      return;
-    }
     if ($isMultiSelectState) {
       assetInteractionStore.clearMultiselect();
       return;
@@ -79,11 +74,7 @@
       <ChangeDate menuItem />
       <ChangeLocation menuItem />
       <ArchiveAction menuItem onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
-      <DeleteAssets
-        menuItem
-        on:escape={() => (handleEscapeKey = true)}
-        onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)}
-      />
+      <DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
       <hr />
       <AssetJobActions />
     </AssetSelectContextMenu>
diff --git a/web/src/routes/admin/library-management/+page.svelte b/web/src/routes/admin/library-management/+page.svelte
index 714c4f3710..c997f538c0 100644
--- a/web/src/routes/admin/library-management/+page.svelte
+++ b/web/src/routes/admin/library-management/+page.svelte
@@ -397,7 +397,7 @@
 
                   {#if showContextMenu}
                     <Portal target="body">
-                      <ContextMenu {...contextMenuPosition} on:outclick={() => onMenuExit()}>
+                      <ContextMenu {...contextMenuPosition} onClose={() => onMenuExit()}>
                         <MenuOption on:click={() => onRenameClicked()} text={`Rename`} />
 
                         {#if selectedLibrary}

From 1323c7ee88366760cf23b3c8ce6f4bccba6f33fa Mon Sep 17 00:00:00 2001
From: Ben <45583362+ben-basten@users.noreply.github.com>
Date: Sun, 2 Jun 2024 16:41:44 +0000
Subject: [PATCH 4/4] chore(web): simpler unique ID generation (#9945)

---
 .../components/shared-components/combobox.svelte |  4 ++--
 .../shared-components/full-screen-modal.svelte   |  4 ++--
 .../settings/setting-switch.svelte               |  4 ++--
 web/src/lib/stores/unique-id.store.spec.ts       | 14 --------------
 web/src/lib/stores/unique-id.store.ts            | 16 ----------------
 web/src/lib/utils/generate-id.ts                 |  2 ++
 6 files changed, 8 insertions(+), 36 deletions(-)
 delete mode 100644 web/src/lib/stores/unique-id.store.spec.ts
 delete mode 100644 web/src/lib/stores/unique-id.store.ts
 create mode 100644 web/src/lib/utils/generate-id.ts

diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte
index dc93ebb321..d924df486c 100644
--- a/web/src/lib/components/shared-components/combobox.svelte
+++ b/web/src/lib/components/shared-components/combobox.svelte
@@ -18,8 +18,8 @@
   import { shortcuts } from '$lib/actions/shortcut';
   import { clickOutside } from '$lib/actions/click-outside';
   import { focusOutside } from '$lib/actions/focus-outside';
+  import { generateId } from '$lib/utils/generate-id';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { uniqueIdStore } from '$lib/stores/unique-id.store';
 
   export let label: string;
   export let hideLabel = false;
@@ -30,7 +30,7 @@
   /**
    * Unique identifier for the combobox.
    */
-  let id: string = uniqueIdStore.generateId();
+  let id: string = generateId();
   /**
    * Indicates whether or not the dropdown autocomplete list should be visible.
    */
diff --git a/web/src/lib/components/shared-components/full-screen-modal.svelte b/web/src/lib/components/shared-components/full-screen-modal.svelte
index 7c86bd05d6..d0d629ee4d 100644
--- a/web/src/lib/components/shared-components/full-screen-modal.svelte
+++ b/web/src/lib/components/shared-components/full-screen-modal.svelte
@@ -3,7 +3,7 @@
   import { fade } from 'svelte/transition';
   import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
   import ModalHeader from '$lib/components/shared-components/modal-header.svelte';
-  import { uniqueIdStore } from '$lib/stores/unique-id.store';
+  import { generateId } from '$lib/utils/generate-id';
 
   export let onClose: () => void;
   export let title: string;
@@ -27,7 +27,7 @@
   /**
    * Unique identifier for the modal.
    */
-  let id: string = uniqueIdStore.generateId();
+  let id: string = generateId();
 
   $: titleId = `${id}-title`;
   $: isStickyBottom = !!$$slots['sticky-bottom'];
diff --git a/web/src/lib/components/shared-components/settings/setting-switch.svelte b/web/src/lib/components/shared-components/settings/setting-switch.svelte
index 2f6c3ba8b5..b2453fda27 100644
--- a/web/src/lib/components/shared-components/settings/setting-switch.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-switch.svelte
@@ -3,7 +3,7 @@
   import { fly } from 'svelte/transition';
   import { createEventDispatcher } from 'svelte';
   import Slider from '$lib/components/elements/slider.svelte';
-  import { uniqueIdStore } from '$lib/stores/unique-id.store';
+  import { generateId } from '$lib/utils/generate-id';
 
   export let title: string;
   export let subtitle = '';
@@ -11,7 +11,7 @@
   export let disabled = false;
   export let isEdited = false;
 
-  let id: string = uniqueIdStore.generateId();
+  let id: string = generateId();
 
   $: sliderId = `${id}-slider`;
   $: subtitleId = subtitle ? `${id}-subtitle` : undefined;
diff --git a/web/src/lib/stores/unique-id.store.spec.ts b/web/src/lib/stores/unique-id.store.spec.ts
deleted file mode 100644
index 4788b18304..0000000000
--- a/web/src/lib/stores/unique-id.store.spec.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { uniqueIdStore } from '$lib/stores/unique-id.store';
-
-describe('uniqueIdStore', () => {
-  afterEach(() => {
-    uniqueIdStore.update(() => -1);
-  });
-
-  it('should generate unique ids', () => {
-    const { generateId } = uniqueIdStore;
-    const ids = [generateId(), generateId(), generateId()];
-
-    expect(ids).toEqual(['id-0', 'id-1', 'id-2']);
-  });
-});
diff --git a/web/src/lib/stores/unique-id.store.ts b/web/src/lib/stores/unique-id.store.ts
deleted file mode 100644
index 949074c8f5..0000000000
--- a/web/src/lib/stores/unique-id.store.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { get, writable } from 'svelte/store';
-
-function createIdStore() {
-  const { subscribe, update } = writable(-1);
-
-  return {
-    subscribe,
-    update,
-    generateId: () => {
-      update((value) => value + 1);
-      return `id-${get(uniqueIdStore)}`;
-    },
-  };
-}
-
-export const uniqueIdStore = createIdStore();
diff --git a/web/src/lib/utils/generate-id.ts b/web/src/lib/utils/generate-id.ts
new file mode 100644
index 0000000000..466be1840c
--- /dev/null
+++ b/web/src/lib/utils/generate-id.ts
@@ -0,0 +1,2 @@
+let _count = 0;
+export const generateId = (): string => `id-${_count++}`;