fix: localize all remaining hardcoded user-facing strings (#7)

Replace hardcoded English strings with useLocalize() calls across
Sidebar, PermissionsUnavailable, ConfigRow, ArrayObjectField,
ImportYamlDialog, ScopeSelector, and KeyValueField. Adds 12 new
translation keys to en/translation.json and reuses existing keys
where available (com_auth_title, com_config_entry_n, com_ui_true,
com_ui_false, com_scope_create_error).

Author: dustinhealy

src/components/Sidebar.tsx

@@ -84,9 +84,9 @@ export function Sidebar({ user, collapsed, onToggle }: t.SidebarProps) {
       >
         <div className="flex h-14 shrink-0 items-center px-2">
           <div className="flex items-center gap-2.5 overflow-hidden px-1.5">
-            <img src={libreChatLogo} alt="LibreChat" className="h-6 w-6 shrink-0" />
+            <img src={libreChatLogo} alt={localize('com_a11y_logo_alt')} className="h-6 w-6 shrink-0" />
             <span className="truncate text-sm font-semibold text-(--cui-color-text-default)">
-              Admin Panel
+              {localize('com_auth_title')}
             </span>
           </div>
         </div>

src/components/configuration/ConfigRow.tsx

@@ -53,7 +53,9 @@ export function ConfigRow({
   ) : null;
 
   const pendingResetHint = isPendingReset ? (
-    <span className="text-[11px] font-medium text-(--cui-color-accent-danger)">Pending reset</span>
+    <span className="text-[11px] font-medium text-(--cui-color-accent-danger)">
+      {localize('com_config_pending_reset')}
+    </span>
   ) : null;
 
   const configuredDot =

src/components/configuration/ImportYamlDialog.tsx

@@ -410,7 +410,9 @@ export function ImportYamlDialog({
                   ))}
                   {validationErrors.length > 10 && (
                     <li className="py-0.5 opacity-70">
-                      ...and {validationErrors.length - 10} more
+                      {localize('com_config_validation_more', {
+                        count: String(validationErrors.length - 10),
+                      })}
                     </li>
                   )}
                 </ul>

src/components/configuration/ScopeSelector.tsx

@@ -123,10 +123,10 @@ export function ScopeSelector({
         resetState();
       } catch (err) {
         setCreating(false);
-        onError?.(err instanceof Error ? err.message : 'Failed to create scope');
+        onError?.(err instanceof Error ? err.message : localize('com_scope_create_error'));
       }
     },
-    [creating, queryClient, resetState, onError],
+    [creating, queryClient, resetState, onError, localize],
   );
 
   const handleCreateForGroup = useCallback(
@@ -146,10 +146,10 @@ export function ScopeSelector({
         resetState();
       } catch (err) {
         setCreating(false);
-        onError?.(err instanceof Error ? err.message : 'Failed to create scope');
+        onError?.(err instanceof Error ? err.message : localize('com_scope_create_error'));
       }
     },
-    [creating, queryClient, resetState, onError],
+    [creating, queryClient, resetState, onError, localize],
   );
 
   const handleDelete = useCallback(async () => {
@@ -174,9 +174,9 @@ export function ScopeSelector({
       setDeleting(false);
     } catch (err) {
       setDeleting(false);
-      onError?.(err instanceof Error ? err.message : 'Failed to delete scope');
+      onError?.(err instanceof Error ? err.message : localize('com_scope_delete_error'));
     }
-  }, [deleteTarget, deleting, queryClient, currentSelection, onSelect, onError]);
+  }, [deleteTarget, deleting, queryClient, currentSelection, onSelect, onError, localize]);
 
   const roleScopes = useMemo(
     () => scopes.filter((s) => s.principalType === PrincipalType.ROLE),

src/components/configuration/fields/ArrayObjectField.tsx

@@ -4,14 +4,14 @@ import { ObjectEntryCard } from './ObjectEntryCard';
 import { AddItemButton } from '@/components/shared';
 import { useLocalize } from '@/hooks';
 
-function getEntryLabel(item: t.ConfigValue, index: number): string {
+function getEntryLabel(item: t.ConfigValue): string | null {
   if (item && typeof item === 'object' && !Array.isArray(item)) {
     const obj = item as Record<string, t.ConfigValue>;
     if (typeof obj.name === 'string' && obj.name) return obj.name;
     if (typeof obj.label === 'string' && obj.label) return obj.label;
     if (typeof obj.group === 'string' && obj.group) return obj.group;
   }
-  return `Entry ${index + 1}`;
+  return null;
 }
 
 export function ArrayObjectField({
@@ -107,7 +107,7 @@ export function ArrayObjectField({
         <ObjectEntryCard
           key={keys[index] ?? index}
           id={entryIdPrefix ? `${entryIdPrefix}-${index}` : undefined}
-          entryKey={getEntryLabel(item, index)}
+          entryKey={getEntryLabel(item) ?? localize('com_config_entry_n', { n: String(index + 1) })}
           fields={fields}
           value={item}
           onValueChange={(v) => handleEntryChange(index, v)}

src/components/configuration/fields/KeyValueField.tsx

@@ -6,11 +6,11 @@ import { AddItemButton, TrashButton } from '@/components/shared';
 import { useLocalize } from '@/hooks';
 
 const DEFAULT_TYPES: t.KVValueType[] = ['string', 'number', 'boolean'];
-const TYPE_LABELS: Record<t.KVValueType, string> = {
-  string: 'abc',
-  number: '123',
-  boolean: 'T/F',
-  json: '{ }',
+const TYPE_LABEL_KEYS: Record<t.KVValueType, string> = {
+  string: 'com_kv_type_string',
+  number: 'com_kv_type_number',
+  boolean: 'com_kv_type_boolean',
+  json: 'com_kv_type_json',
 };
 
 function LocalInput({
@@ -171,8 +171,8 @@ export function KeyValueField({
               disabled={disabled}
               aria-label={valueLabel}
             >
-              <Select.Item value="true">true</Select.Item>
-              <Select.Item value="false">false</Select.Item>
+              <Select.Item value="true">{localize('com_ui_true')}</Select.Item>
+              <Select.Item value="false">{localize('com_ui_false')}</Select.Item>
             </Select>
           </div>
         ) : (
@@ -195,7 +195,7 @@ export function KeyValueField({
             >
               {availableTypes.map((vt) => (
                 <Select.Item key={vt} value={vt}>
-                  {TYPE_LABELS[vt]}
+                  {localize(TYPE_LABEL_KEYS[vt])}
                 </Select.Item>
               ))}
             </Select>
@@ -231,7 +231,7 @@ export function KeyValueField({
             >
               {availableTypes.map((vt) => (
                 <Select.Item key={vt} value={vt}>
-                  {TYPE_LABELS[vt]}
+                  {localize(TYPE_LABEL_KEYS[vt])}
                 </Select.Item>
               ))}
             </Select>

src/components/shared/PermissionsUnavailable.tsx

@@ -1,18 +1,21 @@
+import { useLocalize } from '@/hooks';
+
 export function PermissionsUnavailable() {
+  const localize = useLocalize();
   return (
     <div role="alert" className="flex flex-1 flex-col items-center justify-center gap-4 p-6">
       <h2 className="text-xl font-semibold text-(--cui-color-title-default)">
-        Could not verify permissions
+        {localize('com_perm_unavailable_title')}
       </h2>
       <p className="max-w-md text-center text-sm text-(--cui-color-text-muted)">
-        The permissions service is temporarily unavailable. Please reload the page to try again.
+        {localize('com_perm_unavailable_desc')}
       </p>
       <button
         type="button"
         onClick={() => window.location.reload()}
         className="mt-2 cursor-pointer rounded-lg border border-(--cui-color-stroke-default) bg-transparent px-4 py-2 text-sm font-medium text-(--cui-color-text-default) transition-colors hover:bg-(--cui-color-background-hover)"
       >
-        Reload
+        {localize('com_ui_reload')}
       </button>
     </div>
   );

src/locales/en/translation.json

@@ -1016,5 +1016,16 @@
   "com_grants_assign_hint": "Roles and groups can be edited directly from the table above.",
   "com_grants_assign_no_users": "No eligible users found",
   "com_error_load_groups": "Failed to load groups. Please try again.",
-  "com_error_load_members": "Failed to load members. Please try again."
+  "com_error_load_members": "Failed to load members. Please try again.",
+  "com_perm_unavailable_title": "Could not verify permissions",
+  "com_perm_unavailable_desc": "The permissions service is temporarily unavailable. Please reload the page to try again.",
+  "com_ui_reload": "Reload",
+  "com_config_pending_reset": "Pending reset",
+  "com_config_validation_more": "...and {{count}} more",
+  "com_scope_delete_error": "Failed to delete configuration",
+  "com_kv_type_string": "abc",
+  "com_kv_type_number": "123",
+  "com_kv_type_boolean": "T/F",
+  "com_kv_type_json": "{ }",
+  "com_a11y_logo_alt": "LibreChat logo"
 }