chore(web): simpler unique ID generation (#9945)

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.
    */

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'];

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;

web/src/lib/stores/unique-id.store.spec.ts

@@ -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']);
-  });
-});

web/src/lib/stores/unique-id.store.ts

@@ -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();

web/src/lib/utils/generate-id.ts

@@ -0,0 +1,2 @@
+let _count = 0;
+export const generateId = (): string => `id-${_count++}`;