started reimplementing the thing

views/assets/scripts.js

@@ -1648,7 +1648,7 @@ class ee extends HTMLElement {
     const i = `
                     <div class="${et}">
                         <ul class="${it}">
-                            <li class="${st}">All items are currently shown.</li>
+                            <li class="${st}"></li>
                         </ul>
                     </div>
                 `;

views/routes/almanach/edit/body.gohtml

@@ -108,6 +108,17 @@ type AlmanachResult struct {
 			}
 		});
 	});
+
+	const closeButtons = document.querySelectorAll(".close-button");
+	closeButtons.forEach((el) => {
+		el.addEventListener("click", (ev) => {
+			ev.preventDefault();
+			const inputWrapper = el.closest(".inputwrapper");
+			if (inputWrapper) {
+				inputWrapper.classList.add("hidden");
+			}
+		});
+	});
 </script>
 
 <div class="container-normal mx-auto px-8 mt-4">
@@ -137,12 +148,7 @@ type AlmanachResult struct {
 					<label for="title" class="inputlabel menu-label">Titel <i class="ri-text"></i></label>
 					<div class="text-xs">
 						<reset-button controls="title" wrapper-class="inputwrapper" modified-class-suffix="modified" class="text-sm"></reset-button>
-						<button
+						<button class="close-button text-sm cursor-pointer">
-							@click="(ev) => {
-							ev.preventDefault();
-							$el.parentNode.parentNode.parentNode.classList.add('hidden');
-						}"
-							class="text-sm cursor-pointer">
 							<i class="ri-close-line"></i>
 						</button>
 					</div>
@@ -155,12 +161,7 @@ type AlmanachResult struct {
 					<label for="subtitle" class="inputlabel menu-label">Untertitel <i class="ri-text"></i></label>
 					<div>
 						<reset-button controls="subtitle" wrapper-class="inputwrapper" modified-class-suffix="modified" class="text-sm"></reset-button>
-						<button
+						<button class="close-button text-sm cursor-pointer">
-							@click="(ev) => {
-							ev.preventDefault();
-							$el.parentNode.parentNode.parentNode.classList.add('hidden');
-						}"
-							class="text-sm cursor-pointer">
 							<i class="ri-close-line"></i>
 						</button>
 					</div>
@@ -170,15 +171,10 @@ type AlmanachResult struct {
 
 			<div class="mt-3 inputwrapper {{ if eq $model.result.Entry.VariantTitle "" }}hidden{{ end }}" data-value="varianttitle">
 				<div class="flex flex-row justify-between">
-					<label for="varianttitle" class="inputlabel menu-label">Titelvariante(n) <i class="ri-text"></i></label>
+					<label for="varianttitle" class="inputlabel menu-label">Titelvarianten <i class="ri-text"></i></label>
 					<div>
 						<reset-button controls="varianttitle" wrapper-class="inputwrapper" modified-class-suffix="modified" class="text-sm"></reset-button>
-						<button
+						<button class="close-button text-sm cursor-pointer">
-							@click="(ev) => {
-							ev.preventDefault();
-							$el.parentNode.parentNode.parentNode.classList.add('hidden');
-						}"
-							class="text-sm cursor-pointer">
 							<i class="ri-close-line"></i>
 						</button>
 					</div>
@@ -188,15 +184,10 @@ type AlmanachResult struct {
 
 			<div class="mt-3 inputwrapper {{ if eq $model.result.Entry.ParallelTitle "" }}hidden{{ end }}" data-value="paralleltitle">
 				<div class="flex flex-row justify-between">
-					<label for="paralleltitle" class="inputlabel menu-label">Titel (übersetzt) <i class="ri-text"></i></label>
+					<label for="paralleltitle" class="inputlabel menu-label">Übersetzter Titel <i class="ri-text"></i></label>
 					<div>
 						<reset-button controls="paralleltitle" wrapper-class="inputwrapper" modified-class-suffix="modified" class="text-sm"></reset-button>
-						<button
+						<button class="close-button text-sm cursor-pointer">
-							@click="(ev) => {
-							ev.preventDefault();
-							$el.parentNode.parentNode.parentNode.classList.add('hidden');
-						}"
-							class="text-sm cursor-pointer">
 							<i class="ri-close-line"></i>
 						</button>
 					</div>

views/transform/div-menu.js

@@ -1,6 +1,5 @@
 // Define CSS class names as constants, above the component class
 const USER_PROVIDED_MENU_BUTTON_CLASS = "div-menu-button";
-const TS_MENU_COMPONENT = "ts-menu";
 const TS_POPUP = "ts-menu-popup";
 const TS_LIST = "ts-menu-list";
 const TS_MENU_LABEL = "menu-label";
