fix mobile menu not re-rendering with unsaved dots

This commit is contained in:
Josh Hawkins 2026-02-08 19:44:24 -06:00
parent 4dd12ac934
commit 1a6e634ba6

View File

@ -1004,25 +1004,25 @@ export default function Settings() {
Object.entries(CAMERA_SECTION_MAPPING).forEach( Object.entries(CAMERA_SECTION_MAPPING).forEach(
([sectionKey, settingsKey]) => { ([sectionKey, settingsKey]) => {
const isOverridden = cameraOverrides.includes(sectionKey); const isOverridden = cameraOverrides.includes(sectionKey);
// Check if there are pending changes for this camera and section
const pendingDataKey = `${selectedCamera}::${sectionKey}`;
const hasChanges = pendingDataKey in pendingDataBySection;
overrideMap[settingsKey] = { overrideMap[settingsKey] = {
hasChanges: false, hasChanges,
isOverridden, isOverridden,
}; };
}, },
); );
setSectionStatusByKey((prev) => { setSectionStatusByKey((prev) => {
// Merge but preserve hasChanges from previous state // Merge and update both hasChanges and isOverridden for camera sections
const merged = { ...prev }; const merged = { ...prev };
Object.entries(overrideMap).forEach(([key, status]) => { Object.entries(overrideMap).forEach(([key, status]) => {
merged[key as SettingsType] = { merged[key as SettingsType] = status;
hasChanges: prev[key as SettingsType]?.hasChanges || false,
isOverridden: status.isOverridden,
};
}); });
return merged; return merged;
}); });
}, [selectedCamera, cameraOverrides]); }, [selectedCamera, cameraOverrides, pendingDataBySection]);
const renderMenuItemLabel = useCallback( const renderMenuItemLabel = useCallback(
(key: SettingsType) => { (key: SettingsType) => {
@ -1055,7 +1055,10 @@ export default function Settings() {
<> <>
<Toaster position="top-center" /> <Toaster position="top-center" />
{!contentMobileOpen && ( {!contentMobileOpen && (
<div className="flex size-full flex-col"> <div
key={`mobile-menu-${selectedCamera}`}
className="flex size-full flex-col"
>
<div className="sticky -top-2 z-50 mb-2 bg-background p-4"> <div className="sticky -top-2 z-50 mb-2 bg-background p-4">
<div className="relative flex w-full items-center justify-center"> <div className="relative flex w-full items-center justify-center">
<Logo className="h-8" /> <Logo className="h-8" />