feat: home screen and navigation design

web/visual/states.ts

@@ -9,6 +9,7 @@ export interface ApiMock {
 
 export interface VisualState {
 	path: string
+	now?: string
 	api?: Record<string, ApiMock>
 	steps?: (page: Page) => Promise<void>
 }
@@ -80,7 +81,105 @@ async function confirmCancelDialog(page: Page) {
 		.click()
 }
 
+const boardNow = '2026-09-10T09:00:00Z'
+
+const sixArticlesFixture = [
+	{
+		id: 1,
+		title: 'How we price a bathroom renovation',
+		body: '',
+		images: [],
+		is_online: true,
+		created_at: '2026-03-12T09:00:00Z',
+		updated_at: '2026-09-10T07:00:00Z',
+	},
+	{
+		id: 2,
+		title: 'Choosing lime plaster for old stone walls',
+		body: '',
+		images: [],
+		is_online: false,
+		created_at: '2026-09-09T08:00:00Z',
+		updated_at: '2026-09-09T09:00:00Z',
+	},
+	{
+		id: 3,
+		title: 'Before and after: the Rue Verte kitchen',
+		body: '',
+		images: [],
+		is_online: true,
+		created_at: '2026-08-28T09:00:00Z',
+		updated_at: '2026-09-07T09:00:00Z',
+	},
+	{
+		id: 4,
+		title: 'Winter checklist for timber windows',
+		body: '',
+		images: [],
+		is_online: false,
+		created_at: '2026-09-02T09:00:00Z',
+		updated_at: '2026-09-05T09:00:00Z',
+	},
+	{
+		id: 5,
+		title: 'Why we reuse original floorboards',
+		body: '',
+		images: [],
+		is_online: true,
+		created_at: '2026-06-14T09:00:00Z',
+		updated_at: '2026-08-18T09:00:00Z',
+	},
+	{
+		id: 6,
+		title: 'Our first passive-house retrofit',
+		body: '',
+		images: [],
+		is_online: true,
+		created_at: '2026-04-03T09:00:00Z',
+		updated_at: '2026-07-02T09:00:00Z',
+	},
+]
+
+const verifiedSession: ApiMock = {
+	status: 200,
+	body: { is_verified: true, username: 'marta' },
+}
+
 export const visualStates: Record<string, Record<string, VisualState>> = {
+	home: {
+		Default: {
+			path: '/home',
+			now: boardNow,
+			api: {
+				'GET /v1/auth/me': verifiedSession,
+				'GET /v1/article/': { status: 200, body: sixArticlesFixture },
+			},
+		},
+		Loading: {
+			path: '/home',
+			now: boardNow,
+			api: {
+				'GET /v1/auth/me': verifiedSession,
+				'GET /v1/article/': { status: 200, body: sixArticlesFixture, hang: true },
+			},
+		},
+		'Empty, first run': {
+			path: '/home',
+			now: boardNow,
+			api: {
+				'GET /v1/auth/me': verifiedSession,
+				'GET /v1/article/': { status: 200, body: [] },
+			},
+		},
+		Error: {
+			path: '/home',
+			now: boardNow,
+			api: {
+				'GET /v1/auth/me': verifiedSession,
+				'GET /v1/article/': { status: 500 },
+			},
+		},
+	},
 	'log-in': {
 		Default: { path: '/login', api: { 'GET /v1/auth/registration': registrationClosed } },
 		'Fresh install': { path: '/login', api: { 'GET /v1/auth/registration': registrationOpen } },