feat(web): consolidated single-component header for Unraid 7.3+ (fixes mobile overlap)

unraid-ui/src/components/common/sheet/SheetContent.vue

@@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <template>
   <DialogPortal :disabled="disabled" :force-mount="forceMount" :to="teleportTarget">
     <DialogOverlay
-      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60"
+      class="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/60 data-[state=closed]:duration-200 data-[state=open]:duration-300"
     />
     <DialogContent :class="sheetClass" v-bind="forwarded">
       <slot />

unraid-ui/src/components/common/sheet/sheet.variants.ts

@@ -2,7 +2,12 @@ import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 
 export const sheetVariants = cva(
-  'fixed z-50 bg-background gap-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border',
+  // Animate ONLY via the transform/opacity keyframes (animate-in/out). The panel is
+  // promoted to its own compositor layer (will-change-transform) so the slide runs
+  // off the main thread and is not stalled by the panel's contents mounting. We do
+  // NOT add a blanket `transition` here: it would transition every property
+  // (box-shadow, filter, …) alongside the keyframe and cause per-frame repaints.
+  'fixed z-50 bg-background gap-4 shadow-lg border-border will-change-transform data-[state=open]:animate-in data-[state=open]:duration-300 data-[state=open]:ease-out data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=closed]:ease-in',
   {
     variants: {
       side: {

web/__test__/components/Header.test.ts

@@ -0,0 +1,236 @@
+import { ref } from 'vue';
+import { setActivePinia } from 'pinia';
+import { provideApolloClient } from '@vue/apollo-composable';
+import { mount } from '@vue/test-utils';
+
+import { ApolloClient, InMemoryCache } from '@apollo/client/core';
+import { createTestingPinia } from '@pinia/testing';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { VueWrapper } from '@vue/test-utils';
+import type { Server, ServerconnectPluginInstalled, ServerState } from '~/types/server';
+import type { Pinia } from 'pinia';
+
+import Header from '~/components/Header.standalone.vue';
+import { useServerStore } from '~/store/server';
+import { useThemeStore } from '~/store/theme';
+
+const mockCopy = vi.fn();
+const mockCopied = ref(false);
+const mockIsSupported = ref(true);
+
+vi.mock('@vueuse/core', () => ({
+  useClipboard: () => {
+    const actualCopy = (text: string) => {
+      if (mockIsSupported.value) {
+        mockCopy(text);
+        mockCopied.value = true;
+      } else {
+        mockCopied.value = false;
+      }
+    };
+    return {
+      copy: actualCopy,
+      copied: mockCopied,
+      isSupported: mockIsSupported,
+    };
+  },
+  useLocalStorage: <T>(key: string, initialValue: T) => {
+    const storage = new Map<string, T>();
+    if (!storage.has(key)) {
+      storage.set(key, initialValue);
+    }
+    return ref(storage.get(key) ?? initialValue);
+  },
+}));
+
+vi.mock('@unraid/ui', () => ({
+  DropdownMenu: {
+    template: '<div data-testid="dropdown-menu"><slot name="trigger" /><slot name="content" /></div>',
+  },
+  Button: {
+    template: '<button><slot /></button>',
+    props: ['variant', 'size'],
+  },
+  cn: (...classes: string[]) => classes.filter(Boolean).join(' '),
+  isDarkModeActive: vi.fn(() => false),
+}));
+
+const mockWatcher = vi.fn();
+
+vi.mock('~/store/callbackActions', () => ({
+  useCallbackActionsStore: vi.fn(() => ({
+    watcher: mockWatcher,
+    callbackData: ref(null),
+  })),
+}));
+
+const t = (key: string, args?: unknown[]) => (args ? `${key} ${JSON.stringify(args)}` : key);
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t }),
+}));
+
+const initialServerData: Server = {
+  name: 'DEVGEN',
+  description: 'Dev Server',
+  guid: 'TEST-GUID',
+  keyfile: 'keyfile.key',
+  lanIp: '192.168.1.100',
+  connectPluginInstalled: 'dynamix.unraid.net.plg' as ServerconnectPluginInstalled,
+  state: 'PRO' as ServerState,
+  dateTimeFormat: { date: 'YYYY-MM-DD', time: 'HH:mm' },
+  deviceCount: 5,
+  flashProduct: 'TestFlash',
+  flashVendor: 'TestVendor',
+  regGuid: 'REG-GUID',
+  regTm: 1678886400,
+  regTo: 'Test User',
+  regTy: 'Pro',
+  regExp: undefined,
+  regUpdatesExpired: false,
+  registered: true,
+  wanIp: '8.8.8.8',
+};
+
+// Stub the heavier child components; the consolidated header is responsible for
+// layout composition, which is what these tests exercise.
+const stubs = {
+  HeaderVersion: { template: '<div data-testid="header-version"></div>' },
+  ArrayUsage: { template: '<div data-testid="array-usage"></div>' },
+  UpcServerStatus: {
+    template: '<div data-testid="server-status"></div>',
+    props: ['class'],
+  },
+  NotificationsSidebar: { template: '<div data-testid="notifications-sidebar"></div>' },
+  DropdownMenu: {
+    template: '<div data-testid="dropdown-menu"><slot name="trigger" /><slot name="content" /></div>',
+  },
+  UpcDropdownContent: { template: '<div data-testid="dropdown-content"></div>' },
+  UpcDropdownTrigger: { template: '<button data-testid="dropdown-trigger"></button>' },
+};
+
+describe('Header.standalone.vue', () => {
+  let wrapper: VueWrapper<InstanceType<typeof Header>>;
+  let pinia: Pinia;
+  let serverStore: ReturnType<typeof useServerStore>;
+  let themeStore: ReturnType<typeof useThemeStore>;
+  let consoleSpies: Array<ReturnType<typeof vi.spyOn>> = [];
+
+  beforeEach(() => {
+    Object.defineProperty(window, 'location', {
+      value: {
+        hostname: 'localhost',
+        port: '3000',
+        pathname: '/',
+        protocol: 'http:',
+        href: 'http://localhost:3000/',
+      },
+      writable: true,
+      configurable: true,
+    });
+
+    provideApolloClient(new ApolloClient({ cache: new InMemoryCache() }));
+
+    consoleSpies = [
+      vi.spyOn(console, 'log').mockImplementation(() => {}),
+      vi.spyOn(console, 'warn').mockImplementation(() => {}),
+      vi.spyOn(console, 'debug').mockImplementation(() => {}),
+      vi.spyOn(console, 'error').mockImplementation(() => {}),
+    ];
+
+    mockCopied.value = false;
+    mockIsSupported.value = true;
+
+    pinia = createTestingPinia({
+      createSpy: vi.fn,
+      initialState: { server: { ...initialServerData } },
+      stubActions: false,
+    });
+    setActivePinia(pinia);
+
+    serverStore = useServerStore();
+    themeStore = useThemeStore();
+    themeStore.setTheme({
+      name: 'white',
+      banner: true,
+      bannerGradient: true,
+      descriptionShow: true,
+      textColor: '',
+      metaColor: '',
+      bgColor: '',
+    });
+
+    vi.spyOn(serverStore, 'setServer').mockImplementation((server) => {
+      Object.assign(serverStore, server);
+      return server;
+    });
+
+    vi.clearAllMocks();
+
+    wrapper = mount(Header, {
+      props: { server: JSON.stringify(initialServerData) },
+      global: { plugins: [pinia], stubs },
+    });
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+    consoleSpies.forEach((spy) => spy.mockRestore());
+    vi.restoreAllMocks();
+  });
+
+  it('renders every header region in a single component', () => {
+    expect(wrapper.find('[data-testid="header-version"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="server-status"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="notifications-sidebar"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="dropdown-menu"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="dropdown-trigger"]').exists()).toBe(true);
+    expect(wrapper.find('button').text()).toContain('DEVGEN');
+  });
+
+  it('hydrates the server store from the prop and starts the callback watcher', () => {
+    expect(serverStore.setServer).toHaveBeenCalledTimes(1);
+    expect(serverStore.setServer).toHaveBeenCalledWith(JSON.parse(JSON.stringify(initialServerData)));
+    expect(mockWatcher).toHaveBeenCalledTimes(1);
+  });
+
+  it('throws when the server prop is missing', () => {
+    expect(() => mount(Header, { props: {}, global: { plugins: [pinia], stubs } })).toThrow(
+      'Server data not present'
+    );
+  });
+
+  it('lays out on a responsive grid with each region in its own area (no overlap)', () => {
+    const root = wrapper.get('#UnraidHeader');
+    // A single grid owns the responsive layout (breakpoints live in scoped CSS).
+    expect(root.classes()).toContain('unraid-header-shell');
+    // Every header region is placed in its own grid area, so nothing is absolutely
+    // positioned on top of anything else (the root cause of the old mobile overlap).
+    expect(root.find('.uh-logo').exists()).toBe(true);
+    expect(root.find('.uh-version').exists()).toBe(true);
+    expect(root.find('.uh-meta-right').exists()).toBe(true);
+    expect(root.find('.uh-nav-right').exists()).toBe(true);
+    expect(root.find('.uh-name').exists()).toBe(true);
+    // The only absolutely-positioned element allowed is the banner gradient layer.
+    expect(root.classes()).not.toContain('absolute');
+    expect(root.find('.absolute:not(.unraid-banner-gradient-layer)').exists()).toBe(false);
+  });
+
+  it('hides the array-usage bar by default and shows it when enabled', async () => {
+    expect(wrapper.find('[data-testid="array-usage"]').exists()).toBe(false);
+
+    const withUsage = mount(Header, {
+      props: { server: JSON.stringify(initialServerData), showArrayUsage: 'true' },
+      global: { plugins: [pinia], stubs },
+    });
+    expect(withUsage.find('[data-testid="array-usage"]').exists()).toBe(true);
+    withUsage.unmount();
+  });
+
+  it('copies the LAN IP when the server name is clicked', async () => {
+    mockIsSupported.value = true;
+    await wrapper.find('button').trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(mockCopy).toHaveBeenCalledWith(initialServerData.lanIp);
+  });
+});

