fix(web): move support & feedback button to user modal (#18651)

* move support & feedback button to user modal

* cleanup styling of link

* update sign out button to use immich/ui

* revise sign out button to match design from @alextran1502

* more margin on support/feedback

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -6,9 +6,13 @@
   import { AppRoute } from '$lib/constants';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import AvatarEditModal from '$lib/modals/AvatarEditModal.svelte';
+  import HelpAndFeedbackModal from '$lib/modals/HelpAndFeedbackModal.svelte';
   import { user } from '$lib/stores/user.store';
+  import { userInteraction } from '$lib/stores/user.svelte';
+  import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
   import { Button } from '@immich/ui';
   import { mdiCog, mdiLogout, mdiPencil, mdiWrench } from '@mdi/js';
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import UserAvatar from '../user-avatar.svelte';
@@ -19,6 +23,12 @@
   }
 
   let { onLogout, onClose = () => {} }: Props = $props();
+
+  let info: ServerAboutResponseDto | undefined = $state();
+
+  onMount(async () => {
+    info = userInteraction.aboutInfo ?? (await getAboutInfo());
+  });
 </script>
 
 <div
@@ -29,7 +39,7 @@
   use:focusTrap
 >
   <div
-    class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
+    class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-t-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
   >
     <div class="relative">
       <UserAvatar user={$user} size="xl" />
@@ -91,13 +101,25 @@
   </div>
 
   <div class="mb-4 flex flex-col">
+    <Button
+      class="m-1 mx-4 rounded-none rounded-b-3xl bg-white p-3 dark:bg-immich-dark-primary/10"
+      onclick={onLogout}
+      leadingIcon={mdiLogout}
+      variant="ghost"
+      color="secondary">{$t('sign_out')}</Button
+    >
+
     <button
       type="button"
-      class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
+      class="text-center mt-4 underline text-xs text-immich-primary dark:text-immich-dark-primary"
-      onclick={onLogout}
+      onclick={async () => {
-    >
+        onClose();
-      <Icon path={mdiLogout} size={24} />
+        if (info) {
-      {$t('sign_out')}</button
+          await modalManager.show(HelpAndFeedbackModal, { info });
+        }
+      }}
     >
+      {$t('support_and_feedback')}
+    </button>
   </div>
 </div>

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -12,18 +12,13 @@
   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';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
   import { user } from '$lib/stores/user.store';
-  import { userInteraction } from '$lib/stores/user.svelte';
-  import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
   import { Button, IconButton } from '@immich/ui';
-  import { mdiBellBadge, mdiBellOutline, mdiHelpCircleOutline, mdiMagnify, mdiMenu, mdiTrayArrowUp } from '@mdi/js';
+  import { mdiBellBadge, mdiBellOutline, mdiMagnify, mdiMenu, mdiTrayArrowUp } from '@mdi/js';
-  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import ThemeButton from '../theme-button.svelte';
   import UserAvatar from '../user-avatar.svelte';
@@ -42,12 +37,6 @@
   let shouldShowNotificationPanel = $state(false);
   let innerWidth: number = $state(0);
   const hasUnreadNotifications = $derived(notificationManager.notifications.length > 0);
-
-  let info: ServerAboutResponseDto | undefined = $state();
-
-  onMount(async () => {
-    info = userInteraction.aboutInfo ?? (await getAboutInfo());
-  });
 </script>
 
 <svelte:window bind:innerWidth />
@@ -130,18 +119,6 @@
 
         <ThemeButton padding="2" />
 
-        <div>
-          <IconButton
-            shape="round"
-            color="secondary"
-            variant="ghost"
-            size="medium"
-            icon={mdiHelpCircleOutline}
-            onclick={() => info && modalManager.show(HelpAndFeedbackModal, { info })}
-            aria-label={$t('support_and_feedback')}
-          />
-        </div>
-
         <div
           use:clickOutside={{
             onOutclick: () => (shouldShowNotificationPanel = false),