More FE changes

frontend/src/components/ui/MobileMenu.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import type { Page } from './Header';
+import type { HeaderExportState, Page } from './Header';
 import { PAGE_PATHS } from './Header';
 import type { AuthUser } from '../../hooks/useAuth';
 import { changeLanguage as changeAppLanguage, SUPPORTED_LANGUAGES } from '../../i18n';
@@ -17,8 +17,7 @@ interface MobileMenuProps {
   onPageChange: (page: Page) => void;
   theme: 'light' | 'dark';
   onToggleTheme: () => void;
-  onExport: (() => void) | null;
-  exporting: boolean;
+  exportState: HeaderExportState | null;
   onSaveSearch: (() => void) | null;
   savingSearch: boolean;
   user: AuthUser | null;
@@ -36,8 +35,7 @@ export default function MobileMenu({
   onPageChange,
   theme,
   onToggleTheme,
-  onExport,
-  exporting,
+  exportState,
   onSaveSearch,
   savingSearch,
   user,
@@ -50,6 +48,9 @@ export default function MobileMenu({
   sharing,
 }: MobileMenuProps) {
   const { t, i18n } = useTranslation();
+  const emailParts = user?.email.split('@');
+  const emailLocal = emailParts?.[0] ?? '';
+  const emailDomain = emailParts && emailParts.length > 1 ? emailParts.slice(1).join('@') : '';
 
   const mobileNavItem = (page: Page, label: string) => (
     <a
@@ -72,7 +73,7 @@ export default function MobileMenu({
   );
 
   const dashboardActionClass =
-    'w-full flex cursor-pointer items-center justify-center gap-2 px-3 py-2 rounded bg-navy-800 text-sm font-semibold text-white border border-navy-700 shadow-sm hover:bg-navy-700 disabled:cursor-wait disabled:opacity-50 transition-colors';
+    'w-full flex cursor-pointer items-center justify-center gap-2 px-3 py-2 rounded bg-navy-800 text-sm font-semibold text-white border border-navy-700 shadow-sm hover:bg-navy-700 disabled:opacity-50 transition-colors';
 
   const dashboardSavedItem = user && (
     <a
@@ -109,17 +110,19 @@ export default function MobileMenu({
           )}
           {sharing ? t('header.sharing') : copied ? t('common.copied') : t('common.share')}
         </button>
-        <button
-          onClick={() => {
-            onExport?.();
-            onClose();
-          }}
-          disabled={!onExport || exporting}
-          className={dashboardActionClass}
-        >
-          <DownloadIcon className="w-4 h-4" />
-          {exporting ? t('header.exporting') : t('header.exportLabel')}
-        </button>
+        {exportState && (
+          <button
+            onClick={() => {
+              exportState.onExport();
+              onClose();
+            }}
+            disabled={exportState.exporting}
+            className={dashboardActionClass}
+          >
+            <DownloadIcon className="w-4 h-4" />
+            {exportState.exporting ? t('header.exporting') : t('header.exportLabel')}
+          </button>
+        )}
         {onSaveSearch && (
           <button
             onClick={() => {
@@ -210,7 +213,21 @@ export default function MobileMenu({
           <div>
             {user ? (
               <div className="flex items-center justify-between gap-2 px-3 py-1.5">
-                <span className="text-sm text-warm-300 truncate">{user.email}</span>
+                <span
+                  className="min-w-0 text-sm text-warm-300 truncate"
+                  aria-label={user.email}
+                  title={user.email}
+                >
+                  {emailDomain ? (
+                    <>
+                      <span aria-hidden="true">{emailLocal}</span>
+                      <span aria-hidden="true" className="after:content-['@']" />
+                      <span aria-hidden="true">{emailDomain}</span>
+                    </>
+                  ) : (
+                    user.email
+                  )}
+                </span>
                 <button
                   onClick={() => {
                     onLogout();