Allow to manually reorder "normal" folders

Special folders like INBOX, Sent, etc. are staying at the top of the
list.

Author: pabzm

program/actions/settings/folder_reorder.php

@@ -0,0 +1,22 @@
+<?php
+
+class rcmail_action_settings_folder_reorder extends rcmail_action_settings_folders
+{
+    protected static $mode = self::MODE_AJAX;
+
+    /**
+     * Request handler.
+     *
+     * @param array $args Arguments from the previous step(s)
+     */
+    #[Override]
+    public function run($args = [])
+    {
+        $rcmail = rcmail::get_instance();
+        $list = array_flip(rcube_utils::get_input_value('folderorder', rcube_utils::INPUT_POST, true));
+        $rcmail->user->save_prefs(['folder_order' => $list]);
+
+        $rcmail->output->show_message('successfullysaved', 'confirmation');
+        $rcmail->output->send();
+    }
+}

program/actions/settings/folders.php

@@ -262,6 +262,10 @@ public static function folder_tree_element($folders, &$key, &$js_folders)
             'id' => $idx,
             'class' => trim($data['class'] . ' mailbox'),
         ];
+        // Only allow reordering of non-protected folders.
+        if ($data['protected']) {
+            $attribs['class'] .= ' protected';
+        }
 
         if (!isset($data['level'])) {
             $data['level'] = 0;

program/js/app.js

@@ -7780,7 +7780,8 @@ function rcube_webmail() {
                 // on the list when dragging starts (and stops), this is slow, but
                 // I didn't find a method to check droptarget on over event
                 accept: function (node) {
-                    if (!node.is('.mailbox')) {
+                    // Break on .is-being-sorted to enable sorting.
+                    if (!node.is('.mailbox') || node.is('.is-being-sorted')) {
                         return false;
                     }
 
@@ -7798,8 +7799,49 @@ function rcube_webmail() {
                         dest = ref.folder_id2name(this.id);
 
                     ref.subscription_move_folder(source, dest);
+                    ref.make_folder_lists_sortable();
                 },
             });
+
+        this.make_folder_lists_sortable();
+    };
+
+    this.make_folder_lists_sortable = () => {
+        var sortableHandle = $('<div>').addClass('sortable-handle');
+        // Destroy and re-create all sortable lists because this gets called in scenarios, in which new lists might
+        // exist (e.g. if a folder was moved into another one that previously didn't have child-folders).
+        $('ul.ui-sortable').sortable('destroy');
+        // (Re-)Add handle icons to every sortable folder.
+        $('.sortable-handle').remove();
+        $('li.mailbox:not(.protected) > .custom-switch', this.subscription_list.container).prepend(sortableHandle);
+        // (Re-)create the sorting.
+        $(this.subscription_list.container).parent().find('ul').each((_i, el) => {
+            $(el).sortable({
+                axis: 'y',
+                containment: 'parent',
+                items: '> li.mailbox:not(.protected)',
+                handle: '.sortable-handle',
+                update: () => this.save_reordered_folder_list(),
+                // Add/remove a marker to disable dropping on other elements during sorting (see accept() of droppable).
+                start: (_ev, ui) => ui.item.addClass('is-being-sorted'),
+                stop: (_ev, ui) => ui.item.removeClass('is-being-sorted'),
+            });
+        });
+    };
+
+    this.save_reordered_folder_list = () => {
+        const mainList = ref.subscription_list.container.sortable('toArray');
+        const subLists = ref.subscription_list.container.find('.ui-sortable').map((i, elem) => ({
+            parentId: elem.parentElement.id,
+            elems: $(elem).sortable('toArray'),
+        })).toArray();
+        // Sort sub-lists after their their parent element, so the sorting for the settings page doesn't get confused
+        // (which will hook child-folders onto wrong parents if we don't do this).
+        subLists.forEach((subList) => {
+            mainList.splice(mainList.indexOf(subList.parentId) + 1, 0, ...subList.elems);
+        });
+        params = mainList.map((e) => e.replace(/^rcmli/, 'folderorder[]=')).join('&');
+        this.http_post('folder-reorder', params, this.display_message('', 'loading'));
     };
 
     this.folder_id2name = function (id) {
@@ -7855,7 +7897,7 @@ function rcube_webmail() {
     };
 
     // Add folder row to the table and initialize it
-    this.add_folder_row = function (id, name, display_name, is_protected, subscribed, class_name, refrow, subfolders) {
+    this.add_folder_row = function (id, name, display_name, is_protected, subscribed, class_name, refrow, subfolders, insert_before_elem) {
         if (!this.gui_objects.subscriptionlist) {
             return false;
         }
@@ -7993,7 +8035,11 @@ function rcube_webmail() {
                 }
             }
 
-            if (parent && n == parent) {
+            if (insert_before_elem && $(insert_before_elem).parents('li')[0] === parent) {
+                // In this case we theoretically could have skipped the sorting above, but trying to do that resulted in
+                // strange side effects, so I kept the code in.
+                $(insert_before_elem).before(row);
+            } else if (parent && n == parent) {
                 $('ul', parent).first().append(row);
             } else {
                 while (p = $(n).parent().parent().get(0)) {
@@ -8034,6 +8080,8 @@ function rcube_webmail() {
             this.triggerEvent('clonerow', { row: row, id: id });
         }
 
+        this.make_folder_lists_sortable();
+
         return row;
     };
 
@@ -8082,6 +8130,12 @@ function rcube_webmail() {
             delete ref.env.subscriptionrows[fname];
         });
 
+        if (this.env.folder_ordered_manually) {
+            // We need to store this information now, because it's not available anymore after removing the row from
+            // the DOM.
+            next_sibling = row.nextElementSibling;
+        }
+
         // get row off the list
         row = $(row).detach();
 
@@ -8093,7 +8147,11 @@ function rcube_webmail() {
         }
 
         // move the existing table row
-        this.add_folder_row(id, name, display_name, is_protected, subscribed, class_name, row, subfolders);
+        this.add_folder_row(id, name, display_name, is_protected, subscribed, class_name, row, subfolders, next_sibling);
+
+        if (this.env.folder_ordered_manually) {
+            this.save_reordered_folder_list();
+        }
     };
 
     // remove the table row of a specific mailbox from the table

program/lib/Roundcube/rcube_imap.php

@@ -4401,9 +4401,27 @@ public function sort_folder_list($a_folders, $skip_special = false)
         // sort folders
         // asort($folders, SORT_LOCALE_STRING) is not properly sorting case sensitive names
         uasort($folders, [$this, 'sort_folder_comparator']);
-
         $folders = array_keys($folders);
 
+        $prefs = rcube::get_instance()->user->get_prefs();
+        if (isset($prefs['folder_order'])) {
+            $folder_order = $prefs['folder_order'];
+            $new_list = [];
+            foreach ($folders as $folder_name) {
+                if (!is_string($folder_name)) {
+                    continue;
+                }
+                $folder_id = rcube_utils::html_identifier($folder_name, true);
+                // If the folder doesn't have a position, e.g. because it wasn't yet part of a list that has been
+                // reordered, just append it to the end (but keep the original sorting order within the "un-ordered"
+                // folders).
+                $index = $folder_order[$folder_id] ?? 100000 + count($new_list);
+                $new_list[$index] = $folder_name;
+            }
+            ksort($new_list);
+            $folders = array_values($new_list);
+        }
+
         if ($skip_special || empty($folders)) {
             return $folders;
         }

skins/elastic/styles/widgets/lists.less

@@ -1082,3 +1082,15 @@ html.touch {
         padding-right: 2.5rem;
     }
 }
+
+.sortable-handle {
+    display: inline-block;
+
+    &::before {
+        font-family: 'Icons';
+        font-style: normal;
+        .font-icon-solid(@fa-var-arrows-alt-v);
+        padding-right: 0.2rem;
+    }
+
+}