added i18n, some minor fixes...

components/dashboard/AboutSettings.module.css

@@ -0,0 +1,27 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    border-radius: 8px;
+    background-color: var(--secondary);
+}
+
+.label {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--secondary-text);
+}
+
+.value {
+    font-size: 0.9rem;
+    color: var(--primary-text);
+    font-family: monospace;
+}

components/dashboard/AboutSettings.tsx

@@ -0,0 +1,21 @@
+import styles from "./AboutSettings.module.css";
+
+const AboutSettings = () => {
+    const version = process.env.NEXT_PUBLIC_APP_VERSION ?? "dev";
+    const buildId = process.env.NEXT_PUBLIC_COMMIT_SHA ?? "local";
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.row}>
+                <span className={styles.label}>Version</span>
+                <span className={styles.value}>v{version}</span>
+            </div>
+            <div className={styles.row}>
+                <span className={styles.label}>Build</span>
+                <span className={styles.value}>{buildId}</span>
+            </div>
+        </div>
+    );
+};
+
+export default AboutSettings;

components/dashboard/DashboardModal.tsx

@@ -13,81 +13,49 @@ import CollaboratorsSettings from "./project/CollaboratorsSettings";
 
 import styles from "./DashboardModal.module.css";
 import ExportProject from "./project/ExportProject";
-import { FileDown, Folder, Keyboard, KeyRound, Palette, PanelsTopLeft, User, Users } from "lucide-react";
+import { FileDown, Folder, Globe, Keyboard, KeyRound, Palette, PanelsTopLeft, User, Users } from "lucide-react";
+import { useTranslations } from "next-intl";
 import KeybindsSettings from "./preferences/KeybindsSettings";
 import AppearanceSettings from "./preferences/AppearanceSettings";
+import LanguageSettings from "./preferences/LanguageSettings";
 import SecuritySettings from "./account/SecuritySettings";
 import ProfileSettings from "./account/ProfileSettings";
 import LayoutSettings from "./project/LayoutSettings";
 import DashboardLogin from "./account/DashboardLogin";
