[Bug]-[Web] Fix missing persistence of selected view mode (Cards, Table, Blocks) on Home page (#4116)

* update constants

* persist thee last view mode in local storage

* get & apply the last selected team memebers view mode from the local storage

* improve variable naming

* Add ai bit suggestions

* Add ai bit suggestions

Author: CREDO23

apps/web/app/[locale]/page-component.tsx

@@ -6,7 +6,7 @@ import { clsxm } from '@/core/lib/utils';
 import { withAuthentication } from '@/core/components/layouts/app/authenticator';
 import { Container } from '@/core/components';
 import { MainLayout } from '@/core/components/layouts/default-layout';
-import { IssuesView } from '@/core/constants/config/constants';
+import { IssuesView, LAST_SELECTED_TEAM_MEMBERS_VIEW_MODE } from '@/core/constants/config/constants';
 import { useTranslations } from 'next-intl';
 
 import { Analytics } from '@vercel/analytics/react';
@@ -73,6 +73,14 @@ function MainPage() {
 		if (view == IssuesView.KANBAN && path == '/') {
 			setView(IssuesView.CARDS);
 		}
+		const lastTeamMembersViewMode = localStorage?.getItem(LAST_SELECTED_TEAM_MEMBERS_VIEW_MODE);
+		if (lastTeamMembersViewMode && path == '/') {
+			if (Object.values(IssuesView).includes(lastTeamMembersViewMode as IssuesView) &&
+				lastTeamMembersViewMode != IssuesView.KANBAN
+			) {
+				setView(lastTeamMembersViewMode as IssuesView);
+			}
+		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [path, setView]);
 

apps/web/core/components/common/header-tabs.tsx

@@ -2,7 +2,7 @@ import { clsxm } from '@/core/lib/utils';
 import LinkWrapper from './link-wrapper';
 import { QueueListIcon, Squares2X2Icon, TableCellsIcon } from '@heroicons/react/20/solid';
 import KanbanIcon from '@/core/components/svgs/kanban';
-import { IssuesView } from '@/core/constants/config/constants';
+import { IssuesView, LAST_SELECTED_TEAM_MEMBERS_VIEW_MODE } from '@/core/constants/config/constants';
 import { useAtom } from 'jotai';
 import { headerTabs } from '@/core/stores/common/header-tabs';
 import { DottedLanguageObjectStringPaths, useTranslations } from 'next-intl';
@@ -19,6 +19,10 @@ const HeaderTabs = ({ linkAll, kanban = false }: { linkAll: boolean; kanban?: bo
 	const links = linkAll ? ['/', '/', '/', '/kanban'] : [undefined, undefined, undefined, '/kanban'];
 	const [view, setView] = useAtom(headerTabs);
 	const activeView = kanban ? IssuesView.KANBAN : view;
+
+	const setLastTeamMembersViewMode = (viewMode: IssuesView) => {
+		localStorage?.setItem(LAST_SELECTED_TEAM_MEMBERS_VIEW_MODE, viewMode);
+	};
 	return (
 		<>
 			{options.map(({ label, icon: Icon, view: optionView }, index) => (
@@ -38,6 +42,7 @@ const HeaderTabs = ({ linkAll, kanban = false }: { linkAll: boolean; kanban?: bo
 							onClick={() => {
 								if (links[index] !== '/kanban') {
 									setView(optionView);
+									setLastTeamMembersViewMode(optionView);
 								}
 							}}
 						>

apps/web/core/constants/config/constants.tsx

@@ -453,6 +453,7 @@ export const HAS_VISITED_OUTSTANDING_TASKS = 'has-visited-outstanding-tasks';
 export const HAS_SEEN_DAILY_PLAN_SUGGESTION_MODAL = 'has-seen-daily-plan-suggestion-modal';
 export const LAST_SELECTED_PROJECTS_VIEW = 'last-selected-projects-view';
 export const PROJECTS_TABLE_VIEW_LAST_SORTING = 'projects-table-view-last-sorting';
+export const LAST_SELECTED_TEAM_MEMBERS_VIEW_MODE = 'last-selected-team-members-view-mode';
 
 // OAuth provider's keys