heaven/vojo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

localize home

Browse source
This commit is contained in:
v.lagerev 2026-04-14 00:30:08 +03:00
parent 1d3a6b5f7c
commit 326cf8902b
8 changed files with 137 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
public/locales/en.json
View file

@ -310,5 +310,42 @@
"event": "event", "event": "event",
"open": "Open", "open": "Open",
"home": "Home" "home": "Home"
},
"Home": {
"home": "Home",
"mark_as_read": "Mark as Read",
"no_rooms": "No Rooms",
"no_rooms_desc": "You do not have any rooms yet.",
"create_room": "Create Room",
"create_room_subtitle": "Build a room for real-time conversations.",
"explore_community": "Explore Community Rooms",
"join_with_address": "Join by Address",
"join_address_desc": "Enter an address to join a room or space. Addresses look like:",
"address": "Address",
"invalid_address": "Invalid Address",
"message_search": "Message Search",
"rooms": "Rooms",
"type": "Type",
"access": "Access",
"name": "Name",
"topic_optional": "Topic (Optional)",
"options": "Options",
"advanced_options": "Advanced Options",
"e2e_encryption": "End-to-End Encryption",
"e2e_encryption_desc": "Once this feature is enabled, it can't be disabled after the room is created.",
"knock_to_join": "Knock to Join",
"knock_to_join_desc": "Anyone can send a request to join this room.",
"allow_federation": "Allow Federation",
"allow_federation_desc": "Users from other servers can join.",
"rate_limited": "Server rate-limited your request for {{minutes}} minutes!",
"create": "Create",
"notifications": "Notifications",
"invite": "Invite",
"copy_link": "Copy Link",
"room_settings": "Room Settings",
"leave_room": "Leave Room",
"toggle_chat": "Toggle Chat",
"live_count": "{{count}} Live",
"open": "Open"
} }
} }

37
public/locales/ru.json
View file

@ -310,5 +310,42 @@
"event": "событие", "event": "событие",
"open": "Открыть", "open": "Открыть",
"home": "Главная" "home": "Главная"
},
"Home": {
"home": "Главная",
"mark_as_read": "Отметить прочитанным",
"no_rooms": "Нет комнат",
"no_rooms_desc": "У вас ещё нет комнат.",
"create_room": "Создать комнату",
"create_room_subtitle": "Создайте комнату для общения в реальном времени.",
"explore_community": "Обзор комнат сообщества",
"join_with_address": "Присоединиться по адресу",
"join_address_desc": "Введите адрес комнаты или пространства. Адреса выглядят так:",
"address": "Адрес",
"invalid_address": "Неверный адрес",
"message_search": "Поиск сообщений",
"rooms": "Комнаты",
"type": "Тип",
"access": "Доступ",
"name": "Название",
"topic_optional": "Тема (необязательно)",
"options": "Параметры",
"advanced_options": "Дополнительные параметры",
"e2e_encryption": "Сквозное шифрование",
"e2e_encryption_desc": "После включения эту функцию нельзя отключить после создания комнаты.",
"knock_to_join": "Запрос на вступление",
"knock_to_join_desc": "Любой может отправить запрос на вступление в эту комнату.",
"allow_federation": "Разрешить федерацию",
"allow_federation_desc": "Пользователи с других серверов могут присоединяться.",
"rate_limited": "Сервер ограничил частоту запросов на {{minutes}} мин.!",
"create": "Создать",
"notifications": "Уведомления",
"invite": "Пригласить",
"copy_link": "Копировать ссылку",
"room_settings": "Настройки комнаты",
"leave_room": "Покинуть комнату",
"toggle_chat": "Переключить чат",
"live_count": "{{count}} В эфире",
"open": "Открыть"
} }
} }

12
src/app/components/join-address-prompt/JoinAddressPrompt.tsx
View file

