feat(dashboard): add translations for sidebar

frontend/dashboard/src/components/games/card.vue

@@ -27,7 +27,7 @@ const userCanManageGames = useUserAccessFlagChecker('MANAGE_GAMES');
 <template>
 	<card :title="title" :icon="icon">
 		<template #content>
-			<p>Ask the magic 8ball a question and it will answer you.</p>
+			<p>{{ description }}</p>
 		</template>
 		<template #footer>
 			<n-button

frontend/dashboard/src/components/games/command.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-import { NButton, NModal } from 'naive-ui'
 import { IconPencil } from '@tabler/icons-vue';
+import { NButton, NModal } from 'naive-ui';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-import { useCommandsManager } from '@/api';
 import CommandModal from '../commands/modal.vue';
 
+import { useCommandsManager } from '@/api';
+
 const props = defineProps<{
 	name: string
 }>();
@@ -14,21 +16,26 @@ const commandsManager = useCommandsManager();
 const { data: commands } = commandsManager.getAll({});
 
 const command = computed(() => commands.value?.commands.find((command) => command.defaultName === props.name));
-const showCommandEditModal = ref(false)
+const showCommandEditModal = ref(false);
+
+const { t } = useI18n();
 </script>
 
 <template>
-	<h3>Command</h3>
+	<h3>{{ t('games.command') }}</h3>
 	<div v-if="command" style="display: flex; gap: 5px;">
 		<n-button secondary type="success" @click="() => showCommandEditModal = true">
-			<div style="display: flex; align-items: center; min-width: 80px; justify-content: space-between;">
+			<div
+				style="display: flex; align-items: center; min-width: 80px; justify-content: space-between;"
+			>
 				<span>{{ command.name }}</span>
 				<IconPencil />
 			</div>
 		</n-button>
 	</div>
 
 	<n-modal
+		v-if="command"
 		v-model:show="showCommandEditModal"
 		:mask-closable="false"
 		:segmented="true"
@@ -40,7 +47,6 @@ const showCommandEditModal = ref(false)
 			top: '50px',
 		}"
 		:on-close="() => showCommandEditModal = false"
-		v-if="command"
 	>
 		<command-modal
 			:command="command"

frontend/dashboard/src/layout/sidebar.vue

