@open-commune/web 0.1.3

package/composables/core/domains/use-definitions.ts

@@ -0,0 +1,57 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { buildDataSchema, type FieldDefinition } from '@open-commune/core/collections/utils'
+import { computed, unref, type MaybeRef } from 'vue'
+
+/**
+ * Collection-definition domain composable — the only data surface pages use.
+ * Server state lives in the query cache; writes invalidate the
+ * ['definitions'] prefix.
+ */
+export default function useDefinitions() {
+  const trpc = useTrpc()
+  const queryClient = useQueryClient()
+  const invalidate = () => queryClient.invalidateQueries({ queryKey: ['definitions'] })
+
+  const list = () =>
+    useQuery({
+      queryKey: ['definitions'],
+      queryFn: () => trpc.collections.list.query(),
+    })
+
+  const get = (idOrSlug: MaybeRef<string>) =>
+    useQuery({
+      queryKey: computed(() => ['definitions', unref(idOrSlug)]),
+      queryFn: () => trpc.collections.get.query({ idOrSlug: unref(idOrSlug) }),
+    })
+
+  const create = () =>
+    useMutation({
+      mutationFn: (input: Record<string, unknown>) => trpc.collections.create.mutate(input),
+      onSuccess: invalidate,
+    })
+
+  const update = () =>
+    useMutation({
+      mutationFn: ({ id, data }: { id: string; data: Record<string, unknown> }) =>
+        trpc.collections.update.mutate({ id, data }),
+      onSuccess: invalidate,
+    })
+
+  const remove = () =>
+    useMutation({
+      mutationFn: (id: string) => trpc.collections.remove.mutate({ id }),
+      onSuccess: invalidate,
+    })
+
+  /**
+   * Zod schema of an entry's data, generated from the definition — exactly
+   * the rule the server applies. Pass as-is to a UForm `:schema`.
+   */
+  const dataSchema = (fields: MaybeRef<FieldDefinition[] | undefined>) =>
+    computed(() => {
+      const resolved = unref(fields)
+      return resolved?.length ? buildDataSchema(resolved) : undefined
+    })
+
+  return { list, get, create, update, remove, dataSchema, invalidate }
+}

package/composables/core/domains/use-entries.ts

@@ -0,0 +1,62 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, unref, type MaybeRef } from 'vue'
+
+/**
+ * Entries domain composable. Keys: ['entries', collectionId] for lists,
+ * ['entries', 'byId', id] for one entry; a write invalidates its
+ * collection's prefix so every list refreshes without hand-kept keys.
+ * Rich content travels as ProseMirror OBJECTS end to end.
+ */
+export default function useEntries() {
+  const trpc = useTrpc()
+  const queryClient = useQueryClient()
+
+  const invalidateCollection = (collectionId: string) => {
+    queryClient.invalidateQueries({ queryKey: ['entries', collectionId] })
+    queryClient.invalidateQueries({ queryKey: ['entries', 'byId'] })
+  }
+
+  const list = (
+    collectionId: MaybeRef<string>,
+    options: MaybeRef<{ skip?: number; limit?: number }> = {},
+  ) =>
+    useQuery({
+      queryKey: computed(() => ['entries', unref(collectionId), unref(options)]),
+      queryFn: () =>
+        trpc.collections.entries.list.query({
+          collectionId: unref(collectionId),
+          ...unref(options),
+        }),
+      enabled: computed(() => Boolean(unref(collectionId))),
+    })
+
+  const get = (id: MaybeRef<string>) =>
+    useQuery({
+      queryKey: computed(() => ['entries', 'byId', unref(id)]),
+      queryFn: () => trpc.collections.entries.get.query({ id: unref(id) }),
+      enabled: computed(() => Boolean(unref(id))),
+    })
+
+  const create = () =>
+    useMutation({
+      mutationFn: (input: { collectionId: string; data: Record<string, unknown> }) =>
+        trpc.collections.entries.create.mutate(input),
+      onSuccess: (_result, { collectionId }) => invalidateCollection(collectionId),
+    })
+
+  const update = () =>
+    useMutation({
+      mutationFn: (input: { id: string; collectionId: string; data: Record<string, unknown> }) =>
+        trpc.collections.entries.update.mutate({ id: input.id, data: input.data }),
+      onSuccess: (_result, { collectionId }) => invalidateCollection(collectionId),
+    })
+
+  const remove = () =>
+    useMutation({
+      mutationFn: (input: { id: string; collectionId: string }) =>
+        trpc.collections.entries.remove.mutate({ id: input.id }),
+      onSuccess: (_result, { collectionId }) => invalidateCollection(collectionId),
+    })
+
+  return { list, get, create, update, remove, invalidateCollection }
+}

