More things

frontend/app/components/ArticlePane.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
-/* One page of the open book. Its left edge is a spine — the title, set
-   vertically, with the × that closes the page — and the article itself
-   scrolls on its own inside the page. A newer page slides over this one and
-   leaves only the spine showing, the way a stack of read pages does; click
-   anywhere on the page — or its spine — to turn back to it.
+/* One page of the open book: one article, in whichever language it is turned
+   to. Its left edge is a spine — the title, set vertically, with the × that
+   closes the page — and the article itself scrolls on its own inside the page.
+   A newer page slides over this one and leaves only the spine showing, the way
+   a stack of read pages does; click anywhere on the page — or its spine — to
+   turn back to it. Turning the article to another language changes the text on
+   this page and nothing else: it is the same page of the book, read again.
 
    Everything but the spine of a page that isn't in view is `inert`: it can
    still be seen while you slide the stack sideways, but it doesn't take
    focus or clicks — the pane's own click handler catches those instead, so
    one click turns to the page before its links do anything. */
 const props = defineProps<{
+  /** the article this page holds — its canonical slug */
+  identity: string
+  /** the version in view, as the library files it */
   slug: string
   index: number
   active: boolean
@@ -32,12 +37,20 @@ const language = computed(() => articleLanguage(article.value ?? {}))
 const languageLabel = computed(() => languageName(language.value))
 /* every language this article exists in, the one in view included */
 const versions = computed(() => article.value?.versions ?? [])
-/* the article behind this document, and the slug its editor answers to:
-   the identity when the canonical version is still around, this document's
-   own slug when only translations of it remain */
-const identity = computed(() => identityOf(article.value ?? { slug: props.slug }))
+/* the slug the editor answers to: the identity when the canonical version is
+   still around, this document's own slug when only translations of it remain */
 const editorSlug = computed(() =>
-  versions.value.some((v) => v.slug === identity.value) ? identity.value : props.slug
+  versions.value.some((v) => v.slug === props.identity) ? props.identity : props.slug
+)
+
+/* turned to another language, the page begins again at the top of the text
+   it now holds — the article is the same, its words are not */
+const scrollEl = ref<HTMLElement | null>(null)
+watch(
+  () => props.slug,
+  (to, from) => {
+    if (from) scrollEl.value?.scrollTo({ top: 0 })
+  }
 )
 
 const updated = computed(() => {
@@ -61,7 +74,7 @@ function topicLabel(tag: string) {
   <section
     class="book-pane"
     :class="{ active }"
-    :data-slug="slug"
+    :data-tab="identity"
     :data-index="index"
     :style="{ '--i': index }"
     :aria-label="t('pane.aria', { title })"
@@ -91,7 +104,7 @@ function topicLabel(tag: string) {
     </div>
 
     <div class="pane-body" :inert="active ? null : ''">
-      <div class="pane-scroll">
+      <div ref="scrollEl" class="pane-scroll">
         <div v-if="failed && !article" class="empty">
           <div class="glyph">!</div>
           <h3>{{ t('pane.readFailTitle') }}</h3>