feat: home screen and navigation design

web/bun.lock

@@ -7,6 +7,7 @@
       "dependencies": {
         "@nuxt/ui": "^4.11.2",
         "@tailwindcss/vite": "^4.1.18",
+        "@vueuse/core": "14.4.0",
         "pinia": "^3.0.4",
         "tailwindcss": "^4.1.18",
         "vue": "^3.5.25",

web/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@nuxt/ui": "^4.11.2",
     "@tailwindcss/vite": "^4.1.18",
+    "@vueuse/core": "14.4.0",
     "pinia": "^3.0.4",
     "tailwindcss": "^4.1.18",
     "vue": "^3.5.25",

web/src/components/ArticleStatusBadge.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+withDefaults(
+	defineProps<{
+		online: boolean
+		size?: 'sm' | 'md'
+	}>(),
+	{
+		size: 'md',
+	},
+)
+</script>
+
+<template>
+	<UBadge v-if="online" color="neutral" variant="solid" icon="i-lucide-globe" :size="size">
+		Online
+	</UBadge>
+	<UBadge
+		v-else
+		color="neutral"
+		variant="outline"
+		icon="i-lucide-pencil-line"
+		:size="size"
+		class="px-2"
+	>
+		Draft
+	</UBadge>
+</template>

web/src/components/DashboardShell.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useSessionStore } from '@/stores/session'
+import { useApi } from '@/composables/useApi'
 import AppBoot from '@/components/AppBoot.vue'
+import AppLogo from '@/components/AppLogo.vue'
 import ErrorView from '@/components/ErrorView.vue'
 import OfflineBanner from '@/components/OfflineBanner.vue'
+import UserMenu from '@/components/UserMenu.vue'
 
 const route = useRoute()
+const router = useRouter()
 const session = useSessionStore()
+const api = useApi()
 
 const navItems = [
 	{ label: 'Home', to: '/home', icon: 'i-lucide-home' },
@@ -16,39 +21,111 @@ const navItems = [
 ]
 
 const pageTitle = computed(() => (route.meta.title as string) ?? '')
+const sidebarCollapsed = ref(false)
+const loggingOut = ref(false)
 
 function onRetry() {
 	session.retry()
 }
+
+async function onLogout() {
+	loggingOut.value = true
+	try {
+		await api.request('/v1/auth/logout', { method: 'POST' })
+	} finally {
+		loggingOut.value = false
+	}
+	session.clear()
+	await router.push('/login')
+}
 </script>
 
 <template>
 	<UDashboardGroup unit="rem">
 		<a href="#dashboard-content" class="sr-only focus:not-sr-only">Skip to content</a>
 
-		<UDashboardSidebar collapsible :resizable="false" :default-size="16" :collapsed-size="4">
+		<UDashboardSidebar
+			v-model:collapsed="sidebarCollapsed"
+			collapsible
+			:resizable="false"
+			:default-size="14"
+			:collapsed-size="3.5"
+			:ui="{
+				root: 'min-w-14 p-3',
+				header: 'mb-3 h-10 gap-2.5 px-1.5',
+				body: 'gap-0.5 p-0',
+				footer: 'p-0',
+			}"
+		>
 			<template #header>
-				<span class="font-semibold">RenewCMS</span>
+				<AppLogo :size="26" />
+				<span
+					v-if="!sidebarCollapsed"
+					aria-hidden="true"
+					class="text-base font-semibold text-highlighted"
+					>RenewCMS</span
+				>
 			</template>
 
-			<UNavigationMenu orientation="vertical" :items="navItems" aria-label="Main" />
+			<UNavigationMenu
+				orientation="vertical"
+				:items="navItems"
+				:collapsed="sidebarCollapsed"
+				aria-label="Main"
+				:ui="{
+					list: 'flex flex-col gap-0.5',
+					link: 'h-8 gap-2.5 px-2.5 py-0 text-sm',
+					linkLeadingIcon: 'size-4',
+				}"
+			/>
 
 			<template #footer>
-				<span>Log out</span>
+				<UserMenu
+					:username="session.session?.username ?? ''"
+					:collapsed="sidebarCollapsed"
+					@logout="onLogout"
+				/>
 			</template>
 		</UDashboardSidebar>
 
-		<UDashboardPanel>
+		<UDashboardPanel
+			:ui="{ body: 'gap-0 px-4 pt-5 pb-22 sm:gap-0 sm:px-4 sm:pt-5 sm:pb-22 lg:p-8' }"
+		>
 			<template #header>
-				<UDashboardNavbar :title="pageTitle">
+				<UDashboardNavbar
+					:toggle="{ ui: { leadingIcon: 'size-5' } }"
+					:title="pageTitle"
+					:ui="{
+						root: 'h-14 gap-1 bg-default px-1.5 sm:px-1.5 lg:h-12 lg:gap-2 lg:px-6',
+						left: 'min-w-0 flex-1 gap-1 lg:gap-2',
+						title: 'text-lg lg:sr-only',
+						toggle: 'size-11 justify-center',
+					}"
+				>
 					<template #leading>
-						<UDashboardSidebarCollapse />
+						<UDashboardSidebarCollapse
+							color="neutral"
+							variant="ghost"
+							size="sm"
+							class="-mx-1.5 text-muted"
+							:aria-expanded="!sidebarCollapsed"
+							data-testid="sidebar-collapse"
+						/>
+						<span
+							aria-hidden="true"
+							class="mx-1.5 hidden h-4 w-px bg-(--ui-border) lg:block"
+						/>
+						<UBreadcrumb
+							:items="[{ label: pageTitle }]"
+							color="neutral"
+							class="hidden lg:block"
+							:ui="{ link: 'text-sm font-medium' }"
+						/>
 					</template>
 					<template #right>
 						<slot name="navbar-right" />
 					</template>
 				</UDashboardNavbar>
-				<UBreadcrumb :items="[{ label: pageTitle }]" />
 			</template>
 
 			<template #body>
