First commit

frontend/app/pages/new.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { ArticleMeta } from '~/components/ArticleCard.vue'
+
+definePageMeta({ transition: { name: 'page', mode: 'out-in' } })
+
+const api = `${useRuntimeConfig().public.apiBase}/api`
+const route = useRoute()
+const { t } = useI18n()
+const { th } = useAppLocale()
+
+/* ?translate=<slug> — start the editor from an existing article instead of
+   from scratch: the text opens ready to rewrite, and the save publishes a new
+   language version of that same article. */
+const translateSlug = computed(() => String(route.query.translate ?? '').trim())
+
+const { data: original, status } = await useFetch<ArticleMeta & { content?: string }>(
+  () => `${api}/articles/slug/${encodeURIComponent(translateSlug.value)}`,
+  { enabled: computed(() => Boolean(translateSlug.value)), default: null }
+)
+
+const takenLanguages = computed(() => (original.value?.versions ?? []).map((v) => v.language))
+
+useSeoMeta({
+  title: () => (original.value ? t('editor.metaTranslate', { title: original.value!.title }) : t('editor.newTitle')),
+})
+</script>
+
+<template>
+  <!-- the editor itself only shows with an account behind it (AuthGate) -->
+  <AuthGate :heading="t('editor.gateStart')">
+    <ArticleForm
+      v-if="original"
+      mode="create"
+      :translate-from="original"
+      :taken-languages="takenLanguages"
+      :key="`translate-${original._id}`"
+    />
+
+    <template v-else-if="translateSlug">
+      <div v-if="status === 'pending'" style="padding-top: 48px">
+        <div class="skeleton" style="height: 40px; width: 40%; margin-bottom: 14px; border-radius: 8px" />
+        <div class="skeleton" style="height: 420px" />
+      </div>
+      <div v-else class="empty" style="padding-top: 96px">
+        <div class="glyph">∄</div>
+        <h3>{{ t('editor.nothingToTranslate') }}</h3>
+        <p v-html="th('editor.noArticleAt', { path: `/wiki/${translateSlug}` })"></p>
+        <NuxtLink to="/" class="btn btn-primary">{{ t('editor.backToSearch') }}</NuxtLink>
+      </div>
+    </template>
+
+    <ArticleForm v-else mode="create" />
+  </AuthGate>
+</template>