feat: settings page, sidebar and drawer destination "Settings" (icon settings, after Integration), route /settings (verified), showing only the running build's Version

web/src/components/__tests__/DashboardShell.spec.ts

@@ -58,14 +58,14 @@ afterEach(async () => {
 	document.body.innerHTML = ''
 })
 
-describe('DashboardShell renders the four navigation destinations', () => {
-	it('lists Home, Articles, Users and Integration in order, with only Articles carrying aria-current', async () => {
+describe('DashboardShell renders the five navigation destinations', () => {
+	it('lists Home, Articles, Users, Integration and Settings in order, with only Articles carrying aria-current', async () => {
 		const wrapper = await mountShell('/article')
 
 		const hrefs = wrapper
 			.findAll('nav[aria-label="Main"] a')
 			.map((link) => link.attributes('href'))
-		expect(hrefs).toEqual(['/home', '/article', '/users', '/integration'])
+		expect(hrefs).toEqual(['/home', '/article', '/users', '/integration', '/settings'])
 
 		const home = wrapper.find('a[href="/home"]')
 		const articles = wrapper.find('a[href="/article"]')
@@ -78,6 +78,27 @@ describe('DashboardShell renders the four navigation destinations', () => {
 		expect(integration.attributes('aria-current')).toBeUndefined()
 	})
 
+	it('lists the same five destinations in the mobile drawer and Settings current', async () => {
+		await mountShell('/settings', { width: MOBILE_WIDTH })
+
+		const toggle = document.body.querySelector('[data-slot="toggle"]') as HTMLButtonElement
+		toggle.click()
+		await flushPromises()
+
+		const links = Array.from(
+			document.body.querySelectorAll('[role="dialog"] nav[aria-label="Main"] a'),
+		)
+		expect(links.map((link) => link.getAttribute('href'))).toEqual([
+			'/home',
+			'/article',
+			'/users',
+			'/integration',
+			'/settings',
+		])
+		expect(links[4].querySelector('[class*="lucide"], svg')).not.toBeNull()
+		expect(links[4].getAttribute('aria-current')).toBe('page')
+	})
+
 	it('marks Users with aria-current on /users', async () => {
 		const wrapper = await mountShell('/users')
 
@@ -211,11 +232,11 @@ describe('The account chip shows the display name and no item is current on /pro
 		expect(trigger?.getAttribute('aria-label')).toBe('Marta Alves — account menu')
 	})
 
-	it('marks none of the four navigation items current on /profile', async () => {
+	it('marks none of the five navigation items current on /profile', async () => {
 		const wrapper = await mountShell('/profile')
 
 		const links = wrapper.findAll('nav[aria-label="Main"] a')
-		expect(links).toHaveLength(4)
+		expect(links).toHaveLength(5)
 		links.forEach((link) => expect(link.attributes('aria-current')).toBeUndefined())
 	})
 })