chore: refactor slide-show-settings modal (#18570)

* chore: refactor slide-show-settings modal

* fix: dropdown getting clipped in modals

* Revert "fix: dropdown getting clipped in modals"

This reverts commit 0120932a49f4768e1abb09d3bb2ee63b770ed767.

* fix: changed to show method

web/src/lib/components/asset-viewer/slideshow-bar.svelte

@@ -3,6 +3,7 @@
   import ProgressBar from '$lib/components/shared-components/progress-bar/progress-bar.svelte';
   import SlideshowSettings from '$lib/components/slideshow-settings.svelte';
   import { ProgressBarStatus } from '$lib/constants';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { SlideshowNavigation, slideshowStore } from '$lib/stores/slideshow.store';
   import { IconButton } from '@immich/ui';
   import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js';
@@ -31,7 +32,6 @@
 
   let progressBarStatus: ProgressBarStatus | undefined = $state();
   let progressBar = $state<ReturnType<typeof ProgressBar>>();
-  let showSettings = $state(false);
   let showControls = $state(true);
   let timer: NodeJS.Timeout;
   let isOverControls = $state(false);
@@ -99,11 +99,11 @@
     onNext();
   };
 
-  const onSettingToggled = async () => {
-    showSettings = !showSettings;
-    if (document.fullscreenElement && showSettings) {
+  const onShowSettings = async () => {
+    if (document.fullscreenElement) {
       await document.exitFullscreen();
     }
+    await modalManager.show(SlideshowSettings, {});
   };
 </script>
 
@@ -168,7 +168,7 @@
       shape="round"
       color="secondary"
       icon={mdiCog}
-      onclick={onSettingToggled}
+      onclick={onShowSettings}
       aria-label={$t('slideshow_settings')}
       class="text-white"
     />
@@ -185,9 +185,6 @@
     {/if}
   </div>
 {/if}
-{#if showSettings}
-  <SlideshowSettings onClose={() => (showSettings = false)} />
-{/if}
 
 <ProgressBar
   autoplay