feat: auth logout page (#27831)

* feat: auth logout page

* feat: skip login if already logged in

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

@@ -14,12 +14,11 @@
   import { fade } from 'svelte/transition';
   import UserAvatar from '../user-avatar.svelte';
 
-  interface Props {
-    onLogout: () => void;
+  type Props = {
     onClose?: () => void;
-  }
+  };
 
-  let { onLogout, onClose = () => {} }: Props = $props();
+  let { onClose }: Props = $props();
 
   let info: ServerAboutResponseDto | undefined = $state();
 
@@ -48,7 +47,7 @@
           size="tiny"
           shape="round"
           onclick={async () => {
-            onClose();
+            onClose?.();
             await modalManager.show(AvatarEditModal);
           }}
         />
@@ -99,7 +98,7 @@
   <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}
+      href={Route.logout()}
       leadingIcon={mdiLogout}
       variant="ghost"
       color="secondary">{$t('sign_out')}</Button
@@ -109,7 +108,7 @@
       type="button"
       class="text-center mt-4 underline text-xs text-primary"
       onclick={async () => {
-        onClose();
+        onClose?.();
         if (info) {
           await modalManager.show(HelpAndFeedbackModal, { info });
         }

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

@@ -178,10 +178,7 @@
           </button>
 
           {#if shouldShowAccountInfoPanel}
-            <AccountInfoPanel
-              onLogout={() => authManager.logout()}
-              onClose={() => (shouldShowAccountInfoPanel = false)}
-            />
+            <AccountInfoPanel onClose={() => (shouldShowAccountInfoPanel = false)} />
           {/if}
         </div>
       </section>