Refactor parent select options to remove visual indenting and streamline data structure. Update Twig template to handle depth-based indentation for improved clarity in dropdowns.

Author: Dobrunia

src/backend/controllers/pages.ts

@@ -102,23 +102,21 @@ class Pages {
   }
 
   /**
-   * Ordered pages for the parent `<select>` with visual nesting (indent = depth).
+   * Ordered pages for the parent `<select>` with nesting depth (indent in the template).
    *
    * @param excludePageId - when editing, exclude this page and its descendants (same as groupByParent)
    */
   public static async getParentSelectOptions(
     excludePageId?: EntityId
-  ): Promise<Array<{ page: Page; depth: number; indent: string }>> {
+  ): Promise<Array<{ page: Page; depth: number }>> {
     const { pages, pagesMap } = excludePageId
       ? await this.groupByParentWithMap(excludePageId)
       : await this.groupByParentWithMap('' as EntityId);
-    const indentUnit = '\u00a0\u00a0';
 
-    return pages.map((page) => {
-      const depth = Pages.computePageDepth(page, pagesMap);
-
-      return { page, depth, indent: indentUnit.repeat(depth) };
-    });
+    return pages.map((page) => ({
+      page,
+      depth: Pages.computePageDepth(page, pagesMap),
+    }));
   }
 
   /**

src/backend/views/pages/form.twig

@@ -30,7 +30,10 @@
               {% set _page = entry.page %}
               {% if toString(_page._id) != toString(currentPageId) %}
                 <option value="{{ toString(_page._id) }}" {{ page is not empty and toString(page._parent) == toString(_page._id) ? 'selected' : ''}}>
-                  {{- entry.indent -}}{{- _page.title -}}
+                  {%- if entry.depth > 0 -%}
+                    {%- for _ in 1..entry.depth %}&nbsp;&nbsp;{% endfor -%}
+                  {%- endif -%}
+                  {{- _page.title|striptags -}}
                 </option>
               {% endif %}
             {% endfor %}
@@ -42,7 +45,7 @@
             <select id="above" name="above">
               <option value="0">—</option>
               {% for _page in parentsChildrenOrdered %}
-                <option value="{{ toString(_page._id) }}">{{ _page.title }}</option>
+                <option value="{{ toString(_page._id) }}">{{ _page.title|striptags }}</option>
               {% endfor %}
             </select>
           </div>