🗑️(helm) remove unused dev Helm values

The dev values are no longer in use and have not been used for over a year.
We primarily rely on the dev-keycloak values, and occasionally
the dev-dinum ones for testing on the Dinum-labeled frontend.

As a result, the unused dev values should be removed to reduce clutter
and simplify maintenance.

CHANGELOG.md

@@ -15,7 +15,6 @@ and this project adheres to
 ### Fixed
 
 - 🔒️(backend) fix email disclosure in room invitation endpoint #1200
-- 🐛(backend) fix regression in update-participant endpoint #1204
 
 ## [1.12.0] - 2026-03-24
 

src/backend/core/api/serializers.py

@@ -303,9 +303,6 @@ class MuteParticipantSerializer(BaseParticipantsManagementSerializer):
     )
 
 
-TrackSource = Literal["SCREEN_SHARE", "SCREEN_SHARE_AUDIO", "CAMERA", "MICROPHONE"]
-
-
 class ParticipantPermission(BaseModel):
     """Mirror the LiveKit ParticipantPermission protobuf.
 
@@ -316,7 +313,9 @@ class ParticipantPermission(BaseModel):
     can_subscribe: bool | None = None
     can_publish: bool | None = None
     can_publish_data: bool | None = None
-    can_publish_sources: list[TrackSource] = Field(default_factory=list)
+    can_publish_sources: list[int] = Field(
+        default_factory=list
+    )  # TrackSource enum values
     hidden: bool | None = None
     recorder: bool | None = None
     can_update_metadata: bool | None = None
@@ -367,6 +366,14 @@ class UpdateParticipantSerializer(BaseParticipantsManagementSerializer):
                 f"Setting the following participant permissions is not allowed: "
                 f"{', '.join(suspicious_fields)}."
             )
+        if permission.can_subscribe_metrics is not None:
+            raise serializers.ValidationError(
+                {
+                    "permission": {
+                        "can_subscribe_metrics": "This permission is not implemented."
+                    }
+                }
+            )
 
         return permission
 

src/backend/core/tests/rooms/test_api_rooms_participants_management.py

@@ -130,11 +130,10 @@ def test_update_participant_success(mock_livekit_client):
             "can_publish": True,
             "can_publish_data": True,
             "can_publish_sources": [
-                "CAMERA",
-                "MICROPHONE",
-            ],
+                1,
+                2,
+            ],  # [TrackSource.CAMERA, TrackSource.MICROPHONE]
             "can_update_metadata": True,
-            "can_subscribe_metrics": True,
         },
         "name": "John Doe",
     }
@@ -156,14 +155,8 @@ def test_update_participant_success(mock_livekit_client):
         {"can_subscribe": True},
         {"can_publish": True},
         {"can_publish_data": True},
-        {
-            "can_publish_sources": [
-                "CAMERA",
-                "MICROPHONE",
-            ]
-        },
+        {"can_publish_sources": [1, 2]},
         {"can_update_metadata": True},
-        {"can_subscribe_metrics": False},
     ],
 )
 def test_update_participant_permission_fields_are_optional(
@@ -271,6 +264,35 @@ def test_update_participant_suspicious_permission_multiple(mock_suspicious):
     )
 
 
+@pytest.mark.parametrize("value", (False, True))
+def test_update_participant_unimplemented_can_subscribe_metrics(value):
+    """Test update participant raises 400 when can_subscribe_metrics is set."""
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    payload = {
+        "participant_identity": str(uuid4()),
+        "permission": {
+            "can_subscribe": True,
+            "can_publish": True,
+            "can_publish_data": True,
+            "can_update_metadata": False,
+            "can_subscribe_metrics": value,
+        },
+    }
+
+    url = reverse("rooms-update-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_400_BAD_REQUEST
+    assert "can_subscribe_metrics" in str(response.data)
+
+
 def test_update_participant_forbidden_without_access():
     """Test update participant returns 403 when user lacks room privileges."""
     client = APIClient()

src/frontend/panda.config.ts

@@ -274,10 +274,6 @@ const config: Config = {
         min: { value: 'min-content' },
         max: { value: 'max-content' },
         fit: { value: 'fit-content' },
-        // room layout
-        'room-side-panel': { value: '360px' },
-        'room-side-panel-margin': { value: '1.5rem' },
-        'room-control-bar': { value: '80px' },
       },
       spacing,
     }),

src/frontend/src/features/layout/components/RoomContentArea.tsx

@@ -1,72 +0,0 @@
-// RoomContentArea.tsx
-
-import React from 'react'
-import { styled } from '@/styled-system/jsx'
-import { cva } from '@/styled-system/css'
-import { useSubtitles } from '@/features/subtitle/hooks/useSubtitles'
-import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
-import { Subtitles } from '@/features/subtitle/component/Subtitles'
-import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
-
-const RoomViewport = styled(
-  'div',
-  cva({
-    base: {
-      position: 'absolute',
-      maxHeight: '100%',
-      transition: 'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms',
-    },
-    variants: {
-      isSidePanelOpen: {
-        true: {
-          inset: `var(--lk-grid-gap) calc(var(--sizes-room-side-panel) + var(--sizes-room-side-panel-margin) * 2) calc(var(--sizes-room-control-bar) + var(--lk-grid-gap)) 16px`,
-        },
-        false: {
-          inset: `var(--lk-grid-gap) var(--lk-grid-gap) calc(var(--sizes-room-control-bar) + var(--lk-grid-gap))`,
-        },
-      },
-    },
-  })
-)
-
-const TrackAreaContainer = styled(
-  'div',
-  cva({
-    base: {
-      position: 'relative',
-      display: 'flex',
-      width: '100%',
-      transition: 'height .5s cubic-bezier(0.4,0,0.2,1) 5ms',
-    },
-    variants: {
-      areSubtitlesOpen: {
-        true: {
-          height: 'calc(100% - 12rem)',
-        },
-        false: {
-          height: '100%',
-        },
-      },
-    },
-  })
-)
-
-interface RoomContentAreaProps {
-  children: React.ReactNode
-  overlay?: React.ReactNode
-}
-
-export function RoomContentArea({ children }: RoomContentAreaProps) {
-  const { isSidePanelOpen } = useSidePanel()
-  const { areSubtitlesOpen } = useSubtitles()
-
-  return (
-    <RoomViewport isSidePanelOpen={isSidePanelOpen}>
-      <TrackAreaContainer areSubtitlesOpen={areSubtitlesOpen}>
-        {children}
-      </TrackAreaContainer>
-      <Subtitles />
-      <MainNotificationToast />
-    </RoomViewport>
-  )
-}

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useRoomContext } from '@livekit/components-react'
 import { Participant, RemoteParticipant, RoomEvent } from 'livekit-client'
 import { ChatMessage, isMobileBrowser } from '@livekit/components-core'
@@ -10,11 +10,17 @@ import { decodeNotificationDataReceived } from './utils'
 import { useNotificationSound } from '@/features/notifications/hooks/useSoundNotification'
 import { ToastProvider, toastQueue } from './components/ToastProvider'
 import { WaitingParticipantNotification } from './components/WaitingParticipantNotification'
+import {
+  Emoji,
+  Reaction,
+} from '@/features/rooms/livekit/components/controls/ReactionsToggle'
+import {
+  ANIMATION_DURATION,
+  ReactionPortals,
+} from '@/features/rooms/livekit/components/ReactionPortal'
 import { layoutStore } from '@/stores/layout'
 import { PanelId } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
-import { Emoji } from '@/features/reactions/types'
-import { useReactions } from '@/features/reactions/hooks/useReactions'
 
 export const MainNotificationToast = () => {
   const room = useRoomContext()
@@ -22,7 +28,8 @@ export const MainNotificationToast = () => {
   const { t } = useTranslation('notifications')
   const announce = useScreenReaderAnnounce()
 
-  const { appendReaction } = useReactions()
+  const [reactions, setReactions] = useState<Reaction[]>([])
+  const instanceIdRef = useRef(0)
 
   useEffect(() => {
     const handleChatMessage = (
@@ -55,13 +62,21 @@ export const MainNotificationToast = () => {
     }
   }, [room, triggerNotificationSound, announce, t])
 
-  const handleEmoji = useCallback(
-    async (emoji: string, participant: Participant) => {
-      if (!emoji || !Object.values(Emoji).includes(emoji as Emoji)) return
-      await appendReaction(emoji as Emoji, participant)
-    },
-    [appendReaction]
-  )
+  const handleEmoji = (emoji: string, participant: Participant) => {
+    if (!emoji || !Object.values(Emoji).includes(emoji as Emoji)) return
+    const id = instanceIdRef.current++
+    setReactions((prev) => [
+      ...prev,
+      {
+        id,
+        emoji,
+        participant,
+      },
+    ])
+    setTimeout(() => {
+      setReactions((prev) => prev.filter((instance) => instance.id !== id))
+    }, ANIMATION_DURATION)
+  }
 
   useEffect(() => {
     const handleDataReceived = (
@@ -134,7 +149,7 @@ export const MainNotificationToast = () => {
     return () => {
       room.off(RoomEvent.DataReceived, handleDataReceived)
     }
-  }, [room, handleEmoji])
+  }, [room])
 
   useEffect(() => {
     const showJoinNotification = (participant: Participant) => {
@@ -237,6 +252,7 @@ export const MainNotificationToast = () => {
     <Div position="absolute" bottom={0} right={5} zIndex={1000}>
       <ToastProvider />
       <WaitingParticipantNotification />
+      <ReactionPortals reactions={reactions} />
     </Div>
   )
 }

src/frontend/src/features/reactions/constants.ts

@@ -1,5 +0,0 @@
-export const ANIMATION_DURATION = 3000
-export const ANIMATION_DISTANCE = 300
-export const FADE_OUT_THRESHOLD = 0.7
-export const REACTION_SPAWN_WIDTH_RATIO = 0.2
-export const INITIAL_POSITION = 200

src/frontend/src/features/reactions/hooks/useAnnounceReaction.ts

@@ -1,26 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useSnapshot } from 'valtio'
-import { accessibilityStore } from '@/stores/accessibility'
-import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
-
-import { getEmojiLabel } from '../utils'
-import { Reaction } from '../types'
-
-export const useAnnounceReaction = (latestReaction: Reaction | undefined) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
-  const { announceReactions } = useSnapshot(accessibilityStore)
-  const [lastAnnouncedId, setLastAnnouncedId] = useState<string | null>(null)
-  const announce = useScreenReaderAnnounce()
-
-  useEffect(() => {
-    if (!announceReactions || !latestReaction) return
-    if (latestReaction.id === lastAnnouncedId) return
-
-    const emojiLabel = getEmojiLabel(latestReaction.emoji, t)
-    const participantName = latestReaction.participantName
-
-    announce(t('announce', { name: participantName, emoji: emojiLabel }))
-    setLastAnnouncedId(latestReaction.id)
-  }, [announce, latestReaction, lastAnnouncedId, announceReactions, t])
-}

src/frontend/src/features/reactions/hooks/useReactions.ts

@@ -1,56 +0,0 @@
-import { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { reactionsStore } from '@/stores/reactions'
-import { NotificationType } from '@/features/notifications/NotificationType'
-import { useNotifyParticipants } from '@/features/notifications'
-import useRateLimiter from '@/hooks/useRateLimiter'
-import { Participant } from 'livekit-client'
-import { Emoji } from '../types'
-import { ANIMATION_DURATION } from '../constants'
-
-export const useReactions = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
-  const { notifyParticipants } = useNotifyParticipants()
-
-  const appendReaction = useCallback(
-    (emoji: Emoji, participant?: Participant) => {
-      const newReaction = {
-        id: `${emoji}-${Date.now()}-${Math.random()}`,
-        emoji,
-        participantName: participant
-          ? participant.name || participant.identity
-          : t('you'),
-        isLocal: !participant,
-      }
-
-      reactionsStore.reactions.push(newReaction)
-
-      setTimeout(() => {
-        const index = reactionsStore.reactions.findIndex(
-          (r) => r.id === newReaction.id
-        )
-        if (index !== -1) reactionsStore.reactions.splice(index, 1)
-      }, ANIMATION_DURATION)
-    },
-    [t]
-  )
-
-  const sendReaction = async (emoji: Emoji) => {
-    await notifyParticipants({
-      type: NotificationType.ReactionReceived,
-      additionalData: { data: { emoji } },
-    })
-    appendReaction(emoji)
-  }
-
-  const debouncedSendReaction = useRateLimiter({
-    callback: sendReaction,
-    maxCalls: 10,
-    windowMs: 1000,
-  })
-
-  return {
-    sendReaction: debouncedSendReaction,
-    appendReaction,
-  }
-}

src/frontend/src/features/reactions/types.ts

@@ -1,17 +0,0 @@
-export enum Emoji {
-  THUMBS_UP = 'thumbs-up',
-  THUMBS_DOWN = 'thumbs-down',
-  CLAP = 'clapping-hands',
-  HEART = 'red-heart',
-  LAUGHING = 'face-with-tears-of-joy',
-  SURPRISED = 'face-with-open-mouth',
-  CELEBRATION = 'party-popper',
-  PLEASE = 'folded-hands',
-}
-
-export interface Reaction {
-  id: string
-  emoji: Emoji
-  participantName: string
-  isLocal: boolean
-}

src/frontend/src/features/rooms/livekit/components/ReactionPortal.tsx

@@ -2,17 +2,19 @@ import { createPortal } from 'react-dom'
 import { useState, useEffect, useMemo } from 'react'
 import { Text } from '@/primitives'
 import { css } from '@/styled-system/css'
+import { Participant } from 'livekit-client'
+import { useTranslation } from 'react-i18next'
+import { Reaction } from '@/features/rooms/livekit/components/controls/ReactionsToggle'
+import { getEmojiLabel } from '@/features/rooms/livekit/utils/reactionUtils'
+import { accessibilityStore } from '@/stores/accessibility'
 import { useSnapshot } from 'valtio'
-import { reactionsStore } from '@/stores/reactions'
-import { useAnnounceReaction } from '../hooks/useAnnounceReaction'
-import { Reaction } from '../types'
-import {
-  ANIMATION_DISTANCE,
-  ANIMATION_DURATION,
-  FADE_OUT_THRESHOLD,
-  INITIAL_POSITION,
-  REACTION_SPAWN_WIDTH_RATIO,
-} from '../constants'
+import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
+
+export const ANIMATION_DURATION = 3000
+export const ANIMATION_DISTANCE = 300
+export const FADE_OUT_THRESHOLD = 0.7
+export const REACTION_SPAWN_WIDTH_RATIO = 0.2
+export const INITIAL_POSITION = 200
 
 interface FloatingReactionProps {
   emoji: string
@@ -77,7 +79,7 @@ export function FloatingReaction({
     >
       <img
         src={`/assets/reactions/${emoji}.png`}
-        alt=""
+        alt={''}
         className={css({
           height: '50px',
         })}
@@ -114,7 +116,14 @@ export function FloatingReaction({
   )
 }
 
-const ReactionPortal = ({ reaction }: { reaction: Reaction }) => {
+export function ReactionPortal({
+  emoji,
+  participant,
+}: {
+  emoji: string
+  participant: Participant
+}) {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
   const speed = useMemo(() => Math.random() * 1.5 + 0.5, [])
   const scale = useMemo(() => Math.max(Math.random() + 0.5, 1), [])
   return createPortal(
@@ -129,27 +138,51 @@ const ReactionPortal = ({ reaction }: { reaction: Reaction }) => {
       })}
     >
       <FloatingReaction
-        emoji={reaction.emoji}
+        emoji={emoji}
         speed={speed}
         scale={scale}
-        name={reaction.participantName}
-        isLocal={reaction?.isLocal}
+        name={participant?.isLocal ? t('you') : participant.name}
+        isLocal={participant?.isLocal}
       />
     </div>,
     document.body
   )
 }
 
-export const ReactionPortals = () => {
-  const { reactions } = useSnapshot(reactionsStore)
-  const latestReaction = reactions.at(-1)
+export const ReactionPortals = ({ reactions }: { reactions: Reaction[] }) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
+  const { announceReactions } = useSnapshot(accessibilityStore)
+  const [lastAnnouncedId, setLastAnnouncedId] = useState<number | null>(null)
+  const announce = useScreenReaderAnnounce()
 
-  useAnnounceReaction(latestReaction)
+  const latestReaction =
+    reactions.length > 0 ? reactions[reactions.length - 1] : undefined
+
+  useEffect(() => {
+    if (!announceReactions) {
+      return
+    }
+    if (!latestReaction) return
+    const isNewReaction = latestReaction.id !== lastAnnouncedId
+    if (!isNewReaction) return
+
+    const emojiLabel = getEmojiLabel(latestReaction.emoji, t)
+    const participantName = latestReaction.participant?.isLocal
+      ? t('you')
+      : latestReaction.participant?.name?.trim() ||
+        t('someone', { defaultValue: 'Someone' })
+    announce(t('announce', { name: participantName, emoji: emojiLabel }))
+    setLastAnnouncedId(latestReaction.id)
+  }, [announce, latestReaction, lastAnnouncedId, announceReactions, t])
 
   return (
     <>
       {reactions.map((instance) => (
-        <ReactionPortal key={instance.id} reaction={instance} />
+        <ReactionPortal
+          key={instance.id}
+          emoji={instance.emoji}
+          participant={instance.participant}
+        />
       ))}
     </>
   )

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

@@ -51,20 +51,17 @@ const StyledSidePanel = ({
       overflow: 'hidden',
       display: 'flex',
       flexDirection: 'column',
-      margin: 'var(--sizes-room-side-panel-margin)',
-      marginLeft: 0,
+      margin: '1.5rem 1.5rem 1.5rem 0',
       padding: 0,
       gap: 0,
       right: 0,
       top: 0,
-      bottom: 'var(--sizes-room-control-bar)',
-      width: 'var(--sizes-room-side-panel)',
+      bottom: '80px',
+      width: '360px',
       transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
     })}
     style={{
-      transform: isClosed
-        ? 'translateX(calc(var(--sizes-room-side-panel) + var(--sizes-room-side-panel-margin)))'
-        : 'none',
+      transform: isClosed ? 'translateX(calc(360px + 1.5rem))' : 'none',
     }}
     aria-hidden={isClosed}
     aria-label={ariaLabel}

src/frontend/src/features/rooms/livekit/components/controls/ReactionsToggle.tsx

@@ -1,9 +1,16 @@
 import { useTranslation } from 'react-i18next'
 import { RiEmotionLine } from '@remixicon/react'
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import { css } from '@/styled-system/css'
+import { useRoomContext } from '@livekit/components-react'
 import { ToggleButton, Button } from '@/primitives'
-
+import { NotificationType } from '@/features/notifications/NotificationType'
+import { NotificationPayload } from '@/features/notifications/NotificationPayload'
+import {
+  ANIMATION_DURATION,
+  ReactionPortals,
+} from '@/features/rooms/livekit/components/ReactionPortal'
+import { getEmojiLabel } from '@/features/rooms/livekit/utils/reactionUtils'
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 import {
   Popover as RACPopover,
@@ -11,21 +18,72 @@ import {
   DialogTrigger,
 } from 'react-aria-components'
 import { FocusScope } from '@react-aria/focus'
-import { useReactions } from '../hooks/useReactions'
-import { Emoji } from '../types'
-import { getEmojiLabel } from '../utils'
+import { Participant } from 'livekit-client'
+import useRateLimiter from '@/hooks/useRateLimiter'
+
+// eslint-disable-next-line react-refresh/only-export-components
+export enum Emoji {
+  THUMBS_UP = 'thumbs-up',
+  THUMBS_DOWN = 'thumbs-down',
+  CLAP = 'clapping-hands',
+  HEART = 'red-heart',
+  LAUGHING = 'face-with-tears-of-joy',
+  SURPRISED = 'face-with-open-mouth',
+  CELEBRATION = 'party-popper',
+  PLEASE = 'folded-hands',
+}
+
+export interface Reaction {
+  id: number
+  emoji: string
+  participant: Participant
+}
 
 export const ReactionsToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
-  const [isOpen, setIsOpen] = useState(false)
+  const [reactions, setReactions] = useState<Reaction[]>([])
+  const instanceIdRef = useRef(0)
+  const room = useRoomContext()
 
-  const { sendReaction } = useReactions()
+  const [isOpen, setIsOpen] = useState(false)
 
   useRegisterKeyboardShortcut({
     id: 'reaction',
     handler: () => setIsOpen((prev) => !prev),
   })
 
+  const sendReaction = async (emoji: string) => {
+    const encoder = new TextEncoder()
+    const payload: NotificationPayload = {
+      type: NotificationType.ReactionReceived,
+      data: {
+        emoji: emoji,
+      },
+    }
+    const data = encoder.encode(JSON.stringify(payload))
+    await room.localParticipant.publishData(data, { reliable: true })
+
+    const newReaction = {
+      id: instanceIdRef.current++,
+      emoji,
+      participant: room.localParticipant,
+    }
+    setReactions((prev) => [...prev, newReaction])
+
+    // Remove this reaction after animation
+    setTimeout(() => {
+      setReactions((prev) =>
+        prev.filter((instance) => instance.id !== newReaction.id)
+      )
+    }, ANIMATION_DURATION)
+  }
+
+  const debouncedSendReaction = useRateLimiter({
+    callback: sendReaction,
+    maxCalls: 10,
+    windowMs: 1000,
+  })
+
   return (
     <>
       <div className={css({ position: 'relative' })}>
@@ -72,7 +130,7 @@ export const ReactionsToggle = () => {
                   {Object.values(Emoji).map((emoji, index) => (
                     <Button
                       key={index}
-                      onPress={() => sendReaction(emoji)}
+                      onPress={() => debouncedSendReaction(emoji)}
                       aria-label={t('send', { emoji: getEmojiLabel(emoji, t) })}
                       variant="primaryTextDark"
                       size="sm"
@@ -97,6 +155,7 @@ export const ReactionsToggle = () => {
           </RACPopover>
         </DialogTrigger>
       </div>
+      <ReactionPortals reactions={reactions} />
     </>
   )
 }

src/frontend/src/features/rooms/livekit/components/layout/GridLayout.tsx

@@ -7,9 +7,9 @@ import {
   useSwipe,
 } from '@livekit/components-react'
 import { mergeProps } from '@/utils/mergeProps'
-import { PaginationIndicator } from './PaginationIndicator'
-import { useGridLayout } from '../hooks/useGridLayout'
-import { PaginationControl } from './PaginationControl'
+import { PaginationIndicator } from '../controls/PaginationIndicator'
+import { useGridLayout } from '../../hooks/useGridLayout'
+import { PaginationControl } from '../controls/PaginationControl'
 
 /** @public */
 export interface GridLayoutProps

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx

@@ -3,6 +3,7 @@ import { ControlBarAuxProps } from './ControlBar'
 import { css } from '@/styled-system/css'
 import { LeaveButton } from '../../components/controls/LeaveButton'
 import { Track } from 'livekit-client'
+import { ReactionsToggle } from '../../components/controls/ReactionsToggle'
 import { HandToggle } from '../../components/controls/HandToggle'
 import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
 import { SubtitlesToggle } from '../../components/controls/SubtitlesToggle'
@@ -14,7 +15,6 @@ import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKey
 import { useFullScreen } from '../../hooks/useFullScreen'
 import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
 import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl'
-import { ReactionsToggle } from '@/features/reactions/components/ReactionsToggle'
 
 export function DesktopControlBar({
   onDeviceError,

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

@@ -20,9 +20,13 @@ import {
 import { useTranslation } from 'react-i18next'
 
 import { ControlBar } from './ControlBar/ControlBar'
+import { styled } from '@/styled-system/jsx'
+import { cva } from '@/styled-system/css'
+import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
 import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
 import { SidePanel } from '../components/SidePanel'
+import { useSidePanel } from '../hooks/useSidePanel'
 import { RecordingProvider } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { useConnectionObserver } from '../hooks/useConnectionObserver'
@@ -33,13 +37,35 @@ import { useSettingsDialog } from '@/features/settings'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { useVideoResolutionSubscription } from '../hooks/useVideoResolutionSubscription'
 import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
+import { useSubtitles } from '@/features/subtitle/hooks/useSubtitles'
+import { Subtitles } from '@/features/subtitle/component/Subtitles'
+import { CarouselLayout } from '../components/layout/CarouselLayout'
+import { GridLayout } from '../components/layout/GridLayout'
 import { IsIdleDisconnectModal } from '../components/IsIdleDisconnectModal'
 import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
-import { ReactionPortals } from '@/features/reactions/components/ReactionPortals'
-import { CarouselLayout } from '@/features/layout/components/CarouselLayout'
-import { GridLayout } from '@/features/layout/components/GridLayout'
-import { RoomContentArea } from '@/features/layout/components/RoomContentArea'
+
+const LayoutWrapper = styled(
+  'div',
+  cva({
+    base: {
+      position: 'relative',
+      display: 'flex',
+      width: '100%',
+      transition: 'height .5s cubic-bezier(0.4,0,0.2,1) 5ms',
+    },
+    variants: {
+      areSubtitlesOpen: {
+        true: {
+          height: 'calc(100% - 12rem)',
+        },
+        false: {
+          height: '100%',
+        },
+      },
+    },
+  })
+)
 
 /**
  * @public
@@ -227,6 +253,9 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
   ])
   /* eslint-enable react-hooks/exhaustive-deps */
 
+  const { isSidePanelOpen } = useSidePanel()
+  const { areSubtitlesOpen } = useSubtitles()
+
   const [isShareErrorVisible, setIsShareErrorVisible] = useState(false)
 
   return (
@@ -247,35 +276,57 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
             onClose={() => setIsShareErrorVisible(false)}
           />
           <IsIdleDisconnectModal />
-          <RoomContentArea>
-            {!focusTrack ? (
+          <div
+            // todo - extract these magic values into constant
+            style={{
+              position: 'absolute',
+              inset: isSidePanelOpen
+                ? `var(--lk-grid-gap) calc(358px + 3rem) calc(80px + var(--lk-grid-gap)) 16px`
+                : `var(--lk-grid-gap) var(--lk-grid-gap) calc(80px + var(--lk-grid-gap))`,
+              transition: 'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms',
+              maxHeight: '100%',
+            }}
+          >
+            <LayoutWrapper areSubtitlesOpen={areSubtitlesOpen}>
               <div
-                className="lk-grid-layout-wrapper"
-                style={{ height: 'auto' }}
+                style={{
+                  display: 'flex',
+                  position: 'relative',
+                  width: '100%',
+                }}
               >
-                <GridLayout tracks={tracks} style={{ padding: 0 }}>
-                  <ParticipantTile />
-                </GridLayout>
-              </div>
-            ) : (
-              <div
-                className="lk-focus-layout-wrapper"
-                style={{ height: 'auto' }}
-              >
-                <FocusLayoutContainer style={{ padding: 0 }}>
-                  <CarouselLayout
-                    tracks={carouselTracks}
-                    style={{
-                      minWidth: '200px',
-                    }}
+                {!focusTrack ? (
+                  <div
+                    className="lk-grid-layout-wrapper"
+                    style={{ height: 'auto' }}
                   >
-                    <ParticipantTile />
-                  </CarouselLayout>
-                  {focusTrack && <FocusLayout trackRef={focusTrack} />}
-                </FocusLayoutContainer>
+                    <GridLayout tracks={tracks} style={{ padding: 0 }}>
+                      <ParticipantTile />
+                    </GridLayout>
+                  </div>
+                ) : (
+                  <div
+                    className="lk-focus-layout-wrapper"
+                    style={{ height: 'auto' }}
+                  >
+                    <FocusLayoutContainer style={{ padding: 0 }}>
+                      <CarouselLayout
+                        tracks={carouselTracks}
+                        style={{
+                          minWidth: '200px',
+                        }}
+                      >
+                        <ParticipantTile />
+                      </CarouselLayout>
+                      {focusTrack && <FocusLayout trackRef={focusTrack} />}
+                    </FocusLayoutContainer>
+                  </div>
+                )}
               </div>
-            )}
-          </RoomContentArea>
+            </LayoutWrapper>
+            <Subtitles />
+            <MainNotificationToast />
+          </div>
           <ControlBar
             onDeviceError={(e) => {
               console.error(e)
@@ -295,7 +346,6 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
       <ConnectionStateToast />
       <RecordingProvider />
       <SettingsDialogProvider />
-      <ReactionPortals />
     </div>
   )
 }

src/frontend/src/stores/reactions.ts

@@ -1,10 +0,0 @@
-import { proxy } from 'valtio'
-import { Reaction } from '@/features/reactions/types'
-
-type State = {
-  reactions: Reaction[]
-}
-
-export const reactionsStore = proxy<State>({
-  reactions: [],
-})

src/helm/env.d/dev-dinum/values.meet.yaml.gotmpl

@@ -1,29 +1,3 @@
-_summaryEnvVars: &summaryEnvVars
-  APP_NAME: summary-microservice
-  APP_API_TOKEN: password
-  AWS_STORAGE_BUCKET_NAME: meet-media-storage
-  AWS_S3_ENDPOINT_URL: http://minio.meet.svc.cluster.local:9000/
-  AWS_S3_ACCESS_KEY_ID: meet
-  AWS_S3_SECRET_ACCESS_KEY: password
-  AWS_S3_SECURE_ACCESS: False
-  WHISPERX_API_KEY: your-secret-value
-  WHISPERX_BASE_URL: https://configure-your-url.com
-  WHISPERX_ASR_MODEL: large-v2
-  WHISPERX_DEFAULT_LANGUAGE: fr
-  LLM_BASE_URL: https://configure-your-url.com
-  LLM_API_KEY: your-secret-value
-  LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
-  WEBHOOK_API_TOKEN: password
-  WEBHOOK_URL: https://www.mock-impress.com/webhook/
-  CELERY_BROKER_URL: redis://default:pass@redis-master:6379/1
-  CELERY_RESULT_BACKEND: redis://default:pass@redis-master:6379/1
-  TASK_TRACKER_REDIS_URL: redis://default:pass@redis-master:6379/1
-
-_summaryImage: &summaryImage
-  repository: localhost:5001/meet-summary
-  pullPolicy: Always
-  tag: "latest"
-
 image:
   repository: localhost:5001/meet-backend
   pullPolicy: Always
@@ -168,15 +142,66 @@ posthog:
 
 summary:
   replicas: 1
-  image: *summaryImage
   envVars:
-    <<: *summaryEnvVars
+    APP_NAME: summary-microservice
+    APP_API_TOKEN: password
+    AWS_STORAGE_BUCKET_NAME: meet-media-storage
+    AWS_S3_ENDPOINT_URL: minio.meet.svc.cluster.local:9000
+    AWS_S3_ACCESS_KEY_ID: meet
+    AWS_S3_SECRET_ACCESS_KEY: password
+    AWS_S3_SECURE_ACCESS: False
+    WHISPERX_API_KEY: your-secret-value
+    WHISPERX_BASE_URL: https://configure-your-url.com
+    WHISPERX_ASR_MODEL: large-v2
+    LLM_BASE_URL: https://configure-your-url.com
+    LLM_API_KEY: your-secret-value
+    LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
+    WEBHOOK_API_TOKEN: password
+    WEBHOOK_URL: https://www.mock-impress.com/webhook/
+    CELERY_BROKER_URL: redis://default:pass@redis-master:6379/1
+    CELERY_RESULT_BACKEND: redis://default:pass@redis-master:6379/1
+  
+  image:
+    repository: localhost:5001/meet-summary
+    pullPolicy: Always
+    tag: "latest"
+  
+  command:
+    - "uvicorn"
+    - "summary.main:app"
+    - "--host"
+    - "0.0.0.0"
+    - "--port"
+    - "8000"
+    - "--reload"
 
 celeryTranscribe:
   replicas: 1
-  image: *summaryImage
   envVars:
-    <<: *summaryEnvVars
+    APP_NAME: summary-microservice
+    APP_API_TOKEN: password
+    AWS_STORAGE_BUCKET_NAME: meet-media-storage
+    AWS_S3_ENDPOINT_URL: minio.meet.svc.cluster.local:9000
+    AWS_S3_ACCESS_KEY_ID: meet
+    AWS_S3_SECRET_ACCESS_KEY: password
+    AWS_S3_SECURE_ACCESS: False
+    WHISPERX_API_KEY: your-secret-value
+    WHISPERX_BASE_URL: https://configure-your-url.com
+    WHISPERX_ASR_MODEL: large-v2
+    LLM_BASE_URL: https://configure-your-url.com
+    LLM_API_KEY: your-secret-value
+    LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
+    WEBHOOK_API_TOKEN: password
+    WEBHOOK_URL: https://www.mock-impress.com/webhook/
+    CELERY_BROKER_URL: redis://default:pass@redis-master:6379/1
+    CELERY_RESULT_BACKEND: redis://default:pass@redis-master:6379/1
+    TASK_TRACKER_REDIS_URL: redis://default:pass@redis-master:6379/1
+
+  image:
+    repository: localhost:5001/meet-summary
+    pullPolicy: Always
+    tag: "latest"
+
   command:
     - "celery"
     - "-A"
@@ -188,9 +213,31 @@ celeryTranscribe:
 
 celerySummarize:
   replicas: 1
-  image: *summaryImage
   envVars:
-    <<: *summaryEnvVars
+    APP_NAME: summary-microservice
+    APP_API_TOKEN: password
+    AWS_STORAGE_BUCKET_NAME: meet-media-storage
+    AWS_S3_ENDPOINT_URL: minio.meet.svc.cluster.local:9000
+    AWS_S3_ACCESS_KEY_ID: meet
+    AWS_S3_SECRET_ACCESS_KEY: password
+    AWS_S3_SECURE_ACCESS: False
+    WHISPERX_API_KEY: your-secret-value
+    WHISPERX_BASE_URL: https://configure-your-url.com
+    WHISPERX_ASR_MODEL: large-v2
+    LLM_BASE_URL: https://configure-your-url.com
+    LLM_API_KEY: your-secret-value
+    LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
+    WEBHOOK_API_TOKEN: password
+    WEBHOOK_URL: https://www.mock-impress.com/webhook/
+    CELERY_BROKER_URL: redis://default:pass@redis-master:6379/1
+    CELERY_RESULT_BACKEND: redis://default:pass@redis-master:6379/1
+    TASK_TRACKER_REDIS_URL: redis://default:pass@redis-master:6379/1
+
+  image:
+    repository: localhost:5001/meet-summary
+    pullPolicy: Always
+    tag: "latest"
+
   command:
     - "celery"
     - "-A"

src/helm/env.d/dev-keycloak/values.meet.yaml.gotmpl

@@ -1,29 +1,3 @@
-_summaryEnvVars: &summaryEnvVars
-  APP_NAME: summary-microservice
-  APP_API_TOKEN: password
-  AWS_STORAGE_BUCKET_NAME: meet-media-storage
-  AWS_S3_ENDPOINT_URL: http://minio.meet.svc.cluster.local:9000/
-  AWS_S3_ACCESS_KEY_ID: meet
-  AWS_S3_SECRET_ACCESS_KEY: password
-  AWS_S3_SECURE_ACCESS: False
-  WHISPERX_API_KEY: your-secret-value
-  WHISPERX_BASE_URL: https://configure-your-url.com
-  WHISPERX_ASR_MODEL: large-v2
-  WHISPERX_DEFAULT_LANGUAGE: fr
-  LLM_BASE_URL: https://configure-your-url.com
-  LLM_API_KEY: your-secret-value
-  LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
-  WEBHOOK_API_TOKEN: password
-  WEBHOOK_URL: https://www.mock-impress.com/webhook/
-  CELERY_BROKER_URL: redis://default:pass@redis-master:6379/1
-  CELERY_RESULT_BACKEND: redis://default:pass@redis-master:6379/1
-  TASK_TRACKER_REDIS_URL: redis://default:pass@redis-master:6379/1
-
-_summaryImage: &summaryImage
-  repository: localhost:5001/meet-summary
-  pullPolicy: Always
-  tag: "latest"
-
 image:
   repository: localhost:5001/meet-backend
   pullPolicy: Always
@@ -186,15 +160,69 @@ posthog:
 
 summary:
   replicas: 1
-  image: *summaryImage
   envVars:
-    <<: *summaryEnvVars
+    APP_NAME: summary-microservice
+    APP_API_TOKEN: password
+    AWS_STORAGE_BUCKET_NAME: meet-media-storage
+    AWS_S3_ENDPOINT_URL: http://minio.meet.svc.cluster.local:9000/
+    AWS_S3_ACCESS_KEY_ID: meet
+    AWS_S3_SECRET_ACCESS_KEY: password
+    AWS_S3_SECURE_ACCESS: False
+    WHISPERX_API_KEY: your-secret-value
+    WHISPERX_BASE_URL: https://configure-your-url.com
+    WHISPERX_ASR_MODEL: large-v2
+    WHISPERX_DEFAULT_LANGUAGE: fr
+    LLM_BASE_URL: https://configure-your-url.com
+    LLM_API_KEY: your-secret-value
+    LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
+    WEBHOOK_API_TOKEN: password
+    WEBHOOK_URL: https://www.mock-impress.com/webhook/
+    CELERY_BROKER_URL: redis://default:pass@redis-master:6379/1
+    CELERY_RESULT_BACKEND: redis://default:pass@redis-master:6379/1
+    TASK_TRACKER_REDIS_URL: redis://default:pass@redis-master:6379/1
+  
+  image:
+    repository: localhost:5001/meet-summary
+    pullPolicy: Always
+    tag: "latest"
+  
+  command:
+    - "uvicorn"
+    - "summary.main:app"
+    - "--host"
+    - "0.0.0.0"
+    - "--port"
+    - "8000"
+    - "--reload"
 
 celeryTranscribe:
   replicas: 1
-  image: *summaryImage
   envVars:
-    <<: *summaryEnvVars
+    APP_NAME: summary-microservice
+    APP_API_TOKEN: password
+    AWS_STORAGE_BUCKET_NAME: meet-media-storage
+    AWS_S3_ENDPOINT_URL: http://minio.meet.svc.cluster.local:9000/
+    AWS_S3_ACCESS_KEY_ID: meet
+    AWS_S3_SECRET_ACCESS_KEY: password
+    AWS_S3_SECURE_ACCESS: False
+    WHISPERX_API_KEY: your-secret-value
+    WHISPERX_BASE_URL: https://configure-your-url.com
+    WHISPERX_ASR_MODEL: large-v2
+    WHISPERX_DEFAULT_LANGUAGE: fr
+    LLM_BASE_URL: https://configure-your-url.com
+    LLM_API_KEY: your-secret-value
+    LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
+    WEBHOOK_API_TOKEN: password
+    WEBHOOK_URL: https://www.mock-impress.com/webhook/
+    CELERY_BROKER_URL: redis://default:pass@redis-master:6379/1
+    CELERY_RESULT_BACKEND: redis://default:pass@redis-master:6379/1
+    TASK_TRACKER_REDIS_URL: redis://default:pass@redis-master:6379/1
+  
+  image:
+    repository: localhost:5001/meet-summary
+    pullPolicy: Always
+    tag: "latest"
+
   command:
     - "celery"
     - "-A"
@@ -207,9 +235,32 @@ celeryTranscribe:
 
 celerySummarize:
   replicas: 1
-  image: *summaryImage
   envVars:
-    <<: *summaryEnvVars
+    APP_NAME: summary-microservice
+    APP_API_TOKEN: password
+    AWS_STORAGE_BUCKET_NAME: meet-media-storage
+    AWS_S3_ENDPOINT_URL: http://minio.meet.svc.cluster.local:9000/
+    AWS_S3_ACCESS_KEY_ID: meet
+    AWS_S3_SECRET_ACCESS_KEY: password
+    AWS_S3_SECURE_ACCESS: False
+    WHISPERX_API_KEY: your-secret-value
+    WHISPERX_BASE_URL: https://configure-your-url.com
+    WHISPERX_ASR_MODEL: large-v2
+    WHISPERX_DEFAULT_LANGUAGE: fr
+    LLM_BASE_URL: https://configure-your-url.com
+    LLM_API_KEY: your-secret-value
+    LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
+    WEBHOOK_API_TOKEN: password
+    WEBHOOK_URL: https://www.mock-impress.com/webhook/
+    CELERY_BROKER_URL: redis://default:pass@redis-master:6379/1
+    CELERY_RESULT_BACKEND: redis://default:pass@redis-master:6379/1
+    TASK_TRACKER_REDIS_URL: redis://default:pass@redis-master:6379/1
+
+  image:
+    repository: localhost:5001/meet-summary
+    pullPolicy: Always
+    tag: "latest"
+
   command:
     - "celery"
     - "-A"