@tekkare/romulus 0.1.231 → 0.1.233

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.230",
+  "version": "0.1.232",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/CopyCode.vue

@@ -0,0 +1,79 @@
+<!--
+  RmCopyCode - un identifiant (RPPS, FINESS, NCT, EUCT, PMID...) qu'on copie
+  d'un clic.
+
+  Ces codes sont ce que l'utilisateur recopie dans un autre outil : les
+  laisser en pastille grise au bout de la ligne de tags les noyait parmi les
+  statuts. Le composant les sort avec leur libelle (« RPPS · 1000... ») pour
+  qu'on sache quel code on lit sans connaitre son format.
+
+  Le clic ne remonte pas : posee dans une carte cliquable (RmResultCard), la
+  copie ouvrirait la fiche. Retour visuel obligatoire : coche verte deux
+  secondes, annoncee aux lecteurs d'ecran, sinon l'utilisateur reclique. Pas
+  de coche si la copie a echoue, elle mentirait.
+
+  Pas d'equivalent Auriga : nouveau composant.
+-->
+<script setup lang="ts">
+import { computed, ref, onUnmounted } from 'vue'
+import { rmCopyText } from '../utils/clipboard'
+
+const props = withDefaults(defineProps<{
+  /** Le code copie, tel quel. */
+  value: string
+  /** Nom du code (« RPPS », « FINESS »). Affiche, jamais copie. */
+  label?: string
+  lang?: 'fr' | 'en'
+}>(), {
+  label: '',
+  lang: 'fr',
+})
+
+const emit = defineEmits<{ copy: [value: string] }>()
+
+const WORDS = {
+  fr: { copy: 'Copier', copied: 'Copié' },
+  en: { copy: 'Copy', copied: 'Copied' },
+}
+const t = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const copied = ref(false)
+let timer: ReturnType<typeof setTimeout> | undefined
+
+async function copy() {
+  if (!(await rmCopyText(props.value))) return
+  copied.value = true
+  clearTimeout(timer)
+  timer = setTimeout(() => (copied.value = false), 2000)
+  emit('copy', props.value)
+}
+
+onUnmounted(() => clearTimeout(timer))
+
+const name = computed(() => [props.label, props.value].filter(Boolean).join(' '))
+</script>
+
+<template>
+  <button
+    type="button"
+    class="rm-copy-code"
+    :class="{ 'rm-copy-code--copied': copied }"
+    :aria-label="`${copied ? t.copied : t.copy} ${name}`"
+    :title="copied ? t.copied : t.copy"
+    @click.stop="copy"
+  >
+    <span v-if="label" class="rm-copy-code__label">{{ label }}</span>
+    <span class="rm-copy-code__value">{{ value }}</span>
+    <RmIcon
+      class="rm-copy-code__icon"
+      :name="copied ? 'Check' : 'Copy'"
+      :size="14"
+      :weight="copied ? 'bold' : 'regular'"
+    />
+    <span class="rm-copy-code__live" aria-live="polite">{{ copied ? t.copied : '' }}</span>
+  </button>
+</template>
+
+<style scoped>
+.rm-copy-code{align-items:center;background:var(--bg-surface-2);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:var(--font-13);gap:var(--space-8);line-height:1.4;max-width:100%;padding:var(--space-2) var(--space-8);transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.rm-copy-code:hover{background:var(--bg-hover);border-color:var(--color-violet-pale)}.rm-copy-code:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-copy-code__label{color:var(--text-muted);font-size:var(--font-11);font-weight:var(--weight-bold);letter-spacing:.08em;text-transform:uppercase}.rm-copy-code__value{font-family:Courier New,monospace;font-weight:var(--weight-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-copy-code__icon{color:var(--text-muted);flex-shrink:0}.rm-copy-code--copied,.rm-copy-code--copied:hover{background:var(--color-success-bg);border-color:var(--color-success)}.rm-copy-code--copied .rm-copy-code__icon{color:var(--color-success)}.rm-copy-code__live{clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
+</style>

package/dist/runtime/components/ProjectAddButton.vue

@@ -0,0 +1,226 @@
+<!--
+  RmProjectAddButton - le bouton « Projet » d'une carte ou d'un en-tete.
+
+  Il range l'element affiche dans le projet actif, ou l'en retire. Sans projet
+  actif, le premier clic ouvre le choix du projet : choisir est rare, ranger
+  l'est beaucoup moins, donc la question ne se pose qu'une fois (l'app garde
+  le projet actif d'un ecran a l'autre).
+
+  En selection multiple, il n'envoie rien : il coche, et c'est le panneau qui
+  envoie la pile. Le meme bouton porte les deux gestes, parce que c'est le
+  meme geste pour le lecteur.
+
+  Le composant ne connait ni l'API ni le projet actif : l'app lui dit l'etat
+  (`inProject`, `needsProject`, `selecting`...) et recoit des intentions
+  (`toggle`, `choose`, `create`, `unarchive`). `@click.stop` partout : une
+  carte entiere cliquable ouvrirait la fiche au lieu de ranger.
+
+  Une fiche deja retiree de ce projet y est archivee, et l'API refuse de la
+  remettre sans qu'on le demande : l'app passe `archived` a vrai, la question
+  se pose dans une modale centree, qui arrete le geste.
+-->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { rmProjectSummary, type RmProject } from '../utils/projects'
+
+const props = withDefaults(
+  defineProps<{
+    /** Tous les documents de la carte sont dans le projet actif. */
+    inProject?: boolean
+    /** Aucun projet actif : le clic ouvre le choix. */
+    needsProject?: boolean
+    /** Selection multiple en cours : le clic coche. */
+    selecting?: boolean
+    selected?: boolean
+    /** Icone seule, pour une ligne de tableau ou une carte dense. */
+    compact?: boolean
+    loading?: boolean
+    /** Raison du dernier echec, en bulle. */
+    error?: string
+    /** Projets proposes au choix. */
+    projects?: RmProject[]
+    projectsLoading?: boolean
+    projectsFailed?: boolean
+    creating?: boolean
+    /** La fiche est archivee dans ce projet (v-model:archived). */
+    archived?: boolean
+    lang?: 'fr' | 'en'
+  }>(),
+  {
+    inProject: false,
+    needsProject: false,
+    selecting: false,
+    selected: false,
+    compact: false,
+    loading: false,
+    error: '',
+    projects: () => [],
+    projectsLoading: false,
+    projectsFailed: false,
+    creating: false,
+    archived: false,
+    lang: 'fr',
+  },
+)
+
+const emit = defineEmits<{
+  /** Ajouter ou retirer, selon `inProject`. */
+  'toggle': []
+  /** Cocher ou decocher, en selection. */
+  'select': []
+  /** Le choix s'ouvre : l'app charge la liste des projets. */
+  'pick': []
+  /** Projet choisi : il devient l'actif et recoit l'element. */
+  'choose': [projectId: string]
+  /** Nouveau projet nomme : a creer, rendre actif et remplir. */
+  'create': [title: string]
+  'unarchive': []
+  'update:archived': [value: boolean]
+}>()
+
+const WORDS = {
+  fr: {
+    project: 'Projet', inProject: 'Dans le projet', add: 'Ajouter au projet', remove: 'Retirer du projet',
+    select: 'Sélectionner', selected: 'Sélectionné', addSel: 'Ajouter à la sélection', removeSel: 'Retirer de la sélection',
+    choose: 'Choisir un projet', addTo: 'Ajouter à un projet', loading: 'Chargement...',
+    failed: 'Les projets ne sont pas accessibles pour le moment.',
+    none: 'Aucun projet pour le moment. Nommez le premier ci-dessous.',
+    newName: 'Nom du nouveau projet', create: 'Créer',
+    archived: 'Fiche archivée', archivedText: 'Cette fiche a été retirée du projet auparavant. La remettre ?',
+    cancel: 'Annuler', unarchive: 'Désarchiver',
+  },
+  en: {
+    project: 'Project', inProject: 'In project', add: 'Add to project', remove: 'Remove from project',
+    select: 'Select', selected: 'Selected', addSel: 'Add to selection', removeSel: 'Remove from selection',
+    choose: 'Choose a project', addTo: 'Add to a project', loading: 'Loading...',
+    failed: 'Projects are unavailable right now.',
+    none: 'No project yet. Name the first one below.',
+    newName: 'New project name', create: 'Create',
+    archived: 'Archived record', archivedText: 'This record was removed from the project earlier. Bring it back?',
+    cancel: 'Cancel', unarchive: 'Unarchive',
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const root = ref<HTMLElement | null>(null)
+const picking = ref(false)
+const draft = ref('')
+
+/** Le bouton se distingue des qu'il dit « c'est deja pris en compte ». */
+const highlighted = computed(() => (props.selecting ? props.selected : props.inProject))
+
+const icon = computed(() => {
+  if (props.selecting) return props.selected ? 'CheckSquare' : 'Square'
+  return props.inProject ? 'FolderSimpleMinus' : 'FolderSimplePlus'
+})
+
+const ariaLabel = computed(() => {
+  if (props.selecting) return props.selected ? T.value.removeSel : T.value.addSel
+  return props.inProject ? T.value.remove : T.value.add
+})
+
+const label = computed(() => {
+  if (props.compact) return ''
+  if (props.selecting) return props.selected ? T.value.selected : T.value.select
+  return props.inProject ? T.value.inProject : T.value.project
+})
+
+const archivedOpen = computed({
+  get: () => props.archived,
+  set: (value: boolean) => emit('update:archived', value),
+})
+
+function onClick() {
+  if (props.loading) return
+  if (props.selecting) return emit('select')
+  if (props.needsProject) {
+    picking.value = true
+    emit('pick')
+    return
+  }
+  emit('toggle')
+}
+
+function choose(id: string) {
+  picking.value = false
+  emit('choose', id)
+}
+
+function create() {
+  const title = draft.value.trim()
+  if (!title || props.creating) return
+  emit('create', title)
+  draft.value = ''
+  picking.value = false
+}
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="rm-project-add"
+    :class="{ 'is-in': highlighted, 'is-compact': compact }"
+    @click.stop
+  >
+    <RmButton
+      :variant="highlighted ? 'secondary' : 'tertiary'"
+      size="md"
+      :prefix-icon="icon"
+      :icon-only="compact"
+      :aria-label="ariaLabel"
+      :aria-pressed="highlighted"
+      :loading="loading"
+      :title="error || ariaLabel"
+      @click="onClick"
+    >
+      {{ label }}
+    </RmButton>
+
+    <RmModal v-model="archivedOpen" size="sm" :label="T.archived">
+      <template #header>
+        <p class="rm-project-add__title">{{ T.archived }}</p>
+      </template>
+      <p class="rm-project-add__text">{{ T.archivedText }}</p>
+      <template #footer>
+        <RmButton variant="tertiary" @click="archivedOpen = false">{{ T.cancel }}</RmButton>
+        <RmButton variant="primary" :loading="loading" @click="emit('unarchive')">{{ T.unarchive }}</RmButton>
+      </template>
+    </RmModal>
+
+    <!-- Un panneau accroche au bouton plutot qu'une modale : designer le
+         projet se fait dans la foulee du clic, ca n'arrete pas la page. -->
+    <RmPopover v-model="picking" :anchor="root" :label="T.choose" width="280px">
+      <p class="rm-project-add__title">{{ T.addTo }}</p>
+      <div class="rm-project-add__list">
+        <p v-if="projectsLoading" class="rm-project-add__muted">{{ T.loading }}</p>
+        <p v-else-if="projectsFailed" class="rm-project-add__muted">{{ T.failed }}</p>
+        <template v-else>
+          <button
+            v-for="project in projects"
+            :key="project.id"
+            type="button"
+            class="rm-project-add__row"
+            @click="choose(project.id)"
+          >
+            <RmIcon name="FolderSimple" :size="16" />
+            <span class="rm-project-add__row-text">
+              <span class="rm-project-add__row-title">{{ project.title }}</span>
+              <!-- Qui, partage ou non, combien : de quoi choisir entre deux
+                   projets du meme nom sans les ouvrir. -->
+              <span class="rm-project-add__row-meta">{{ rmProjectSummary(project, lang) }}</span>
+            </span>
+          </button>
+          <p v-if="!projects.length" class="rm-project-add__muted">{{ T.none }}</p>
+        </template>
+        <form class="rm-project-add__create" @submit.prevent="create">
+          <RmInput v-model="draft" :placeholder="T.newName" />
+          <RmButton type="submit" variant="primary" size="sm" :loading="creating">{{ T.create }}</RmButton>
+        </form>
+      </div>
+    </RmPopover>
+  </div>
+</template>
+
+<style scoped>
+.rm-project-add{display:inline-flex}.rm-project-add :deep(.rm-button){color:var(--color-primary)}.rm-project-add.is-compact :deep(.rm-button){height:32px;width:32px}.rm-project-add :deep(.rm-button svg){height:20px;width:20px}.rm-project-add.is-in :deep(.rm-button){background:color-mix(in srgb,var(--color-success) 12%,transparent);border-color:color-mix(in srgb,var(--color-success) 45%,transparent);color:var(--color-success)}.rm-project-add__title{font-size:var(--font-13);font-weight:var(--weight-semibold);margin:0 0 var(--space-8)}.rm-project-add__text{font-size:var(--font-14);line-height:1.5;margin:0}.rm-project-add__list{display:flex;flex-direction:column;gap:4px}.rm-project-add__muted{color:var(--rm-shell-text-muted);font-size:13px;margin:0}.rm-project-add__row{align-items:center;background:none;border:1px solid transparent;border-radius:8px;color:inherit;cursor:pointer;display:flex;font:inherit;gap:8px;padding:8px 10px;text-align:left}.rm-project-add__row:focus-visible,.rm-project-add__row:hover{background:color-mix(in srgb,var(--color-primary) 6%,transparent);border-color:color-mix(in srgb,var(--color-primary) 30%,transparent)}.rm-project-add__row-text{display:flex;flex-direction:column;min-width:0}.rm-project-add__row-title{font-size:14px;font-weight:500}.rm-project-add__row-meta{color:var(--rm-shell-text-muted);font-size:12px}.rm-project-add__create{align-items:center;border-top:1px solid var(--rm-shell-border);display:flex;gap:8px;margin-top:12px;padding-top:12px}
+</style>

package/dist/runtime/components/ProjectBanner.vue

@@ -0,0 +1,134 @@
+<!--
+  RmProjectBanner - le bandeau du projet actif.
+
+  Choisir un projet change ce que font les boutons de toutes les pages : les
+  ajouts partent la-bas. Un etat pareil ne peut pas vivre dans un panneau
+  qu'on referme : il se dit en haut du contenu, sur chaque ecran, avec de quoi
+  en sortir d'un clic. Le cadre de l'app le pose sous son en-tete, hors de la
+  zone qui defile.
+
+  « Ajouter la page » range tout ce que l'ecran affiche : l'app compte les
+  cartes presentes (`addable`) et fait l'envoi. Une partie de la page peut
+  revenir archivee : l'app passe la liste dans `archived`, le bandeau nomme
+  les fiches et laisse choisir.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { rmProjectCount, type RmProjectArchivedEntry } from '../utils/projects'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    /** Lien vers la page du projet. */
+    to?: string
+    /** Elements du projet que l'app sait afficher. */
+    count?: number
+    /** Elements de la selection en attente. Absent : pas de selection. */
+    selectedCount?: number | null
+    /** Cartes de l'ecran pas encore rangees. Zero : pas de bouton. */
+    addable?: number
+    adding?: boolean
+    /** Fiches de la page refusees parce qu'archivees. */
+    archived?: RmProjectArchivedEntry[]
+    unarchiving?: boolean
+    lang?: 'fr' | 'en'
+  }>(),
+  {
+    to: '',
+    count: 0,
+    selectedCount: null,
+    addable: 0,
+    adding: false,
+    archived: () => [],
+    unarchiving: false,
+    lang: 'fr',
+  },
+)
+
+const emit = defineEmits<{
+  'add-page': []
+  'open': []
+  /** Cesser de recevoir les ajouts, pas fermer le projet. */
+  'leave': []
+  'unarchive': []
+  'dismiss-archived': []
+}>()
+
+const WORDS = {
+  fr: {
+    goTo: 'Mes ajouts vont dans', selected: 'sélectionnés', addPage: 'Ajouter la page', open: 'Ouvrir', leave: 'Quitter',
+    leaveLabel: 'Quitter ce projet', archived: 'Fiches archivées', cancel: 'Annuler',
+    archivedText: 'Ces fiches ont été retirées du projet auparavant. Les remettre ?',
+    unarchive: (n: number) => `Désarchiver les ${n}`,
+  },
+  en: {
+    goTo: 'Additions go to', selected: 'selected', addPage: 'Add the page', open: 'Open', leave: 'Leave',
+    leaveLabel: 'Leave this project', archived: 'Archived records', cancel: 'Cancel',
+    archivedText: 'These records were removed from the project earlier. Bring them back?',
+    unarchive: (n: number) => `Unarchive ${n}`,
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const asking = computed({
+  get: () => props.archived.length > 0,
+  set: (value: boolean) => {
+    if (!value) emit('dismiss-archived')
+  },
+})
+</script>
+
+<template>
+  <div class="rm-project-banner" role="status">
+    <span class="rm-project-banner__chip" aria-hidden="true">
+      <RmIcon name="FolderSimple" :size="14" />
+    </span>
+
+    <p class="rm-project-banner__text">
+      <span class="rm-project-banner__label">{{ T.goTo }}</span>
+      <NuxtLink v-if="to" :to="to" class="rm-project-banner__name">{{ title }}</NuxtLink>
+      <span v-else class="rm-project-banner__name">{{ title }}</span>
+    </p>
+
+    <RmTag variant="gray">{{ rmProjectCount(count, lang) }}</RmTag>
+    <RmTag v-if="selectedCount != null" variant="teal">{{ selectedCount }} {{ T.selected }}</RmTag>
+
+    <div class="rm-project-banner__actions">
+      <RmButton
+        v-if="addable"
+        variant="secondary"
+        size="sm"
+        prefix-icon="FolderSimplePlus"
+        :loading="adding"
+        @click="emit('add-page')"
+      >
+        {{ T.addPage }}
+        <RmTag variant="teal">{{ addable }}</RmTag>
+      </RmButton>
+      <RmButton variant="secondary" size="sm" prefix-icon="ArrowRight" @click="emit('open')">{{ T.open }}</RmButton>
+      <RmButton variant="tertiary" size="sm" prefix-icon="X" :aria-label="T.leaveLabel" @click="emit('leave')">
+        {{ T.leave }}
+      </RmButton>
+    </div>
+
+    <RmModal v-model="asking" size="sm" :label="T.archived">
+      <template #header>
+        <p class="rm-project-banner__modal-title">{{ T.archived }}</p>
+      </template>
+      <p class="rm-project-banner__modal-text">{{ T.archivedText }}</p>
+      <ul class="rm-project-banner__modal-list">
+        <li v-for="entry in archived" :key="entry.key">{{ entry.label }}</li>
+      </ul>
+      <template #footer>
+        <RmButton variant="tertiary" @click="asking = false">{{ T.cancel }}</RmButton>
+        <RmButton variant="primary" :loading="unarchiving" @click="emit('unarchive')">
+          {{ T.unarchive(archived.length) }}
+        </RmButton>
+      </template>
+    </RmModal>
+  </div>
+</template>
+
+<style scoped>
+.rm-project-banner{align-items:center;background:color-mix(in srgb,var(--rm-shell-accent) 16%,var(--rm-shell-surface));border:1px solid color-mix(in srgb,var(--rm-shell-accent) 40%,transparent);border-left:4px solid var(--rm-shell-accent);border-radius:0 0 var(--radius-lg) var(--radius-lg);display:flex;gap:var(--space-12);padding:var(--space-12) var(--space-16)}.rm-project-banner__chip{align-items:center;background:var(--rm-shell-accent);border-radius:50%;color:#fff;display:inline-flex;flex:0 0 auto;height:26px;justify-content:center;width:26px}.rm-project-banner__text{align-items:baseline;display:flex;gap:var(--space-4);margin:0;min-width:0}.rm-project-banner__label{color:var(--rm-shell-text-dark);font-size:var(--font-13)}.rm-project-banner__name{color:var(--rm-shell-accent);font-size:var(--font-14);font-weight:var(--weight-bold);overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}a.rm-project-banner__name:hover{text-decoration:underline}.rm-project-banner__actions{display:flex;gap:var(--space-4);margin-left:auto}.rm-project-banner__modal-title{font-size:var(--font-14);font-weight:var(--weight-semibold);margin:0}.rm-project-banner__modal-text{font-size:var(--font-14);line-height:1.5;margin:0 0 var(--space-8)}.rm-project-banner__modal-list{display:flex;flex-direction:column;font-size:var(--font-13);gap:2px;margin:0;max-height:200px;overflow-y:auto;padding-left:var(--space-16)}@media (max-width:720px){.rm-project-banner{flex-wrap:wrap}.rm-project-banner__actions{margin-left:0}}
+</style>

package/dist/runtime/components/ProjectComments.vue

@@ -0,0 +1,110 @@
+<!--
+  RmProjectComments - le fil d'une ressource rangee dans un projet.
+
+  Un projet se partage : ce qu'on a compris d'une fiche vaut pour l'equipe.
+  Le fil vit donc a cote de la fiche dans le projet. Une note du projet qui
+  cite la fiche s'y lit aussi, avec les passages qui la citent : ce qu'on
+  ecrit d'une fiche ailleurs ne doit pas rester invisible depuis elle.
+
+  L'app charge le fil, le trie, et publie : le tiroir rend `send` avec le
+  texte et se vide quand `sending` repasse a faux sans `error`.
+-->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { RmProjectCommentEntry } from '../utils/projects'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    /** Titre de la ressource. */
+    title: string
+    entries: RmProjectCommentEntry[]
+    loading?: boolean
+    sending?: boolean
+    error?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  { loading: false, sending: false, error: '', lang: 'fr' },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'send': [text: string]
+  'open-note': [noteId: string]
+}>()
+
+const WORDS = {
+  fr: {
+    none: 'Aucun commentaire pour le moment.', cited: 'Citée dans la note', untitled: 'Sans titre',
+    private: '(privée, visible par vous seulement)', write: 'Écrire un commentaire', post: 'Publier',
+  },
+  en: {
+    none: 'No comment yet.', cited: 'Cited in the note', untitled: 'Untitled',
+    private: '(private, only you see it)', write: 'Write a comment', post: 'Post',
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const open = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value),
+})
+
+const draft = ref('')
+
+watch(() => props.sending, (now, was) => {
+  if (was && !now && !props.error) draft.value = ''
+})
+
+function send() {
+  const text = draft.value.trim()
+  if (!text || props.sending) return
+  emit('send', text)
+}
+</script>
+
+<template>
+  <RmDrawer v-model="open" size="md" :label="title">
+    <template #header>
+      <p class="rm-project-com__title">{{ title }}</p>
+    </template>
+
+    <div class="rm-project-com">
+      <RmLoadingState v-if="loading" spinner />
+      <p v-else-if="!entries.length" class="rm-project-com__muted">{{ T.none }}</p>
+      <ul v-else class="rm-project-com__list">
+        <li v-for="entry in entries" :key="entry.id">
+          <p class="rm-project-com__meta">
+            <span v-if="entry.author" class="rm-project-com__author">{{ entry.author }}</span>
+            <RmDate v-if="entry.date" :date="entry.date" :lang="lang" />
+          </p>
+          <template v-if="entry.note">
+            <p class="rm-project-com__cited">
+              {{ T.cited }}
+              <button type="button" class="rm-project-com__note" @click="emit('open-note', entry.note.id)">
+                {{ entry.note.icon || '📄' }} {{ entry.note.title || T.untitled }}
+              </button>
+              <span v-if="entry.note.private" class="rm-project-com__private">{{ T.private }}</span>
+            </p>
+            <blockquote v-for="(excerpt, index) in entry.note.excerpts ?? []" :key="index" class="rm-project-com__excerpt">
+              {{ excerpt }}
+            </blockquote>
+          </template>
+          <p v-else class="rm-project-com__text">{{ entry.text }}</p>
+        </li>
+      </ul>
+    </div>
+
+    <template #footer>
+      <form class="rm-project-com__form" @submit.prevent="send">
+        <RmTextarea v-model="draft" :rows="3" :placeholder="T.write" />
+        <RmButton type="submit" variant="primary" size="sm" :loading="sending">{{ T.post }}</RmButton>
+        <p v-if="error" class="rm-project-com__error">{{ error }}</p>
+      </form>
+    </template>
+  </RmDrawer>
+</template>
+
+<style scoped>
+.rm-project-com{display:flex;flex-direction:column;gap:16px}.rm-project-com__title{font-size:15px;font-weight:600;margin:0}.rm-project-com__muted{color:var(--rm-shell-text-muted);font-size:13px;margin:0}.rm-project-com__list{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}.rm-project-com__meta{color:var(--rm-shell-text-muted);display:flex;font-size:12px;gap:8px;margin:0 0 2px}.rm-project-com__author{font-weight:600}.rm-project-com__text{font-size:14px;line-height:1.5;margin:0;white-space:pre-wrap}.rm-project-com__cited{font-size:14px;line-height:1.5;margin:0 0 4px}.rm-project-com__note{background:none;border:0;color:var(--rm-shell-accent);cursor:pointer;font:inherit;font-weight:600;padding:0}.rm-project-com__note:hover{text-decoration:underline}.rm-project-com__private{color:var(--rm-shell-text-muted);font-size:12px}.rm-project-com__excerpt{border-left:2px solid var(--rm-shell-border,currentColor);color:var(--rm-shell-text-muted);font-size:13px;line-height:1.5;margin:4px 0 0;padding:2px 0 2px 10px;white-space:pre-wrap}.rm-project-com__form{align-items:flex-start;display:flex;flex-direction:column;gap:8px}.rm-project-com__form>:first-child{align-self:stretch}.rm-project-com__error{color:var(--color-danger);font-size:13px;margin:0}
+</style>