@open-commune/web 0.1.3

package/nuxt.config.ts

@@ -0,0 +1,151 @@
+import { globSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// Under Bun's isolated store, the ESM build of @vue/devtools-api only exists
+// inside node_modules/.bun/@vue+devtools-api@<version>, where a plain node
+// resolution never looks. We point Vite at it explicitly when we can find it.
+//
+// Best-effort ON PURPOSE: the path assumes this app sits inside its repository.
+// It does not when the app is consumed as a remote Nuxt layer, or built from a
+// tarball — the lookup must then fail quietly rather than break the build.
+function findDevtoolsApiEsm(): string | undefined {
+  try {
+    const [found] = globSync(
+      fileURLToPath(
+        new URL(
+          '../../node_modules/.bun/@vue+devtools-api@*/node_modules/@vue/devtools-api/lib/esm/index.js',
+          import.meta.url,
+        ),
+      ),
+    );
+    return found;
+  } catch {
+    return undefined;
+  }
+}
+
+const devtoolsApiEsm = findDevtoolsApiEsm();
+
+// Resolved from THIS file, not from `~`: when this application is consumed as
+// a Nuxt layer, `~` points at the consuming app, and its own assets are not
+// found.
+const layerDir = dirname(fileURLToPath(import.meta.url));
+
+// Le worker de dev empaquette les sources du core, donc le dossier de
+// migrations Drizzle n'y est pas resolvable relativement — on l'epingle ici,
+// ou le chemin est connu. (Repris de l'ancien apps/api/nitro.config.ts.)
+process.env.COMMUN_MIGRATIONS_DIR ??= resolve(
+  fileURLToPath(new URL('.', import.meta.url)),
+  '../../packages/core/drizzle',
+);
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  ssr: false,
+  // Reprise de l'ancien apps/api/nitro.config.ts.
+  compatibilityDate: '2026-05-19',
+  app: {
+    head: {
+      link: [
+        {
+          href: 'https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css',
+          rel: 'stylesheet',
+        },
+      ],
+      charset: 'utf-8',
+      viewport: 'width=device-width, initial-scale=1',
+    },
+  },
+  runtimeConfig: {
+    // Repertoire de donnees de l'instance (surchargeable par COMMUN_DATA_DIR).
+    communDataDir: process.env.COMMUN_DATA_DIR ?? '',
+    public: {
+      // Vide par défaut (image d'instance : admin et API MÊME origine, appels
+      // relatifs `/api/trpc`) ; NUXT_ENV_API_URL reste prioritaire (dev, harness).
+      apiURL: process.env.NUXT_ENV_API_URL ?? '',
+      baseURL: process.env.NUXT_ENV_BASE_URL || 'http://localhost:3000',
+      mapBoxToken: process.env.NUXT_ENV_MAPBOX_TOKEN,
+    },
+  },
+  // Le build du site est déclenché chaque nuit à 00:30 (heure LOCALE du
+  // server).
+  nitro: {
+    experimental: { tasks: true },
+    scheduledTasks: {
+      '30 0 * * *': ['deploy'],
+    },
+  },
+  css: [join(layerDir, 'assets/css/main.css')],
+  // Scan nested composables (composables/core/domains/*).
+  imports: { dirs: [join(layerDir, 'composables/**')] },
+  // Session auth lives in use-session + middleware/00.auth (no auth module).
+  modules: ['@nuxt/ui', '@pinia/nuxt', '@pinia-orm/nuxt', '@vueuse/nuxt'],
+  vite: {
+    resolve: {
+      // Sous le layout node_modules de Bun, Vite retombe sur l'entrée CJS
+      // (« does not provide an export named setupDevtoolsPlugin ») — on
+      // force l'entrée ESM via un chemin ABSOLU (un remplacement contenant
+      // la clé de l'alias boucle à l'infini → OOM).
+      alias: {
+        ...(devtoolsApiEsm ? { '@vue/devtools-api': devtoolsApiEsm } : {}),
+      },
+      // One ProseMirror instance is mandatory (keyed plugins): bun's store
+      // gives @nuxt/ui and our direct @tiptap deps distinct copies.
+      dedupe: [
+        // Même raison, côté état : les modèles de l'admin tirent pinia-orm
+        // tardivement. (Disparaîtra avec la sortie de pinia-orm, groupe 7.)
+        'pinia',
+        'pinia-orm',
+        '@tanstack/vue-query',
+        '@trpc/client',
+        '@tiptap/core',
+        '@tiptap/pm',
+        '@tiptap/vue-3',
+        'prosemirror-state',
+        'prosemirror-model',
+        'prosemirror-view',
+        'prosemirror-transform',
+      ],
+    },
+    // Prescribed by the Nuxt UI Editor docs (ProseMirror warning): share a
+    // single pre-bundled prosemirror across @nuxt/ui and our extensions.
+    optimizeDeps: {
+      include: [
+        // @open-commune/editor est un paquet de l'ESPACE DE TRAVAIL : Vite ne
+        // pré-empaquette pas ses dépendances au démarrage, il les découvre
+        // quand l'éditeur se monte — puis ré-optimise, ce qui périme les URL
+        // que la page tient déjà (504 « Outdated Optimize Dep », import
+        // dynamique en échec, page d'erreur 500). Un rechargement réparait,
+        // mais seulement après coup : on les déclare pour que le démarrage à
+        // froid soit propre.
+        '@tiptap/core',
+        '@tiptap/pm/model',
+        '@tiptap/pm/state',
+        '@tiptap/starter-kit',
+        '@tiptap/extension-code',
+        '@tiptap/extension-details',
+        '@tiptap/extension-file-handler',
+        '@tiptap/extension-highlight',
+        '@tiptap/extension-horizontal-rule',
+        '@tiptap/extension-image',
+        '@tiptap/extension-link',
+        '@tiptap/extension-list',
+        '@tiptap/extension-text-align',
+        '@tiptap/extension-text-style',
+        '@tiptap/extension-typography',
+        '@tiptap/extension-unique-id',
+        '@nuxt/ui > prosemirror-state',
+        '@nuxt/ui > prosemirror-transform',
+        '@nuxt/ui > prosemirror-model',
+        '@nuxt/ui > prosemirror-view',
+        '@nuxt/ui > prosemirror-gapcursor',
+      ],
+    },
+    // optimizeDeps.esbuildOptions supprimé : Vite 8 optimise via Rolldown
+    // (option dépréciée, cible moderne par défaut).
+    build: {
+      target: 'esnext',
+    },
+  },
+});

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@open-commune/web",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "bun --bun nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "typecheck": "tsc --noEmit -p .nuxt/tsconfig.server.json"
+  },
+  "devDependencies": {
+    "@iconify/vue": "^5.0.1",
+    "@nuxt/kit": "^4.5.1",
+    "@nuxt/ui": "^4.3.0",
+    "@tiptap/pm": "^3.27.3",
+    "@tiptap/vue-3": "^3.27.3",
+    "@types/node": "^18",
+    "@vueuse/core": "^14.4.0",
+    "@vueuse/nuxt": "^14.4.0",
+    "nuxt": "^4.5.2",
+    "tailwindcss": "^4.3.2"
+  },
+  "dependencies": {
+    "@casl/ability": "^7.0.1",
+    "@open-commune/core": "workspace:*",
+    "@open-commune/editor": "workspace:*",
+    "@pinia-orm/nuxt": "^2.0.0",
+    "@pinia/nuxt": "^1.0.1",
+    "@tanstack/vue-query": "^5.101.4",
+    "@trpc/client": "^11.17.0",
+    "@trpc/server": "^11.17.0",
+    "axios": "^1.6.7",
+    "consola": "^3.4.2",
+    "h3": "^1.15.11",
+    "luxon": "^3.4.4",
+    "mapbox-gl": "^3.2.0",
+    "ofetch": "^1.3.3",
+    "pinia-orm": "^2.0.0",
+    "zod": "^4.4.3"
+  },
+  "description": "The Open Commune application: the admin interface and the server, on a single origin.",
+  "license": "AGPL-3.0-or-later",
+  "version": "0.1.3",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "files": [
+    "app.vue",
+    "app.config.ts",
+    "nuxt.config.ts",
+    "assets",
+    "components",
+    "composables",
+    "editor",
+    "layouts",
+    "middleware",
+    "models",
+    "pages",
+    "plugins",
+    "public",
+    "server",
+    "store"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/open-commune/open-commune.git",
+    "directory": "apps/web"
+  }
+}

