Function Layout

frontend/src/pages/Layout.tsx:418–1396

()

}

export default function Layout() {
    const { t, i18n } = useTranslation();
    const toast = useToast();
    const navigate = useNavigate();
    const location = useLocation();
    const { user, logout, setAuth } = useAuthStore();
    const queryClient = useQueryClient();
    const isChinese = i18n.language?.startsWith('zh');
    // Detect chat page: needs fixed-height main-content for inner scroll to work
    const isChatPage = !!useMatch('/agents/:id/chat');
    const isAgentSettingsPage = !!useMatch('/agents/:id/settings');
    const activeAgentNestedMatch = useMatch('/agents/:id/*');
    const activeAgentRootMatch = useMatch('/agents/:id');
    const activeAgentId = activeAgentNestedMatch?.params.id || activeAgentRootMatch?.params.id;
    const canAccessPlatformSettings = user?.role === 'platform_admin' || !!(user as any)?.is_platform_admin;
    const canAccessCompanySettings = user?.role === 'platform_admin' || user?.role === 'org_admin' || !!(user as any)?.is_platform_admin;
    const routeParams = new URLSearchParams(location.search);
    const showCompanyTour = routeParams.get('tour') === 'company';
    const tourAssistantId = routeParams.get('assistantId') || '';

    const [showAccountSettings, setShowAccountSettings] = useState(false);
    const [showAccountMenu, setShowAccountMenu] = useState(false);
    const [showLanguageSubmenu, setShowLanguageSubmenu] = useState(false);
    const [langSubmenuPos, setLangSubmenuPos] = useState({ top: 0, left: 0 });
    const accountMenuRef = useRef<HTMLDivElement>(null);
    const accountDropdownRef = useRef<HTMLDivElement>(null);
    const langSubmenuPortalRef = useRef<HTMLDivElement>(null);
    const langHoverCloseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
    const [showNotifications, setShowNotifications] = useState(false);
    const [showTalentMarket, setShowTalentMarket] = useState(false);
    const [notifCategory, setNotifCategory] = useState<string>('all');
    const [selectedNotification, setSelectedNotification] = useState<any | null>(null);
    const [showTenantMenu, setShowTenantMenu] = useState(false);
    const [showTenantSetupModal, setShowTenantSetupModal] = useState(false);
    const [tenantSearch, setTenantSearch] = useState('');
    const [joinInviteCode, setJoinInviteCode] = useState('');
    const [createCompanyName, setCreateCompanyName] = useState('');
    const [tenantFormLoading, setTenantFormLoading] = useState(false);
    const [tenantFormError, setTenantFormError] = useState('');
    const [allowSelfCreate, setAllowSelfCreate] = useState(true);
    const tenantSwitcherRef = useRef<HTMLDivElement>(null);
    const tenantMenuPortalRef = useRef<HTMLDivElement>(null);
    const [tenantMenuPos, setTenantMenuPos] = useState({ top: 0, left: 0, maxHeight: 520 });

    // Notification polling
    const { data: unreadCount = 0 } = useQuery({
        queryKey: ['notifications-unread'],
        queryFn: async () => {
            const res = await fetchJson<{ unread_count: number }>('/notifications/unread-count');
            return (res as any)?.unread_count || 0;
        },
        refetchInterval: 30000,
        enabled: !!user,
    });
    const { data: notifications = [] } = useQuery({
        queryKey: ['notifications', notifCategory],
        queryFn: () => fetchJson<any[]>(`/notifications?limit=50${notifCategory !== 'all' ? `&category=${notifCategory}` : ''}`),
        enabled: !!user && showNotifications,