package/composables/core/domains/use-media.ts

@@ -0,0 +1,82 @@
+import type { CommunEditorMedia } from '@open-commune/editor'
+
+/**
+ * Media domain composable: tRPC calls plus the direct-to-S3 upload step.
+ *
+ * Resolution is shared app-wide (module cache) and bounded: a rich document
+ * resolves every media on mount, and hundreds of concurrent requests freeze
+ * the page. Failures are not cached — they retry on next mount.
+ */
+
+const FETCH_CONCURRENCY = 6
+
+const mediaCache = new Map<string, Promise<{ src?: string; title?: string }>>()
+let inFlight = 0
+const waiters: Array<() => void> = []
+
+async function withSlot<T>(task: () => Promise<T>): Promise<T> {
+  while (inFlight >= FETCH_CONCURRENCY) {
+    await new Promise<void>((resolve) => waiters.push(resolve))
+  }
+  inFlight += 1
+  try {
+    return await task()
+  } finally {
+    inFlight -= 1
+    waiters.shift()?.()
+  }
+}
+
+export default function useMedia() {
+  const trpc = useTrpc()
+
+  /** Presigned browser PUT. The Content-Type must match the presign. */
+  const uploadToS3 = async (url: string, file: File) => {
+    await $fetch.raw(url, {
+      method: 'PUT',
+      body: file,
+      headers: { 'Content-Type': file.type },
+    })
+  }
+
+  /**
+   * Full upload flow. The node id is the FINAL media id returned by
+   * finalize — the presign key is only a transient identifier.
+   */
+  const upload = async (file: File) => {
+    const filename = file.name || 'fichier'
+    const { key, url } = await trpc.media.requestUpload.mutate({
+      filename,
+      mime: file.type,
+    })
+    await uploadToS3(url, file)
+    const media = await trpc.media.finalize.mutate({ key, filename, mime: file.type })
+    const resolved = await trpc.media.get.query({ id: media.id })
+    return {
+      id: resolved.id,
+      src: resolved.objects?.original,
+      title: resolved.filename ?? filename,
+    }
+  }
+
+  const resolve = async ({ id }: { id: string }) => {
+    if (!mediaCache.has(id)) {
+      mediaCache.set(
+        id,
+        withSlot(async () => {
+          const media = await trpc.media.get.query({ id })
+          return { src: media?.objects?.original, title: media?.filename }
+        }).catch((error) => {
+          mediaCache.delete(id)
+          throw error
+        }),
+      )
+    }
+    return mediaCache.get(id)!
+  }
+
+  /** The upload/resolve pair in the shape the editor extensions expect. */
+  const forEditor = (): CommunEditorMedia => ({ upload, fetch: resolve })
+
+  return { upload, resolve, forEditor }
+}

package/composables/core/use-core.ts

@@ -0,0 +1,12 @@
+/**
+ * Single facade over the backend domains: pages and components call
+ * useCore().<domain>. Transport (use-trpc) and auth (use-session) remain
+ * separate concerns at the composables root.
+ */
+export default function useCore() {
+  return {
+    definitions: useDefinitions(),
+    entries: useEntries(),
+    media: useMedia(),
+  }
+}

package/composables/use-ability.js

@@ -0,0 +1,38 @@
+import { defineAbility } from '@casl/ability'
+
+// Prepare abilities array
+let _abilities = defineAbility((can) => {
+  can('entrance', 'self')
+})
+
+export default () => {
+  // Prepare reusable methods
+  function resetAbilities() {
+    return _abilities?.update([])
+  }
+
+  function assignAbilities(permissions) {
+    resetAbilities()
+    _abilities = defineAbility((can) => {
+      permissions.forEach((permission) => {
+        const [action, subject] = permission.split(':')
+        can(action, subject)
+      })
+    })
+  }
+
+  function can(permission) {
+    const [action, subject, collection] = permission.split(':')
+    if (!_abilities?.can(action, subject)) {
+      return false
+    }
+    return true
+  }
+
+  return {
+    _abilities,
+    resetAbilities,
+    assignAbilities,
+    can,
+  }
+}

package/composables/use-models.js

