Create shared navigation components using module federation (#774)

### Summary & Motivation

This introduces shared navigation components using module federation to
enable consistent navigation across self-contained systems. The
implementation provides federated side menu, top menu, and common UI
components that can be shared between all self-contained systems.

- Create federated side menu and mobile menu components that work across
module boundaries.
- Implement federated top menu with user avatar, theme selector,
language switcher, and support options.
- Enable cross-system navigation with SPA reload only when navigating
between different systems.
- Make toast notifications work across module federation boundaries.
- Create shared support dialog using module federation to replace
account deletion functionality.
- Implement federated translation system to share translations between
self-contained systems.
- Fix various UI issues including mobile menu display, theme selector
alignment, and Safari navigation bugs.
- Improve mobile experience by showing theme, support, and language
switcher on login/signup pages.
- Centralize tooltip implementations and improve component
accessibility.
- Ensure federated module styles are properly loaded in host systems.
- Ensure translations in federated modules are loaded from the host
systems.
- Add platform configuration to restrict BackOffice menu option to
internal users.

### Downstream projects

1. Move your side menu configuration to the centralized location
- Add your side menu items to
`application/account-management/WebApp/federated-modules/sideMenu/NavigationMenuItems.tsx`
   - Remove side menu items from your local components

This file now serves as the central configuration for all side menu
items across systems.

3. Update your `bootstrap.tsx` to use federated translations:

```diff
- import { Translation } from "@repo/infrastructure/translations/Translation";
+ import { createFederatedTranslation } from "@repo/infrastructure/translations/createFederatedTranslation";

- const { TranslationProvider } = await Translation.create(
+ const { TranslationProvider } = await createFederatedTranslation(
  (locale) => import(`@/shared/translations/locale/${locale}.ts`)
);
```

4. Replace your side menu component with the federated version in your
main route:

```diff
- import { SharedSideMenu } from "@/shared/components/SharedSideMenu";
+ import FederatedSideMenu from "account-management/FederatedSideMenu";

- <SharedSideMenu ariaLabel={t`Toggle collapsed menu`} />
+ <FederatedSideMenu currentSystem="your-self-contained-system" />
```

5. Update your top menu component to use the federated version:

```diff
- import { LocaleSwitcher } from "@repo/infrastructure/translations/LocaleSwitcher";
- import { ThemeModeSelector } from "@repo/ui/theme/ThemeModeSelector";
- const AvatarButton = lazy(() => import("account-management/AvatarButton"));
+ const FederatedTopMenu = lazy(() => import("account-management/FederatedTopMenu"));

// Wrap your existing breadcrumbs or top menu content with FederatedTopMenu:
- <nav className="flex w-full items-center justify-between">
-   {/* Your breadcrumbs and menu items */}
- </nav>
+ <Suspense fallback={<div className="h-12 w-full" />}>
+   <FederatedTopMenu>
+     {/* Your breadcrumbs */}
+   </FederatedTopMenu>
+ </Suspense>
```

6. Remove local implementations of SharedSideMenu and update imports
throughout your system.

7. Change the `internalEmailDomain` in
`application/shared-kernel/SharedKernel/Platform/platform-settings.jsonc`
to your own to only show BackOffice to internal users.

This change is part of a bigger redesign of the navigation, so please
look at this and other changes holistically.

### Checklist

- [x] I have added tests, or done manual regression tests
- [x] I have updated the documentation, if necessary

Author: tjementum

application/account-management/Core/Features/Users/Domain/User.cs

@@ -1,4 +1,5 @@
 using PlatformPlatform.SharedKernel.Domain;
+using PlatformPlatform.SharedKernel.Platform;
 
 namespace PlatformPlatform.AccountManagement.Features.Users.Domain;
 
@@ -37,6 +38,8 @@ public string Email
 
     public string Locale { get; private set; }
 
+    public bool IsInternalUser => Email.EndsWith(Settings.Current.Identity.InternalEmailDomain, StringComparison.OrdinalIgnoreCase);
+
     public TenantId TenantId { get; }
 
     public static User Create(TenantId tenantId, string email, UserRole role, bool emailConfirmed, string? locale)

application/account-management/Core/Features/Users/Shared/UserInfoFactory.cs

@@ -32,7 +32,8 @@ public async Task<UserInfo> CreateUserInfoAsync(User user, CancellationToken can
             Title = user.Title,
             AvatarUrl = user.Avatar.Url,
             TenantName = tenant?.Name,
-            Locale = user.Locale
+            Locale = user.Locale,
+            IsInternalUser = user.IsInternalUser
         };
     }
 }

application/account-management/Tests/Users/Domain/UserTests.cs

