60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
|
import { useTranslation } from 'react-i18next';
|
||
|
|
import { useParams } from 'react-router';
|
||
|
|
|
||
|
|
import { Card } from '@/components/ui/primitives';
|
||
|
|
import { useSessionStore } from '@/stores/session';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Область контента комнаты. В Фазе 1 — заглушка: сообщения, голос и видео
|
||
|
|
* появятся в следующих фазах, но маршрутизация и выбор комнаты уже работают.
|
||
|
|
*/
|
||
|
|
export default function GuildView() {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const params = useParams<{ guildId?: string; channelId?: string }>();
|
||
|
|
const guild = useSessionStore((state) =>
|
||
|
|
params.guildId === undefined
|
||
|
|
? null
|
||
|
|
: (state.guilds.find((item) => item.id === params.guildId) ?? null),
|
||
|
|
);
|
||
|
|
const channel = guild?.channels.find((item) => item.id === params.channelId) ?? null;
|
||
|
|
|
||
|
|
if (params.channelId === undefined || channel === null) {
|
||
|
|
return (
|
||
|
|
<section id="app-content" className="flex h-full items-center justify-center p-6">
|
||
|
|
<Card className="max-w-md text-center">
|
||
|
|
<h2 className="text-lg font-semibold">{t('channels.noSelection.title')}</h2>
|
||
|
|
<p className="mt-2 text-sm text-fg-muted">{t('channels.noSelection.body')}</p>
|
||
|
|
</Card>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const isVoice = channel.type === 'voice';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section id="app-content" className="flex h-full flex-col">
|
||
|
|
<header className="flex items-center gap-2 border-b border-border/40 px-4 py-3">
|
||
|
|
<span aria-hidden="true" className="text-fg-muted">
|
||
|
|
{isVoice ? '🔊' : '#'}
|
||
|
|
</span>
|
||
|
|
<h2 className="text-sm font-semibold">{channel.name}</h2>
|
||
|
|
{channel.slowmode_seconds === undefined || channel.slowmode_seconds === 0 ? null : (
|
||
|
|
<span className="text-xs text-fg-muted">slowmode {channel.slowmode_seconds}s</span>
|
||
|
|
)}
|
||
|
|
</header>
|
||
|
|
<div className="flex flex-1 items-center justify-center p-6">
|
||
|
|
<Card className="max-w-md text-center">
|
||
|
|
<h3 className="text-lg font-semibold">
|
||
|
|
{t(isVoice ? 'channels.voicePlaceholder.title' : 'channels.chatPlaceholder.title')}
|
||
|
|
</h3>
|
||
|
|
<p className="mt-2 text-sm text-fg-muted">
|
||
|
|
{t(isVoice ? 'channels.voicePlaceholder.body' : 'channels.chatPlaceholder.body', {
|
||
|
|
name: channel.name,
|
||
|
|
})}
|
||
|
|
</p>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|