@tekkare/romulus 0.1.231 → 0.1.232

package/dist/runtime/components/ProjectList.vue

@@ -0,0 +1,115 @@
+<!--
+  RmProjectList - la page « Mes projets » : les projets en cartes, groupes.
+
+  Les epingles d'abord, puis les miens, puis ceux qu'on m'a partages (cf.
+  rmProjectGroups). Une carte mene au projet (`to`) ; l'epingle est posee sur
+  la carte, hors du lien, pour qu'epingler n'ouvre rien. Les epingles sont un
+  choix de lecture : l'app les garde ou elle veut et les rend dans `pinned`.
+
+  Chargement, echec et liste vide se disent ici. Le bouton de creation de
+  l'etat vide vient de l'app (slot `empty-action`) : elle seule sait si la
+  creation est libre ou assistee.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { rmProjectGroups, rmProjectSummary, type RmProject } from '../utils/projects'
+
+const props = withDefaults(
+  defineProps<{
+    projects: RmProject[]
+    /** Projet qui recoit les ajouts. */
+    activeId?: string | null
+    loading?: boolean
+    failed?: boolean
+    /** Texte de l'etat vide : ce qu'un projet rassemble dans cette app. */
+    emptyText?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  { activeId: null, loading: false, failed: false, emptyText: '', lang: 'fr' },
+)
+
+const emit = defineEmits<{ pin: [projectId: string] }>()
+
+const WORDS = {
+  fr: {
+    active: 'Actif', pin: 'Épingler en haut', unpin: 'Désépingler',
+    failedTitle: 'Projets indisponibles', failedText: 'Le service des projets n\'a pas répondu. Réessayez dans un instant.',
+    emptyTitle: 'Aucun projet', emptyText: 'Un projet rassemble ce que vous mettez de côté au fil des pages.',
+  },
+  en: {
+    active: 'Active', pin: 'Pin to the top', unpin: 'Unpin',
+    failedTitle: 'Projects unavailable', failedText: 'The project service did not answer. Try again in a moment.',
+    emptyTitle: 'No project yet', emptyText: 'A project gathers what you set aside across the pages.',
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const groups = computed(() => rmProjectGroups(props.projects, props.lang))
+</script>
+
+<template>
+  <div class="rm-project-list">
+    <RmLoadingState v-if="loading && !projects.length" />
+
+    <RmErrorState v-else-if="failed" :title="T.failedTitle" :text="T.failedText" action-label="" />
+
+    <div v-else-if="!projects.length" class="rm-project-list__empty">
+      <RmEmptyState icon="FolderSimplePlus" tone="primary" :title="T.emptyTitle" :text="emptyText || T.emptyText" />
+      <slot name="empty-action" />
+    </div>
+
+    <section v-for="group in groups" v-else :key="group.key" class="rm-project-list__group">
+      <p class="rm-project-list__group-title">
+        <RmIcon v-if="group.key === 'pinned'" name="PushPin" weight="fill" :size="12" />
+        {{ group.label }}
+      </p>
+      <div class="rm-project-list__grid">
+        <RmSectionCard v-for="project in group.projects" :key="project.id" position="none" action class="rm-project-list__card">
+          <!-- Deux branches en dur : `<component :is="'NuxtLink'">` ne resout rien. -->
+          <NuxtLink v-if="project.to" :to="project.to" class="rm-project-list__link">
+            <div class="rm-project-list__head">
+              <RmIcon name="FolderSimple" :size="18" />
+              <span class="rm-project-list__title">{{ project.title }}</span>
+              <RmTag v-if="project.id === activeId" variant="teal">{{ T.active }}</RmTag>
+            </div>
+            <p v-if="project.description" class="rm-project-list__text">{{ project.description }}</p>
+            <p class="rm-project-list__meta">{{ rmProjectSummary(project, lang) }}</p>
+            <p v-if="project.createdAt" class="rm-project-list__meta">
+              <RmDate :date="project.createdAt" :lang="lang" />
+            </p>
+          </NuxtLink>
+          <div v-else class="rm-project-list__link">
+            <div class="rm-project-list__head">
+              <RmIcon name="FolderSimple" :size="18" />
+              <span class="rm-project-list__title">{{ project.title }}</span>
+              <RmTag v-if="project.id === activeId" variant="teal">{{ T.active }}</RmTag>
+            </div>
+            <p v-if="project.description" class="rm-project-list__text">{{ project.description }}</p>
+            <p class="rm-project-list__meta">{{ rmProjectSummary(project, lang) }}</p>
+            <p v-if="project.createdAt" class="rm-project-list__meta">
+              <RmDate :date="project.createdAt" :lang="lang" />
+            </p>
+          </div>
+          <RmButton
+            variant="tertiary"
+            size="sm"
+            icon-only
+            ghost
+            class="rm-project-list__pin"
+            :class="{ 'is-on': project.pinned }"
+            :aria-pressed="!!project.pinned"
+            :aria-label="project.pinned ? T.unpin : T.pin"
+            :title="project.pinned ? T.unpin : T.pin"
+            @click="emit('pin', project.id)"
+          >
+            <RmIcon name="PushPin" :weight="project.pinned ? 'fill' : 'regular'" :size="14" />
+          </RmButton>
+        </RmSectionCard>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.rm-project-list{display:flex;flex-direction:column;gap:24px}.rm-project-list__group{display:flex;flex-direction:column;gap:12px}.rm-project-list__group-title{align-items:center;color:var(--rm-shell-text-muted);display:flex;font-size:11px;font-weight:700;gap:6px;letter-spacing:.06em;margin:0;text-transform:uppercase}.rm-project-list__grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.rm-project-list__card{display:flex;flex-direction:column;position:relative}.rm-project-list__link{color:inherit;display:flex;flex-direction:column;gap:6px;text-decoration:none}.rm-project-list__head{align-items:center;display:flex;gap:8px;padding-right:32px}.rm-project-list__title{font-size:15px;font-weight:600}.rm-project-list__text{color:var(--rm-shell-text-muted);font-size:13px;margin:0}.rm-project-list__meta{color:var(--rm-shell-text-muted);display:flex;font-size:12px;gap:6px;margin:0}.rm-project-list__pin{position:absolute;right:10px;top:10px}.rm-project-list__pin.is-on{color:var(--color-primary)}.rm-project-list__empty{align-items:center;display:flex;flex-direction:column;gap:16px}
+</style>

package/dist/runtime/components/ProjectOverview.vue

@@ -0,0 +1,294 @@
+<!--
+  RmProjectOverview - la vue d'ensemble d'un projet, d'un coup d'oeil.
+
+  Tout se calcule sur ce que la page a deja relu (lignes, commentaires). En
+  tete, les chiffres ; puis le cadrage (la description, que les membres
+  ecrivent, et les rangees que l'app deduit de ses ressources : marques,
+  maladies, pays...) avec les informations du projet en pied ; a droite les
+  facons d'avancer (`steps`, un lien par onglet) et la repartition par
+  famille ; en bas, les derniers ajouts.
+
+  La description s'edite sur place : `describe` part avec le texte, l'app
+  l'enregistre et repasse `saving` a faux. Sans `saveError`, l'editeur se
+  referme.
+-->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { rmProjectFamilies, type RmProjectResource, type RmProjectScopeRow, type RmProjectStep } from '../utils/projects'
+
+const props = withDefaults(
+  defineProps<{
+    project: {
+      title: string
+      description?: string
+      createdAt?: string
+      ownerName?: string
+      /** Ouvert a tout l'espace de travail. */
+      shared?: boolean
+    } | null
+    rows: RmProjectResource[]
+    /** Personnes a qui le projet est ouvert nommement, proprietaire exclu. */
+    sharedCount?: number
+    /** Documents deposes. `null` : inconnu, la tuile n'est pas montree. */
+    documentsCount?: number | null
+    scopeRows?: RmProjectScopeRow[]
+    steps?: RmProjectStep[]
+    /** Le lecteur peut modifier la description. */
+    editable?: boolean
+    loading?: boolean
+    saving?: boolean
+    saveError?: string
+    /** Texte des derniers ajouts quand le projet est vide. */
+    emptyText?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  {
+    sharedCount: 0,
+    documentsCount: null,
+    scopeRows: () => [],
+    steps: () => [],
+    editable: true,
+    loading: false,
+    saving: false,
+    saveError: '',
+    emptyText: '',
+    lang: 'fr',
+  },
+)
+
+const emit = defineEmits<{
+  tab: [key: string]
+  describe: [description: string]
+  open: [row: RmProjectResource]
+}>()
+
+const WORDS = {
+  fr: {
+    resources: 'Ressources', families: 'Familles', documents: 'Documents déposés', comments: 'Commentaires',
+    scope: 'Cadrage du projet', scopeText: 'Déduit des ressources rangées dans le projet. La description reste modifiable.',
+    edit: 'Modifier', placeholder: 'De quoi parle ce projet, à quoi il sert, ce qu\'il reste à faire',
+    cancel: 'Annuler', save: 'Enregistrer', fill: 'À renseigner',
+    created: 'Créé le', owner: 'Propriétaire', visibility: 'Visibilité', last: 'Dernier ajout',
+    workspace: 'Tout l\'espace de travail', private: 'Privé', people: (n: number) => `${n} ${n > 1 ? 'personnes' : 'personne'}`,
+    start: 'Démarrer', startText: 'Pour faire avancer ce projet.', startEmpty: 'Le projet est vide pour l\'instant. Pour le remplir :',
+    breakdown: 'Répartition par famille', nothing: 'Rien n\'est encore rangé.',
+    latest: 'Derniers ajouts', all: 'Toutes les ressources', unknown: 'Élément inconnu',
+    empty: 'Parcourez les pages et utilisez le bouton Projet d\'une carte pour la ranger ici.',
+  },
+  en: {
+    resources: 'Resources', families: 'Families', documents: 'Documents', comments: 'Comments',
+    scope: 'Project scope', scopeText: 'Drawn from the resources filed in the project. The description can be edited.',
+    edit: 'Edit', placeholder: 'What is this project about, what is it for, what is left to do',
+    cancel: 'Cancel', save: 'Save', fill: 'To fill in',
+    created: 'Created', owner: 'Owner', visibility: 'Visibility', last: 'Last addition',
+    workspace: 'Whole workspace', private: 'Private', people: (n: number) => `${n} ${n > 1 ? 'people' : 'person'}`,
+    start: 'Get started', startText: 'Ways to move this project forward.', startEmpty: 'The project is empty for now. To fill it:',
+    breakdown: 'Breakdown by family', nothing: 'Nothing filed yet.',
+    latest: 'Latest additions', all: 'All resources', unknown: 'Unknown item',
+    empty: 'Browse the pages and use the Project button on a card to file it here.',
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const families = computed(() => rmProjectFamilies(props.rows))
+const commentTotal = computed(() => props.rows.reduce((sum, row) => sum + (row.comments ?? 0), 0))
+
+const kpis = computed(() => [
+  { icon: 'Stack', value: props.rows.length, legend: T.value.resources },
+  { icon: 'SquaresFour', value: families.value.length, legend: T.value.families },
+  ...(props.documentsCount == null ? [] : [{ icon: 'FileText', value: props.documentsCount, legend: T.value.documents }]),
+  { icon: 'ChatCircle', value: commentTotal.value, legend: T.value.comments },
+])
+
+const breakdown = computed(() =>
+  [...families.value].sort((a, b) => b.count - a.count).map(f => ({ name: f.label, value: f.count })))
+
+const visibility = computed(() => {
+  if (props.project?.shared) return T.value.workspace
+  return props.sharedCount ? T.value.people(props.sharedCount) : T.value.private
+})
+
+const lastAdded = computed(() =>
+  props.rows.map(row => row.createdAt ?? '').filter(Boolean).sort().at(-1) ?? '')
+
+const latest = computed(() =>
+  [...props.rows].sort((a, b) => String(b.createdAt ?? '').localeCompare(String(a.createdAt ?? ''))).slice(0, 5))
+
+function formatDate(value?: string) {
+  const date = new Date(value ?? '')
+  if (Number.isNaN(date.getTime())) return ''
+  return date.toLocaleDateString(props.lang === 'en' ? 'en-GB' : 'fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })
+}
+
+const editing = ref(false)
+const draft = ref('')
+
+function startEdit() {
+  draft.value = props.project?.description ?? ''
+  editing.value = true
+}
+
+watch(() => props.saving, (now, was) => {
+  if (was && !now && !props.saveError) editing.value = false
+})
+
+/** Le reste d'une rangee du cadrage, au survol de sa pastille « +X ». */
+const SCOPE_MAX = 8
+const moreOpen = ref(false)
+const moreAnchor = ref<HTMLElement | null>(null)
+const moreRow = ref<RmProjectScopeRow | null>(null)
+
+function showMore(row: RmProjectScopeRow, event: Event) {
+  moreAnchor.value = event.currentTarget as HTMLElement
+  moreRow.value = row
+  moreOpen.value = true
+}
+
+function onLatest(event: MouseEvent, row: RmProjectResource) {
+  if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return
+  event.preventDefault()
+  emit('open', row)
+}
+</script>
+
+<template>
+  <div class="rm-project-ov">
+    <RmKpiBar v-if="loading" loading :tiles="kpis.length" />
+    <RmKpiBar v-else :kpis="kpis" />
+
+    <div class="rm-project-ov__top">
+      <RmCard padding="lg" class="rm-project-ov__card is-scope">
+        <div class="rm-project-ov__card-head">
+          <div class="rm-project-ov__titles">
+            <h2 class="rm-project-ov__title">{{ T.scope }}</h2>
+            <p class="rm-project-ov__context">{{ T.scopeText }}</p>
+          </div>
+          <RmButton v-if="editable && !editing" variant="secondary" size="sm" prefix-icon="PencilSimple" @click="startEdit">
+            {{ T.edit }}
+          </RmButton>
+        </div>
+
+        <ul class="rm-project-ov__scope">
+          <li class="rm-project-ov__scope-row">
+            <RmIcon name="TextAlignLeft" :size="16" class="rm-project-ov__scope-icon" />
+            <div class="rm-project-ov__scope-body">
+              <p class="rm-project-ov__scope-key">Description</p>
+              <template v-if="editing">
+                <RmTextarea v-model="draft" :rows="4" :placeholder="T.placeholder" :error="saveError" />
+                <div class="rm-project-ov__edit-actions">
+                  <RmButton variant="tertiary" size="sm" @click="editing = false">{{ T.cancel }}</RmButton>
+                  <RmButton variant="primary" size="sm" :loading="saving" @click="emit('describe', draft.trim())">{{ T.save }}</RmButton>
+                </div>
+              </template>
+              <!-- Coupee a trois lignes : le cadrage se lit d'un coup d'oeil. -->
+              <RmClampText v-else-if="project?.description" class="rm-project-ov__scope-value" :text="project.description" :lines="3" :lang="lang" />
+              <button v-else-if="editable" type="button" class="rm-project-ov__placeholder" @click="startEdit">{{ T.fill }}</button>
+            </div>
+          </li>
+
+          <li v-for="row in scopeRows" :key="row.key" class="rm-project-ov__scope-row">
+            <RmIcon :name="row.icon" :size="16" class="rm-project-ov__scope-icon" />
+            <div class="rm-project-ov__scope-body">
+              <p class="rm-project-ov__scope-key">{{ row.label }}</p>
+              <div v-if="row.values.length" class="rm-project-ov__tags">
+                <RmTag v-for="value in row.values.slice(0, SCOPE_MAX)" :key="value" variant="gray" class="rm-project-ov__tag" :title="value">
+                  {{ value }}
+                </RmTag>
+                <RmTag
+                  v-if="row.values.length > SCOPE_MAX"
+                  variant="gray"
+                  tabindex="0"
+                  :aria-label="`${row.label} : ${row.values.slice(SCOPE_MAX).join(', ')}`"
+                  @mouseenter="showMore(row, $event)"
+                  @focus="showMore(row, $event)"
+                  @mouseleave="moreOpen = false"
+                  @blur="moreOpen = false"
+                >
+                  +{{ row.values.length - SCOPE_MAX }}
+                </RmTag>
+              </div>
+              <p v-else class="rm-project-ov__scope-none">{{ row.none ?? '' }}</p>
+            </div>
+          </li>
+        </ul>
+
+        <RmPopover v-model="moreOpen" :anchor="moreAnchor" :label="moreRow?.label" align="start">
+          <ul class="rm-project-ov__more">
+            <li v-for="value in moreRow?.values.slice(SCOPE_MAX) ?? []" :key="value">{{ value }}</li>
+          </ul>
+        </RmPopover>
+
+        <dl class="rm-project-ov__meta">
+          <div v-if="project?.createdAt">
+            <dt>{{ T.created }}</dt>
+            <dd>{{ formatDate(project.createdAt) }}</dd>
+          </div>
+          <div v-if="project?.ownerName">
+            <dt>{{ T.owner }}</dt>
+            <dd>{{ project.ownerName }}</dd>
+          </div>
+          <div>
+            <dt>{{ T.visibility }}</dt>
+            <dd>{{ visibility }}</dd>
+          </div>
+          <div v-if="lastAdded">
+            <dt>{{ T.last }}</dt>
+            <dd>{{ formatDate(lastAdded) }}</dd>
+          </div>
+        </dl>
+      </RmCard>
+
+      <div class="rm-project-ov__side">
+        <RmCard v-if="steps.length" padding="lg" class="rm-project-ov__card">
+          <div class="rm-project-ov__titles">
+            <h2 class="rm-project-ov__title">{{ T.start }}</h2>
+            <p class="rm-project-ov__context">{{ rows.length ? T.startText : T.startEmpty }}</p>
+          </div>
+          <ol class="rm-project-ov__start">
+            <li v-for="step in steps" :key="step.tab">
+              <button type="button" class="rm-project-ov__start-item" @click="emit('tab', step.tab)">
+                <span class="rm-project-ov__start-icon"><RmIcon :name="step.icon" :size="17" /></span>
+                <span class="rm-project-ov__start-text">
+                  <span class="rm-project-ov__start-title">{{ step.title }}</span>
+                  <span class="rm-project-ov__start-desc">{{ step.text }}</span>
+                </span>
+                <RmIcon name="ArrowRight" :size="14" class="rm-project-ov__start-arrow" />
+              </button>
+            </li>
+          </ol>
+        </RmCard>
+
+        <RmSectionCard class="rm-project-ov__card">
+          <template #header>{{ T.breakdown }}</template>
+          <RmDonutChart v-if="breakdown.length" :data="breakdown" :height="240" hide-legend />
+          <p v-else class="rm-project-ov__empty">{{ T.nothing }}</p>
+        </RmSectionCard>
+      </div>
+    </div>
+
+    <RmSectionCard class="rm-project-ov__card">
+      <template #header>
+        <div class="rm-project-ov__head">
+          <span>{{ T.latest }}</span>
+          <RmButton v-if="rows.length" variant="text" size="sm" suffix-icon="ArrowRight" @click="emit('tab', 'resources')">
+            {{ T.all }}
+          </RmButton>
+        </div>
+      </template>
+      <ul v-if="latest.length" class="rm-project-ov__list">
+        <li v-for="row in latest" :key="`${row.type}-${row.id}`" class="rm-project-ov__row">
+          <RmIcon :name="row.icon" :size="16" class="rm-project-ov__row-icon" />
+          <a v-if="row.path" :href="row.path" class="rm-project-ov__row-title" @click="onLatest($event, row)">{{ row.title || T.unknown }}</a>
+          <span v-else class="rm-project-ov__row-title">{{ row.title || T.unknown }}</span>
+          <span class="rm-project-ov__row-family">{{ row.family }}</span>
+          <span v-if="row.createdAt" class="rm-project-ov__row-date">{{ formatDate(row.createdAt) }}</span>
+        </li>
+      </ul>
+      <p v-else class="rm-project-ov__empty">{{ emptyText || T.empty }}</p>
+    </RmSectionCard>
+  </div>
+</template>
+
+<style scoped>
+.rm-project-ov{display:flex;flex-direction:column;gap:16px}.rm-project-ov__top{align-items:stretch;display:grid;gap:16px;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}@media (max-width:1100px){.rm-project-ov__top{grid-template-columns:1fr}}.rm-project-ov__card{min-width:0}.rm-project-ov__card.is-scope,.rm-project-ov__card.is-scope :deep(.r-card__body){display:flex;flex-direction:column}.rm-project-ov__card.is-scope{height:100%}.rm-project-ov__card.is-scope :deep(.r-card__body){flex:1}.rm-project-ov__card-head{align-items:flex-start;display:flex;gap:12px;justify-content:space-between}.rm-project-ov__titles{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.rm-project-ov__title{color:var(--text-primary);font-size:15px;font-weight:var(--weight-bold);margin:0}.rm-project-ov__context{color:var(--text-muted);font-size:12px;margin:0}.rm-project-ov__scope{display:flex;flex-direction:column;list-style:none;margin:0 0 16px;padding:0}.rm-project-ov__scope-row{align-items:flex-start;border-bottom:1px solid var(--border-soft,var(--border-default));display:flex;gap:12px;padding:8px 0}.rm-project-ov__scope-icon{color:var(--color-secondary);flex:none;margin-top:1px}.rm-project-ov__scope-body{flex:1;min-width:0}.rm-project-ov__scope-key{color:var(--text-muted);font-size:10.5px;font-weight:700;letter-spacing:.08em;margin:0 0 4px;text-transform:uppercase}.rm-project-ov__scope-value{color:var(--text-primary);font-size:13px;font-weight:600;margin:0;white-space:pre-line}.rm-project-ov__tags{display:flex;flex-wrap:wrap;gap:6px}.rm-project-ov__tag{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-project-ov__scope-none{color:var(--text-muted);font-size:13px;font-style:italic;margin:0}.rm-project-ov__more{font-size:13px;margin:0;padding-left:16px}.rm-project-ov__placeholder{background:none;border:none;color:var(--text-muted);cursor:pointer;font:inherit;font-size:13px;font-style:italic;margin:0;padding:0}.rm-project-ov__placeholder:hover{text-decoration:underline}.rm-project-ov__edit-actions{display:flex;gap:8px;justify-content:flex-end;margin:8px 0 12px}.rm-project-ov__meta{border-top:1px solid var(--border-default);display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin:auto 0 0;padding-top:16px}.rm-project-ov__meta dt{color:var(--text-secondary);font-size:12px}.rm-project-ov__meta dd{font-size:14px;font-weight:500;margin:2px 0 0}.rm-project-ov__side{display:flex;flex-direction:column;gap:16px;min-width:0}.rm-project-ov__side>:last-child{flex:1}.rm-project-ov__start{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}.rm-project-ov__start-item{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl,12px);color:inherit;cursor:pointer;display:flex;font:inherit;gap:12px;padding:10px 12px;text-align:left;transition:border-color .15s,background .15s,box-shadow .15s;width:100%}.rm-project-ov__start-item:hover{background:var(--bg-hover,var(--bg-surface-2));border-color:var(--color-secondary);box-shadow:var(--shadow-sm)}.rm-project-ov__start-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-project-ov__start-icon{align-items:center;background:var(--bg-hover,var(--bg-surface-2));border-radius:var(--radius-lg,8px);color:var(--color-secondary);display:flex;flex:none;height:34px;justify-content:center;width:34px}.rm-project-ov__start-text{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.rm-project-ov__start-title{color:var(--text-primary);font-size:13px;font-weight:700}.rm-project-ov__start-desc{color:var(--text-muted);font-size:11px;line-height:1.45}.rm-project-ov__start-arrow{color:var(--text-muted);flex:none}.rm-project-ov__head{align-items:center;display:flex;justify-content:space-between;width:100%}.rm-project-ov__empty{color:var(--text-secondary);font-size:14px;margin:0}.rm-project-ov__list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.rm-project-ov__row{align-items:center;border-bottom:1px solid var(--border-default);display:flex;font-size:14px;gap:10px;padding:8px 0}.rm-project-ov__row:last-child{border-bottom:none}.rm-project-ov__row-icon{color:var(--text-secondary);flex:none}.rm-project-ov__row-title{color:var(--text-primary);flex:1;min-width:0;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}a.rm-project-ov__row-title{color:var(--color-primary)}a.rm-project-ov__row-title:hover{text-decoration:underline}.rm-project-ov__row-date,.rm-project-ov__row-family{color:var(--text-muted);flex:none;font-size:12px}
+</style>

package/dist/runtime/components/ProjectPanel.vue

@@ -0,0 +1,193 @@
+<!--
+  RmProjectPanel - le panneau « Projets » du rail.
+
+  Il repond a une question : ou partent mes ajouts ? Le projet actif s'y dit
+  en tete, avec son compte. Chaque carte porte les deux gestes separement,
+  ecrits en toutes lettres : y envoyer ses ajouts, ou ouvrir le projet. Les
+  confondre obligeait a rendre un projet actif pour aller le lire.
+
+  On peut y creer un projet d'un nom : il devient l'actif sans quitter la
+  page (l'app le fait a la reception de `create`). Le bouton de creation peut
+  etre remplace par celui de l'app (slot `new`), qui proposerait une creation
+  assistee. Renommer et supprimer restent sur la page du projet.
+
+  La recherche n'apparait qu'a partir de cinq projets : en dessous, la liste
+  se lit d'un coup d'oeil et le champ coute une rangee pour rien.
+-->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { rmProjectCount, rmProjectGroups, rmProjectSummary, type RmProject } from '../utils/projects'
+
+const props = withDefaults(
+  defineProps<{
+    projects: RmProject[]
+    activeId?: string | null
+    /** Elements du projet actif. */
+    activeCount?: number
+    loading?: boolean
+    failed?: boolean
+    /** Creation en cours. */
+    creating?: boolean
+    /** Lien « Tous mes projets ». Vide : pas de lien. */
+    allTo?: string
+    lang?: 'fr' | 'en'
+  }>(),
+  { activeId: null, activeCount: 0, loading: false, failed: false, creating: false, allTo: '', lang: 'fr' },
+)
+
+const emit = defineEmits<{
+  activate: [projectId: string]
+  open: [projectId: string]
+  pin: [projectId: string]
+  create: [title: string]
+}>()
+
+const WORDS = {
+  fr: {
+    goTo: 'Mes ajouts vont dans', name: 'Nom du projet', placeholder: 'Veille oncologie', required: 'Un nom est requis',
+    create: 'Créer', cancel: 'Annuler', loading: 'Chargement...', failed: 'Les projets ne sont pas accessibles pour le moment.',
+    search: 'Rechercher un projet', new: 'Nouveau projet', created: 'Créé le', active: 'Projet actif',
+    activate: 'Activer ce projet', open: 'Ouvrir', noMatch: 'Aucun projet ne correspond.', none: 'Aucun projet pour le moment.',
+    all: 'Tous mes projets', pin: 'Épingler en haut', unpin: 'Désépingler',
+  },
+  en: {
+    goTo: 'Additions go to', name: 'Project name', placeholder: 'Oncology watch', required: 'A name is required',
+    create: 'Create', cancel: 'Cancel', loading: 'Loading...', failed: 'Projects are unavailable right now.',
+    search: 'Search a project', new: 'New project', created: 'Created the', active: 'Active project',
+    activate: 'Activate this project', open: 'Open', noMatch: 'No project matches.', none: 'No project yet.',
+    all: 'All my projects', pin: 'Pin to the top', unpin: 'Unpin',
+  },
+}
+const T = computed(() => WORDS[props.lang] ?? WORDS.fr)
+
+const active = computed(() => props.projects.find(p => p.id === props.activeId) ?? null)
+
+const search = ref('')
+const shown = computed(() => {
+  const needle = search.value.trim().toLowerCase()
+  return needle ? props.projects.filter(p => p.title.toLowerCase().includes(needle)) : props.projects
+})
+const groups = computed(() => rmProjectGroups(shown.value, props.lang))
+
+const formOpen = ref(false)
+const draft = ref('')
+const missing = ref(false)
+
+function openForm() {
+  formOpen.value = true
+}
+
+function cancel() {
+  formOpen.value = false
+  draft.value = ''
+  missing.value = false
+}
+
+function submit() {
+  const title = draft.value.trim()
+  if (!title) {
+    missing.value = true
+    return
+  }
+  emit('create', title)
+  cancel()
+}
+
+defineExpose({ openForm })
+</script>
+
+<template>
+  <div class="rm-project-panel">
+    <div v-if="active" class="rm-project-panel__head">
+      <p class="rm-project-panel__label">{{ T.goTo }}</p>
+      <p class="rm-project-panel__active">{{ active.title }}</p>
+      <p class="rm-project-panel__muted">{{ rmProjectCount(activeCount, lang) }}</p>
+    </div>
+
+    <form v-if="formOpen" class="rm-project-panel__create" @submit.prevent="submit">
+      <RmInput v-model="draft" :label="T.name" :placeholder="T.placeholder" :error="missing ? T.required : ''" />
+      <div class="rm-project-panel__actions">
+        <RmButton type="submit" variant="primary" size="sm" :loading="creating">{{ T.create }}</RmButton>
+        <RmButton variant="tertiary" size="sm" @click="cancel">{{ T.cancel }}</RmButton>
+      </div>
+    </form>
+
+    <div class="rm-project-panel__list">
+      <p v-if="loading && !projects.length" class="rm-project-panel__muted">{{ T.loading }}</p>
+      <p v-else-if="failed" class="rm-project-panel__muted">{{ T.failed }}</p>
+      <template v-else>
+        <div class="rm-project-panel__tools">
+          <RmSearchBar
+            v-if="projects.length > 4"
+            v-model="search"
+            class="rm-project-panel__search"
+            :have-advanced="false"
+            :placeholder="T.search"
+          />
+          <span v-if="!formOpen" class="rm-project-panel__new">
+            <slot name="new" :open-form="openForm">
+              <RmButton variant="secondary" size="sm" prefix-icon="Plus" @click="openForm">{{ T.new }}</RmButton>
+            </slot>
+          </span>
+        </div>
+
+        <template v-for="group in groups" :key="group.key">
+          <p class="rm-project-panel__group">
+            <RmIcon v-if="group.key === 'pinned'" name="PushPin" weight="fill" :size="12" />
+            {{ group.label }}
+          </p>
+          <article
+            v-for="project in group.projects"
+            :key="project.id"
+            class="rm-project-panel__card"
+            :class="{ 'is-active': project.id === activeId }"
+          >
+            <div class="rm-project-panel__card-head">
+              <p class="rm-project-panel__card-title">{{ project.title }}</p>
+              <RmButton
+                variant="tertiary"
+                size="sm"
+                icon-only
+                ghost
+                class="rm-project-panel__pin"
+                :class="{ 'is-on': project.pinned }"
+                :aria-pressed="!!project.pinned"
+                :aria-label="project.pinned ? T.unpin : T.pin"
+                :title="project.pinned ? T.unpin : T.pin"
+                @click="emit('pin', project.id)"
+              >
+                <RmIcon name="PushPin" :weight="project.pinned ? 'fill' : 'regular'" :size="14" />
+              </RmButton>
+            </div>
+            <p class="rm-project-panel__meta">{{ rmProjectSummary(project, lang) }}</p>
+            <p v-if="project.createdAt" class="rm-project-panel__meta">
+              {{ T.created }} <RmDate :date="project.createdAt" :lang="lang" />
+            </p>
+            <div class="rm-project-panel__actions">
+              <RmButton
+                :variant="project.id === activeId ? 'primary' : 'tertiary'"
+                size="sm"
+                :disabled="project.id === activeId"
+                @click="emit('activate', project.id)"
+              >
+                {{ project.id === activeId ? T.active : T.activate }}
+              </RmButton>
+              <RmButton variant="tertiary" size="sm" @click="emit('open', project.id)">{{ T.open }}</RmButton>
+            </div>
+          </article>
+        </template>
+
+        <p v-if="search && !shown.length" class="rm-project-panel__muted">{{ T.noMatch }}</p>
+        <p v-if="!projects.length" class="rm-project-panel__muted">{{ T.none }}</p>
+      </template>
+    </div>
+
+    <div v-if="allTo" class="rm-project-panel__footer">
+      <NuxtLink :to="allTo" class="rm-project-panel__link">{{ T.all }}</NuxtLink>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-project-panel{display:flex;flex-direction:column;gap:16px;width:100%}.rm-project-panel__head{background:color-mix(in srgb,var(--rm-shell-accent) 12%,var(--rm-shell-surface));border:1px solid color-mix(in srgb,var(--rm-shell-accent) 35%,transparent);border-left:4px solid var(--rm-shell-accent);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:2px;padding:var(--space-12)}.rm-project-panel__label{color:var(--rm-shell-text-dark);font-size:var(--font-12);font-weight:var(--weight-semibold);letter-spacing:.02em;margin:0;text-transform:uppercase}.rm-project-panel__active{color:var(--rm-shell-accent);font-size:var(--font-16);font-weight:var(--weight-bold);margin:0}.rm-project-panel__muted{color:var(--rm-shell-text-dark);font-size:var(--font-12);margin:0}.rm-project-panel__create{background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:10px;padding:12px}.rm-project-panel__create,.rm-project-panel__list{display:flex;flex-direction:column;gap:8px}.rm-project-panel__tools{align-items:center;display:flex;gap:8px}.rm-project-panel__search{flex:1;min-width:0}.rm-project-panel__search :deep(.search-bar){box-sizing:border-box;display:flex;min-width:0;width:100%}.rm-project-panel__new{display:inline-flex;flex:0 0 auto;margin-left:auto}.rm-project-panel__group{align-items:center;color:var(--rm-shell-text-muted);display:flex;font-size:11px;font-weight:700;gap:6px;letter-spacing:.06em;margin:4px 0 0;text-transform:uppercase}.rm-project-panel__card{background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:10px;display:flex;flex-direction:column;gap:6px;padding:12px}.rm-project-panel__card.is-active{background:color-mix(in srgb,var(--rm-shell-accent) 8%,var(--rm-shell-surface));border-color:color-mix(in srgb,var(--rm-shell-accent) 45%,transparent)}.rm-project-panel__card-head{align-items:center;display:flex;gap:8px}.rm-project-panel__card-title{color:var(--rm-shell-text-dark);flex:1;font-size:14px;font-weight:600;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-project-panel__pin{margin-right:-6px}.rm-project-panel__pin.is-on{color:var(--color-primary)}.rm-project-panel__meta{color:var(--rm-shell-text-muted);display:flex;font-size:12px;gap:4px;margin:0}.rm-project-panel__actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.rm-project-panel__footer{border-top:1px solid var(--rm-shell-border);padding-top:12px}.rm-project-panel__link{color:var(--rm-shell-accent);font-size:12px;font-weight:600;text-decoration:none}.rm-project-panel__link:hover{text-decoration:underline}
+</style>