From 0ade114cac8292e7a5ef6cf9f4a2ef56e14f2f55 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Thu, 16 Jul 2026 20:11:58 +0200
Subject: [PATCH 01/14] JSON picker

---
 .../communication/library/files_controller.rb |  8 ++-
 app/models/communication/file/picker.rb       | 65 +++++++++++++++++++
 .../library/files/_picker.html.erb            |  0
 .../library/files/index.json.jbuilder         |  0
 .../library/files/picker.json.jbuilder        | 12 ++++
 config/routes/admin/communication.rb          |  2 +-
 6 files changed, 84 insertions(+), 3 deletions(-)
 create mode 100644 app/models/communication/file/picker.rb
 delete mode 100644 app/views/admin/communication/library/files/_picker.html.erb
 delete mode 100644 app/views/admin/communication/library/files/index.json.jbuilder
 create mode 100644 app/views/admin/communication/library/files/picker.json.jbuilder

diff --git a/app/controllers/admin/communication/library/files_controller.rb b/app/controllers/admin/communication/library/files_controller.rb
index 7092e9a40e..f2fc659a0e 100644
--- a/app/controllers/admin/communication/library/files_controller.rb
+++ b/app/controllers/admin/communication/library/files_controller.rb
@@ -30,8 +30,12 @@ def direct_upload
     @file = @localization.file
   end
 
-  def pick
-    # TODO generic picker
+  def picker
+    @picker = Communication::File::Picker.new(
+      @files,
+      current_language,
+      params
+    )
   end
 
   def edit
diff --git a/app/models/communication/file/picker.rb b/app/models/communication/file/picker.rb
new file mode 100644
index 0000000000..f6e8da7580
--- /dev/null
+++ b/app/models/communication/file/picker.rb
@@ -0,0 +1,65 @@
+class Communication::File::Picker
+  attr_reader :objects, :language, :params
+
+  def initialize(objects, language, params)
+    @objects = objects
+    @language = language
+    @params = params.to_unsafe_hash
+  end
+
+  def parameters
+    {
+      search: search,
+      filters: filters,
+      sorts: sorts,
+      pagination: pagination
+    }
+  end
+
+  def paginated_objects
+    @paginated_objects ||= objects.ordered(language).page(params[:page])
+  end
+
+  protected
+
+  def search
+    ''
+  end
+
+  def filters
+    [
+      {
+        id: 'categories',
+        name: 'Catégories',
+        values: [
+          { id: 'cat-1', name: 'Catégorie 1', selected: false }
+        ]
+      }
+    ]
+  end
+  
+  def sorts
+    [
+      {
+        id: 'date-desc',
+        name: 'Trier du plus récent au plus ancien',
+        selected: true
+      },
+      {
+        id: 'date-asc',
+        name: 'Trier du plus ancien au plus récent',
+        selected: false
+      }
+    ]
+  end
+
+  def pagination
+    {
+      current_page: paginated_objects.current_page,
+      limit_value:  paginated_objects.limit_value,
+      total_count:  paginated_objects.total_count,
+      total_pages:  paginated_objects.total_pages
+    }
+  end
+
+end
\ No newline at end of file
diff --git a/app/views/admin/communication/library/files/_picker.html.erb b/app/views/admin/communication/library/files/_picker.html.erb
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/app/views/admin/communication/library/files/index.json.jbuilder b/app/views/admin/communication/library/files/index.json.jbuilder
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/app/views/admin/communication/library/files/picker.json.jbuilder b/app/views/admin/communication/library/files/picker.json.jbuilder
new file mode 100644
index 0000000000..58c74dc4f3
--- /dev/null
+++ b/app/views/admin/communication/library/files/picker.json.jbuilder
@@ -0,0 +1,12 @@
+json.parameters @picker.parameters
+json.results @picker.paginated_objects do |file|
+  l10n = file.localized_in(current_language)
+  json.id file.id
+  json.name l10n.name
+  json.icon l10n.icon
+  json.snippet render(
+      partial: 'admin/communication/library/files/file',
+      locals: { file: file },
+      formats: [:html]
+    )
+end
\ No newline at end of file
diff --git a/config/routes/admin/communication.rb b/config/routes/admin/communication.rb
index 58cfb1278f..2d1e372e30 100644
--- a/config/routes/admin/communication.rb
+++ b/config/routes/admin/communication.rb
@@ -292,7 +292,7 @@
     resources :files do
       collection do
         post 'direct-upload' => 'files#direct_upload', as: :direct_upload
-        post 'pick' => 'files#pick', as: :pick
+        get 'picker' => 'files#picker', as: :picker, defaults: { format: :json }
         resources :categories, controller: '/admin/communication/library/files/categories', as: 'file_categories' do
           collection do
             post :reorder

From 21c022ebc8da5c7713fc227137391b4adb96f193 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Thu, 16 Jul 2026 21:54:23 +0200
Subject: [PATCH 02/14] picker

---
 .../apps/blocks-editor/components/Editor.vue  |   8 +-
 app/javascript/apps/components/Picker.vue     | 172 ++++++++++++++++++
 app/models/communication/file/picker.rb       |   4 +-
 .../blocks/components/file/_edit.html.erb     |   4 +
 .../library/files/picker.json.jbuilder        |   8 +-
 5 files changed, 188 insertions(+), 8 deletions(-)
 create mode 100644 app/javascript/apps/components/Picker.vue

diff --git a/app/javascript/apps/blocks-editor/components/Editor.vue b/app/javascript/apps/blocks-editor/components/Editor.vue
index 5befbb3e0b..524a41feb0 100644
--- a/app/javascript/apps/blocks-editor/components/Editor.vue
+++ b/app/javascript/apps/blocks-editor/components/Editor.vue
@@ -6,6 +6,7 @@ import CodeInput from './inputs/CodeInput.vue';
 import UploadInput from './inputs/UploadInput.vue';
 import FileUploadInput from './inputs/FileUploadInput.vue';
 import MultiImageInput from './inputs/MultiImageInput.vue';
+import Picker from '../../components/Picker.vue';
 
 // Renders the block-edit form fetched from the server, mounts a fresh inner
 // Vue app on it for reactive v-model bindings, and unmounts on close.
@@ -143,12 +144,13 @@ export default {
         },
       });
 
-      this.innerApp.component('draggable', VueDraggableNext);
-      this.innerApp.component('RichTextInput', RichTextInput);
       this.innerApp.component('CodeInput', CodeInput);
-      this.innerApp.component('UploadInput', UploadInput);
+      this.innerApp.component('draggable', VueDraggableNext);
       this.innerApp.component('FileUploadInput', FileUploadInput);
       this.innerApp.component('MultiImageInput', MultiImageInput);
+      this.innerApp.component('Picker', Picker);
+      this.innerApp.component('RichTextInput', RichTextInput);
+      this.innerApp.component('UploadInput', UploadInput);
 
       this.innerApp.mount(root);
     },
diff --git a/app/javascript/apps/components/Picker.vue b/app/javascript/apps/components/Picker.vue
new file mode 100644
index 0000000000..c858939e15
--- /dev/null
+++ b/app/javascript/apps/components/Picker.vue
@@ -0,0 +1,172 @@
+<script>
+import { ArrowRight, ArrowLeft } from '@lucide/vue';
+
+export default {
+  name: 'Picker',
+  components: {
+    ArrowRight,
+    ArrowLeft
+  },
+  props: [
+    'modelValue',
+    'endpoint',
+  ],
+  emits: ['update:modelValue'],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit('update:modelValue', value);
+      }
+    }
+  },
+  data () {
+    return {
+      modal: false,
+      term: '',
+      filters: {},
+      sorts: {},
+      pagination: {},
+      results: {},
+    }
+  },
+  methods: {
+    open() {
+      this.modal = true;
+      document.body.classList.add("modal-open");
+      this.search();
+    },
+    close() {
+      this.modal = false;
+      document.body.classList.remove("modal-open");
+    },
+    search() {
+      var xhr = new XMLHttpRequest(),
+          url = this.endpoint,
+          data;
+      xhr.onreadystatechange = function() {
+        if (xhr.readyState == 4 && xhr.status == 200) {
+          data = JSON.parse(xhr.responseText);
+          this.search = data.parameters.search;
+          this.filters = data.parameters.filters;
+          this.sorts = data.parameters.sorts;
+          this.pagination = data.parameters.pagination;
+          this.results = data.results;
+        }
+      }.bind(this);
+      xhr.open("GET", url, false);
+      xhr.send();
+    },
+    select(event, object) {
+      event.preventDefault();
+      this.value = object.data;
+      this.close();
+    },
+    previousPage() {
+      this.pagination.current_page = this.pagination.current_page - 1;
+      this.search();
+    },
+    nextPage() {
+      this.pagination.current_page = this.pagination.current_page + 1
+      this.search();
+    },
+  },
+};
+</script>
+
+<template>
+  <section class="vue__picker">
+    <a  class="btn btn-sm"
+        @click="open">
+      Choisir un fichier dans la bibliothèque de fichiers
+    </a>
+    <div  class="modal"
+          tabindex="-1"
+          role="dialog"
+          :class="{'d-block': modal}">
+      <div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <div class="col-auto d-none d-lg-block ">
+              <h5 class="modal-title">Sélecteur de fichiers</h5>
+            </div>
+            <button type="button"
+                    class="btn-close"
+                    @click="close">
+            </button>
+          </div>
+          <div class="modal-body overflow-x-hidden">
+            <div class="row">
+              <div class="col-md-2">
+                <div class="mb-3">
+                  <b>Recherche</b>
+                  <input  type="text"
+                          name="search"
+                          class="form-control mb-2"
+                          placeholder="Tapez le texte"
+                          v-model="term"
+                          @keyup.enter="search">
+                  <button type="button"
+                          class="btn btn-primary btn-sm mb-2"
+                          aria-label="Chercher"
+                          @click="search">
+                    Chercher
+                  </button>
+                </div>
+                <div class="mb-3">
+                  <b>Filtrer</b>
+                  <div v-for="filter in filters">
+                    {{ filter.name }}
+                    <div v-for="value in filter.values">
+                      {{ value.name }}
+                    </div>
+                  </div>
+                </div>
+                <div class="mb-3">
+                  <b>Trier</b>
+                  <div v-for="sort in sorts">
+                    {{ sort.name }}
+                    {{ sort.selected }}
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-10">
+                <p v-if="results.length === 0" >Aucun fichier</p>
+                <div v-if="pagination.total_pages > 1" class="d-flex justify-content-between mb-2">
+                  <div class="vue__media-picker__button_container">
+                    <button
+                      class="btn btn-sm ps-0"
+                      v-if="pagination.current_page > 1"
+                      @click="previousPage"
+                      title="Page précédente">
+                      <ArrowLeft stroke-width="1.5" />
+                    </button>
+                  </div>
+                  <p class="m-0">
+                    {{ pagination.current_page }} / {{ pagination.total_pages }}
+                  </p>
+                  <div class="vue__media-picker__button_container text-end">
+                    <button
+                      class="btn btn-sm pe-0"
+                      v-if="pagination.current_page < pagination.total_pages"
+                      @click="nextPage"
+                      title="Page suivante">
+                      <ArrowRight stroke-width="1.5" />
+                    </button>
+                  </div>
+                </div>
+                <div class="row g-2">
+                  <div v-for="object in results">
+                    <div v-html="object.snippet" @click="select($event, object)"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/models/communication/file/picker.rb b/app/models/communication/file/picker.rb
index f6e8da7580..862e1d9830 100644
--- a/app/models/communication/file/picker.rb
+++ b/app/models/communication/file/picker.rb
@@ -42,12 +42,12 @@ def sorts
     [
       {
         id: 'date-desc',
-        name: 'Trier du plus récent au plus ancien',
+        name: 'Les plus récents d\'abord',
         selected: true
       },
       {
         id: 'date-asc',
-        name: 'Trier du plus ancien au plus récent',
+        name: 'Les plus anciens d\'abord',
         selected: false
       }
     ]
