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
2026-08-26 02:06:49 +00:00 · 2026-04-30 12:57:02 -04:00
parent 3c30c2befe
commit 9a1c043189
21 changed files with 834 additions and 624 deletions
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { Lock } from 'lucide-react';
+import { useAuth } from '@/context/AuthContext';
+import { useLicense } from '@/context/LicenseContext';
+import { useNodes } from '@/context/NodeContext';
+import { SETTINGS_ITEMS, getSettingsItem, isItemVisible, isItemLocked } from './registry';
+import type { VisibilityContext } from './registry';
+import type { SectionId } from './types';
+
+interface TierLockedCardProps {
+    tier: 'skipper' | 'admiral';
+}
+
+function TierLockedCard({ tier }: TierLockedCardProps) {
+    const title = tier === 'admiral' ? 'Admiral feature' : 'Skipper feature';
+
+    return (
+        <div className="flex flex-1 items-center justify-center p-8">
+            <div className="flex flex-col items-center gap-4 rounded-xl border border-glass-border bg-glass px-10 py-8 text-center">
+                <div className="flex h-12 w-12 items-center justify-center rounded-full border border-glass-border bg-glass">
+                    <Lock className="h-5 w-5 text-stat-subtitle" />
+                </div>
+                <div className="flex flex-col gap-1">
+                    <p className="text-sm font-semibold text-stat-value">{title}</p>
+                    <p className="text-sm text-stat-subtitle">Upgrade to unlock more features.</p>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+interface SectionGateProps {
+    sectionId: SectionId;
+    children: React.ReactNode;
+}
+
+export function SectionGate({ sectionId, children }: SectionGateProps) {
+    const { isAdmin } = useAuth();
+    const { isPaid, license } = useLicense();
+    const { activeNode } = useNodes();
+
+    const isAdmiral = isPaid && license?.variant === 'admiral';
+    const isRemote = activeNode?.type === 'remote';
+
+    const visibility: VisibilityContext = {
+        isAdmin,
+        isPaid,
+        isAdmiral,
+        isRemote,
+    };
+
+    const item = getSettingsItem(sectionId);
+
+    if (!item || !isItemVisible(item, visibility)) {
+        const fallback = SETTINGS_ITEMS.find(i => isItemVisible(i, visibility));
+        return <Navigate to={`/settings/${fallback?.id ?? 'appearance'}`} replace />;
+    }
+
+    if (isItemLocked(item, visibility) && (item.tier === 'skipper' || item.tier === 'admiral')) {
+        return <TierLockedCard tier={item.tier} />;
+    }
+
+    return <>{children}</>;
+}