@tekkare/romulus 0.1.242 → 0.1.244

package/layer/app/components/layout/tool/views.vue

@@ -0,0 +1,933 @@
+<!--
+  Panneau « Mes vues » du rail.
+
+  Une vue est un jeu de filtres mis de cote pour etre rejoue. C'est ce que
+  l'app appelait « scope » : le mot change a l'ecran, l'API ne change pas (les
+  pulses), donc les vues deja enregistrees restent en place.
+
+  Le panneau ne fait que traduire : les pulses de la page courante deviennent
+  des `RmSavedView`, les actions du panneau retombent sur les appels existants
+  (creer, mettre a jour, supprimer, appliquer). Le favori et la vue par defaut
+  sont les marques du LECTEUR (`starred`, `isDefault`), ecrites par l'API sur
+  le couple (vue, lecteur) : elles valent donc aussi sur une vue qu'on a recue.
+
+  Une vue peut venir de quelqu'un d'autre. Elle est alors en lecture seule :
+  on l'active, on la marque, on la duplique, mais on ne la renomme pas, on ne
+  l'ecrase pas et on ne la supprime pas. C'est `isOwner` qui le dit, jamais la
+  comparaison des identifiants d'utilisateur.
+
+  Le panneau est celui de tout le hub : il ne connait pas l'app affichee. Le
+  magasin de scopes lui vient de la page qui a declare sa vue (`useViews`),
+  parce que chaque app tient le sien.
+-->
+<script setup lang="ts">
+import { VIEW_BRAND_FILTERS } from "#oip-app/views";
+import { sameViewPage } from "../../../utils/viewPages";
+
+const { locale } = useI18n();
+const route = useRoute();
+const views = useViews();
+const brandSync = useAlertBrandSync();
+const alerts = useAlerts();
+
+const source = computed(() => views.current.value);
+const filterLabel = useViewFilterLabels(() => source.value?.filterNamespace);
+
+/** Page cote API : les vues sont rangees par page, comme avant. */
+const page = computed(() => source.value?.page ?? route.path);
+
+/**
+ * Le magasin de scopes de la page affichee. Un appel par acces : ces
+ * composables creent leurs refs a chaque fois, donc rien ne se garde ici.
+ */
+const store = () => views.scopes.value();
+
+/**
+ * Le magasin cree ses refs a chaque appel : son `scopeLoading` ne dit rien de
+ * ce que ce panneau a lance. On tient donc l'etat de notre propre chargement.
+ */
+const loading = ref(false);
+
+// Les alertes des vues, pour le compte affiche sur chaque carte. La liste est
+// deja chargee par le layout (pastille de la tuile) : pas de relecture forcee.
+onMounted(() => alerts.load());
+
+onMounted(async () => {
+  if (store().scopeList.value.length > 0) return;
+  loading.value = true;
+  try {
+    await store().getScopes();
+  } finally {
+    loading.value = false;
+  }
+});
+
+/** Les pulses de cette page, et de celles qui partagent ses vues (cf. viewPages). */
+const scopes = computed(() =>
+  store().scopeList.value.filter((scope: any) => sameViewPage(scope.page, page.value)),
+);
+
+// La vue active de cette page, pas la selection de l'app : une vue = une page
+// (cf. `active` dans useViews).
+const selected = computed(() => views.active.value);
+
+// Lecture des criteres et signature : les memes que celles de la pastille de
+// vue, cf. useViews. Deux definitions donneraient deux verdicts sur « la vue
+// est-elle a jour ».
+const parseCriteria = parseViewCriteria;
+
+/**
+ * Valeurs reellement posees sur un filtre.
+ *
+ * Le magasin garde des filtres vides : une periode sans borne vaut
+ * `[null, null]`, ce qui a bien deux entrees mais ne filtre rien. Les compter
+ * ferait afficher un critere vide sur la carte, et surtout ferait croire a un
+ * ecart entre l'ecran et la vue (l'API, elle, ne garde pas ces entrees).
+ */
+/**
+ * Libelles des options d'affichage, tous ecrans confondus.
+ *
+ * Une vue garde les preferences de carte sous leur cle (`oncoIcd10`,
+ * `genes`...). La carte de vue montre le libelle. Les cles ne se recoupent pas
+ * d'un ecran a l'autre, une table unique suffit.
+ */
+const prefLabels = computed<Record<string, string>>(() =>
+  Object.fromEntries(
+    Object.values(CARD_PREF_GROUPS)
+      .flat()
+      .flatMap((group) => group.options)
+      .map((option) => [
+        option.key,
+        locale.value === "fr" ? option.fr : option.en,
+      ]),
+  ),
+);
+
+function filledValues(item: any): string[] {
+  if (item?.filter === VIEW_PREFS_FILTER && Array.isArray(item.values)) {
+    return item.values.map((key: string) => prefLabels.value[key] ?? key);
+  }
+  return viewFilledValues(item);
+}
+
+/** Criteres retenus : pagination exclue, filtres vides exclus. */
+function usefulCriteria(scope: any) {
+  return parseCriteria(scope).filter((item: any) => filledValues(item).length > 0);
+}
+
+/** Les criteres qui portent des produits (vues du portail) : cites en premier. */
+const PRODUCT_FILTERS = VIEW_BRAND_FILTERS;
+
+/**
+ * Le bloc « contenu » d'une carte : ses criteres, valeurs comprises, les
+ * produits d'abord. Meme lecture que les templates de l'onglet voisin : un
+ * nombre de produits ne disait pas lesquels.
+ */
+function cardConfig(criteria: any[]) {
+  const filters = [
+    ...criteria.filter((item: any) => PRODUCT_FILTERS.includes(item?.filter)),
+    ...criteria.filter((item: any) => !PRODUCT_FILTERS.includes(item?.filter)),
+  ];
+  if (!filters.length) return [];
+  return [
+    {
+      icon: "Funnel",
+      key: `${locale.value === "en" ? "Filters" : "Filtres"} (${
+        filters.filter((item: any) => item.filter !== VIEW_PREFS_FILTER).length
+      })`,
+      pills: filters.map((item: any) => ({
+        k: filterLabel(item.filter),
+        v: filledValues(item).join(", "),
+      })),
+    },
+  ];
+}
+
+const dateFormat = computed(
+  () => new Intl.DateTimeFormat(locale.value === "en" ? "en-GB" : "fr-FR", { dateStyle: "medium" }),
+);
+
+function metaOf(scope: any) {
+  const meta = [
+    {
+      icon: "User",
+      label: scope.isOwner === false
+        ? (scope.ownerName ?? (locale.value === "en" ? "Shared" : "Partagée"))
+        : locale.value === "en"
+          ? "You"
+          : "Vous",
+    },
+  ];
+  // Une vue deja surveillee le dit sur sa carte : sans ce repere, le
+  // raccourci « Créer une alerte » proposait un doublon a l'aveugle.
+  const watched = alerts.alerts.value.filter(
+    (alert) => alert.kind === "view" && alert.pulseId === scope.id,
+  ).length;
+  if (watched) {
+    meta.push({
+      icon: "Bell",
+      label:
+        locale.value === "en"
+          ? `${watched} alert${watched > 1 ? "s" : ""}`
+          : `${watched} alerte${watched > 1 ? "s" : ""}`,
+    });
+  }
+  if (scope.createdAt) {
+    const date = new Date(scope.createdAt);
+    if (!Number.isNaN(date.getTime())) {
+      meta.push({
+        icon: "Clock",
+        label:
+          (locale.value === "en" ? "Created on " : "Créée le ") + dateFormat.value.format(date),
+      });
+    }
+  }
+  return meta;
+}
+
+/*
+ * Menu des cartes, partage compris : commun avec l'etat vide des pages.
+ *
+ * Appele avant `cardsOf` qui lit `menuOf` : un `watch` sur la liste des vues
+ * recues evalue sa source des le `setup`, et le bundle jetait « Cannot access
+ * ... before initialization » chez le destinataire d'un partage quand le menu
+ * etait declare plus bas. `apply` est une declaration de fonction, hissee.
+ */
+const {
+  menuOf,
+  isShared,
+  onAction: onCardAction,
+  rename,
+  star,
+  sharing,
+  shareTarget,
+  shareMembers,
+  isSuperAdmin,
+  workspaces,
+  templateNote,
+  onShareSearch,
+  confirmShare,
+} = useViewCardActions(apply);
+
+function cardsOf(items: any[]) {
+  return items.map((scope: any) => {
+    const criteria = usefulCriteria(scope);
+    const mine = scope.isOwner !== false;
+    return {
+      id: scope.id,
+      title: scope.title,
+      description: scope.description,
+      active: selected.value?.id === scope.id,
+      starred: scope.starred === true,
+      isDefault: scope.isDefault === true,
+      // Le bandeau de la carte dit d'ou vient la vue : recue de quelqu'un, ou
+      // a moi mais ouverte a d'autres.
+      sharedBy: mine ? undefined : (scope.ownerName ?? undefined),
+      shared: mine && isShared(scope),
+      // Un template reste prive au sens du partage : sans sa propre marque,
+      // sa carte serait celle d'une vue que personne ne voit.
+      isTemplate: mine && scope.isTemplate === true,
+      templateTargets: scope.targetWorkspaces?.length ?? 0,
+      // Un menu par carte : le lecteur d'une vue recue ne peut ni la renommer,
+      // ni la partager, ni la supprimer.
+      menu: menuOf(scope),
+      renamable: mine,
+      updatedAt: scope.createdAt,
+      config: cardConfig(criteria),
+      meta: metaOf(scope),
+    };
+  });
+}
+
+/**
+ * Mes vues de cette page. Les templates que j'ai publies n'y sont pas : ils se
+ * gerent dans l'onglet « Admin templates » du groupe, et melanges ici ils
+ * noyaient les vues de travail de l'administrateur.
+ */
+const list = computed(() =>
+  cardsOf(
+    scopes.value.filter((scope: any) => scope.isOwner !== false && scope.isTemplate !== true),
+  ),
+);
+
+/** Les vues que d'autres m'ont ouvertes, sur cette page. */
+const sharedList = computed(() =>
+  cardsOf(scopes.value.filter((scope: any) => scope.isOwner === false)),
+);
+
+// ------------------------------------------------------- templates Tekkare
+
+/**
+ * Trois onglets : mes vues, celles qu'on m'a partagees, les templates fournis.
+ * L'onglet des vues recues sort meme vide : c'est la seule place ou l'on va
+ * voir si quelqu'un a partage quelque chose, et le cacher quand il n'y a rien
+ * laissait croire que le partage n'existait pas.
+ */
+const tab = ref("mine");
+
+// Mise en carte et demarrage vivent dans `useViewTemplates` : l'etat vide des
+// pages a selection de produits propose les memes templates, de la meme facon.
+const { cards: templateList, start, save: saveTemplate } = useViewTemplates(() => page.value);
+
+const tabs = computed(() => [
+  {
+    key: "mine",
+    label: locale.value === "en" ? "My views" : "Mes vues",
+    icon: "BookmarkSimple",
+    count: list.value.length,
+  },
+  {
+    key: "shared",
+    label: locale.value === "en" ? "Team" : "Équipe",
+    icon: "UsersThree",
+    count: sharedList.value.length,
+  },
+  {
+    key: "templates",
+    label: locale.value === "en" ? "Tekkare templates" : "Templates Tekkare",
+    icon: "MagicWand",
+    count: templateList.value.length,
+  },
+]);
+
+const onTemplates = computed(() => tab.value === "templates");
+const onShared = computed(() => tab.value === "shared");
+
+const signature = viewSignature;
+
+// Filtres a l'ecran, plus l'etat du « Personnaliser » : les deux partent dans
+// la vue, et les deux comptent pour dire si la vue active est depassee.
+const current = computed(() => views.criteriaOf());
+
+/**
+ * La vue active ne correspond plus a l'ecran : l'utilisateur a touche aux
+ * filtres depuis qu'il l'a appliquee. On le lui dit plutot que de laisser
+ * croire que la vue porte ce qu'il voit.
+ *
+ * Une vue appartient a une page : si la vue active vient d'ailleurs (elle a
+ * ete appliquee sur un autre ecran, et son application a pu faire naviguer
+ * jusqu'ici), il n'y a rien a rattraper. Proposer de l'ecraser avec les
+ * filtres d'une autre page detruirait la vue de l'utilisateur.
+ */
+const dirtyTitle = computed(() => {
+  const scope = selected.value;
+  if (!scope?.id || !sameViewPage(scope.page, page.value)) return "";
+  // Une vue recue ne s'ecrase pas : la banniere n'offrirait qu'un bouton
+  // interdit. Ce qu'on peut faire de cet ecran, c'est l'enregistrer comme
+  // vue a soi, ce que le bouton du panneau propose deja.
+  if (scope.isOwner === false) return "";
+  if (signature(current.value) === signature(parseCriteria(scope))) return "";
+  return scope.title;
+});
+
+// ---------------------------------------------------------------- sauvegarde
+
+/** Formulaire de sauvegarde, ouvert par le bouton ou par « comme nouvelle ». */
+const saving = ref(false);
+const draftTitle = ref("");
+const draftDescription = ref("");
+const titleMissing = ref(false);
+
+function openSave(prefill = "") {
+  draftTitle.value = prefill;
+  draftDescription.value = "";
+  titleMissing.value = false;
+  saving.value = true;
+}
+
+async function confirmSave() {
+  const title = draftTitle.value.trim();
+  if (!title) {
+    titleMissing.value = true;
+    return;
+  }
+  saving.value = false;
+  // Les identifiants d'avant : la creation ne rend pas la vue, elle recharge
+  // la liste. La chercher par titre appliquait une homonyme plus ancienne.
+  const before = new Set(store().scopeList.value.map((scope: any) => scope.id));
+  await store().createScope({
+    title,
+    description: draftDescription.value.trim(),
+    criteria: current.value,
+    currentPage: page.value,
+  });
+  // La vue tout juste creee devient la vue active : c'est ce qui est a l'ecran.
+  const created = store()
+    .scopeList.value.filter((scope: any) => sameViewPage(scope.page, page.value))
+    .find((scope: any) => !before.has(scope.id));
+  if (created) apply(created.id);
+}
+
+// ------------------------------------------------------------------- actions
+
+function scopeOf(id: string) {
+  return scopes.value.find((scope: any) => scope.id === id) ?? null;
+}
+
+function apply(id: string) {
+  const scope = scopeOf(id);
+  if (!scope) return;
+  // Copie volontaire : les filtres se reappliquent sur un changement de
+  // reference de `selectedScope`. Rejouer le meme objet ne reveillerait aucun
+  // watcher, donc « Annuler » ne remettrait rien en place.
+  store().setSelectedScope({ ...scope });
+  views.applyPrefs(scope, source.value?.prefsScope);
+  source.value?.onApply?.(scope);
+}
+
+
+/**
+ * « Nouvelle vue » : meme geste que celui de la pastille. L'ecran repart
+ * vierge (cf. `resetAll`), puis la page ouvre son tiroir de selection quand
+ * elle en a un, ou la vue se compose.
+ */
+function startNew() {
+  const page = source.value;
+  views.resetAll();
+  page?.onEdit?.();
+}
+
+function onAction(key: string, id: string) {
+  if (key === "save-template") void saveTemplate(id);
+  else onCardAction(key, id);
+}
+
+/** Banniere : remettre l'ecran dans l'etat de la vue active. */
+function discard() {
+  if (selected.value?.id) apply(selected.value.id);
+}
+
+/** Banniere : ecrire l'ecran courant dans la vue active. */
+async function save() {
+  const scope = selected.value;
+  if (!scope?.id) return;
+  await store().updateScope({
+    id: scope.id,
+    title: scope.title,
+    description: scope.description,
+    criteria: current.value,
+    currentPage: scope.page,
+  });
+  apply(scope.id);
+  // Une alerte de marque posee sur cette vue ne suit pas ses produits : elle
+  // porte sa propre liste. On propose le report plutot que de le faire.
+  brandSync.ask(scope.id, viewBrandsFromCriteria(current.value));
+}
+
+// ------------------------------------------------------- mode modification
+
+/*
+ * Ouvert par « Modifier ma vue » de la pastille. Le panneau prend alors toute
+ * la place : nom, description, contenu. Le contenu se change par l'action de
+ * la page quand elle en a une (le tiroir de produits du portail, qui ecrit
+ * lui-meme dans la vue), sinon par les filtres de la page, repris ici.
+ */
+const editing = useViewEditing();
+const editTitle = ref("");
+const editDescription = ref("");
+const editTitleMissing = ref(false);
+const editBusy = ref(false);
+/** Ecrire aussi les filtres affiches, quand ils different de la vue. */
+const editTakeScreen = ref(true);
+
+/** La vue modifiee, lue dans la liste : elle suit le tiroir de produits. */
+const editScope = computed(() => (editing.value?.id ? scopeOf(editing.value.id) : null));
+const editCreating = computed(() => editing.value !== null && !editScope.value);
+
+/** L'ecran ne correspond plus a la vue modifiee. */
+const editScreenDiffers = computed(
+  () =>
+    !!editScope.value &&
+    selected.value?.id === editScope.value.id &&
+    signature(current.value) !== signature(parseCriteria(editScope.value)),
+);
+
+/** Ce que la vue emportera a l'enregistrement. */
+const editCriteria = computed(() =>
+  !editScope.value || (editScreenDiffers.value && editTakeScreen.value)
+    ? current.value
+    : parseCriteria(editScope.value),
+);
+const editContent = computed(() => cardConfig(usefulCriteria({ criteria: editCriteria.value }))[0]?.pills ?? []);
+
+// Rejoue aussi quand la vue arrive dans la liste : le panneau charge les vues
+// a son montage, apres que la pastille a demande le mode.
+watch(
+  () => [editing.value, editScope.value?.id] as const,
+  ([value], previous) => {
+    if (!value || (previous?.[0] === value && previous?.[1])) return;
+    const scope = value.id ? scopeOf(value.id) : null;
+    // Une vue recue se reprend sous son nom : la copie est a soi.
+    editTitle.value = scope?.title ?? (selected.value?.id ? selected.value.title : "");
+    editDescription.value = scope?.description ?? selected.value?.description ?? "";
+    editTitleMissing.value = false;
+    editTakeScreen.value = true;
+  },
+  { immediate: true },
+);
+
+// Fermer le rail quitte le mode : rouvert plus tard, le panneau montre ses listes.
+onBeforeUnmount(() => {
+  editing.value = null;
+});
+
+async function confirmEdit() {
+  const title = editTitle.value.trim();
+  if (!title) {
+    editTitleMissing.value = true;
+    return;
+  }
+  const scope = editScope.value;
+  const criteria = editCriteria.value;
+  const description = editDescription.value.trim();
+  editBusy.value = true;
+  try {
+    if (scope) {
+      const contentChanged = signature(criteria) !== signature(parseCriteria(scope));
+      await store().updateScope({
+        id: scope.id,
+        title,
+        description,
+        criteria,
+        currentPage: scope.page,
+        refreshAlerts: contentChanged,
+      });
+      // La vue active porte une copie : la rejouer met le nouveau nom sur la
+      // pastille (et remet l'ecran sur la vue si on n'a pas repris ses filtres).
+      if (selected.value?.id === scope.id) apply(scope.id);
+      if (contentChanged) brandSync.ask(scope.id, viewBrandsFromCriteria(criteria));
+    } else {
+      const before = new Set(store().scopeList.value.map((item: any) => item.id));
+      await store().createScope({ title, description, criteria, currentPage: page.value });
+      const created = store()
+        .scopeList.value.filter((item: any) => sameViewPage(item.page, page.value))
+        .find((item: any) => !before.has(item.id));
+      if (created) apply(created.id);
+    }
+    editing.value = null;
+  } finally {
+    editBusy.value = false;
+  }
+}
+
+</script>
+
+<template>
+  <div class="full_width">
+  <form v-if="editing" class="vedit" @submit.prevent="confirmEdit">
+    <button type="button" class="vedit_back" @click="editing = null">
+      <RmIcon name="ArrowLeft" :size="14" />
+      {{ locale === "en" ? "All views" : "Toutes les vues" }}
+    </button>
+    <p class="vedit_title">
+      <RmIcon name="PencilSimple" :size="18" class="vedit_title_icon" />
+      {{
+        editCreating
+          ? locale === "en" ? "Save the view" : "Sauvegarder la vue"
+          : locale === "en" ? "Edit the view" : "Modifier la vue"
+      }}
+    </p>
+    <p v-if="editCreating" class="vedit_hint">
+      {{
+        locale === "en"
+          ? "This view is not saved yet. Name it to find it again."
+          : "Cette vue n'est pas encore enregistrée. Nommez-la pour la retrouver."
+      }}
+    </p>
+
+    <label class="vsave_field">
+      <span class="vsave_label">{{ locale === "en" ? "View name" : "Nom de la vue" }}</span>
+      <input
+        v-model="editTitle"
+        class="vsave_input"
+        :class="{ vsave_input_error: editTitleMissing }"
+        type="text"
+        maxlength="60"
+        :placeholder="locale === 'en' ? 'e.g. Oncology monitoring' : 'ex. Veille oncologie'"
+        autofocus
+      >
+      <span v-if="editTitleMissing" class="vsave_error">
+        {{ locale === "en" ? "A name is required." : "Un nom est nécessaire." }}
+      </span>
+    </label>
+    <label class="vsave_field">
+      <span class="vsave_label">
+        {{ locale === "en" ? "Description (optional)" : "Description (optionnelle)" }}
+      </span>
+      <textarea v-model="editDescription" class="vsave_input" rows="3" maxlength="240" />
+    </label>
+
+    <div class="vsave_field">
+      <!-- Le geste qui change le contenu se pose sur son titre : il dit de quoi
+           il parle sans descendre sous la liste des filtres. -->
+      <div class="vedit_content_head">
+        <span class="vsave_label">{{ locale === "en" ? "Content" : "Contenu de la vue" }}</span>
+        <RmButton
+          v-if="source?.onEdit"
+          variant="primary"
+          size="sm"
+          prefix-icon="Package"
+          @click="source.onEdit()"
+        >
+          {{ source.editLabel ?? (locale === "en" ? "Edit the view content" : "Modifier le contenu de la vue") }}
+        </RmButton>
+      </div>
+      <div class="vedit_content">
+        <span v-for="pill in editContent" :key="pill.k" class="vedit_chip" :title="pill.v">
+          <span class="vedit_chip_k">{{ pill.k }}</span>
+          <span class="vedit_chip_v">{{ pill.v }}</span>
+        </span>
+        <span v-if="editContent.length === 0" class="vedit_empty">
+          {{ locale === "en" ? "No filter set" : "Aucun filtre posé" }}
+        </span>
+      </div>
+      <label v-if="editScreenDiffers" class="vedit_check">
+        <input v-model="editTakeScreen" type="checkbox">
+        <span>
+          {{
+            locale === "en"
+              ? "Save the filters shown on the page"
+              : "Enregistrer les filtres affichés sur la page"
+          }}
+          <span class="vedit_check_hint">
+            {{
+              locale === "en"
+                ? "(otherwise the page returns to the saved view)"
+                : "(sinon la page revient à la vue enregistrée)"
+            }}
+          </span>
+        </span>
+      </label>
+      <p v-if="!source?.onEdit && !editScreenDiffers" class="vedit_hint">
+        {{
+          locale === "en"
+            ? "To change the content, adjust the page filters: they can then be saved here."
+            : "Pour changer le contenu, modifiez les filtres de la page : vous pourrez ensuite les enregistrer ici."
+        }}
+      </p>
+    </div>
+
+    <div class="vsave_actions vedit_actions">
+      <RmButton variant="primary" size="sm" type="submit" prefix-icon="BookmarkSimple" :loading="editBusy">
+        {{ locale === "en" ? "Save" : "Enregistrer" }}
+      </RmButton>
+      <RmButton variant="secondary" size="sm" :disabled="editBusy" @click="editing = null">
+        {{ locale === "en" ? "Cancel" : "Annuler" }}
+      </RmButton>
+    </div>
+  </form>
+
+  <RmSavedViews
+    v-else
+    v-model:tab="tab"
+    class="full_width"
+    :views="onTemplates ? templateList : onShared ? sharedList : list"
+    :tabs="tabs"
+    :description="
+      onTemplates
+        ? locale === 'en'
+          ? 'Ready-made views built by Tekkare. Start an analysis, then adjust it and save it in your own views.'
+          : `Vues prêtes à l'emploi créées par Tekkare. Démarrez une analyse, vous pouvez ensuite la personnaliser et l'enregistrer dans vos vues.`
+        : locale === 'en'
+          ? 'A view captures the filters of an analysis. Save your setup to find it again instantly.'
+          : `Une vue capture les filtres d'une analyse. Sauvegardez votre configuration pour la retrouver instantanément.`
+    "
+    :save-label="
+      saving || onTemplates || onShared
+        ? ''
+        : locale === 'en'
+          ? 'Save the current view'
+          : 'Sauvegarder la vue actuelle'
+    "
+    :save-disabled="current.length === 0"
+    :reset-label="
+      saving || onTemplates || onShared ? '' : locale === 'en' ? 'New view' : 'Nouvelle vue'
+    "
+    :menu="[]"
+    :renamable="!onTemplates"
+    :starrable="!onTemplates"
+    :loading="onTemplates ? false : loading"
+    :hide-tip="onTemplates"
+    :dirty-title="onTemplates || onShared ? '' : dirtyTitle"
+    :empty-title="
+      onTemplates
+        ? locale === 'en'
+          ? 'No template yet'
+          : 'Aucun template pour cette page'
+        : onShared
+          ? locale === 'en'
+            ? 'No view shared with you'
+            : 'Aucune vue partagée avec vous'
+          : ''
+    "
+    :empty-text="
+      onTemplates
+        ? locale === 'en'
+          ? 'Tekkare has not published a ready-made view for this analysis yet.'
+          : `Tekkare n'a pas encore publié de vue prête à l'emploi pour cette analyse.`
+        : onShared
+          ? locale === 'en'
+            ? 'Views your colleagues share with you show up here.'
+            : 'Les vues que vos collègues vous partagent apparaissent ici.'
+          : ''
+    "
+    :empty-action-label="
+      onTemplates || onShared || current.length === 0
+        ? ''
+        : locale === 'en'
+          ? 'Save your first view'
+          : 'Sauvegarder votre première vue'
+    "
+    :lang="locale === 'en' ? 'en' : 'fr'"
+    @save-current="openSave()"
+    @reset="startNew"
+    @activate="onTemplates ? start($event) : apply($event)"
+    @star="star"
+    @rename="rename"
+    @action="onAction"
+    @discard="discard"
+    @save="save"
+    @save-as="openSave(selected?.title ?? '')"
+  >
+    <template #before-list>
+      <!-- Le formulaire prend la place du bouton, dans le panneau : nommer une
+           vue ne merite pas une fenetre par-dessus la page qu'on est en train
+           de regarder. -->
+      <form v-if="saving && !onTemplates" class="vsave" @submit.prevent="confirmSave">
+        <label class="vsave_field">
+          <span class="vsave_label">{{ locale === "en" ? "View name" : "Nom de la vue" }}</span>
+          <input
+            v-model="draftTitle"
+            class="vsave_input"
+            :class="{ vsave_input_error: titleMissing }"
+            type="text"
+            :placeholder="
+              locale === 'en' ? 'e.g. Oncology monitoring' : 'ex. Veille oncologie'
+            "
+            autofocus
+          >
+        </label>
+        <label class="vsave_field">
+          <span class="vsave_label">
+            {{ locale === "en" ? "Description (optional)" : "Description (optionnelle)" }}
+          </span>
+          <textarea v-model="draftDescription" class="vsave_input" rows="2" />
+        </label>
+        <p v-if="titleMissing" class="vsave_error">
+          {{ locale === "en" ? "A name is required." : "Un nom est nécessaire." }}
+        </p>
+        <div class="vsave_actions">
+          <RmButton variant="secondary" size="sm" @click="saving = false">
+            {{ locale === "en" ? "Cancel" : "Annuler" }}
+          </RmButton>
+          <RmButton variant="primary" size="sm" type="submit" prefix-icon="BookmarkSimple">
+            {{ locale === "en" ? "Save" : "Sauvegarder" }}
+          </RmButton>
+        </div>
+      </form>
+    </template>
+  </RmSavedViews>
+
+  <RmShareDialog
+    v-model="sharing"
+    :title="shareTarget?.title ?? ''"
+    :members="shareMembers"
+    :visibility="shareTarget?.visibility ?? 'private'"
+    :shared-with="shareTarget?.sharedWith ?? []"
+    :can-template="isSuperAdmin"
+    :is-template="shareTarget?.isTemplate ?? false"
+    :target-workspaces="shareTarget?.targetWorkspaces ?? []"
+    :workspaces="workspaces"
+    :template-note="templateNote"
+    :lang="locale === 'en' ? 'en' : 'fr'"
+    @search="onShareSearch"
+    @save="confirmShare"
+  />
+  </div>
+</template>
+
+<style scoped>
+.full_width {
+  align-self: stretch;
+  width: 100%;
+}
+
+.vsave {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 16px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  background: var(--bg-surface-2);
+}
+
+.vsave_field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.vsave_label {
+  color: var(--text-muted);
+  font-size: var(--font-11);
+  font-weight: var(--weight-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.vsave_input {
+  padding: 8px 10px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--font-13);
+  outline: none;
+  resize: vertical;
+}
+
+.vsave_input:focus {
+  border-color: var(--color-secondary);
+  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.1);
+}
+
+.vsave_input_error,
+.vsave_input_error:focus {
+  border-color: var(--color-danger);
+}
+
+.vsave_error {
+  margin: 0;
+  color: var(--color-danger);
+  font-size: var(--font-12);
+}
+
+.vsave_actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.vedit {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.vedit_back {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--text-muted);
+  font-family: var(--font-sans);
+  font-size: var(--font-12);
+  cursor: pointer;
+}
+
+.vedit_back:hover {
+  color: var(--color-secondary);
+}
+
+.vedit_title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  color: var(--text-primary);
+  font-size: var(--font-16);
+  font-weight: var(--weight-semibold);
+}
+
+.vedit_title_icon {
+  color: var(--color-secondary);
+}
+
+.vedit_hint {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: var(--font-12);
+}
+
+.vedit_content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 10px 12px;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface-2);
+}
+
+.vedit_chip {
+  display: inline-flex;
+  gap: 6px;
+  max-width: 100%;
+  padding: 3px 8px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-pill);
+  background: var(--bg-surface);
+  font-size: var(--font-12);
+}
+
+.vedit_chip_k {
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.vedit_chip_v {
+  overflow: hidden;
+  color: var(--text-primary);
+  font-weight: var(--weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vedit_empty {
+  color: var(--text-muted);
+  font-size: var(--font-12);
+  font-style: italic;
+}
+
+.vedit_check {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  color: var(--text-secondary);
+  font-size: var(--font-13);
+  cursor: pointer;
+}
+
+.vedit_check input {
+  margin-top: 2px;
+  accent-color: var(--color-secondary);
+}
+
+.vedit_check_hint {
+  color: var(--text-muted);
+}
+
+.vedit_content_head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* Le formulaire se lit de haut en bas, a gauche : ses actions aussi, bien
+   detachees du contenu. Collees au bas du panneau quand il defile : elles ne
+   sortent jamais du champ. */
+.vedit_actions {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  justify-content: flex-start;
+  margin-top: 24px;
+  padding: 12px 0;
+  background: var(--bg-surface);
+}
+</style>