feat(user): add option to hide last viewed projects on overview page (#2429)

frontend/src/i18n/lang/en.json

@@ -139,6 +139,7 @@
         "timezone": "Time zone",
         "overdueTasksRemindersTime": "Overdue tasks reminder email time",
         "filterUsedOnOverview": "Saved filter used on the overview page",
+        "showLastViewed": "Show last viewed projects on the overview page",
         "minimumPriority": "Minimum visible task priority",
         "dateDisplay": "Date display format",
         "dateDisplayOptions": {

frontend/src/modelTypes/IUserSettings.ts

@@ -22,6 +22,7 @@ export interface IFrontendSettings {
 	defaultTaskRelationType: IRelationKind
 	backgroundBrightness: number | null
 	alwaysShowBucketTaskCount: boolean
+	showLastViewed: boolean
 	sidebarWidth: number | null
 	commentSortOrder: 'asc' | 'desc'
 	desktopQuickEntryShortcut: string

frontend/src/models/userSettings.ts

@@ -33,6 +33,7 @@ export default class UserSettingsModel extends AbstractModel<IUserSettings> impl
 		defaultTaskRelationType: RELATION_KIND.RELATED,
 		backgroundBrightness: null,
 		alwaysShowBucketTaskCount: false,
+		showLastViewed: true,
 		sidebarWidth: null,
 		commentSortOrder: 'asc',
 		desktopQuickEntryShortcut: 'CmdOrCtrl+Shift+A',

frontend/src/stores/auth.ts

@@ -140,6 +140,7 @@ export const useAuthStore = defineStore('auth', () => {
 				timeFormat: TIME_FORMAT.HOURS_24,
 				defaultTaskRelationType: RELATION_KIND.RELATED,
 				backgroundBrightness: 100,
+				showLastViewed: true,
 				sidebarWidth: null,
 				commentSortOrder: 'asc',
 				desktopQuickEntryShortcut: 'CmdOrCtrl+Shift+A',

frontend/src/views/Home.vue

@@ -25,7 +25,7 @@
 		/>
 		<ImportHint v-if="tasksLoaded" />
 		<div
-			v-if="projectHistory.length > 0"
+			v-if="authStore.settings.frontendSettings.showLastViewed !== false && projectHistory.length > 0"
 			class="is-max-width-desktop has-text-start mbs-4"
 		>
 			<h3>{{ $t('home.lastViewed') }}</h3>

frontend/src/views/user/settings/General.vue

@@ -105,6 +105,15 @@
 					/>
 				</label>
 			</div>
+			<div class="field">
+				<label class="checkbox">
+					<input
+						v-model="settings.frontendSettings.showLastViewed"
+						type="checkbox"
+					>
+					{{ $t('user.settings.general.showLastViewed') }}
+				</label>
+			</div>
 			<div class="field">
 				<label class="checkbox">
 					<input

frontend/tests/e2e/project/project-history.spec.ts

@@ -1,6 +1,25 @@
 import {test, expect} from '../../support/fixtures'
 import {ProjectFactory} from '../../factories/project'
 import {ProjectViewFactory} from '../../factories/project_view'
+import {updateUserSettings} from '../../support/updateUserSettings'
+import type {Page} from '@playwright/test'
+
+async function visitProjectsToBuildHistory(page: Page, projects: any[]) {
+	for (const project of projects) {
+		const loadProjectPromise = page.waitForResponse(response =>
+			response.url().includes(`/projects/${project.id}`) && response.request().method() === 'GET',
+		)
+		await page.goto(`/projects/${project.id}/${project.id}`)
+		await loadProjectPromise
+		await page.waitForFunction(
+			(projectId) => {
+				const history = JSON.parse(localStorage.getItem('projectHistory') || '[]')
+				return history.some((h: any) => h.id === projectId)
+			},
+			project.id,
+		)
+	}
+}
 
 test.describe('Project History', () => {
 	test('should show a project history on the home page', async ({authenticatedPage: page}) => {
@@ -45,4 +64,80 @@ test.describe('Project History', () => {
 		await expect(page.locator('.project-grid')).toContainText(projects[5].title)
 		await expect(page.locator('.project-grid')).toContainText(projects[6].title)
 	})
+
+	test('should hide the last viewed section when showLastViewed setting is disabled', async ({authenticatedPage: page, apiContext}) => {
+		test.setTimeout(60000)
+		const projects = await ProjectFactory.create(3)
+		await ProjectViewFactory.truncate()
+		for (const p of projects) {
+			await ProjectViewFactory.create(1, {
+				id: p.id,
+				project_id: p.id,
+			}, false)
+		}
+
+		// Visit projects to build up history
+		await visitProjectsToBuildHistory(page, projects)
+
+		// Go to overview and verify section is visible
+		await page.goto('/')
+		await expect(page.locator('body')).toContainText('Last viewed')
+
+		// Disable the setting via API
+		const token = await page.evaluate(() => localStorage.getItem('token'))
+		await updateUserSettings(apiContext, token!, {
+			frontendSettings: {
+				showLastViewed: false,
+			},
+		})
+
+		// Reload and verify section is hidden
+		await page.reload()
+		await page.waitForLoadState('networkidle')
+		await expect(page.locator('body')).not.toContainText('Last viewed')
+	})
+
+	test('should show the last viewed section again when re-enabling showLastViewed', async ({authenticatedPage: page, apiContext}) => {
+		test.setTimeout(60000)
+		const projects = await ProjectFactory.create(2)
+		await ProjectViewFactory.truncate()
+		for (const p of projects) {
+			await ProjectViewFactory.create(1, {
+				id: p.id,
+				project_id: p.id,
+			}, false)
+		}
+
+		// Navigate to app first so localStorage is accessible
+		await page.goto('/')
+		await page.waitForLoadState('networkidle')
+
+		// Disable the setting first
+		const token = await page.evaluate(() => localStorage.getItem('token'))
+		await updateUserSettings(apiContext, token!, {
+			frontendSettings: {
+				showLastViewed: false,
+			},
+		})
+
+		// Visit projects to build up history
+		await visitProjectsToBuildHistory(page, projects)
+
+		// Verify section is hidden
+		await page.goto('/')
+		await page.waitForLoadState('networkidle')
+		await expect(page.locator('body')).not.toContainText('Last viewed')
+
+		// Re-enable the setting
+		await updateUserSettings(apiContext, token!, {
+			frontendSettings: {
+				showLastViewed: true,
+			},
+		})
+
+		// Reload and verify section is visible again
+		await page.reload()
+		await page.waitForLoadState('networkidle')
+		await expect(page.locator('body')).toContainText('Last viewed')
+	})
 })