refactor(settings): replace modal with nested full-page route (#848)

* refactor(settings): replace modal with nested full-page route

Settings sections are now URL-addressable at /settings/:sectionId, rendered
nested inside EditorLayout alongside the stack sidebar. Browser back/forward
navigates between sections. Deep links (e.g. /settings/cloud-backup) load
the section directly on hard reload.

- Add react-router-dom v7; BrowserRouter wraps the full app tree
- New SettingsPage (scroll memory, Cmd+K palette), SettingsSidebar (NavLink
  active styling, back-arrow), SectionGate (visibility + tier lock card)
- Rename SectionId 'appstore' to 'app-store' so slug === SectionId
- Decouple SystemSection, DeveloperSection, AppStoreSection from modal-
  passed props; each fetches its own data on mount
- Replace onLabelsChanged prop chain with SENCHO_LABELS_CHANGED window event
- Drop onOpenSettings prop from UserProfileDropdown, HomeDashboard,
  ConfigurationStatus; each calls useNavigate directly
- Delete SettingsModal.tsx

* fix(settings): validate sectionId against registry before property write

Prevents prototype pollution (CodeQL js/remote-property-injection #243).
URL param sectionId is checked against SETTINGS_ITEMS before being used
as a property key on scrollPositionsRef.

* fix(settings): eliminate remote property injection via Map and registry-sourced key

Two-part fix for CodeQL js/remote-property-injection:

1. currentSection is now derived from SETTINGS_ITEMS.find().id (trusted
   registry data) instead of the raw sectionId URL param. The tainted
   string never flows into any property access.

2. scrollPositionsRef uses Map<SectionId, number> with .get()/.set()
   instead of a plain object. Map operations do not write to the prototype
   chain, removing the prototype pollution vector entirely.

* test(e2e): align settings selectors with full-page route

The settings refactor (4475afd) replaced the modal with a nested route.
The new sidebar renders sub-sections as NavLinks (role link, not button)
and adds a "Filter settings" button that collides with the loose
/settings/i regex used in mfa and nodes specs.

- Use exact 'Settings' match for the profile-dropdown menu row
- Switch the Nodes sub-section selector from button to link role

frontend/src/components/settings/AccountSection.tsx

@@ -12,13 +12,6 @@ import { MfaBackupCodesDialog } from '@/components/mfa/MfaBackupCodesDialog';
 import { toast } from '@/components/ui/toast-store';
 import { apiFetch } from '@/lib/api';
 
-interface AccountSectionProps {
-    authData: { oldPassword: string; newPassword: string; confirmPassword: string };
-    onAuthDataChange: (data: { oldPassword: string; newPassword: string; confirmPassword: string }) => void;
-    onPasswordChange: () => Promise<void>;
-    isSaving: boolean;
-}
-
 interface MfaStatus {
     enabled: boolean;
     backupCodesRemaining: number;
@@ -30,7 +23,10 @@ interface SSOProvider {
     type: 'ldap' | 'oidc';
 }
 
-export function AccountSection({ authData, onAuthDataChange, onPasswordChange, isSaving }: AccountSectionProps) {
+export function AccountSection() {
+    const [authData, setAuthData] = useState({ oldPassword: '', newPassword: '', confirmPassword: '' });
+    const [isSaving, setIsSaving] = useState(false);
+
     const [mfa, setMfa] = useState<MfaStatus | null>(null);
     const [mfaLoading, setMfaLoading] = useState(true);
     const [hasSso, setHasSso] = useState(false);
@@ -59,6 +55,39 @@ export function AccountSection({ authData, onAuthDataChange, onPasswordChange, i
             .catch(() => setHasSso(false));
     }, [refreshMfa]);
 
+    const handlePasswordChange = async () => {
+        if (!authData.oldPassword || !authData.newPassword || !authData.confirmPassword) {
+            toast.error('All fields are required');
+            return;
+        }
+        if (authData.newPassword !== authData.confirmPassword) {
+            toast.error('New passwords do not match');
+            return;
+        }
+        if (authData.newPassword.length < 8) {
+            toast.error('New password must be at least 8 characters');
+            return;
+        }
+        setIsSaving(true);
+        try {
+            const res = await apiFetch('/auth/password', {
+                method: 'PUT',
+                body: JSON.stringify({ oldPassword: authData.oldPassword, newPassword: authData.newPassword }),
+            });
+            if (res.ok) {
+                toast.success('Password updated successfully');
+                setAuthData({ oldPassword: '', newPassword: '', confirmPassword: '' });
+            } else {
+                const data = await res.json().catch(() => ({}));
+                toast.error(data?.error || 'Failed to update password');
+            }
+        } catch (e: unknown) {
+            toast.error((e as Error)?.message || 'Network error during password change');
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
     const handleBypassToggle = async (enforce: boolean) => {
         setTogglingBypass(true);
         try {
@@ -89,7 +118,7 @@ export function AccountSection({ authData, onAuthDataChange, onPasswordChange, i
                     <Input
                         type="password"
                         value={authData.oldPassword}
-                        onChange={(e) => onAuthDataChange({ ...authData, oldPassword: e.target.value })}
+                        onChange={(e) => setAuthData({ ...authData, oldPassword: e.target.value })}
                     />
                 </div>
                 <div className="space-y-2">
@@ -97,7 +126,7 @@ export function AccountSection({ authData, onAuthDataChange, onPasswordChange, i
                     <Input
                         type="password"
                         value={authData.newPassword}
-                        onChange={(e) => onAuthDataChange({ ...authData, newPassword: e.target.value })}
+                        onChange={(e) => setAuthData({ ...authData, newPassword: e.target.value })}
                     />
                 </div>
                 <div className="space-y-2">
@@ -105,10 +134,10 @@ export function AccountSection({ authData, onAuthDataChange, onPasswordChange, i
                     <Input
                         type="password"
                         value={authData.confirmPassword}
-                        onChange={(e) => onAuthDataChange({ ...authData, confirmPassword: e.target.value })}
+                        onChange={(e) => setAuthData({ ...authData, confirmPassword: e.target.value })}
                     />
                 </div>
-                <Button onClick={onPasswordChange} disabled={isSaving} className="w-full">
+                <Button onClick={handlePasswordChange} disabled={isSaving} className="w-full">
                     {isSaving
                         ? <><RefreshCw className="w-4 h-4 mr-2 animate-spin" />Updating...</>
                         : 'Update Password'