From 802e296246a9ca3e9a32f6beb85dd1d0cb2e7623 Mon Sep 17 00:00:00 2001
From: Lekler <alexandrebicordeiro@hotmail.com>
Date: Wed, 28 Jan 2026 04:35:14 -0300
Subject: [PATCH] fix(ui): address PR review feedback (duplicates, types,
 labels)

---
 ui/src/i18n/lib/translate.ts |  8 ++------
 ui/src/i18n/lib/types.ts     |  2 +-
 ui/src/ui/app-render.ts      | 24 ++----------------------
 ui/src/ui/views/overview.ts  |  1 +
 4 files changed, 6 insertions(+), 29 deletions(-)

diff --git a/ui/src/i18n/lib/translate.ts b/ui/src/i18n/lib/translate.ts
index e7e62c9cb..9cef0696c 100644
--- a/ui/src/i18n/lib/translate.ts
+++ b/ui/src/i18n/lib/translate.ts
@@ -40,11 +40,7 @@ class Translator {
     setLocale(locale: string) {
         if (this.locale === locale) return;
         this.locale = locale;
-        try {
-            localStorage.setItem('moltbot-locale', locale);
-        } catch (e) {
-            // ignore
-        }
+        // localStorage persistence is handled by the app's UiSettings to avoid sync issues.
         this.notify();
     }
 
@@ -68,7 +64,7 @@ class Translator {
 
     private resolve(table: TranslationMap | undefined, key: string): any {
         if (!table) return undefined;
-        return key.split('.').reduce((obj, i) => (obj ? obj[i] : null), table);
+        return key.split('.').reduce((obj, i) => (obj ? (obj as any)[i] : null), table);
     }
 
     private interpolate(text: string, params?: Record<string, string | number>) {
diff --git a/ui/src/i18n/lib/types.ts b/ui/src/i18n/lib/types.ts
index 5570eb34e..00776e3b5 100644
--- a/ui/src/i18n/lib/types.ts
+++ b/ui/src/i18n/lib/types.ts
@@ -1 +1 @@
-export type TranslationMap = Record<string, any>; // Relaxed type for nested objects
+export type TranslationMap = Record<string, unknown>; // Relaxed type for nested objects
diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts
index 75173e8c5..ee18a8377 100644
--- a/ui/src/ui/app-render.ts
+++ b/ui/src/ui/app-render.ts
@@ -105,7 +105,7 @@ export function renderApp(state: AppViewState) {
   const presenceCount = state.presenceEntries.length;
   const sessionsCount = state.sessionsResult?.count ?? null;
   const cronNext = state.cronStatus?.nextWakeAtMs ?? null;
-  const chatDisabledReason = state.connected ? null : t("status.disconnected") + " from gateway.";
+  const chatDisabledReason = state.connected ? null : t("status.disconnected_from_gateway");
   const isChat = state.tab === "chat";
   const chatFocus = isChat && (state.settings.chatFocusMode || state.onboarding);
   const showThinking = state.onboarding ? false : state.settings.chatShowThinking;
@@ -122,40 +122,28 @@ export function renderApp(state: AppViewState) {
       state.applySettings({
         ...state.settings,
         navCollapsed: !state.settings.navCollapsed,
-      })}
-            @click=${() =>
-      state.applySettings({
-        ...state.settings,
-        navCollapsed: !state.settings.navCollapsed,
       })}
             title="${state.settings.navCollapsed ? t("sidebar.expand") : t("sidebar.collapse")}"
             aria-label="${state.settings.navCollapsed ? t("sidebar.expand") : t("sidebar.collapse")}"
           >
             <span class="nav-collapse-toggle__icon">${icons.menu}</span>
-          >
-            <span class="nav-collapse-toggle__icon">${icons.menu}</span>
           </button>
           <div class="brand">
             <div class="brand-logo">
               <img src="https://mintcdn.com/clawdhub/4rYvG-uuZrMK_URE/assets/pixel-lobster.svg?fit=max&auto=format&n=4rYvG-uuZrMK_URE&q=85&s=da2032e9eac3b5d9bfe7eb96ca6a8a26" alt="Moltbot" />
             </div>
-            <div class="brand-text">
             <div class="brand-text">
               <div class="brand-title">${t("brand.title")}</div>
               <div class="brand-sub">${t("brand.subtitle")}</div>
             </div>
-            </div>
           </div>
         </div>
         <div class="topbar-status">
-          <div class="pill">
-            <span class="statusDot ${state.connected ? "ok" : ""}"></span>
           <div class="pill">
             <span class="statusDot ${state.connected ? "ok" : ""}"></span>
             <span>${t("status.health")}</span>
             <span class="mono">${state.connected ? t("status.ok") : t("status.offline")}</span>
           </div>
-          </div>
           ${renderThemeToggle(state)}
         </div>
       </header>
@@ -177,7 +165,7 @@ export function renderApp(state: AppViewState) {
           }}
                 aria-expanded=${!isGroupCollapsed}
               >
-                <span class="nav-label__text">${group.label}</span>
+                <span class="nav-label__text">${t("nav.group." + group.label)}</span>
                 <span class="nav-label__chevron">${isGroupCollapsed ? "+" : "−"}</span>
               </button>
               <div class="nav-group__items">
@@ -186,29 +174,21 @@ export function renderApp(state: AppViewState) {
             </div>
           `;
       })}
-        <div class="nav-group nav-group--links">
-          <div class="nav-label nav-label--static">
         <div class="nav-group nav-group--links">
           <div class="nav-label nav-label--static">
             <span class="nav-label__text">${t("nav.resources")}</span>
           </div>
-          <div class="nav-group__items">
-          </div>
           <div class="nav-group__items">
             <a
               class="nav-item nav-item--external"
               href="https://docs.molt.bot"
               target="_blank"
               rel="noreferrer"
-              title="Docs (opens in new tab)"
-            >
-              <span class="nav-item__icon" aria-hidden="true">${icons.book}</span>
               title="${t("nav.docs")} (opens in new tab)"
             >
               <span class="nav-item__icon" aria-hidden="true">${icons.book}</span>
               <span class="nav-item__text">${t("nav.docs")}</span>
             </a>
-            </a>
           </div>
         </div>
       </aside>
diff --git a/ui/src/ui/views/overview.ts b/ui/src/ui/views/overview.ts
index 57eb97093..547fe0c99 100644
--- a/ui/src/ui/views/overview.ts
+++ b/ui/src/ui/views/overview.ts
@@ -157,6 +157,7 @@ export function renderOverview(props: OverviewProps) {
             />
           </label>
           <label class="field">
+            <span>Default Session Key</span>
             <input
               .value=${props.settings.sessionKey}
               @input=${(e: Event) => {