feat: added drop zone to move categories into a new level

Author: thorsten

phpmyfaq/admin/assets/scss/layout/_category.scss

@@ -70,3 +70,61 @@
     display: block;
   }
 }
+
+// Drop zone styling for empty nested-sortable containers
+.nested-sortable {
+  transition: all 0.2s ease;
+
+  &:empty {
+    min-height: 0;
+    height: 0;
+    overflow: hidden;
+    position: relative;
+    transition: all 0.3s ease;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 0;
+      border: 0 dashed transparent;
+      border-radius: 6px;
+      transition: all 0.3s ease;
+      pointer-events: none;
+      opacity: 0;
+    }
+  }
+
+  // Show drop zone when dragging
+  &.sortable-drag-active:empty {
+    min-height: 50px;
+    height: 50px;
+    margin: 8px 0;
+
+    &::after {
+      top: 8px;
+      left: 30px;
+      right: 30px;
+      height: 34px;
+      border: 3px dashed var(--bs-primary);
+      background: linear-gradient(135deg, rgba(13, 110, 253, 0.08) 0%, rgba(13, 110, 253, 0.15) 100%);
+      box-shadow: inset 0 0 20px rgba(13, 110, 253, 0.1);
+      opacity: 1;
+    }
+  }
+}
+
+// Visual feedback during drag
+.sortable-ghost {
+  opacity: 0.3;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.sortable-drag {
+  opacity: 1;
+  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);
+  transform: scale(1.02);
+  transition: all 0.2s ease;
+}

phpmyfaq/admin/assets/src/content/category.ts

@@ -37,7 +37,21 @@ export const handleCategories = (): void => {
       fallbackOnBody: true,
       swapThreshold: 0.65,
       dataIdAttr: identifier,
+      emptyInsertThreshold: 10,
+      onStart: (): void => {
+        // Add class to all empty drop zones when drag starts
+        const emptySortables = document.querySelectorAll<HTMLElement>(`${nestedQuery}:empty`);
+        emptySortables.forEach((sortable: HTMLElement): void => {
+          sortable.classList.add('sortable-drag-active');
+        });
+      },
       onEnd: async (event: SortableEvent): Promise<void> => {
+        // Remove class from all drop zones when drag ends
+        const allSortables = document.querySelectorAll<HTMLElement>(nestedQuery);
+        allSortables.forEach((sortable: HTMLElement): void => {
+          sortable.classList.remove('sortable-drag-active');
+        });
+
         const categoryId = event.item.getAttribute('data-pmf-catid') as string;
         const csrf: string = (document.querySelector('input[name=pmf-csrf-token]') as HTMLInputElement).value;
         const data: SerializedTree[] = serializedTree(root);

phpmyfaq/assets/templates/admin/content/category.overview.twig

@@ -66,14 +66,14 @@
             {{ categoryInfo[key]['name'] | raw }}
 
             {% if categoryInfo[key]['show_home'] == 1 %}
-              <span class="badge bg-warning">
+              <span class="badge bg-warning ms-1">
                 <i class="bi bi-star" aria-hidden="true"></i>
               </span>
 
             {% endif %}
 
             {% if categoryInfo[key]['image'] is not empty %}
-              <span class="badge bg-warning">
+              <span class="badge bg-warning ms-1">
                 <i class="bi bi-image" aria-hidden="true"></i>
               </span>
             {% endif %}
@@ -84,7 +84,7 @@
           {% endif %}
 
         <div class="pmf-category-actions">
-          <!-- Add FAQ to category -->
+          <!-- Add FAQ to the category -->
           {% if categoryInfo[key]['id'] is not empty %}
           <a class="btn btn-info mb-1 mt-1"
              href="./faq/add/{{ categoryInfo[key]['id'] }}/{{ categoryInfo[key]['lang'] }}"
@@ -97,7 +97,7 @@
           {% if categoryInfo[key]['id'] is not empty %}
           <a class="btn btn-info"
              href="./category/add/{{ categoryInfo[key]['id'] }}/{{ categoryInfo[key]['lang'] }}"
-             title="{{ 'ad_quick_category'|translate }}" data-bs-toggle="tooltip" data-bs-placement="top">
+             title="{{ 'ad_quick_sub_category' | translate }}" data-bs-toggle="tooltip" data-bs-placement="top">
             <i aria-hidden="true" class="bi bi-plus-square"></i>
           </a>
           {% endif %}
@@ -138,11 +138,11 @@
           {% endif %}
         </div>
       </div>
-      {% if children is not empty %}
-        <div class="list-group nested-sortable">
+      <div class="list-group nested-sortable">
+        {% if children is not empty %}
           {{ _self.renderCategories(children, categoryInfo, depth + 1) }}
-        </div>
-      {% endif %}
+        {% endif %}
+      </div>
     </div>
   {% endfor %}
 {% endmacro %}

phpmyfaq/translations/language_de.php

@@ -1524,5 +1524,6 @@
 $PMF_LANG['msgMissingKeys'] = 'Fehlende Übersetzungen';
 $PMF_LANG['msgCompletionPercentage'] = 'Umsetzung in %';
 $PMF_LANG['msgInstalledNewerThanAvailable'] = 'Die installierte Version ist neuer als die verfügbare Version.';
+$PMF_LANG['ad_quick_sub_category'] = "Neue Sub-Kategorie hinzufügen";
 
 return $PMF_LANG;

phpmyfaq/translations/language_en.php

@@ -1525,5 +1525,6 @@
 $PMF_LANG['msgMissingKeys'] = 'Missing translation keys';
 $PMF_LANG['msgCompletionPercentage'] = 'Completion percentage';
 $PMF_LANG['msgInstalledNewerThanAvailable'] = 'The installed version is newer than the latest available version.';
+$PMF_LANG['ad_quick_sub_category'] = "Add new sub-category";
 
 return $PMF_LANG;