diff --git a/app/views/admin/communication/blocks/components/file/_edit.html.erb b/app/views/admin/communication/blocks/components/file/_edit.html.erb
index 87e5fe62a0..46d4e2079d 100644
--- a/app/views/admin/communication/blocks/components/file/_edit.html.erb
+++ b/app/views/admin/communication/blocks/components/file/_edit.html.erb
@@ -4,6 +4,10 @@ remove = t('admin.communication.blocks.components.file.input.remove')
 hint = file_hint if hint.blank?
 accept ||= '*'
 %>
+<Picker
+  v-model="<%= model %>.<%= property %>"
+  endpoint="<%= picker_admin_communication_files_path %>">
+</Picker>
 <file-upload-input
   v-model="<%= model %>.<%= property %>"
   upload-url="<%= direct_upload_admin_communication_files_path %>"
diff --git a/app/views/admin/communication/library/files/picker.json.jbuilder b/app/views/admin/communication/library/files/picker.json.jbuilder
index 58c74dc4f3..f7672b82d2 100644
--- a/app/views/admin/communication/library/files/picker.json.jbuilder
+++ b/app/views/admin/communication/library/files/picker.json.jbuilder
@@ -1,9 +1,11 @@
 json.parameters @picker.parameters
 json.results @picker.paginated_objects do |file|
   l10n = file.localized_in(current_language)