package/pages/[collection]/[record]/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <!-- <alert
+      v-if="alertSort"
+      :sort="alertSort"
+      :title="ALERTS_MESSAGES[alertSort].title"
+      :description="ALERTS_MESSAGES[alertSort].description"
+    /> -->
+    <forms-layout
+      v-if="componentOptions"
+      v-bind="{ record, ...componentOptions }"
+      class="mt-4"
+    />
+  </div>
+</template>
+
+<script setup>
+// import alert from '@/components/template/content-section/Alert'
+import formsLayout from '~/components/forms/layouts/layout'
+
+definePageMeta({
+  permissions: ['read:records'],
+  preFetch: ['Record'],
+  layout: 'record'
+})
+
+// Prepare constants
+// const ALERTS_MESSAGES = {
+//   info: {
+//     title: 'Cet évènement est validé',
+//     description: 'Nos équipes ont validé cet évènemnt, il sera prochainement publié en ligne.'
+//   },
+//   warn: {
+//     title: 'Cet évènement est en attente de validation',
+//     description: 'Avant d\'être publié, cet évènement doit être validé par nos équipes.'
+//   },
+//   success: {
+//     title: 'Cet évènement est publié',
+//     description: 'Vous n\'avez plus rien à faire, vous pouvez consulter cet évènement en ligne.'
+//   }
+// }
+
+const { Collection, Record } = useModels()
+const $route = useRoute()
+
+// Prepare computed
+const isCreating = computed(() => $route.params.record === 'new')
+const collectionRecord = computed(() => Collection.repo.where('slug', $route.params.collection).first())
+const componentOptions = computed(() => {
+  const options = JSON.parse(JSON.stringify(collectionRecord.value?.editor || {}))
+  if (isCreating.value) {
+    options.componentOptions.layout.length = 1
+    options.componentOptions.layout[0].sections.length = 1
+  }
+  return options.componentOptions
+})
+const record = computed(() => {
+  // atm. we use onRetrieve directly in page, it should be better to have this
+  // handled directly in `pinia-orm` lib
+  if (!isCreating.value) {
+    return Record.onRetrieve(
+      Record.repo.where('_id', $route.params.record).first()
+    )
+  }
+  return {}
+})
+
+// const status = computed(() => {
+//   const { record: { status } } = this
+//   return status
+// }
+
+// const alertSort = computed(() => {
+//   const { status, $auth } = this
+//   switch (status) {
+//     case 'waiting':
+//       return $auth.hasScope('validate:events') || $auth.hasScope('manage:all') ? '' : 'warn'
+//     case 'ready':
+//       return $auth.hasScope('publish:events') || $auth.hasScope('manage:all') ? '' : 'info'
+//     case 'published':
+//     case 'scheduled':
+//       return 'success'
+//     case 'draft':
+//     default:
+//       return ''
+//   }
+// }
+</script>

