From 03b26fe5bdbaddb2d3b305bf7aaff761a1aba8f8 Mon Sep 17 00:00:00 2001
From: PavelMakarchuk <pavel.ma99@gmail.com>
Date: Thu, 30 Apr 2026 10:22:18 -0400
Subject: [PATCH] Track selected program by id, not object reference

When the programs list reloads (e.g. country switch), the previously
selected Program object is no longer in the new array, so the detail
panel shows stale data. Hold the id in state and derive the program
from the current list via useMemo.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/rules/RulesOverview.tsx | 29 +++++++++++++++-----------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/rules/RulesOverview.tsx b/src/components/rules/RulesOverview.tsx
index 31aa651..6994664 100644
--- a/src/components/rules/RulesOverview.tsx
+++ b/src/components/rules/RulesOverview.tsx
@@ -404,7 +404,7 @@ function computeStatusCount(programList: Program[]) {
 
 export default function RulesOverview({ country = 'us' }: { country?: Country }) {
   const [viewMode, setViewMode] = useState<ViewMode>('programs');
-  const [selectedProgram, setSelectedProgram] = useState<Program | null>(null);
+  const [selectedProgramId, setSelectedProgramId] = useState<string | null>(null);
   const [selectedState, setSelectedState] = useState<string | null>(null);
   const [search, setSearch] = useState('');
   const [yearFilter, setYearFilter] = useState<number | null>(null);
@@ -414,6 +414,11 @@ export default function RulesOverview({ country = 'us' }: { country?: Country })
     fetchPrograms(country).then(setPrograms);
   }, [country]);
 
+  const selectedProgram = useMemo(
+    () => programs.find(program => program.id === selectedProgramId) ?? null,
+    [programs, selectedProgramId],
+  );
+
   const availableYears = useMemo(() => collectAllYears(programs), [programs]);
 
   const yearFilteredPrograms = useMemo(() => {
@@ -504,7 +509,7 @@ export default function RulesOverview({ country = 'us' }: { country?: Country })
           {(['programs', 'states'] as ViewMode[]).map(mode => (
             <button
               key={mode}
-              onClick={() => { setViewMode(mode); setSelectedProgram(null); setSelectedState(null); }}
+              onClick={() => { setViewMode(mode); setSelectedProgramId(null); setSelectedState(null); }}
               className="tw:cursor-pointer"
               style={{
                 padding: `${spacing.sm} ${spacing.xl}`,
@@ -580,7 +585,7 @@ export default function RulesOverview({ country = 'us' }: { country?: Country })
             {/* Selected program detail */}
             {selectedProgram && (
               <div style={{ marginBottom: spacing['2xl'] }}>
-                <ProgramDetailPanel program={selectedProgram} onClose={() => setSelectedProgram(null)} allPrograms={programs} />
+                <ProgramDetailPanel program={selectedProgram} onClose={() => setSelectedProgramId(null)} allPrograms={programs} />
               </div>
             )}
 
@@ -594,13 +599,13 @@ export default function RulesOverview({ country = 'us' }: { country?: Country })
                   {filteredFederal.map(program => (
                     <button
                       key={program.id}
-                      onClick={() => setSelectedProgram(selectedProgram?.id === program.id ? null : program)}
+                      onClick={() => setSelectedProgramId(selectedProgramId === program.id ? null : program.id)}
                       className="tw:cursor-pointer tw:text-left"
                       style={{
                         padding: spacing.lg,
                         borderRadius: spacing.radius.lg,
-                        border: `1px solid ${selectedProgram?.id === program.id ? colors.primary[400] : colors.border.light}`,
-                        backgroundColor: selectedProgram?.id === program.id ? colors.primary[50] : colors.white,
+                        border: `1px solid ${selectedProgramId === program.id ? colors.primary[400] : colors.border.light}`,
+                        backgroundColor: selectedProgramId === program.id ? colors.primary[50] : colors.white,
                         fontFamily: typography.fontFamily.primary,
                         transition: 'all 0.15s ease',
                       }}
@@ -661,13 +666,13 @@ export default function RulesOverview({ country = 'us' }: { country?: Country })
                   {filteredState.map(program => (
                     <button
                       key={program.id}
-                      onClick={() => setSelectedProgram(selectedProgram?.id === program.id ? null : program)}
+                      onClick={() => setSelectedProgramId(selectedProgramId === program.id ? null : program.id)}
                       className="tw:cursor-pointer tw:text-left"
                       style={{
                         padding: spacing.lg,
                         borderRadius: spacing.radius.lg,
-                        border: `1px solid ${selectedProgram?.id === program.id ? colors.primary[400] : colors.border.light}`,
-                        backgroundColor: selectedProgram?.id === program.id ? colors.primary[50] : colors.white,
+                        border: `1px solid ${selectedProgramId === program.id ? colors.primary[400] : colors.border.light}`,
+                        backgroundColor: selectedProgramId === program.id ? colors.primary[50] : colors.white,
                         fontFamily: typography.fontFamily.primary,
                       }}
                     >
@@ -694,13 +699,13 @@ export default function RulesOverview({ country = 'us' }: { country?: Country })
                   {filteredLocal.map(program => (
                     <button
                       key={program.id}
-                      onClick={() => setSelectedProgram(selectedProgram?.id === program.id ? null : program)}
+                      onClick={() => setSelectedProgramId(selectedProgramId === program.id ? null : program.id)}
                       className="tw:cursor-pointer tw:text-left"
                       style={{
                         padding: spacing.lg,
                         borderRadius: spacing.radius.lg,
-                        border: `1px solid ${selectedProgram?.id === program.id ? colors.primary[400] : colors.border.light}`,
-                        backgroundColor: selectedProgram?.id === program.id ? colors.primary[50] : colors.white,
+                        border: `1px solid ${selectedProgramId === program.id ? colors.primary[400] : colors.border.light}`,
+                        backgroundColor: selectedProgramId === program.id ? colors.primary[50] : colors.white,
                         fontFamily: typography.fontFamily.primary,
                       }}
                     >