-
-const PROJECT_MENU: MenuSection = {
-    group: "Project",
-    items: [
-        {
-            id: "General",
-            label: "General",
-            icon: <Folder size={18} />,
-        },
-        {
-            id: "Layout",
-            label: "Layout",
-            icon: <PanelsTopLeft size={18} />,
-        },
-        {
-            id: "Export",
-            label: "Import/Export",
-            icon: <FileDown size={18} />,
-        },
-        {
-            id: "Collaborators",
-            label: "Collaborators",
-            icon: <Users size={18} />,
-        },
-    ],
-};
-
-const PREFERENCES_MENU: MenuSection = {
-    group: "Preferences",
-    items: [
-        {
-            id: "Keybinds",
-            label: "Keybinds",
-            icon: <Keyboard size={18} />,
-        },
-        {
-            id: "Appearance",
-            label: "Appearance",
-            icon: <Palette size={18} />,
-        },
-    ],
-};
-
-const ACCOUNT_MENU: MenuSection = {
-    group: "Account",
-    items: [
-        {
-            id: "Profile",
-            label: "Profile",
-            icon: <User size={18} />,
-        },
-        {
-            id: "Security",
-            label: "Security",
-            icon: <KeyRound size={18} />,
-        } /*
-        {
-            id: "Settings",
-            label: "Settings",
-            icon: <Settings size={18} />,
-        },*/,
-    ],
-};
+import AboutSettings from "./AboutSettings";
 
 const DashboardModal = () => {
     const { isOpen, closeDashboard, activeTab, setActiveTab } = useContext(DashboardContext);
     const { project, isYjsReady } = useContext(ProjectContext);
     const { user } = useCookieUser();
+    const t = useTranslations("modal");
+
+    const PROJECT_MENU = useMemo<MenuSection>(() => ({
+        group: t("groups.project"),
+        items: [
+            { id: "General",       label: t("tabs.General"),       icon: <Folder size={18} /> },
+            { id: "Layout",        label: t("tabs.Layout"),        icon: <PanelsTopLeft size={18} /> },
+            { id: "Export",        label: t("tabs.Export"),        icon: <FileDown size={18} /> },
+            { id: "Collaborators", label: t("tabs.Collaborators"), icon: <Users size={18} /> },
+        ],
+    }), [t]);
+
+    const PREFERENCES_MENU = useMemo<MenuSection>(() => ({
+        group: t("groups.preferences"),
+        items: [
+            { id: "Keybinds",   label: t("tabs.Keybinds"),   icon: <Keyboard size={18} /> },
+            { id: "Appearance", label: t("tabs.Appearance"), icon: <Palette size={18} /> },
+            { id: "Language",   label: t("tabs.Language"),   icon: <Globe size={18} /> },
+        ],
+    }), [t]);
+
+    const ACCOUNT_MENU = useMemo<MenuSection>(() => ({
+        group: t("groups.account"),
+        items: [
+            { id: "Profile",   label: t("tabs.Profile"),   icon: <User size={18} /> },
+            { id: "Security",  label: t("tabs.Security"),  icon: <KeyRound size={18} /> },
+        ],
+    }), [t]);
 
     // We're in a project if either:
     // - We have API membership data (cloud project), OR
@@ -103,7 +71,7 @@ const DashboardModal = () => {
         sections.push(PREFERENCES_MENU);
         if (isSignedIn) sections.push(ACCOUNT_MENU);
         return sections;
-    }, [isInProject, isSignedIn]);
+    }, [isInProject, isSignedIn, PROJECT_MENU, PREFERENCES_MENU, ACCOUNT_MENU]);
 
     // If active tab is a project tab but we're not in a project, or an account tab but not signed in, switch to first available tab
     useEffect(() => {
@@ -139,7 +107,7 @@ const DashboardModal = () => {
 
                 <div className={styles.content}>
                     <header className={styles.contentHeader}>
-                        <h3>{activeTab}</h3>
+                        <h3>{t(`tabs.${activeTab}` as Parameters<typeof t>[0])}</h3>
                         <CloseSVG className={styles.close_btn} onClick={closeDashboard} />
                     </header>
 
@@ -152,11 +120,14 @@ const DashboardModal = () => {
                         {/* Preferences tabs */}
                         {activeTab === "Keybinds" && <KeybindsSettings />}
                         {activeTab === "Appearance" && <AppearanceSettings />}
+                        {activeTab === "Language" && <LanguageSettings />}
                         {/* Account tabs - only when signed in */}
                         {isSignedIn && activeTab === "Profile" && <ProfileSettings dangerOpen={dangerOpen} onDangerToggle={() => setDangerOpen((v) => !v)} />}
                         {isSignedIn && activeTab === "Security" && <SecuritySettings />}
                         {/* Login tab - only when signed out */}
                         {!isSignedIn && activeTab === "Login" && <DashboardLogin />}
+                        {/* About tab */}
+                        {activeTab === "About" && <AboutSettings />}
                     </div>
                 </div>
             </div>

components/dashboard/DashboardSidebar.tsx

@@ -3,7 +3,8 @@
 import { ReactNode, useContext } from "react";
 import { mutate } from "swr";
 import { DashboardContext } from "@src/context/DashboardContext";
-import { LogIn, LogOut } from "lucide-react";
+import { Info, LogIn, LogOut } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import styles from "./DashboardModal.module.css";
 import { redirect } from "next/navigation";
@@ -21,7 +22,9 @@ export type Category =
     | "Settings"
     | "Keybinds"
     | "Appearance"
-    | "Login";
+    | "Language"
+    | "Login"
+    | "About";
 
 export interface MenuItem {
     id: Category;
@@ -43,6 +46,8 @@ interface SidebarMenuProps {
 const SidebarMenu = ({ structure, activeTab, onTabChange }: SidebarMenuProps) => {
     const { closeDashboard } = useContext(DashboardContext);
     const { user } = useCookieUser();
+    const t = useTranslations("sidebar");
+    const tModal = useTranslations("modal");
 
     const onLogOut = async () => {
         await logout();
@@ -60,7 +65,7 @@ const SidebarMenu = ({ structure, activeTab, onTabChange }: SidebarMenuProps) =>
 
     return (
         <aside className={styles.sidebar}>
-            <h2 className={styles.sidebarTitle}>Dashboard</h2>
+            <h2 className={styles.sidebarTitle}>{t("title")}</h2>
             <nav className={styles.navMenu}>
                 {structure.map((section) => (
                     <div key={section.group}>
@@ -82,14 +87,21 @@ const SidebarMenu = ({ structure, activeTab, onTabChange }: SidebarMenuProps) =>
                 {user ? (
                     <button className={styles.navItem} onClick={onLogOut}>
                         <LogOut size={18} />
-                        Log Out
+                        {t("logOut")}
                     </button>
                 ) : (
                     <button className={styles.navItem} onClick={() => onTabChange("Login")}>
                         <LogIn size={18} />
-                        Log In
+                        {t("logIn")}
                     </button>
                 )}
+                <button
+                    className={`${styles.navItem} ${activeTab === "About" ? styles.active : ""}`}
+                    onClick={() => onTabChange("About")}
+                >
+                    <Info size={18} />
+                    {tModal("tabs.About")}
+                </button>
             </div>
         </aside>
     );