From 09ced9a1717a8da8104d0c26f7de167053f9a1e0 Mon Sep 17 00:00:00 2001
From: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
Date: Wed, 7 May 2025 23:31:38 +0200
Subject: [PATCH] refactor: help modal (#18145)
---
.../navigation-bar/navigation-bar.svelte | 16 ++++------------
.../HelpAndFeedbackModal.svelte} | 19 +++++++++----------
2 files changed, 13 insertions(+), 22 deletions(-)
rename web/src/lib/{components/shared-components/help-and-feedback-modal.svelte => modals/HelpAndFeedbackModal.svelte} (94%)
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 53b90798d9..915b041d4e 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
@@ -6,12 +6,13 @@
import { page } from '$app/state';
import { clickOutside } from '$lib/actions/click-outside';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
- import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import NotificationPanel from '$lib/components/shared-components/navigation-bar/notification-panel.svelte';
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
import { AppRoute } from '$lib/constants';
import { authManager } from '$lib/managers/auth-manager.svelte';
+ import { modalManager } from '$lib/managers/modal-manager.svelte';
+ import HelpAndFeedbackModal from '$lib/modals/HelpAndFeedbackModal.svelte';
import { mobileDevice } from '$lib/stores/mobile-device.svelte';
import { notificationManager } from '$lib/stores/notification-manager.svelte';
import { featureFlags } from '$lib/stores/server-config.store';
@@ -35,7 +36,6 @@
let { showUploadButton = true, onUploadClick }: Props = $props();
let shouldShowAccountInfoPanel = $state(false);
- let shouldShowHelpPanel = $state(false);
let shouldShowNotificationPanel = $state(false);
let innerWidth: number = $state(0);
const hasUnreadNotifications = $derived(notificationManager.notifications.length > 0);
@@ -49,10 +49,6 @@
<svelte:window bind:innerWidth />
-{#if shouldShowHelpPanel && info}
- <HelpAndFeedbackModal onClose={() => (shouldShowHelpPanel = false)} {info} />
-{/if}
-
<nav id="dashboard-navbar" class="z-auto max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-dvw text-sm">
<SkipLink text={$t('skip_to_content')} />
<div
@@ -129,18 +125,14 @@
<ThemeButton padding="2" />
- <div
- use:clickOutside={{
- onEscape: () => (shouldShowHelpPanel = false),
- }}
- >
+ <div>
<IconButton
shape="round"
color="secondary"
variant="ghost"
size="medium"
icon={mdiHelpCircleOutline}
- onclick={() => (shouldShowHelpPanel = !shouldShowHelpPanel)}
+ onclick={() => info && modalManager.open(HelpAndFeedbackModal, { info })}
aria-label={$t('support_and_feedback')}
/>
</div>
diff --git a/web/src/lib/components/shared-components/help-and-feedback-modal.svelte b/web/src/lib/modals/HelpAndFeedbackModal.svelte
similarity index 94%
rename from web/src/lib/components/shared-components/help-and-feedback-modal.svelte
rename to web/src/lib/modals/HelpAndFeedbackModal.svelte
index 1dcb021d78..edc78b3bf4 100644
--- a/web/src/lib/components/shared-components/help-and-feedback-modal.svelte
+++ b/web/src/lib/modals/HelpAndFeedbackModal.svelte
@@ -1,11 +1,10 @@
<script lang="ts">
- import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
- import Portal from '$lib/components/shared-components/portal/portal.svelte';
- import { type ServerAboutResponseDto } from '@immich/sdk';
- import { t } from 'svelte-i18n';
- import Icon from '$lib/components/elements/icon.svelte';
- import { mdiBugOutline, mdiFaceAgent, mdiGit, mdiGithub, mdiInformationOutline } from '@mdi/js';
import { discordPath, discordViewBox } from '$lib/assets/svg-paths';
+ import Icon from '$lib/components/elements/icon.svelte';
+ import { type ServerAboutResponseDto } from '@immich/sdk';
+ import { Modal, ModalBody } from '@immich/ui';
+ import { mdiBugOutline, mdiFaceAgent, mdiGit, mdiGithub, mdiInformationOutline } from '@mdi/js';
+ import { t } from 'svelte-i18n';
interface Props {
onClose: () => void;
@@ -15,8 +14,8 @@
let { onClose, info }: Props = $props();
</script>
-<Portal>
- <FullScreenModal title={$t('support_and_feedback')} {onClose}>
+<Modal title={$t('support_and_feedback')} {onClose} size="small">
+ <ModalBody>
<p>{$t('official_immich_resources')}</p>
<div class="flex flex-col sm:grid sm:grid-cols-2 gap-2 mt-5">
<div>
@@ -130,5 +129,5 @@
{/if}
</div>
{/if}
- </FullScreenModal>
-</Portal>
+ </ModalBody>
+</Modal>