@@ -8,18 +7,77 @@ const TS_PLACEHOLDER_MESSAGE = "ts-menu-placeholder-message";
 const TS_LIST_ITEM = "ts-menu-list-item";
 const TS_ITEM_ACTION = "ts-menu-item-action";
 const TS_ITEM_IS_SELECTED = "ts-item-is-selected";
-const TS_CONTENT_CLOSE_BUTTON = "ts-content-close-button";
 const TAILWIND_HIDDEN_CLASS = "hidden";
 const TS_MENU_BUTTON_STATE_DISABLED = "ts-menu-button--disabled";
 const TS_MENU_LABEL_IN_MENU_STATE = "ts-menu-label--in-menu";
 const TS_MENU_LABEL_DISPLAYED_STATE = "ts-menu-label--displayed";
 const TS_TARGET_PLACEHOLDER_CLASS = "ts-target-placeholder"; // For the target area placeholder
+const TARGET_ID_ATTRIBUTE = "target-id"; // Attribute to specify the target element ID
+
+const DM_STAY_ATTRIBUTE = "dm-stay"; // Attribute to indicate if a div should stay in the menu
+const DM_TITLE_ATTRIBUTE = "dm-title"; // Attribute to indicate if a div has a title
+const DM_MENU_BUTTON_CLASS = "dm-menu-button"; // Class for the menu button
+const DM_TARGET_ATTRIBUTE = "dm-target"; // Attribute to specify the target element ID for the redesigned menu
+
 //
 // Prereq: child divs must have prop data-value, and a label element
-// the label element must have class "menu-label"
 // The child divs will be moved to the target element when selected
 // The target element must be specified by the attribute target-id on the custom element
 // The menu button must have the class div-menu-button
+//
+
+export class DivMenuRedesigned extends HTMLElement {
+	constructor() {
+		super();
+		this.#reset();
+	}
+
+	#reset() {
+		this._cildren = [];
+		this._target = null;
+		this._button = null;
+		this._menu = null;
+	}
+
+	connectedCallback() {
+		this._cildren = Array.from(this.children)
+			.filter((node) => node.nodeType === Node.ELEMENT_NODE && !node.classList.contains(DM_MENU_BUTTON_CLASS))
+			.map((node) => {
+				return {
+					node: node,
+					stay: () => node.hasAttribute(DM_STAY_ATTRIBUTE) && node.getAttribute(DM_STAY_ATTRIBUTE) == "true",
+					hidden: () => node.classList.contains(TAILWIND_HIDDEN_CLASS),
+					name: () => {
+						const label = node.querySelector("label");
+						return label ? label.innerHTML : node.hasAttribute(DM_TITLE_ATTRIBUTE) ? node.getAttribute(DM_TITLE_ATTRIBUTE) : "";
+					},
+				};
+			});
+
+		this._target = document.getElementById(this.getAttribute(DM_TARGET_ATTRIBUTE));
+		if (!this._target) {
+			this._target = this;
+		}
+
+		this._button = this.querySelector(`.${DM_MENU_BUTTON_CLASS}`);
+		if (!this._button) {
+			console.error("DivManagerMenu needs a button element.");
+			return;
+		}
+
+		for (const child of this._cildren) {
+			parentNode.removeChild(child.node);
+		}
+		this._button.addEventListener("click", this._toggleMenu.bind(this));
+		this._button.classList.add("relative");
+	}
+
+	renderMenu() {
+		this._menu += `<ul class="${TS_P}">`;
+	}
+
+	renderNode() {}
+}
 
 export class DivMenu extends HTMLElement {
 	constructor() {
@@ -53,7 +111,7 @@ export class DivMenu extends HTMLElement {
 		const componentPopupHTML = `
                     <div class="${TS_POPUP}">
                         <ul class="${TS_LIST}">
-                            <li class="${TS_PLACEHOLDER_MESSAGE}">All items are currently shown.</li>
+                            <li class="${TS_PLACEHOLDER_MESSAGE}"></li>
                         </ul>
                     </div>
                 `;

views/transform/filter-list.js

@@ -293,9 +293,7 @@ export class FilterList extends HTMLElement {
 										hx-swap="outerHTML show:none"
 										hx-select="main"
 										hx-target="main"
-										class="${FILTER_LIST_ITEM} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${
+										class="${FILTER_LIST_ITEM} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${index % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
-											index % 2 === 0 ? "bg-stone-100" : "bg-stone-50"
-										}"
 										${this.#isActive(item) ? 'aria-current="page"' : ""}>
 										${this.ActiveDot(item)}
 										${this.getLinkText(item)}