From 216d25e2bfbba1a05fa0b359e10ccb49c4104cec Mon Sep 17 00:00:00 2001
From: Benjamin Mestrallet <benjamin.mestrallet@gmail.com>
Date: Tue, 21 Jul 2026 20:53:31 +0100
Subject: [PATCH 1/6] feat: filter templates by category + top-bar search in
 the Add-a-document drawer - EXO-88766
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a filter row to the drawer's Templates section, reusing the shared
<categories-filter> chip bar (the same flat component the activity stream + Docs
app use, from categoryVueComponents; object-type=document, space-id=drive owner,
hide-on-empty so it only shows when templates are actually categorized). Free-text
search follows the standard drawer pattern — a filter icon in the title bar opens
a full-width search field with a back arrow. Both filters apply client-side over
the already-loaded templates (category via item.categoryIds compared as strings so
number/string ids match; search via name); no extra backend. Filters only surface
once there are enough templates (>3). Wiring: AttachmentApp gatein module now
depends on categoryVueComponents so the chip component resolves in the bundle.
Live-verified: chips render + filter, top-bar search filters + back-arrow restores.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../locale/portlet/attachments_en.properties  |   2 +
 .../main/webapp/WEB-INF/gatein-resources.xml  |   3 +
 .../main/webapp/skin/less/attachmentsApp.less |   7 +
 .../AttachmentCreateDocumentDrawer.vue        | 176 ++++++++++++++----
 4 files changed, 152 insertions(+), 36 deletions(-)

diff --git a/documents-webapp/src/main/resources/locale/portlet/attachments_en.properties b/documents-webapp/src/main/resources/locale/portlet/attachments_en.properties
index 9d6bdcc40..b2f6e9b9c 100644
--- a/documents-webapp/src/main/resources/locale/portlet/attachments_en.properties
+++ b/documents-webapp/src/main/resources/locale/portlet/attachments_en.properties
@@ -160,6 +160,8 @@ attachments.drawer.templates.empty.canCreate=No templates yet. Create a Template
 attachments.drawer.templates.createFolder=Create a Templates folder
 attachments.drawer.templates.createFolder.success=Templates folder created. Add documents to it to offer them as templates.
 attachments.drawer.templates.createFolder.error=Couldn’t create the Templates folder.
+attachments.drawer.templates.search=Search templates
+attachments.drawer.templates.noMatch=No template matches your filter
 documents.attach.image.alt=Preview of {0}
 attachments.drawer.done=Done
 attachments.drawer.removeAll=Remove all
diff --git a/documents-webapp/src/main/webapp/WEB-INF/gatein-resources.xml b/documents-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
index 3de1df863..c026e81c1 100644
--- a/documents-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
+++ b/documents-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -290,6 +290,9 @@
       <depends>
         <module>documentsPreviewExtension</module>
       </depends>
+      <depends>
+        <module>categoryVueComponents</module>
+      </depends>
     </module>
   </portlet>
 
diff --git a/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less b/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less
index b5a0600e6..8a3e6601c 100644
--- a/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less
+++ b/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less
@@ -255,6 +255,13 @@
     color: @greyColorLighten1Default;
   }
 