@@ -0,0 +1,27 @@
+import Organization from '~/models/organization'
+import Collection from '~/models/collection'
+import Media from '~/models/media'
+import Record from '~/models/record'
+import Role from '~/models/role'
+import Token from '~/models/token'
+import User from '~/models/user'
+import Entrance from '~/models/entrance'
+
+// @review on pourrait pas déplacer le dossier models dans le dossier composables pour ajouter plus de clareté ? Aussi cette factory me semble un peu alambiquée, pourquoi a t on besoin de passer le model + api url dans un objet exporté par le model lui meme
+// bref, je pense que qu'il y a de l'overengineering ici aussi non ?
+
+// Export models
+export default () => {
+  const { public: { apiURL } } = useRuntimeConfig()
+
+  return {
+    Organization: new Organization.api(Organization.model, apiURL),
+    Collection: new Collection.api(Collection.model, apiURL),
+    Media: new Media.api(Media.model, apiURL),
+    Record: new Record.api(Record.model, apiURL),
+    Role: new Role.api(Role.model, apiURL),
+    Token: new Token.api(Token.model, apiURL),
+    User: new User.api(User.model, apiURL),
+    Entrance: new Entrance.api(Entrance.model, apiURL)
+  }
+}

package/composables/use-session.ts

@@ -0,0 +1,80 @@
+import { computed, ref } from 'vue'
+
+/**
+ * Bearer-token session over the tRPC auth procedures. No cookies, no
+ * credentialed requests; the guard is middleware/00.auth.global.
+ */
+
+const TOKEN_KEY = 'commun.session.token'
+
+const token = ref<string | null>(null)
+const user = ref<Record<string, unknown> | null>(null)
+
+export default function useSession() {
+  const isAuthenticated = computed(() => Boolean(token.value && user.value))
+
+  const setToken = (value: string) => {
+    token.value = value
+    localStorage.setItem(TOKEN_KEY, value)
+  }
+
+  const clear = () => {
+    token.value = null
+    user.value = null
+    localStorage.removeItem(TOKEN_KEY)
+  }
+
+  /** Reloads the user from auth.me; clears the session on a dead token. */
+  const refresh = async () => {
+    if (!token.value) return null
+    try {
+      const { user: me } = await useTrpc().auth.me.query()
+      user.value = me
+      return me
+    } catch {
+      clear()
+      return null
+    }
+  }
+
+  /**
+   * Boot restore: localStorage first, then — once, transitional — the old
+   * auth-module cookie so sessions opened before the refonte survive.
+   */
+  const restore = async () => {
+    let saved = localStorage.getItem(TOKEN_KEY)
+    if (!saved) {
+      for (const legacy of ['auth.token', 'auth:token']) {
+        const cookie = useCookie<string | null>(legacy)
+        if (cookie.value) {
+          saved = cookie.value
+          cookie.value = null
+          break
+        }
+      }
+    }
+    if (!saved) return
+    token.value = saved
+    localStorage.setItem(TOKEN_KEY, saved)
+    await refresh()
+  }
+
+  const login = async (email: string, password: string) => {
+    const result = await useTrpc().auth.login.mutate({ email, password })
+    setToken(result.token)
+    user.value = result.user
+    return result.user
+  }
+
+  /** Best-effort server-side revocation, then local clear. */
+  const logout = async () => {
+    try {
+      await useTrpc().auth.logout.mutate()
+    } catch {
+      // Dead token or unreachable API: the local clear is enough.
+    }
+    clear()
+  }
+
+  return { token, user, isAuthenticated, login, logout, setToken, clear, refresh, restore }
+}

package/composables/use-timer.js

