quick tags search mvp

src/features/quick_reblog.css

@@ -29,11 +29,11 @@
   }
 }
 
-#quick-reblog.below {
+#quick-reblog[data-position="below"] {
   inset: 100% 50% auto auto;
   transform: translate(calc(50% + var(--horizontal-offset, 0%)), var(--icon-spacing));
 }
-#quick-reblog.above {
+#quick-reblog[data-position="above"] {
   inset: auto 50% 100% auto;
   transform: translate(calc(50% + var(--horizontal-offset, 0%)), calc(0px - var(--icon-spacing)));
 }

src/features/quick_tags.css

@@ -8,7 +8,6 @@
   align-items: stretch;
   width: 250px;
   max-height: 250px;
-  overflow-y: auto;
   padding: 2px;
   border-radius: 3px;
 
@@ -21,13 +20,22 @@
   font-weight: normal;
 }
 
-#quick-tags-post-option.below {
+.quick-tags-popup .bundle-buttons {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+
+  color: inherit;
+  font: inherit;
+}
+
+#quick-tags-post-option[data-position="below"] {
   top: 100%;
   right: 50%;
   transform: translate(50%, 12px);
 }
 
-#quick-tags-post-option.above {
+#quick-tags-post-option[data-position="above"] {
   bottom: 100%;
   right: 50%;
   transform: translate(50%, -12px);
@@ -42,11 +50,11 @@
   }
 }
 
-#quick-tags.below {
+#quick-tags[data-position="below"] {
   inset: 100% 50% auto auto;
   transform: translate(calc(50% + var(--horizontal-offset, 0%)), var(--icon-spacing));
 }
-#quick-tags.above {
+#quick-tags[data-position="above"] {
   inset: auto 50% 100% auto;
   transform: translate(calc(50% + var(--horizontal-offset, 0%)), calc(0px - var(--icon-spacing)));
 }
@@ -63,7 +71,7 @@
   margin: 2px 0;
 }
 
-#quick-tags input {
+.quick-tags-popup input {
   box-sizing: border-box;
   width: 0;
   min-width: 100%;
@@ -81,7 +89,7 @@
 #quick-tags-post-option button {
   padding: 1ch;
 
-  background-color: inherit;
+  background-color: rgb(var(--white));
   color: inherit;
   font: inherit;
   text-align: initial;
@@ -92,6 +100,20 @@
   margin-bottom: 2px;
 }
 
+.quick-tags-popup button.search-hidden {
+  display: none;
+}
+
+.quick-tags-popup .no-results {
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+
+.quick-tags-popup .bundle-buttons:has(> button):not(:has(> button:not(.search-hidden))) + .no-results {
+  display: flex;
+}
+
 .xkit-quick-tags-tags {
 	position: relative;
 

src/features/quick_tags.js

@@ -23,10 +23,11 @@ let autoTagAsker;
 
 let controlButtonTemplate;
 
-const popupElement = dom('div', { id: 'quick-tags' });
+const popupElement = dom('div', { id: 'quick-tags', class: 'quick-tags-popup' });
 const popupInput = dom(
   'input',
   {
+    class: 'input',
     placeholder: 'Tags (comma separated)',
     autocomplete: 'off'
   },
@@ -53,23 +54,57 @@ const checkLength = ({ currentTarget }) => {
 popupInput.addEventListener('input', checkLength);
 const popupForm = dom('form', null, { submit: event => event.preventDefault() }, [popupInput]);
 
-const postOptionPopupElement = dom('div', { id: 'quick-tags-post-option' });
+const postOptionPopupElement = dom('div', { id: 'quick-tags-post-option', class: 'quick-tags-popup' });
 
 const storageKey = 'quick_tags.preferences.tagBundles';
 
 let editedTagsMap = new WeakMap();
 
-const createBundleButton = tagBundle => {
+const createBundleButtons = tagBundles => dom('div', { class: 'bundle-buttons' }, null, tagBundles.map(tagBundle => {
   const bundleButton = dom('button', null, null, [tagBundle.title]);
   bundleButton.dataset.tags = tagBundle.tags;
   return bundleButton;
-};
+}));
+
+const searchElements = bundleCount =>
+  bundleCount > 4
+    ? [
+        dom('div', { class: 'no-results' }, null, [
+          dom('p', null, null, ['No results found.'])
+        ]),
+        dom(
+          'input',
+          {
+            class: 'search',
+            type: 'text',
+            placeholder: 'Search',
+            autocomplete: 'off',
+            spellcheck: 'false'
+          },
+          {
+            input: event => {
+              const query = event.currentTarget.value.toLowerCase();
+              [...event.currentTarget.closest('.quick-tags-popup').querySelectorAll('button')].forEach(bundleButton => {
+                if (
+                  bundleButton.textContent.toLowerCase().includes(query) ||
+                  bundleButton.dataset.tags.toLowerCase().includes(query)
+                ) {
+                  bundleButton.classList.remove('search-hidden');
+                } else {
+                  bundleButton.classList.add('search-hidden');
+                }
+              });
+            }
+          }
+        )
+      ]
+    : [];
 
 const populatePopups = async function () {
   const { [storageKey]: tagBundles = [] } = await browser.storage.local.get(storageKey);
 
-  popupElement.replaceChildren(popupForm, ...tagBundles.map(createBundleButton));
-  postOptionPopupElement.replaceChildren(...tagBundles.map(createBundleButton));
+  popupElement.replaceChildren(popupForm, createBundleButtons(tagBundles), ...searchElements(tagBundles.length));
+  postOptionPopupElement.replaceChildren(createBundleButtons(tagBundles), ...searchElements(tagBundles.length));
 };
 
 const processPostForm = async function ([selectedTagsElement]) {

src/utils/interface.js

@@ -128,7 +128,7 @@ const getClosestWithOverflow = element => {
 };
 
 export const appendWithoutOverflow = (element, target, defaultPosition = 'below') => {
-  element.className = defaultPosition;
+  element.dataset.position = defaultPosition;
   element.style.removeProperty('--horizontal-offset');
 
   target.appendChild(element);
@@ -138,7 +138,7 @@ export const appendWithoutOverflow = (element, target, defaultPosition = 'below'
   const elementRect = element.getBoundingClientRect();
 
   if (elementRect.bottom > document.documentElement.clientHeight) {
-    element.className = 'above';
+    element.dataset.position = 'above';
   }
   if (elementRect.right > preventOverflowTargetRect.right - 15) {
     element.style.setProperty('--horizontal-offset', `${preventOverflowTargetRect.right - 15 - elementRect.right}px`);