refactor(dashboard): reorganize menu actions across sidebar/header/profile

Move shutdown into header popup + profile, move remote into sidebar above settings, add flag-only language switcher in header, and add language card plus shutdown/logout actions to the profile page. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-06 16:05:44 +07:00
parent 293cf40455
commit f161b295a5
6 changed files with 235 additions and 107 deletions
--- a/src/app/(dashboard)/dashboard/profile/page.js
+++ b/src/app/(dashboard)/dashboard/profile/page.js
@@ -1,13 +1,32 @@
 "use client";

 import { useState, useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
 import { Card, Button, Toggle, Input } from "@/shared/components";
+import { ConfirmModal } from "@/shared/components/Modal";
+import LanguageSwitcher from "@/shared/components/LanguageSwitcher";
 import { useTheme } from "@/shared/hooks/useTheme";
 import { cn } from "@/shared/utils/cn";
 import { APP_CONFIG } from "@/shared/constants/config";
+import { LOCALE_COOKIE, normalizeLocale } from "@/i18n/config";
+import { LOCALE_FLAGS } from "@/shared/constants/locales";
+
+function getLocaleFromCookie() {
+  if (typeof document === "undefined") return "en";
+  const cookie = document.cookie
+    .split(";")
+    .find((c) => c.trim().startsWith(`${LOCALE_COOKIE}=`));
+  const value = cookie ? decodeURIComponent(cookie.split("=")[1]) : "en";
+  return normalizeLocale(value);
+}

 export default function ProfilePage() {
+  const router = useRouter();
  const { theme, setTheme, isDark } = useTheme();
+  const [locale, setLocale] = useState("en");
+  const [langOpen, setLangOpen] = useState(false);
+  const [shutdownOpen, setShutdownOpen] = useState(false);
+  const [isShuttingDown, setIsShuttingDown] = useState(false);
  const [settings, setSettings] = useState({ fallbackStrategy: "fill-first" });
  const [loading, setLoading] = useState(true);
  const [passwords, setPasswords] = useState({ current: "", new: "", confirm: "" });
@@ -39,6 +58,10 @@ export default function ProfilePage() {
  const [proxyLoading, setProxyLoading] = useState(false);
  const [proxyTestLoading, setProxyTestLoading] = useState(false);

+  useEffect(() => {
+    setLocale(getLocaleFromCookie());
+  }, [langOpen]);
+
  useEffect(() => {
    fetch("/api/settings")
      .then((res) => res.json())
@@ -515,6 +538,29 @@ export default function ProfilePage() {

  const observabilityEnabled = settings.enableObservability === true;

+  const handleShutdown = async () => {
+    setIsShuttingDown(true);
+    try {
+      await fetch("/api/version/shutdown", { method: "POST" });
+    } catch (e) {
+      // Expected to fail as server shuts down; ignore error
+    }
+    setIsShuttingDown(false);
+    setShutdownOpen(false);
+  };
+
+  const handleLogout = async () => {
+    try {
+      const res = await fetch("/api/auth/logout", { method: "POST" });
+      if (res.ok) {
+        router.push("/login");
+        router.refresh();
+      }
+    } catch (err) {
+      console.error("Failed to logout:", err);
+    }
+  };
+
  return (
    <div className="max-w-2xl mx-auto px-4 sm:px-0">
      <div className="flex flex-col gap-6">
@@ -593,6 +639,24 @@ export default function ProfilePage() {
          </div>
        </Card>

+        {/* Language */}
+        <Card>
+          <div className="flex items-center gap-3 mb-4">
+            <div className="size-10 rounded-lg bg-blue-500/10 text-blue-500 flex items-center justify-center shrink-0">
+              <span className="material-symbols-outlined text-[20px]">language</span>
+            </div>
+            <h3 className="text-base sm:text-lg font-semibold">Language</h3>
+          </div>
+          <button
+            onClick={() => setLangOpen(true)}
+            className="flex items-center justify-between w-full p-3 rounded-lg bg-bg border border-border hover:border-primary/50 transition-colors"
+            data-i18n-skip="true"
+          >
+            <span className="text-sm text-text-muted">Display language</span>
+            <span className="text-2xl">{LOCALE_FLAGS[locale] || "🌐"}</span>
+          </button>
+        </Card>
+
        {/* Security */}
        <Card>
          <div className="flex items-center gap-3 mb-4">
@@ -1024,12 +1088,53 @@ export default function ProfilePage() {
          </div>
        </Card>

+        {/* Account actions */}
+        <div className="flex flex-col sm:flex-row gap-2">
+          <Button
+            variant="outline"
+            fullWidth
+            icon="power_settings_new"
+            onClick={() => setShutdownOpen(true)}
+            className="text-red-500 border-red-200 hover:bg-red-50 hover:border-red-300"
+          >
+            Shutdown
+          </Button>
+          <Button
+            variant="outline"
+            fullWidth
+            icon="logout"
+            onClick={handleLogout}
+          >
+            Logout
+          </Button>
+        </div>
+
        {/* App Info */}
        <div className="text-center text-xs sm:text-sm text-text-muted py-4">
          <p>{APP_CONFIG.name} v{APP_CONFIG.version}</p>
          <p className="mt-1">Local Mode - All data stored on your machine</p>
        </div>
      </div>
+
+      <LanguageSwitcher
+        hideTrigger
+        isOpen={langOpen}
+        onClose={(next) => {
+          setLangOpen(false);
+          setLocale(next);
+        }}
+      />
+      <ConfirmModal
+        isOpen={shutdownOpen}
+        onClose={() => setShutdownOpen(false)}
+        onConfirm={handleShutdown}
+        title="Close Proxy"
+        message="Are you sure you want to close the proxy server?"
+        confirmText="Close"
+        cancelText="Cancel"
+        variant="danger"
+        loading={isShuttingDown}
+      />
    </div>
  );
 }
--- a/src/shared/components/Header.js
+++ b/src/shared/components/Header.js
@@ -6,6 +6,7 @@ import Link from "next/link";
 import PropTypes from "prop-types";
 import ProviderIcon from "@/shared/components/ProviderIcon";
 import HeaderMenu from "@/shared/components/HeaderMenu";
+import HeaderLanguage from "@/shared/components/HeaderLanguage";
 import ThemeToggle from "@/shared/components/ThemeToggle";
 import DonateModal from "@/shared/components/DonateModal";
 import { useHeaderSearchStore } from "@/store/headerSearchStore";
@@ -315,6 +316,7 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
          <span className="hidden sm:inline">Donate</span>
        </button>
        <ThemeToggle />
+        <HeaderLanguage />
        <HeaderMenu onLogout={handleLogout} />
      </div>
      <DonateModal isOpen={donateOpen} onClose={() => setDonateOpen(false)} />
--- a/src/shared/components/HeaderLanguage.js
+++ b/src/shared/components/HeaderLanguage.js
@@ -0,0 +1,46 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { LOCALE_COOKIE, normalizeLocale } from "@/i18n/config";
+import { LOCALE_FLAGS } from "@/shared/constants/locales";
+import LanguageSwitcher from "./LanguageSwitcher";
+
+function getLocaleFromCookie() {
+  if (typeof document === "undefined") return "en";
+  const cookie = document.cookie
+    .split(";")
+    .find((c) => c.trim().startsWith(`${LOCALE_COOKIE}=`));
+  const value = cookie ? decodeURIComponent(cookie.split("=")[1]) : "en";
+  return normalizeLocale(value);
+}
+
+export default function HeaderLanguage() {
+  const [open, setOpen] = useState(false);
+  const [locale, setLocale] = useState("en");
+
+  useEffect(() => {
+    setLocale(getLocaleFromCookie());
+  }, [open]);
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="flex items-center justify-center p-2 rounded-lg text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-all"
+        title="Language"
+        data-i18n-skip="true"
+      >
+        <span className="text-lg leading-none">{LOCALE_FLAGS[locale] || "🌐"}</span>
+      </button>
+
+      <LanguageSwitcher
+        hideTrigger
+        isOpen={open}
+        onClose={(next) => {
+          setOpen(false);
+          setLocale(next);
+        }}
+      />
+    </>
+  );
+}
--- a/src/shared/components/HeaderMenu.js
+++ b/src/shared/components/HeaderMenu.js
@@ -2,56 +2,9 @@

 import { useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
-import { LOCALE_COOKIE, normalizeLocale } from "@/i18n/config";
 import { useTheme } from "@/shared/hooks/useTheme";
 import ChangelogModal from "./ChangelogModal";
-import NineRemotePromoModal from "./NineRemotePromoModal";
-import LanguageSwitcher from "./LanguageSwitcher";
-
-const LOCALE_INFO = {
-  "en": { name: "English", flag: "🇺🇸" },
-  "vi": { name: "Tiếng Việt", flag: "🇻🇳" },
-  "zh-CN": { name: "简体中文", flag: "🇨🇳" },
-  "zh-TW": { name: "繁體中文", flag: "🇹🇼" },
-  "ja": { name: "日本語", flag: "🇯🇵" },
-  "pt-BR": { name: "Português (BR)", flag: "🇧🇷" },
-  "pt-PT": { name: "Português (PT)", flag: "🇵🇹" },
-  "ko": { name: "한국어", flag: "🇰🇷" },
-  "es": { name: "Español", flag: "🇪🇸" },
-  "de": { name: "Deutsch", flag: "🇩🇪" },
-  "fr": { name: "Français", flag: "🇫🇷" },
-  "he": { name: "עברית", flag: "🇮🇱" },
-  "ar": { name: "العربية", flag: "🇸🇦" },
-  "ru": { name: "Русский", flag: "🇷🇺" },
-  "pl": { name: "Polski", flag: "🇵🇱" },
-  "cs": { name: "Čeština", flag: "🇨🇿" },
-  "nl": { name: "Nederlands", flag: "🇳🇱" },
-  "tr": { name: "Türkçe", flag: "🇹🇷" },
-  "uk": { name: "Українська", flag: "🇺🇦" },
-  "tl": { name: "Tagalog", flag: "🇵🇭" },
-  "id": { name: "Indonesia", flag: "🇮🇩" },
-  "th": { name: "ไทย", flag: "🇹🇭" },
-  "hi": { name: "हिन्दी", flag: "🇮🇳" },
-  "bn": { name: "বাংলা", flag: "🇧🇩" },
-  "ur": { name: "اردو", flag: "🇵🇰" },
-  "ro": { name: "Română", flag: "🇷🇴" },
-  "sv": { name: "Svenska", flag: "🇸🇪" },
-  "it": { name: "Italiano", flag: "🇮🇹" },
-  "el": { name: "Ελληνικά", flag: "🇬🇷" },
-  "hu": { name: "Magyar", flag: "🇭🇺" },
-  "fi": { name: "Suomi", flag: "🇫🇮" },
-  "da": { name: "Dansk", flag: "🇩🇰" },
-  "no": { name: "Norsk", flag: "🇳🇴" },
-};
-
-function getLocaleFromCookie() {
-  if (typeof document === "undefined") return "en";
-  const cookie = document.cookie
-    .split(";")
-    .find((c) => c.trim().startsWith(`${LOCALE_COOKIE}=`));
-  const value = cookie ? decodeURIComponent(cookie.split("=")[1]) : "en";
-  return normalizeLocale(value);
-}
+import { ConfirmModal } from "./Modal";

 function MenuItem({ icon, label, onClick, trailing, danger }) {
  return (
@@ -83,15 +36,21 @@ MenuItem.propTypes = {
 export default function HeaderMenu({ onLogout }) {
  const [isOpen, setIsOpen] = useState(false);
  const [changelogOpen, setChangelogOpen] = useState(false);
-  const [remoteOpen, setRemoteOpen] = useState(false);
-  const [langOpen, setLangOpen] = useState(false);
-  const [locale, setLocale] = useState("en");
+  const [shutdownOpen, setShutdownOpen] = useState(false);
+  const [isShuttingDown, setIsShuttingDown] = useState(false);
  const { toggleTheme, isDark } = useTheme();
  const menuRef = useRef(null);

-  useEffect(() => {
-    setLocale(getLocaleFromCookie());
-  }, [langOpen]);
+  const handleShutdown = async () => {
+    setIsShuttingDown(true);
+    try {
+      await fetch("/api/version/shutdown", { method: "POST" });
+    } catch (e) {
+      // Expected to fail as server shuts down; ignore error
+    }
+    setIsShuttingDown(false);
+    setShutdownOpen(false);
+  };

  useEffect(() => {
    const handleClickOutside = (e) => {
@@ -125,21 +84,16 @@ export default function HeaderMenu({ onLogout }) {
              label="Change Log"
              onClick={() => { close(); setChangelogOpen(true); }}
            />
-            <MenuItem
-              icon="language"
-              label={LOCALE_INFO[locale]?.name || locale}
-              trailing={LOCALE_INFO[locale]?.flag || "🌐"}
-              onClick={() => { close(); setLangOpen(true); }}
-            />
            <MenuItem
              icon={isDark ? "light_mode" : "dark_mode"}
              label="Theme"
              onClick={() => { toggleTheme(); close(); }}
            />
            <MenuItem
-              icon="computer"
-              label="Remote"
-              onClick={() => { close(); setRemoteOpen(true); }}
+              icon="power_settings_new"
+              label="Shutdown"
+              danger
+              onClick={() => { close(); setShutdownOpen(true); }}
            />
            <MenuItem
              icon="logout"
@@ -152,11 +106,17 @@ export default function HeaderMenu({ onLogout }) {
      </div>

      <ChangelogModal isOpen={changelogOpen} onClose={() => setChangelogOpen(false)} />
-      <NineRemotePromoModal isOpen={remoteOpen} onClose={() => setRemoteOpen(false)} />
-      <LanguageSwitcher hideTrigger isOpen={langOpen} onClose={((locale) => {
-        setLangOpen(false)
-        setLocale(locale)
-      })} />
+      <ConfirmModal
+        isOpen={shutdownOpen}
+        onClose={() => setShutdownOpen(false)}
+        onConfirm={handleShutdown}
+        title="Close Proxy"
+        message="Are you sure you want to close the proxy server?"
+        confirmText="Close"
+        cancelText="Cancel"
+        variant="danger"
+        loading={isShuttingDown}
+      />
    </>
  );
 }
--- a/src/shared/components/Sidebar.js
+++ b/src/shared/components/Sidebar.js
@@ -10,6 +10,7 @@ import { MEDIA_PROVIDER_KINDS } from "@/shared/constants/providers";
 import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
 import Button from "./Button";
 import { ConfirmModal } from "./Modal";
+import NineRemotePromoModal from "./NineRemotePromoModal";

 // const VISIBLE_MEDIA_KINDS = ["embedding", "image", "imageToText", "tts", "stt", "webSearch", "webFetch", "video", "music"];
 const VISIBLE_MEDIA_KINDS = ["embedding", "image", "tts", "stt"];
@@ -40,8 +41,7 @@ const systemItems = [
 export default function Sidebar({ onClose }) {
  const pathname = usePathname();
  const [mediaOpen, setMediaOpen] = useState(false);
-  const [showShutdownModal, setShowShutdownModal] = useState(false);
-  const [isShuttingDown, setIsShuttingDown] = useState(false);
+  const [showRemoteModal, setShowRemoteModal] = useState(false);
  const [isDisconnected, setIsDisconnected] = useState(false);
  const [updateInfo, setUpdateInfo] = useState(null);
  const [showUpdateModal, setShowUpdateModal] = useState(false);
@@ -106,18 +106,6 @@ export default function Sidebar({ onClose }) {
  // user runs the command manually in another terminal.


-  const handleShutdown = async () => {
-    setIsShuttingDown(true);
-    try {
-      await fetch("/api/version/shutdown", { method: "POST" });
-    } catch (e) {
-      // Expected to fail as server shuts down; ignore error
-    }
-    setIsShuttingDown(false);
-    setShowShutdownModal(false);
-    setIsDisconnected(true);
-  };
-
  return (
    <>
      <aside className="flex w-72 flex-col border-r border-border-subtle bg-vibrancy backdrop-blur-xl transition-colors duration-300 min-h-full">
@@ -302,6 +290,20 @@ export default function Sidebar({ onClose }) {
              ) : null;
            })}

+            {/* Remote */}
+            <button
+              onClick={() => setShowRemoteModal(true)}
+              className={cn(
+                "flex items-center gap-3 px-3 py-1 rounded-lg transition-all group w-full",
+                "text-text-muted hover:bg-surface-2 hover:text-text-main"
+              )}
+            >
+              <span className="material-symbols-outlined text-[18px] group-hover:text-primary transition-colors">
+                computer
+              </span>
+              <span className="text-[13px] font-medium">Remote</span>
+            </button>
+
            {/* Settings */}
            <Link
              href="/dashboard/profile"
@@ -326,33 +328,10 @@ export default function Sidebar({ onClose }) {
          </div>
        </nav>

-        {/* Footer section */}
-        <div className="p-3 border-t border-border-subtle">
-          {/* Shutdown button */}
-          <Button
-            variant="outline"
-            fullWidth
-            icon="power_settings_new"
-            onClick={() => setShowShutdownModal(true)}
-            className="text-red-500 border-red-200 hover:bg-red-50 hover:border-red-300"
-          >
-            Shutdown
-          </Button>
-        </div>
      </aside>

-      {/* Shutdown Confirmation Modal */}
-      <ConfirmModal
-        isOpen={showShutdownModal}
-        onClose={() => setShowShutdownModal(false)}
-        onConfirm={handleShutdown}
-        title="Close Proxy"
-        message="Are you sure you want to close the proxy server?"
-        confirmText="Close"
-        cancelText="Cancel"
-        variant="danger"
-        loading={isShuttingDown}
-      />
+      {/* Remote Promo Modal */}
+      <NineRemotePromoModal isOpen={showRemoteModal} onClose={() => setShowRemoteModal(false)} />

      {/* Update Confirmation Modal */}
      <ConfirmModal
--- a/src/shared/constants/locales.js
+++ b/src/shared/constants/locales.js
@@ -0,0 +1,36 @@
+// Centralized locale display flags (shared across UI components)
+export const LOCALE_FLAGS = {
+  "en": "🇺🇸",
+  "vi": "🇻🇳",
+  "zh-CN": "🇨🇳",
+  "zh-TW": "🇹🇼",
+  "ja": "🇯🇵",
+  "pt-BR": "🇧🇷",
+  "pt-PT": "🇵🇹",
+  "ko": "🇰🇷",
+  "es": "🇪🇸",
+  "de": "🇩🇪",
+  "fr": "🇫🇷",
+  "he": "🇮🇱",
+  "ar": "🇸🇦",
+  "ru": "🇷🇺",
+  "pl": "🇵🇱",
+  "cs": "🇨🇿",
+  "nl": "🇳🇱",
+  "tr": "🇹🇷",
+  "uk": "🇺🇦",
+  "tl": "🇵🇭",
+  "id": "🇮🇩",
+  "th": "🇹🇭",
+  "hi": "🇮🇳",
+  "bn": "🇧🇩",
+  "ur": "🇵🇰",
+  "ro": "🇷🇴",
+  "sv": "🇸🇪",
+  "it": "🇮🇹",
+  "el": "🇬🇷",
+  "hu": "🇭🇺",
+  "fi": "🇫🇮",
+  "da": "🇩🇰",
+  "no": "🇳🇴",
+};