overleaf-cep/services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx
Antoine Clausse 2d5a3efc12 [web] Add compilation indicator favicon (#25990)
* Import changes from Hackathon

https://github.com/overleaf/internal/pull/24501

* Update compile status: allow errors

* Update favicons. Use the ones from Figma

* Optimize and reuse path from favicon.svg

* Clear status favicon after 5s on active tab

* Rename hook from useCompileNotification to useStatusFavicon

* Add tests

* Revert changes to favicon.svg

* Query favicon on document.head

GitOrigin-RevId: 3972b1981abaf6c80273e0ed5b1bc05eb51bd689
2025-06-24 08:05:15 +00:00

60 lines
2.5 KiB
TypeScript

import { lazy, Suspense } from 'react'
import { Alerts } from '@/features/ide-react/components/alerts/alerts'
import { MainLayout } from '@/features/ide-react/components/layout/main-layout'
import EditorLeftMenu from '@/features/editor-left-menu/components/editor-left-menu'
import { useLayoutEventTracking } from '@/features/ide-react/hooks/use-layout-event-tracking'
import useSocketListeners from '@/features/ide-react/hooks/use-socket-listeners'
import { useEditingSessionHeartbeat } from '@/features/ide-react/hooks/use-editing-session-heartbeat'
import { useRegisterUserActivity } from '@/features/ide-react/hooks/use-register-user-activity'
import { useHasLintingError } from '@/features/ide-react/hooks/use-has-linting-error'
import { Modals } from '@/features/ide-react/components/modals/modals'
import { GlobalAlertsProvider } from '@/features/ide-react/context/global-alerts-context'
import { GlobalToasts } from '../global-toasts'
import {
canUseNewEditor,
useIsNewEditorEnabled,
} from '@/features/ide-redesign/utils/new-editor-utils'
import EditorSurvey from '../editor-survey'
import { useFeatureFlag } from '@/shared/context/split-test-context'
import { useStatusFavicon } from '@/features/ide-react/hooks/use-status-favicon'
const MainLayoutNew = lazy(
() => import('@/features/ide-redesign/components/main-layout')
)
const SettingsModalNew = lazy(
() => import('@/features/ide-redesign/components/settings/settings-modal')
)
export default function IdePage() {
useLayoutEventTracking() // sent event when the layout changes
useSocketListeners() // listen for project-related websocket messages
useEditingSessionHeartbeat() // send a batched event when user is active
useRegisterUserActivity() // record activity and ensure connection when user is active
useHasLintingError() // pass editor:lint hasLintingError to the compiler
useStatusFavicon() // update the favicon based on the compile status
const newEditor = useIsNewEditorEnabled()
const canAccessNewEditor = canUseNewEditor()
const editorSurveyFlag = useFeatureFlag('editor-popup-ux-survey')
const showEditorSurvey = editorSurveyFlag && !canAccessNewEditor
return (
<GlobalAlertsProvider>
<Alerts />
<Modals />
{newEditor ? (
<Suspense fallback={null}>
<SettingsModalNew />
<MainLayoutNew />
</Suspense>
) : (
<>
<EditorLeftMenu />
<MainLayout />
</>
)}
<GlobalToasts />
{showEditorSurvey && <EditorSurvey />}
</GlobalAlertsProvider>
)
}