package/pages/[collection]/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <section class="w-full">
+    <default-table
+      v-if="!$route.params.event"
+      :headers="headers"
+      :filters="filters"
+      :items="records"
+      :actions="abilities"
+      :pagination-size="limit"
+      display-search-bar
+      paginated-content
+      @fetch-more="_fetchMoreRecords"
+      @update="_updateRecord"
+      @remove="_removeRecord"
+    />
+  </section>
+</template>
+
+<script setup>
+import defaultTable from '~/components/data/lists/data-lists-table'
+
+// Prepare composable
+const { Collection, Record } = useModels()
+const $route = useRoute()
+const $router = useRouter()
+
+// Prepare page meta
+definePageMeta({
+  permissions: [`read:records`], // TODO handle collections
+  preFetch: ['Record']
+})
+
+// Prepare reactive data
+const limit = ref(25)
+
+// Prepare computed
+const collectionRecord = computed(() => Collection.repo.where('slug', $route.params.collection).first())
+const records = computed(() => Record.repo.where('relatedCollection', $route.params.collection).get().map(Record.onRetrieve))
+const headers = computed(() => collectionRecord.value.display?.headers || [])
+const filters = computed(() => [])
+const abilities = computed(() => ['update', 'remove'])
+
+// Prepare methods
+const _fetchMoreRecords = async (skip = 0) => {
+  await Record.list($route.params.collection, undefined, { skip, limit: limit.value })
+}
+
+const _updateRecord = (item) => {
+  $router.push(`${$route.path}/${item._id}`)
+}
+
+const _removeRecord = async (item) => {
+  await Record.remove(item._id, $route.params.collection)
+}
+</script>

