chore: modal shenanigan (#18116)

web/package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@formatjs/icu-messageformat-parser": "^2.9.8",
         "@immich/sdk": "file:../open-api/typescript-sdk",
-        "@immich/ui": "^0.19.0",
+        "@immich/ui": "^0.19.1",
         "@mapbox/mapbox-gl-rtl-text": "0.2.3",
         "@mdi/js": "^7.4.47",
         "@photo-sphere-viewer/core": "^5.11.5",
@@ -1320,9 +1320,9 @@
       "link": true
     },
     "node_modules/@immich/ui": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.19.0.tgz",
-      "integrity": "sha512-XVjSUoQVIoe83pxM4q8kmlejb2xep/TZEfoGbasI7takEGKNiWEyXr5eZaXZCSVgq78fcNRr4jyWz290ZAXh7A==",
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.19.1.tgz",
+      "integrity": "sha512-PyJ+OAEgBu1HTScMMui2KpBjMYkCw3nhVloYorOaB5lKOlNh7mqz5xBCNo/UVwxLXyAOFuBLU05lv3hWNveSKQ==",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "@mdi/js": "^7.4.47",

web/package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.19.0",
+    "@immich/ui": "^0.19.1",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",

web/src/lib/components/layouts/user-page-layout.svelte

@@ -3,12 +3,12 @@
 </script>
 
 <script lang="ts">
-  import { openFileUploadDialog } from '$lib/utils/file-uploader';
-  import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
-  import SideBar from '../shared-components/side-bar/side-bar.svelte';
-  import AdminSideBar from '../shared-components/side-bar/admin-side-bar.svelte';
   import { useActions, type ActionArray } from '$lib/actions/use-actions';
+  import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import type { Snippet } from 'svelte';
+  import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
+  import AdminSideBar from '../shared-components/side-bar/admin-side-bar.svelte';
+  import SideBar from '../shared-components/side-bar/side-bar.svelte';
 
   interface Props {
     hideNavbar?: boolean;
@@ -51,7 +51,7 @@
 </header>
 <div
   tabindex="-1"
-  class="relative grid h-dvh grid-cols-[theme(spacing.0)_auto] overflow-hidden bg-immich-bg max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg sidebar:grid-cols-[theme(spacing.64)_auto]"
+  class="relative grid h-[calc(100dvh-var(--navbar-height))] grid-cols-[theme(spacing.0)_auto] overflow-hidden bg-immich-bg dark:bg-immich-dark-bg sidebar:grid-cols-[theme(spacing.64)_auto]"
 >
   {#if sidebar}{@render sidebar()}{:else if admin}
     <AdminSideBar />

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

@@ -13,6 +13,7 @@
   import { AppRoute } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.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';
@@ -22,11 +23,9 @@
   import { mdiBellBadge, mdiBellOutline, mdiHelpCircleOutline, mdiMagnify, mdiMenu, mdiTrayArrowUp } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
   import ThemeButton from '../theme-button.svelte';
   import UserAvatar from '../user-avatar.svelte';
   import AccountInfoPanel from './account-info-panel.svelte';
-  import { notificationManager } from '$lib/stores/notification-manager.svelte';
 
   interface Props {
     showUploadButton?: boolean;
@@ -35,7 +34,6 @@
 
   let { showUploadButton = true, onUploadClick }: Props = $props();
 
-  let shouldShowAccountInfo = $state(false);
   let shouldShowAccountInfoPanel = $state(false);
   let shouldShowHelpPanel = $state(false);
   let shouldShowNotificationPanel = $state(false);
@@ -55,10 +53,7 @@
   <HelpAndFeedbackModal onClose={() => (shouldShowHelpPanel = false)} {info} />
 {/if}
 
-<nav
-  id="dashboard-navbar"
-  class="fixed z-[900] max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-dvw text-sm"
->
+<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
     class="grid h-full grid-cols-[theme(spacing.32)_auto] items-center border-b bg-immich-bg py-2 dark:border-b-immich-dark-gray dark:bg-immich-dark-bg sidebar:grid-cols-[theme(spacing.64)_auto]"
@@ -180,28 +175,14 @@
           <button
             type="button"
             class="flex ps-2"
-            onmouseover={() => (shouldShowAccountInfo = true)}
-            onfocus={() => (shouldShowAccountInfo = true)}
-            onblur={() => (shouldShowAccountInfo = false)}
-            onmouseleave={() => (shouldShowAccountInfo = false)}
             onclick={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
+            title={`${$user.name} (${$user.email})`}
           >
             {#key $user}
               <UserAvatar user={$user} size="md" showTitle={false} interactive />
             {/key}
           </button>
 
-          {#if shouldShowAccountInfo && !shouldShowAccountInfoPanel}
-            <div
-              in:fade={{ delay: 500, duration: 150 }}
-              out:fade={{ delay: 200, duration: 150 }}
-              class="absolute -bottom-12 end-5 rounded-md border bg-gray-500 p-2 text-[12px] text-gray-100 shadow-md dark:border-immich-dark-gray dark:bg-immich-dark-gray"
-            >
-              <p>{$user.name}</p>
-              <p>{$user.email}</p>
-            </div>
-          {/if}
-
           {#if shouldShowAccountInfoPanel}
             <AccountInfoPanel onLogout={() => authManager.logout()} />
           {/if}

web/src/lib/components/shared-components/side-bar/side-bar-section.svelte

@@ -35,7 +35,7 @@
   id="sidebar"
   aria-label={ariaLabel}
   tabindex="-1"
-  class="immich-scrollbar relative z-10 w-0 sidebar:w-[16rem] overflow-y-auto overflow-x-hidden bg-immich-bg pt-8 transition-all duration-200 dark:bg-immich-dark-bg"
+  class="immich-scrollbar relative z-auto w-0 sidebar:w-[16rem] overflow-y-auto overflow-x-hidden bg-immich-bg pt-8 transition-all duration-200 dark:bg-immich-dark-bg"
   class:shadow-2xl={isExpanded}
   class:dark:border-e-immich-dark-gray={isExpanded}
   class:border-r={isExpanded}

web/src/lib/modals/UserEditModal.svelte

@@ -99,10 +99,10 @@
   };
 </script>
 
-<Modal title={$t('edit_user')} size="small" icon={mdiAccountEditOutline} {onClose}>
+<Modal title={$t('edit_user')} size="small" icon={mdiAccountEditOutline} {onClose} class="text-dark bg-light">
   <ModalBody>
     <form onsubmit={onSubmit} autocomplete="off" id="edit-user-form">
-      <div class="my-4 flex flex-col gap-2">
+      <div class="mb-4 flex flex-col gap-2">
         <label class="immich-form-label" for="email">{$t('email')}</label>
         <input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
       </div>