@@ -0,0 +1,62 @@
+import { useTimestamp } from '@vueuse/core'
+
+// @review: qu'elle est l'utilité de ce truc ? Par ailleurs exporte pas déjà des utils pour la gestion des timeout justement ?  Mais il faudrait verifier si ce truc est vraiment utile
+export default (cb, interval, options) => {
+  let timer = null
+  const { pause: tPause, resume: tResume, timestamp } = useTimestamp({ ...(options || {}), controls: true })
+  const startTime = ref(null)
+
+  const remaining = computed(() => {
+    if (!startTime.value) {
+      return 0
+    }
+    return interval - (timestamp.value - startTime.value)
+  })
+
+  function set (...args) {
+    timer = setTimeout(() => {
+      timer = null
+      startTime.value = null
+      cb(...args)
+    }, remaining.value)
+  }
+
+  function clear () {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  function start () {
+    startTime.value = Date.now()
+
+    set()
+  }
+
+  function stop () {
+    clear()
+    tPause()
+  }
+
+  function pause () {
+    clear()
+    tPause()
+  }
+
+  function resume () {
+    set()
+    tResume()
+    startTime.value = (startTime.value || 0) + (Date.now() - timestamp.value)
+  }
+
+  start()
+
+  return {
+    start,
+    stop,
+    pause,
+    resume,
+    remaining
+  }
+}

package/composables/use-trpc.js

@@ -0,0 +1,17 @@
+import { createTRPCClient, httpLink } from '@trpc/client'
+
+// tRPC client for the admin plane (/api/trpc). No transformer (none server
+// side); the Authorization header re-reads the session token per request.
+export default () => {
+  const { public: { apiURL } } = useRuntimeConfig()
+  const session = useSession()
+
+  return createTRPCClient({
+    links: [
+      httpLink({
+        url: `${apiURL}/api/trpc`,
+        headers: () => (session.token.value ? { authorization: `Bearer ${session.token.value}` } : {})
+      })
+    ]
+  })
+}

package/editor/index.ts

@@ -0,0 +1,44 @@
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import {
+  communStarterKit,
+  communSchemaExtensions,
+  sanitizeDoc,
+  EMBED_SERVICES,
+  UID_TYPES,
+  type CommunEditorMedia,
+} from '@open-commune/editor'
+import CalloutView from './views/CalloutView.vue'
+import FileView from './views/FileView.vue'
+import ImageView from './views/ImageView.vue'
+import EmbedView from './views/EmbedView.vue'
+import DetailsView from './views/DetailsView.vue'
+import DetailsSummaryView from './views/DetailsSummaryView.vue'
+import DetailsContentView from './views/DetailsContentView.vue'
+import UploadView from './views/UploadView.vue'
+
+export { communStarterKit, UID_TYPES, sanitizeDoc, EMBED_SERVICES }
+export type { CommunEditorMedia }
+
+const VIEWS: Record<string, any> = {
+  callout: CalloutView,
+  file: FileView,
+  image: ImageView,
+  embed: EmbedView,
+  details: DetailsView,
+  detailsSummary: DetailsSummaryView,
+  detailsContent: DetailsContentView,
+  imageUpload: UploadView,
+}
+
+/**
+ * Browser entry: the shared extension set (@open-commune/editor) with the admin's
+ * Vue node views attached.
+ */
+export function communExtensions(media: Partial<CommunEditorMedia> = {}) {
+  return communSchemaExtensions(media).map((extension: any) => {
+    const view = VIEWS[extension.name]
+    return view
+      ? extension.extend({ addNodeView: () => VueNodeViewRenderer(view) })
+      : extension
+  })
+}

package/editor/views/CalloutView.vue

@@ -0,0 +1,22 @@
+<template>
+  <NodeViewWrapper
+    as="aside"
+    class="my-2 flex items-start gap-3 rounded-md border border-neutral-300 bg-neutral-50 p-3 dark:border-neutral-700 dark:bg-neutral-900"
+  >
+    <UIcon
+      :name="icon"
+      class="mt-0.5 size-5 shrink-0 text-neutral-500"
+    />
+    <NodeViewContent class="min-w-0 flex-1" />
+  </NodeViewWrapper>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3'
+
+const props = defineProps(nodeViewProps)
+
+// Stored icons are full Iconify names; UIcon takes them as-is.
+const icon = computed(() => props.node.attrs.icon || 'iconoir:megaphone')
+</script>

package/editor/views/DetailsContentView.vue

@@ -0,0 +1,11 @@
+<template>
+  <NodeViewWrapper as="div" data-type="detailsContent">
+    <NodeViewContent class="border-t border-neutral-100 px-4 py-3 dark:border-neutral-900" />
+  </NodeViewWrapper>
+</template>
+
+<script setup>
+import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3'
+
+defineProps(nodeViewProps)
+</script>

package/editor/views/DetailsSummaryView.vue

@@ -0,0 +1,11 @@
+<template>
+  <NodeViewWrapper as="div">
+    <NodeViewContent class="min-h-6 px-4 py-3 text-base" />
+  </NodeViewWrapper>
+</template>
+
+<script setup>
+import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3'
+
+defineProps(nodeViewProps)
+</script>

package/editor/views/DetailsView.vue

@@ -0,0 +1,72 @@
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="relative my-2 rounded-md border border-neutral-200 dark:border-neutral-800"
+    :data-open="open || undefined"
+  >
+    <button
+      type="button"
+      contenteditable="false"
+      class="absolute top-3 right-3 z-10 flex size-8 cursor-pointer items-center justify-center rounded-full bg-black text-white dark:bg-white dark:text-black"
+      :aria-expanded="open"
+      aria-label="Déplier ou replier"
+      @click="open = !open"
+    >
+      <UIcon :name="open ? 'iconoir:minus' : 'iconoir:plus'" class="size-4" />
+    </button>
+    <NodeViewContent
+      class="details-body min-w-0 pr-14"
+      :class="{ closed: !open }"
+    />
+  </NodeViewWrapper>
+</template>
+
+<script setup>
+// Open state is local editing state, never written to the document. Closed
+// by default; a freshly inserted (empty) accordion opens for writing, and a
+// collapsed one opens when the selection lands in its BODY (redirected paste,
+// programmatic insertion) — the author must see where their content went.
+// A caret in the title line alone does not open it.
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3'
+
+const props = defineProps(nodeViewProps)
+const open = ref(!props.node.textContent?.length)
+
+const containsPos = (target) => {
+  const pos = props.getPos()
+  return typeof pos === 'number' && target > pos && target < pos + props.node.nodeSize
+}
+
+const openOnSelectionInBody = () => {
+  if (open.value) return
+  const summary = props.node.firstChild
+  const pos = props.getPos()
+  if (!summary || typeof pos !== 'number') return
+  const { $head } = props.editor.state.selection
+  const bodyFrom = pos + 1 + summary.nodeSize
+  if ($head.pos > bodyFrom && $head.pos < pos + props.node.nodeSize - 1) open.value = true
+}
+
+const openOnRedirectedPaste = ({ transaction }) => {
+  if (open.value) return
+  const target = transaction.getMeta('communDetailsOpenAt')
+  if (typeof target === 'number' && containsPos(target)) open.value = true
+}
+
+onMounted(() => {
+  props.editor.on('selectionUpdate', openOnSelectionInBody)
+  props.editor.on('transaction', openOnRedirectedPaste)
+})
+onBeforeUnmount(() => {
+  props.editor.off('selectionUpdate', openOnSelectionInBody)
+  props.editor.off('transaction', openOnRedirectedPaste)
+})
+</script>
+
+<style scoped>
+/* Collapsed: only the summary stays visible. */
+.details-body.closed :deep([data-type='detailsContent']) {
+  display: none;
+}
+</style>

package/editor/views/EmbedView.vue

@@ -0,0 +1,53 @@
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="my-2 rounded-md"
+    :class="{ 'ring-2 ring-neutral-400 ring-offset-2': selected }"
+  >
+    <iframe
+      v-if="node.attrs.src"
+      :src="node.attrs.src"
+      :title="node.attrs.title || node.attrs.service || 'embed'"
+      :height="node.attrs.height || 315"
+      :frameborder="node.attrs.frameborder"
+      :allow="node.attrs.allow"
+      :allowfullscreen="node.attrs.allowfullscreen"
+      class="w-full rounded-md"
+      sandbox="allow-scripts allow-same-origin allow-presentation allow-popups allow-forms"
+    />
+    <form
+      v-else
+      contenteditable="false"
+      class="flex items-center gap-3 rounded-md border border-dashed border-neutral-300 p-4 text-neutral-400"
+      @submit.prevent="applyUrl"
+    >
+      <UIcon :name="node.attrs.icon || 'iconoir:youtube'" class="size-6 shrink-0" />
+      <UInput
+        v-model="url"
+        :placeholder="node.attrs.placeholder || 'Collez l’url de la vidéo…'"
+        class="flex-1"
+        size="sm"
+      />
+      <UButton type="submit" size="sm" color="neutral" variant="soft" :disabled="!url">
+        Ajouter
+      </UButton>
+    </form>
+  </NodeViewWrapper>
+</template>
+
+<script setup>
+// The sandbox bounds third-party content. Without a source the node shows
+// an URL form the author completes in place.
+import { computed, ref } from 'vue'
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+import { EMBED_SERVICES } from '@open-commune/editor'
+
+const props = defineProps(nodeViewProps)
+const url = ref('')
+const service = computed(() => EMBED_SERVICES[props.node.attrs.service] ?? EMBED_SERVICES.video)
+
+function applyUrl() {
+  if (!url.value) return
+  props.updateAttributes({ src: service.value.toSrc(url.value.trim()) })
+}
+</script>