From f9af8a896246c7891380a95692735158b521b5d7 Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Wed, 25 Sep 2024 10:17:11 +0200
Subject: [PATCH 01/14] fix(pat contentbrowser): Add width parameter.

---
 src/pat/contentbrowser/contentbrowser.js        | 3 ++-
 src/pat/contentbrowser/src/App.svelte           | 2 ++
 src/pat/contentbrowser/src/SelectedItems.svelte | 8 +++++---
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/pat/contentbrowser/contentbrowser.js b/src/pat/contentbrowser/contentbrowser.js
index 0954fe867..826151f6a 100644
--- a/src/pat/contentbrowser/contentbrowser.js
+++ b/src/pat/contentbrowser/contentbrowser.js
@@ -22,6 +22,7 @@ parser.addArgument(
         "review_state",
     ], null, true
 );
+parser.addArgument("width");
 parser.addArgument("max-depth");
 parser.addArgument("base-path");
 parser.addArgument("context-path");
@@ -43,7 +44,7 @@ class Pattern extends BasePattern {
     async init() {
         this.el.setAttribute('style', 'display: none');
 
-        // ensure an id on our elemen (TinyMCE doesn't have one)
+        // ensure an id on our element (TinyMCE doesn't have one)
         let nodeId = this.el.getAttribute("id");
         if (!nodeId) {
             nodeId = utils.generateId();
diff --git a/src/pat/contentbrowser/src/App.svelte b/src/pat/contentbrowser/src/App.svelte
index e90befbc5..51a6c9fe5 100644
--- a/src/pat/contentbrowser/src/App.svelte
+++ b/src/pat/contentbrowser/src/App.svelte
@@ -14,6 +14,7 @@
     } from "./stores";
 
     export let maxDepth;
+    export let width;
     export let attributes;
     export let contextPath;
     export let vocabularyUrl;
@@ -58,6 +59,7 @@
         attributes: attributes,
         contextPath: contextPath,
         vocabularyUrl: vocabularyUrl,
+        width: width,
         maxDepth: maxDepth,
         basePath: basePath,
         selectableTypes: selectableTypes,
diff --git a/src/pat/contentbrowser/src/SelectedItems.svelte b/src/pat/contentbrowser/src/SelectedItems.svelte
index c084da732..fe4765354 100644
--- a/src/pat/contentbrowser/src/SelectedItems.svelte
+++ b/src/pat/contentbrowser/src/SelectedItems.svelte
@@ -104,7 +104,11 @@
     }
 </script>
 
-<div class="content-browser-selected-items-wrapper" bind:this={ref}>
+<div
+    class="content-browser-selected-items-wrapper"
+    style="width: {$config.width || 'auto'}"
+    bind:this={ref}
+>
     <!-- {maxSelectionsize} -->
     <div class="content-browser-selected-items">
         {#if $selectedItems}
@@ -140,8 +144,6 @@
     <button
         class="btn btn-primary"
         style="border-radius:0 var(--bs-border-radius) var(--bs-border-radius) 0"
-        disabled={$config.maximumSelectionSize > 0 &&
-            ($selectedItems.length || 0) >= $config.maximumSelectionSize}
         on:click|preventDefault={() => ($showContentBrowser = true)}
         >{_t("Select")}</button
     >

From d88c73de66f435039bc30fe3e73bd2626cc10fef Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Wed, 25 Sep 2024 10:17:50 +0200
Subject: [PATCH 02/14] maint(build): Update README, move pat-relateditems to
 deprecated patterns.

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 15317404d..60d8f28a5 100644
--- a/README.md
+++ b/README.md
@@ -97,7 +97,6 @@ But to resemble the CSS syntax, new patterns should instead separate each word w
 - [pat-preventdoublesubmit](src/pat/preventdoublesubmit/README.md): Prevent multiple submissions of the same forn.
 - [pat-querystring](src/pat/querystring/README.md): Show the querystring selection app.
 - [pat-recurrence](src/pat/recurrence/README.md): Show the recurrence widget.
-- [pat-relateditems](src/pat/relateditems/README.md): Show a widget to select related items. (deprecated: use `pat-contentbrowser` instead)
 - [pat-select2](src/pat/select2/README.md): Show a widget which enhances dropdown selections with automatic suggestions, search and tagging functionality.
 - [pat-sortable](src/pat/sortable/README.md): A pattern to make listings sortable.
 - [pat-structure](src/pat/structure/README.md): Plone's folder contents app.
@@ -111,6 +110,7 @@ But to resemble the CSS syntax, new patterns should instead separate each word w
 
 Deprecated patterns:
 
+- [pat-relateditems](src/pat/relateditems/README.md) (_deprecated_): Show a widget to select related items. (use `pat-contentbrowser` instead)
 - [pat-backdrop](src/pat/backdrop/README.md) (_deprecated_): Renders a dark background.
 - [pat-contentloader](src/pat/contentloader/README.md) (_deprecated_): Load remote or local content into a target.
 - [pat-texteditor](src/pat/texteditor/README.md) (_deprecated_): Show a code editor.

From 85f2dc627249ede983fe28084c71b2d6da1fe505 Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Wed, 25 Sep 2024 11:03:57 +0200
Subject: [PATCH 03/14] fix(pat contentbrowser): Skip multiselection when
 "maximumSelectionSize" is 1

---
 .../contentbrowser/src/ContentBrowser.svelte  | 40 ++++++++++++-------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/pat/contentbrowser/src/ContentBrowser.svelte b/src/pat/contentbrowser/src/ContentBrowser.svelte
index f22f11412..a3e3264fa 100644
--- a/src/pat/contentbrowser/src/ContentBrowser.svelte
+++ b/src/pat/contentbrowser/src/ContentBrowser.svelte
@@ -117,7 +117,7 @@
         const levelWrapper = e.currentTarget.closest(".levelItems");
         const prevSelection = levelWrapper.querySelectorAll(".selectedItem");
 
-        if (prevSelection.length) {
+        if (prevSelection.length && $config.maximumSelectionSize != 1) {
             // check for pressed shift or ctrl/meta key for multiselection
 
             if (shiftKey || e?.shiftKey) {
@@ -143,7 +143,7 @@
                         action: select ? "add" : "remove",
                     });
                 }
-            } else if (e?.metaKey || e?.ctrlKey) {
+            } else if (e?.metaKey || e?.ctrlKey) {
                 // de/select multiple single items
                 // NOTE: only for mouse click event
                 updatePreview({
@@ -155,12 +155,11 @@
                 [...prevSelection].map((el) => el.classList.remove("selectedItem"));
                 changePath(item, e);
             }
-
         } else {
             changePath(item, e);
         }
 
-        e.currentTarget.focus();  // needed for keyboard navigation
+        e.currentTarget.focus(); // needed for keyboard navigation
         e.currentTarget.classList.add("selectedItem");
     }
 
@@ -170,10 +169,10 @@
             return;
         }
         const possibleFocusEls = [
-            ...document.querySelectorAll(".levelColumn .inPath"),  // previously selected folder
-            ...document.querySelectorAll(".levelColumn .selectedItem"),  // previously selected item
-            document.querySelector(".levelColumn .contentItem"),  // default first item
-        ]
+            ...document.querySelectorAll(".levelColumn .inPath"), // previously selected folder
+            ...document.querySelectorAll(".levelColumn .selectedItem"), // previously selected item
+            document.querySelector(".levelColumn .contentItem"), // default first item
+        ];
         if (possibleFocusEls.length) {
             keyboardNavInitialized = true;
             possibleFocusEls[0].focus();
@@ -220,14 +219,23 @@
         }
         if (e.key == "Enter") {
             if (isSelectable(item)) {
-                addSelectedItems(item);
+                if ($config.maximumSelectionSize == 1) {
+                    addItem(item);
+                } else {
+                    addSelectedItems();
+                }
             }
         }
     }
 
     async function addItem(item) {
-        selectedItems.update((n) => [...n, item]);
-        selectedUids.update(() => $selectedItems.map((x) => x.UID));
+        if ($config.maximumSelectionSize == 1) {
+            selectedItems.set([item]);
+            selectedUids.set([item.UID]);
+        } else {
+            selectedItems.update((n) => [...n, item]);
+            selectedUids.update(() => $selectedItems.map((x) => x.UID));
+        }
         updatePreview({ action: "clear" });
         $showContentBrowser = false;
         keyboardNavInitialized = false;
@@ -325,7 +333,10 @@
         <nav
             class="content-browser"
             transition:fly={{ x: (vw / 100) * 94, opacity: 1 }}
-            on:introend={() => { scrollToRight(); initKeyboardNav() }}
+            on:introend={() => {
+                scrollToRight();
+                initKeyboardNav();
+            }}
             use:clickOutside
             on:click_outside={cancelSelection}
         >
@@ -427,7 +438,8 @@
                                         role="button"
                                         tabindex={n}
                                         data-uuid={item.UID}
-                                        on:keydown|preventDefault={(e) => keyboardNavigation(item, e)}
+                                        on:keydown|preventDefault={(e) =>
+                                            keyboardNavigation(item, e)}
                                         on:click={(e) => clickItem(item, e)}
                                     >
                                         {#if level.gridView}
@@ -634,7 +646,7 @@
         min-height: 2rem;
     }
     .contentItem:focus-visible {
-        outline:none;
+        outline: none;
     }
     .contentItem.even {
         background-color: var(--bs-secondary-bg);

From ba795e505eb08043af19fc07eed70992dd186253 Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Wed, 25 Sep 2024 11:20:09 +0200
Subject: [PATCH 04/14] Remove obsolete event

---
 src/pat/contentbrowser/src/SelectedItems.svelte | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/pat/contentbrowser/src/SelectedItems.svelte b/src/pat/contentbrowser/src/SelectedItems.svelte
index fe4765354..09ac55950 100644
--- a/src/pat/contentbrowser/src/SelectedItems.svelte
+++ b/src/pat/contentbrowser/src/SelectedItems.svelte
@@ -20,16 +20,6 @@
     // showContentBrowser reactive state
     const showContentBrowser = getContext("showContentBrowser");
 
-    function event_dispatch(name, detail) {
-        const event = new CustomEvent(name, {
-            detail: {
-                content: detail,
-            },
-            bubbles: true,
-        });
-        document.dispatchEvent(event);
-    }
-
     onMount(async () => {
         await initializeSelectedItemsStore();
         initializeSorting();
@@ -99,7 +89,6 @@
         if ($selectedItems.length || !initializing) {
             setNodeValue(selectedUidsFromSelectedItems());
             initializeSorting();
-            event_dispatch("updateSelection", selectedUids);
         }
     }
 </script>

From 07897b74a9fab63b8a15b98cf4135b3aa6e94cec Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Wed, 25 Sep 2024 11:20:40 +0200
Subject: [PATCH 05/14] remove debugging

---
 src/pat/contentbrowser/src/utils.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pat/contentbrowser/src/utils.js b/src/pat/contentbrowser/src/utils.js
index 6d06638c9..759b91a88 100644
--- a/src/pat/contentbrowser/src/utils.js
+++ b/src/pat/contentbrowser/src/utils.js
@@ -85,7 +85,6 @@ export async function request({
             total: 0,
         }
     };
-    console.log(vocabQuery);
     let url = `${vocabularyUrl}&query=${JSON.stringify(
         vocabQuery
     )}&attributes=${JSON.stringify(attributes)}&batch=${JSON.stringify({

From 596bc39a86e8796677b21b6f869eb54c7a099f1b Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Wed, 25 Sep 2024 11:26:46 +0200
Subject: [PATCH 06/14] fix(pat contentbrowser): dispatch "change" event.

---
 src/pat/contentbrowser/src/SelectedItems.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pat/contentbrowser/src/SelectedItems.svelte b/src/pat/contentbrowser/src/SelectedItems.svelte
index 09ac55950..7444acfe3 100644
--- a/src/pat/contentbrowser/src/SelectedItems.svelte
+++ b/src/pat/contentbrowser/src/SelectedItems.svelte
@@ -4,6 +4,7 @@
     import { get_items_from_uids, resolveIcon } from "./utils.js";
     import Sortable from "sortablejs";
     import _t from "../../../core/i18n-wrapper";
+    import events from "@patternslib/patternslib/src/core/events";
 
     let ref;
     let initializing = true;
@@ -82,6 +83,7 @@
     function setNodeValue(selectedUids) {
         const node_val = selectedUids.join($config.separator);
         selectedItemsNode.value = node_val;
+        selectedItemsNode.dispatchEvent(events.change_event());
     }
 
     $: {

From 8ba6adc10a9438225d30f86f831846d5414438e6 Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Wed, 25 Sep 2024 11:27:17 +0200
Subject: [PATCH 07/14] fix(pat querystring): use contentbrowser for internal
 path selection.

---
 src/pat/querystring/querystring.js | 86 +++++++++++++++---------------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/src/pat/querystring/querystring.js b/src/pat/querystring/querystring.js
index 0871a34e7..ef24c49b4 100644
--- a/src/pat/querystring/querystring.js
+++ b/src/pat/querystring/querystring.js
@@ -3,6 +3,7 @@ import _ from "underscore";
 import _t from "../../core/i18n-wrapper";
 import utils from "../../core/utils";
 import Base from "@patternslib/patternslib/src/core/base";
+import { Pattern as ContentbrowserPattern } from "../contentbrowser/contentbrowser";
 
 var Criteria = function () {
     this.init.apply(this, arguments);
@@ -37,7 +38,10 @@ Criteria.prototype = {
         var self = this;
         self.app = app;
 
-        self.options = $.extend(true, {}, self.defaults, options);
+        self.options = {
+            ...self.defaults,
+            ...options,
+        };
         self.indexes = indexes;
         self.indexGroups = {};
         self.baseUrl = baseUrl;
@@ -53,19 +57,17 @@ Criteria.prototype = {
         self.patternAjaxSelectOptions = patternAjaxSelectOptions || {};
         self.patternRelateditemsOptions = patternRelateditemsOptions || {};
         // Defaults
-        self.patternAjaxSelectOptions = $.extend(
-            { width: "250px" },
-            self.patternAjaxSelectOptions
-        );
-        self.patternRelateditemsOptions = $.extend(
-            {
-                vocabularyUrl:
-                    self.baseUrl +
-                    "@@getVocabulary?name=plone.app.vocabularies.Catalog&field=relatedItems",
-                width: "400px",
-            },
-            self.patternRelateditemsOptions
-        );
+        self.patternAjaxSelectOptions = {
+            width: "250px",
+            ...self.patternAjaxSelectOptions,
+        };
+        self.patternRelateditemsOptions = {
+            vocabularyUrl:
+                self.baseUrl +
+                "@@getVocabulary?name=plone.app.vocabularies.Catalog&field=relatedItems",
+            width: "20rem",
+            ...self.patternRelateditemsOptions,
+        };
         // Force set
         self.patternRelateditemsOptions["maximumSelectionSize"] = 1;
 
@@ -85,7 +87,8 @@ Criteria.prototype = {
         );
 
         // list of indexes
-        $.each(self.indexes, function (value, options) {
+        for (const value in self.indexes) {
+            let options = self.indexes[value];
             if (options.enabled) {
                 if (!self.indexGroups[options.group]) {
                     self.indexGroups[options.group] = $("<optgroup/>")
@@ -96,7 +99,7 @@ Criteria.prototype = {
                     $("<option/>").attr("value", value).html(options.title)
                 );
             }
-        });
+        }
 
         // attach index select to DOM
         self.$wrapper.append(
@@ -180,8 +183,8 @@ Criteria.prototype = {
             };
         }
 
-        $.each(self.indexes.path.operators, function (key, value) {
-            var options = value;
+        for (const key in self.indexes.path.operators) {
+            var options = self.indexes.path.operators[key];
             if (key.indexOf("absolute") > 0) {
                 options.title = "Custom";
             } else if (key.indexOf("relative") > 0) {
@@ -192,12 +195,12 @@ Criteria.prototype = {
                 options.title = "Current (./)";
                 options.widget = "RelativePathWidget";
             }
-        });
+        };
     },
     resetPathOperators: function () {
         var self = this;
-        $.each(self.indexes.path.operators, function (key, value) {
-            var options = value;
+        for (const key in self.indexes.path.operators) {
+            var options = self.indexes.path.operators[key];
             if (key.indexOf("absolute") > 0) {
                 options.title = "Absolute Path";
             } else if (key.indexOf("relative") > 0) {
@@ -208,7 +211,7 @@ Criteria.prototype = {
                 options.title = "Navigation Path";
                 options.widget = "ReferenceWidget";
             }
-        });
+        };
 
         return;
     },
@@ -351,9 +354,8 @@ Criteria.prototype = {
                         self.trigger("value-changed");
                     });
             } else {
-                console.log(value);
                 var pathAndDepth = [".", "1"];
-                if (typeof value !== "undefined") {
+                if (typeof value !== "undefined" && value.indexOf("::") != -1) {
                     pathAndDepth = value.split("::");
                     if (pathAndDepth[0] === ".") {
                         self.$operator.val(
@@ -395,11 +397,10 @@ Criteria.prototype = {
                     .addClass(self.options.classValueName + "-" + widget)
                     .appendTo($wrapper)
                     .val(pathAndDepth[0])
-                    .patternRelateditems(self.patternRelateditemsOptions)
-                    .on("change", function () {
-                        self.trigger("value-changed");
-                    });
-                $wrapper.addClass("break-line");
+                const pat = new ContentbrowserPattern(self.$value[0], self.patternRelateditemsOptions);
+                pat.el.addEventListener("change", (e) => {
+                    self.trigger("value-changed");
+                })
                 self.$value.after(createDepthSelect(pathAndDepth[1]));
             }
         } else if (widget === "MultipleSelectionWidget") {
@@ -411,12 +412,13 @@ Criteria.prototype = {
                     self.trigger("value-changed");
                 });
             if (self.indexes[index]) {
-                $.each(self.indexes[index].values, function (value, options) {
+                for (const value in self.indexes[index].values) {
+                    const options = self.indexes[index].values[value];
                     $("<option/>")
                         .attr("value", value)
                         .html(options.title)
                         .appendTo(self.$value);
-                });
+                };
             }
             self.$value.patternSelect2(self.patternAjaxSelectOptions);
         }
@@ -642,9 +644,6 @@ export default Base.extend({
         showPreviews: true,
     },
     init: async function () {
-        await import("../select2/select2");
-        await import("../relateditems/relateditems");
-
         import("./querystring.scss");
 
         var self = this;
@@ -801,7 +800,7 @@ export default Base.extend({
             .attr("name", "sort_on")
             .appendTo(self.$sortWrapper)
             .on("change", function () {
-                self.refreshPreviewEvent.call(self);
+                self.refreshPreviewEvent();
                 $('[id$="sort_on"]', existingSortOn).val($(this).val());
             });
 
@@ -816,7 +815,7 @@ export default Base.extend({
         self.$sortOrder = $('<input type="checkbox" />')
             .attr("name", "sort_reversed:boolean")
             .on("change", function () {
-                self.refreshPreviewEvent.call(self);
+                self.refreshPreviewEvent();
                 if ($(this).prop("checked")) {
                     $('input[type="checkbox"]', existingSortOrder).prop("checked", true);
                 } else {
@@ -868,12 +867,12 @@ export default Base.extend({
         }
 
         var query = [];
-        $.each(self.criterias, function (i, criteria) {
+        for (const criteria of self.criterias) {
             var querypart = criteria.buildQueryPart();
             if (querypart !== "") {
                 query.push(querypart);
             }
-        });
+        };
 
         self.$previewPane = $("<div/>")
             .addClass(self.options.classPreviewName)
@@ -892,14 +891,15 @@ export default Base.extend({
             query.push("sort_order=reverse");
         }
 
-        self._previewXhr = $.get(self.options.previewURL + "?" + query.join("&")).done(
-            function (data) {
+        self._previewXhr = $.ajax({
+            url: self.options.previewURL + "?" + query.join("&"),
+            success: (data) => {
                 $("<div/>")
                     .addClass(self.options.classPreviewResultsWrapperName)
-                    .html(data)
+                    .html(utils.parseBodyTag(data))
                     .appendTo(self.$previewPane);
-            }
-        );
+            },
+        });
     },
     updateValue: function () {
         // updating the original input with json data in the form:

From f7358161d9ad33992a461fd73439aec696c7550d Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Wed, 25 Sep 2024 11:32:24 +0200
Subject: [PATCH 08/14] linting

---
 src/pat/querystring/querystring.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pat/querystring/querystring.js b/src/pat/querystring/querystring.js
index ef24c49b4..293c0f783 100644
--- a/src/pat/querystring/querystring.js
+++ b/src/pat/querystring/querystring.js
@@ -398,7 +398,7 @@ Criteria.prototype = {
                     .appendTo($wrapper)
                     .val(pathAndDepth[0])
                 const pat = new ContentbrowserPattern(self.$value[0], self.patternRelateditemsOptions);
-                pat.el.addEventListener("change", (e) => {
+                pat.el.addEventListener("change", () => {
                     self.trigger("value-changed");
                 })
                 self.$value.after(createDepthSelect(pathAndDepth[1]));

From 6942d30d65e9fa5f2a2702fde29c165457f2095a Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Wed, 25 Sep 2024 12:24:39 +0200
Subject: [PATCH 09/14] fix tests

---
 src/pat/querystring/querystring.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/pat/querystring/querystring.js b/src/pat/querystring/querystring.js
index 293c0f783..cea46c96a 100644
--- a/src/pat/querystring/querystring.js
+++ b/src/pat/querystring/querystring.js
@@ -644,6 +644,8 @@ export default Base.extend({
         showPreviews: true,
     },
     init: async function () {
+        await import("../select2/select2");
+
         import("./querystring.scss");
 
         var self = this;
@@ -705,10 +707,10 @@ export default Base.extend({
         self.criterias = [];
 
         // create populated criterias
-        if (self.$el.val()) {
-            $.each(JSON.parse(self.$el.val()), function (i, item) {
+        if (self.el.value) {
+            for (const item of JSON.parse(self.el.value)) {
                 self.createCriteria(item.i, item.o, item.v);
-            });
+            }
         }
 
         // add empty criteria which enables users to create new cr
@@ -910,12 +912,12 @@ export default Base.extend({
         var self = this;
 
         var criteriastrs = [];
-        $.each(self.criterias, function (i, criteria) {
+        for (const criteria of self.criterias) {
             var jsonstr = criteria.getJSONListStr();
             if (jsonstr !== "") {
                 criteriastrs.push(jsonstr);
             }
-        });
+        }
         var val = "[" + criteriastrs.join(",") + "]";
         self.$el.val(val);
         self.$el.trigger("change");

From a52337da8a79da75bc97223828a6891655c5b741 Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Thu, 26 Sep 2024 10:00:13 +0200
Subject: [PATCH 10/14] feat(pat contentbrowser): recently used items as
 component.

---
 src/pat/contentbrowser/contentbrowser.js      |  1 +
 src/pat/contentbrowser/src/App.svelte         |  2 +
 .../contentbrowser/src/ContentBrowser.svelte  | 18 +++++--
 src/pat/contentbrowser/src/ContentStore.js    |  2 +
 .../contentbrowser/src/RecentlyUsed.svelte    | 49 +++++++++++++++++++
 src/pat/contentbrowser/src/utils.js           | 40 +++++++++++++--
 6 files changed, 106 insertions(+), 6 deletions(-)
 create mode 100644 src/pat/contentbrowser/src/RecentlyUsed.svelte

diff --git a/src/pat/contentbrowser/contentbrowser.js b/src/pat/contentbrowser/contentbrowser.js
index 826151f6a..60c7e3846 100644
--- a/src/pat/contentbrowser/contentbrowser.js
+++ b/src/pat/contentbrowser/contentbrowser.js
@@ -34,6 +34,7 @@ parser.addArgument("selection-template");
 parser.addArgument("favorites");
 parser.addArgument("recently-used");
 parser.addArgument("recently-used-key");
+parser.addArgument("recently-used-max-items", 20);
 parser.addArgument("b-size");
 
 class Pattern extends BasePattern {
diff --git a/src/pat/contentbrowser/src/App.svelte b/src/pat/contentbrowser/src/App.svelte
index 51a6c9fe5..34bc2e45e 100644
--- a/src/pat/contentbrowser/src/App.svelte
+++ b/src/pat/contentbrowser/src/App.svelte
@@ -30,6 +30,7 @@
     export let favorites;
     export let recentlyUsed;
     export let recentlyUsedKey;
+    export let recentlyUsedMaxItems;
     export let bSize = 20;
 
     const log = logger.getLogger("pat-contentbrowser");
@@ -72,6 +73,7 @@
         favorites: favorites,
         recentlyUsed: recentlyUsed,
         recentlyUsedKey: recentlyUsedKey,
+        recentlyUsedMaxItems: recentlyUsedMaxItems,
         base_url: base_url,
         pageSize: bSize,
     };
diff --git a/src/pat/contentbrowser/src/ContentBrowser.svelte b/src/pat/contentbrowser/src/ContentBrowser.svelte
index a3e3264fa..534615f01 100644
--- a/src/pat/contentbrowser/src/ContentBrowser.svelte
+++ b/src/pat/contentbrowser/src/ContentBrowser.svelte
@@ -6,7 +6,13 @@
     import _t from "../../../core/i18n-wrapper";
     import Upload from "../../upload/upload";
     import contentStore from "./ContentStore";
-    import { clickOutside, get_items_from_uids, resolveIcon } from "./utils";
+    import {
+        clickOutside,
+        get_items_from_uids,
+        resolveIcon,
+        updateRecentlyUsed,
+    } from "./utils";
+    import RecentlyUsed from "./RecentlyUsed.svelte";
 
     animateScroll.setGlobalOptions({
         scrollX: true,
@@ -236,6 +242,7 @@
             selectedItems.update((n) => [...n, item]);
             selectedUids.update(() => $selectedItems.map((x) => x.UID));
         }
+        updateRecentlyUsed(item, $config);
         updatePreview({ action: "clear" });
         $showContentBrowser = false;
         keyboardNavInitialized = false;
@@ -256,6 +263,10 @@
         keyboardNavInitialized = false;
     }
 
+    function selectRecentlyUsed(event) {
+        addItem(event.detail.item);
+    }
+
     function cancelSelection() {
         $showContentBrowser = false;
         keyboardNavInitialized = false;
@@ -360,8 +371,9 @@
                         })}</button
                     >
                 {/if}
+                <RecentlyUsed on:selectItem={selectRecentlyUsed} />
                 <button
-                    class="btn btn-link text-white"
+                    class="btn btn-link text-white ms-auto"
                     tabindex="0"
                     on:click|preventDefault={() => cancelSelection()}
                     ><svg use:resolveIcon={{ iconName: "x-circle" }} /></button
@@ -595,7 +607,7 @@
         color: var(--bs-light);
         width: 100%;
         display: flex;
-        justify-content: space-between;
+        justify-content: start;
     }
     .toolBar > .upload {
         margin: 0 1rem 0 auto;
diff --git a/src/pat/contentbrowser/src/ContentStore.js b/src/pat/contentbrowser/src/ContentStore.js
index 3a61d94e5..a1d08fab8 100644
--- a/src/pat/contentbrowser/src/ContentStore.js
+++ b/src/pat/contentbrowser/src/ContentStore.js
@@ -75,6 +75,8 @@ export default function (config, pathCache) {
                     if (levelInfo.total) {
                         level.UID = levelInfo.results[0].UID;
                         level.Title = levelInfo.results[0].Title;
+                        level.portal_type = levelInfo.results[0].portal_type;
+                        level.getIcon = levelInfo.results[0].getIcon;
                         // check if level is selectable (config.selectableTypes)
                         level.selectable = (!config.selectableTypes.length || config.selectableTypes.indexOf(levelInfo.results[0].portal_type) != -1);
                     }
diff --git a/src/pat/contentbrowser/src/RecentlyUsed.svelte b/src/pat/contentbrowser/src/RecentlyUsed.svelte
new file mode 100644
index 000000000..a7ee41bff
--- /dev/null
+++ b/src/pat/contentbrowser/src/RecentlyUsed.svelte
@@ -0,0 +1,49 @@
+<script>
+    import { resolveIcon, recentlyUsedItems } from "./utils";
+    import _t from "../../../core/i18n-wrapper";
+    import { createEventDispatcher, getContext } from "svelte";
+
+    const config = getContext("config");
+    const items = recentlyUsedItems(true, $config);
+    const dispatch = createEventDispatcher();
+
+    function select(item) {
+        dispatch("selectItem", {
+            item: item,
+        });
+    }
+</script>
+
+{#if $config.recentlyUsed && items.length}
+    <div class="recentlyUsed dropdown ms-2">
+        <button
+            type="button"
+            class="recentlyUsed dropdown-toggle btn btn-primary btn-sm"
+            data-bs-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="false"
+        >
+            <svg use:resolveIcon={{ iconName: "grid-fill" }} />
+            {_t("Recently Used")}
+        </button>
+        <ul class="dropdown-menu">
+            {#each items.reverse() as recentlyUsed}
+                <li>
+                    <a
+                        href={recentlyUsed.getURL}
+                        on:click|preventDefault={() => select(recentlyUsed)}
+                        class="dropdown-item"
+                    >
+                        <svg
+                            on:error={console.log(recentlyUsed)}
+                            use:resolveIcon={{
+                                iconName: `contenttype/${recentlyUsed?.portal_type.toLowerCase().replace(/\.| /g, "-")}`,
+                            }}
+                        />
+                        {recentlyUsed.Title}
+                    </a>
+                </li>
+            {/each}
+        </ul>
+    </div>
+{/if}
diff --git a/src/pat/contentbrowser/src/utils.js b/src/pat/contentbrowser/src/utils.js
index 759b91a88..3616b6bdb 100644
--- a/src/pat/contentbrowser/src/utils.js
+++ b/src/pat/contentbrowser/src/utils.js
@@ -51,7 +51,7 @@ export async function request({
                 },
             ],
         };
-        if(selectableTypes) {
+        if (selectableTypes) {
             vocabQuery.criteria.push({
                 i: "portal_type",
                 o: "plone.app.querystring.operation.list.contains",
@@ -79,7 +79,7 @@ export async function request({
         })
     }
 
-    if(!vocabQuery.criteria.length) {
+    if (!vocabQuery.criteria.length) {
         return {
             results: [],
             total: 0,
@@ -155,7 +155,7 @@ export async function resolveIcon(node, { iconName }) {
     const iconCode = await getIcon(iconName);
     node.outerHTML = iconCode;
     return {
-        destroy() {},
+        destroy() { },
     };
 }
 
@@ -175,3 +175,37 @@ export function clickOutside(node) {
         },
     };
 }
+
+export function recentlyUsedItems(filterItems, config) {
+    let ret = utils.storage.get(config.recentlyUsedKey) || [];
+    // hard-limit to 1000 entries
+    ret = ret.slice(ret.length - 1000, ret.length);
+    if (filterItems && config?.selectableTypes.length) {
+        ret = ret.filter((it) => {
+            return config.selectableTypes.indexOf(it.portal_type) != -1;
+        });
+    }
+    // max is applied AFTER filtering selectable items.
+    const max = parseInt(config.recentlyUsedMaxItems, 10);
+    if (max) {
+        // return the slice from the end, as we want to display newest items first.
+        ret = ret.slice(ret.length - max, ret.length);
+    }
+    return ret;
+}
+
+export function updateRecentlyUsed(item, config) {
+    if (!config.recentlyUsed) {
+        return;
+    }
+    // add to recently added items
+    const recentlyUsed = recentlyUsedItems(false, config); // do not filter for selectable but get all. append to that list the new item.
+    const alreadyPresent = recentlyUsed.filter((it) => {
+        return it.UID === item.UID;
+    });
+    if (alreadyPresent.length > 0) {
+        recentlyUsed.splice(recentlyUsed.indexOf(alreadyPresent[0]), 1);
+    }
+    recentlyUsed.push(item);
+    utils.storage.set(config.recentlyUsedKey, recentlyUsed);
+}

From 4e5a39325aa3e979a6f85ae2800aecef56e43ec8 Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Thu, 26 Sep 2024 10:50:27 +0200
Subject: [PATCH 11/14] feat(pat contentbrowser): favorites as component

---
 .../contentbrowser/src/ContentBrowser.svelte  | 22 ++++++++++++
 src/pat/contentbrowser/src/Favorites.svelte   | 36 +++++++++++++++++++
 .../contentbrowser/src/RecentlyUsed.svelte    |  2 +-
 3 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 src/pat/contentbrowser/src/Favorites.svelte

diff --git a/src/pat/contentbrowser/src/ContentBrowser.svelte b/src/pat/contentbrowser/src/ContentBrowser.svelte
index 534615f01..b211451a0 100644
--- a/src/pat/contentbrowser/src/ContentBrowser.svelte
+++ b/src/pat/contentbrowser/src/ContentBrowser.svelte
@@ -9,9 +9,11 @@
     import {
         clickOutside,
         get_items_from_uids,
+        request,
         resolveIcon,
         updateRecentlyUsed,
     } from "./utils";
+    import Favorites from "./Favorites.svelte";
     import RecentlyUsed from "./RecentlyUsed.svelte";
 
     animateScroll.setGlobalOptions({
@@ -267,6 +269,25 @@
         addItem(event.detail.item);
     }
 
+    async function selectFavorite(event) {
+        const path = event.detail.item.path;
+        const response = await request({
+            vocabularyUrl: $config.vocabularyUrl,
+            attributes: $config.attributes,
+            levelInfoPath: path,
+        });
+        if(!response.total) {
+            alert(`${path} not found!`);
+            return;
+        }
+        const item = response.results[0];
+        if(!item.path) {
+            // fix for Plone Site
+            item.path = "/";
+        }
+        changePath(item);
+    }
+
     function cancelSelection() {
         $showContentBrowser = false;
         keyboardNavInitialized = false;
@@ -372,6 +393,7 @@
                     >
                 {/if}
                 <RecentlyUsed on:selectItem={selectRecentlyUsed} />
+                <Favorites on:selectItem={selectFavorite} />
                 <button
                     class="btn btn-link text-white ms-auto"
                     tabindex="0"
diff --git a/src/pat/contentbrowser/src/Favorites.svelte b/src/pat/contentbrowser/src/Favorites.svelte
new file mode 100644
index 000000000..debaab247
--- /dev/null
+++ b/src/pat/contentbrowser/src/Favorites.svelte
@@ -0,0 +1,36 @@
+<script>
+    import { resolveIcon } from "./utils";
+    import _t from "../../../core/i18n-wrapper";
+    import { createEventDispatcher, getContext } from "svelte";
+
+    const config = getContext("config");
+    const dispatch = createEventDispatcher();
+
+    function select(item) {
+        dispatch("selectItem", {
+            item: item,
+        });
+    }
+</script>
+
+{#if $config?.favorites}
+<div class="favorites dropdown dropdown-menu-end ms-2">
+    <button
+        type="button"
+        class="favorites dropdown-toggle btn btn-outline-light btn-sm"
+        data-bs-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false"
+    >
+        <svg use:resolveIcon={{ iconName: "star-fill" }} />
+        {_t("Favorites")}
+    </button>
+    <ul class="dropdown-menu">
+        {#each $config.favorites as favorite}
+        <li>
+            <a class="dropdown-item" href="{favorite.path}" on:click|preventDefault={() => select(favorite)}>{favorite.title}</a>
+        </li>
+        {/each}
+    </ul>
+</div>
+{/if}
diff --git a/src/pat/contentbrowser/src/RecentlyUsed.svelte b/src/pat/contentbrowser/src/RecentlyUsed.svelte
index a7ee41bff..9be8bfdba 100644
--- a/src/pat/contentbrowser/src/RecentlyUsed.svelte
+++ b/src/pat/contentbrowser/src/RecentlyUsed.svelte
@@ -18,7 +18,7 @@
     <div class="recentlyUsed dropdown ms-2">
         <button
             type="button"
-            class="recentlyUsed dropdown-toggle btn btn-primary btn-sm"
+            class="recentlyUsed dropdown-toggle btn btn-outline-light btn-sm"
             data-bs-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false"

From 94af67571f97d509bfac7200e662538ceb0da2ca Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Thu, 26 Sep 2024 10:56:02 +0200
Subject: [PATCH 12/14] update upload button position

---
 .../contentbrowser/src/ContentBrowser.svelte  | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/pat/contentbrowser/src/ContentBrowser.svelte b/src/pat/contentbrowser/src/ContentBrowser.svelte
index b211451a0..1a8510a95 100644
--- a/src/pat/contentbrowser/src/ContentBrowser.svelte
+++ b/src/pat/contentbrowser/src/ContentBrowser.svelte
@@ -276,12 +276,12 @@
             attributes: $config.attributes,
             levelInfoPath: path,
         });
-        if(!response.total) {
+        if (!response.total) {
             alert(`${path} not found!`);
             return;
         }
         const item = response.results[0];
-        if(!item.path) {
+        if (!item.path) {
             // fix for Plone Site
             item.path = "/";
         }
@@ -379,21 +379,23 @@
                         ><svg use:resolveIcon={{ iconName: "search" }} /></label
                     >
                 </div>
-                {#if $config.uploadEnabled}
-                    <button
-                        type="button"
-                        class="upload btn btn-secondary btn-sm"
-                        tabindex="0"
-                        on:keydown={upload}
-                        on:click={upload}
-                        ><svg use:resolveIcon={{ iconName: "upload" }} />
-                        {_t("upload to ${current_path}", {
-                            current_path: $currentPath,
-                        })}</button
-                    >
-                {/if}
                 <RecentlyUsed on:selectItem={selectRecentlyUsed} />
                 <Favorites on:selectItem={selectFavorite} />
+                {#if $config.uploadEnabled}
+                    <div class="ms-2">
+                        <button
+                            type="button"
+                            class="upload btn btn-outline-light btn-sm"
+                            tabindex="0"
+                            on:keydown={upload}
+                            on:click={upload}
+                            ><svg use:resolveIcon={{ iconName: "upload" }} />
+                            {_t("upload to ${current_path}", {
+                                current_path: $currentPath,
+                            })}</button
+                        >
+                    </div>
+                {/if}
                 <button
                     class="btn btn-link text-white ms-auto"
                     tabindex="0"
@@ -631,9 +633,6 @@
         display: flex;
         justify-content: start;
     }
-    .toolBar > .upload {
-        margin: 0 1rem 0 auto;
-    }
     .toolBar :global(svg) {
         vertical-align: -0.125em;
     }

From 97d892ef59e2bd563d2031dec9cb3f16aab1c94a Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Thu, 26 Sep 2024 11:18:56 +0200
Subject: [PATCH 13/14] searchbox styling

---
 src/pat/contentbrowser/src/ContentBrowser.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pat/contentbrowser/src/ContentBrowser.svelte b/src/pat/contentbrowser/src/ContentBrowser.svelte
index 1a8510a95..332528a4e 100644
--- a/src/pat/contentbrowser/src/ContentBrowser.svelte
+++ b/src/pat/contentbrowser/src/ContentBrowser.svelte
@@ -373,7 +373,7 @@
             on:click_outside={cancelSelection}
         >
             <div class="toolBar navbar">
-                <div class="filter">
+                <div class="filter me-3">
                     <input type="text" name="filter" on:input={filterItems} />
                     <label for="filter"
                         ><svg use:resolveIcon={{ iconName: "search" }} /></label

From 3c5be502cc837ce27a488eff05c7b705a3302f9c Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Fri, 27 Sep 2024 08:54:59 +0200
Subject: [PATCH 14/14] alternate color fix

---
 src/pat/contentbrowser/src/ContentBrowser.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pat/contentbrowser/src/ContentBrowser.svelte b/src/pat/contentbrowser/src/ContentBrowser.svelte
index 332528a4e..6795f52a0 100644
--- a/src/pat/contentbrowser/src/ContentBrowser.svelte
+++ b/src/pat/contentbrowser/src/ContentBrowser.svelte
@@ -682,7 +682,7 @@
         outline: none;
     }
     .contentItem.even {
-        background-color: var(--bs-secondary-bg);
+        background-color: rgba(var(--bs-secondary-bg-rgb), .4);
     }
     .contentItem.inPath,
     .contentItem:focus {