Дизайн звонков

This commit is contained in:
RoyceDa
2026-02-28 12:48:53 +02:00
parent 8b16c4ce0f
commit 461ccbfa94
13 changed files with 416 additions and 97 deletions

View File

@@ -9,12 +9,13 @@ import { useEffect } from "react";
import { useViewPanelsState, ViewPanelsState } from "@/app/hooks/useViewPanelsState";
import { GroupHeader } from "@/app/components/GroupHeader/GroupHeader";
import { useGroups } from "@/app/providers/DialogProvider/useGroups";
import { ActiveCall } from "@/app/components/ActiveCall/ActiveCall";
export function Chat() {
const params = useParams();
const dialog = params.id || "DELETED";
const {lg} = useRosettaBreakpoints();
const [__, setViewState] = useViewPanelsState();
const [viewState, setViewState] = useViewPanelsState();
const {hasGroup} = useGroups();
useEffect(() => {
@@ -30,6 +31,9 @@ export function Chat() {
return (<>
<DialogProvider dialog={dialog} key={dialog}>
<Flex direction={'column'} justify={'space-between'} h={'100%'}>
{viewState != ViewPanelsState.DIALOGS_PANEL_ONLY && (
<ActiveCall></ActiveCall>
)}
{/* Group Header */}
{hasGroup(dialog) && <GroupHeader></GroupHeader>}
{/* Dialog peer to peer Header */}

View File

@@ -31,6 +31,7 @@ import { useUpdateMessage } from "@/app/hooks/useUpdateMessage";
import { useDeviceMessage } from "@/app/hooks/useDeviceMessage";
import { UpdateProvider } from "@/app/providers/UpdateProvider/UpdateProvider";
import { useSynchronize } from "@/app/providers/DialogProvider/useSynchronize";
import { CallProvider } from "@/app/providers/CallProvider/CallProvider";
export function Main() {
const { mainColor, borderColor } = useRosettaColors();
@@ -154,52 +155,56 @@ export function Main() {
<SystemAccountProvider>
<TransportProvider>
<UpdateProvider>
<Flex direction={'row'} style={{
height: '100%',
width: '100vw',
}}>
<div style={{
display: viewState != ViewPanelsState.DIALOGS_PANEL_HIDE ? 'block' : 'none',
width: viewState == ViewPanelsState.DIALOGS_PANEL_ONLY ? '100%' : '300px',
<CallProvider>
<Flex direction={'row'} style={{
height: '100%',
width: '100vw',
}}>
<DialogsPanel></DialogsPanel>
</div>
<Divider color={borderColor} orientation={'vertical'}></Divider>
{viewState != ViewPanelsState.DIALOGS_PANEL_ONLY && <Box
bg={mainColor}
style={{
flexGrow: 1,
height: 'calc(100vh - 27px)',
width: `calc(100% - 300px)`,
minWidth: 0
}}
>
<Routes>
<Route path={'/chat/:id'} element={<Chat />}></Route>
<Route path={'/profile/:id'} element={<Profile />}></Route>
<Route path={'/'} element={<DialogPreview />}></Route>
<Route path={'/theme'} element={<Theme />}></Route>
<Route path={'/safety'} element={<Safety />}></Route>
<Route path={'/update'} element={<Update />}></Route>
<Route path={'/backup'} element={<Backup />}></Route>
<Route path={'/dialogs'} element={<Dialogs />}></Route>
<Route path={'/newgroup'} element={<CreateGroup />}></Route>
<Route path={'/group/:id'} element={<GroupInfo />}></Route>
<Route path={'/groupencrypt/:key'} element={<GroupEncryption />}></Route>
</Routes>
</Box>}
</Flex>
{oldPublicKey && (
<Overlay blur={8} color="#333">
<Flex direction={'column'} align={'center'} justify={'center'} h={'100%'}>
<Alert w={400} variant="filled" color="red" title="Old account">
Your account uses an old format public key which is no longer supported. Please create a new account to continue using the application.
<br></br>After press "OK" button, the application will close and remove all data.
</Alert>
<Button w={400} mt={'md'} color="red" onClick={dropAccountsAndMessages}>OK</Button>
</Flex>
</Overlay>
)}
<div style={{
display: viewState != ViewPanelsState.DIALOGS_PANEL_HIDE ? 'block' : 'none',
width: viewState == ViewPanelsState.DIALOGS_PANEL_ONLY ? '100%' : '300px',
}}>
<DialogsPanel></DialogsPanel>
</div>
{lg && (
<Divider color={borderColor} orientation={'vertical'}></Divider>
)}
{viewState != ViewPanelsState.DIALOGS_PANEL_ONLY && <Box
bg={mainColor}
style={{
flexGrow: 1,
height: 'calc(100vh - 27px)',
width: `calc(100% - 300px)`,
minWidth: 0
}}
>
<Routes>
<Route path={'/chat/:id'} element={<Chat />}></Route>
<Route path={'/profile/:id'} element={<Profile />}></Route>
<Route path={'/'} element={<DialogPreview />}></Route>
<Route path={'/theme'} element={<Theme />}></Route>
<Route path={'/safety'} element={<Safety />}></Route>
<Route path={'/update'} element={<Update />}></Route>
<Route path={'/backup'} element={<Backup />}></Route>
<Route path={'/dialogs'} element={<Dialogs />}></Route>
<Route path={'/newgroup'} element={<CreateGroup />}></Route>
<Route path={'/group/:id'} element={<GroupInfo />}></Route>
<Route path={'/groupencrypt/:key'} element={<GroupEncryption />}></Route>
</Routes>
</Box>}
</Flex>
{oldPublicKey && (
<Overlay blur={8} color="#333">
<Flex direction={'column'} align={'center'} justify={'center'} h={'100%'}>
<Alert w={400} variant="filled" color="red" title="Old account">
Your account uses an old format public key which is no longer supported. Please create a new account to continue using the application.
<br></br>After press "OK" button, the application will close and remove all data.
</Alert>
<Button w={400} mt={'md'} color="red" onClick={dropAccountsAndMessages}>OK</Button>
</Flex>
</Overlay>
)}
</CallProvider>
</UpdateProvider>
</TransportProvider>
</SystemAccountProvider>