fix: fix merge

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -8,14 +8,14 @@ import {
     styled,
     Typography,
 } from '@mui/material';
-import React, { type FC, useEffect, useState } from 'react';
+import React, { type FC, useEffect, useRef } from 'react';
 import LinkIcon from '@mui/icons-material/ArrowForward';
 import { WelcomeDialog } from './WelcomeDialog';
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
 import { usePersonalDashboard } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboard';
 import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
 import type {
-    PersonalDashboardSchema,
+    PersonalDashboardSchemaFlagsItem,
     PersonalDashboardSchemaProjectsItem,
 } from '../../openapi';
 import { FlagExposure } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure';
@@ -55,15 +55,29 @@ export const StyledCardTitle = styled('div')<{ lines?: number }>(
         wordBreak: 'break-word',
     }),
 );
-
 const FlagListItem: FC<{
     flag: { name: string; project: string; type: string };
     selected: boolean;
     onClick: () => void;
 }> = ({ flag, selected, onClick }) => {
+    const activeFlagRef = useRef<HTMLLIElement>(null);
+
+    useEffect(() => {
+        if (activeFlagRef.current) {
+            activeFlagRef.current.scrollIntoView({
+                block: 'nearest',
+                inline: 'start',
+            });
+        }
+    }, []);
     const IconComponent = getFeatureTypeIcons(flag.type);
     return (
-        <ListItem key={flag.name} disablePadding={true} sx={{ mb: 1 }}>
+        <ListItem
+            key={flag.name}
+            disablePadding={true}
+            sx={{ mb: 1 }}
+            ref={selected ? activeFlagRef : null}
+        >
             <ListItemButton
                 sx={listItemStyle}
                 selected={selected}
@@ -88,18 +102,70 @@ const FlagListItem: FC<{
     );
 };
 
-const useActiveProject = (projects: PersonalDashboardSchemaProjectsItem[]) => {
-    const [activeProject, setActiveProject] = useState(projects[0]?.id);
+const useDashboardState = (
+    projects: PersonalDashboardSchemaProjectsItem[],
+    flags: PersonalDashboardSchemaFlagsItem[],
+) => {
+    type State = {
+        activeProject: string | undefined;
+        activeFlag: PersonalDashboardSchemaFlagsItem | undefined;
+    };
+
+    const defaultState = {
+        activeProject: undefined,
+        activeFlag: undefined,
+    };
+
+    const [state, setState] = useLocalStorageState<State>(
+        'personal-dashboard:v1',
+        defaultState,
+    );
 
     useEffect(() => {
-        if (!activeProject && projects.length > 0) {
-            setActiveProject(projects[0].id);
+        const setDefaultFlag =
+            flags.length &&
+            (!state.activeFlag ||
+                !flags.some((flag) => flag.name === state.activeFlag?.name));
+        const setDefaultProject =
+            projects.length &&
+            (!state.activeProject ||
+                !projects.some(
+                    (project) => project.id === state.activeProject,
+                ));
+
+        if (setDefaultFlag || setDefaultProject) {
+            setState({
+                activeFlag: setDefaultFlag ? flags[0] : state.activeFlag,
+                activeProject: setDefaultProject
+                    ? projects[0].id
+                    : state.activeProject,
+            });
         }
-    }, [JSON.stringify(projects)]);
+    });
 
-    return [activeProject, setActiveProject] as const;
-};
+    const { activeFlag, activeProject } = state;
+
+    const setActiveFlag = (flag: PersonalDashboardSchemaFlagsItem) => {
+        setState({
+            ...state,
+            activeFlag: flag,
+        });
+    };
 
+    const setActiveProject = (projectId: string) => {
+        setState({
+            ...state,
+            activeProject: projectId,
+        });
+    };
+
+    return {
+        activeFlag,
+        setActiveFlag,
+        activeProject,
+        setActiveProject,
+    };
+};
 export const PersonalDashboard = () => {
     const { user } = useAuthUser();
 
@@ -110,22 +176,16 @@ export const PersonalDashboard = () => {
         refetch: refetchDashboard,
         loading: personalDashboardLoading,
     } = usePersonalDashboard();
-    const [activeFlag, setActiveFlag] = useState<
-        PersonalDashboardSchema['flags'][0] | null
-    >(null);
-    useEffect(() => {
-        if (personalDashboard?.flags.length) {
-            setActiveFlag(personalDashboard.flags[0]);
-        }
-    }, [JSON.stringify(personalDashboard?.flags)]);
+
+    const projects = personalDashboard?.projects || [];
+
+    const { activeProject, setActiveProject, activeFlag, setActiveFlag } =
+        useDashboardState(projects, personalDashboard?.flags ?? []);
 
     const [welcomeDialog, setWelcomeDialog] = useLocalStorageState<
         'open' | 'closed'
     >('welcome-dialog:v1', 'open');
 
-    const projects = personalDashboard?.projects || [];
-    const [activeProject, setActiveProject] = useActiveProject(projects);
-
     const {
         personalDashboardProjectDetails,
         loading: loadingDetails,
@@ -181,7 +241,7 @@ export const PersonalDashboard = () => {
                     admins={personalDashboard?.admins ?? []}
                     ref={projectStageRef}
                     projects={projects}
-                    activeProject={activeProject}
+                    activeProject={activeProject || ''}
                     setActiveProject={setActiveProject}
                     personalDashboardProjectDetails={
                         personalDashboardProjectDetails