Skip to content

feat(AUD-11): refine UI layout and theming #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ar1603 merged 1 commit into from
Jun 12, 2026
Merged

feat(AUD-11): refine UI layout and theming #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
212 changes: 108 additions & 104 deletions apps/web/src/providers/router/__tests__/__snapshots__/RouterProvider.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

24 changes: 13 additions & 11 deletions apps/web/src/screens/DocsPage/DocsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
import { MdPreview, getMdFileDataInString } from '@components/MdPreview';
import { TitleBoxContainer } from '@components';
import { Icon, IconType } from '@assets';
import { useTranslation } from 'react-i18next';
import { DOCS_TOPICS } from './config';

interface HeadingItem {
Expand Down Expand Up @@ -47,6 +48,7 @@ const parseHeadings = (markdown: string): HeadingItem[] => {
};

const DocsPage = () => {
const { t } = useTranslation();
const { docId } = useParams<{ docId?: string }>();
const navigate = useNavigate();
const [mdContent, setMdContent] = React.useState<string>('');
Expand Down Expand Up @@ -93,7 +95,7 @@ const DocsPage = () => {

return (
<TitleBoxContainer
title={`Docs - ${activeDoc?.title || ''}`}
title={`Docs - ${activeDoc ? t(activeDoc.titleKey) : ''}`}
icon="app"
display="flex"
flexDirection="column"
Expand Down Expand Up @@ -133,7 +135,7 @@ const DocsPage = () => {
>
<VStack align="stretch" gap={6}>
{DOCS_TOPICS.map((topic) => (
<Box key={topic.title}>
<Box key={topic.titleKey}>
<Text
fontSize="10px"
fontWeight="bold"
Expand All @@ -143,7 +145,7 @@ const DocsPage = () => {
opacity={0.8}
mb={3}
>
{topic.title}
{t(topic.titleKey)}
</Text>
<VStack align="stretch" gap={1.5}>
{topic.items.map((item) => {
Expand All @@ -166,7 +168,7 @@ const DocsPage = () => {
fontSize="sm"
fontWeight={isActive ? 'semibold' : 'medium'}
>
{item.title}
{t(item.titleKey)}
</Text>
</Flex>
);
Expand Down Expand Up @@ -196,11 +198,11 @@ const DocsPage = () => {
<Flex align="center" gap={2}>
<Icon type={IconType.MENU} size="16px" />
<Text fontSize="sm" fontWeight="bold">
{activeDoc?.title || 'Select Topic'}
{activeDoc ? t(activeDoc.titleKey) : t('DocsPage.selectTopic')}
</Text>
</Flex>
<Text fontSize="xs" color="fg.muted">
Switch
{t('DocsPage.switch')}
</Text>
</Button>
</Menu.Trigger>
Expand All @@ -212,7 +214,7 @@ const DocsPage = () => {
maxW="400px"
>
{DOCS_TOPICS.map((topic) => (
<Box key={topic.title} py={1}>
<Box key={topic.titleKey} py={1}>
<Box px={3} py={1}>
<Text
fontSize="9px"
Expand All @@ -222,7 +224,7 @@ const DocsPage = () => {
color="fg.muted"
opacity={0.7}
>
{topic.title}
{t(topic.titleKey)}
</Text>
</Box>
{topic.items.map((item) => (
Expand All @@ -235,7 +237,7 @@ const DocsPage = () => {
activeDoc?.id === item.id ? 'bold' : 'normal'
}
>
{item.title}
{t(item.titleKey)}
</Menu.Item>
))}
</Box>
Expand All @@ -252,7 +254,7 @@ const DocsPage = () => {
minH="300px"
width="full"
aria-busy="true"
aria-label="Loading documentation"
aria-label={t('DocsPage.loadingDocumentation')}
>
<Spinner size="xl" color="primary" />
</Flex>
Expand Down Expand Up @@ -288,7 +290,7 @@ const DocsPage = () => {
color="fg.muted"
opacity={0.8}
>
In this Page
{t('DocsPage.inThisPage')}
</Text>
<VStack align="stretch" gap={2}>
{headings.map((heading) => (
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/screens/DocsPage/__tests__/__snapshots__/DocsPage.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ exports[`DocsPage should render the documentation layout with sidebar and TOC 1`
<p
class="css-nh0ii3"
>
API Gateway Reference
API Reference
</p>
</div>
</div>
Expand Down
31 changes: 16 additions & 15 deletions apps/web/src/screens/DocsPage/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,79 @@
export interface DocItem {
id: string;
title: string;
titleKey: string;
filePath: string;
}

export interface DocTopic {
title: string;
titleKey: string;
items: DocItem[];
}

export const DOCS_TOPICS: DocTopic[] = [
{
title: 'Getting Started',
titleKey: 'DocsPage.gettingStarted',
items: [
{
id: 'introduction',
title: 'Introduction',
titleKey: 'NavigationBar.introduction',
filePath: 'data/product/introduction',
},
{
id: 'quickstart',
title: 'Quick Start',
titleKey: 'NavigationBar.quickstart',
filePath: 'data/product/quickstart',
},
{
id: 'setup-guide',
title: 'Setup Guide',
titleKey: 'NavigationBar.setup-guide',
filePath: 'data/product/telegram-credentials',
},
],
},
{
title: 'Architecture',
titleKey: 'DocsPage.architecture',
items: [
{
id: 'system-design',
title: 'System Design',
titleKey: 'NavigationBar.system-design',
filePath: 'data/product/system-design',
},
{
id: 'mtproto',
title: 'MTProto Protocol',
titleKey: 'NavigationBar.mtproto',
filePath: 'data/product/mtproto',
},
{
id: 'direct-storage',
title: 'Direct Storage',
titleKey: 'NavigationBar.direct-storage',
filePath: 'data/product/direct-storage',
},
],
},
{
title: 'Reference',
titleKey: 'DocsPage.reference',
items: [
{
id: 'api-reference',
title: 'API Gateway Reference',
titleKey: 'NavigationBar.api-reference',
filePath: 'data/product/api-reference',
},
],
},
{
title: 'Version History',
titleKey: 'NavigationBar.version-history',
items: [
{
id: 'version-history-desktop',
title: 'Desktop',
titleKey: 'NavigationBar.version-history-desktop',
filePath: 'data/product/version-history-desktop',
},
{
id: 'version-history-mobile',
title: 'Mobile',
titleKey: 'NavigationBar.version-history-mobile',
filePath: 'data/product/version-history-mobile',
},
],
},
];

2 changes: 1 addition & 1 deletion apps/web/src/screens/Host/CopyrightFooter/CopyrightFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const CopyrightFooter = () => {
<Logo size="100%" />
</Box>
<Heading size="sm" color="primary" fontWeight="bold">
AudioMesh
{t('Title')}
</Heading>
</HStack>
<Text
Expand Down
31 changes: 19 additions & 12 deletions apps/web/src/screens/Host/NavigationBar/NavigationBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,8 @@ import {
import { Icon, IconType } from '@assets';

import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { Link, useLocation } from 'react-router-dom';

import { usePaddingForScreen } from '../../hooks';
import { NAVIGATION_LINKS } from './constants';

const GitHubIcon = (props: React.SVGProps<SVGSVGElement>) => (
Expand All @@ -29,21 +28,28 @@ const GitHubIcon = (props: React.SVGProps<SVGSVGElement>) => (

const NavigationBar = () => {
const { t } = useTranslation();
const padding = usePaddingForScreen();
const { pathname } = useLocation();
const isDocsPage = pathname.startsWith('/docs');

return (
<HStack
paddingX={padding}
height={16}
<Box
borderBottomWidth={1}
borderBottomColor="border"
shadow="sm"
justifyContent={'space-between'}
position="sticky"
top={0}
zIndex={50}
bg="bg.panel"
width="100%"
px={isDocsPage ? { base: 6, lg: 6 } : { base: 6, md: 16 }}
>
<HStack
height={16}
maxW={isDocsPage ? '1400px' : '1200px'}
mx="auto"
justifyContent={'space-between'}
width="100%"
>
{/* Logo */}
<HStack
gap={1}
Expand Down Expand Up @@ -91,7 +97,7 @@ const NavigationBar = () => {
>
<Link to={link} style={{ display: 'flex', alignItems: 'center' }}>
<Text fontSize="sm" fontWeight={'medium'}>
{name}
{t(`NavigationBar.${name.toLowerCase()}`)}
</Text>
</Link>
</Button>
Expand All @@ -101,7 +107,7 @@ const NavigationBar = () => {
<IconButton
asChild
variant="ghost"
aria-label="GitHub Repository"
aria-label={t('NavigationBar.githubRepository')}
borderRadius="md"
color="fg.muted"
_hover={{ bg: 'bg.hover', color: 'primary' }}
Expand Down Expand Up @@ -133,7 +139,7 @@ const NavigationBar = () => {
py={2}
size="sm"
>
Menu
{t('NavigationBar.menu')}
<Icon type={IconType.MENU} />
</Button>
</Menu.Trigger>
Expand All @@ -156,7 +162,7 @@ const NavigationBar = () => {
}}
>
<Text fontSize="sm" fontWeight={'medium'}>
{name}
{t(`NavigationBar.${name.toLowerCase()}`)}
</Text>
</Link>
</Menu.Item>
Expand All @@ -167,7 +173,8 @@ const NavigationBar = () => {
</Box>
</HStack>
</HStack>
);
</Box>
);
};

export default NavigationBar;
Loading