@@ -0,0 +1,63 @@
+using FluentAssertions;
+using PlatformPlatform.AccountManagement.Features.Users.Domain;
+using PlatformPlatform.SharedKernel.Domain;
+using PlatformPlatform.SharedKernel.Platform;
+using Xunit;
+
+namespace PlatformPlatform.AccountManagement.Tests.Users.Domain;
+
+public sealed class UserTests
+{
+    private readonly TenantId _tenantId = TenantId.NewId();
+
+    [Fact]
+    public void IsInternalUser_ShouldReturnTrueForInternalEmails()
+    {
+        // Arrange
+        var internalEmails = new[]
+        {
+            $"user{Settings.Current.Identity.InternalEmailDomain}",
+            $"admin{Settings.Current.Identity.InternalEmailDomain}",
+            $"test.user{Settings.Current.Identity.InternalEmailDomain}",
+            $"user+tag{Settings.Current.Identity.InternalEmailDomain}",
+            $"USER{Settings.Current.Identity.InternalEmailDomain.ToUpperInvariant()}"
+        };
+
+        foreach (var email in internalEmails)
+        {
+            // Arrange
+            var user = User.Create(_tenantId, email, UserRole.Member, true, "en-US");
+
+            // Act
+            var isInternal = user.IsInternalUser;
+
+            // Assert
+            isInternal.Should().BeTrue($"Email {email} should be identified as internal");
+        }
+    }
+
+    [Fact]
+    public void IsInternalUser_ShouldReturnFalseForExternalEmails()
+    {
+        // Arrange
+        var externalEmails = new[]
+        {
+            "user@example.com",
+            "user@company.net",
+            $"{Settings.Current.Identity.InternalEmailDomain.Substring(1)}@example.com",
+            $"user@subdomain.{Settings.Current.Identity.InternalEmailDomain.Substring(1)}"
+        };
+
+        foreach (var email in externalEmails)
+        {
+            // Arrange
+            var user = User.Create(_tenantId, email, UserRole.Member, true, "en-US");
+
+            // Act
+            var isInternal = user.IsInternalUser;
+
+            // Assert
+            isInternal.Should().BeFalse($"Email {email} should be identified as external");
+        }
+    }
+}

application/account-management/WebApp/federated-modules/common/LocaleSwitcher.tsx

@@ -0,0 +1,133 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import type { Key } from "@react-types/shared";
+import { useIsAuthenticated } from "@repo/infrastructure/auth/hooks";
+import { enhancedFetch } from "@repo/infrastructure/http/httpClient";
+import type { Locale } from "@repo/infrastructure/translations/TranslationContext";
+import localeMap from "@repo/infrastructure/translations/i18n.config.json";
+import { Button } from "@repo/ui/components/Button";
+import { Menu, MenuItem, MenuTrigger } from "@repo/ui/components/Menu";
+import { Tooltip, TooltipTrigger } from "@repo/ui/components/Tooltip";
+import { CheckIcon, GlobeIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+
+const PREFERRED_LOCALE_KEY = "preferred-locale";
+
+const locales = Object.entries(localeMap).map(([id, info]) => ({
+  id: id as Locale,
+  label: info.label
+}));
+
+async function updateLocaleOnBackend(locale: Locale) {
+  try {
+    const response = await enhancedFetch("/api/account-management/users/me/change-locale", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ Locale: locale })
+    });
+
+    return response.ok || response.status === 401;
+  } catch {
+    return true; // Continue even if API call fails
+  }
+}
+
+export default function LocaleSwitcher({
+  variant = "icon",
+  onAction
+}: {
+  variant?: "icon" | "mobile-menu";
+  onAction?: () => void;
+} = {}) {
+  const [currentLocale, setCurrentLocale] = useState<Locale>("en-US");
+  const isAuthenticated = useIsAuthenticated();
+
+  useEffect(() => {
+    // Get current locale from document or localStorage
+    const htmlLang = document.documentElement.lang as Locale;
+    const savedLocale = localStorage.getItem(PREFERRED_LOCALE_KEY) as Locale;
+
+    if (savedLocale && locales.some((l) => l.id === savedLocale)) {
+      setCurrentLocale(savedLocale);
+    } else if (htmlLang && locales.some((l) => l.id === htmlLang)) {
+      setCurrentLocale(htmlLang);
+    }
+  }, []);
+
+  const handleLocaleChange = async (key: Key) => {
+    const locale = key.toString() as Locale;
+    if (locale !== currentLocale) {
+      // Call onAction if provided (for closing mobile menu)
+      onAction?.();
+
+      // Save to localStorage
+      localStorage.setItem(PREFERRED_LOCALE_KEY, locale);
+
+      // Only update backend if user is authenticated
+      if (isAuthenticated) {
+        await updateLocaleOnBackend(locale);
+      }
+
+      // Reload page to apply new locale
+      window.location.reload();
+    }
+  };
+
+  const currentLocaleLabel = locales.find((l) => l.id === currentLocale)?.label || currentLocale;
+
+  if (variant === "mobile-menu") {
+    return (
+      <MenuTrigger>
+        <Button
+          variant="ghost"
+          className="flex h-11 w-full items-center justify-start gap-4 px-3 py-2 font-normal text-base text-muted-foreground hover:bg-hover-background hover:text-foreground"
+          style={{ pointerEvents: "auto" }}
+        >
+          <div className="flex h-6 w-6 shrink-0 items-center justify-center">
+            <GlobeIcon className="h-5 w-5 stroke-current" />
+          </div>
+          <div className="min-w-0 flex-1 overflow-hidden whitespace-nowrap text-start">
+            <Trans>Language</Trans>
+          </div>
+          <div className="shrink-0 text-base text-muted-foreground">{currentLocaleLabel}</div>
+        </Button>
+        <Menu onAction={handleLocaleChange} placement="bottom end">
+          {locales.map((locale) => (
+            <MenuItem key={locale.id} id={locale.id} textValue={locale.label}>
+              <div className="flex items-center gap-2">
+                <span>{locale.label}</span>
+                {locale.id === currentLocale && <CheckIcon className="ml-auto h-4 w-4" />}
+              </div>
+            </MenuItem>
+          ))}
+        </Menu>
+      </MenuTrigger>
+    );
+  }
+
+  // Icon variant
+  const menuContent = (
+    <MenuTrigger>
+      <Button variant="icon" aria-label={t`Change language`}>
+        <GlobeIcon className="h-5 w-5" />
+      </Button>
+      <Menu onAction={handleLocaleChange} aria-label={t`Change language`}>
+        {locales.map((locale) => (
+          <MenuItem key={locale.id} id={locale.id} textValue={locale.label}>
+            <div className="flex items-center gap-2">
+              <span>{locale.label}</span>
+              {locale.id === currentLocale && <CheckIcon className="ml-auto h-4 w-4" />}
+            </div>
+          </MenuItem>
+        ))}
+      </Menu>
+    </MenuTrigger>
+  );
+
+  return (
+    <TooltipTrigger>
+      {menuContent}
+      <Tooltip>{t`Change language`}</Tooltip>
+    </TooltipTrigger>
+  );
+}

