💩(frontend) add a banner to warm about incident

Sh*t code that would be stabilize asap.

Author: lebaudantoine

src/frontend/src/components/IncidentBanner.tsx

@@ -0,0 +1,59 @@
+import { css } from '@/styled-system/css'
+import { RiErrorWarningLine, RiExternalLinkLine } from '@remixicon/react'
+import { Text, A } from '@/primitives'
+import { useConfig } from '@/api/useConfig'
+
+export const IncidentBanner = () => {
+  const { data } = useConfig()
+
+  if (!data?.feedback?.url) return
+
+  return (
+    <div
+      className={css({
+        width: '100%',
+        backgroundColor: 'error.900',
+        color: 'error.100',
+        display: { base: 'none', xs: 'flex' },
+        justifyContent: 'center',
+        padding: '0.5rem 0',
+      })}
+    >
+      <div
+        className={css({
+          display: 'inline-flex',
+          gap: '0.5rem',
+          alignItems: 'center',
+        })}
+      >
+        <RiErrorWarningLine size={20} aria-hidden="true" />
+        <Text as="p" variant="sm">
+          Incident hébergeur en cours,{' '}
+          <span
+            className={css({
+              display: { base: 'none', sm: 'inline-block' },
+            })}
+          >
+            déploiement d'urgence
+          </span>
+        </Text>
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.25,
+          })}
+        >
+          <A
+            href={'https://pad.numerique.gouv.fr/s/qcYxMi2nH'}
+            target="_blank"
+            size="sm"
+          >
+            En savoir plus
+          </A>
+          <RiExternalLinkLine size={16} aria-hidden="true" />
+        </div>
+      </div>
+    </div>
+  )
+}

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -21,7 +21,7 @@ import { useTranslation } from 'react-i18next'
 
 import { ControlBar } from './ControlBar/ControlBar'
 import { styled } from '@/styled-system/jsx'
-import { cva } from '@/styled-system/css'
+import { css, cva } from '@/styled-system/css'
 import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
 import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
@@ -40,6 +40,7 @@ import { GridLayout } from '../components/layout/GridLayout'
 import { IsIdleDisconnectModal } from '../components/IsIdleDisconnectModal'
 import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
+import { IncidentBanner } from '@/components/IncidentBanner'
 
 const LayoutWrapper = styled(
   'div',
@@ -254,6 +255,16 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
         overflowX: 'hidden',
       }}
     >
+      <div
+        className={css({
+          display: 'flex',
+          width: '100%',
+          position: 'absolute',
+          zIndex: '1000',
+        })}
+      >
+        <IncidentBanner />
+      </div>
       {isWeb() && (
         <LayoutContextProvider
           value={layoutContext}

src/frontend/src/layout/Header.tsx

@@ -6,13 +6,13 @@ import { Button, Text } from '@/primitives'
 import { SettingsButton } from '@/features/settings'
 import { useUser } from '@/features/auth'
 import { useMatchesRoute } from '@/navigation/useMatchesRoute'
-import { FeedbackBanner } from '@/components/FeedbackBanner'
 import { Menu } from '@/primitives/Menu'
 import { MenuList } from '@/primitives/MenuList'
 import { LoginButton } from '@/components/LoginButton'
 import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
 
 import { useLoginHint } from '@/hooks/useLoginHint'
+import { IncidentBanner } from '@/components/IncidentBanner'
 
 const Logo = () => (
   <img
@@ -99,7 +99,8 @@ export const Header = () => {
 
   return (
     <>
-      <FeedbackBanner />
+      {/*<FeedbackBanner />*/}
+      <IncidentBanner />
       <div
         className={css({
           paddingBottom: 1,