Add missing translation keys to sidebar

This commit is contained in:
jeffvli 2023-11-01 05:40:42 -07:00
parent d517afdfd3
commit b05d532941
3 changed files with 54 additions and 3 deletions

View File

@ -7,6 +7,20 @@ import { MdDragIndicator } from 'react-icons/md';
import { Button, Checkbox, Switch } from '/@/renderer/components';
import { useSettingsStoreActions, useGeneralSettings } from '../../../../store/settings.store';
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
import i18n from '/@/i18n/i18n';
const translatedSidebarItemMap = {
Albums: i18n.t('page.sidebar.albums', { postProcess: 'titleCase' }),
Artists: i18n.t('page.sidebar.artists', { postProcess: 'titleCase' }),
Folders: i18n.t('page.sidebar.folders', { postProcess: 'titleCase' }),
Genres: i18n.t('page.sidebar.genres', { postProcess: 'titleCase' }),
Home: i18n.t('page.sidebar.home', { postProcess: 'titleCase' }),
'Now Playing': i18n.t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
Playlists: i18n.t('page.sidebar.playlists', { postProcess: 'titleCase' }),
Search: i18n.t('page.sidebar.search', { postProcess: 'titleCase' }),
Settings: i18n.t('page.sidebar.settings', { postProcess: 'titleCase' }),
Tracks: i18n.t('page.sidebar.tracks', { postProcess: 'titleCase' }),
};
const DragHandle = ({ dragControls }: any) => {
return (
@ -48,7 +62,7 @@ const DraggableSidebarItem = ({ item, handleChangeDisabled }: DraggableSidebarIt
onChange={(e) => handleChangeDisabled(item.id, e.target.checked)}
/>
<DragHandle dragControls={dragControls} />
{item.id}
{translatedSidebarItemMap[item.id as keyof typeof translatedSidebarItemMap]}
</Group>
</Reorder.Item>
);

View File

@ -30,6 +30,22 @@ export const CollapsedSidebar = () => {
const { windowBarStyle } = useWindowSettings();
const { sidebarItems, sidebarCollapsedNavigation } = useGeneralSettings();
const translatedSidebarItemMap = useMemo(
() => ({
Albums: t('page.sidebar.albums', { postProcess: 'titleCase' }),
Artists: t('page.sidebar.artists', { postProcess: 'titleCase' }),
Folders: t('page.sidebar.folders', { postProcess: 'titleCase' }),
Genres: t('page.sidebar.genres', { postProcess: 'titleCase' }),
Home: t('page.sidebar.home', { postProcess: 'titleCase' }),
'Now Playing': t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
Playlists: t('page.sidebar.playlists', { postProcess: 'titleCase' }),
Search: t('page.sidebar.search', { postProcess: 'titleCase' }),
Settings: t('page.sidebar.settings', { postProcess: 'titleCase' }),
Tracks: t('page.sidebar.tracks', { postProcess: 'titleCase' }),
}),
[t],
);
const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => {
if (!sidebarItems) return [];
@ -37,10 +53,13 @@ export const CollapsedSidebar = () => {
.filter((item) => !item.disabled)
.map((item) => ({
...item,
label:
translatedSidebarItemMap[item.id as keyof typeof translatedSidebarItemMap] ??
item.label,
}));
return items;
}, [sidebarItems]);
}, [sidebarItems, translatedSidebarItemMap]);
return (
<SidebarContainer $windowBarStyle={windowBarStyle}>

View File

@ -78,6 +78,21 @@ export const Sidebar = () => {
const imageUrl = useCurrentSong()?.imageUrl;
const server = useCurrentServer();
const translatedSidebarItemMap = useMemo(
() => ({
Albums: t('page.sidebar.albums', { postProcess: 'titleCase' }),
Artists: t('page.sidebar.artists', { postProcess: 'titleCase' }),
Folders: t('page.sidebar.folders', { postProcess: 'titleCase' }),
Genres: t('page.sidebar.genres', { postProcess: 'titleCase' }),
Home: t('page.sidebar.home', { postProcess: 'titleCase' }),
'Now Playing': t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
Playlists: t('page.sidebar.playlists', { postProcess: 'titleCase' }),
Search: t('page.sidebar.search', { postProcess: 'titleCase' }),
Settings: t('page.sidebar.settings', { postProcess: 'titleCase' }),
Tracks: t('page.sidebar.tracks', { postProcess: 'titleCase' }),
}),
[t],
);
const upsizedImageUrl = imageUrl
?.replace(/size=\d+/, 'size=450')
.replace(/width=\d+/, 'width=450')
@ -121,10 +136,13 @@ export const Sidebar = () => {
.filter((item) => !item.disabled)
.map((item) => ({
...item,
label:
translatedSidebarItemMap[item.id as keyof typeof translatedSidebarItemMap] ??
item.label,
}));
return items;
}, [sidebarItems]);
}, [sidebarItems, translatedSidebarItemMap]);
return (
<SidebarContainer