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.

frontend/app/assets/css/main.css

@@ -94,6 +94,19 @@ h3 {
   color: var(--color-muted);
 }
 
+/* Visually hidden but still announced by screen readers. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* Small uppercase label used for categories, dates and section headings. */
 .kicker {
   margin: 0;
@@ -223,16 +236,3 @@ h3 {
   font-size: 0.9em;
 }
 
-.pagination {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem 2rem;
-  align-items: center;
-  justify-content: center;
-  margin-top: var(--gap-section);
-  padding-top: 2rem;
-  border-top: 1px solid var(--color-border);
-  font-size: 0.85rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}

frontend/app/components/LanguageSwitch.vue

@@ -1,37 +1,71 @@
 <script setup lang="ts">
 import { STRINGS } from '#shared/utils/i18n'
 import { bareLocalePath, localePath } from '#shared/utils/locale'
+import type { Locale } from '#shared/utils/locale'
 
 const route = useRoute()
 const locale = useLocale()
 const langSwitch = useLangSwitchState()
 
-const target = computed(() => {
-  if (!langSwitch.value.available) return langSwitch.value.fallback
-  const otherLocale = locale.value === 'en' ? 'it' : 'en'
-  return localePath(otherLocale, bareLocalePath(route.path))
-})
+const strings = computed(() => STRINGS[locale.value])
 
-const label = computed(() => STRINGS[locale.value].langSwitchLabel)
+function targetFor(otherLocale: Locale): string {
+  if (!langSwitch.value.available) return langSwitch.value.fallback
+  return localePath(otherLocale, bareLocalePath(route.path))
+}
 </script>
 
 <template>
-  <NuxtLink class="lang-switch" :to="target">{{ label }}</NuxtLink>
+  <div class="lang-switch" :aria-label="strings.langSwitch.ariaLabel" role="group">
+    <span v-if="locale === 'it'" class="lang-option is-current" aria-current="true">
+      {{ strings.langSwitch.it }}
+    </span>
+    <NuxtLink v-else class="lang-option" :to="targetFor('it')">
+      {{ strings.langSwitch.it }}
+    </NuxtLink>
+
+    <span class="lang-divider" aria-hidden="true">/</span>
+
+    <span v-if="locale === 'en'" class="lang-option is-current" aria-current="true">
+      {{ strings.langSwitch.en }}
+    </span>
+    <NuxtLink v-else class="lang-option" :to="targetFor('en')">
+      {{ strings.langSwitch.en }}
+    </NuxtLink>
+  </div>
 </template>
 
 <style scoped>
 .lang-switch {
-  display: inline-block;
-  font-size: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.7rem;
   font-weight: 600;
-  letter-spacing: 0.14em;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
+}
+
+.lang-option {
+  display: inline-block;
   text-decoration: none;
-  padding-block: 0.6rem;
+  color: var(--color-muted);
+  padding-block: 0.25rem;
   border-bottom: 1px solid transparent;
 }
 
-.lang-switch:hover {
+a.lang-option:hover,
+a.lang-option:focus-visible {
+  color: var(--color-ink);
   border-bottom-color: var(--color-ink);
 }
+
+.lang-option.is-current {
+  color: var(--color-ink);
+  border-bottom-color: var(--color-ink);
+}
+
+.lang-divider {
+  color: var(--color-border);
+}
 </style>

frontend/app/components/PaginationNav.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { Locale } from '#shared/utils/locale'
+import { STRINGS, interpolate } from '#shared/utils/i18n'
+import { paginationRange } from '#shared/utils/pagination'
+
+const props = defineProps<{ page: number; pageCount: number; locale: Locale }>()
+
+const strings = computed(() => STRINGS[props.locale])
+const items = computed(() => paginationRange(props.page, props.pageCount))
+</script>
+
+<template>
+  <nav v-if="pageCount > 1" class="pagination" :aria-label="strings.blog.paginationAriaLabel">
+    <!-- `custom` bypasses NuxtLink/RouterLink's own active-class and aria-current
+         computation, which compares only the path, not the query string — every
+         page link would otherwise be (wrongly) marked as the current page. -->
+    <NuxtLink
+      v-if="page > 1"
+      v-slot="{ href, navigate }"
+      :to="{ query: { page: page - 1 } }"
+      custom
+    >
+      <a :href="href ?? undefined" class="pagination-arrow" rel="prev" :aria-label="strings.blog.prevPage" @click="navigate">
+        <span aria-hidden="true">‹</span>
+      </a>
+    </NuxtLink>
+    <span v-else class="pagination-arrow is-disabled" aria-hidden="true">‹</span>
+
+    <ul class="pagination-list">
+      <li v-for="(item, index) in items" :key="index">
+        <span v-if="item === 'ellipsis'" class="pagination-ellipsis" aria-hidden="true">…</span>
+        <span v-else-if="item === page" class="pagination-link is-current" aria-current="page">
+          {{ item }}
+        </span>
+        <NuxtLink v-else v-slot="{ href, navigate }" :to="{ query: { page: item } }" custom>
+          <a
+            :href="href ?? undefined"
+            class="pagination-link"
+            :aria-label="interpolate(strings.blog.goToPage, { page: item })"
+            @click="navigate"
+          >
+            {{ item }}
+          </a>
+        </NuxtLink>
+      </li>
+    </ul>
+
+    <NuxtLink
+      v-if="page < pageCount"
+      v-slot="{ href, navigate }"
+      :to="{ query: { page: page + 1 } }"
+      custom
+    >
+      <a :href="href ?? undefined" class="pagination-arrow" rel="next" :aria-label="strings.blog.nextPage" @click="navigate">
+        <span aria-hidden="true">›</span>
+      </a>
+    </NuxtLink>
+    <span v-else class="pagination-arrow is-disabled" aria-hidden="true">›</span>
+
+    <p class="sr-only" role="status">
+      {{ interpolate(strings.blog.pageOf, { current: page, total: pageCount }) }}
+    </p>
+  </nav>
+</template>
+
+<style scoped>
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: var(--gap-section);
+  padding-top: 2rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.pagination-list {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.pagination-arrow,
+.pagination-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  padding-inline: 0.4rem;
+  border-radius: var(--radius);
+  font-size: 0.85rem;
+  text-decoration: none;
+  color: var(--color-body);
+}
+
+.pagination-arrow {
+  font-size: 1.1rem;
+}
+
+.pagination-arrow.is-disabled {
+  color: var(--color-border);
+}
+
+.pagination-link:hover {
+  background: var(--color-surface);
+  color: var(--color-ink);
+}
+
+.pagination-arrow:not(.is-disabled):hover {
+  background: var(--color-surface);
+  color: var(--color-ink);
+}
+
+.pagination-link.is-current {
+  background: var(--color-ink);
+  color: var(--color-bg);
+  font-weight: 600;
+}
+
+.pagination-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  color: var(--color-muted);
+}
+</style>

frontend/app/components/views/BlogIndexView.vue

@@ -47,21 +47,7 @@ useSeo({
         </li>
       </ul>
 
-      <nav v-if="data.pageCount > 1" class="pagination" :aria-label="strings.blog.paginationAriaLabel">
-        <NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
-          {{ strings.blog.prevPage }}
-        </NuxtLink>
-        <span class="muted">
-          {{ interpolate(strings.blog.pageOf, { current: data.page, total: data.pageCount }) }}
-        </span>
-        <NuxtLink
-          v-if="data.page < data.pageCount"
-          :to="{ query: { page: data.page + 1 } }"
-          rel="next"
-        >
-          {{ strings.blog.nextPage }}
-        </NuxtLink>
-      </nav>
+      <PaginationNav :page="data.page" :page-count="data.pageCount" :locale="locale" />
     </template>
   </div>
 </template>

frontend/app/components/views/CategoryView.vue

@@ -55,21 +55,7 @@ useSeo({
         </li>
       </ul>
 
-      <nav v-if="data.pageCount > 1" class="pagination" :aria-label="strings.blog.paginationAriaLabel">
-        <NuxtLink v-if="data.page > 1" :to="{ query: { page: data.page - 1 } }" rel="prev">
-          {{ strings.blog.prevPage }}
-        </NuxtLink>
-        <span class="muted">
-          {{ interpolate(strings.blog.pageOf, { current: data.page, total: data.pageCount }) }}
-        </span>
-        <NuxtLink
-          v-if="data.page < data.pageCount"
-          :to="{ query: { page: data.page + 1 } }"
-          rel="next"
-        >
-          {{ strings.blog.nextPage }}
-        </NuxtLink>
-      </nav>
+      <PaginationNav :page="data.page" :page-count="data.pageCount" :locale="locale" />
     </template>
   </div>
 </template>

frontend/app/layouts/default.vue

@@ -11,16 +11,15 @@ const strings = computed(() => STRINGS[locale.value])
     <a class="skip-link" href="#main">{{ strings.skipLink }}</a>
 
     <header class="site-header">
-      <div class="container">
+      <div class="container header-inner">
+        <LanguageSwitch class="lang-switch-header" />
+
         <p class="wordmark">
           <NuxtLink :to="localePath(locale, '/')">
             <img src="/logo.png" :alt="SITE_NAME" width="400" height="400">
           </NuxtLink>
         </p>
         <p class="tagline kicker">{{ strings.tagline }}</p>
-        <p class="lang-switch-header">
-          <LanguageSwitch />
-        </p>
       </div>
 
       <nav class="site-nav" :aria-label="strings.navAriaLabel">
@@ -102,6 +101,16 @@ const strings = computed(() => STRINGS[locale.value])
   }
 }
 
+.header-inner {
+  position: relative;
+}
+
+.lang-switch-header {
+  position: absolute;
+  top: 0;
+  right: var(--space);
+}
+
 .wordmark {
   margin: 0;
 }
@@ -121,10 +130,6 @@ const strings = computed(() => STRINGS[locale.value])
   margin-top: 0.6rem;
 }
 
-.lang-switch-header {
-  margin-top: 0.5rem;
-}
-
 .site-nav {
   margin-top: 1.25rem;
   border-top: 1px solid var(--color-border);

frontend/shared/utils/i18n.ts

@@ -20,7 +20,11 @@ export const STRINGS = {
     footerFollowAriaLabel: 'Seguici',
     contactLabel: 'Contatti:',
     copyright: 'Tutti i diritti riservati.',
-    langSwitchLabel: 'English',
+    langSwitch: {
+      ariaLabel: 'Lingua del sito',
+      it: 'Italiano',
+      en: 'English',
+    },
     home: {
       heading: "La fine dell'Unione Europea per come l'abbiamo conosciuta.",
       img1Alt: 'Manifesti e scritte contro le banche durante una crisi bancaria',
@@ -43,6 +47,7 @@ export const STRINGS = {
       prevPage: 'Pagina precedente',
       nextPage: 'Pagina successiva',
       pageOf: 'Pagina {current} di {total}',
+      goToPage: 'Vai a pagina {page}',
       paginationAriaLabel: 'Paginazione',
     },
     category: {
@@ -71,7 +76,11 @@ export const STRINGS = {
     footerFollowAriaLabel: 'Follow us',
     contactLabel: 'Contact:',
     copyright: 'All rights reserved.',
-    langSwitchLabel: 'Italiano',
+    langSwitch: {
+      ariaLabel: 'Site language',
+      it: 'Italiano',
+      en: 'English',
+    },
     home: {
       heading: "The end of the European Union as we've known it.",
       img1Alt: 'Banners and graffiti against banks during a banking crisis',
@@ -94,6 +103,7 @@ export const STRINGS = {
       prevPage: 'Previous page',
       nextPage: 'Next page',
       pageOf: 'Page {current} of {total}',
+      goToPage: 'Go to page {page}',
       paginationAriaLabel: 'Pagination',
     },
     category: {

frontend/shared/utils/pagination.ts

@@ -0,0 +1,37 @@
+export type PaginationItem = number | 'ellipsis'
+
+function range(start: number, end: number): number[] {
+  const length = end - start + 1
+  return Array.from({ length }, (_, i) => start + i)
+}
+
+/**
+ * Windowed page list for numbered pagination: always shows the first and
+ * last page, the current page and its immediate siblings, collapsing any
+ * gap into a single 'ellipsis' marker. Returns every page when the total
+ * is small enough that no collapsing is needed.
+ */
+export function paginationRange(current: number, total: number, siblingCount = 1): PaginationItem[] {
+  if (total <= 0) return []
+
+  const totalVisible = siblingCount * 2 + 5 // first + last + current + 2 siblings + 2 ellipses
+  if (totalVisible >= total) return range(1, total)
+
+  const leftSibling = Math.max(current - siblingCount, 1)
+  const rightSibling = Math.min(current + siblingCount, total)
+
+  const showLeftEllipsis = leftSibling > 2
+  const showRightEllipsis = rightSibling < total - 1
+
+  if (!showLeftEllipsis && showRightEllipsis) {
+    const leftRange = range(1, 3 + siblingCount * 2)
+    return [...leftRange, 'ellipsis', total]
+  }
+
+  if (showLeftEllipsis && !showRightEllipsis) {
+    const rightRange = range(total - (3 + siblingCount * 2) + 1, total)
+    return [1, 'ellipsis', ...rightRange]
+  }
+
+  return [1, 'ellipsis', ...range(leftSibling, rightSibling), 'ellipsis', total]
+}