@ -1,4 +1,5 @@
import React, { FormEventHandler, useState } from 'react'; import React, { FormEventHandler, useState } from 'react';
import { useTranslation } from 'react-i18next';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
import { import {
Dialog, Dialog,
@ -26,6 +27,7 @@ type JoinAddressProps = {
onCancel: () => void; onCancel: () => void;
}; };
export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) { export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
const { t } = useTranslation();
const [invalid, setInvalid] = useState(false); const [invalid, setInvalid] = useState(false);
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => { const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@ -80,7 +82,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
size="500" size="500"
> >
<Box grow="Yes"> <Box grow="Yes">
<Text size="H4">Join with Address</Text> <Text size="H4">{t('Home.join_with_address')}</Text>
</Box> </Box>
<IconButton size="300" onClick={onCancel} radii="300"> <IconButton size="300" onClick={onCancel} radii="300">
<Icon src={Icons.Cross} /> <Icon src={Icons.Cross} />
@ -95,7 +97,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
> >
<Box direction="Column" gap="200"> <Box direction="Column" gap="200">
<Text priority="400" size="T300"> <Text priority="400" size="T300">
Enter public address to join the community. Addresses looks like: {t('Home.join_address_desc')}
</Text> </Text>
<Text as="ul" size="T200" priority="300" style={{ paddingLeft: config.space.S400 }}> <Text as="ul" size="T200" priority="300" style={{ paddingLeft: config.space.S400 }}>
<li>#community:server</li> <li>#community:server</li>
@ -104,7 +106,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
</Text> </Text>
</Box> </Box>
<Box direction="Column" gap="100"> <Box direction="Column" gap="100">
<Text size="L400">Address</Text> <Text size="L400">{t('Home.address')}</Text>
<Input <Input
size="500" size="500"
autoFocus autoFocus
@ -115,12 +117,12 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
/> />
{invalid && ( {invalid && (
<Text size="T200" style={{ color: color.Critical.Main }}> <Text size="T200" style={{ color: color.Critical.Main }}>
<b>Invalid Address</b> <b>{t('Home.invalid_address')}</b>
</Text> </Text>
)} )}
</Box> </Box>
<Button type="submit" variant="Primary"> <Button type="submit" variant="Primary">
<Text size="B400">Open</Text> <Text size="B400">{t('Home.open')}</Text>
</Button> </Button>
</Box> </Box>
</Dialog> </Dialog>

36
src/app/features/create-room/CreateRoom.tsx
View file

@ -1,4 +1,5 @@
import React, { FormEventHandler, useCallback, useEffect, useState } from 'react'; import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { MatrixError, Room, JoinRule } from 'matrix-js-sdk'; import { MatrixError, Room, JoinRule } from 'matrix-js-sdk';
import { import {
Box, Box,
@ -70,6 +71,7 @@ export function CreateRoomForm({
space, space,
onCreate, onCreate,
}: CreateRoomFormProps) { }: CreateRoomFormProps) {
const { t } = useTranslation();
const mx = useMatrixClient(); const mx = useMatrixClient();
const alive = useAlive(); const alive = useAlive();
@ -162,7 +164,7 @@ export function CreateRoomForm({
<Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500"> <Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500">
{!space && ( {!space && (
<Box direction="Column" gap="100"> <Box direction="Column" gap="100">
<Text size="L400">Type</Text> <Text size="L400">{t('Home.type')}</Text>
<CreateRoomTypeSelector <CreateRoomTypeSelector
value={type} value={type}
onSelect={setType} onSelect={setType}
@ -172,7 +174,7 @@ export function CreateRoomForm({
</Box> </Box>
)} )}
<Box direction="Column" gap="100"> <Box direction="Column" gap="100">
<Text size="L400">Access</Text> <Text size="L400">{t('Home.access')}</Text>
<CreateRoomAccessSelector <CreateRoomAccessSelector
value={access} value={access}
onSelect={setAccess} onSelect={setAccess}
@ -182,7 +184,7 @@ export function CreateRoomForm({
/> />
</Box> </Box>
<Box shrink="No" direction="Column" gap="100"> <Box shrink="No" direction="Column" gap="100">
<Text size="L400">Name</Text> <Text size="L400">{t('Home.name')}</Text>
<Input <Input
required required
before={<Icon size="100" src={getCreateRoomAccessToIcon(access, type)} />} before={<Icon size="100" src={getCreateRoomAccessToIcon(access, type)} />}
@ -196,7 +198,7 @@ export function CreateRoomForm({
/> />
</Box> </Box>
<Box shrink="No" direction="Column" gap="100"> <Box shrink="No" direction="Column" gap="100">
<Text size="L400">Topic (Optional)</Text> <Text size="L400">{t('Home.topic_optional')}</Text>
<TextArea <TextArea
name="topicTextAria" name="topicTextAria"
size="500" size="500"
@ -210,7 +212,7 @@ export function CreateRoomForm({
<Box shrink="No" direction="Column" gap="100"> <Box shrink="No" direction="Column" gap="100">
<Box gap="200" alignItems="End"> <Box gap="200" alignItems="End">
<Text size="L400">Options</Text> <Text size="L400">{t('Home.options')}</Text>
<Box grow="Yes" justifyContent="End"> <Box grow="Yes" justifyContent="End">
<Chip <Chip
radii="Pill" radii="Pill"
@ -218,7 +220,7 @@ export function CreateRoomForm({
onClick={() => setAdvance(!advance)} onClick={() => setAdvance(!advance)}
type="button" type="button"
> >
<Text size="T200">Advanced Options</Text> <Text size="T200">{t('Home.advanced_options')}</Text>
</Chip> </Chip>
</Box> </Box>
</Box> </Box>
@ -245,8 +247,8 @@ export function CreateRoomForm({
gap="500" gap="500"
> >
<SettingTile <SettingTile
title="End-to-End Encryption" title={t('Home.e2e_encryption')}
description="Once this feature is enabled, it can't be disabled after the room is created." description={t('Home.e2e_encryption_desc')}
after={ after={
<Switch <Switch
variant="Primary" variant="Primary"
@ -265,8 +267,8 @@ export function CreateRoomForm({
gap="500" gap="500"
> >
<SettingTile <SettingTile
title="Knock to Join" title={t('Home.knock_to_join')}
description="Anyone can send request to join this room." description={t('Home.knock_to_join_desc')}
after={ after={
<Switch <Switch
variant="Primary" variant="Primary"
@ -288,8 +290,8 @@ export function CreateRoomForm({
gap="500" gap="500"
> >
<SettingTile <SettingTile
title="Allow Federation" title={t('Home.allow_federation')}
description="Users from other servers can join." description={t('Home.allow_federation_desc')}
after={ after={
<Switch <Switch
variant="Primary" variant="Primary"
@ -316,9 +318,11 @@ export function CreateRoomForm({
<Text size="T300" style={{ color: color.Critical.Main }}> <Text size="T300" style={{ color: color.Critical.Main }}>
<b> <b>
{error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED {error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED
? `Server rate-limited your request for ${millisecondsToMinutes( ? t('Home.rate_limited', {
(error.data.retry_after_ms as number | undefined) ?? 0 minutes: millisecondsToMinutes(
)} minutes!` (error.data.retry_after_ms as number | undefined) ?? 0
),
})
: error.message} : error.message}
</b> </b>
</Text> </Text>
@ -333,7 +337,7 @@ export function CreateRoomForm({
disabled={disabled} disabled={disabled}
before={loading && <Spinner variant="Primary" fill="Solid" size="200" />} before={loading && <Spinner variant="Primary" fill="Solid" size="200" />}
> >
<Text size="B500">Create</Text> <Text size="B500">{t('Home.create')}</Text>
</Button> </Button>
</Box> </Box>
</Box> </Box>

20
src/app/features/room-nav/RoomNavItem.tsx
View file

@ -1,4 +1,5 @@
import React, { MouseEventHandler, forwardRef, useState } from 'react'; import React, { MouseEventHandler, forwardRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Room } from 'matrix-js-sdk'; import { Room } from 'matrix-js-sdk';
import { import {
Avatar, Avatar,
@ -67,6 +68,7 @@ type RoomNavItemMenuProps = {
}; };
const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>( const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
({ room, requestClose, notificationMode }, ref) => { ({ room, requestClose, notificationMode }, ref) => {
const { t } = useTranslation();
const mx = useMatrixClient(); const mx = useMatrixClient();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity'); const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const unread = useRoomUnread(room.roomId, roomToUnreadAtom); const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
@ -121,7 +123,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
disabled={!unread} disabled={!unread}
> >
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate> <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
Mark as Read {t('Home.mark_as_read')}
</Text> </Text>
</MenuItem> </MenuItem>
<RoomNotificationModeSwitcher roomId={room.roomId} value={notificationMode}> <RoomNotificationModeSwitcher roomId={room.roomId} value={notificationMode}>
@ -140,7 +142,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
onClick={handleOpen} onClick={handleOpen}
> >
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate> <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
Notifications {t('Home.notifications')}
</Text> </Text>
</MenuItem> </MenuItem>
)} )}
@ -159,7 +161,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
disabled={!canInvite} disabled={!canInvite}
> >
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate> <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
Invite {t('Home.invite')}
</Text> </Text>
</MenuItem> </MenuItem>
<MenuItem <MenuItem
@ -169,7 +171,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
radii="300" radii="300"
> >
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate> <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
Copy Link {t('Home.copy_link')}
</Text> </Text>
</MenuItem> </MenuItem>
<MenuItem <MenuItem
@ -179,7 +181,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
radii="300" radii="300"
> >
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate> <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
Room Settings {t('Home.room_settings')}
</Text> </Text>
</MenuItem> </MenuItem>
</Box> </Box>
@ -198,7 +200,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
aria-pressed={promptLeave} aria-pressed={promptLeave}
> >
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate> <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
Leave Room {t('Home.leave_room')}
</Text> </Text>
</MenuItem> </MenuItem>
{promptLeave && ( {promptLeave && (
@ -218,13 +220,14 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
); );
function CallChatToggle() { function CallChatToggle() {
const { t } = useTranslation();
const [chat, setChat] = useAtom(callChatAtom); const [chat, setChat] = useAtom(callChatAtom);
return ( return (
<IconButton <IconButton
onClick={() => setChat(!chat)} onClick={() => setChat(!chat)}
aria-pressed={chat} aria-pressed={chat}
aria-label="Toggle Chat" aria-label={t('Home.toggle_chat')}
variant="Background" variant="Background"
fill="None" fill="None"
size="300" size="300"
@ -251,6 +254,7 @@ export function RoomNavItem({
notificationMode, notificationMode,
linkPath, linkPath,
}: RoomNavItemProps) { }: RoomNavItemProps) {
const { t } = useTranslation();
const mx = useMatrixClient(); const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication(); const useAuthentication = useMediaAuthentication();
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
@ -370,7 +374,7 @@ export function RoomNavItem({
{room.isCallRoom() && callMembers.length > 0 && ( {room.isCallRoom() && callMembers.length > 0 && (
<Badge variant="Critical" fill="Solid" size="400"> <Badge variant="Critical" fill="Solid" size="400">
<Text as="span" size="L400" truncate> <Text as="span" size="L400" truncate>
{callMembers.length} Live {t('Home.live_count', { count: callMembers.length })}
</Text> </Text>
</Badge> </Badge>
)} )}

6
src/app/pages/client/home/CreateRoom.tsx
View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { Box, Icon, Icons, Scroll, IconButton } from 'folds'; import { Box, Icon, Icons, Scroll, IconButton } from 'folds';
import { useTranslation } from 'react-i18next';
import { import {
Page, Page,
PageContent, PageContent,
@ -14,6 +15,7 @@ import { CreateRoomForm } from '../../../features/create-room';
import { useRoomNavigate } from '../../../hooks/useRoomNavigate'; import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
export function HomeCreateRoom() { export function HomeCreateRoom() {
const { t } = useTranslation();
const screenSize = useScreenSizeContext(); const screenSize = useScreenSizeContext();
const { navigateRoom } = useRoomNavigate(); const { navigateRoom } = useRoomNavigate();
@ -41,8 +43,8 @@ export function HomeCreateRoom() {
<Box direction="Column" gap="700"> <Box direction="Column" gap="700">
<PageHero <PageHero
icon={<Icon size="600" src={Icons.Hash} />} icon={<Icon size="600" src={Icons.Hash} />}
title="Create Room" title={t('Home.create_room')}
subTitle="Build a Room for Real-Time Conversations." subTitle={t('Home.create_room_subtitle')}
/> />
<CreateRoomForm onCreate={navigateRoom} /> <CreateRoomForm onCreate={navigateRoom} />
</Box> </Box>

25
src/app/pages/client/home/Home.tsx
View file

@ -1,5 +1,6 @@
import React, { MouseEventHandler, forwardRef, useMemo, useRef, useState } from 'react'; import React, { MouseEventHandler, forwardRef, useMemo, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { import {
Avatar, Avatar,
Box, Box,
@ -70,6 +71,7 @@ type HomeMenuProps = {
requestClose: () => void; requestClose: () => void;
}; };
const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => { const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => {
const { t } = useTranslation();
const orphanRooms = useHomeRooms(); const orphanRooms = useHomeRooms();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity'); const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom); const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
@ -92,7 +94,7 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
aria-disabled={!unread} aria-disabled={!unread}
> >
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate> <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
Mark as Read {t('Home.mark_as_read')}
</Text> </Text>
</MenuItem> </MenuItem>
</Box> </Box>
@ -101,6 +103,7 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
}); });
function HomeHeader() { function HomeHeader() {
const { t } = useTranslation();
const [menuAnchor, setMenuAnchor] = useState<RectCords>(); const [menuAnchor, setMenuAnchor] = useState<RectCords>();
const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => { const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
@ -117,7 +120,7 @@ function HomeHeader() {
<Box alignItems="Center" grow="Yes" gap="300"> <Box alignItems="Center" grow="Yes" gap="300">
<Box grow="Yes"> <Box grow="Yes">
<Text size="H4" truncate> <Text size="H4" truncate>
Home {t('Home.home')}
</Text> </Text>
</Box> </Box>
<Box> <Box>
@ -153,6 +156,7 @@ function HomeHeader() {
} }
function HomeEmpty() { function HomeEmpty() {
const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
@ -161,19 +165,19 @@ function HomeEmpty() {
icon={<Icon size="600" src={Icons.Hash} />} icon={<Icon size="600" src={Icons.Hash} />}
title={ title={
<Text size="H5" align="Center"> <Text size="H5" align="Center">
No Rooms {t('Home.no_rooms')}
</Text> </Text>
} }
content={ content={
<Text size="T300" align="Center"> <Text size="T300" align="Center">
You do not have any rooms yet. {t('Home.no_rooms_desc')}
</Text> </Text>
} }
options={ options={
<> <>
<Button onClick={() => navigate(getHomeCreatePath())} variant="Secondary" size="300"> <Button onClick={() => navigate(getHomeCreatePath())} variant="Secondary" size="300">
<Text size="B300" truncate> <Text size="B300" truncate>
Create Room {t('Home.create_room')}
</Text> </Text>
</Button> </Button>
<Button <Button
@ -183,7 +187,7 @@ function HomeEmpty() {
size="300" size="300"
> >
<Text size="B300" truncate> <Text size="B300" truncate>
Explore Community Rooms {t('Home.explore_community')}
</Text> </Text>
</Button> </Button>
</> </>
@ -195,6 +199,7 @@ function HomeEmpty() {
const DEFAULT_CATEGORY_ID = makeNavCategoryId('home', 'room'); const DEFAULT_CATEGORY_ID = makeNavCategoryId('home', 'room');
export function Home() { export function Home() {
const { t } = useTranslation();
const mx = useMatrixClient(); const mx = useMatrixClient();
useNavToActivePathMapper('home'); useNavToActivePathMapper('home');
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
@ -250,7 +255,7 @@ export function Home() {
</Avatar> </Avatar>
<Box as="span" grow="Yes"> <Box as="span" grow="Yes">
<Text as="span" size="Inherit" truncate> <Text as="span" size="Inherit" truncate>
Create Room {t('Home.create_room')}
</Text> </Text>
</Box> </Box>
</Box> </Box>
@ -269,7 +274,7 @@ export function Home() {
</Avatar> </Avatar>
<Box as="span" grow="Yes"> <Box as="span" grow="Yes">
<Text as="span" size="Inherit" truncate> <Text as="span" size="Inherit" truncate>
Join with Address {t('Home.join_with_address')}
</Text> </Text>
</Box> </Box>
</Box> </Box>
@ -304,7 +309,7 @@ export function Home() {
</Avatar> </Avatar>
<Box as="span" grow="Yes"> <Box as="span" grow="Yes">
<Text as="span" size="Inherit" truncate> <Text as="span" size="Inherit" truncate>
Message Search {t('Home.message_search')}
</Text> </Text>
</Box> </Box>
</Box> </Box>
@ -319,7 +324,7 @@ export function Home() {
data-category-id={DEFAULT_CATEGORY_ID} data-category-id={DEFAULT_CATEGORY_ID}
onClick={handleCategoryClick} onClick={handleCategoryClick}
> >
Rooms {t('Home.rooms')}
</RoomNavCategoryButton> </RoomNavCategoryButton>
</NavCategoryHeader> </NavCategoryHeader>
<div <div

7
src/app/pages/client/sidebar/HomeTab.tsx
View file

@ -1,6 +1,7 @@
import React, { MouseEventHandler, forwardRef, useState } from 'react'; import React, { MouseEventHandler, forwardRef, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Box, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text, config, toRem } from 'folds'; import { Box, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text, config, toRem } from 'folds';
import { useTranslation } from 'react-i18next';
import { useAtomValue } from 'jotai'; import { useAtomValue } from 'jotai';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
import { useOrphanRooms } from '../../../state/hooks/roomList'; import { useOrphanRooms } from '../../../state/hooks/roomList';
@ -31,6 +32,7 @@ type HomeMenuProps = {
requestClose: () => void; requestClose: () => void;
}; };
const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => { const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => {
const { t } = useTranslation();
const orphanRooms = useHomeRooms(); const orphanRooms = useHomeRooms();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity'); const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom); const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
@ -53,7 +55,7 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
aria-disabled={!unread} aria-disabled={!unread}
> >
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate> <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
Mark as Read {t('Home.mark_as_read')}
</Text> </Text>
</MenuItem> </MenuItem>
</Box> </Box>
@ -62,6 +64,7 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
}); });
export function HomeTab() { export function HomeTab() {
const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const mx = useMatrixClient(); const mx = useMatrixClient();
const screenSize = useScreenSizeContext(); const screenSize = useScreenSizeContext();
@ -95,7 +98,7 @@ export function HomeTab() {
return ( return (
<SidebarItem active={homeSelected}> <SidebarItem active={homeSelected}>
<SidebarItemTooltip tooltip="Home"> <SidebarItemTooltip tooltip={t('Home.home')}>
{(triggerRef) => ( {(triggerRef) => (
<SidebarAvatar <SidebarAvatar
as="button" as="button"