+  /* Category chip row (search lives in the title bar, standard drawer pattern). */
+  .attachmentsTemplatesFilters {
+    .attachmentsTemplateCategories {
+      min-width: 0;
+    }
+  }
+
   /* Full-width, stacked template cards (each nearly the whole drawer width).
      The editable name field appears right under the selected card. */
   .attachmentsTemplatesGrid {
diff --git a/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue b/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
index 2cd90d4ff..f59c045e9 100644
--- a/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
+++ b/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
@@ -29,7 +29,11 @@
     class="createDocumentDrawer"
     right>
     <template slot="title">
-      <div class="d-flex align-center">
+      <!-- Default title bar: back arrow + title, with a filter icon on the right
+           (shown once there are enough templates to filter). -->
+      <div
+        v-if="!templateSearchMode"
+        class="d-flex align-center full-width">
         <v-btn
           icon
           small
@@ -40,6 +44,40 @@
           <v-icon size="20">fa-arrow-left</v-icon>
         </v-btn>
         <span class="text-truncate">{{ $t('attachments.drawer.addDocument') }}</span>
+        <v-spacer />
+        <v-btn
+          v-if="showTemplateFilters"
+          icon
+          small
+          class="flex-shrink-0"
+          :aria-label="$t('attachments.drawer.templates.search')"
+          :title="$t('attachments.drawer.templates.search')"
+          @click="openTemplateSearch()">
+          <v-icon size="18">fa-search</v-icon>
+        </v-btn>
+      </div>
+      <!-- Search mode: back arrow closes search; the field spans the full width. -->
+      <div
+        v-else
+        class="d-flex align-center full-width">
+        <v-btn
+          icon
+          small
+          class="ms-n2 me-1 flex-shrink-0"
+          :aria-label="$t('attachments.drawer.back')"
+          :title="$t('attachments.drawer.back')"
+          @click="closeTemplateSearch()">
+          <v-icon size="20">fa-arrow-left</v-icon>
+        </v-btn>
+        <v-text-field
+          ref="templateSearchField"
+          v-model="templateSearch"
+          :placeholder="$t('attachments.drawer.templates.search')"
+          class="attachmentsTemplateSearch flex-grow-1 pt-0 mt-0"
+          hide-details
+          dense
+          autofocus
+          clearable />
       </div>
     </template>
     <template slot="content">
@@ -97,49 +135,70 @@
         </div>
         <div
           v-else-if="templates.length"
-          class="attachmentsTemplatesGrid d-flex flex-column">
+          class="attachmentsTemplatesSection">
+          <!-- Category chip bar (self-hiding when templates aren't categorized).
+               Free-text search lives in the drawer title bar (filter icon). -->
+          <div
+            v-if="showTemplateFilters"
+            class="attachmentsTemplatesFilters mb-3">
+            <categories-filter
+              v-model="selectedTemplateCategoryId"
+              :space-id="templatesOwnerId"
+              object-type="document"
+              hide-on-empty
+              class="attachmentsTemplateCategories" />
+          </div>
           <!-- Full-width reused Documents-app cards, stacked. click.capture keeps
                the card's hover info icon opening the info drawer, while a plain
                click SELECTS the template and reveals an editable name field right
                under that card (option B: name-first, pre-filled with the
                template's name). The footer "Create" then creates it with that
                name. -->
-          <div
-            v-for="template in templates"
-            :key="template.id"
-            class="attachmentsTemplateItem mb-3">
+          <div class="attachmentsTemplatesGrid d-flex flex-column">
             <div
-              class="attachmentsTemplateCard clickable"
-              :class="{ 'attachmentsTemplateCard--selected': selectedTemplate && selectedTemplate.id === template.id }"
-              role="button"
-              tabindex="0"
-              :aria-pressed="selectedTemplate && selectedTemplate.id === template.id ? 'true' : 'false'"
-              :aria-label="template.name"
-              @click.capture="onTemplateCardClick($event, template)"
-              @keydown.enter.prevent="selectTemplate(template)"
-              @keydown.space.prevent="selectTemplate(template)">
-              <documents-item-card
-                :file="template"
-                :files="templates"
-                :selected-documents="[]"
-                :show-details="false"
-                width="100%"
-                height="150px"
-                max-height="150px" />
+              v-for="template in filteredTemplates"
+              :key="template.id"
+              class="attachmentsTemplateItem mb-3">
+              <div
+                class="attachmentsTemplateCard clickable"
+                :class="{ 'attachmentsTemplateCard--selected': selectedTemplate && selectedTemplate.id === template.id }"
+                role="button"
+                tabindex="0"
+                :aria-pressed="selectedTemplate && selectedTemplate.id === template.id ? 'true' : 'false'"
+                :aria-label="template.name"
+                @click.capture="onTemplateCardClick($event, template)"
+                @keydown.enter.prevent="selectTemplate(template)"
+                @keydown.space.prevent="selectTemplate(template)">
+                <documents-item-card
+                  :file="template"
+                  :files="filteredTemplates"
+                  :selected-documents="[]"
+                  :show-details="false"
+                  width="100%"
+                  height="150px"
+                  max-height="150px" />
+              </div>
+              <v-text-field
+                v-if="selectedTemplate && selectedTemplate.id === template.id"
+                ref="templateNameInput"
+                v-model="newDocTitleInput"
+                :rules="documentTitleRules"
+                :placeholder="$t('attachment.untitledDocument')"
+                class="attachmentsCreateDocumentInput mt-2"
+                outlined
+                dense
+                autofocus
+                @keyup.enter="submitCreate()">
+                <span slot="append" class="text-color mt-1">{{ activeExtension }}</span>
+              </v-text-field>
             </div>
-            <v-text-field
-              v-if="selectedTemplate && selectedTemplate.id === template.id"
-              ref="templateNameInput"
-              v-model="newDocTitleInput"
-              :rules="documentTitleRules"
-              :placeholder="$t('attachment.untitledDocument')"
-              class="attachmentsCreateDocumentInput mt-2"
-              outlined
-              dense
-              autofocus
-              @keyup.enter="submitCreate()">
-              <span slot="append" class="text-color mt-1">{{ activeExtension }}</span>
-            </v-text-field>
+          </div>
+          <!-- The active category/search filter matched no template. -->
+          <div
+            v-if="!filteredTemplates.length"
+            class="attachmentsTemplatesEmpty d-flex flex-column align-center justify-center text-center py-6">
+            <v-icon size="36" color="grey">far fa-clone</v-icon>
+            <span class="text-sub-title mt-3">{{ $t('attachments.drawer.templates.noMatch') }}</span>
           </div>
         </div>
         <div
@@ -224,6 +283,12 @@ export default {
       templates: [],
       templatesLoading: false,
       templateCreating: false,
+      // Filter row: selected category chip (id) + free-text search over the loaded
+      // templates (both applied client-side). templateSearchMode toggles the title
+      // bar between the title and the full-width search field.
+      selectedTemplateCategoryId: null,
+      templateSearch: '',
+      templateSearchMode: false,
       // Bootstrap state: whether the drive's "Templates" folder exists, its parent
       // (drive root) id, and whether the current user may create a folder here.
       templatesFolderExists: false,
@@ -307,6 +372,27 @@ export default {
         ? this.$t('attachments.drawer.templates.empty.space')
         : this.$t('attachments.drawer.templates.empty.personal');
     },
+    // Templates after the active category + free-text filters (both client-side).
+    // Category ids are compared as strings — the chip component may emit the id as
+    // a string while the item's categoryIds are numbers (or vice-versa).
+    filteredTemplates() {
+      let list = this.templates;
+      if (this.selectedTemplateCategoryId !== null && this.selectedTemplateCategoryId !== '') {
+        const selected = String(this.selectedTemplateCategoryId);
+        list = list.filter(template => (template.categoryIds || []).some(id => String(id) === selected));
+      }
+      const query = (this.templateSearch || '').trim().toLowerCase();
+      if (query) {
+        list = list.filter(template => (template.name || '').toLowerCase().includes(query));
+      }
+      return list;
+    },
+    // Only surface the filter row once there are enough templates to warrant it —
+    // small sets are fully visible, and the category chip bar self-hides anyway
+    // when the templates aren't categorized.
+    showTemplateFilters() {
+      return this.templates.length > 3;
+    },
     // Drive-root-relative path of the current target folder (blank-create target).
     // '' targets the drive root. Defensive against a path passed as an object.
     destinationRelativePath() {
@@ -425,6 +511,21 @@ export default {
         this.createNewDoc();
       }
     },
+    // Title-bar filter icon → full-width search field (standard drawer pattern).
+    openTemplateSearch() {
+      this.templateSearchMode = true;
+      this.$nextTick(() => {
+        const field = this.$refs.templateSearchField;
+        if (field && field.focus) {
+          field.focus();
+        }
+      });
+    },
+    // Back arrow in search mode: restore the title and clear the query.
+    closeTemplateSearch() {
+      this.templateSearchMode = false;
+      this.templateSearch = '';
+    },
     resetNewDocInput() {
       this.NewDocInputHidden = true;
       this.newDocTitleInput = '';
@@ -469,6 +570,9 @@ export default {
       this.templatesFolderExists = false;
       this.rootFolderId = null;
       this.canCreateTemplatesFolder = false;
+      this.selectedTemplateCategoryId = null;
+      this.templateSearch = '';
+      this.templateSearchMode = false;
       const ownerId = this.templatesOwnerId;
       if (!ownerId) {
         return;

From 3ce85632c33fb6487ac84ad35fbdcb4b2ee2dac7 Mon Sep 17 00:00:00 2001
From: Benjamin Mestrallet <benjamin.mestrallet@gmail.com>
Date: Tue, 21 Jul 2026 21:02:14 +0100
Subject: [PATCH 2/6] feat: use exo-drawer built-in filter icon + expand in the
 templates drawer - EXO-88766
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the hand-rolled title-bar search with exo-drawer's built-in header
filter (use-filter + filter-placeholder + @filter-updated), so the filter icon
sits at the platform-standard location next to the close button with the standard
glyph/size/margin, and add allow-expand for a full-screen icon to browse templates
more comfortably. The category chip bar stays in the content; both filters remain
client-side over the loaded templates. Live-verified: funnel → inline search
filters (Budget → 3); expand toggles full screen and reveals more category chips.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../AttachmentCreateDocumentDrawer.vue        | 76 +++++--------------
 1 file changed, 17 insertions(+), 59 deletions(-)

diff --git a/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue b/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
index f59c045e9..7380e5a6f 100644
--- a/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
+++ b/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
@@ -27,13 +27,17 @@
   <exo-drawer
     ref="createDocumentDrawer"
     class="createDocumentDrawer"
-    right>
+    right
+    allow-expand
+    :use-filter="showTemplateFilters"
+    :filter-placeholder="$t('attachments.drawer.templates.search')"
+    @filter-updated="onTemplateFilter">
     <template slot="title">
-      <!-- Default title bar: back arrow + title, with a filter icon on the right
-           (shown once there are enough templates to filter). -->
-      <div
-        v-if="!templateSearchMode"
-        class="d-flex align-center full-width">
+      <!-- Back arrow + title. The filter icon (→ inline header search) and the
+           expand/full-screen icon are provided by exo-drawer itself (use-filter +
+           allow-expand), so they sit at the platform-standard location next to the
+           close button. -->
+      <div class="d-flex align-center">
         <v-btn
           icon
           small
@@ -44,40 +48,6 @@
           <v-icon size="20">fa-arrow-left</v-icon>
         </v-btn>
         <span class="text-truncate">{{ $t('attachments.drawer.addDocument') }}</span>
-        <v-spacer />
-        <v-btn
-          v-if="showTemplateFilters"
-          icon
-          small
-          class="flex-shrink-0"
-          :aria-label="$t('attachments.drawer.templates.search')"
-          :title="$t('attachments.drawer.templates.search')"
-          @click="openTemplateSearch()">
-          <v-icon size="18">fa-search</v-icon>
-        </v-btn>
-      </div>
-      <!-- Search mode: back arrow closes search; the field spans the full width. -->
-      <div
-        v-else
-        class="d-flex align-center full-width">
-        <v-btn
-          icon
-          small
-          class="ms-n2 me-1 flex-shrink-0"
-          :aria-label="$t('attachments.drawer.back')"
-          :title="$t('attachments.drawer.back')"
-          @click="closeTemplateSearch()">
-          <v-icon size="20">fa-arrow-left</v-icon>
-        </v-btn>
-        <v-text-field
-          ref="templateSearchField"
-          v-model="templateSearch"
-          :placeholder="$t('attachments.drawer.templates.search')"
-          class="attachmentsTemplateSearch flex-grow-1 pt-0 mt-0"
-          hide-details
-          dense
-          autofocus
-          clearable />
       </div>
     </template>
     <template slot="content">
@@ -283,12 +253,11 @@ export default {
       templates: [],
       templatesLoading: false,
       templateCreating: false,
-      // Filter row: selected category chip (id) + free-text search over the loaded
-      // templates (both applied client-side). templateSearchMode toggles the title
-      // bar between the title and the full-width search field.
+      // Filters over the loaded templates (both applied client-side): the selected
+      // category chip (id) + the free-text query fed by exo-drawer's built-in
+      // header filter (use-filter → @filter-updated).
       selectedTemplateCategoryId: null,
       templateSearch: '',
-      templateSearchMode: false,
       // Bootstrap state: whether the drive's "Templates" folder exists, its parent
       // (drive root) id, and whether the current user may create a folder here.
       templatesFolderExists: false,
@@ -511,20 +480,10 @@ export default {
         this.createNewDoc();
       }
     },
-    // Title-bar filter icon → full-width search field (standard drawer pattern).
-    openTemplateSearch() {
-      this.templateSearchMode = true;
-      this.$nextTick(() => {
-        const field = this.$refs.templateSearchField;
-        if (field && field.focus) {
-          field.focus();
-        }
-      });
-    },
-    // Back arrow in search mode: restore the title and clear the query.
-    closeTemplateSearch() {
-      this.templateSearchMode = false;
-      this.templateSearch = '';
+    // exo-drawer built-in header filter (use-filter) → the typed query, applied
+    // client-side over the loaded templates.
+    onTemplateFilter(text) {
+      this.templateSearch = text || '';
     },
     resetNewDocInput() {
       this.NewDocInputHidden = true;
@@ -572,7 +531,6 @@ export default {
       this.canCreateTemplatesFolder = false;
       this.selectedTemplateCategoryId = null;
       this.templateSearch = '';
-      this.templateSearchMode = false;
       const ownerId = this.templatesOwnerId;
       if (!ownerId) {
         return;

From 41ec77929842bc1c4110fe1cffe40f2346d70dc9 Mon Sep 17 00:00:00 2001
From: Benjamin Mestrallet <benjamin.mestrallet@gmail.com>
Date: Tue, 21 Jul 2026 21:07:26 +0100
Subject: [PATCH 3/6] =?UTF-8?q?feat:=20responsive=20template=20grid=20?=
 =?UTF-8?q?=E2=80=94=20multi-column=20when=20the=20drawer=20is=20expanded?=
 =?UTF-8?q?=20-=20EXO-88766?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switch the template grid to CSS grid auto-fill (repeat(auto-fill, minmax(240px,
1fr))): one full-width card per row in the normal narrow drawer, flowing to
several columns automatically when the drawer is expanded — purely container-width
driven, no expand-state needed. Live-verified: collapsed = 1/row, expanded = 5/row.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/main/webapp/skin/less/attachmentsApp.less   | 13 ++++++++++---
 .../AttachmentCreateDocumentDrawer.vue              |  4 ++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less b/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less
index 8a3e6601c..f266a2fec 100644
--- a/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less
+++ b/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less
@@ -262,11 +262,18 @@
     }
   }
 
-  /* Full-width, stacked template cards (each nearly the whole drawer width).
-     The editable name field appears right under the selected card. */
+  /* Responsive template grid: one full-width card per row in the normal (narrow)
+     drawer, flowing to several columns when the drawer is expanded — driven purely
+     by the container width via CSS grid auto-fill (no expand-state needed). The
+     editable name field appears right under the selected card. */
   .attachmentsTemplatesGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 12px;
+    align-items: start;
+
     .attachmentsTemplateItem {
-      width: 100%;
+      min-width: 0;
     }
 
     .attachmentsTemplateCard {
diff --git a/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue b/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
index 7380e5a6f..c8f3e0aeb 100644
--- a/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
+++ b/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
@@ -124,11 +124,11 @@
                under that card (option B: name-first, pre-filled with the
                template's name). The footer "Create" then creates it with that
                name. -->
-          <div class="attachmentsTemplatesGrid d-flex flex-column">
+          <div class="attachmentsTemplatesGrid">
             <div
               v-for="template in filteredTemplates"
               :key="template.id"
-              class="attachmentsTemplateItem mb-3">
+              class="attachmentsTemplateItem">
               <div
                 class="attachmentsTemplateCard clickable"
                 :class="{ 'attachmentsTemplateCard--selected': selectedTemplate && selectedTemplate.id === template.id }"

From f59f8b4cc60f15fc5e3cb6f431d59d9fcd156f28 Mon Sep 17 00:00:00 2001
From: Benjamin Mestrallet <benjamin.mestrallet@gmail.com>
Date: Tue, 21 Jul 2026 22:52:37 +0100
Subject: [PATCH 4/6] feat: expanded-only category bar + centered side margins
 + ring radius fix - EXO-88766
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Detect the expanded (full-screen) state via exo-drawer's own @expand-updated
  event (same pattern as App Center's launcher drawer) — no ResizeObserver hack.
- Show the category chip bar only in the expanded view (room for it there).
- Centre the expanded content (max-width 1200, margin-inline auto) so it has left/
  right margins like the notification/favorite drawers instead of edge-to-edge.
- Fix the selected-template ring to the card's own 4px radius so it hugs the
  corners instead of bowing out.
Live-verified: collapsed = no chips / full-width card / ring hugs; expanded =
chips shown, content centred with margins, multi-column, event flips drawerExpanded.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../main/webapp/skin/less/attachmentsApp.less   | 11 ++++++++++-
 .../AttachmentCreateDocumentDrawer.vue          | 17 +++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less b/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less
index f266a2fec..d0f8c31c1 100644
--- a/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less
+++ b/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less
@@ -280,7 +280,9 @@
       width: 100%;
       max-width: 100%;
       outline: none;
-      border-radius: 8px;
+      /* Match the reused card's own 4px radius so the selected ring hugs its
+         corners instead of bowing out. */
+      border-radius: 4px;
       transition: box-shadow .2s ease;
 
       /* Selected template = a clear primary ring around the card. */
@@ -312,6 +314,13 @@
   background-color: transparent !important;
 }
 
+/* Expanded (full-screen) drawer: centre the content with side margins — like the
+   notification / favorite drawers — instead of spanning edge to edge. */
+.createDocumentDrawerContent--expanded {
+  max-width: 1200px;
+  margin-inline: auto;
+}
+
 .driveExplorerDrawer {
   .serverFiles {
     .contentHeader {
diff --git a/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue b/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
index c8f3e0aeb..72b72a859 100644
--- a/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
+++ b/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
@@ -31,7 +31,8 @@
     allow-expand
     :use-filter="showTemplateFilters"
     :filter-placeholder="$t('attachments.drawer.templates.search')"
-    @filter-updated="onTemplateFilter">
+    @filter-updated="onTemplateFilter"
+    @expand-updated="drawerExpanded = $event">
     <template slot="title">
       <!-- Back arrow + title. The filter icon (→ inline header search) and the
            expand/full-screen icon are provided by exo-drawer itself (use-filter +
@@ -51,7 +52,9 @@
       </div>
     </template>
     <template slot="content">
-      <div class="createDocumentDrawerContent pt-4 pa-4">
+      <div
+        class="createDocumentDrawerContent pt-4 pa-4"
+        :class="{ 'createDocumentDrawerContent--expanded': drawerExpanded }">
         <!-- Section 1: create a blank document. Doc types are selectable cards
              (hover + selected state, keyboard-focusable). Picking one reveals
              the inline title input; the primary "Create" action lives in the
@@ -106,10 +109,11 @@
         <div
           v-else-if="templates.length"
           class="attachmentsTemplatesSection">
-          <!-- Category chip bar (self-hiding when templates aren't categorized).
+          <!-- Category chip bar — only in the expanded (full-screen) view, where
+               there's room for it (self-hiding when templates aren't categorized).
                Free-text search lives in the drawer title bar (filter icon). -->
           <div
-            v-if="showTemplateFilters"
+            v-if="drawerExpanded"
             class="attachmentsTemplatesFilters mb-3">
             <categories-filter
               v-model="selectedTemplateCategoryId"
@@ -258,6 +262,10 @@ export default {
       // header filter (use-filter → @filter-updated).
       selectedTemplateCategoryId: null,
       templateSearch: '',
+      // True when the drawer is in its expanded (full-screen) state — drives the
+      // centered side margins and shows the category chip bar. Fed by exo-drawer's
+      // own @expand-updated event (same pattern as App Center's launcher drawer).
+      drawerExpanded: false,
       // Bootstrap state: whether the drive's "Templates" folder exists, its parent
       // (drive root) id, and whether the current user may create a folder here.
       templatesFolderExists: false,
@@ -390,6 +398,7 @@ export default {
       this.$refs.createDocumentDrawer.open();
     },
     close() {
+      this.drawerExpanded = false;
       this.$refs.createDocumentDrawer.close();
     },
     refreshNewDocumentsActions() {

From 70790408c3928dd7cf8d4fce371dbed7287b960f Mon Sep 17 00:00:00 2001
From: Benjamin Mestrallet <benjamin.mestrallet@gmail.com>
Date: Tue, 21 Jul 2026 23:07:15 +0100
Subject: [PATCH 5/6] fix: template cards always show icon/title/info; fix
 category back-to-root; hide checkbox+menu - EXO-88766
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Category filter: navigating back to root emits `undefined`, which the filter
  treated as a value (String(undefined)) and matched nothing → no templates. Use
  `!= null` so null/undefined both mean 'no filter' (show all).
- Template cards now use show-details=true so the reused card's title band (file
  icon + name) shows permanently, like the Documents card view, and the info
  button is kept visible without hovering.
- Suppress the docs card-view selection checkbox and 3-dots actions menu on the
  template cards (they make no sense when picking a template); keep the info button.
Live-verified: root shows all; band + info always visible; hover shows no
checkbox/menu; category filter still narrows correctly.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/main/webapp/skin/less/attachmentsApp.less  | 14 ++++++++++++++
 .../AttachmentCreateDocumentDrawer.vue             |  6 ++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less b/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less
index d0f8c31c1..988efb39c 100644
--- a/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less
+++ b/documents-webapp/src/main/webapp/skin/less/attachmentsApp.less
@@ -314,6 +314,20 @@
   background-color: transparent !important;
 }
 
+/* Templates show the reused card's title band permanently (show-details) with the
+   file icon + name; also keep the info button visible without hovering (the card
+   otherwise only reveals it on hover). */
+.attachmentsTemplateCard #attachment-info {
+  display: inline-flex !important;
+}
+
+/* ...but suppress the docs card-view selection checkbox and 3-dots actions menu —
+   neither makes sense when picking a template. */
+.attachmentsTemplateCard .v-simple-checkbox,
+.attachmentsTemplateCard .v-btn:has(.mdi-dots-vertical) {
+  display: none !important;
+}
+
 /* Expanded (full-screen) drawer: centre the content with side margins — like the
    notification / favorite drawers — instead of spanning edge to edge. */
 .createDocumentDrawerContent--expanded {
diff --git a/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue b/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
index 72b72a859..3fc02ae49 100644
--- a/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
+++ b/documents-webapp/src/main/webapp/vue-app/attachment/components/attachment-document-creator/AttachmentCreateDocumentDrawer.vue
@@ -147,7 +147,7 @@
                   :file="template"
                   :files="filteredTemplates"
                   :selected-documents="[]"
-                  :show-details="false"
+                  :show-details="true"
                   width="100%"
                   height="150px"
                   max-height="150px" />
@@ -354,7 +354,9 @@ export default {
     // a string while the item's categoryIds are numbers (or vice-versa).
     filteredTemplates() {
       let list = this.templates;
-      if (this.selectedTemplateCategoryId !== null && this.selectedTemplateCategoryId !== '') {
+      // `!= null` catches both null and undefined — the category bar emits
+      // `undefined` when you navigate back to root, which must mean "no filter".
+      if (this.selectedTemplateCategoryId != null && this.selectedTemplateCategoryId !== '') {
         const selected = String(this.selectedTemplateCategoryId);
         list = list.filter(template => (template.categoryIds || []).some(id => String(id) === selected));
       }

From e8d0c8443d04bfa81cc926fe02a9801d0753c389 Mon Sep 17 00:00:00 2001
From: Benjamin Mestrallet <benjamin.mestrallet@gmail.com>
Date: Wed, 22 Jul 2026 22:01:28 +0100
Subject: [PATCH 6/6] feat: drive search + back arrow in the Folder tree nav
 drawer - EXO-88768 (#2013)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* EXO-88721: Revamp attachment drive-explorer picker onto /v1/documents API

Rewrite the level-2 "Use existing uploads" picker
(AttachmentsDriveExplorerDrawer) off the legacy ECMS/WCM XML drive
listing onto the modern documents-service /v1/documents JSON API.

- Two-source model: My Documents (userIdentityId) + My Spaces
  (space.identity.id); cloud drives dropped.
- Reuse the mobile FolderTreeViewDrawer for drive/space/folder
  navigation; the panel icon opens it and it auto-expands to the
  current folder (fix a Vuetify v-treeview buildTree crash caused by
  backend children:null on empty leaf folders).
- Reuse documents-breadcrumb with a new global mobile branch
  (fa-angle-left to parent + current folder / drive name).
- Simple list rows (checkbox + icon + name); exo-drawer use-filter
  header search driving server-side query; server-side pagination.
- Reuse Documents list cells via a $root shim on the attachment app.
- Preserve the level-1 emit contract and folder CRUD.
- Scope two leaking documents.css rules (.v-alert__content, .py-10px)
  under .documents-application to avoid bleeding into other portlets.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: revamp attachments drawer UX and add dedicated create-document drawer - EXO-88732

Level-1 "Attach files" drawer:
- Empty state: hero drop-zone + secondary tiles (Select from Documents / Create
  a new document); populated state: compact add bar (Upload / Documents / New)
  keeping room for the list.
- Full-drawer drag-and-drop overlay (bound to the drawer body, since exo-drawer
  teleports its panel out of the component root), remove-all with confirm,
  retry-on-failed-upload, and de-dup of the rendered list by (id || uploadId).
- Richer attachment rows: thumbnails, transparent source + location chips,
  and a remove/detach control that shows in both composer and entity-bound modes.

Create document is now a dedicated nested "Add a document" drawer (replacing the
popup menu):
- Doc-type selectable cards (Document/Spreadsheet/Presentation) with hover and a
  primary-ring selected state, keyboard-accessible (role/tabindex/Enter-Space).
- Inline title field + a footer Cancel/Create (Create disabled until a type is
  picked and the title is valid); reuses the existing create / 409 / OnlyOffice
  editor-tab logic; returns to the populated level-1 list on success.
- "Or start from a template" separator + a Templates placeholder empty-state
  (scaffold for a future templates backend).

Level-2 drive picker:
- Explicit back arrow returning to level-1.
- Ship the breadcrumb root label keys in the attachments bundle so they resolve
  on host pages (notes/task/news editors) that do not load the Documents bundle.

UI polish: shadow + light-grey tile hover (kept border), larger top margin, and
FA5-safe icons throughout.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: Drive "+ New" menu — Upload item + shared "Add a document" drawer - EXO-88752

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: document templates in the shared "Add a document" drawer - EXO-88755

Make the scaffolded Templates section of the shared create-document drawer
real, entirely in the documents repo and reusing existing components.

- Source = the "Templates" folder (by convention) at the current drive's docs
  root, resolved per context (space identity in a space, user identity in
  personal) via GET /v1/documents; its files are listed and rendered.
- Cards REUSE the Documents-app grid card (documents-item-card) for the
  thumbnail preview + hover title/info bar, registered into the attachment
  bundle via initComponents.js. Real thumbnails come for free.
- Card click copies the template node into the current target folder
  (POST /v1/documents/duplicate, destinationId resolved from the drive-root
  relative path via the breadcrumb endpoint) then behaves like blank-create:
  attachment-list add / Drive refresh, and OnlyOffice open only for office
  document types (PDF/image templates are copied but not opened, avoiding an
  editor error).
- The card's hover info icon opens the existing document-info-drawer.
- Visibility: the Templates section is always shown; when the folder is
  absent/empty a neutral, context word-swapped placeholder is displayed
  (new i18n keys in attachments_en.properties).

No backend changes: reuses /v1/documents list + /v1/documents/duplicate +
/v1/documents/breadcrumb.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: rename Drive Import to Mass Import with archive icon - EXO-88752

The '+ New' menu 'Import' entry (zip mass import) is renamed 'Mass Import' and
uses a distinct 'far fa-file-archive' icon (was the same fa-upload as the Upload
entry). i18n via the existing documents.label.zip.upload key; desktop + mobile
menus both updated.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: templates drawer — name-first create, full-width cards, folder bootstrap, symlink templates - EXO-88755

Follow-up polish on the shared Add-a-document drawer's Templates section:

- Name-first create (option B): clicking a template card selects it (primary ring)
  and reveals an editable title field right under that card, pre-filled with the
  template's base name; the footer Create commits it with that name.
- Full-width, stacked template cards (were fixed-width side-by-side).
- Readable card hover band: the reused Documents card's title band rendered white
  in the drawer (theme --allPagesMaskColor + a nested white v-card hid the white
  file name); force the activity-stream grey and make the inner name card
  transparent, teleport-proof selectors.
- Collision-safe create: copy the template into the target folder, re-fetch the
  created node for a valid (openable) id, and fall back to a dedupe-safe in-place
  duplicate on the JCR 'same name sibling' 500 — no backend change.
- Bootstrap (A): when the Templates folder is missing and the user can edit the
  drive root, offer a one-click 'Create a Templates folder'; context-aware empty
  states otherwise.
- Global/other-space templates via symlinks (B): copy the symlink target
  (sourceID) so the new doc holds real content; filter symlinks whose target the
  viewer can't read.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix: create-from-template targets the copy by id-diff, not by name - EXO-88755

The created copy was located by name (name === template.name). When the backend
de-duplicated a clashing name to 'name (1)', that match instead picked the source
template, so the option-B rename hit the template's id — renaming/consuming the
source and 503-ing (JCR refuses to rename a node OnlyOffice has open).

Fix: snapshot the destination folder's file ids before the copy (listFolderFileIds)
and pick the one new id afterwards (findNewCopy). The rename now targets the actual
copy (a fresh, unopened node). Verified live in the collision scenario: copy id != template id, rename 200, source template preserved; symlink templates also copy their target into a real file.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: filter templates by category + top-bar search in the Add-a-document drawer - EXO-88766

Adds a filter row to the drawer's Templates section, reusing the shared
<categories-filter> chip bar (the same flat component the activity stream + Docs
app use, from categoryVueComponents; object-type=document, space-id=drive owner,
hide-on-empty so it only shows when templates are actually categorized). Free-text
search follows the standard drawer pattern — a filter icon in the title bar opens
a full-width search field with a back arrow. Both filters apply client-side over
the already-loaded templates (category via item.categoryIds compared as strings so
number/string ids match; search via name); no extra backend. Filters only surface
once there are enough templates (>3). Wiring: AttachmentApp gatein module now
depends on categoryVueComponents so the chip component resolves in the bundle.
Live-verified: chips render + filter, top-bar search filters + back-arrow restores.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: use exo-drawer built-in filter icon + expand in the templates drawer - EXO-88766

Replace the hand-rolled title-bar search with exo-drawer's built-in header
filter (use-filter + filter-placeholder + @filter-updated), so the filter icon
sits at the platform-standard location next to the close button with the standard
glyph/size/margin, and add allow-expand for a full-screen icon to browse templates
more comfortably. The category chip bar stays in the content; both filters remain
client-side over the loaded templates. Live-verified: funnel → inline search
filters (Budget → 3); expand toggles full screen and reveals more category chips.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: responsive template grid — multi-column when the drawer is expanded - EXO-88766

Switch the template grid to CSS grid auto-fill (repeat(auto-fill, minmax(240px,
1fr))): one full-width card per row in the normal narrow drawer, flowing to
several columns automatically when the drawer is expanded — purely container-width
driven, no expand-state needed. Live-verified: collapsed = 1/row, expanded = 5/row.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: expanded-only category bar + centered side margins + ring radius fix - EXO-88766

- Detect the expanded (full-screen) state via exo-drawer's own @expand-updated
  event (same pattern as App Center's launcher drawer) — no ResizeObserver hack.
- Show the category chip bar only in the expanded view (room for it there).
- Centre the expanded content (max-width 1200, margin-inline auto) so it has left/
  right margins like the notification/favorite drawers instead of edge-to-edge.
- Fix the selected-template ring to the card's own 4px radius so it hugs the
  corners instead of bowing out.
Live-verified: collapsed = no chips / full-width card / ring hugs; expanded =
chips shown, content centred with margins, multi-column, event flips drawerExpanded.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix: template cards always show icon/title/info; fix category back-to-root; hide checkbox+menu - EXO-88766

- Category filter: navigating back to root emits `undefined`, which the filter
  treated as a value (String(undefined)) and matched nothing → no templates. Use
  `!= null` so null/undefined both mean 'no filter' (show all).
- Template cards now use show-details=true so the reused card's title band (file
  icon + name) shows permanently, like the Documents card view, and the info
  button is kept visible without hovering.
- Suppress the docs card-view selection checkbox and 3-dots actions menu on the
  template cards (they make no sense when picking a template); keep the info button.
Live-verified: root shows all; band + info always visible; hover shows no
checkbox/menu; category filter still narrows correctly.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: drive search + back arrow in the Folder tree nav drawer - EXO-88768

Add exo-drawer's built-in header filter (use-filter -> filter icon -> full-width
search) to the shared FolderTreeViewDrawer, wired to the tree's existing
searchDrives(query) via the 'search-drives' event (the same event DocumentsMain
already emits) — searches the user's spaces server-side, resets on empty. Add a
back arrow in the title for consistency with the other level-2 drawers (closes the
nav drawer, revealing the explorer/list underneath). Shared component, so it
benefits both the Documents mobile nav and the attachment drive explorer.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix: wire the Folder tree filter to v-treeview's native search - EXO-88768

The filter was emitting 'search-drives', but that event's handler (searchDrives)
lives on the desktop side-panel component (FolderTreeView), which isn't mounted
when the drawer is used — so typing did nothing. Instead feed the filter text into
v-treeview's built-in :search: added a 'search' prop to TreeView (document-tree-view)
and bound the drawer's filter to it, filtering the loaded tree (drives + expanded
folders) by name client-side.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../locale/portlet/Documents_en.properties    |  1 +
 .../body/views/FolderTreeViewDrawer.vue       | 28 +++++++++++++++++--
 .../components/body/views/TreeView.vue        |  7 +++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/documents-webapp/src/main/resources/locale/portlet/Documents_en.properties b/documents-webapp/src/main/resources/locale/portlet/Documents_en.properties
index 347fc2b4a..96b93ec31 100644
--- a/documents-webapp/src/main/resources/locale/portlet/Documents_en.properties
+++ b/documents-webapp/src/main/resources/locale/portlet/Documents_en.properties
@@ -121,6 +121,7 @@ documents.label.spaceHomeDocuments=Documents
 documents.label.access=Access
 documents.label.parentFolders=Parent folders
 documents.drawer.tree=Folder tree
+documents.drawer.tree.searchDrives=Search drives
 documents.label.extension.visibility=Access
 documents.label.visibility.specific.collaborator=Only hosts and designated collaborators can  view and edit
 documents.label.visibility.all=All space member can edit
diff --git a/documents-webapp/src/main/webapp/vue-app/documents/components/body/views/FolderTreeViewDrawer.vue b/documents-webapp/src/main/webapp/vue-app/documents/components/body/views/FolderTreeViewDrawer.vue
index f722e32cb..e98c612b7 100644
--- a/documents-webapp/src/main/webapp/vue-app/documents/components/body/views/FolderTreeViewDrawer.vue
+++ b/documents-webapp/src/main/webapp/vue-app/documents/components/body/views/FolderTreeViewDrawer.vue
@@ -17,17 +17,35 @@
  *
 -->
 <template>
-  <exo-drawer 
+  <exo-drawer
     ref="treeViewDrawer"
     class="treeViewDrawer"
+    :use-filter="true"
+    :filter-placeholder="$t('documents.drawer.tree.searchDrives')"
+    @filter-updated="onFilterDrives"
     @closed="close"
     right>
     <template slot="title">
-      {{ $t('documents.drawer.tree') }}
+      <!-- Back arrow (returns to the underlying list/explorer) + title. The filter
+           icon is provided by exo-drawer's built-in use-filter, wired to the tree's
+           existing drive search. -->
+      <div class="d-flex align-center">
+        <v-btn
+          icon
+          small
+          class="ms-n2 me-1 flex-shrink-0"
+          :aria-label="$t('documents.label.button.back')"
+          :title="$t('documents.label.button.back')"
+          @click="close()">
+          <v-icon size="20">fa-arrow-left</v-icon>
+        </v-btn>
+        <span class="text-truncate">{{ $t('documents.drawer.tree') }}</span>
+      </div>
     </template>
     <template slot="content">
       <document-tree-view
         :items="items"
+        :search="treeSearch"
         :folder-path="folderPath" />
     </template>
   </exo-drawer>
@@ -47,6 +65,7 @@ export default {
     pageSize: 20,
     drivesLimit: 20,
     drivesOffset: 0,
+    treeSearch: '',
   }),
   created(){
     this.$root.$on('openTreeFolderDrawer', this.open);
@@ -74,6 +93,11 @@ export default {
     close() {
       this.$refs.treeViewDrawer?.close();
     },
+    // exo-drawer's built-in header filter → v-treeview's built-in search, which
+    // filters the loaded tree (drives + expanded folders) by name client-side.
+    onFilterDrives(query) {
+      this.treeSearch = query || '';
+    },
     async retrieveDocumentTree() {
       this.items = [];
       this.loading = true;
diff --git a/documents-webapp/src/main/webapp/vue-app/documents/components/body/views/TreeView.vue b/documents-webapp/src/main/webapp/vue-app/documents/components/body/views/TreeView.vue
index fc446bf1a..4713448e4 100644
--- a/documents-webapp/src/main/webapp/vue-app/documents/components/body/views/TreeView.vue
+++ b/documents-webapp/src/main/webapp/vue-app/documents/components/body/views/TreeView.vue
@@ -22,6 +22,7 @@
     :open.sync="openNodes"
     :active.sync="activeNodes"
     :items="items"
+    :search="search"
     :load-children="fetchChildren"
     class="treeView-item my-2"
     item-key="id"
@@ -92,6 +93,12 @@ export default {
     showHidden: {
       type: Boolean,
       default: false
+    },
+    // Free-text filter fed to v-treeview's built-in search (matches node names of
+    // the loaded tree — drives and any expanded folders).
+    search: {
+      type: String,
+      default: ''
     }
   },