diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index ba2e1da..ee63ff8 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -1,7 +1,7 @@ diff --git a/frontend/src/lib/components/Dialog/CreateOrEditProfileModal.svelte b/frontend/src/lib/components/Dialog/CreateOrEditProfileModal.svelte index e10afd0..ffb3b7f 100644 --- a/frontend/src/lib/components/Dialog/CreateOrEditProfileModal.svelte +++ b/frontend/src/lib/components/Dialog/CreateOrEditProfileModal.svelte @@ -8,10 +8,9 @@ import Button from '../Button/Button.svelte'; import Container from '../Container.svelte'; import IconToggle from '../IconToggle.svelte'; - import { createModal, modalStack } from '../Modal/modal.store'; import ProfileIcon from '../ProfileIcon.svelte'; import SelectField from '../SelectField.svelte'; - import { navigate } from '../StackRouter/stack-router.store'; + import { navigate, useComponentStack } from '../StackRouter/stack-router.store'; import { useTabs } from '../Tab/Tab'; import Tab from '../Tab/Tab.svelte'; import TextField from '../TextField.svelte'; @@ -26,7 +25,7 @@ ProfilePictures } - export let modalId: symbol; + const { close, push } = useComponentStack(); export let user: ReiverrUser | undefined = undefined; export let onComplete: () => void = () => {}; @@ -130,7 +129,7 @@ if (error) { errorMessage = error; } else { - modalStack.closeTopmost(); + close(); onComplete(); } } @@ -149,7 +148,7 @@ if (error) { errorMessage = error; } else { - modalStack.closeTopmost(); + close(); onComplete(); } } @@ -164,7 +163,7 @@ if (error) { errorMessage = error; } else { - modalStack.close(modalId); + close(); if (self) { sessions.removeSession(); navigate('/'); @@ -230,10 +229,13 @@ type="primary-dark" icon={Trash} on:clickOrSelect={() => - createModal(ConfirmDialog, { - header: 'Delete Account', - body: 'Are you sure you want to delete your account?', - confirm: handleDeleteAccount + push({ + component: ConfirmDialog, + props: { + header: 'Delete Account', + body: 'Are you sure you want to delete your account?', + confirm: handleDeleteAccount + } })} > Delete Account diff --git a/frontend/src/lib/components/Dialog/SelectDialog.svelte b/frontend/src/lib/components/Dialog/SelectDialog.svelte index 2a7dd88..8f41e59 100644 --- a/frontend/src/lib/components/Dialog/SelectDialog.svelte +++ b/frontend/src/lib/components/Dialog/SelectDialog.svelte @@ -2,7 +2,9 @@ import Dialog from '../Dialog/Dialog.svelte'; import type { JellyfinUser } from '../../apis/jellyfin/jellyfin-api'; import SelectItem from '../SelectItem.svelte'; - import { modalStack } from '../Modal/modal.store'; + import { useComponentStack } from '../StackRouter/stack-router.store'; + + const { close } = useComponentStack(); // TODO: Add labels to the options export let title: string = 'Select'; @@ -11,11 +13,9 @@ export let selectedOption: string | undefined = undefined; export let handleSelectOption: (option: string) => void; - export let modalId: symbol; - function handleSelect(option: string) { handleSelectOption(option); - modalStack.close(modalId); + close(); } diff --git a/frontend/src/lib/components/Integrations/TmdbIntegrationConnectDialog.svelte b/frontend/src/lib/components/Integrations/TmdbIntegrationConnectDialog.svelte index 5881978..51e8421 100644 --- a/frontend/src/lib/components/Integrations/TmdbIntegrationConnectDialog.svelte +++ b/frontend/src/lib/components/Integrations/TmdbIntegrationConnectDialog.svelte @@ -1,9 +1,11 @@ - modalStack.closeTopmost()} /> + close()} /> diff --git a/frontend/src/lib/components/Modal/ModalStack.svelte b/frontend/src/lib/components/Modal/ModalStack.svelte deleted file mode 100644 index 483743d..0000000 --- a/frontend/src/lib/components/Modal/ModalStack.svelte +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - {#if $modalStackTop} - - {/if} - - -{#each $modalStack as modal (modal.id)} - {@const hidden = $modalStackTop?.group === modal.group && $modalStackTop?.id !== modal.id} - -
- -
-{/each} diff --git a/frontend/src/lib/components/Modal/modal.store.ts b/frontend/src/lib/components/Modal/modal.store.ts index fcd5daa..13c9598 100644 --- a/frontend/src/lib/components/Modal/modal.store.ts +++ b/frontend/src/lib/components/Modal/modal.store.ts @@ -1,82 +1,14 @@ -import { _createStoreContext, createStoreContext } from '$lib/utils'; import type { ComponentType, SvelteComponentTyped } from 'svelte'; -import { derived, get, writable } from 'svelte/store'; -import { useComponentStack } from '../ComponentStack/component-stack.store'; +import { stackRouter } from '../StackRouter/stack-router.store'; -type ModalItem = { - id: symbol; - group: symbol; - component: ComponentType; - props: Record; -}; - -function createModalStack() { - const items = writable([]); - const top = derived(items, ($items) => $items[$items.length - 1]); - - function close(symbol: symbol) { - items.update((prev) => prev.filter((i) => i.id !== symbol)); - } - - function closeGroup(group: symbol) { - items.update((prev) => prev.filter((i) => i.group !== group)); - } - - function create

>( - component: ComponentType>, - props: Omit, - group: symbol | undefined = undefined - ) { - const id = Symbol(); - const item = { id, component, props, group: group || id }; - items.update((prev) => [...prev, item]); - return id; - } - - function reset() { - items.set([]); - } - - function closeTopmost() { - const t = get(top); - if (t) { - close(t.id); - } - } - - return { - subscribe: items.subscribe, - top: { - subscribe: top.subscribe - }, - create, - close, - closeGroup, - closeTopmost, - reset - }; -} - -export const modalStack = useComponentStack(); -export const modalStackTop = modalStack.top; export const createModal = >( component: ComponentType>, - props: Omit, - group?: symbol + props: T, + group?: symbol | 'top' ) => { - const id = Symbol(); - return modalStack.push({ - id, + return stackRouter.push({ component, - // @ts-ignore - props: { - ...props, - modalId: id, - groupId: group - } + props, + group }); }; - -// export const modalStackContext = _createStoreContext('modal-stack', () => modalStack, { -// required: true -// }); diff --git a/frontend/src/lib/components/OnboardingDialog/OnboardingDialog.svelte b/frontend/src/lib/components/OnboardingDialog/OnboardingDialog.svelte index 4c7cdf6..c92813d 100644 --- a/frontend/src/lib/components/OnboardingDialog/OnboardingDialog.svelte +++ b/frontend/src/lib/components/OnboardingDialog/OnboardingDialog.svelte @@ -6,8 +6,6 @@ import { navigate } from '../StackRouter/stack-router.store'; import { user } from '$lib/stores/user.store'; - export let modalId: symbol; - async function finalizeSetup() { await user.updateUser((prev) => ({ ...prev, diff --git a/frontend/src/lib/components/StackRouter/StackRouter.svelte b/frontend/src/lib/components/StackRouter/StackRouter.svelte index c97b88e..042c453 100644 --- a/frontend/src/lib/components/StackRouter/StackRouter.svelte +++ b/frontend/src/lib/components/StackRouter/StackRouter.svelte @@ -7,6 +7,16 @@ + + {#if $stack[$stack.length - 1]?.preventScroll} + + {/if} + + {#each $stack as page, index (page.id)} {@const nextPage = $stack[index + 1]} {@const lastPage = $stack[$stack.length - 1]} diff --git a/frontend/src/lib/components/StackRouter/stack-router.store.ts b/frontend/src/lib/components/StackRouter/stack-router.store.ts index 21ebf11..dc73f05 100644 --- a/frontend/src/lib/components/StackRouter/stack-router.store.ts +++ b/frontend/src/lib/components/StackRouter/stack-router.store.ts @@ -324,6 +324,17 @@ export function useStackRouter({ } }; + const push = = Record>( + opts: CreateCompStackPage + ) => { + const currentGroup = groups[historyState.end]; + if (!currentGroup) { + throw new Error('No group to push to'); + } + currentGroup.push(opts); + updateVisibleStack(); + }; + const back = () => { if (historyState.end === 0) return; @@ -333,6 +344,7 @@ export function useStackRouter({ return { subscribe: visibleStack.subscribe, navigate, + push, back, handlePopState }; diff --git a/frontend/src/lib/components/VideoPlayer/SelectAudioModal.svelte b/frontend/src/lib/components/VideoPlayer/SelectAudioModal.svelte index bec0f90..523240a 100644 --- a/frontend/src/lib/components/VideoPlayer/SelectAudioModal.svelte +++ b/frontend/src/lib/components/VideoPlayer/SelectAudioModal.svelte @@ -1,13 +1,13 @@ -

+

Audio @@ -25,7 +25,7 @@ {#each audioTracks || [] as track}