web/__test__/components/UserProfile.test.ts

@@ -376,36 +376,4 @@ describe('UserProfile.standalone.vue', () => {
 
     expect(wrapper.find('[data-testid="notifications-sidebar"]').exists()).toBe(true);
   });
-
-  it('conditionally renders banner based on theme store', async () => {
-    const bannerSelector = '.unraid-banner-gradient-layer';
-
-    themeStore.setTheme({
-      ...themeStore.theme,
-      banner: true,
-      bannerGradient: true,
-    });
-    await wrapper.vm.$nextTick();
-
-    expect(themeStore.bannerGradient).toBe(true);
-    expect(wrapper.find(bannerSelector).exists()).toBe(true);
-
-    themeStore.setTheme({
-      ...themeStore.theme,
-      bannerGradient: false,
-    });
-    await wrapper.vm.$nextTick();
-
-    expect(themeStore.bannerGradient).toBe(false);
-    expect(wrapper.find(bannerSelector).exists()).toBe(false);
-
-    themeStore.setTheme({
-      ...themeStore.theme,
-      bannerGradient: true,
-    });
-    await wrapper.vm.$nextTick();
-
-    expect(themeStore.bannerGradient).toBe(true);
-    expect(wrapper.find(bannerSelector).exists()).toBe(true);
-  });
 });