@@ -33,6 +33,7 @@ import {
 	NBadge,
 } from 'naive-ui';
 import { computed, h, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { RouterLink, useRouter } from 'vue-router';
 
 import DashboardMenu from './dashboardsMenu.vue';
@@ -46,6 +47,8 @@ defineProps<{
 
 const router = useRouter();
 
+const { t } = useI18n();
+
 const activeKey = ref<string | null>('/');
 const menuOptions = computed<(MenuOption | MenuDividerOption)[]>(() => {
 	const canViewIntegrations = useUserAccessFlagChecker('VIEW_INTEGRATIONS');
@@ -63,111 +66,111 @@ const menuOptions = computed<(MenuOption | MenuDividerOption)[]>(() => {
 
 	return [
 		{
-			label: 'Dashboard',
+			label: t('sidebar.dashboard'),
 			icon: renderIcon(IconDashboard),
 			path: '/dashboard',
 		},
 		{
-			label: 'Integrations',
+			label: t('sidebar.integrations'),
 			icon: renderIcon(IconBox),
 			path: '/dashboard/integrations',
 			disabled: !canViewIntegrations.value,
 		},
 		{
-			label: 'Alerts',
+			label: t('sidebar.alerts'),
 			icon: renderIcon(IconBell),
 			path: '/dashboard/alerts',
 			disabled: !canViewAlerts.value,
 			isNew: true,
 		},
 		{
-			label: 'Events',
+			label: t('sidebar.events'),
 			icon: renderIcon(IconCalendarEvent),
 			path: '/dashboard/events',
 			disabled: !canViewEvents.value,
 		},
 		{
-			label: 'OBS Overlays',
+			label: t('sidebar.overlays'),
 			icon: renderIcon(IconDeviceDesktop),
 			path: '/dashboard/overlays',
 			disabled: !canViewOverlays.value,
 		},
 		{
-			label: 'Song Requests',
+			label: t('sidebar.songRequests'),
 			icon: renderIcon(IconHeadphones),
 			path: '/dashboard/song-requests',
 			disabled: !canViewSongRequests.value,
 		},
 		{
-			label: 'Games',
+			label: t('sidebar.games'),
 			icon: renderIcon(IconDeviceGamepad2),
 			path: '/dashboard/games',
-			disabled: !canViewSongRequests.value,
+			disabled: !canViewGames.value,
 			isNew: true,
 		},
 		{
-			label: 'Commands',
+			label: t('sidebar.commands.label'),
 			icon: renderIcon(IconCommand),
 			disabled: !canViewCommands.value,
 			children: [
 				{
-					label: 'Custom',
+					label: t('sidebar.commands.custom'),
 					icon: renderIcon(IconPencilPlus),
 					path: '/dashboard/commands/custom',
 				},
 				{
-					label: 'Stats',
+					label: t('sidebar.commands.stats'),
 					icon: renderIcon(IconDeviceDesktopAnalytics),
 					path: '/dashboard/commands/stats',
 				},
 				{
-					label: 'Moderation',
+					label: t('sidebar.commands.moderation'),
 					icon: renderIcon(IconSword),
 					path: '/dashboard/commands/moderation',
 				},
 				{
-					label: 'Songs',
+					label: t('sidebar.commands.songs'),
 					icon: renderIcon(IconPlaylist),
 					path: '/dashboard/commands/songs',
 				},
 				{
-					label: 'Manage',
+					label: t('sidebar.commands.manage'),
 					icon: renderIcon(IconClipboardCopy),
 					path: '/dashboard/commands/manage',
 				},
 			],
 		},
 		{
-			label: 'Users',
+			label: t('sidebar.users'),
 			icon: renderIcon(IconUsers),
 			path: '/dashboard/community/users',
 		},
 		{
-			label: 'Permissions',
+			label: t('sidebar.roles'),
 			icon: renderIcon(IconShieldHalfFilled),
 			path: '/dashboard/community/roles',
 			disabled: !canViewRoles.value,
 		},
 		{
-			label: 'Timers',
+			label: t('sidebar.timers'),
 			icon: renderIcon(IconClockHour7),
 			path: '/dashboard/timers',
 			disabled: !canViewTimers.value,
 		},
 		{
-			label: 'Keywords',
+			label: t('sidebar.keywords'),
 			icon: renderIcon(IconKey),
 			path: '/dashboard/keywords',
 			disabled: !canViewKeywords.value,
 		},
 		{
-			label: 'Variables',
+			label: t('sidebar.variables'),
 			icon: renderIcon(IconActivity),
 			path: '/dashboard/variables',
 			disabled: !canViewVariabls.value,
 		},
 		{
-			label: 'Greetings',
+			label: t('sidebar.greetings'),
 			icon: renderIcon(IconSpeakerphone),
 			path: '/dashboard/greetings',
 			disabled: !canViewGreetings.value,
@@ -284,5 +287,9 @@ const selectedDashboard = computed(() => {
 </template>
 
 <style scoped>
-
+:deep(.n-menu-item-content-header) {
+	align-self: stretch;
+	display: flex;
+	align-items: center;
+}
 </style>

frontend/dashboard/src/locales/en.json

@@ -26,8 +26,31 @@
 		"response": "Response",
 		"userName": "User name"
 	},
+	"sidebar": {
+		"dashboard": "Dashboard",
+		"commands": {
+			"label": "Commands",
+			"custom": "Custom",
+			"stats": "Stats",
+			"moderation": "Moderation",
+			"songs": "Songs",
+			"manage": "Manage"
+		},
+		"integrations": "Integrations",
+		"events": "Events",
+		"overlays": "Overlays",
+		"songRequests": "Song requests",
+		"timers": "Timers",
+		"roles": "Permissions",
+		"keywords": "Keywords",
+		"variables": "Variables",
+		"greetings": "Greetings",
+		"alerts": "Alerts",
+		"games": "Games",
+		"users": "Users"
+	},
 	"deleteConfirmation": {
-		"text": "Are you sure you want delete this thing?",
+		"text": "Are you sure you want to delete this thing?",
 		"cancel": "Cancel",
 		"confirm": "Confirm"
 	},
@@ -344,6 +367,7 @@
 		}
 	},
 	"games": {
+		"command": "Command",
 		"8ball": {
 			"description": "Ask the magic 8ball a question and it will answer you.",
 			"answers": "Answers"

frontend/dashboard/src/locales/ru.json

@@ -25,6 +25,29 @@
 		"response": "Ответ",
 		"userName": "Имя пользователя"
 	},
+	"sidebar": {
+		"dashboard": "Панель управления",
+		"commands": {
+			"label": "Команды",
+			"custom": "Пользовательские",
+			"stats": "Статистика",
+			"moderation": "Модерация",
+			"songs": "Песни",
+			"manage": "Управление"
+		},
+		"integrations": "Интеграции",
+		"events": "События",
+		"overlays": "Оверлеи",
+		"songRequests": "Заказ песен",
+		"timers": "Таймеры",
+		"roles": "Права",
+		"keywords": "Ключевые слова",
+		"variables": "Переменные",
+		"greetings": "Приветствия",
+		"alerts": "Оповещения",
+		"games": "Игры",
+		"users": "Пользователи"
+	},
 	"deleteConfirmation": {
 		"text": "Вы уверены, что хотите удалить это?",
 		"cancel": "Отмена",
@@ -324,5 +347,12 @@
 			"userName": "Имя пользователя обязателено",
 			"textRequired": "Ответ обязателен"
 		}
+	},
+	"games": {
+		"command": "Команда",
+		"8ball": {
+			"description": "Задайте вопрос волшебному шарику, и он ответит вам.",
+			"answers": "Ответы"
+		}
 	}
 }