Add numbered pagination and redesign the IT/EN language switch

Blog and category archives now show a numbered page list (first, last,
current +/-1, collapsing gaps into an ellipsis) instead of only
previous/next — see shared/utils/pagination.ts's paginationRange().

Renders page links via NuxtLink's custom/v-slot API rather than letting
it render its own <a>: RouterLink's built-in active-class/aria-current
detection compares only the route's path, not its query string, so
every ?page=N link was incorrectly marked as the current page.

The language switch now shows both "Italiano / English" at all times,
with the current one as plain non-interactive text and the other as a
link, moved to the header's top-right corner instead of stacked under
the logo.

tests/unit/LanguageSwitch.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { mountSuspended, mockNuxtImport } from '@nuxt/test-utils/runtime'
+import { ref } from 'vue'
+import LanguageSwitch from '~/components/LanguageSwitch.vue'
+
+const langSwitchState = ref({ available: true, fallback: '/en/blog' })
+
+mockNuxtImport('useRoute', () => () => ({ path: '/blog/mio-slug' }))
+mockNuxtImport('useLocale', () => () => ref('it'))
+mockNuxtImport('useLangSwitchState', () => () => langSwitchState)
+
+describe('LanguageSwitch', () => {
+  it('shows the current language as non-interactive and the other as a link to /en', async () => {
+    langSwitchState.value = { available: true, fallback: '/en/blog' }
+
+    const wrapper = await mountSuspended(LanguageSwitch)
+
+    expect(wrapper.find('.lang-option.is-current').text()).toBe('Italiano')
+    expect(wrapper.find('.lang-option.is-current').attributes('aria-current')).toBe('true')
+
+    const link = wrapper.find('a.lang-option')
+    expect(link.text()).toBe('English')
+    expect(link.attributes('href')).toBe('/en/blog/mio-slug')
+  })
+
+  it('falls back to the given path when the current content has no translation', async () => {
+    langSwitchState.value = { available: false, fallback: '/en/blog' }
+
+    const wrapper = await mountSuspended(LanguageSwitch)
+    expect(wrapper.find('a.lang-option').attributes('href')).toBe('/en/blog')
+  })
+})

tests/unit/PaginationNav.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import PaginationNav from '~/components/PaginationNav.vue'
+
+describe('PaginationNav', () => {
+  it('renders nothing when there is only one page', async () => {
+    const wrapper = await mountSuspended(PaginationNav, { props: { page: 1, pageCount: 1, locale: 'it' } })
+    expect(wrapper.find('nav').exists()).toBe(false)
+  })
+
+  it('marks only the current page as aria-current, others as plain links', async () => {
+    const wrapper = await mountSuspended(PaginationNav, { props: { page: 4, pageCount: 7, locale: 'it' } })
+    const current = wrapper.find('.pagination-link.is-current')
+    expect(current.text()).toBe('4')
+    expect(current.attributes('aria-current')).toBe('page')
+
+    const links = wrapper.findAll('a.pagination-link')
+    expect(links.map((l) => l.text())).toEqual(['1', '2', '3', '5', '6', '7'])
+    for (const link of links) {
+      expect(link.attributes('aria-current')).toBeUndefined()
+    }
+  })
+
+  it('collapses far-away pages into an ellipsis', async () => {
+    const wrapper = await mountSuspended(PaginationNav, { props: { page: 1, pageCount: 20, locale: 'it' } })
+    expect(wrapper.find('.pagination-ellipsis').exists()).toBe(true)
+    expect(wrapper.findAll('a.pagination-link').length).toBeLessThan(20)
+  })
+
+  it('disables the previous arrow on the first page and the next arrow on the last', async () => {
+    const first = await mountSuspended(PaginationNav, { props: { page: 1, pageCount: 5, locale: 'it' } })
+    expect(first.find('a.pagination-arrow[rel="prev"]').exists()).toBe(false)
+    expect(first.find('a.pagination-arrow[rel="next"]').exists()).toBe(true)
+
+    const last = await mountSuspended(PaginationNav, { props: { page: 5, pageCount: 5, locale: 'it' } })
+    expect(last.find('a.pagination-arrow[rel="next"]').exists()).toBe(false)
+    expect(last.find('a.pagination-arrow[rel="prev"]').exists()).toBe(true)
+  })
+})

tests/unit/pagination.utils.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import { paginationRange } from '../../frontend/shared/utils/pagination'
+
+describe('paginationRange', () => {
+  it('returns an empty array for zero or negative totals', () => {
+    expect(paginationRange(1, 0)).toEqual([])
+  })
+
+  it('returns every page when the total fits within the visible window', () => {
+    expect(paginationRange(1, 5)).toEqual([1, 2, 3, 4, 5])
+    expect(paginationRange(3, 7)).toEqual([1, 2, 3, 4, 5, 6, 7])
+  })
+
+  it('collapses the right side when near the start', () => {
+    expect(paginationRange(1, 20)).toEqual([1, 2, 3, 4, 5, 'ellipsis', 20])
+    expect(paginationRange(2, 20)).toEqual([1, 2, 3, 4, 5, 'ellipsis', 20])
+  })
+
+  it('collapses the left side when near the end', () => {
+    expect(paginationRange(20, 20)).toEqual([1, 'ellipsis', 16, 17, 18, 19, 20])
+    expect(paginationRange(19, 20)).toEqual([1, 'ellipsis', 16, 17, 18, 19, 20])
+  })
+
+  it('collapses both sides when in the middle', () => {
+    expect(paginationRange(10, 20)).toEqual([1, 'ellipsis', 9, 10, 11, 'ellipsis', 20])
+  })
+
+  it('always includes the current page', () => {
+    for (let current = 1; current <= 27; current++) {
+      expect(paginationRange(current, 27)).toContain(current)
+    }
+  })
+})