web/__test__/components/Wrapper/component-registry.test.ts

@@ -74,9 +74,11 @@ describe('component-registry', () => {
   it('should have priority components listed first', async () => {
     const { componentMappings } = await import('~/components/Wrapper/component-registry');
 
-    // Priority components should be first
-    expect(componentMappings[0].appId).toBe('header-os-version');
-    expect(componentMappings[1].appId).toBe('user-profile');
+    // Priority components should be first: the consolidated header (7.3+) leads,
+    // followed by the legacy multi-component header used as the < 7.3 fallback.
+    expect(componentMappings[0].appId).toBe('header');
+    expect(componentMappings[1].appId).toBe('header-os-version');
+    expect(componentMappings[2].appId).toBe('user-profile');
   });
 
   it('should support multiple selectors for modals', async () => {

web/components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     'ApiKeyPage.standalone': typeof import('./src/components/ApiKeyPage.standalone.vue')['default']
     ApiStatus: typeof import('./src/components/ApiStatus/ApiStatus.vue')['default']
     'ApiStatus.standalone': typeof import('./src/components/ApiStatus/ApiStatus.standalone.vue')['default']
+    ArrayUsage: typeof import('./src/components/Header/ArrayUsage.vue')['default']
     'Auth.standalone': typeof import('./src/components/Auth.standalone.vue')['default']
     Avatar: typeof import('./src/components/Brand/Avatar.vue')['default']
     BaseLogViewer: typeof import('./src/components/Logs/BaseLogViewer.vue')['default']
@@ -74,8 +75,11 @@ declare module 'vue' {
     EffectivePermissions: typeof import('./src/components/ApiKey/EffectivePermissions.vue')['default']
     FileViewer: typeof import('./src/components/FileViewer.vue')['default']
     FilteredLogModal: typeof import('./src/components/Logs/FilteredLogModal.vue')['default']
+    'Header.standalone': typeof import('./src/components/Header.standalone.vue')['default']
     HeaderContent: typeof import('./src/components/Docker/HeaderContent.vue')['default']
+    HeaderLogo: typeof import('./src/components/Header/HeaderLogo.vue')['default']
     'HeaderOsVersion.standalone': typeof import('./src/components/HeaderOsVersion.standalone.vue')['default']
+    HeaderVersion: typeof import('./src/components/Header/HeaderVersion.vue')['default']
     IgnoredRelease: typeof import('./src/components/UpdateOs/IgnoredRelease.vue')['default']
     Indicator: typeof import('./src/components/Notifications/Indicator.vue')['default']
     InternalBootConfirmDialog: typeof import('./src/components/Onboarding/components/InternalBootConfirmDialog.vue')['default']

web/src/assets/main.css

@@ -42,6 +42,14 @@ unraid-modals.unapi {
   isolation: isolate;
 }
 
+/* Consolidated header (7.3+): custom elements default to display:inline, which
+   shrink-wraps the grid. Make it fill the header so the layout can space the logo
+   and account controls across the full available width. */
+unraid-header.unapi {
+  display: block;
+  width: 100%;
+}
+
 /* Style for Unraid progress frame */
 iframe#progressFrame {
   background-color: var(--background-color);