fix scrubber

web/src/lib/components/i18n/__test__/format-message.spec.ts

@@ -57,15 +57,15 @@ describe('FormatMessage component', () => {
       key: 'html' as Translations,
       values: { name: 'test' },
     });
-    expect(container.innerHTML).toBe('Hello <strong>test</strong>');
+    expect(container.innerHTML).toBe('<!----><!---->Hello <!----><!----><!----><strong>test</strong>');
   });
 
   it('renders a message with html and plural', () => {
     const { container } = render(FormatTagB, {
       key: 'plural' as Translations,
       values: { count: 1 },
     });
-    expect(container.innerHTML).toBe('You have <strong>1 item</strong>');
+    expect(container.innerHTML).toBe('<!----><!---->You have <!----><!----><!----><strong>1 item</strong>');
   });
 
   it('protects agains XSS injection', () => {
@@ -85,22 +85,22 @@ describe('FormatMessage component', () => {
       key: 'plural_with_html' as Translations,
       values: { count: 10 },
     });
-    expect(container.innerHTML).toBe('You have <strong>10</strong> items');
+    expect(container.innerHTML).toBe('<!----><!---->You have <!----><!----><!----><strong>10</strong><!----> items');
   });
 
   it('supports html tags inside select', () => {
     const { container } = render(FormatTagB, {
       key: 'select_with_html' as Translations,
       values: { status: true },
     });
-    expect(container.innerHTML).toBe('Item is <strong>disabled</strong>');
+    expect(container.innerHTML).toBe('<!----><!---->Item is <!----><!----><!----><strong>disabled</strong>');
   });
 
   it('supports html tags inside selectordinal', () => {
     const { container } = render(FormatTagB, {
       key: 'ordinal_with_html' as Translations,
       values: { count: 4 },
     });
-    expect(container.innerHTML).toBe('<strong>4th</strong> item');
+    expect(container.innerHTML).toBe('<!----><!----><!----><!----><strong>4th</strong><!----> item');
   });
 });

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

@@ -755,7 +755,7 @@
 {#if showShortcuts}
   <ShowShortcuts onClose={() => (showShortcuts = !showShortcuts)} />
 {/if}
-{#if assetStore.buckets.length > 0}
+{#if $assetStore.buckets.length > 0}
   <Scrubber
     invisible={showSkeleton}
     {assetStore}

web/src/lib/components/shared-components/__test__/number-range-input.spec.ts

@@ -1,27 +1,25 @@
 import NumberRangeInput from '$lib/components/shared-components/number-range-input.svelte';
-import { act, render, type RenderResult } from '@testing-library/svelte';
+import { render, type RenderResult } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 
 describe('NumberRangeInput component', () => {
   const user = userEvent.setup();
   let sut: RenderResult<NumberRangeInput>;
   let input: HTMLInputElement;
-  const props: { id: string; min: number; max: number; onInput: () => void; value: number | null } = $state({
-    id: '',
-    min: -90,
-    max: 90,
-    onInput: () => {},
-    value: null,
-  });
 
   beforeEach(() => {
-    sut = render(NumberRangeInput, props);
+    sut = render(NumberRangeInput, {
+      id: '',
+      min: -90,
+      max: 90,
+      onInput: () => {},
+    });
     input = sut.getByRole('spinbutton') as HTMLInputElement;
   });
 
   it('updates value', async () => {
     expect(input.value).toBe('');
-    await act(() => (props.value = 10));
+    await sut.rerender({ value: 10 });
     expect(input.value).toBe('10');
   });
 

web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts

@@ -79,6 +79,6 @@ describe('NotificationCard component', () => {
     });
 
     expect(sut.getByTestId('title')).toHaveTextContent('info');
-    expect(sut.getByTestId('message').innerHTML).toEqual('Notification <b>message</b> with <a href="link">link</a>');
+    expect(sut.getByTestId('message').innerHTML).toEqual('<!---->Notification <b>message</b> with <a href="link">link</a><!---->');
   });
 });

web/src/lib/components/shared-components/notification/notification.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, Component as ComponentType } from 'svelte';
+import type { Component as ComponentType } from 'svelte';
 import { writable } from 'svelte/store';
 
 export enum NotificationType {
@@ -28,24 +28,26 @@ type NoopAction = { type: 'noop' };
 
 export type NotificationAction = DiscardAction | NoopAction;
 
-type Component<T extends ComponentType> = {
-  type: T;
-  props: ComponentProps<T>;
+type Props = Record<string, unknown>;
+type Component<T extends Props> = {
+  type: ComponentType<T>;
+  props: T;
 };
 
 type BaseNotificationOptions<T, R extends keyof T> = Partial<Omit<T, 'id'>> & Pick<T, R>;
 
 export type NotificationOptions = BaseNotificationOptions<Notification, 'message'>;
-export type ComponentNotificationOptions<T extends ComponentType> = BaseNotificationOptions<
+export type ComponentNotificationOptions<T extends Props> = BaseNotificationOptions<
   ComponentNotification<T>,
   'component'
 >;
 
-export type ComponentNotification<T extends ComponentType = ComponentType> = Omit<Notification, 'message'> & {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ComponentNotification<T extends Props = any> = Omit<Notification, 'message'> & {
   component: Component<T>;
 };
 
-export const isComponentNotification = <T extends ComponentType>(
+export const isComponentNotification = <T extends Props>(
   notification: Notification | ComponentNotification<T>,
 ): notification is ComponentNotification<T> => {
   return 'component' in notification;
@@ -55,7 +57,7 @@ function createNotificationList() {
   const notificationList = writable<(Notification | ComponentNotification)[]>([]);
   let count = 1;
 
-  const show = <T>(options: T extends ComponentType ? ComponentNotificationOptions<T> : NotificationOptions) => {
+  const show = <T>(options: T extends Props ? ComponentNotificationOptions<T> : NotificationOptions) => {
     notificationList.update((currentList) => {
       currentList.push({
         id: count++,