-  json.id file.id
-  json.name l10n.name
-  json.icon l10n.icon
+  json.data do
+    json.communication_file_id file.id
+    json.filename l10n.original_filename
+    json.name l10n.name
+  end
   json.snippet render(
       partial: 'admin/communication/library/files/file',
       locals: { file: file },

From c5b0328cb7d8cfd440420bbc938147cdf08984bd Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Thu, 16 Jul 2026 22:29:46 +0200
Subject: [PATCH 03/14] Pagination

---
 app/javascript/apps/components/Picker.vue     | 66 ++++++-------------
 .../apps/components/picker/Pagination.vue     | 55 ++++++++++++++++
 app/models/communication/file/picker.rb       |  8 ++-
 3 files changed, 80 insertions(+), 49 deletions(-)
 create mode 100644 app/javascript/apps/components/picker/Pagination.vue

diff --git a/app/javascript/apps/components/Picker.vue b/app/javascript/apps/components/Picker.vue
index c858939e15..68c55db0c0 100644
--- a/app/javascript/apps/components/Picker.vue
+++ b/app/javascript/apps/components/Picker.vue
@@ -1,11 +1,10 @@
 <script>
-import { ArrowRight, ArrowLeft } from '@lucide/vue';
+import Pagination from './picker/Pagination.vue';
 
 export default {
   name: 'Picker',
   components: {
-    ArrowRight,
-    ArrowLeft
+    Pagination,
   },
   props: [
     'modelValue',
@@ -25,10 +24,8 @@ export default {
   data () {
     return {
       modal: false,
-      term: '',
-      filters: {},
-      sorts: {},
-      pagination: {},
+      url: '',
+      parameters: {},
       results: {},
     }
   },
@@ -44,32 +41,30 @@ export default {
     },
     search() {
       var xhr = new XMLHttpRequest(),
-          url = this.endpoint,
           data;
+      this.buildUrl();
       xhr.onreadystatechange = function() {
         if (xhr.readyState == 4 && xhr.status == 200) {
           data = JSON.parse(xhr.responseText);
-          this.search = data.parameters.search;
-          this.filters = data.parameters.filters;
-          this.sorts = data.parameters.sorts;
-          this.pagination = data.parameters.pagination;
+          this.parameters = data.parameters;
           this.results = data.results;
         }
       }.bind(this);
-      xhr.open("GET", url, false);
+      xhr.open("GET", this.url, false);
       xhr.send();
     },
+    buildUrl() {
+      this.url = this.endpoint;
+      if (this.parameters.pagination) {
+        this.url += '?page=' + this.parameters.pagination.current_page;
+      }
+    },
     select(event, object) {
       event.preventDefault();
       this.value = object.data;
       this.close();
     },
-    previousPage() {
-      this.pagination.current_page = this.pagination.current_page - 1;
-      this.search();
-    },
-    nextPage() {
-      this.pagination.current_page = this.pagination.current_page + 1
+    changePage() {
       this.search();
     },
   },
@@ -106,7 +101,7 @@ export default {
                           name="search"
                           class="form-control mb-2"
                           placeholder="Tapez le texte"
-                          v-model="term"
+                          v-model="parameters.term"
                           @keyup.enter="search">
                   <button type="button"
                           class="btn btn-primary btn-sm mb-2"
@@ -117,7 +112,7 @@ export default {
                 </div>
                 <div class="mb-3">
                   <b>Filtrer</b>
-                  <div v-for="filter in filters">
+                  <div v-for="filter in parameters.filters">
                     {{ filter.name }}
                     <div v-for="value in filter.values">
                       {{ value.name }}
@@ -126,37 +121,16 @@ export default {
                 </div>
                 <div class="mb-3">
                   <b>Trier</b>
-                  <div v-for="sort in sorts">
+                  <div v-for="sort in parameters.sorts">
                     {{ sort.name }}
                     {{ sort.selected }}
                   </div>
                 </div>
               </div>
               <div class="col-md-10">
-                <p v-if="results.length === 0" >Aucun fichier</p>
-                <div v-if="pagination.total_pages > 1" class="d-flex justify-content-between mb-2">
-                  <div class="vue__media-picker__button_container">
-                    <button
-                      class="btn btn-sm ps-0"
-                      v-if="pagination.current_page > 1"
-                      @click="previousPage"
-                      title="Page précédente">
-                      <ArrowLeft stroke-width="1.5" />
-                    </button>
-                  </div>
-                  <p class="m-0">
-                    {{ pagination.current_page }} / {{ pagination.total_pages }}
-                  </p>
-                  <div class="vue__media-picker__button_container text-end">
-                    <button
-                      class="btn btn-sm pe-0"
-                      v-if="pagination.current_page < pagination.total_pages"
-                      @click="nextPage"
-                      title="Page suivante">
-                      <ArrowRight stroke-width="1.5" />
-                    </button>
-                  </div>
-                </div>
+                <Pagination 
+                  :data="parameters.pagination"
+                  @changePage="changePage" />
                 <div class="row g-2">
                   <div v-for="object in results">
                     <div v-html="object.snippet" @click="select($event, object)"></div>
diff --git a/app/javascript/apps/components/picker/Pagination.vue b/app/javascript/apps/components/picker/Pagination.vue
new file mode 100644
index 0000000000..1480a2fab7
--- /dev/null
+++ b/app/javascript/apps/components/picker/Pagination.vue
@@ -0,0 +1,55 @@
+<script>
+import { ArrowRight, ArrowLeft } from '@lucide/vue';
+
+export default {
+  components: {
+    ArrowRight,
+    ArrowLeft,
+  },
+  props: [
+    'data'
+  ],
+  emits: [
+    'changePage',
+  ],
+  methods: {
+    previousPage() {
+      this.data.current_page = this.data.current_page - 1;
+      this.$emit('changePage')
+    },
+    nextPage() {
+      this.data.current_page = this.data.current_page + 1
+      this.$emit('changePage')
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="vue__picker__pagination">
+    <p v-if="data?.total_count === 0" >Aucun fichier</p>
+    <div v-if="data?.total_pages > 1" class="d-flex justify-content-between mb-2">
+      <div class="vue__picker__button_container">
+        <button
+          class="btn btn-sm ps-0"
+          v-if="data?.current_page > 1"
+          @click.prevent="previousPage"
+          title="Page précédente">
+          <ArrowLeft stroke-width="1.5" />
+        </button>
+      </div>
+      <p class="m-0">
+        {{ data?.current_page }} / {{ data?.total_pages }}
+      </p>
+      <div class="vue__media-picker__button_container text-end">
+        <button
+          class="btn btn-sm pe-0"
+          v-if="data?.current_page < data?.total_pages"
+          @click.prevent="nextPage"
+          title="Page suivante">
+          <ArrowRight stroke-width="1.5" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/models/communication/file/picker.rb b/app/models/communication/file/picker.rb
index 862e1d9830..0e3494c3da 100644
--- a/app/models/communication/file/picker.rb
+++ b/app/models/communication/file/picker.rb
@@ -9,7 +9,7 @@ def initialize(objects, language, params)
 
   def parameters
     {
-      search: search,
+      term: term,
       filters: filters,
       sorts: sorts,
       pagination: pagination
@@ -17,12 +17,14 @@ def parameters
   end
 
   def paginated_objects
-    @paginated_objects ||= objects.ordered(language).page(params[:page])
+    @paginated_objects ||= objects.ordered(language)
+                                  .page(params[:page])
+                                  #.per(2)
   end
 
   protected
 
-  def search
+  def term
     ''
   end
 

From 37a3631e1b3fab921ee664cc4a00e3db77488f44 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Thu, 16 Jul 2026 22:41:33 +0200
Subject: [PATCH 04/14] Components

---
 app/javascript/apps/components/Picker.vue     | 47 ++++---------------
 .../apps/components/picker/Pagination.vue     | 22 ++++-----
 .../apps/components/picker/Parameters.vue     | 47 +++++++++++++++++++
 app/models/communication/file/picker.rb       |  4 +-
 4 files changed, 69 insertions(+), 51 deletions(-)
 create mode 100644 app/javascript/apps/components/picker/Parameters.vue

diff --git a/app/javascript/apps/components/Picker.vue b/app/javascript/apps/components/Picker.vue
index 68c55db0c0..6de861abb5 100644
--- a/app/javascript/apps/components/Picker.vue
+++ b/app/javascript/apps/components/Picker.vue
@@ -1,10 +1,12 @@
 <script>
 import Pagination from './picker/Pagination.vue';
+import Parameters from './picker/Parameters.vue';
 
 export default {
   name: 'Picker',
   components: {
     Pagination,
+    Parameters,
   },
   props: [
     'modelValue',
@@ -54,9 +56,9 @@ export default {
       xhr.send();
     },
     buildUrl() {
-      this.url = this.endpoint;
+      this.url = this.endpoint + '?';
       if (this.parameters.pagination) {
-        this.url += '?page=' + this.parameters.pagination.current_page;
+        this.url += '&page=' + this.parameters.pagination.current_page;
       }
     },
     select(event, object) {
@@ -64,9 +66,6 @@ export default {
       this.value = object.data;
       this.close();
     },
-    changePage() {
-      this.search();
-    },
   },
 };
 </script>
@@ -95,42 +94,14 @@ export default {
           <div class="modal-body overflow-x-hidden">
             <div class="row">
               <div class="col-md-2">
-                <div class="mb-3">
-                  <b>Recherche</b>
-                  <input  type="text"
-                          name="search"
-                          class="form-control mb-2"
-                          placeholder="Tapez le texte"
-                          v-model="parameters.term"
-                          @keyup.enter="search">
-                  <button type="button"
-                          class="btn btn-primary btn-sm mb-2"
-                          aria-label="Chercher"
-                          @click="search">
-                    Chercher
-                  </button>
-                </div>
-                <div class="mb-3">
-                  <b>Filtrer</b>
-                  <div v-for="filter in parameters.filters">
-                    {{ filter.name }}
-                    <div v-for="value in filter.values">
-                      {{ value.name }}
-                    </div>
-                  </div>
-                </div>
-                <div class="mb-3">
-                  <b>Trier</b>
-                  <div v-for="sort in parameters.sorts">
-                    {{ sort.name }}
-                    {{ sort.selected }}
-                  </div>
-                </div>
+                <Parameters
+                  :parameters="parameters"
+                  @change="search" />
               </div>
               <div class="col-md-10">
                 <Pagination 
-                  :data="parameters.pagination"
-                  @changePage="changePage" />
+                  :pagination="parameters.pagination"
+                  @change="search" />
                 <div class="row g-2">
                   <div v-for="object in results">
                     <div v-html="object.snippet" @click="select($event, object)"></div>
diff --git a/app/javascript/apps/components/picker/Pagination.vue b/app/javascript/apps/components/picker/Pagination.vue
index 1480a2fab7..1dc260ab1b 100644
--- a/app/javascript/apps/components/picker/Pagination.vue
+++ b/app/javascript/apps/components/picker/Pagination.vue
@@ -7,19 +7,19 @@ export default {
     ArrowLeft,
   },
   props: [
-    'data'
+    'pagination'
   ],
   emits: [
-    'changePage',
+    'change',
   ],
   methods: {
     previousPage() {
-      this.data.current_page = this.data.current_page - 1;
-      this.$emit('changePage')
+      this.pagination.current_page = this.pagination.current_page - 1;
+      this.$emit('change')
     },
     nextPage() {
-      this.data.current_page = this.data.current_page + 1
-      this.$emit('changePage')
+      this.pagination.current_page = this.pagination.current_page + 1
+      this.$emit('change')
     },
   }
 };
@@ -27,24 +27,24 @@ export default {
 
 <template>
   <div class="vue__picker__pagination">
-    <p v-if="data?.total_count === 0" >Aucun fichier</p>
-    <div v-if="data?.total_pages > 1" class="d-flex justify-content-between mb-2">
+    <p v-if="pagination?.total_count === 0" >Aucun fichier</p>
+    <div v-if="pagination?.total_pages > 1" class="d-flex justify-content-between mb-2">
       <div class="vue__picker__button_container">
         <button
           class="btn btn-sm ps-0"
-          v-if="data?.current_page > 1"
+          v-if="pagination?.current_page > 1"
           @click.prevent="previousPage"
           title="Page précédente">
           <ArrowLeft stroke-width="1.5" />
         </button>
       </div>
       <p class="m-0">
-        {{ data?.current_page }} / {{ data?.total_pages }}
+        {{ pagination?.current_page }} / {{ pagination?.total_pages }}
       </p>
       <div class="vue__media-picker__button_container text-end">
         <button
           class="btn btn-sm pe-0"
-          v-if="data?.current_page < data?.total_pages"
+          v-if="pagination?.current_page < pagination?.total_pages"
           @click.prevent="nextPage"
           title="Page suivante">
           <ArrowRight stroke-width="1.5" />
diff --git a/app/javascript/apps/components/picker/Parameters.vue b/app/javascript/apps/components/picker/Parameters.vue
new file mode 100644
index 0000000000..48776eae44
--- /dev/null
+++ b/app/javascript/apps/components/picker/Parameters.vue
@@ -0,0 +1,47 @@
+<script>
+
+export default {
+  props: [
+    'parameters'
+  ],
+  emits: [
+    'change',
+  ],
+};
+</script>
+
+<template>
+  <div class="vue__picker__parameters">
+    <div class="mb-3">
+      <b>Recherche</b>
+      <input  type="text"
+              name="search"
+              class="form-control mb-2"
+              placeholder="Tapez le texte"
+              v-model="parameters.term"
+              @keydown.enter.prevent="$emit('change')">
+      <button type="button"
+              class="btn btn-primary btn-sm mb-2"
+              aria-label="Chercher"
+              @click.prevent="$emit('change')">
+        Chercher
+      </button>
+    </div>
+    <div class="mb-3">
+      <b>Filtrer</b>
+      <div v-for="filter in parameters.filters">
+        {{ filter.name }}
+        <div v-for="value in filter.values">
+          {{ value.name }}
+        </div>
+      </div>
+    </div>
+    <div class="mb-3">
+      <b>Trier</b>
+      <div v-for="sort in parameters.sorts">
+        {{ sort.name }}
+        {{ sort.selected }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/models/communication/file/picker.rb b/app/models/communication/file/picker.rb
index 0e3494c3da..97a51889dc 100644
--- a/app/models/communication/file/picker.rb
+++ b/app/models/communication/file/picker.rb
@@ -19,13 +19,13 @@ def parameters
   def paginated_objects
     @paginated_objects ||= objects.ordered(language)
                                   .page(params[:page])
-                                  #.per(2)
+                                  .per(2)
   end
 
   protected
 
   def term
-    ''
+    params[:term]
   end
 
   def filters

From 5d0df08f5f9b05f9f5dce504b6599f8b5d95a5d8 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Fri, 17 Jul 2026 07:18:26 +0200
Subject: [PATCH 05/14] test app

---
 .../communication/library/files_controller.rb | 16 +++----
 .../apps/blocks-editor/components/Editor.vue  |  2 +-
 app/javascript/apps/index.js                  |  2 +
 .../apps/{components => picker}/Picker.vue    | 43 +++++++++++++------
 app/javascript/apps/picker/PickerTestApp.vue  | 26 +++++++++++
 .../components}/Pagination.vue                |  8 +++-
 .../components}/Parameters.vue                |  1 -
 app/models/communication/file/picker.rb       | 21 ++++-----
 .../blocks/components/file/_edit.html.erb     |  2 +-
 .../library/files/picker.html.erb             |  6 +++
 .../library/files/picker.json.jbuilder        |  1 +
 config/routes/admin/communication.rb          |  2 +-
 12 files changed, 93 insertions(+), 37 deletions(-)
 rename app/javascript/apps/{components => picker}/Picker.vue (73%)
 create mode 100644 app/javascript/apps/picker/PickerTestApp.vue
 rename app/javascript/apps/{components/picker => picker/components}/Pagination.vue (90%)
 rename app/javascript/apps/{components/picker => picker/components}/Parameters.vue (99%)
 create mode 100644 app/views/admin/communication/library/files/picker.html.erb

diff --git a/app/controllers/admin/communication/library/files_controller.rb b/app/controllers/admin/communication/library/files_controller.rb
index f2fc659a0e..f0cd5256a7 100644
--- a/app/controllers/admin/communication/library/files_controller.rb
+++ b/app/controllers/admin/communication/library/files_controller.rb
@@ -13,6 +13,14 @@ def index
     @feature_nav = 'navigation/admin/communication/files'
   end
 
+  def picker
+    @picker = Communication::File::Picker.new(
+      @files,
+      current_language,
+      params
+    )
+  end
+
   def show
     @contexts = @l10n.contexts
     breadcrumb
@@ -30,14 +38,6 @@ def direct_upload
     @file = @localization.file
   end
 
-  def picker
-    @picker = Communication::File::Picker.new(
-      @files,
-      current_language,
-      params
-    )
-  end
-
   def edit
     @categories = categories
     breadcrumb
diff --git a/app/javascript/apps/blocks-editor/components/Editor.vue b/app/javascript/apps/blocks-editor/components/Editor.vue
index 524a41feb0..f4d43f99f2 100644
--- a/app/javascript/apps/blocks-editor/components/Editor.vue
+++ b/app/javascript/apps/blocks-editor/components/Editor.vue
@@ -6,7 +6,7 @@ import CodeInput from './inputs/CodeInput.vue';
 import UploadInput from './inputs/UploadInput.vue';
 import FileUploadInput from './inputs/FileUploadInput.vue';
 import MultiImageInput from './inputs/MultiImageInput.vue';
-import Picker from '../../components/Picker.vue';
+import Picker from '../../picker/Picker.vue';
 
 // Renders the block-edit form fetched from the server, mounts a fresh inner
 // Vue app on it for reactive v-model bindings, and unmounts on close.
diff --git a/app/javascript/apps/index.js b/app/javascript/apps/index.js
index 32e895fac7..67b42d4dd5 100644
--- a/app/javascript/apps/index.js
+++ b/app/javascript/apps/index.js
@@ -4,6 +4,7 @@ import SsoMappingApp from './sso-mapping/SsoMappingApp.vue';
 import MediaPickerApp from './media-picker/MediaPickerApp.vue';
 import TimeSlotsApp from './time-slots/TimeSlotsApp.vue';
 import BlocksEditorApp from './blocks-editor/BlocksEditorApp.vue';
+import PickerTestApp from './picker/PickerTestApp.vue';
 
 // Messages are precompiled at boot into public/vue/<locale>.json (cf.
 // config/initializers/vue_i18n.rb) and fetched once as a cacheable static file,
@@ -31,6 +32,7 @@ async function boot() {
   mount(MediaPickerApp, '#media-picker-app');
   mount(TimeSlotsApp, '#time-slots-app');
   mount(BlocksEditorApp, '#blocks-editor-app');
+  mount(PickerTestApp, '#picker-test-app');
 }
 
 boot();
diff --git a/app/javascript/apps/components/Picker.vue b/app/javascript/apps/picker/Picker.vue
similarity index 73%
rename from app/javascript/apps/components/Picker.vue
rename to app/javascript/apps/picker/Picker.vue
index 6de861abb5..ee9b62f861 100644
--- a/app/javascript/apps/components/Picker.vue
+++ b/app/javascript/apps/picker/Picker.vue
@@ -1,10 +1,12 @@
 <script>
-import Pagination from './picker/Pagination.vue';
-import Parameters from './picker/Parameters.vue';
+import { File } from '@lucide/vue';
+import Pagination from './components/Pagination.vue';
+import Parameters from './components/Parameters.vue';
 
 export default {
   name: 'Picker',
   components: {
+    File,
     Pagination,
     Parameters,
   },
@@ -28,16 +30,23 @@ export default {
       modal: false,
       url: '',
       parameters: {},
+      pagination: {},
       results: {},
     }
   },
   methods: {
     open() {
+      if (this.modal) {
+        return;
+      }
       this.modal = true;
       document.body.classList.add("modal-open");
       this.search();
     },
     close() {
+      if (!this.modal) {
+        return;
+      }
       this.modal = false;
       document.body.classList.remove("modal-open");
     },
@@ -49,6 +58,7 @@ export default {
         if (xhr.readyState == 4 && xhr.status == 200) {
           data = JSON.parse(xhr.responseText);
           this.parameters = data.parameters;
+          this.pagination = data.pagination;
           this.results = data.results;
         }
       }.bind(this);
@@ -57,8 +67,11 @@ export default {
     },
     buildUrl() {
       this.url = this.endpoint + '?';
-      if (this.parameters.pagination) {
-        this.url += '&page=' + this.parameters.pagination.current_page;
+      if (this.parameters) {
+        this.url += this.parameters.query_parameters;
+      }
+      if (this.pagination) {
+        this.url += this.pagination.query_parameters;
       }
     },
     select(event, object) {
@@ -71,11 +84,14 @@ export default {
 </script>
 
 <template>
-  <section class="vue__picker">
-    <a  class="btn btn-sm"
-        @click="open">
-      Choisir un fichier dans la bibliothèque de fichiers
-    </a>
+  <section
+    class="vue__picker"
+    @keydown.esc="close">
+    <button class="btn btn-sm mx-n2 d-flex align-items-center"
+      @click="open">
+      <File stroke-width="1.5" class="me-1" />
+      Choisir un fichier dans la bibliothèque
+    </button>
     <div  class="modal"
           tabindex="-1"
           role="dialog"
@@ -86,9 +102,10 @@ export default {
             <div class="col-auto d-none d-lg-block ">
               <h5 class="modal-title">Sélecteur de fichiers</h5>
             </div>
-            <button type="button"
-                    class="btn-close"
-                    @click="close">
+            <button
+              type="button"
+              class="btn-close"      
+              @click="close">
             </button>
           </div>
           <div class="modal-body overflow-x-hidden">
@@ -100,7 +117,7 @@ export default {
               </div>
               <div class="col-md-10">
                 <Pagination 
-                  :pagination="parameters.pagination"
+                  :pagination="pagination"
                   @change="search" />
                 <div class="row g-2">
                   <div v-for="object in results">
diff --git a/app/javascript/apps/picker/PickerTestApp.vue b/app/javascript/apps/picker/PickerTestApp.vue
new file mode 100644
index 0000000000..0fd1f3b463
--- /dev/null
+++ b/app/javascript/apps/picker/PickerTestApp.vue
@@ -0,0 +1,26 @@
+<script>
+import Picker from './Picker.vue'
+export default {
+  components: {
+    Picker,
+  },
+  data () {
+    return {
+      endpoint: '',
+      data: {},
+    }
+  },
+  mounted() {
+    this.endpoint = document.getElementById('picker-test-app').dataset.endpoint;
+  }
+};
+</script>
+
+<template>
+  <Picker
+    v-model="data"
+    :endpoint="endpoint" />
+  <div class="bg-light p-3 rounded mt-4">
+    <pre><code>{{ data }}</code></pre>
+  </div>
+</template>
diff --git a/app/javascript/apps/components/picker/Pagination.vue b/app/javascript/apps/picker/components/Pagination.vue
similarity index 90%
rename from app/javascript/apps/components/picker/Pagination.vue
rename to app/javascript/apps/picker/components/Pagination.vue
index 1dc260ab1b..ee3b78b7f4 100644
--- a/app/javascript/apps/components/picker/Pagination.vue
+++ b/app/javascript/apps/picker/components/Pagination.vue
@@ -13,13 +13,17 @@ export default {
     'change',
   ],
   methods: {
+    update() {
+      this.pagination.query_parameters = '&page=' + this.pagination.current_page;
+      this.$emit('change')
+    },
     previousPage() {
       this.pagination.current_page = this.pagination.current_page - 1;
-      this.$emit('change')
+      this.update();
     },
     nextPage() {
       this.pagination.current_page = this.pagination.current_page + 1
-      this.$emit('change')
+      this.update();
     },
   }
 };
diff --git a/app/javascript/apps/components/picker/Parameters.vue b/app/javascript/apps/picker/components/Parameters.vue
similarity index 99%
rename from app/javascript/apps/components/picker/Parameters.vue
rename to app/javascript/apps/picker/components/Parameters.vue
index 48776eae44..b08f5ffcbf 100644
--- a/app/javascript/apps/components/picker/Parameters.vue
+++ b/app/javascript/apps/picker/components/Parameters.vue
@@ -1,5 +1,4 @@
 <script>
-
 export default {
   props: [
     'parameters'
diff --git a/app/models/communication/file/picker.rb b/app/models/communication/file/picker.rb
index 97a51889dc..473870624f 100644
--- a/app/models/communication/file/picker.rb
+++ b/app/models/communication/file/picker.rb
@@ -12,7 +12,17 @@ def parameters
       term: term,
       filters: filters,
       sorts: sorts,
-      pagination: pagination
+      query_parameters: '',
+    }
+  end
+
+  def pagination
+    {
+      current_page: paginated_objects.current_page,
+      limit_value: paginated_objects.limit_value,
+      total_count: paginated_objects.total_count,
+      total_pages: paginated_objects.total_pages,
+      query_parameters: "&page=#{paginated_objects.current_page}"
     }
   end
 
@@ -55,13 +65,4 @@ def sorts
     ]
   end
 
-  def pagination
-    {
-      current_page: paginated_objects.current_page,
-      limit_value:  paginated_objects.limit_value,
-      total_count:  paginated_objects.total_count,
-      total_pages:  paginated_objects.total_pages
-    }
-  end
-
 end
\ No newline at end of file
diff --git a/app/views/admin/communication/blocks/components/file/_edit.html.erb b/app/views/admin/communication/blocks/components/file/_edit.html.erb
index 46d4e2079d..5a9baf7182 100644
--- a/app/views/admin/communication/blocks/components/file/_edit.html.erb
+++ b/app/views/admin/communication/blocks/components/file/_edit.html.erb
@@ -6,7 +6,7 @@ accept ||= '*'
 %>
 <Picker
   v-model="<%= model %>.<%= property %>"
-  endpoint="<%= picker_admin_communication_files_path %>">
+  endpoint="<%= picker_admin_communication_files_path(format: :json) %>">
 </Picker>
 <file-upload-input
   v-model="<%= model %>.<%= property %>"
diff --git a/app/views/admin/communication/library/files/picker.html.erb b/app/views/admin/communication/library/files/picker.html.erb
new file mode 100644
index 0000000000..4215cfb8ae
--- /dev/null
+++ b/app/views/admin/communication/library/files/picker.html.erb
@@ -0,0 +1,6 @@
+<% content_for :title, 'Test du picker' %>
+
+<div
+  id="picker-test-app"
+  data-endpoint="<%= picker_admin_communication_files_path(format: :json) %>">
+</div>
\ No newline at end of file
diff --git a/app/views/admin/communication/library/files/picker.json.jbuilder b/app/views/admin/communication/library/files/picker.json.jbuilder
index f7672b82d2..b108213a08 100644
--- a/app/views/admin/communication/library/files/picker.json.jbuilder
+++ b/app/views/admin/communication/library/files/picker.json.jbuilder
@@ -1,4 +1,5 @@
 json.parameters @picker.parameters
+json.pagination @picker.pagination
 json.results @picker.paginated_objects do |file|
   l10n = file.localized_in(current_language)
   json.data do
diff --git a/config/routes/admin/communication.rb b/config/routes/admin/communication.rb
index 2d1e372e30..890f7bd80d 100644
--- a/config/routes/admin/communication.rb
+++ b/config/routes/admin/communication.rb
@@ -292,7 +292,7 @@
     resources :files do
       collection do
         post 'direct-upload' => 'files#direct_upload', as: :direct_upload
-        get 'picker' => 'files#picker', as: :picker, defaults: { format: :json }
+        get 'picker' => 'files#picker', as: :picker
         resources :categories, controller: '/admin/communication/library/files/categories', as: 'file_categories' do
           collection do
             post :reorder

From 74ad53b44427e73e5b773f451b5400a86b2cd316 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Fri, 17 Jul 2026 07:29:42 +0200
Subject: [PATCH 06/14] wip

---
 app/javascript/apps/picker/Picker.vue              |  2 +-
 .../apps/picker/components/Parameters.vue          | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/javascript/apps/picker/Picker.vue b/app/javascript/apps/picker/Picker.vue
index ee9b62f861..340898a57c 100644
--- a/app/javascript/apps/picker/Picker.vue
+++ b/app/javascript/apps/picker/Picker.vue
@@ -88,7 +88,7 @@ export default {
     class="vue__picker"
     @keydown.esc="close">
     <button class="btn btn-sm mx-n2 d-flex align-items-center"
-      @click="open">
+      @click.prevent="open">
       <File stroke-width="1.5" class="me-1" />
       Choisir un fichier dans la bibliothèque
     </button>
diff --git a/app/javascript/apps/picker/components/Parameters.vue b/app/javascript/apps/picker/components/Parameters.vue
index b08f5ffcbf..e15e6e81a3 100644
--- a/app/javascript/apps/picker/components/Parameters.vue
+++ b/app/javascript/apps/picker/components/Parameters.vue
@@ -6,6 +6,12 @@ export default {
   emits: [
     'change',
   ],
+  methods: {
+    update() {
+      this.parameters.query_parameters = "&filters[for_search_term]=" + this.parameters.term;
+      this.$emit('change');
+    },
+  }
 };
 </script>
 
@@ -18,13 +24,7 @@ export default {
               class="form-control mb-2"
               placeholder="Tapez le texte"
               v-model="parameters.term"
-              @keydown.enter.prevent="$emit('change')">
-      <button type="button"
-              class="btn btn-primary btn-sm mb-2"
-              aria-label="Chercher"
-              @click.prevent="$emit('change')">
-        Chercher
-      </button>
+              @keydown.enter.prevent="update">
     </div>
     <div class="mb-3">
       <b>Filtrer</b>

From 78199fcb32f4a5946d93621bde721f850dac60e9 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Fri, 17 Jul 2026 07:46:53 +0200
Subject: [PATCH 07/14] filters plugged

---
 app/javascript/apps/picker/Picker.vue            |  2 +-
 .../apps/picker/components/Parameters.vue        |  8 ++++----
 app/models/communication/file/picker.rb          | 16 ++++++++++++----
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/app/javascript/apps/picker/Picker.vue b/app/javascript/apps/picker/Picker.vue
index 340898a57c..d7b8a4b818 100644
--- a/app/javascript/apps/picker/Picker.vue
+++ b/app/javascript/apps/picker/Picker.vue
@@ -100,7 +100,7 @@ export default {
         <div class="modal-content">
           <div class="modal-header">
             <div class="col-auto d-none d-lg-block ">
-              <h5 class="modal-title">Sélecteur de fichiers</h5>
+              <h5 class="modal-title">Bibliothèque de fichiers</h5>
             </div>
             <button
               type="button"
diff --git a/app/javascript/apps/picker/components/Parameters.vue b/app/javascript/apps/picker/components/Parameters.vue
index e15e6e81a3..e6b91b15b0 100644
--- a/app/javascript/apps/picker/components/Parameters.vue
+++ b/app/javascript/apps/picker/components/Parameters.vue
@@ -8,7 +8,7 @@ export default {
   ],
   methods: {
     update() {
-      this.parameters.query_parameters = "&filters[for_search_term]=" + this.parameters.term;
+      this.parameters.query_parameters = "&filters[for_search_term]=" + this.parameters.search.term;
       this.$emit('change');
     },
   }
@@ -17,14 +17,14 @@ export default {
 
 <template>
   <div class="vue__picker__parameters">
-    <div class="mb-3">
+    <div class="mb-3" v-if="parameters.search">
       <b>Recherche</b>
       <input  type="text"
               name="search"
               class="form-control mb-2"
               placeholder="Tapez le texte"
-              v-model="parameters.term"
-              @keydown.enter.prevent="update">
+              v-model="parameters.search.term"
+              @keyup="update">
     </div>
     <div class="mb-3">
       <b>Filtrer</b>
diff --git a/app/models/communication/file/picker.rb b/app/models/communication/file/picker.rb
index 473870624f..40855166b0 100644
--- a/app/models/communication/file/picker.rb
+++ b/app/models/communication/file/picker.rb
@@ -4,12 +4,12 @@ class Communication::File::Picker
   def initialize(objects, language, params)
     @objects = objects
     @language = language
-    @params = params.to_unsafe_hash
+    @params = params
   end
 
   def parameters
     {
-      term: term,
+      search: search,
       filters: filters,
       sorts: sorts,
       query_parameters: '',
@@ -27,15 +27,23 @@ def pagination
   end
 
   def paginated_objects
-    @paginated_objects ||= objects.ordered(language)
+    @paginated_objects ||= objects.filter_by(params[:filters], language)
+                                  .ordered(language)
                                   .page(params[:page])
                                   .per(2)
   end
 
   protected
 
+  def search
+    {
+      term: term,
+      query_parameters: "&filters[for_search_term]=#{term}"
+    }
+  end
+
   def term
-    params[:term]
+    params.dig(:filters, :for_search_term).to_s
   end
 
   def filters

From f143aee036997fb1ed0f0babc4fe8d465f17ed9b Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Fri, 17 Jul 2026 08:33:59 +0200
Subject: [PATCH 08/14] i18n

---
 .../communication/library/files_controller.rb |  6 ++---
 .../apps/blocks-editor/components/Editor.vue  | 13 ++++++----
 app/javascript/apps/i18n.js                   | 26 +++++++++++++++++++
 app/javascript/apps/index.js                  | 17 ++----------
 app/javascript/apps/picker/Picker.vue         | 14 +++++-----
 app/javascript/apps/picker/PickerTestApp.vue  |  6 ++++-
 .../apps/picker/components/Pagination.vue     | 12 ++++++---
 .../apps/picker/components/Parameters.vue     |  6 ++---
 app/models/communication/file/picker.rb       |  2 +-
 .../blocks/components/file/_edit.html.erb     |  1 +
 .../library/files/picker.html.erb             |  1 +
 config/locales/vue/en.yml                     | 13 ++++++++++
 config/locales/vue/fr.yml                     | 13 ++++++++++
 13 files changed, 92 insertions(+), 38 deletions(-)
 create mode 100644 app/javascript/apps/i18n.js

diff --git a/app/controllers/admin/communication/library/files_controller.rb b/app/controllers/admin/communication/library/files_controller.rb
index f0cd5256a7..f09f5ed855 100644
--- a/app/controllers/admin/communication/library/files_controller.rb
+++ b/app/controllers/admin/communication/library/files_controller.rb
@@ -15,9 +15,9 @@ def index
 
   def picker
     @picker = Communication::File::Picker.new(
-      @files,
-      current_language,
-      params
+      objects: @files,
+      language: current_language,
+      params: params
     )
   end
 
diff --git a/app/javascript/apps/blocks-editor/components/Editor.vue b/app/javascript/apps/blocks-editor/components/Editor.vue
index f4d43f99f2..cb6f419080 100644
--- a/app/javascript/apps/blocks-editor/components/Editor.vue
+++ b/app/javascript/apps/blocks-editor/components/Editor.vue
@@ -1,6 +1,7 @@
 <script>
 import { createApp, provide, reactive } from 'vue';
 import { VueDraggableNext } from 'vue-draggable-next';
+import { getI18n } from '../../i18n';
 import RichTextInput from './inputs/RichTextInput.vue';
 import CodeInput from './inputs/CodeInput.vue';
 import UploadInput from './inputs/UploadInput.vue';
@@ -55,13 +56,13 @@ export default {
         const root = doc.querySelector('[data-editor-form-root]');
         this.html = root ? root.outerHTML : '';
         await this.$nextTick();
-        this.mountInner();
+        await this.mountInner();
       } finally {
         this.loading = false;
       }
     },
 
-    mountInner() {
+    async mountInner() {
       const container = this.$refs.container;
       if (!container) return;
       const root = container.querySelector('[data-editor-form-root]');
@@ -71,13 +72,14 @@ export default {
       // takes the element's innerHTML as its template, compiles it, then
       // replaces the element's children with the rendered output — any
       // listener attached beforehand would be discarded with the old DOM.
-      this.mountVueApp(root);
+      await this.mountVueApp(root);
       this.wireForm(root);
       this.wireCancelButtons(root);
     },
 
-    mountVueApp(root) {
+    async mountVueApp(root) {
       const payload = JSON.parse(root.dataset.payload);
+      const i18n = await getI18n();
       this.innerApp = createApp({
         setup() {
           // Reactive state + helpers exposed to the server-rendered Vue
@@ -144,6 +146,7 @@ export default {
         },
       });
 
+      this.innerApp.use(i18n);
       this.innerApp.component('CodeInput', CodeInput);
       this.innerApp.component('draggable', VueDraggableNext);
       this.innerApp.component('FileUploadInput', FileUploadInput);
@@ -197,7 +200,7 @@ export default {
           this.cleanup();
           this.html = fresh.outerHTML;
           await this.$nextTick();
-          this.mountInner();
+          await this.mountInner();
         }
       }
     },
diff --git a/app/javascript/apps/i18n.js b/app/javascript/apps/i18n.js
new file mode 100644
index 0000000000..8262f3ea1f
--- /dev/null
+++ b/app/javascript/apps/i18n.js
@@ -0,0 +1,26 @@
+import { createI18n } from 'vue-i18n';
+
+// Messages are precompiled at boot into public/vue/<locale>.json (cf.
+// config/initializers/vue_i18n.rb) and fetched once as a cacheable static
+// file. getI18n() memoizes the fetch + instance so every Vue app/instance
+// (including ones created later, e.g. Editor.vue's inner app) shares it.
+let i18nPromise = null;
+
+export function getI18n() {
+  if (!i18nPromise) {
+    i18nPromise = (async () => {
+      const locale = document.documentElement.lang || 'fr';
+      const messages = await fetch(`/vue/${locale}.json`)
+        .then((res) => res.json())
+        .catch(() => ({}));
+      return createI18n({
+        legacy: false,
+        globalInjection: true,
+        locale,
+        fallbackLocale: 'fr',
+        messages: { [locale]: messages },
+      });
+    })();
+  }
+  return i18nPromise;
+}
diff --git a/app/javascript/apps/index.js b/app/javascript/apps/index.js
index 67b42d4dd5..aafd59d34a 100644
--- a/app/javascript/apps/index.js
+++ b/app/javascript/apps/index.js
@@ -1,26 +1,13 @@
 import { createApp } from 'vue';
-import { createI18n } from 'vue-i18n';
+import { getI18n } from './i18n';
 import SsoMappingApp from './sso-mapping/SsoMappingApp.vue';
 import MediaPickerApp from './media-picker/MediaPickerApp.vue';
 import TimeSlotsApp from './time-slots/TimeSlotsApp.vue';
 import BlocksEditorApp from './blocks-editor/BlocksEditorApp.vue';
 import PickerTestApp from './picker/PickerTestApp.vue';
 
-// Messages are precompiled at boot into public/vue/<locale>.json (cf.
-// config/initializers/vue_i18n.rb) and fetched once as a cacheable static file,
-// then shared by every app through a single vue-i18n instance.
 async function boot() {
-  const locale = document.documentElement.lang || 'fr';
-  const messages = await fetch(`/vue/${locale}.json`)
-    .then((res) => res.json())
-    .catch(() => ({}));
-  const i18n = createI18n({
-    legacy: false,
-    globalInjection: true,
-    locale,
-    fallbackLocale: 'fr',
-    messages: { [locale]: messages },
-  });
+  const i18n = await getI18n();
 
   const mount = (App, selector) => {
     if (document.querySelector(selector)) {
diff --git a/app/javascript/apps/picker/Picker.vue b/app/javascript/apps/picker/Picker.vue
index d7b8a4b818..5ab79f81d1 100644
--- a/app/javascript/apps/picker/Picker.vue
+++ b/app/javascript/apps/picker/Picker.vue
@@ -13,6 +13,7 @@ export default {
   props: [
     'modelValue',
     'endpoint',
+    'kind',
   ],
   emits: ['update:modelValue'],
   computed: {
@@ -29,6 +30,7 @@ export default {
     return {
       modal: false,
       url: '',
+      data: {},
       parameters: {},
       pagination: {},
       results: {},
@@ -56,10 +58,10 @@ export default {
       this.buildUrl();
       xhr.onreadystatechange = function() {
         if (xhr.readyState == 4 && xhr.status == 200) {
-          data = JSON.parse(xhr.responseText);
-          this.parameters = data.parameters;
-          this.pagination = data.pagination;
-          this.results = data.results;
+          this.data = JSON.parse(xhr.responseText);
+          this.parameters = this.data.parameters;
+          this.pagination = this.data.pagination;
+          this.results = this.data.results;
         }
       }.bind(this);
       xhr.open("GET", this.url, false);
@@ -90,7 +92,7 @@ export default {
     <button class="btn btn-sm mx-n2 d-flex align-items-center"
       @click.prevent="open">
       <File stroke-width="1.5" class="me-1" />
-      Choisir un fichier dans la bibliothèque
+      {{ $t(`picker.kind.${kind}.button`) }}
     </button>
     <div  class="modal"
           tabindex="-1"
@@ -100,7 +102,7 @@ export default {
         <div class="modal-content">
           <div class="modal-header">
             <div class="col-auto d-none d-lg-block ">
-              <h5 class="modal-title">Bibliothèque de fichiers</h5>
+              <h1 class="h4 modal-title">{{ $t(`picker.kind.${kind}.modal.title`) }}</h1>
             </div>
             <button
               type="button"
diff --git a/app/javascript/apps/picker/PickerTestApp.vue b/app/javascript/apps/picker/PickerTestApp.vue
index 0fd1f3b463..e442b0aad5 100644
--- a/app/javascript/apps/picker/PickerTestApp.vue
+++ b/app/javascript/apps/picker/PickerTestApp.vue
@@ -7,11 +7,14 @@ export default {
   data () {
     return {
       endpoint: '',
+      kind: '',
       data: {},
     }
   },
   mounted() {
-    this.endpoint = document.getElementById('picker-test-app').dataset.endpoint;
+    let dataset = document.getElementById('picker-test-app').dataset
+    this.endpoint = dataset.endpoint;
+    this.kind = dataset.kind;
   }
 };
 </script>
@@ -19,6 +22,7 @@ export default {
 <template>
   <Picker
     v-model="data"
+    :kind="kind"
     :endpoint="endpoint" />
   <div class="bg-light p-3 rounded mt-4">
     <pre><code>{{ data }}</code></pre>
diff --git a/app/javascript/apps/picker/components/Pagination.vue b/app/javascript/apps/picker/components/Pagination.vue
index ee3b78b7f4..80cbb8de83 100644
--- a/app/javascript/apps/picker/components/Pagination.vue
+++ b/app/javascript/apps/picker/components/Pagination.vue
@@ -37,9 +37,11 @@ export default {
         <button
           class="btn btn-sm ps-0"
           v-if="pagination?.current_page > 1"
-          @click.prevent="previousPage"
-          title="Page précédente">
+          @click.prevent="previousPage">
           <ArrowLeft stroke-width="1.5" />
+          <span class="sr-only">
+            {{ $t('picker.pagination.previous') }}
+          </span>
         </button>
       </div>
       <p class="m-0">
@@ -49,8 +51,10 @@ export default {
         <button
           class="btn btn-sm pe-0"
           v-if="pagination?.current_page < pagination?.total_pages"
-          @click.prevent="nextPage"
-          title="Page suivante">
+          @click.prevent="nextPage">
+          <span class="sr-only">
+            {{ $t('picker.pagination.next') }}
+          </span>
           <ArrowRight stroke-width="1.5" />
         </button>
       </div>
diff --git a/app/javascript/apps/picker/components/Parameters.vue b/app/javascript/apps/picker/components/Parameters.vue
index e6b91b15b0..18f87ada68 100644
--- a/app/javascript/apps/picker/components/Parameters.vue
+++ b/app/javascript/apps/picker/components/Parameters.vue
@@ -18,7 +18,7 @@ export default {
 <template>
   <div class="vue__picker__parameters">
     <div class="mb-3" v-if="parameters.search">
-      <b>Recherche</b>
+      <b>{{ $t('picker.parameters.search')}}</b>
       <input  type="text"
               name="search"
               class="form-control mb-2"
@@ -27,7 +27,7 @@ export default {
               @keyup="update">
     </div>
     <div class="mb-3">
-      <b>Filtrer</b>
+      <b>{{ $t('picker.parameters.filters')}}</b>
       <div v-for="filter in parameters.filters">
         {{ filter.name }}
         <div v-for="value in filter.values">
@@ -36,7 +36,7 @@ export default {
       </div>
     </div>
     <div class="mb-3">
-      <b>Trier</b>
+      <b>{{ $t('picker.parameters.sorts')}}</b>
       <div v-for="sort in parameters.sorts">
         {{ sort.name }}
         {{ sort.selected }}
diff --git a/app/models/communication/file/picker.rb b/app/models/communication/file/picker.rb
index 40855166b0..bbffedece7 100644
--- a/app/models/communication/file/picker.rb
+++ b/app/models/communication/file/picker.rb
@@ -1,7 +1,7 @@
 class Communication::File::Picker
   attr_reader :objects, :language, :params
 
-  def initialize(objects, language, params)
+  def initialize(objects:, language:, params:)
     @objects = objects
     @language = language
     @params = params
diff --git a/app/views/admin/communication/blocks/components/file/_edit.html.erb b/app/views/admin/communication/blocks/components/file/_edit.html.erb
index 5a9baf7182..49e7b589d8 100644
--- a/app/views/admin/communication/blocks/components/file/_edit.html.erb
+++ b/app/views/admin/communication/blocks/components/file/_edit.html.erb
@@ -6,6 +6,7 @@ accept ||= '*'
 %>
 <Picker
   v-model="<%= model %>.<%= property %>"
+  kind="files"
   endpoint="<%= picker_admin_communication_files_path(format: :json) %>">
 </Picker>
 <file-upload-input
diff --git a/app/views/admin/communication/library/files/picker.html.erb b/app/views/admin/communication/library/files/picker.html.erb
index 4215cfb8ae..c44a36b7f5 100644
--- a/app/views/admin/communication/library/files/picker.html.erb
+++ b/app/views/admin/communication/library/files/picker.html.erb
@@ -2,5 +2,6 @@
 
 <div
   id="picker-test-app"
+  data-kind="files"
   data-endpoint="<%= picker_admin_communication_files_path(format: :json) %>">
 </div>
\ No newline at end of file
diff --git a/config/locales/vue/en.yml b/config/locales/vue/en.yml
index cf32651fd1..6199b9e686 100644
--- a/config/locales/vue/en.yml
+++ b/config/locales/vue/en.yml
@@ -115,6 +115,19 @@ en:
         title: Photo library
       remove: Remove image
       title: Image
+    picker:
+      pagination:
+        next: Next page
+        previous: Previous page
+      parameters:
+        search: Search
+        filters: Filter
+        sorts: Sort
+      kind:
+        files:
+          button: Choose a file in the library
+          modal:
+            title: File library
     timeSlots:
       add: Add a time slot
       datetime:
diff --git a/config/locales/vue/fr.yml b/config/locales/vue/fr.yml
index 94f65e3cad..6a2cb85f19 100644
--- a/config/locales/vue/fr.yml
+++ b/config/locales/vue/fr.yml
@@ -115,6 +115,19 @@ fr:
         title: Photothèque
       remove: Supprimer l'image
       title: Image
+    picker:
+      pagination:
+        next: Page suivante
+        previous: Page précédente
+      parameters:
+        search: Chercher
+        filters: Filtrer
+        sorts: Trier
+      kind:
+        files:
+          button: Choisir un fichier dans la bibliothèque
+          modal:
+            title: Bibliothèque de fichiers
     timeSlots:
       add: Ajouter un créneau horaire
       datetime:

From 3b65d30d0ddea3392ca5a353c0b34bc8244a36ee Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Fri, 17 Jul 2026 09:22:03 +0200
Subject: [PATCH 09/14] Fix #4205

---
 .gitignore                                   |  3 ---
 app/javascript/apps/i18n.js                  | 14 +++++++++-----
 app/views/admin/layouts/application.html.erb |  2 +-
 config/initializers/vue_i18n.rb              | 18 ++++++++++--------
 4 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/.gitignore b/.gitignore
index 7a0e072c2c..df4b755d6e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,9 +31,6 @@
 /public/packs
 /public/packs-test
 
-# Vue i18n messages generated at boot (cf. config/initializers/vue_i18n.rb)
-/public/vue/*.json
-
 # Ignore some JS stuff
 /node_modules
 /yarn-error.log
diff --git a/app/javascript/apps/i18n.js b/app/javascript/apps/i18n.js
index 8262f3ea1f..56c5d7b8fd 100644
--- a/app/javascript/apps/i18n.js
+++ b/app/javascript/apps/i18n.js
@@ -1,16 +1,20 @@
 import { createI18n } from 'vue-i18n';
 
-// Messages are precompiled at boot into public/vue/<locale>.json (cf.
-// config/initializers/vue_i18n.rb) and fetched once as a cacheable static
-// file. getI18n() memoizes the fetch + instance so every Vue app/instance
-// (including ones created later, e.g. Editor.vue's inner app) shares it.
+// Les locales sont transformées en fichier JSON dans :
+// app/assets/builds/vue/<locale>.json
+// La transformation se fait dans :
+// config/initializers/vue_i18n.rb
+// Les fichiers JSON passent ensuite par Sprockets pour gérer le cache correctement.
+// Le chemin des fichiers est passé en data-attribute :
+// <html data-vue-i18n-path="/assets/vue/fr-8fe2c104baca4af3181348aafbd2e7877701c6f684d62f090f41597aa7b0d78a.json">
 let i18nPromise = null;
 
 export function getI18n() {
   if (!i18nPromise) {
     i18nPromise = (async () => {
       const locale = document.documentElement.lang || 'fr';
-      const messages = await fetch(`/vue/${locale}.json`)
+      const path = document.documentElement.dataset.vueI18nPath;
+      const messages = await fetch(path)
         .then((res) => res.json())
         .catch(() => ({}));
       return createI18n({
diff --git a/app/views/admin/layouts/application.html.erb b/app/views/admin/layouts/application.html.erb
index 63a1b4decf..fd49d221ad 100644
--- a/app/views/admin/layouts/application.html.erb
+++ b/app/views/admin/layouts/application.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="<%= I18n.locale %>">
+<html lang="<%= I18n.locale %>" data-vue-i18n-path="<%= asset_path("vue/#{I18n.locale}.json") %>">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
diff --git a/config/initializers/vue_i18n.rb b/config/initializers/vue_i18n.rb
index 22f123e897..1d3b492081 100644
--- a/config/initializers/vue_i18n.rb
+++ b/config/initializers/vue_i18n.rb
@@ -1,13 +1,15 @@
-# Génère les fichiers de traduction statiques des apps Vue dans
-# public/vue/<locale>.json. Ils servent de messages à vue-i18n (cf.
-# app/javascript/apps/index.js) et sont chargés une seule fois, en statique
-# cacheable, plutôt que sérialisés dans chaque page.
+# Génère les messages de traduction des apps Vue dans app/assets/builds/vue/,
+# aux côtés de vue-apps.js (cf. app/assets/config/manifest.js: link_tree
+# ../builds). Sprockets les prend donc en charge comme n'importe quel asset :
+# digest de cache-busting et far-future cache-control automatiques, servis via
+# asset_path("vue/#{locale}.json") (cf. layout admin et app/javascript/apps/i18n.js).
 #
-# after_initialize garantit que tous les config/locales/**/*.yml sont bien
-# ajoutés à I18n.load_path. En dev, redémarrer le serveur régénère les fichiers
-# après modification d'une traduction.
 Rails.application.config.after_initialize do
-  output_dir = Rails.root.join('public', 'vue')
+  # after_initialize garantit que tous les config/locales/**/*.yml sont bien
+  # ajoutés à I18n.load_path, et s'exécute avant assets:precompile (jsbundling-rails
+  # le fait dépendre de la tâche `environment`). En dev, redémarrer le serveur
+  # régénère les fichiers après modification d'une traduction.
+  output_dir = Rails.root.join('app', 'assets', 'builds', 'vue')
   FileUtils.mkdir_p(output_dir)
   I18n.available_locales.each do |locale|
     translations = I18n.t('vue', locale: locale, default: {})

From 9bd0cdda8c5a6050175090adae31b4f388e91092 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Fri, 17 Jul 2026 09:39:14 +0200
Subject: [PATCH 10/14] results

---
 app/javascript/apps/picker/Picker.vue             | 11 +++++------
 .../apps/picker/components/Pagination.vue         |  2 +-
 app/javascript/apps/picker/components/Results.vue | 15 +++++++++++++++
 3 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 app/javascript/apps/picker/components/Results.vue

diff --git a/app/javascript/apps/picker/Picker.vue b/app/javascript/apps/picker/Picker.vue
index 5ab79f81d1..ffbc82eabf 100644
--- a/app/javascript/apps/picker/Picker.vue
+++ b/app/javascript/apps/picker/Picker.vue
@@ -2,6 +2,7 @@
 import { File } from '@lucide/vue';
 import Pagination from './components/Pagination.vue';
 import Parameters from './components/Parameters.vue';
+import Results from './components/Results.vue';
 
 export default {
   name: 'Picker',
@@ -9,6 +10,7 @@ export default {
     File,
     Pagination,
     Parameters,
+    Results,
   },
   props: [
     'modelValue',
@@ -117,15 +119,12 @@ export default {
                   :parameters="parameters"
                   @change="search" />
               </div>
-              <div class="col-md-10">
+              <div class="offset-md-1 col-md-9">
+                <Results
+                  :results="results" />
                 <Pagination 
                   :pagination="pagination"
                   @change="search" />
-                <div class="row g-2">
-                  <div v-for="object in results">
-                    <div v-html="object.snippet" @click="select($event, object)"></div>
-                  </div>
-                </div>
               </div>
             </div>
           </div>
diff --git a/app/javascript/apps/picker/components/Pagination.vue b/app/javascript/apps/picker/components/Pagination.vue
index 80cbb8de83..4c8805fbdf 100644
--- a/app/javascript/apps/picker/components/Pagination.vue
+++ b/app/javascript/apps/picker/components/Pagination.vue
@@ -30,7 +30,7 @@ export default {
 </script>
 
 <template>
-  <div class="vue__picker__pagination">
+  <div class="mt-4">
     <p v-if="pagination?.total_count === 0" >Aucun fichier</p>
     <div v-if="pagination?.total_pages > 1" class="d-flex justify-content-between mb-2">
       <div class="vue__picker__button_container">
diff --git a/app/javascript/apps/picker/components/Results.vue b/app/javascript/apps/picker/components/Results.vue
new file mode 100644
index 0000000000..6111f29a6c
--- /dev/null
+++ b/app/javascript/apps/picker/components/Results.vue
@@ -0,0 +1,15 @@
+<script>
+export default {
+  props: [
+    'results'
+  ],
+};
+</script>
+
+<template>
+  <div class="row g-2">
+    <div v-for="object in results">
+      <div v-html="object.snippet" @click="select($event, object)"></div>
+    </div>
+  </div>
+</template>

From cd22fe88df6f2b200e7070c07aa212d979f21176 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Fri, 17 Jul 2026 10:59:26 +0200
Subject: [PATCH 11/14] fix

---
 app/javascript/apps/picker/Picker.vue         |  6 ++---
 .../apps/picker/components/Results.vue        |  7 ++++--
 app/models/communication/file/picker.rb       | 21 ++++++++--------
 .../library/files/picker.json.jbuilder        | 24 ++++++++++---------
 4 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/app/javascript/apps/picker/Picker.vue b/app/javascript/apps/picker/Picker.vue
index ffbc82eabf..b5a5cb9978 100644
--- a/app/javascript/apps/picker/Picker.vue
+++ b/app/javascript/apps/picker/Picker.vue
@@ -78,8 +78,7 @@ export default {
         this.url += this.pagination.query_parameters;
       }
     },
-    select(event, object) {
-      event.preventDefault();
+    select(object) {
       this.value = object.data;
       this.close();
     },
@@ -121,7 +120,8 @@ export default {
               </div>
               <div class="offset-md-1 col-md-9">
                 <Results
-                  :results="results" />
+                  :results="results"
+                  @select="select" />
                 <Pagination 
                   :pagination="pagination"
                   @change="search" />
diff --git a/app/javascript/apps/picker/components/Results.vue b/app/javascript/apps/picker/components/Results.vue
index 6111f29a6c..212606dce0 100644
--- a/app/javascript/apps/picker/components/Results.vue
+++ b/app/javascript/apps/picker/components/Results.vue
@@ -3,13 +3,16 @@ export default {
   props: [
     'results'
   ],
+  emits: [
+    'select',
+  ],
 };
 </script>
 
 <template>
   <div class="row g-2">
-    <div v-for="object in results">
-      <div v-html="object.snippet" @click="select($event, object)"></div>
+    <div v-for="object in results.list">
+      <div v-html="object.snippet" @click.prevent="$emit('select', object)"></div>
     </div>
   </div>
 </template>
diff --git a/app/models/communication/file/picker.rb b/app/models/communication/file/picker.rb
index bbffedece7..53a3b7f87f 100644
--- a/app/models/communication/file/picker.rb
+++ b/app/models/communication/file/picker.rb
@@ -18,19 +18,19 @@ def parameters
 
   def pagination
     {
-      current_page: paginated_objects.current_page,
-      limit_value: paginated_objects.limit_value,
-      total_count: paginated_objects.total_count,
-      total_pages: paginated_objects.total_pages,
-      query_parameters: "&page=#{paginated_objects.current_page}"
+      current_page: results.current_page,
+      limit_value: results.limit_value,
+      total_count: results.total_count,
+      total_pages: results.total_pages,
+      query_parameters: "&page=#{results.current_page}"
     }
   end
 
-  def paginated_objects
-    @paginated_objects ||= objects.filter_by(params[:filters], language)
-                                  .ordered(language)
-                                  .page(params[:page])
-                                  .per(2)
+  def results
+    @results ||= objects.filter_by(params[:filters], language)
+                        .ordered(language)
+                        .page(params[:page])
+                        .per(2)
   end
 
   protected
@@ -72,5 +72,4 @@ def sorts
       }
     ]
   end
-
 end
\ No newline at end of file
diff --git a/app/views/admin/communication/library/files/picker.json.jbuilder b/app/views/admin/communication/library/files/picker.json.jbuilder
index b108213a08..5a53b4652a 100644
--- a/app/views/admin/communication/library/files/picker.json.jbuilder
+++ b/app/views/admin/communication/library/files/picker.json.jbuilder
@@ -1,15 +1,17 @@
 json.parameters @picker.parameters
 json.pagination @picker.pagination
-json.results @picker.paginated_objects do |file|
-  l10n = file.localized_in(current_language)
-  json.data do
-    json.communication_file_id file.id
-    json.filename l10n.original_filename
-    json.name l10n.name
+json.results do
+  json.list @picker.results do |file|
+    l10n = file.localized_in(current_language)
+    json.data do
+      json.communication_file_id file.id
+      json.filename l10n.original_filename
+      json.name l10n.name
+    end
+    json.snippet render(
+        partial: 'admin/communication/library/files/file',
+        locals: { file: file },
+        formats: [:html]
+      )
   end
-  json.snippet render(
-      partial: 'admin/communication/library/files/file',
-      locals: { file: file },
-      formats: [:html]
-    )
 end
\ No newline at end of file

From d872a8b9af4ff12fdfd49c09d4da850851a9d3df Mon Sep 17 00:00:00 2001
From: Arnaud Levy <arnaud.levy@noesya.coop>
Date: Fri, 17 Jul 2026 12:17:02 +0200
Subject: [PATCH 12/14] Update
 app/javascript/apps/picker/components/Pagination.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sébastien Gaya <sebastien.gaya@gmail.com>
---
 app/javascript/apps/picker/components/Pagination.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/apps/picker/components/Pagination.vue b/app/javascript/apps/picker/components/Pagination.vue
index 4c8805fbdf..1a0007921d 100644
--- a/app/javascript/apps/picker/components/Pagination.vue
+++ b/app/javascript/apps/picker/components/Pagination.vue
@@ -18,7 +18,7 @@ export default {
       this.$emit('change')
     },
     previousPage() {
-      this.pagination.current_page = this.pagination.current_page - 1;
+      this.pagination.current_page = Math.min(1, this.pagination.current_page - 1);
       this.update();
     },
     nextPage() {

From c1da8d0af3f7197cff0608e0e311efb42bb4d0e2 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Fri, 17 Jul 2026 13:37:42 +0200
Subject: [PATCH 13/14] wip

---
 app/javascript/apps/picker/Picker.vue         | 10 +++---
 .../apps/picker/components/Parameters.vue     |  6 ++--
 app/models/communication/file/picker.rb       | 34 +++++++++++++++----
 config/locales/vue/en.yml                     |  4 ++-
 config/locales/vue/fr.yml                     |  4 ++-
 5 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/app/javascript/apps/picker/Picker.vue b/app/javascript/apps/picker/Picker.vue
index b5a5cb9978..97ca446b61 100644
--- a/app/javascript/apps/picker/Picker.vue
+++ b/app/javascript/apps/picker/Picker.vue
@@ -30,7 +30,7 @@ export default {
   },
   data () {
     return {
-      modal: false,
+      modalOpened: false,
       url: '',
       data: {},
       parameters: {},
@@ -40,18 +40,18 @@ export default {
   },
   methods: {
     open() {
-      if (this.modal) {
+      if (this.modalOpened) {
         return;
       }
-      this.modal = true;
+      this.modalOpened = true;
       document.body.classList.add("modal-open");
       this.search();
     },
     close() {
-      if (!this.modal) {
+      if (!this.modalOpened) {
         return;
       }
-      this.modal = false;
+      this.modalOpened = false;
       document.body.classList.remove("modal-open");
     },
     search() {
diff --git a/app/javascript/apps/picker/components/Parameters.vue b/app/javascript/apps/picker/components/Parameters.vue
index 18f87ada68..96285e9fb4 100644
--- a/app/javascript/apps/picker/components/Parameters.vue
+++ b/app/javascript/apps/picker/components/Parameters.vue
@@ -18,16 +18,16 @@ export default {
 <template>
   <div class="vue__picker__parameters">
     <div class="mb-3" v-if="parameters.search">
-      <b>{{ $t('picker.parameters.search')}}</b>
+      <b>{{ $t('picker.parameters.search.title')}}</b>
       <input  type="text"
               name="search"
               class="form-control mb-2"
-              placeholder="Tapez le texte"
+              :placeholder="$t('picker.parameters.search.placeholder')"
               v-model="parameters.search.term"
               @keyup="update">
     </div>
     <div class="mb-3">
-      <b>{{ $t('picker.parameters.filters')}}</b>
+      <b>{{ $t('picker.parameters.filters') }}</b>
       <div v-for="filter in parameters.filters">
         {{ filter.name }}
         <div v-for="value in filter.values">
diff --git a/app/models/communication/file/picker.rb b/app/models/communication/file/picker.rb
index 53a3b7f87f..3ddd864ecd 100644
--- a/app/models/communication/file/picker.rb
+++ b/app/models/communication/file/picker.rb
@@ -18,23 +18,41 @@ def parameters
 
   def pagination
     {
-      current_page: results.current_page,
+      current_page: current_page,
       limit_value: results.limit_value,
       total_count: results.total_count,
       total_pages: results.total_pages,
-      query_parameters: "&page=#{results.current_page}"
+      query_parameters: "&page=#{current_page}"
     }
   end
 
   def results
-    @results ||= objects.filter_by(params[:filters], language)
-                        .ordered(language)
-                        .page(params[:page])
-                        .per(2)
+    @results ||= objects_paginated.any? ? objects_paginated : objects_on_first_page
   end
 
   protected
 
+  # Actions successives 
+  # 1. filter
+  # 2. sort
+  # 3. paginate (avec gestion du retour page 1)
+
+  def objects_filtered
+    @objects_filtered ||= objects.filter_by(params[:filters], language)
+  end
+
+  def objects_sorted
+    @objects_sorted ||= objects_filtered.ordered(language)
+  end
+
+  def objects_paginated
+    @objects_paginated ||= objects_sorted.page(params[:page]).per(2)
+  end
+
+  def objects_on_first_page
+    @objects_on_first_page ||= objects_sorted.page(1).per(2)
+  end
+
   def search
     {
       term: term,
@@ -42,6 +60,10 @@ def search
     }
   end
 
+  def current_page
+    [results.current_page, results.total_pages].min
+  end
+
   def term
     params.dig(:filters, :for_search_term).to_s
   end
diff --git a/config/locales/vue/en.yml b/config/locales/vue/en.yml
index 6199b9e686..47125fa183 100644
--- a/config/locales/vue/en.yml
+++ b/config/locales/vue/en.yml
@@ -120,7 +120,9 @@ en:
         next: Next page
         previous: Previous page
       parameters:
-        search: Search
+        search:
+          title: Search
+          placeholder: Type your search here
         filters: Filter
         sorts: Sort
       kind:
diff --git a/config/locales/vue/fr.yml b/config/locales/vue/fr.yml
index 6a2cb85f19..fcde6ad5fd 100644
--- a/config/locales/vue/fr.yml
+++ b/config/locales/vue/fr.yml
@@ -120,7 +120,9 @@ fr:
         next: Page suivante
         previous: Page précédente
       parameters:
-        search: Chercher
+        search:
+          title: Chercher
+          placeholder: Tapez le texte
         filters: Filtrer
         sorts: Trier
       kind:

From 773ddc5058b062bfb4b84aa1ca82c1f6dbb9ee3a Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Fri, 17 Jul 2026 14:59:12 +0200
Subject: [PATCH 14/14] query

---
 app/javascript/apps/picker/Picker.vue   | 2 +-
 app/models/communication/file/picker.rb | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/javascript/apps/picker/Picker.vue b/app/javascript/apps/picker/Picker.vue
index 97ca446b61..93b5f55c5c 100644
--- a/app/javascript/apps/picker/Picker.vue
+++ b/app/javascript/apps/picker/Picker.vue
@@ -98,7 +98,7 @@ export default {
     <div  class="modal"
           tabindex="-1"
           role="dialog"
-          :class="{'d-block': modal}">
+          :class="{'d-block': modalOpened}">
       <div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
         <div class="modal-content">
           <div class="modal-header">
diff --git a/app/models/communication/file/picker.rb b/app/models/communication/file/picker.rb
index 3ddd864ecd..bbd0ce98ed 100644
--- a/app/models/communication/file/picker.rb
+++ b/app/models/communication/file/picker.rb
@@ -74,7 +74,11 @@ def filters
         id: 'categories',
         name: 'Catégories',
         values: [
-          { id: 'cat-1', name: 'Catégorie 1', selected: false }
+          {
+            id: 'cat-1',
+            name: 'Catégorie 1',
+            selected: false,
+            query_parameters: '&filters[for_category][]=d05ab9f9-a8fb-42e3-8aca-8fe73fa08913' }
         ]
       }
     ]