package/pages/_lab/editor.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="mx-auto max-w-4xl space-y-6 p-8">
+    <div class="flex items-center justify-between">
+      <h1 class="text-xl font-semibold">
+        Laboratoire éditeur
+      </h1>
+      <UBadge :color="roundTripOk ? 'success' : 'error'" variant="subtle">
+        {{ roundTripOk ? 'structure conservée' : 'STRUCTURE ALTÉRÉE' }}
+      </UBadge>
+    </div>
+
+    <!-- The real production input: same menus, same handlers. -->
+    <forms-inputs-input-editor
+      label="Contenu"
+      :value="doc"
+      @change="doc = $event"
+    />
+
+    <details class="text-xs">
+      <summary class="cursor-pointer font-medium">JSON courant (sortie de l'éditeur)</summary>
+      <pre class="mt-2 overflow-x-auto rounded bg-neutral-100 p-3 dark:bg-neutral-900">{{ JSON.stringify(doc, null, 2) }}</pre>
+    </details>
+    <details class="text-xs">
+      <summary class="cursor-pointer font-medium">JSON d'origine (échantillon des bases clients)</summary>
+      <pre class="mt-2 overflow-x-auto rounded bg-neutral-100 p-3 dark:bg-neutral-900">{{ JSON.stringify(SAMPLE, null, 2) }}</pre>
+    </details>
+  </div>
+</template>
+
+<script setup>
+// Editor lab: the assembled editor against a sample shaped like real client
+// content, with a live conservation badge. Dev only.
+definePageMeta({ auth: false })
+
+if (!import.meta.dev) {
+  await navigateTo('/', { replace: true })
+}
+
+// Sample mirroring stored client structures. Any unported node must raise
+// onContentError — never a silent drop.
+const SAMPLE = {
+  type: 'doc',
+  content: [
+    {
+      type: 'heading',
+      attrs: { level: 2, textAlign: 'left', uid: 'c3d13996-0170-4b13-9a17-2b5eb84400c4' },
+      content: [{ type: 'text', text: 'Titre de section' }]
+    },
+    {
+      type: 'paragraph',
+      attrs: { textAlign: 'left', uid: '0d5b74a5-c4a5-4485-9d38-2c69e2d1c264' },
+      content: [
+        { type: 'text', text: 'Du texte ' },
+        { type: 'text', marks: [{ type: 'bold' }], text: 'gras' },
+        { type: 'text', text: ', de l’' },
+        { type: 'text', marks: [{ type: 'italic' }], text: 'italique' },
+        { type: 'text', text: ', un ' },
+        {
+          type: 'text',
+          marks: [{ type: 'link', attrs: { href: 'https://exemple.fr', target: '_blank', rel: 'noopener noreferrer nofollow', class: 'underline text-primary' } }],
+          text: 'lien'
+        },
+        { type: 'text', text: ' et une ' },
+        {
+          type: 'text',
+          marks: [{ type: 'textStyle' }],
+          text: 'portion neutre'
+        },
+        { type: 'text', text: '.' }
+      ]
+    },
+    { type: 'paragraph', attrs: { textAlign: 'left', uid: '7c9e8b1a-2f3d-4e5a-8b6c-1d2e3f4a5b6c' }, content: [{ type: 'hardBreak' }] },
+    {
+      type: 'bulletList',
+      attrs: { uid: '58e3399e-92e5-4a6a-b25a-039a4694e9e6' },
+      content: [
+        {
+          type: 'listItem',
+          attrs: { uid: 'f9dc0f8f-64f2-40bd-8827-d64ba9214d29' },
+          content: [{ type: 'paragraph', attrs: { textAlign: 'left', uid: 'a1b2c3d4-0000-4000-8000-000000000001' }, content: [{ type: 'text', text: 'Premier item' }] }]
+        }
+      ]
+    },
+    {
+      type: 'callout',
+      attrs: { icon: 'iconoir:megaphone', uid: 'a1b2c3d4-0000-4000-8000-000000000002' },
+      content: [{ type: 'text', text: 'Un encart d’information.' }]
+    },
+    {
+      type: 'file',
+      attrs: {
+        id: '64a1f2e3b4c5d6e7f8a9b0c1',
+        src: 'https://bucket.exemple.fr/medias/document.pdf',
+        title: 'document.pdf',
+        alt: null,
+        uid: 'a1b2c3d4-0000-4000-8000-000000000004'
+      }
+    },
+    {
+      type: 'image',
+      attrs: {
+        id: '64a1f2e3b4c5d6e7f8a9b0c2',
+        src: 'https://bucket.exemple.fr/medias/photo.jpg',
+        title: 'photo.jpg',
+        alt: 'Une photo',
+        uid: 'a1b2c3d4-0000-4000-8000-000000000005'
+      }
+    },
+    {
+      type: 'embed',
+      attrs: {
+        service: 'youtube',
+        src: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
+        title: null,
+        icon: null,
+        placeholder: null,
+        allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
+        allowfullscreen: true,
+        frameborder: '0',
+        height: 315
+      }
+    },
+    {
+      type: 'details',
+      attrs: { toggle: true },
+      content: [
+        { type: 'detailsSummary', content: [{ type: 'text', text: 'Titre de l’accordéon' }] },
+        {
+          type: 'detailsContent',
+          content: [{ type: 'paragraph', attrs: { textAlign: 'left', uid: 'a1b2c3d4-0000-4000-8000-000000000006' }, content: [{ type: 'text', text: 'Contenu replié.' }] }]
+        }
+      ]
+    },
+    { type: 'horizontalRule' },
+    {
+      type: 'blockquote',
+      attrs: { uid: 'a1b2c3d4-0000-4000-8000-000000000007' },
+      content: [{ type: 'paragraph', attrs: { textAlign: 'left', uid: 'a1b2c3d4-0000-4000-8000-000000000008' }, content: [{ type: 'text', text: 'Une citation.' }] }]
+    }
+  ]
+}
+
+const doc = ref(structuredClone(SAMPLE))
+
+// Green: load → output altered nothing. Red is a regression.
+const roundTripOk = computed(
+  () => JSON.stringify(doc.value) === JSON.stringify(SAMPLE)
+)
+</script>

package/pages/auth/callback.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="mt-12 text-center text-sm text-gray-500">
+    Connexion en cours…
+  </div>
+</template>
+
+<script setup>
+// Callback for externally issued sessions (OIDC and the like). The
+// token arrives in the URL FRAGMENT so it never reaches logs or headers,
+// and grants nothing extra: it was issued by this very instance. Absent or
+// invalid, back to login without a technical error.
+definePageMeta({ auth: false })
+
+const session = useSession()
+
+onMounted(async () => {
+  const token = new URLSearchParams(window.location.hash.slice(1)).get('token')
+  window.history.replaceState(null, '', '/auth/callback')
+  if (!token) {
+    return navigateTo('/', { replace: true })
+  }
+
+  session.setToken(token)
+  const user = await session.refresh()
+  if (user) {
+    await navigateTo('/overview', { replace: true })
+  } else {
+    await navigateTo('/', { replace: true })
+  }
+})
+</script>

package/pages/index/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="mt-12">
+    <form class="space-y-6" form @submit.prevent="_signIn">
+      <input-text
+        place-holder="Adresse email"
+        name="email"
+        type="email"
+        autocomplete="email"
+        :value="emailAddress"
+        :read-only="isLoading"
+        required
+        @change="emailAddress = $event"
+      />
+      <input-text
+        place-holder="Mot de passe"
+        name="password"
+        type="password"
+        autocomplete="current-password"
+        :value="password"
+        :read-only="isLoading"
+        required
+        @change="password = $event"
+      />
+      <button-primary type="submit" label="S'identifier" :loading="isLoading" class="w-full" />
+    </form>
+    <!-- Le lien de réinitialisation était commenté depuis le legacy, qui
+         n'envoyait AUCUN email : le seul recours était le formulaire de
+         support. L'événement `passwordResetRequested` étant désormais relayé
+         vers un fournisseur d'emails, le parcours autonome reprend sa place —
+         et Fillout redevient ce qu'il doit être, un second recours. -->
+    <div class="flex mt-8 flex-col items-center justify-center">
+      <button-tertiary
+        label="Vous avez oublié votre mot de passe ?"
+        @click="$router.push({ path: '/password/recover' })"
+      />
+      <button-tertiary class="h-10" label="Je n'arrive pas à m'identifier" @click="_openForm()" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useNotificationsStore } from '~/store/layout/notifications'
+import InputText from '~/components/forms/inputs/input-text'
+import ButtonPrimary from '~/components/elements/buttons/primary'
+import ButtonTertiary from '~/components/elements/buttons/tertiary'
+
+// Prepare composables
+const notificationsStore = useNotificationsStore()
+const session = useSession()
+
+// Prepare reactive data
+const isLoading = ref(false)
+const emailAddress = ref('')
+const password = ref('')
+
+// Prepare emitters
+defineEmits(['enter'])
+
+// Prepare methods
+const _openForm = () => {
+  // https://forms.fillout.com/t/vjkLG9ZXsLus
+  const formUrl = 'https://forms.fillout.com/t/vjkLG9ZXsLus'
+  const formWindow = window.open(formUrl, '_blank')
+  if (formWindow) {
+    // Browser has allowed it to be opened
+    formWindow.focus()
+  } else {
+    // Browser has blocked it
+    alert('Please allow popups for this website')
+  }
+}
+const _signIn = async () => {
+  isLoading.value = true
+  try {
+    await session.login(emailAddress.value, password.value)
+    notificationsStore.add({ icon: 'iconoir:password-pass', type: 'success', title: 'Authentification réussie.' })
+    await navigateTo('/overview')
+  } catch (err) {
+    console.log(err)
+    notificationsStore.add({ icon: 'iconoir:password-error', type: 'warn', title: 'Identifiants incorrects.' })
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>