diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx
new file mode 100644
index 00000000..49ed44b7
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx
@@ -0,0 +1,22 @@
+import { useTranslation } from 'react-i18next'
+import { RiMore2Line } from '@remixicon/react'
+import { Button } from '@/primitives'
+import { OptionsMenu } from '@/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx'
+import { MenuTrigger } from 'react-aria-components'
+
+export const OptionsButton = () => {
+ const { t } = useTranslation('rooms')
+ return (
+
+
+
+
+ )
+}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx
new file mode 100644
index 00000000..0fb6dc40
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx
@@ -0,0 +1,88 @@
+import { useTranslation } from 'react-i18next'
+import {
+ RiFeedbackLine,
+ RiQuestionLine,
+ RiSettings3Line,
+} from '@remixicon/react'
+import { styled } from '@/styled-system/jsx'
+import {
+ Menu as RACMenu,
+ MenuItem as RACMenuItem,
+ Popover as RACPopover,
+} from 'react-aria-components'
+
+// Styled components to be refactored
+const StyledMenu = styled(RACMenu, {
+ base: {
+ maxHeight: 'inherit',
+ boxSizing: 'border-box',
+ overflow: 'auto',
+ padding: '2px',
+ minWidth: '150px',
+ outline: 'none',
+ },
+})
+
+const StyledMenuItem = styled(RACMenuItem, {
+ base: {
+ margin: '2px',
+ padding: '0.286rem 0.571rem',
+ borderRadius: '6px',
+ outline: 'none',
+ cursor: 'default',
+ color: 'black',
+ fontSize: '1.072rem',
+ position: 'relative',
+ display: 'flex',
+ alignItems: 'center',
+ gap: '20px',
+ forcedColorAdjust: 'none',
+ '&[data-focused]': {
+ color: 'primary.text',
+ backgroundColor: 'primary',
+ outline: 'none!',
+ },
+ },
+})
+
+const StyledPopover = styled(RACPopover, {
+ base: {
+ border: '1px solid #9ca3af',
+ boxShadow: '0 8px 20px rgba(0, 0, 0, 0.1)',
+ borderRadius: '4px',
+ background: 'white',
+ color: 'var(--text-color)',
+ outline: 'none',
+ minWidth: '112px',
+ width: '300px',
+ },
+})
+
+export const OptionsMenu = () => {
+ const { t } = useTranslation('rooms')
+
+ return (
+
+
+
+
+ {t('options.items.support')}
+
+
+
+ {t('options.items.feedbacks')}
+
+ alert('delete')}>
+
+ {t('options.items.settings')}
+
+
+
+ )
+}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/SettingsMenuToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/SettingsMenuToggle.tsx
deleted file mode 100644
index 1cd1fa77..00000000
--- a/src/frontend/src/features/rooms/livekit/components/controls/SettingsMenuToggle.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from 'react'
-import { useLayoutContext } from '@livekit/components-react'
-import { mergeProps } from '@/utils/mergeProps'
-
-/** @alpha */
-export interface UseSettingsToggleProps {
- props: React.ButtonHTMLAttributes
-}
-
-/**
- * The `useSettingsToggle` hook provides state and functions for toggling the settings menu.
- * @remarks
- * Depends on the `LayoutContext` to work properly.
- * @see {@link SettingsMenu}
- * @alpha
- */
-export function useSettingsToggle({ props }: UseSettingsToggleProps) {
- const { dispatch, state } = useLayoutContext().widget
- const className = 'lk-button lk-settings-toggle'
-
- const mergedProps = React.useMemo(() => {
- return mergeProps(props, {
- className,
- onClick: () => {
- if (dispatch) dispatch({ msg: 'toggle_settings' })
- },
- 'aria-pressed': state?.showSettings ? 'true' : 'false',
- })
- }, [props, className, dispatch, state])
-
- return { mergedProps }
-}
-
-/** @alpha */
-export interface SettingsMenuToggleProps
- extends React.ButtonHTMLAttributes {}
-
-/**
- * The `SettingsMenuToggle` component is a button that toggles the visibility of the `SettingsMenu` component.
- * @remarks
- * For the component to have any effect it has to live inside a `LayoutContext` context.
- *
- * @alpha
- */
-export const SettingsMenuToggle: (
- props: SettingsMenuToggleProps & React.RefAttributes
-) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
- HTMLButtonElement,
- SettingsMenuToggleProps
->(function SettingsMenuToggle(props: SettingsMenuToggleProps, ref) {
- const { mergedProps } = useSettingsToggle({ props })
-
- return (
-
- )
-})
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
index a8036867..e34b3209 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
@@ -7,7 +7,6 @@ import {
ChatIcon,
ChatToggle,
DisconnectButton,
- GearIcon,
LeaveIcon,
MediaDeviceMenu,
TrackToggle,
@@ -15,12 +14,11 @@ import {
usePersistentUserChoices,
} from '@livekit/components-react'
-import { SettingsMenuToggle } from '../components/controls/SettingsMenuToggle'
import { mergeProps } from '@/utils/mergeProps.ts'
import { StartMediaButton } from '../components/controls/StartMediaButton'
import { useMediaQuery } from '../hooks/useMediaQuery'
import { useTranslation } from 'react-i18next'
-import { SettingsButton } from '@/features/settings'
+import { OptionsButton } from '../components/controls/Options/OptionsButton'
/** @public */
export type ControlBarControls = {
@@ -189,10 +187,7 @@ export function ControlBar({
{showIcon && }
{showText && t('controls.chat')}
-
- {showIcon && }
- {showText && t('controls.settings')}
-
+
{showIcon && }
{showText && t('controls.leave')}
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
index 28afb91e..1b4660e1 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
@@ -187,14 +187,6 @@ export function VideoConference({
messageEncoder={chatMessageEncoder}
messageDecoder={chatMessageDecoder}
/>
- {SettingsComponent && (
-
-
-
- )}
)}
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index fe64376c..2822472d 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -29,7 +29,14 @@
"shareScreen": "",
"stopScreenShare": "",
"chat": "",
- "settings": "",
"leave": ""
+ },
+ "options": {
+ "buttonLabel": "",
+ "items": {
+ "feedbacks": "",
+ "support": "",
+ "settings": ""
+ }
}
}
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index b2822464..c5fdc06b 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -29,7 +29,14 @@
"shareScreen": "Share screen",
"stopScreenShare": "Stop screen share",
"chat": "Chat",
- "settings": "Settings",
"leave": "Leave"
+ },
+ "options": {
+ "buttonLabel": "More Options",
+ "items": {
+ "feedbacks": "Give us feedbacks",
+ "support": "Get Help on Tchap",
+ "settings": "Settings"
+ }
}
}
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 8a38cc48..b7746682 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -29,7 +29,14 @@
"shareScreen": "Partager l'écran",
"stopScreenShare": "Arrêter le partage",
"chat": "Chat",
- "settings": "Paramètres",
"leave": "Quitter"
+ },
+ "options": {
+ "buttonLabel": "Plus d'options",
+ "items": {
+ "feedbacks": "Partager votre avis",
+ "support": "Obtenir de l'aide sur Tchap",
+ "settings": "Paramètres"
+ }
}
}
diff --git a/src/frontend/src/primitives/Button.tsx b/src/frontend/src/primitives/Button.tsx
index b93b6a34..fad77e61 100644
--- a/src/frontend/src/primitives/Button.tsx
+++ b/src/frontend/src/primitives/Button.tsx
@@ -103,6 +103,17 @@ const button = cva({
width: 'full',
},
},
+ legacyStyle: {
+ true: {
+ borderColor: 'gray.400',
+ '&[data-hovered]': {
+ borderColor: 'gray.500',
+ },
+ '&[data-pressed]': {
+ borderColor: 'gray.500',
+ },
+ },
+ },
},
defaultVariants: {
size: 'default',