@@ -62,7 +139,6 @@ function onRetry() {
 						@retry="onRetry"
 					/>
 					<div v-else>
-						<h1>{{ pageTitle }}</h1>
 						<slot />
 					</div>
 				</div>

web/src/components/NewArticleModal.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const open = defineModel<boolean>('open', { default: false })
+
+const title = ref('')
+const body = ref('')
+
+function onCancel() {
+	open.value = false
+}
+</script>
+
+<template>
+	<UModal v-model:open="open" title="New article">
+		<template #body>
+			<UForm :state="{ title, body }" class="space-y-4">
+				<UFormField label="Title" name="title">
+					<UInput v-model="title" placeholder="Article title" class="w-full" />
+				</UFormField>
+				<UFormField label="Body" name="body">
+					<UTextarea v-model="body" placeholder="Start writing…" class="w-full" />
+				</UFormField>
+			</UForm>
+		</template>
+		<template #footer>
+			<div class="flex w-full justify-end gap-2">
+				<UButton color="neutral" variant="outline" @click="onCancel">Cancel</UButton>
+				<UButton disabled>Create article</UButton>
+			</div>
+		</template>
+	</UModal>
+</template>

web/src/components/UserMenu.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useColorMode, type ColorModePreference } from '@/composables/useColorMode'
+
+const props = defineProps<{
+	username: string
+	collapsed: boolean
+}>()
+
+const emit = defineEmits<{
+	logout: []
+}>()
+
+const colorMode = useColorMode()
+
+const initials = computed(() => {
+	const parts = props.username.split(/[^a-zA-Z0-9]+/).filter(Boolean)
+	if (parts.length >= 2) {
+		return ((parts[0] ?? '').charAt(0) + (parts[1] ?? '').charAt(0)).toUpperCase()
+	}
+	return (parts[0] ?? '').slice(0, 2).toUpperCase()
+})
+
+const triggerAriaLabel = computed(() =>
+	props.collapsed ? `${props.username} — account menu` : undefined,
+)
+
+const colorModeOptions: { label: string; value: ColorModePreference }[] = [
+	{ label: 'System', value: 'system' },
+	{ label: 'Light', value: 'light' },
+	{ label: 'Dark', value: 'dark' },
+]
+
+const items = computed(() => [
+	[{ type: 'label' as const, label: props.username }],
+	colorModeOptions.map((option) => ({
+		type: 'checkbox' as const,
+		label: option.label,
+		checked: colorMode.preference === option.value,
+		onUpdateChecked: (checked: boolean) => {
+			if (checked) {
+				colorMode.preference = option.value
+			}
+		},
+	})),
+	[
+		{
+			label: 'Log out',
+			onSelect: () => emit('logout'),
+		},
+	],
+])
+</script>
+
+<template>
+	<UDropdownMenu :items="items" :content="{ side: 'top', align: 'start' }">
+		<UButton
+			color="neutral"
+			variant="ghost"
+			block
+			class="h-10 justify-start gap-2.5 px-1.5 font-normal text-highlighted"
+			trailing-icon="i-lucide-chevrons-up-down"
+			:ui="{ trailingIcon: 'ms-auto size-3.5 text-default' }"
+			:aria-label="triggerAriaLabel"
+		>
+			<template #leading>
+				<UAvatar
+					aria-hidden="true"
+					:text="initials"
+					size="sm"
+					:ui="{
+						root: 'size-6.5 bg-secondary-300',
+						fallback: 'text-[0.6875rem] font-semibold text-primary-900',
+					}"
+				/>
+			</template>
+			<span v-if="!collapsed" class="truncate">{{ username }}</span>
+		</UButton>
+	</UDropdownMenu>
+</template>

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

@@ -14,11 +14,15 @@ vi.mock('@/composables/useApi', async (importOriginal) => {
 	}
 })
 
