adding ability to customise desktop by arranging items

src/UI/UIDesktop.js

@@ -623,8 +623,28 @@ async function UIDesktop(options){
                     {
                         html: "Sort by",
                         items: [
+                            {
+                                html: `Auto Arrange`,
+                                icon: is_auto_arrange_enabled ? '✓' : '',
+                                onClick: async function(){
+                                    is_auto_arrange_enabled = !is_auto_arrange_enabled;
+                                    store_auto_arrange_preference(is_auto_arrange_enabled);
+                                    if(is_auto_arrange_enabled){
+                                        sort_items(el_desktop, $(el_desktop).attr('data-sort_by'), $(el_desktop).attr('data-sort_order'));
+                                        set_sort_by(options.desktop_fsentry.uid, $(el_desktop).attr('data-sort_by'), $(el_desktop).attr('data-sort_order'))
+                                        clear_desktop_item_positions(el_desktop);
+                                    }else{
+                                        set_desktop_item_positions(el_desktop)
+                                    }
+                                }
+                            },
+                            // -------------------------------------------
+                            // -
+                            // -------------------------------------------
+                            '-',
                             {
                                 html: `Name`,
+                                disabled: !is_auto_arrange_enabled,
                                 icon: $(el_desktop).attr('data-sort_by') === 'name' ? '✓' : '',
                                 onClick: async function(){
                                     sort_items(el_desktop, 'name', $(el_desktop).attr('data-sort_order'));
@@ -633,6 +653,7 @@ async function UIDesktop(options){
                             },
                             {
                                 html: `Date modified`,
+                                disabled: !is_auto_arrange_enabled,
                                 icon: $(el_desktop).attr('data-sort_by') === 'modified' ? '✓' : '',
                                 onClick: async function(){
                                     sort_items(el_desktop, 'modified', $(el_desktop).attr('data-sort_order'));
@@ -641,6 +662,7 @@ async function UIDesktop(options){
                             },
                             {
                                 html: `Type`,
+                                disabled: !is_auto_arrange_enabled,
                                 icon: $(el_desktop).attr('data-sort_by') === 'type' ? '✓' : '',
                                 onClick: async function(){
                                     sort_items(el_desktop, 'type', $(el_desktop).attr('data-sort_order'));
@@ -649,6 +671,7 @@ async function UIDesktop(options){
                             },
                             {
                                 html: `Size`,
+                                disabled: !is_auto_arrange_enabled,
                                 icon: $(el_desktop).attr('data-sort_by') === 'size' ? '✓' : '',
                                 onClick: async function(){
                                     sort_items(el_desktop, 'size', $(el_desktop).attr('data-sort_order'));
@@ -661,6 +684,7 @@ async function UIDesktop(options){
                             '-',
                             {
                                 html: `Ascending`,
+                                disabled: !is_auto_arrange_enabled,
                                 icon: $(el_desktop).attr('data-sort_order') === 'asc' ? '✓' : '',
                                 onClick: async function(){
                                     const sort_by = $(el_desktop).attr('data-sort_by')
@@ -670,6 +694,7 @@ async function UIDesktop(options){
                             },
                             {
                                 html: `Descending`,
+                                disabled: !is_auto_arrange_enabled,
                                 icon: $(el_desktop).attr('data-sort_order') === 'desc' ? '✓' : '',
                                 onClick: async function(){
                                     const sort_by = $(el_desktop).attr('data-sort_by')

src/UI/UIItem.js

@@ -187,6 +187,13 @@ function UIItem(options){
         update_explorer_footer_item_count(el_window);
     }
 
+    // position
+    if(!is_auto_arrange_enabled && options.position && $(el_item).attr('data-path') !== trash_path){
+        el_item.style.position = 'absolute';
+        el_item.style.left = options.position.left + 'px';
+        el_item.style.top = options.position.top + 'px';
+    }
+
     // --------------------------------------------------------
     // Dragster
     // allow dragging of local files on this window, if it's is_dir
@@ -335,6 +342,13 @@ function UIItem(options){
             }
         },
         stop: function(event, ui){
+            if(!is_auto_arrange_enabled && $(el_item).attr('data-path') !== trash_path){
+                el_item.style.position = 'absolute';
+                el_item.style.left = ui.position.left + 'px';
+                el_item.style.top = ui.position.top + 'px';
+                $('.ui-draggable-dragging').remove();
+                save_item_position($(el_item).attr('data-uid'), ui.position)
+            }
             $('.item-selected-clone').remove();
             $('.draggable-count-badge').remove();
             // re-enable all droppable UIItems that are not a dir

src/globals.js

@@ -174,3 +174,5 @@ window.feature_flags = {
     // if true, the user will be able to zip and download directories
     download_directory: true,
 }
+
+window.is_auto_arrange_enabled = true;

src/helpers.js

@@ -1295,6 +1295,9 @@ window.refresh_item_container = function(el_item_container, options){
                 if(item_path !== trash_path && item_path !== appdata_path){
                     // if this is trash, get original name from item metadata
                     fsentry.name = (metadata && metadata.original_name !== undefined) ? metadata.original_name : fsentry.name;
+                    let position;
+                    if($(el_item_container).hasClass('desktop') && !is_auto_arrange_enabled)
+                        position = await get_item_position(fsentry.uid);
                     UIItem({
                         appendTo: el_item_container,
                         uid: fsentry.uid,
@@ -1317,6 +1320,7 @@ window.refresh_item_container = function(el_item_container, options){
                         suggested_apps: fsentry.suggested_apps,
                         disabled: is_disabled,
                         visible: visible,
+                        position: position,
                     });
                 }
             }
@@ -3695,4 +3699,52 @@ window.get_html_element_from_options = async function(options){
     h += `</div>`;
 
     return h;
-}
+}
+
+window.store_auto_arrange_preference = (preference)=>{
+    puter.kv.set(`user_preferences.auto_arrange_desktop`, preference);
+    localStorage.setItem('auto_arrange', preference);
+}
+
+window.get_auto_arrange_preference = async()=>{
+    const preferenceValue = await puter.kv.get(`user_preferences.auto_arrange_desktop`);
+    if (preferenceValue === null) {
+        console.log("E")
+        return true;
+    } else {
+        return preferenceValue;
+    }
+}
+
+window.clear_desktop_item_positions = async(el_desktop)=>{
+    $(el_desktop).find('.item').each(function(){
+        const el_item = $(this)[0];
+        $(el_item).css('position', '');
+        $(el_item).css('left', '');
+        $(el_item).css('top', '');
+    });
+}
+
+window.set_desktop_item_positions = async(el_desktop)=>{
+    $(el_desktop).find('.item').each(async function(){
+        const position = await get_item_position($(this).attr('data-uid'));
+        const el_item = $(this)[0];
+        if(position){
+            $(el_item).css('position', 'absolute');
+            $(el_item).css('left', position.left + 'px');
+            $(el_item).css('top', position.top + 'px');
+        }
+    });
+}
+
+window.save_item_position = (itemId, position)=>{
+    puter.kv.set(`desktop_item_position_${itemId}`, position);
+}
+
+window.get_item_position = (itemId)=>{
+    return puter.kv.get(`desktop_item_position_${itemId}`);
+}
+
+window.delete_item_position = (itemId)=>{
+    return puter.kv.del(`desktop_item_position_${itemId}`);
+}

src/initgui.js

@@ -318,6 +318,7 @@ window.initgui = async function(){
             // Load desktop, only if we're not embedded in a popup
             // -------------------------------------------------------------------------------------
             if(!window.embedded_in_popup){
+                window.is_auto_arrange_enabled = await get_auto_arrange_preference();
                 puter.fs.stat(desktop_path, async function(desktop_fsentry){
                     UIDesktop({desktop_fsentry: desktop_fsentry});
                 })
@@ -669,6 +670,7 @@ window.initgui = async function(){
         // Load desktop, if not embedded in a popup
         // -------------------------------------------------------------------------------------
         if(!window.embedded_in_popup){
+            window.is_auto_arrange_enabled = await get_auto_arrange_preference();
             puter.fs.stat(desktop_path, function (desktop_fsentry) {
                 UIDesktop({ desktop_fsentry: desktop_fsentry });
             })