@plutocms/pluto 0.12.0 → 0.14.0

package/app/components/Pluto/Content/PlutoContentList.vue

@@ -8,6 +8,8 @@ const props = defineProps<{
 
 const { byName } = usePlutoContentTypes()
 const contentType = computed(() => byName(props.type))
+const { t, n } = usePlutoI18n()
+const text = usePlutoContentText(contentType)
 
 if (!contentType.value) {
   // The generated page (`app/pages/admin/content/[type]/index.vue`) already
@@ -48,7 +50,29 @@ function editPath(id: string | number) {
   return contentType.value?.editPath?.(id) ?? `${basePath.value}/${id}`
 }
 
-const { items, pending, error, refresh, remove } = usePlutoContentList(props.type)
+// Load the list 50 rows at a time. The table is virtualized, so only the
+// visible rows render, and the next page loads when the user scrolls near
+// the end of the table (or of the card list, on mobile).
+const PAGE_SIZE = 50
+const { items, total, pending, loadingMore, hasMore, error, refresh, loadMore, remove } = usePlutoContentList(
+  props.type,
+  { pageSize: PAGE_SIZE }
+)
+
+const tableRef = useTemplateRef<{
+ $el: HTMLElement
+}>('table')
+const mobileListRef = useTemplateRef<HTMLElement>('mobileList')
+
+function loadMoreSafely() {
+  // A failure lands in `error`, and the alert offers "Try again".
+  loadMore().catch(() => {})
+}
+
+// Stop while an error shows, so a failing page does not load in a loop.
+const canLoadMore = () => hasMore.value && !error.value
+useInfiniteScroll(() => tableRef.value?.$el, loadMoreSafely, { distance: 240, canLoadMore })
+useInfiniteScroll(mobileListRef, loadMoreSafely, { distance: 240, canLoadMore })
 
 // What to show while the list has no rows. With rows, the list shows
 // them, and a failed refresh shows an alert above them instead.
@@ -74,10 +98,10 @@ const emptyActions = computed<ButtonProps[]>(() => {
     return []
   }
   if (emptyState.value === 'error') {
-    return [{ label: 'Try again', icon: 'lucide:refresh-ccw', color: 'neutral', variant: 'outline', onClick: retry }]
+    return [{ label: t('pluto.common.tryAgain'), icon: 'lucide:refresh-ccw', color: 'neutral', variant: 'outline', onClick: retry }]
   }
   return canWrite.value
-    ? [{ label: `New ${type.label}`, icon: 'lucide:plus', onClick: () => navigateTo(newPath.value) }]
+    ? [{ label: text.newLabel, icon: 'lucide:plus', onClick: () => navigateTo(newPath.value) }]
     : []
 })
 
@@ -90,7 +114,7 @@ const listFields = computed(() =>
 const columns = computed<TableColumn<PlutoContentItem>[]>(() => [
   ...listFields.value.map((field) => ({
     accessorKey: field.name,
-    header: field.label,
+    header: text.fieldLabel(field),
   })),
   { id: 'actions', header: '' },
 ])
@@ -116,18 +140,27 @@ async function confirmDelete() {
   await remove(pendingDeleteId.value)
   closeDeleteModal()
 }
+
+// The footer line: "Showing 5 of 20 posts", plus "Loading more…" while a
+// page loads. The phrase has the plural label as a parameter, so a language
+// can put it anywhere.
+const footer = computed(() => {
+  const params = { loaded: n(items.value.length), total: total.value === undefined ? '' : n(total.value), labelPlural: text.labelPluralLower }
+  const summary = t(total.value === undefined ? 'pluto.list.showing' : 'pluto.list.showingOf', params)
+  return loadingMore.value ? `${summary} · ${t('pluto.list.loadingMore')}` : summary
+})
 </script>
 
 <template>
-  <PlutoViewAdminPanel v-if="contentType">
+  <PlutoViewAdminPanel v-if="contentType" fill>
     <template #toolbar>
-      <PlutoViewToolbar :title="contentType.labelPlural">
+      <PlutoViewToolbar :title="text.labelPlural">
         <template #trailing>
           <UButton
             :loading="pending"
+            :title="t('pluto.common.refresh')"
             icon="lucide:refresh-ccw"
             variant="ghost"
-            title="Refresh"
             square
             @click="retry"
           />
@@ -135,7 +168,7 @@ async function confirmDelete() {
 
         <template v-if="canWrite" #right>
           <UButton :to="newPath" icon="lucide:plus" as="NuxtLink">
-            New {{ contentType.label }}
+            {{ text.newLabel }}
           </UButton>
         </template>
       </PlutoViewToolbar>
@@ -143,24 +176,24 @@ async function confirmDelete() {
 
     <UEmpty
       v-if="emptyState === 'loading'"
-      :title="`Loading ${contentType.labelPlural.toLowerCase()}…`"
+      :title="t('pluto.list.loading', { labelPlural: text.labelPluralLower })"
       variant="naked"
       loading
     />
 
     <UEmpty
       v-else-if="emptyState === 'error'"
-      :title="`Could not load ${contentType.labelPlural.toLowerCase()}`"
+      :title="t('pluto.list.loadFailed', { labelPlural: text.labelPluralLower })"
       :actions="emptyActions"
-      description="Check your connection and try again."
+      :description="t('pluto.list.loadFailedHint')"
       icon="lucide:circle-alert"
       variant="naked"
     />
 
     <UEmpty
       v-else-if="emptyState === 'empty'"
-      :title="`No ${contentType.labelPlural.toLowerCase()} yet`"
-      :description="canWrite ? `Create the first ${contentType.label.toLowerCase()} to see it here.` : 'There is nothing here yet.'"
+      :title="t('pluto.list.empty', { labelPlural: text.labelPluralLower })"
+      :description="canWrite ? t('pluto.list.emptyCanWrite', { label: text.labelLower }) : t('pluto.list.emptyReadOnly')"
       :icon="contentType.icon ?? 'lucide:inbox'"
       :actions="emptyActions"
       variant="naked"
@@ -168,16 +201,20 @@ async function confirmDelete() {
 
     <UAlert
       v-if="!emptyState && error"
-      :actions="[{ label: 'Try again', color: 'error', variant: 'outline', onClick: retry }]"
-      :title="`Could not refresh ${contentType.labelPlural.toLowerCase()}`"
-      description="The list below may be out of date."
+      :actions="[{ label: t('pluto.common.tryAgain'), color: 'error', variant: 'outline', onClick: retry }]"
+      :title="t('pluto.list.refreshFailed', { labelPlural: text.labelPluralLower })"
+      :description="t('pluto.list.refreshFailedHint')"
       color="error"
       variant="subtle"
       icon="lucide:circle-alert"
     />
 
-    <div v-if="!emptyState" class="grid gap-3 lg:hidden">
-      <UCard v-for="item in items" :key="item.id">
+    <div
+      v-if="!emptyState"
+      ref="mobileList"
+      class="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto lg:hidden"
+    >
+      <UCard v-for="item in items" :key="item.id" class="shrink-0">
         <div class="flex flex-col gap-4">
           <div class="min-w-0">
             <NuxtLink
@@ -190,7 +227,7 @@ async function confirmDelete() {
 
           <dl class="grid grid-cols-2 gap-3 text-sm">
             <div v-for="field in listFields" :key="field.name">
-              <dt class="text-muted">{{ field.label }}</dt>
+              <dt class="text-muted">{{ text.fieldLabel(field) }}</dt>
               <dd class="font-medium">{{ item[field.name] }}</dd>
             </div>
           </dl>
@@ -204,7 +241,7 @@ async function confirmDelete() {
               variant="soft"
               class="flex-1 justify-center"
             >
-              Edit
+              {{ t('pluto.common.edit') }}
             </UButton>
 
             <UButton
@@ -215,29 +252,32 @@ async function confirmDelete() {
               class="flex-1 justify-center"
               @click="openDeleteModal(item.id)"
             >
-              Remove
+              {{ t('pluto.common.remove') }}
             </UButton>
           </div>
         </div>
       </UCard>
     </div>
 
-    <UCard v-if="!emptyState" :ui="{ body: 'sm:p-0 p-0' }" class="hidden lg:block">
-      <div class="overflow-x-auto">
-        <UTable
-          :data="items"
-          :columns="columns"
-          :loading="pending"
-          empty="No items yet."
-        >
-          <template #actions-cell="{ row }">
+    <UTable
+      v-if="!emptyState"
+      ref="table"
+      :data="items"
+      :columns="columns"
+      :loading="pending || loadingMore"
+      :empty="t('pluto.list.emptyTable')"
+      class="ring-default hidden min-h-0 flex-1 rounded-lg ring lg:block"
+      sticky
+      virtualize
+    >
+      <template #actions-cell="{ row }">
             <div class="flex justify-end gap-3">
               <NuxtLink
                 v-if="canWrite"
                 :to="editPath(row.original.id)"
                 class="text-info px-0 py-0.5 hover:underline"
               >
-                Edit
+                {{ t('pluto.common.edit') }}
               </NuxtLink>
 
               <button
@@ -246,28 +286,30 @@ async function confirmDelete() {
                 class="text-error cursor-pointer px-0 py-0.5 hover:underline"
                 @click="openDeleteModal(row.original.id)"
               >
-                Remove
+                {{ t('pluto.common.remove') }}
               </button>
             </div>
-          </template>
-        </UTable>
-      </div>
-    </UCard>
+      </template>
+    </UTable>
+
+    <p v-if="!emptyState" class="text-muted shrink-0 text-xs tabular-nums" aria-live="polite">
+      {{ footer }}
+    </p>
   </PlutoViewAdminPanel>
 
   <PlutoViewAdminPanel v-else>
     <UAlert
-      :description="`No content type named &quot;${type}&quot; is registered.`"
+      :description="t('pluto.content.typeNotFoundDescription', { type })"
+      :title="t('pluto.content.typeNotFound')"
       color="error"
-      title="Content type not found"
     />
   </PlutoViewAdminPanel>
 
   <Modal v-model="isDeleteModalOpen" :custom-size="480">
-    <ModalHeader @close="closeDeleteModal">Remove item</ModalHeader>
+    <ModalHeader @close="closeDeleteModal">{{ t('pluto.list.removeTitle') }}</ModalHeader>
 
     <ModalContent>
-      <p>Do you really want to remove this item?</p>
+      <p>{{ t('pluto.content.removeConfirm') }}</p>
     </ModalContent>
 
     <ModalFooter>
@@ -278,11 +320,11 @@ async function confirmDelete() {
           color="neutral"
           @click="closeDeleteModal"
         >
-          Cancel
+          {{ t('pluto.common.cancel') }}
         </UButton>
 
         <UButton icon="lucide:trash" color="error" @click="confirmDelete">
-          Remove
+          {{ t('pluto.common.remove') }}
         </UButton>
       </div>
     </ModalFooter>

package/app/components/Pluto/Content/fields/PlutoFieldReference.vue

@@ -48,6 +48,7 @@ async function loadOptions() {
 
 onMounted(loadOptions)
 
+const { t } = usePlutoI18n()
 const hasOptionsSource = computed(() => Boolean(props.field.optionsUrl))
 const value = computed(() => props.modelValue as string | number | undefined)
 </script>
@@ -69,9 +70,9 @@ const value = computed(() => props.modelValue as string | number | undefined)
     <UInputMenu
       v-else
       :items="[]"
+      :placeholder="t('pluto.fields.noOptionsSource')"
       value-key="value"
       label-key="label"
-      placeholder="No options source configured for this reference field."
       class="w-full"
       disabled
     />

package/app/components/Pluto/Dashboard/PlutoDashboardContentActivity.vue

@@ -7,11 +7,12 @@
 const WEEKS = 12
 
 const { data: series, status, refresh } = usePlutoContentActivity(WEEKS)
+const { t, n, d } = usePlutoI18n()
+const texts = usePlutoContentTexts()
 
-const number = new Intl.NumberFormat()
 // The week starts are UTC dates. Format them in UTC so a viewer west of
 // UTC does not see the previous day.
-const weekLabel = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', timeZone: 'UTC' })
+const weekLabel = (start: string) => d(new Date(`${start}T00:00:00Z`), { month: 'short', day: 'numeric', timeZone: 'UTC' })
 
 const rows = computed(() => {
   const first = series.value[0]
@@ -19,7 +20,7 @@ const rows = computed(() => {
     return []
   }
   return first.points.map((point, index) => {
-    const row: Record<string, string | number> = { week: weekLabel.format(new Date(`${point.start}T00:00:00Z`)) }
+    const row: Record<string, string | number> = { week: weekLabel(point.start) }
     for (const entry of series.value) {
       row[entry.name] = entry.points[index]?.count ?? 0
     }
@@ -27,7 +28,9 @@ const rows = computed(() => {
   })
 })
 
-const categories = computed(() => series.value.map((entry) => ({ key: entry.name, label: entry.labelPlural })))
+// The series carry the English labels. The content text resolves the keys.
+const seriesLabel = (entry: PlutoContentActivitySeries) => texts(entry.name).labelPlural
+const categories = computed(() => series.value.map((entry) => ({ key: entry.name, label: seriesLabel(entry) })))
 
 const total = computed(() =>
   series.value.reduce((sum, entry) => sum + entry.points.reduce((acc, point) => acc + point.count, 0), 0)
@@ -45,12 +48,12 @@ function retry() {
     <template #header>
       <div class="flex items-start justify-between gap-4">
         <div>
-          <h3 class="text-highlighted font-semibold">Content activity</h3>
-          <p class="text-muted text-sm">Items created per week, last {{ WEEKS }} weeks</p>
+          <h3 class="text-highlighted font-semibold">{{ t('pluto.dashboard.activity.title') }}</h3>
+          <p class="text-muted text-sm">{{ t('pluto.dashboard.activity.subtitle', { weeks: WEEKS }) }}</p>
         </div>
         <div v-if="status === 'success' && series.length" class="text-right">
-          <p class="text-highlighted text-2xl font-semibold tabular-nums">{{ number.format(total) }}</p>
-          <p class="text-muted text-xs">created</p>
+          <p class="text-highlighted text-2xl font-semibold tabular-nums">{{ n(total) }}</p>
+          <p class="text-muted text-xs">{{ t('pluto.dashboard.activity.created', total) }}</p>
         </div>
       </div>
     </template>
@@ -59,26 +62,26 @@ function retry() {
 
     <UAlert
       v-else-if="status === 'error'"
-      :actions="[{ label: 'Try again', color: 'error', variant: 'outline', onClick: retry }]"
+      :actions="[{ label: t('pluto.common.tryAgain'), color: 'error', variant: 'outline', onClick: retry }]"
+      :title="t('pluto.dashboard.activity.loadFailed')"
       color="error"
       variant="subtle"
       icon="lucide:circle-alert"
-      title="Could not load the activity"
     />
 
     <UEmpty
       v-else-if="!series.length"
+      :title="t('pluto.dashboard.activity.unavailable')"
+      :description="t('pluto.dashboard.activity.unavailableHint')"
       icon="lucide:chart-line"
-      title="Activity is not available"
-      description="The content backend cannot count items by creation date yet."
       variant="naked"
     />
 
     <UEmpty
       v-else-if="total === 0"
-      :title="`Nothing created in the last ${WEEKS} weeks`"
+      :title="t('pluto.dashboard.activity.none', { weeks: WEEKS })"
+      :description="t('pluto.dashboard.activity.noneHint')"
       icon="lucide:chart-line"
-      description="New items show up here week by week."
       variant="naked"
     />
 
@@ -88,18 +91,18 @@ function retry() {
         :data="rows"
         :categories="categories"
         :height="256"
-        :format="(value: number) => number.format(value)"
-        :aria-label="`Items created per week, last ${WEEKS} weeks`"
+        :format="(value: number) => n(value)"
+        :aria-label="t('pluto.dashboard.activity.subtitle', { weeks: WEEKS })"
         index="week"
         curve="monotone"
       />
 
       <table class="sr-only">
-        <caption>Items created per week, last {{ WEEKS }} weeks</caption>
+        <caption>{{ t('pluto.dashboard.activity.subtitle', { weeks: WEEKS }) }}</caption>
         <thead>
           <tr>
-            <th scope="col">Week of</th>
-            <th v-for="entry in series" :key="entry.name" scope="col">{{ entry.labelPlural }}</th>
+            <th scope="col">{{ t('pluto.dashboard.activity.weekOf') }}</th>
+            <th v-for="entry in series" :key="entry.name" scope="col">{{ seriesLabel(entry) }}</th>
           </tr>
         </thead>
         <tbody>

package/app/components/Pluto/Dashboard/PlutoDashboardContentOverview.vue

@@ -9,7 +9,8 @@ const { items: contentTypes } = usePlutoContentTypes()
 const { stats, pending, error, refresh } = usePlutoContentStats()
 const { data: activity } = usePlutoContentActivity()
 
-const number = new Intl.NumberFormat()
+const { t, n } = usePlutoI18n()
+const texts = usePlutoContentTexts()
 
 function retry() {
   refresh().catch(() => {})
@@ -26,14 +27,14 @@ function thisWeek(stat: PlutoContentStat): number | undefined {
 </script>
 
 <template>
-  <section v-if="contentTypes.length" aria-label="Content overview">
+  <section v-if="contentTypes.length" :aria-label="t('pluto.dashboard.overview.label')">
     <UAlert
       v-if="error && !stats.length"
-      :actions="[{ label: 'Try again', color: 'error', variant: 'outline', onClick: retry }]"
+      :actions="[{ label: t('pluto.common.tryAgain'), color: 'error', variant: 'outline', onClick: retry }]"
+      :title="t('pluto.dashboard.overview.loadFailed')"
       color="error"
       variant="subtle"
       icon="lucide:circle-alert"
-      title="Could not load the content counts"
     />
 
     <div v-else class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
@@ -57,7 +58,7 @@ function thisWeek(stat: PlutoContentStat): number | undefined {
         <UCard class="group-hover:ring-accented h-full transition-shadow group-hover:shadow-sm">
           <div class="flex flex-col gap-3">
             <div class="flex items-start justify-between gap-3">
-              <p class="text-muted text-sm font-medium">{{ stat.labelPlural }}</p>
+              <p class="text-muted text-sm font-medium">{{ texts(stat.name).labelPlural }}</p>
               <span class="bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-md">
                 <UIcon :name="stat.icon ?? 'lucide:file'" class="size-4" />
               </span>
@@ -65,14 +66,14 @@ function thisWeek(stat: PlutoContentStat): number | undefined {
 
             <div class="flex items-baseline gap-2">
               <p class="text-highlighted text-3xl font-semibold tracking-tight tabular-nums">
-                {{ number.format(stat.total) }}
+                {{ n(stat.total) }}
               </p>
               <p v-if="thisWeek(stat) !== undefined" class="text-sm">
                 <template v-if="thisWeek(stat)">
-                  <span class="text-success font-medium tabular-nums">+{{ number.format(thisWeek(stat)!) }}</span>
-                  <span class="text-muted"> this week</span>
+                  <span class="text-success font-medium tabular-nums">+{{ n(thisWeek(stat)!) }}</span>
+                  <span class="text-muted"> {{ t('pluto.dashboard.overview.thisWeek') }}</span>
                 </template>
-                <span v-else class="text-dimmed">none new this week</span>
+                <span v-else class="text-dimmed">{{ t('pluto.dashboard.overview.noneThisWeek') }}</span>
               </p>
             </div>
 
@@ -80,7 +81,7 @@ function thisWeek(stat: PlutoContentStat): number | undefined {
               <div
                 :aria-valuenow="stat.published"
                 :aria-valuemax="stat.total"
-                :aria-label="`${stat.published} of ${stat.total} ${stat.labelPlural.toLowerCase()} published`"
+                :aria-label="t('pluto.dashboard.overview.meter', { published: stat.published, total: stat.total, labelPlural: texts(stat.name).labelPluralLower })"
                 role="meter"
                 aria-valuemin="0"
                 class="bg-accented flex h-1.5 overflow-hidden rounded-full"
@@ -89,10 +90,10 @@ function thisWeek(stat: PlutoContentStat): number | undefined {
               </div>
 
               <p class="text-muted text-sm">
-                <span class="text-highlighted font-medium tabular-nums">{{ number.format(stat.published) }}</span>
-                published ·
-                <span class="tabular-nums">{{ number.format(stat.drafts ?? 0) }}</span>
-                {{ stat.drafts === 1 ? 'draft' : 'drafts' }}
+                <span class="text-highlighted font-medium tabular-nums">{{ n(stat.published) }}</span>
+                {{ t('pluto.dashboard.overview.published', stat.published) }} ·
+                <span class="tabular-nums">{{ n(stat.drafts ?? 0) }}</span>
+                {{ t('pluto.dashboard.overview.drafts', stat.drafts ?? 0) }}
               </p>
             </template>
           </div>

package/app/components/Pluto/Dashboard/PlutoDashboardQuickActions.vue

@@ -3,13 +3,14 @@
 // the two never disagree: every "New <label>" command the user can run, and
 // a few admin destinations.
 const groups = usePlutoCommandPalette()
+const { t } = usePlutoI18n()
 
 const create = computed(() => groups.value.find((group) => group.id === 'pluto-create')?.items ?? [])
 
 const goTo = computed(() =>
   (groups.value.find((group) => group.id === 'pluto-go-to')?.items ?? [])
     // Home is the page this widget is on.
-    .filter((item) => item.label !== 'Home')
+    .filter((item) => item.label !== t('pluto.nav.home'))
     .slice(0, 4)
 )
 
@@ -23,12 +24,12 @@ function run(item: {
 <template>
   <UCard class="h-full">
     <template #header>
-      <h3 class="text-highlighted font-semibold">Quick actions</h3>
+      <h3 class="text-highlighted font-semibold">{{ t('pluto.dashboard.quickActions.title') }}</h3>
       <p class="text-muted text-sm">
-        Press
+        {{ t('pluto.dashboard.quickActions.pressBefore') }}
         <UKbd value="meta" size="sm" />
         <UKbd value="k" size="sm" />
-        to search everything.
+        {{ t('pluto.dashboard.quickActions.pressAfter') }}
       </p>
     </template>
 
@@ -49,7 +50,7 @@ function run(item: {
       </div>
 
       <div v-if="goTo.length" class="flex flex-col gap-1">
-        <p class="text-dimmed text-xs font-medium tracking-wide uppercase">Go to</p>
+        <p class="text-dimmed text-xs font-medium tracking-wide uppercase">{{ t('pluto.palette.goTo') }}</p>
         <UButton
           v-for="item in goTo"
           :key="item.label"

package/app/components/Pluto/Navbar/PlutoNavbarAdmin.vue

@@ -3,11 +3,14 @@
 <template>
   <!--
     `data-pluto-admin-scope` keeps the admin theme on this bar when it shows
-    on the public site for a logged-in admin. See admin-theme.css.
+    on the public site for a logged-in admin. The bar is near black in both
+    color modes, so `data-pluto-admin-dark` gives it the dark tokens.
+    See admin-theme.css.
   -->
   <nav
     class="text-default fixed inset-0 z-50 h-(--ui-header-height) shrink-0 border-b border-default bg-(--pluto-admin-navbar)"
     data-pluto-admin-scope
+    data-pluto-admin-dark
   >
     <slot />
   </nav>

package/app/components/Pluto/PlutoDashboardWidgets.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { items } = usePlutoDashboardWidgets()
+const { t } = usePlutoI18n()
 </script>
 
 <template>
@@ -15,7 +16,7 @@ const { items } = usePlutoDashboardWidgets()
 
   <UCard v-else>
     <p class="text-muted text-sm">
-      No dashboard widgets are registered yet. A layer can add one with
+      {{ t('pluto.dashboard.noWidgets') }}
       <code>definePlutoExtension</code>.
     </p>
   </UCard>

package/app/components/Pluto/PlutoRoot.vue

@@ -1,10 +1,27 @@
 <script setup lang="ts">
 const { component: navbar } = usePlutoNavbarShell()
+
+// One Nuxt UI locale per page: the admin's on /admin routes, the site's on the
+// rest. The admin navbar on a public page keeps the site locale for Nuxt UI
+// text, but its own labels use the admin locale through usePlutoI18n().
+const route = useRoute()
+const admin = usePlutoI18n()
+const site = usePlutoSiteI18n()
+const isAdmin = computed(() => route.path === '/admin' || route.path.startsWith('/admin/'))
+const active = computed(() => (isAdmin.value ? admin : site))
+const uiLocale = computed(() => active.value.uiLocale.value)
+
+useHead({
+  htmlAttrs: {
+    lang: computed(() => active.value.locale.value),
+    dir: computed(() => uiLocale.value?.dir ?? 'ltr'),
+  },
+})
 </script>
 
 <template>
   <div class="flex min-h-0 min-w-0 w-full grow flex-col">
-    <UApp class="flex min-h-0 min-w-0 w-full grow flex-col">
+    <UApp :locale="uiLocale" class="flex min-h-0 min-w-0 w-full grow flex-col">
       <NuxtRouteAnnouncer />
       <NuxtLoadingIndicator />
 

package/app/components/Pluto/Settings/PlutoSettingsLanguage.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { getLanguageName } from '../../../composables/internal/i18n-core'
+
+// The select cannot hold null, so Automatic uses this value. It is not a
+// valid locale code, so it never clashes with one.
+const AUTOMATIC = '__automatic__'
+
+const { t, locales, preference, setLocale } = usePlutoI18n()
+const toast = useToast()
+
+const items = computed(() => [
+  { label: t('pluto.settings.language.automatic'), value: AUTOMATIC },
+  // Each language is named in its own language, so a user finds it.
+  ...locales.value.map((code) => ({ label: getLanguageName(code), value: code })),
+])
+
+const selected = computed(() => preference.value ?? AUTOMATIC)
+
+async function onChange(value: string) {
+  try {
+    await setLocale(value === AUTOMATIC ? null : value)
+    toast.add({ title: t('pluto.settings.language.saved'), color: 'success' })
+  } catch (error) {
+    // The switch stays on this device. Only the save failed.
+    toast.add({
+      title: t('pluto.settings.language.saveFailed'),
+      description: t('pluto.settings.language.saveFailedDescription', {
+        reason: error instanceof Error ? error.message : String(error),
+      }),
+      color: 'error',
+    })
+  }
+}
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="font-semibold">{{ t('pluto.settings.language.cardTitle') }}</h2>
+    </template>
+
+    <UFormField :label="t('pluto.settings.language.label')" :description="t('pluto.settings.language.description')">
+      <USelect
+        :model-value="selected"
+        :items="items"
+        class="w-full sm:w-64"
+        @update:model-value="onChange"
+      />
+    </UFormField>
+  </UCard>
+</template>