implemented a 2 second cooldown and a non-auto button

src/gui/src/UI/UIDesktop.js

@@ -1151,6 +1151,98 @@ async function UIDesktop(options){
     // adjust window container to take into account the toolbar height
     $('.window-container').css('top', window.toolbar_height);
 
+    // ============================================
+    // Toolbar auto-hide functionality (respect user setting)
+    // ============================================
+    (function() {
+        let toolbarHideTimeout;
+        const HIDE_DELAY = 2000; // 2 seconds
+        const SHOW_TRIGGER_ZONE = 50; // top 50px of screen
+
+        const toolbar = $('.toolbar');
+        let isToolbarHidden = false;
+        let autoHideEnabled = true; // default
+
+        // Expose runtime updater so settings UI can toggle behavior immediately
+        window.updateToolbarAutoHideSetting = function(enabled){
+            autoHideEnabled = !!enabled;
+            if(!autoHideEnabled){
+                // ensure toolbar visible and cancel timers
+                clearTimeout(toolbarHideTimeout);
+                toolbar.removeClass('hidden');
+                isToolbarHidden = false;
+            }else{
+                // start hide timer
+                resetHideTimer();
+            }
+        }
+
+        function hideToolbar() {
+            if (!isToolbarHidden && autoHideEnabled) {
+                toolbar.addClass('hidden');
+                isToolbarHidden = true;
+            }
+        }
+
+        function showToolbar() {
+            if (isToolbarHidden) {
+                toolbar.removeClass('hidden');
+                isToolbarHidden = false;
+            }
+            resetHideTimer();
+        }
+
+        function resetHideTimer() {
+            clearTimeout(toolbarHideTimeout);
+            if(autoHideEnabled)
+                toolbarHideTimeout = setTimeout(hideToolbar, HIDE_DELAY);
+        }
+
+        // Show toolbar when mouse moves near the top of the screen
+        $(document).on('mousemove', function(e) {
+            if (!autoHideEnabled) return;
+            if (e.clientY <= SHOW_TRIGGER_ZONE) {
+                showToolbar();
+            } else if (!isToolbarHidden) {
+                resetHideTimer();
+            }
+        });
+
+        // Keep toolbar visible when hovering over it
+        toolbar.on('mouseenter', function() {
+            clearTimeout(toolbarHideTimeout);
+            showToolbar();
+        });
+
+        // Reset timer when leaving the toolbar
+        toolbar.on('mouseleave', function() {
+            resetHideTimer();
+        });
+
+        // Don't hide toolbar when it has open context menus or popovers
+        toolbar.on('mousedown', function(e) {
+            if ($(e.target).closest('.has-open-contextmenu, .has-open-popover').length > 0) {
+                clearTimeout(toolbarHideTimeout);
+            }
+        });
+
+        // Initialize autoHideEnabled from persisted setting
+        try{
+            puter.kv.get('ui:toolbar:auto_hide').then((val) => {
+                // default to true when unset
+                const enabled = (val === undefined || val === null) ? true : (String(val) === 'true');
+                window.updateToolbarAutoHideSetting(enabled);
+            }).catch(() => {
+                window.updateToolbarAutoHideSetting(true);
+            });
+        }catch(err){
+            window.updateToolbarAutoHideSetting(true);
+        }
+
+        // Start the initial hide timer (only if enabled)
+        resetHideTimer();
+    })();
+
     // track: checkpoint
     //-----------------------------
     // GUI is ready to launch apps!

src/gui/src/UI/UIWindowDesktopBGSettings.js

@@ -70,6 +70,11 @@ async function UIWindowDesktopBGSettings(options){
                     background-position: center;"><input type="color" style="width:25px; height: 25px; opacity:0;"></div>`;
                 h += `</div>`;
             h += `</div>`;
+            // Toolbar auto-hide toggle
+            h += `<div style="margin-top:16px;">`;
+                h += `<label style="display:block; margin-bottom:6px;">${i18n('ui_colors') ? i18n('ui_colors') : 'UI Colors'}</label>`;
+                h += `<label style="display:flex; align-items:center; gap:10px;"><input type="checkbox" class="toolbar-autohide-checkbox" checked> ${i18n('auto_hide_toolbar') ? i18n('auto_hide_toolbar') : 'Auto-hide top toolbar'}</label>`;
+            h += `</div>`;
 
             h += `<div style="padding-top: 5px; overflow:hidden; margin-top: 25px; border-top: 1px solid #CCC;">`
                 h += `<button class="button button-primary apply" style="float:right;">${i18n('apply')}</button>`;
@@ -183,13 +188,37 @@ async function UIWindowDesktopBGSettings(options){
                         },
                     },
                 })
+                // Save toolbar auto-hide preference
+                const autoHide = $(el_window).find('.toolbar-autohide-checkbox').is(':checked');
+                try{
+                    await puter.kv.set('ui:toolbar:auto_hide', autoHide === true ? 'true' : 'false');
+                }catch(err){
+                    console.error('Failed to save toolbar auto-hide setting', err);
+                }
+
+                // Notify running UI to update behavior if UIDesktop is present
+                try{
+                    if(window.updateToolbarAutoHideSetting)
+                        window.updateToolbarAutoHideSetting(autoHide === true);
+                }catch(err){}
+
                 $(el_window).close();
                 resolve(true);    
             }catch(err){
                 // Ignore
             }
         })
 
+        // Initialize checkbox from persisted value
+        try{
+            puter.kv.get('ui:toolbar:auto_hide').then((val) => {
+                const checked = (val === undefined || val === null) ? true : (String(val) === 'true');
+                $(el_window).find('.toolbar-autohide-checkbox').prop('checked', checked);
+            })
+        }catch(err){
+            // ignore
+        }
+
         $(el_window).find('.browse').on('click', function(){
             // open dialog
             UIWindow({

src/gui/src/css/style.css

@@ -17,7 +17,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-@font-face {
+ @font-face {
     font-family: 'Inter';
     src: url('/fonts/Inter-Thin.ttf') format('truetype');
     font-weight: 100;
@@ -1748,7 +1748,16 @@ label {
     justify-content: flex-end;
     align-content: center;
     flex-wrap: wrap;
-    padding-right: 10px
+    padding-right: 10px;
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.toolbar.hidden {
+    transform: translateY(-100%);
+    opacity: 0;
+    pointer-events: none;
 }
 
 .show-desktop-btn {