-async function mountShell(path: string) {
+async function mountShell(path: string, username = 'marta') {
 	setActivePinia(createPinia())
-	vi.mocked(useApi).mockReturnValue({ getMe: vi.fn().mockResolvedValue({ verified: true }) })
+	vi.mocked(useApi).mockReturnValue({
+		getMe: vi.fn().mockResolvedValue({ verified: true, username }),
+		request: vi.fn().mockResolvedValue(undefined),
+	})
 	await router.push(path)
 	const wrapper = mount(DashboardShell, {
+		attachTo: document.body,
 		global: {
 			plugins: [router, uiPlugin],
 		},
@@ -29,6 +33,7 @@ async function mountShell(path: string) {
 
 afterEach(async () => {
 	await router.push('/login')
+	document.body.innerHTML = ''
 })
 
 describe('DashboardShell renders the three navigation destinations', () => {
@@ -66,3 +71,86 @@ describe('DashboardShell shows the offline banner when the browser reports offli
 		onLineSpy.mockRestore()
 	})
 })
+
+describe('The sidebar header renders AppLogo and the "RenewCMS" wordmark', () => {
+	it('renders the logo before the wordmark text, neither as a link', async () => {
+		const wrapper = await mountShell('/home')
+
+		const header = wrapper.find('[data-slot="header"]')
+		expect(header.find('svg[role="img"][aria-label="RenewCMS"]').exists()).toBe(true)
+		expect(header.text()).toContain('RenewCMS')
+		expect(header.find('a').exists()).toBe(false)
+
+		const headerHtml = header.html()
+		expect(headerHtml.indexOf('<svg')).toBeLessThan(headerHtml.indexOf('RenewCMS</span>'))
+	})
+})
+
+describe('The sidebar collapse trigger toggles the rail and exposes aria-expanded', () => {
+	it('flips the rail and aria-expanded on repeated activation', async () => {
+		await mountShell('/home')
+
+		const collapseButton = () =>
+			document.body.querySelector('[data-testid="sidebar-collapse"]') as HTMLButtonElement
+
+		expect(collapseButton().getAttribute('aria-expanded')).toBe('true')
+
+		collapseButton().click()
+		await flushPromises()
+
+		expect(collapseButton().getAttribute('aria-expanded')).toBe('false')
+
+		collapseButton().click()
+		await flushPromises()
+
+		expect(collapseButton().getAttribute('aria-expanded')).toBe('true')
+	})
+})
+
+describe('A successful logout clears the session and navigates to /login', () => {
+	it('calls POST /v1/auth/logout, clears the session and navigates to /login', async () => {
+		await mountShell('/home')
+
+		const logOutItem = () =>
+			Array.from(document.body.querySelectorAll('[role="menuitem"]')).find(
+				(el) => el.textContent?.trim() === 'Log out',
+			) as HTMLElement
+
+		const trigger = document.body.querySelector('button[aria-haspopup]') as HTMLButtonElement
+		trigger.click()
+		await flushPromises()
+
+		logOutItem().click()
+		await flushPromises()
+
+		expect(vi.mocked(useApi)().request).toHaveBeenCalledWith(
+			'/v1/auth/logout',
+			expect.objectContaining({ method: 'POST' }),
+		)
+		expect(router.currentRoute.value.path).toBe('/login')
+	})
+})
+
+describe('Collapsed sidebar hides the wordmark and username text but keeps an accessible name', () => {
+	it('hides visible text but keeps accessible names for the logo and the user menu', async () => {
+		await mountShell('/home')
+
+		const collapseButton = document.body.querySelector(
+			'[data-testid="sidebar-collapse"]',
+		) as HTMLButtonElement
+		collapseButton.click()
+		await flushPromises()
+
+		const header = document.body.querySelector('[data-slot="header"]') as HTMLElement
+		expect(header.querySelector('svg[role="img"][aria-label="RenewCMS"]')).toBeTruthy()
+		expect(header.textContent).not.toContain('RenewCMS')
+		expect(header.querySelector('span[aria-hidden="true"]')).toBeNull()
+
+		const footer = document.body.querySelector('[data-slot="footer"]') as HTMLElement
+		expect(footer.textContent).not.toContain('marta')
+
+		const userMenuTrigger = footer.querySelector('button[aria-haspopup]') as HTMLButtonElement
+		expect(userMenuTrigger.getAttribute('aria-label')).toBe('marta — account menu')
+		expect(footer.querySelector('[data-slot="fallback"]')?.textContent).toBe('MA')
+	})
+})

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

@@ -0,0 +1,155 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import uiPlugin from '@nuxt/ui/vue-plugin'
+import UserMenu from '../UserMenu.vue'
+import { useColorMode } from '@/composables/useColorMode'
+
+function mountMenu(props: { username: string; collapsed: boolean }) {
+	return mount(UserMenu, {
+		attachTo: document.body,
+		props,
+		global: {
+			plugins: [uiPlugin],
+		},
+	})
+}
+
+function findTriggerButton() {
+	return document.body.querySelector('button')
+}
+
+async function openMenu() {
+	findTriggerButton()?.click()
+	await flushPromises()
+}
+
+function findMenuItemsByRole(role: string) {
+	return Array.from(document.body.querySelectorAll(`[role="${role}"]`))
+}
+
+function findCheckboxItem(label: string) {
+	return findMenuItemsByRole('menuitemcheckbox').find((el) => el.textContent?.trim() === label)
+}
+
+beforeEach(() => {
+	localStorage.clear()
+	document.documentElement.classList.remove('dark', 'light')
+})
+
+afterEach(() => {
+	document.body.innerHTML = ''
+})
+
+describe("UserMenu's dropdown lists the account label, color-mode checkboxes, then Log out", () => {
+	it('shows avatar initials MA, the username, and the three ordered groups', async () => {
+		const wrapper = mountMenu({ username: 'marta', collapsed: false })
+
+		const avatar = document.body.querySelector('[data-slot="fallback"]')
+		expect(avatar?.textContent).toBe('MA')
+		expect(avatar?.getAttribute('aria-hidden')).toBe('true')
+		expect(wrapper.text()).toContain('marta')
+
+		await openMenu()
+
+		const groups = findMenuItemsByRole('group')
+		expect(groups.length).toBe(3)
+
+		expect(groups[0].textContent).toContain('marta')
+
+		const checkboxLabels = findMenuItemsByRole('menuitemcheckbox').map((el) =>
+			el.textContent?.trim(),
+		)
+		expect(checkboxLabels).toEqual(['System', 'Light', 'Dark'])
+
+		expect(groups[2].textContent?.trim()).toBe('Log out')
+
+		wrapper.unmount()
+	})
+
+	it('derives initials from the first letter of the first two words for a multi-word username', () => {
+		const wrapper = mountMenu({ username: 'jane doe', collapsed: false })
+
+		const avatar = document.body.querySelector('[data-slot="fallback"]')
+		expect(avatar?.textContent).toBe('JD')
+
+		wrapper.unmount()
+	})
+
+	it('checks exactly the item matching the current color-mode preference', async () => {
+		const colorMode = useColorMode()
+		colorMode.preference = 'dark'
+
+		const wrapper = mountMenu({ username: 'marta', collapsed: false })
+		await openMenu()
+
+		expect(findCheckboxItem('Dark')?.getAttribute('aria-checked')).toBe('true')
+		expect(findCheckboxItem('Light')?.getAttribute('aria-checked')).toBe('false')
+		expect(findCheckboxItem('System')?.getAttribute('aria-checked')).toBe('false')
+
+		wrapper.unmount()
+	})
+})
+
+describe('Selecting a color-mode item updates the preference and its checked state', () => {
+	it.each([
+		['system', 'light'],
+		['light', 'dark'],
+		['dark', 'system'],
+	])('moves from %s to %s', async (from, to) => {
+		const colorMode = useColorMode()
+		colorMode.preference = from as 'system' | 'light' | 'dark'
+
+		const wrapper = mountMenu({ username: 'marta', collapsed: false })
+		await openMenu()
+
+		const label = to.charAt(0).toUpperCase() + to.slice(1)
+		const fromLabel = from.charAt(0).toUpperCase() + from.slice(1)
+
+		findCheckboxItem(label)?.dispatchEvent(new MouseEvent('pointerup', { bubbles: true }))
+		findCheckboxItem(label)?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+		await flushPromises()
+
+		expect(colorMode.preference).toBe(to)
+
+		await openMenu()
+		expect(findCheckboxItem(label)?.getAttribute('aria-checked')).toBe('true')
+		expect(findCheckboxItem(fromLabel)?.getAttribute('aria-checked')).toBe('false')
+
+		wrapper.unmount()
+	})
+})
+
+describe('A successful logout clears the session and navigates to /login', () => {
+	it('emits logout when the user activates Log out', async () => {
+		const wrapper = mountMenu({ username: 'marta', collapsed: false })
+		await openMenu()
+
+		const logOutItem = Array.from(document.body.querySelectorAll('[role="menuitem"]')).find(
+			(el) => el.textContent?.trim() === 'Log out',
+		)
+		;(logOutItem as HTMLElement)?.click()
+		await flushPromises()
+
+		expect(wrapper.emitted('logout')).toBeTruthy()
+
+		wrapper.unmount()
+	})
+})
+
+describe('Collapsed sidebar hides the wordmark and username text but keeps an accessible name', () => {
+	it('hides the visible username but keeps it in the accessible name, and opens the same dropdown', async () => {
+		const wrapper = mountMenu({ username: 'marta', collapsed: true })
+
+		expect(wrapper.text()).not.toContain('marta')
+		expect(findTriggerButton()?.getAttribute('aria-label')).toBe('marta — account menu')
+		expect(document.body.querySelector('[data-slot="fallback"]')?.textContent).toBe('MA')
+
+		await openMenu()
+
+		const groups = findMenuItemsByRole('group')
+		expect(groups.length).toBe(3)
+		expect(groups[0].textContent).toContain('marta')
+
+		wrapper.unmount()
+	})
+})

web/src/composables/useApi.ts

@@ -21,6 +21,7 @@ export class NetworkError extends Error {
 
 export interface MeResult {
 	verified: boolean
+	username?: string
 }
 
 export type OnUnauthorized = 'redirect' | 'passthrough'
@@ -99,10 +100,10 @@ export function useApi() {
 	}
 
 	async function getMe(): Promise<MeResult> {
-		const body = await request<{ is_verified: boolean }>('/v1/auth/me', {
+		const body = await request<{ is_verified: boolean; username?: string }>('/v1/auth/me', {
 			onUnauthorized: 'passthrough',
 		})
-		return { verified: Boolean(body.is_verified) }
+		return { verified: Boolean(body.is_verified), username: body.username }
 	}
 
 	return { getMe, request }

web/src/composables/useArticles.ts

@@ -0,0 +1,26 @@
+import { useApi } from '@/composables/useApi'
+
+export interface ArticleImage {
+	id: number
+	url: string
+}
+
+export interface Article {
+	id: number
+	title: string
+	body: string
+	images: ArticleImage[]
+	is_online: boolean
+	created_at: string
+	updated_at: string
+}
+
+export function useArticles() {
+	const { request } = useApi()
+
+	function listArticles(): Promise<Article[]> {
+		return request<Article[]>('/v1/article/')
+	}
+
+	return { listArticles }
+}

web/src/composables/useColorMode.ts

@@ -0,0 +1,19 @@
+import { useColorMode as useVueUseColorMode } from '@vueuse/core'
+
+export type ColorModePreference = 'system' | 'light' | 'dark'
+
+export function useColorMode() {
+	const { store, system } = useVueUseColorMode()
+
+	return {
+		get preference(): ColorModePreference {
+			return store.value === 'auto' ? 'system' : (store.value as ColorModePreference)
+		},
+		set preference(value: ColorModePreference) {
+			store.value = value === 'system' ? 'auto' : value
+		},
+		get value() {
+			return store.value === 'auto' ? system.value : store.value
+		},
+	}
+}

web/src/lib/__tests__/relativeDate.spec.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { formatRelativeDate } from '../relativeDate'
+
+const now = new Date('2026-08-25T12:00:00Z')
+
+describe('formatRelativeDate', () => {
+	it('formats under an hour in minutes', () => {
+		expect(formatRelativeDate('2026-08-25T11:45:00Z', now)).toBe('15 minutes ago')
+	})
+
+	it('clamps a sub-minute difference to "1 minute ago"', () => {
+		expect(formatRelativeDate('2026-08-25T11:59:45Z', now)).toBe('1 minute ago')
+	})
+
+	it('uses the singular for exactly one minute ago', () => {
+		expect(formatRelativeDate('2026-08-25T11:59:00Z', now)).toBe('1 minute ago')
+	})
+
+	it('formats under a day in hours', () => {
+		expect(formatRelativeDate('2026-08-25T10:00:00Z', now)).toBe('2 hours ago')
+	})
+
+	it('uses the singular for exactly one hour ago', () => {
+		expect(formatRelativeDate('2026-08-25T11:00:00Z', now)).toBe('1 hour ago')
+	})
+
+	it('formats exactly one day back as Yesterday', () => {
+		expect(formatRelativeDate('2026-08-24T11:00:00Z', now)).toBe('Yesterday')
+	})
+
+	it('formats within the week in days', () => {
+		expect(formatRelativeDate('2026-08-22T12:00:00Z', now)).toBe('3 days ago')
+	})
+
+	it('formats exactly 7 days ago as an absolute date, not "7 days ago"', () => {
+		expect(formatRelativeDate('2026-08-18T12:00:00Z', now)).toBe('18 Aug 2026')
+	})
+
+	it('formats a week or more ago as an absolute date', () => {
+		expect(formatRelativeDate('2026-08-10T12:00:00Z', now)).toBe('10 Aug 2026')
+	})
+})

web/src/lib/relativeDate.ts

@@ -0,0 +1,45 @@
+const MINUTE_MS = 60 * 1000
+const HOUR_MS = 60 * MINUTE_MS
+const DAY_MS = 24 * HOUR_MS
+const RELATIVE_CUTOFF_DAYS = 7
+
+const MONTH_NAMES = [
+	'Jan',
+	'Feb',
+	'Mar',
+	'Apr',
+	'May',
+	'Jun',
+	'Jul',
+	'Aug',
+	'Sep',
+	'Oct',
+	'Nov',
+	'Dec',
+]
+
+function formatAbsoluteDate(date: Date) {
+	return `${date.getDate()} ${MONTH_NAMES[date.getMonth()]} ${date.getFullYear()}`
+}
+
+export function formatRelativeDate(iso: string, now: Date = new Date()) {
+	const date = new Date(iso)
+	const diffMs = now.getTime() - date.getTime()
+
+	if (diffMs < HOUR_MS) {
+		const minutes = Math.max(1, Math.floor(diffMs / MINUTE_MS))
+		return minutes === 1 ? '1 minute ago' : `${minutes} minutes ago`
+	}
+	if (diffMs < DAY_MS) {
+		const hours = Math.floor(diffMs / HOUR_MS)
+		return hours === 1 ? '1 hour ago' : `${hours} hours ago`
+	}
+	const days = Math.floor(diffMs / DAY_MS)
+	if (days === 1) {
+		return 'Yesterday'
+	}
+	if (days < RELATIVE_CUTOFF_DAYS) {
+		return `${days} days ago`
+	}
+	return formatAbsoluteDate(date)
+}

web/src/router/__tests__/routerGuard.spec.ts

@@ -75,13 +75,13 @@ describe('Nuxt UI shell foundation and router guards', () => {
 		await flushPromises()
 
 		expect(app.find('[aria-label="Loading"]').exists()).toBe(true)
-		expect(app.text()).not.toContain('Home placeholder')
+		expect(app.text()).not.toContain('Connect your website')
 
 		resolveMe({ verified: true })
 		await flushPromises()
 
 		expect(app.find('[aria-label="Loading"]').exists()).toBe(false)
-		expect(app.text()).toContain('Home placeholder')
+		expect(app.text()).toContain('Connect your website')
 		expect(router.currentRoute.value.path).toBe('/home')
 	})
 

web/src/stores/session.ts

@@ -6,6 +6,7 @@ export type SessionStatus = 'idle' | 'checking' | 'ready' | 'error'
 
 export interface Session {
 	verified: boolean
+	username?: string
 }
 
 export const useSessionStore = defineStore('session', () => {

web/src/theme/ui.config.ts

@@ -39,6 +39,14 @@ export const renewUi = {
 		slots: {
 			base: 'rounded-none font-medium transition-colors duration-(--duration-fast) ease-(--ease-standard)',
 		},
+		variants: {
+			size: {
+				md: {
+					leadingIcon: 'size-4',
+					trailingIcon: 'size-4',
+				},
+			},
+		},
 		defaultVariants: {
 			size: 'md',
 		},
@@ -98,6 +106,14 @@ export const renewUi = {
 		slots: {
 			base: 'rounded-none font-medium',
 		},
+		variants: {
+			size: {
+				md: {
+					base: 'h-5.5 gap-1 px-1.75 py-0 text-xs',
+					leadingIcon: 'size-3',
+				},
+			},
+		},
 	},
 	kbd: {
 		base: 'rounded-none font-mono',
@@ -181,7 +197,16 @@ export const renewUi = {
 				orientation: 'vertical',
 				active: true,
 				class: {
-					link: 'bg-(--ui-color-secondary-200) text-(--ui-color-primary-900) dark:bg-(--ui-color-secondary-300) before:hidden',
+					link: 'bg-(--ui-color-secondary-200) text-(--ui-color-primary-900) dark:bg-(--ui-color-secondary-300) font-medium before:hidden',
+					linkLeadingIcon: 'text-(--ui-color-primary-900)',
+				},
+			},
+			{
+				orientation: 'vertical',
+				active: false,
+				class: {
+					link: 'text-toned font-normal',
+					linkLeadingIcon: 'text-toned',
 				},
 			},
 		],

web/src/views/HomeView.vue

@@ -1,9 +1,275 @@
 <script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
 import DashboardShell from '@/components/DashboardShell.vue'
+import ArticleStatusBadge from '@/components/ArticleStatusBadge.vue'
+import NewArticleModal from '@/components/NewArticleModal.vue'
+import { useArticles, type Article } from '@/composables/useArticles'
+import { useSessionStore } from '@/stores/session'
+import { formatRelativeDate } from '@/lib/relativeDate'
+
+const SKELETON_DELAY_MS = 150
+const RECENT_LIST_SIZE = 5
+
+type LoadState = 'loading' | 'default' | 'empty' | 'error'
+
+const session = useSessionStore()
+const { listArticles } = useArticles()
+
+const loadState = ref<LoadState>('loading')
+const articles = ref<Article[]>([])
+const showSkeleton = ref(false)
+const newArticleModalOpen = ref(false)
+let skeletonTimer: ReturnType<typeof setTimeout> | null = null
+
+function greetingForHour(hour: number) {
+	if (hour < 12) {
+		return 'Good morning'
+	}
+	if (hour < 18) {
+		return 'Good afternoon'
+	}
+	return 'Good evening'
+}
+
+const greeting = computed(() => {
+	const timeOfDayGreeting = greetingForHour(new Date().getHours())
+	const username = session.session?.username
+	return username ? `${timeOfDayGreeting}, ${username}` : timeOfDayGreeting
+})
+
+const subtitle = computed(() =>
+	loadState.value === 'empty'
+		? 'Welcome to RenewCMS.'
+		: "Here's where things stand on your site.",
+)
+
+const stats = computed(() => {
+	const online = articles.value.filter((article) => article.is_online).length
+	return {
+		total: articles.value.length,
+		online,
+		drafts: articles.value.length - online,
+	}
+})
+
+const statTiles = computed(() => [
+	{ label: 'articles', value: stats.value.total },
+	{ label: 'online', value: stats.value.online },
+	{ label: 'drafts', value: stats.value.drafts },
+])
+
+const recentArticles = computed(() =>
+	[...articles.value]
+		.sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
+		.slice(0, RECENT_LIST_SIZE),
+)
+
+function clearSkeletonTimer() {
+	if (skeletonTimer !== null) {
+		clearTimeout(skeletonTimer)
+		skeletonTimer = null
+	}
+}
+
+async function loadArticles() {
+	loadState.value = 'loading'
+	showSkeleton.value = false
+	clearSkeletonTimer()
+	skeletonTimer = setTimeout(() => {
+		showSkeleton.value = true
+	}, SKELETON_DELAY_MS)
+
+	try {
+		const result = await listArticles()
+		articles.value = result
+		loadState.value = result.length === 0 ? 'empty' : 'default'
+	} catch {
+		loadState.value = 'error'
+	} finally {
+		clearSkeletonTimer()
+		showSkeleton.value = false
+	}
+}
+
+function openNewArticleModal() {
+	newArticleModalOpen.value = true
+}
+
+onMounted(loadArticles)
 </script>
 
 <template>
 	<DashboardShell>
-		<p>Home placeholder.</p>
+		<template #navbar-right>
+			<UButton
+				icon="i-lucide-plus"
+				color="neutral"
+				variant="ghost"
+				class="size-11 justify-center text-highlighted sm:hidden"
+				:ui="{ leadingIcon: 'size-5' }"
+				aria-label="New article"
+				@click="openNewArticleModal"
+			/>
+		</template>
+
+		<div class="flex max-w-244 flex-col gap-5 lg:gap-7">
+			<div class="flex flex-wrap items-end gap-4">
+				<div class="flex min-w-50 flex-1 flex-col gap-1">
+					<h1 data-testid="greeting" class="text-2xl font-semibold text-highlighted">
+						{{ greeting }}
+					</h1>
+					<p class="text-base/5 text-muted">{{ subtitle }}</p>
+				</div>
+				<UButton
+					icon="i-lucide-plus"
+					class="hidden px-3 sm:flex"
+					@click="openNewArticleModal"
+				>
+					New article
+				</UButton>
+			</div>
+
+			<template v-if="(loadState === 'loading' && showSkeleton) || loadState === 'default'">
+				<div class="grid grid-cols-3 gap-3">
+					<div
+						v-for="tile in statTiles"
+						:key="tile.label"
+						data-testid="stat-tile"
+						class="flex flex-col gap-1 border border-default bg-default p-4"
+					>
+						<template v-if="loadState === 'loading'">
+							<USkeleton class="h-7 w-10 rounded-none bg-accented" />
+							<USkeleton class="h-3 w-17.5 rounded-none bg-accented" />
+						</template>
+						<template v-else>
+							<span class="text-2xl font-semibold text-highlighted">{{
+								tile.value
+							}}</span>
+							<span class="text-muted">{{ tile.label }}</span>
+						</template>
+					</div>
+				</div>
+
+				<section class="flex flex-col gap-2.5">
+					<div class="flex items-baseline justify-between">
+						<h2 class="text-lg font-semibold text-highlighted">Recently updated</h2>
+						<RouterLink to="/article" class="text-toned underline underline-offset-3">
+							All articles
+						</RouterLink>
+					</div>
+					<div
+						v-if="loadState === 'loading'"
+						aria-busy="true"
+						class="border border-default bg-default"
+					>
+						<div
+							v-for="n in RECENT_LIST_SIZE"
+							:key="n"
+							class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"
+						>
+							<USkeleton class="h-3 max-w-[60%] flex-1 rounded-none bg-accented" />
+							<USkeleton class="h-5 w-14 rounded-none bg-accented" />
+						</div>
+					</div>
+					<ul v-else data-testid="recent-list" class="border border-default bg-default">
+						<li v-for="article in recentArticles" :key="article.id">
+							<RouterLink
+								:to="`/article/${article.id}/edit`"
+								class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"
+							>
+								<span class="min-w-0 flex-1 truncate font-medium text-highlighted">
+									{{ article.title }}
+								</span>
+								<ArticleStatusBadge :online="article.is_online" />
+								<span class="hidden w-27.5 text-right text-muted lg:inline">
+									{{ formatRelativeDate(article.updated_at) }}
+								</span>
+							</RouterLink>
+						</li>
+					</ul>
+				</section>
+			</template>
+
+			<UEmpty
+				v-else-if="loadState === 'empty'"
+				variant="outline"
+				icon="i-lucide-file-text"
+				title="Write your first article"
+				description="It starts as a draft, so nothing appears on your site until you publish it."
+				:ui="{
+					root: 'gap-3 rounded-none border border-default px-6 py-12 ring-0 sm:px-6 sm:py-12 lg:px-6 lg:py-12',
+					header: 'max-w-none gap-3',
+					avatar: 'mb-0 size-11 rounded-none bg-elevated text-xl text-toned',
+					title: 'text-[1.125rem] font-semibold',
+					description: 'max-w-85 text-base text-wrap text-muted',
+					body: 'max-w-none',
+				}"
+			>
+				<template #actions>
+					<UButton
+						icon="i-lucide-plus"
+						class="h-11 px-4 lg:h-8"
+						@click="openNewArticleModal"
+					>
+						New article
+					</UButton>
+				</template>
+			</UEmpty>
+
+			<UAlert
+				v-else-if="loadState === 'error'"
+				role="alert"
+				color="error"
+				variant="soft"
+				orientation="vertical"
+				:close="false"
+				icon="i-lucide-circle-x"
+				title="Couldn't load your articles"
+				description="Check your connection and try again."
+				:ui="{
+					root: 'gap-2.5 px-3.5 py-3',
+					icon: 'mt-0.5 size-4',
+					title: 'text-sm font-semibold',
+					description: 'mt-0.5 text-sm text-toned opacity-100',
+					actions: 'mt-2',
+				}"
+			>
+				<template #actions>
+					<UButton
+						color="neutral"
+						variant="outline"
+						icon="i-lucide-rotate-cw"
+						class="h-7 bg-default px-2.5 text-xs text-highlighted"
+						:ui="{ leadingIcon: 'size-3.5' }"
+						@click="loadArticles"
+					>
+						Try again
+					</UButton>
+				</template>
+			</UAlert>
+
+			<div class="flex items-start gap-3.5 border border-default bg-default p-4">
+				<div
+					class="flex size-9 shrink-0 items-center justify-center bg-secondary-200 text-primary-900 dark:bg-secondary-300"
+				>
+					<UIcon name="i-lucide-plug" class="size-4.5" />
+				</div>
+				<div class="flex flex-1 flex-col gap-1">
+					<h2 class="text-base/5 font-semibold text-highlighted">Connect your website</h2>
+					<p class="text-pretty text-muted">
+						Your site reads published articles from RenewCMS. Share this guide with
+						whoever builds it.
+					</p>
+					<RouterLink
+						to="/integration"
+						class="mt-1 self-start font-medium text-highlighted underline underline-offset-3"
+					>
+						Open the guide
+					</RouterLink>
+				</div>
+			</div>
+		</div>
+
+		<NewArticleModal v-model:open="newArticleModalOpen" />
 	</DashboardShell>
 </template>

web/src/views/__tests__/HomeView.spec.ts

@@ -0,0 +1,375 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import uiPlugin from '@nuxt/ui/vue-plugin'
+import router from '@/router'
+import { useSessionStore } from '@/stores/session'
+import type { Article } from '@/composables/useArticles'
+import HomeView from '../HomeView.vue'
+
+function mockResponse(status: number, body: unknown = null, headers: Record<string, string> = {}) {
+	return {
+		ok: status >= 200 && status < 300,
+		status,
+		headers: { get: (name: string) => headers[name] ?? null },
+		json: async () => body,
+	} as unknown as Response
+}
+
+function routeFor(url: string, init?: RequestInit) {
+	const method = init?.method ?? 'GET'
+	return `${method} ${url}`
+}
+
+function fetchRouter(handlers: Record<string, () => Response | Promise<Response>>) {
+	return vi.fn((url: string, init?: RequestInit) => {
+		const key = routeFor(url, init)
+		const handler = handlers[key]
+		if (!handler) {
+			throw new Error(`Unexpected fetch call: ${key}`)
+		}
+		return handler()
+	})
+}
+
+const sixArticles: Article[] = [
+	{
+		id: 1,
+		title: 'How we price a bathroom renovation',
+		body: '',
+		images: [],
+		is_online: true,
+		created_at: '2026-01-01T00:00:00Z',
+		updated_at: '2026-01-06T00:00:00Z',
+	},
+	{
+		id: 2,
+		title: 'Winter checklist for timber windows',
+		body: '',
+		images: [],
+		is_online: true,
+		created_at: '2026-01-01T00:00:00Z',
+		updated_at: '2026-01-05T00:00:00Z',
+	},
+	{
+		id: 3,
+		title: 'Choosing tiles for a small bathroom',
+		body: '',
+		images: [],
+		is_online: false,
+		created_at: '2026-01-01T00:00:00Z',
+		updated_at: '2026-01-04T00:00:00Z',
+	},
+	{
+		id: 4,
+		title: 'A guide to underfloor heating',
+		body: '',
+		images: [],
+		is_online: true,
+		created_at: '2026-01-01T00:00:00Z',
+		updated_at: '2026-01-03T00:00:00Z',
+	},
+	{
+		id: 5,
+		title: 'When to reseal a stone worktop',
+		body: '',
+		images: [],
+		is_online: false,
+		created_at: '2026-01-01T00:00:00Z',
+		updated_at: '2026-01-02T00:00:00Z',
+	},
+	{
+		id: 6,
+		title: 'Small bathroom lighting ideas',
+		body: '',
+		images: [],
+		is_online: true,
+		created_at: '2026-01-01T00:00:00Z',
+		updated_at: '2026-01-01T00:00:00Z',
+	},
+]
+
+let currentWrapper: Awaited<ReturnType<typeof mount>> | null = null
+
+async function mountHome(handlers: Record<string, () => Response | Promise<Response>>) {
+	setActivePinia(createPinia())
+	const session = useSessionStore()
+	session.session = { verified: true, username: 'marta' }
+	session.status = 'ready'
+	global.fetch = fetchRouter(handlers) as unknown as typeof fetch
+	await router.push('/home')
+	const wrapper = mount(HomeView, {
+		attachTo: document.body,
+		global: {
+			plugins: [router, uiPlugin],
+		},
+	})
+	currentWrapper = wrapper
+	await flushPromises()
+	return wrapper
+}
+
+function findButton(wrapper: Awaited<ReturnType<typeof mount>>, label: string) {
+	return wrapper.findAll('button').find((button) => button.text() === label)
+}
+
+afterEach(async () => {
+	currentWrapper?.unmount()
+	currentWrapper = null
+	vi.useRealTimers()
+	await router.push('/login')
+})
+
+describe('Skeletons appear only after 150 ms, never for a fast response', () => {
+	it('shows no skeleton before 150 ms, a skeleton after, then Default once resolved', async () => {
+		vi.useFakeTimers()
+		let resolveList: (() => void) | null = null
+		const wrapper = await mountHome({
+			'GET /v1/article/': () =>
+				new Promise((resolve) => {
+					resolveList = () => resolve(mockResponse(200, sixArticles))
+				}),
+		})
+
+		expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false)
+
+		await vi.advanceTimersByTimeAsync(150)
+
+		expect(wrapper.find('[aria-busy="true"]').exists()).toBe(true)
+
+		resolveList?.()
+		await vi.advanceTimersByTimeAsync(0)
+		await flushPromises()
+
+		expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false)
+		expect(wrapper.text()).toContain('6')
+		expect(wrapper.text()).toContain('articles')
+	})
+
+	it('never shows a skeleton when the response resolves in under 150 ms', async () => {
+		vi.useFakeTimers()
+		const wrapper = await mountHome({
+			'GET /v1/article/': () => Promise.resolve(mockResponse(200, sixArticles)),
+		})
+
+		await vi.advanceTimersByTimeAsync(0)
+		await flushPromises()
+
+		expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false)
+		expect(wrapper.text()).toContain('6')
+	})
+})
+
+describe('Default — the list loaded with a mix of online and draft articles', () => {
+	it('shows the subtitle, stat tiles and the first 5 articles in order', async () => {
+		const wrapper = await mountHome({
+			'GET /v1/article/': () => mockResponse(200, sixArticles),
+		})
+
+		expect(wrapper.text()).toContain("Here's where things stand on your site.")
+
+		const rows = wrapper.find('[data-testid="recent-list"]').findAll('li')
+		expect(rows).toHaveLength(5)
+		expect(rows[0].text()).toContain('How we price a bathroom renovation')
+		expect(rows[4].text()).toContain('When to reseal a stone worktop')
+		expect(wrapper.text()).not.toContain('Small bathroom lighting ideas')
+
+		expect(rows[0].find('a').attributes('href')).toBe('/article/1/edit')
+		expect(rows[0].text()).toContain('Online')
+		expect(rows[2].text()).toContain('Draft')
+
+		expect(wrapper.text()).toContain('6')
+		expect(wrapper.text()).toContain('articles')
+		expect(wrapper.text()).toContain('4')
+		expect(wrapper.text()).toContain('online')
+		expect(wrapper.text()).toContain('2')
+		expect(wrapper.text()).toContain('drafts')
+
+		const guideLink = wrapper.findAll('a').find((a) => a.text() === 'Open the guide')
+		expect(guideLink?.attributes('href')).toBe('/integration')
+
+		await findButton(wrapper, 'New article')?.trigger('click')
+		await flushPromises()
+		expect(document.body.querySelector('[role="dialog"]')).toBeTruthy()
+	})
+})
+
+describe('Empty, first run — zero articles', () => {
+	it('shows the empty state and opens NewArticleModal', async () => {
+		const wrapper = await mountHome({
+			'GET /v1/article/': () => mockResponse(200, []),
+		})
+
+		expect(wrapper.text()).toContain('Welcome to RenewCMS.')
+		expect(wrapper.text()).toContain('Write your first article')
+		expect(wrapper.text()).toContain(
+			'It starts as a draft, so nothing appears on your site until you publish it.',
+		)
+		expect(wrapper.find('[data-testid="stat-tile"]').exists()).toBe(false)
+
+		await findButton(wrapper, 'New article')?.trigger('click')
+		await flushPromises()
+
+		expect(document.body.querySelector('[role="dialog"]')).toBeTruthy()
+	})
+})
+
+describe('Error — a 500 or a network failure shows the same inline alert', () => {
+	it.each([
+		{ name: 'a 500 response', handler: () => mockResponse(500) },
+		{
+			name: 'a network failure',
+			handler: () => Promise.reject(new TypeError('Failed to fetch')),
+		},
+	])('shows the alert with identical copy for $name', async ({ handler }) => {
+		const wrapper = await mountHome({
+			'GET /v1/article/': handler,
+		})
+
+		expect(wrapper.text()).toContain("Here's where things stand on your site.")
+		expect(wrapper.text()).toContain('Good')
+		const alert = wrapper.find('[role="alert"]')
+		expect(alert.exists()).toBe(true)
+		expect(alert.text()).toContain("Couldn't load your articles")
+		expect(alert.text()).toContain('Check your connection and try again.')
+		expect(findButton(wrapper, 'Try again')).toBeTruthy()
+	})
+})
+
+describe('Retry re-issues the request and recovers into the Default state', () => {
+	it('replaces the alert with the stat tiles and recent list once the retry succeeds', async () => {
+		const listCall = vi
+			.fn()
+			.mockResolvedValueOnce(mockResponse(500))
+			.mockResolvedValueOnce(mockResponse(200, sixArticles))
+		const wrapper = await mountHome({
+			'GET /v1/article/': listCall,
+		})
+
+		expect(wrapper.find('[role="alert"]').exists()).toBe(true)
+
+		await findButton(wrapper, 'Try again')?.trigger('click')
+		await flushPromises()
+
+		expect(listCall).toHaveBeenCalledTimes(2)
+		expect(wrapper.find('[role="alert"]').exists()).toBe(false)
+		expect(wrapper.text()).toContain('6')
+		expect(wrapper.text()).toContain('articles')
+	})
+})
+
+describe('The list is fetched exactly once per navigation', () => {
+	it('calls GET /v1/article/ exactly once and derives both stats and the list from it', async () => {
+		const listCall = vi.fn(() => mockResponse(200, sixArticles))
+		const wrapper = await mountHome({
+			'GET /v1/article/': listCall,
+		})
+
+		expect(listCall).toHaveBeenCalledTimes(1)
+		expect(wrapper.text()).toContain('6')
+		expect(wrapper.find('[data-testid="recent-list"]').findAll('li')).toHaveLength(5)
+	})
+})
+
+describe('The greeting matches the hour of day', () => {
+	it.each([
+		{ hour: 0, greeting: 'Good morning' },
+		{ hour: 11, greeting: 'Good morning' },
+		{ hour: 12, greeting: 'Good afternoon' },
+		{ hour: 17, greeting: 'Good afternoon' },
+		{ hour: 18, greeting: 'Good evening' },
+		{ hour: 23, greeting: 'Good evening' },
+	])('reads "$greeting, marta" at hour $hour', async ({ hour, greeting }) => {
+		vi.useFakeTimers()
+		vi.setSystemTime(new Date(2026, 0, 1, hour, 0, 0))
+		const wrapper = await mountHome({
+			'GET /v1/article/': () => mockResponse(200, sixArticles),
+		})
+
+		expect(wrapper.text()).toContain(`${greeting}, marta`)
+	})
+})
+
+describe('The greeting is identical across every load state at a fixed hour', () => {
+	it('reads "Good morning, marta" while loading, in Default, Empty and Error', async () => {
+		vi.useFakeTimers()
+		vi.setSystemTime(new Date(2026, 0, 1, 9, 0, 0))
+
+		const loadingWrapper = await mountHome({
+			'GET /v1/article/': () => new Promise(() => {}),
+		})
+		await vi.advanceTimersByTimeAsync(150)
+		expect(loadingWrapper.text()).toContain('Good morning, marta')
+
+		const defaultWrapper = await mountHome({
+			'GET /v1/article/': () => mockResponse(200, sixArticles),
+		})
+		expect(defaultWrapper.text()).toContain('Good morning, marta')
+
+		const emptyWrapper = await mountHome({
+			'GET /v1/article/': () => mockResponse(200, []),
+		})
+		expect(emptyWrapper.text()).toContain('Good morning, marta')
+
+		const errorWrapper = await mountHome({
+			'GET /v1/article/': () => mockResponse(500),
+		})
+		expect(errorWrapper.text()).toContain('Good morning, marta')
+	})
+})
+
+describe('The greeting handles a missing username', () => {
+	it('renders the plain greeting without a stray comma when the session has no username', async () => {
+		vi.useFakeTimers()
+		vi.setSystemTime(new Date(2026, 0, 1, 9, 0, 0))
+		setActivePinia(createPinia())
+		const session = useSessionStore()
+		session.session = { verified: true }
+		session.status = 'ready'
+		global.fetch = fetchRouter({
+			'GET /v1/article/': () => mockResponse(200, sixArticles),
+		}) as unknown as typeof fetch
+		await router.push('/home')
+		const wrapper = mount(HomeView, {
+			attachTo: document.body,
+			global: { plugins: [router, uiPlugin] },
+		})
+		currentWrapper = wrapper
+		await flushPromises()
+
+		const heading = wrapper.find('[data-testid="greeting"]')
+		expect(heading.text()).toBe('Good morning')
+		expect(heading.text()).not.toContain('undefined')
+		expect(heading.text()).not.toMatch(/,\s*$/)
+	})
+})
+
+describe('The "Connect your website" card renders in every state', () => {
+	it('renders the same card while loading, in Default, Empty and Error', async () => {
+		vi.useFakeTimers()
+		const wrapper = await mountHome({
+			'GET /v1/article/': () => new Promise(() => {}),
+		})
+		await vi.advanceTimersByTimeAsync(150)
+		expect(wrapper.text()).toContain('Connect your website')
+		expect(wrapper.text()).toContain(
+			'Your site reads published articles from RenewCMS. Share this guide with whoever builds it.',
+		)
+		vi.useRealTimers()
+
+		const defaultWrapper = await mountHome({
+			'GET /v1/article/': () => mockResponse(200, sixArticles),
+		})
+		expect(defaultWrapper.text()).toContain('Connect your website')
+
+		const emptyWrapper = await mountHome({
+			'GET /v1/article/': () => mockResponse(200, []),
+		})
+		expect(emptyWrapper.text()).toContain('Connect your website')
+
+		const errorWrapper = await mountHome({
+			'GET /v1/article/': () => mockResponse(500),
+		})
+		expect(errorWrapper.text()).toContain('Connect your website')
+	})
+})

web/visual/check.ts

@@ -283,6 +283,7 @@ async function captureApp(
 		viewport: { width, height },
 		colorScheme: theme,
 		reducedMotion: 'reduce',
+		...(setup.now ? { timezoneId: 'UTC' } : {}),
 	})
 	await serveIconsLocally(context)
 	const unmocked = new Set<string>()
@@ -301,6 +302,9 @@ async function captureApp(
 		await route.fulfill(fulfilment(mock))
 	})
 	const page = await context.newPage()
+	if (setup.now) {
+		await page.clock.setFixedTime(new Date(setup.now))
+	}
 	await page.goto(`${origin}${setup.path}`)
 	await Promise.race([page.waitForLoadState('networkidle'), page.waitForTimeout(2000)])
 	await setup.steps?.(page)

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 } },