application/account-management/WebApp/federated-modules/common/SupportButton.tsx

@@ -0,0 +1,19 @@
+import { t } from "@lingui/core/macro";
+import { Button } from "@repo/ui/components/Button";
+import { Tooltip, TooltipTrigger } from "@repo/ui/components/Tooltip";
+import { MailQuestion } from "lucide-react";
+import { SupportDialog } from "./SupportDialog";
+import "@repo/ui/tailwind.css";
+
+export default function SupportButton() {
+  return (
+    <SupportDialog>
+      <TooltipTrigger>
+        <Button variant="icon" aria-label={t`Contact support`}>
+          <MailQuestion size={20} />
+        </Button>
+        <Tooltip>{t`Contact support`}</Tooltip>
+      </TooltipTrigger>
+    </SupportDialog>
+  );
+}

application/account-management/WebApp/federated-modules/common/SupportDialog.tsx

@@ -0,0 +1,44 @@
+import { t } from "@lingui/core/macro";
+import { Button } from "@repo/ui/components/Button";
+import { Dialog, DialogTrigger } from "@repo/ui/components/Dialog";
+import { Heading } from "@repo/ui/components/Heading";
+import { Modal } from "@repo/ui/components/Modal";
+import { MailIcon, XIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+interface SupportDialogProps {
+  children: ReactNode;
+}
+
+export function SupportDialog({ children }: Readonly<SupportDialogProps>) {
+  return (
+    <DialogTrigger>
+      {children}
+      <Modal isDismissable={true} zIndex="high">
+        <Dialog className="max-w-lg">
+          {({ close }) => (
+            <>
+              <XIcon onClick={close} className="absolute top-2 right-2 h-10 w-10 cursor-pointer p-2 hover:bg-muted" />
+              <Heading slot="title" className="text-2xl">
+                {t`Contact support`}
+              </Heading>
+              <p className="text-muted-foreground text-sm">{t`Need help? Our support team is here to assist you.`}</p>
+              <div className="mt-4 flex flex-col gap-4">
+                <div className="flex items-center gap-3 rounded-lg border border-input bg-input-background p-4 opacity-50">
+                  <MailIcon className="h-5 w-5 text-muted-foreground" />
+                  <a href="mailto:support@platformplatform.net" className="text-primary hover:underline">
+                    support@platformplatform.net
+                  </a>
+                </div>
+                <p className="text-muted-foreground text-sm">{t`Feel free to reach out with any questions or issues you may have.`}</p>
+                <div className="mt-6 flex justify-end gap-4">
+                  <Button onPress={close}>{t`Close`}</Button>
+                </div>
+              </div>
+            </>
+          )}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}