${i18n('menubar_style')}
@@ -102,6 +111,20 @@ export default {
window.change_clock_visible();
+ // Load and set toolbar auto-hide preference
+ const currentValue = window.user_preferences?.toolbar_auto_hide || false;
+ $el_window.find('.toolbar-auto-hide-toggle').prop('checked', currentValue);
+
+ // Handle toolbar auto-hide toggle change
+ $el_window.find('.toolbar-auto-hide-toggle').on('change', function(e) {
+ const isEnabled = $(this).prop('checked');
+ window.mutate_user_preferences({
+ toolbar_auto_hide: isEnabled
+ });
+ // Reload page to apply changes (since auto-hide is initialized on page load)
+ window.location.reload();
+ });
+
puter.kv.get('menubar_style').then(async (val) => {
if(val === 'system' || !val){
$el_window.find('#menubar_style_system').prop('checked', true);
diff --git a/src/gui/src/UI/UIDesktop.js b/src/gui/src/UI/UIDesktop.js
index 6b9d619fb6..97ca11755d 100644
--- a/src/gui/src/UI/UIDesktop.js
+++ b/src/gui/src/UI/UIDesktop.js
@@ -706,10 +706,14 @@ async function UIDesktop(options){
}
// update local user preferences
+ const toolbar_auto_hide_value = await puter.kv.get('user_preferences.toolbar_auto_hide');
const user_preferences = {
show_hidden_files: JSON.parse(await puter.kv.get('user_preferences.show_hidden_files')),
language: await puter.kv.get('user_preferences.language'),
clock_visible: await puter.kv.get('user_preferences.clock_visible'),
+ toolbar_auto_hide: toolbar_auto_hide_value !== null && toolbar_auto_hide_value !== undefined
+ ? JSON.parse(toolbar_auto_hide_value)
+ : false,
};
// update default apps
@@ -719,6 +723,52 @@ async function UIDesktop(options){
}
window.update_user_preferences(user_preferences);
+
+ // Initialize toolbar auto-hide after preferences are loaded
+ if (user_preferences.toolbar_auto_hide) {
+ const toolbar = $('.toolbar');
+ let hideTimeout;
+ const HIDE_DELAY = 2000; // 2 seconds of inactivity
+ const SHOW_THRESHOLD = 50; // 50px from top to show toolbar
+
+ function hideToolbar() {
+ toolbar.addClass('toolbar-auto-hide-hidden');
+ }
+
+ function showToolbar() {
+ toolbar.removeClass('toolbar-auto-hide-hidden');
+ clearTimeout(hideTimeout);
+ }
+
+ function resetHideTimeout() {
+ clearTimeout(hideTimeout);
+ hideTimeout = setTimeout(hideToolbar, HIDE_DELAY);
+ }
+
+ // Show toolbar when mouse enters toolbar area
+ toolbar.on('mouseenter', function() {
+ showToolbar();
+ });
+
+ // Track ALL mouse movement for inactivity detection
+ $(document).on('mousemove', function(e) {
+ // Always show toolbar when mouse is near top edge
+ if (e.clientY <= SHOW_THRESHOLD) {
+ showToolbar();
+ } else {
+ // Reset timeout on any mouse movement (inactivity detection)
+ resetHideTimeout();
+ }
+ });
+
+ // Reset timeout on mouse click anywhere
+ $(document).on('mousedown click', function() {
+ resetHideTimeout();
+ });
+
+ // Initial hide after 2 seconds of inactivity
+ hideTimeout = setTimeout(hideToolbar, HIDE_DELAY);
+ }
});
// Append to
diff --git a/src/gui/src/UI/UIItem.js b/src/gui/src/UI/UIItem.js
index 3c2f6e294f..20e447eaa4 100644
--- a/src/gui/src/UI/UIItem.js
+++ b/src/gui/src/UI/UIItem.js
@@ -30,6 +30,88 @@ import truncate_filename from '../helpers/truncate_filename.js';
import launch_app from "../helpers/launch_app.js"
import open_item from "../helpers/open_item.js"
+/**
+ * Checks if a file is an image based on MIME type or file extension
+ * @param {Object} options - File options object
+ * @param {boolean} options.is_dir - Whether the item is a directory
+ * @param {string} options.type - MIME type of the file
+ * @param {string} options.name - Name of the file
+ * @returns {boolean} True if the file is an image
+ */
+function is_image_file(options) {
+ // Directories are not images
+ if (options.is_dir) return false;
+
+ // Check MIME type first (primary method)
+ if (options.type && options.type.startsWith('image/')) {
+ return true;
+ }
+
+ // Fallback: check file extension
+ const ext = path.extname(options.name || '').toLowerCase();
+ const image_extensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.svg', '.tiff', '.tif', '.ico'];
+ return image_extensions.includes(ext);
+}
+
+/**
+ * Sets the desktop background from a file and persists it to the server
+ * @param {string} file_path - Path to the file
+ * @param {string} file_uid - UID of the file
+ * @returns {Promise}
+ */
+async function set_desktop_background_from_file(file_path, file_uid) {
+ try {
+ // Get file signature with read_url
+ // Use host_app_uid if available, otherwise undefined (backend handles this)
+ const app_uid = window.host_app_uid || undefined;
+ const file_signature = await puter.fs.sign(app_uid, {
+ uid: file_uid,
+ action: 'read'
+ });
+
+ // Handle both single item and array response
+ const signature = Array.isArray(file_signature?.items)
+ ? file_signature.items[0]
+ : (file_signature?.items || file_signature);
+
+ const read_url = signature?.read_url;
+
+ if (!read_url) {
+ throw new Error('Could not get read URL for file');
+ }
+
+ // Set desktop background immediately
+ window.set_desktop_background({
+ url: read_url,
+ fit: 'cover'
+ });
+
+ // Persist to server
+ await $.ajax({
+ url: window.api_origin + "/set-desktop-bg",
+ type: 'POST',
+ data: JSON.stringify({
+ url: read_url,
+ fit: 'cover',
+ color: null
+ }),
+ async: true,
+ contentType: "application/json",
+ headers: {
+ "Authorization": "Bearer " + window.auth_token
+ },
+ statusCode: {
+ 401: function () {
+ window.logout();
+ }
+ }
+ });
+ } catch (err) {
+ console.error('Failed to set desktop background:', err);
+ UIAlert('Failed to set desktop background. Please try again.');
+ }
+}
+
function UIItem(options){
const matching_appendto_count = $(options.appendTo).length;
if(matching_appendto_count > 1){
@@ -1184,6 +1266,19 @@ function UIItem(options){
});
}
// -------------------------------------------
+ // Set as Desktop Background
+ // -------------------------------------------
+ if(!is_trash && !is_trashed && !options.is_dir && is_image_file(options)){
+ menu_items.push({
+ html: i18n('set_as_desktop_background'),
+ onClick: async function(){
+ const file_uid = $(el_item).attr('data-uid');
+ const file_path = $(el_item).attr('data-path');
+ await set_desktop_background_from_file(file_path, file_uid);
+ }
+ });
+ }
+ // -------------------------------------------
// Zip
// -------------------------------------------
if(!is_trash && !is_trashed && !$(el_item).attr('data-path').endsWith('.zip')){
diff --git a/src/gui/src/UI/UIWindow.js b/src/gui/src/UI/UIWindow.js
index 99bce7db0c..793805e66a 100644
--- a/src/gui/src/UI/UIWindow.js
+++ b/src/gui/src/UI/UIWindow.js
@@ -1609,7 +1609,9 @@ async function UIWindow(options) {
// --------------------------------------------------------
// Close button
// --------------------------------------------------------
- $(`#window-${win_id} > .window-head > .window-close-btn`).click(function () {
+ $(`#window-${win_id} > .window-head > .window-close-btn`).click(function (event) {
+ event.stopPropagation();
+ event.preventDefault();
$(el_window).close({
shrink_to_target: options.on_close_shrink_to_target
});
@@ -1618,7 +1620,9 @@ async function UIWindow(options) {
// --------------------------------------------------------
// Minimize button
// --------------------------------------------------------
- $(`#window-${win_id} > .window-head > .window-minimize-btn`).click(function () {
+ $(`#window-${win_id} > .window-head > .window-minimize-btn`).click(function (event) {
+ event.stopPropagation();
+ event.preventDefault();
$(el_window).hideWindow();
})
diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css
index 4c7d1637e2..7aba4406ba 100644
--- a/src/gui/src/css/style.css
+++ b/src/gui/src/css/style.css
@@ -1218,7 +1218,7 @@ span.header-sort-icon img {
margin: 0;
font-weight: bold;
font-size: 13px;
- color: #8f96a3;
+ color: var(--window-sidebar-title-color, #8f96a3);
text-shadow: 1px 1px rgb(247 247 247 / 15%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -1243,7 +1243,7 @@ span.header-sort-icon img {
margin-top: 2px;
padding: 4px;
border-radius: 3px;
- color: #444444;
+ color: var(--window-sidebar-item-color, #444444);
font-size: 13px;
cursor: pointer;
transition: 0.15s background-color;
@@ -1748,7 +1748,14 @@ label {
justify-content: flex-end;
align-content: center;
flex-wrap: wrap;
- padding-right: 10px
+ padding-right: 10px;
+ transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+}
+
+.toolbar-auto-hide-hidden {
+ transform: translateY(-100%);
+ opacity: 0;
+ pointer-events: none;
}
.show-desktop-btn {
diff --git a/src/gui/src/globals.js b/src/gui/src/globals.js
index a6c0ad105b..3c93ff95a2 100644
--- a/src/gui/src/globals.js
+++ b/src/gui/src/globals.js
@@ -99,6 +99,7 @@ if (window.user_preferences === null) {
show_hidden_files: false,
language: navigator.language.split("-")[0] || navigator.userLanguage || 'en',
clock_visible: 'auto',
+ toolbar_auto_hide: false,
}
}
diff --git a/src/gui/src/i18n/translations/en.js b/src/gui/src/i18n/translations/en.js
index 613120afc0..47bbc13811 100644
--- a/src/gui/src/i18n/translations/en.js
+++ b/src/gui/src/i18n/translations/en.js
@@ -238,6 +238,7 @@ const en = {
refresh: 'Refresh',
release_address_confirmation: `Are you sure you want to release this address?`,
remove_from_taskbar:'Remove from Taskbar',
+ remove_profile_picture: 'Remove Profile Picture',
rename: 'Rename',
repeat: 'Repeat',
replace: 'Replace',
@@ -269,8 +270,11 @@ const en = {
settings: "Settings",
set_new_password: "Set New Password",
share: "Share",
+ toolbar_auto_hide: "Auto-hide Toolbar",
+ toolbar_auto_hide_description: "Automatically hide the toolbar after 2 seconds of inactivity. Move mouse near top edge to show it again.",
share_to: "Share to",
share_with: "Share with:",
+ set_as_desktop_background: "Set as Desktop Background",
shortcut_to: "Shortcut to",
show_all_windows: "Show All Windows",
show_hidden: 'Show hidden',
diff --git a/src/gui/src/initgui.js b/src/gui/src/initgui.js
index 59a8e4ddd3..88973eae15 100644
--- a/src/gui/src/initgui.js
+++ b/src/gui/src/initgui.js
@@ -1225,6 +1225,13 @@ window.initgui = async function(options){
if($(e.target).hasClass('taskbar') || $(e.target).closest('.taskbar').length > 0)
return;
+ // if close or minimize button is clicked, don't activate window
+ // This prevents the window from coming to foreground when closing/minimizing
+ if($(e.target).hasClass('window-close-btn') || $(e.target).closest('.window-close-btn').length > 0)
+ return;
+ if($(e.target).hasClass('window-minimize-btn') || $(e.target).closest('.window-minimize-btn').length > 0)
+ return;
+
// if mouse is clicked on a window, activate it
if(window.mouseover_window !== undefined){
// if popover clicked on, don't activate window. This is because if an app
diff --git a/src/gui/src/services/ThemeService.js b/src/gui/src/services/ThemeService.js
index b49d41e684..4d2e04ee31 100644
--- a/src/gui/src/services/ThemeService.js
+++ b/src/gui/src/services/ThemeService.js
@@ -32,6 +32,114 @@ const default_values = {
light_text: false,
};
+/**
+ * Convert HSL color to RGB array [r, g, b] with values 0-255
+ * @param {number} h - Hue (0-360)
+ * @param {number} s - Saturation (0-100)
+ * @param {number} l - Lightness (0-100)
+ * @returns {Array} RGB array [r, g, b] with values 0-255
+ */
+function hslToRgb(h, s, l) {
+ h = h / 360;
+ s = s / 100;
+ l = l / 100;
+
+ let r, g, b;
+
+ if (s === 0) {
+ r = g = b = l; // achromatic
+ } else {
+ const hue2rgb = (p, q, t) => {
+ if (t < 0) t += 1;
+ if (t > 1) t -= 1;
+ if (t < 1/6) return p + (q - p) * 6 * t;
+ if (t < 1/2) return q;
+ if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+ return p;
+ };
+
+ const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+ const p = 2 * l - q;
+ r = hue2rgb(p, q, h + 1/3);
+ g = hue2rgb(p, q, h);
+ b = hue2rgb(p, q, h - 1/3);
+ }
+
+ return [
+ Math.round(r * 255),
+ Math.round(g * 255),
+ Math.round(b * 255)
+ ];
+}
+
+/**
+ * Calculate relative luminance using WCAG formula
+ * @param {Array} rgb - RGB array [r, g, b] with values 0-255
+ * @returns {number} Relative luminance (0-1)
+ */
+function getLuminance(rgb) {
+ const [r, g, b] = rgb.map(val => {
+ val = val / 255;
+ return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+ });
+ return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/**
+ * Calculate contrast ratio between two colors (WCAG formula)
+ * @param {Array} rgb1 - First RGB array [r, g, b] with values 0-255
+ * @param {Array} rgb2 - Second RGB array [r, g, b] with values 0-255
+ * @returns {number} Contrast ratio (1-21)
+ */
+function getContrastRatio(rgb1, rgb2) {
+ const l1 = getLuminance(rgb1);
+ const l2 = getLuminance(rgb2);
+ const lighter = Math.max(l1, l2);
+ const darker = Math.min(l1, l2);
+ return (lighter + 0.05) / (darker + 0.05);
+}
+
+/**
+ * Blend color with white background (simulating alpha blend on white)
+ * Sidebar uses: calc(0.5 + 0.5*alpha), so effective alpha is 0.5 + 0.5*alpha
+ * When alpha=1, effective is 1.0; when alpha=0, effective is 0.5
+ * @param {Array} rgb - RGB array [r, g, b] with values 0-255
+ * @param {number} alpha - Alpha value (0-1)
+ * @returns {Array} Blended RGB array [r, g, b] with values 0-255
+ */
+function blendWithWhite(rgb, alpha) {
+ const effectiveAlpha = 0.5 + 0.5 * alpha;
+ const [r, g, b] = rgb;
+ return [
+ Math.round(r * effectiveAlpha + 255 * (1 - effectiveAlpha)),
+ Math.round(g * effectiveAlpha + 255 * (1 - effectiveAlpha)),
+ Math.round(b * effectiveAlpha + 255 * (1 - effectiveAlpha))
+ ];
+}
+
+/**
+ * Determine optimal text color (black or white) based on background color
+ * Returns the color that provides better contrast meeting WCAG AA standards (4.5:1)
+ * @param {Array} backgroundColor - RGB array [r, g, b] with values 0-255
+ * @returns {string} Hex color string ('#000000' for black, '#ffffff' for white)
+ */
+function getOptimalTextColor(backgroundColor) {
+ const black = [0, 0, 0];
+ const white = [255, 255, 255];
+
+ const blackContrast = getContrastRatio(black, backgroundColor);
+ const whiteContrast = getContrastRatio(white, backgroundColor);
+
+ // Choose the color with better contrast
+ // If both meet 4.5:1, prefer the one with higher contrast
+ // If neither meets 4.5:1, still choose the better one
+ if (blackContrast >= whiteContrast) {
+ return '#000000';
+ } else {
+ return '#ffffff';
+ }
+}
+
export class ThemeService extends Service {
#broadcastService;
@@ -86,8 +194,9 @@ export class ThemeService extends Service {
...this.state,
...data.colors,
};
- this.reload_();
}
+ // Always reload to set initial CSS variables
+ this.reload_();
}
reset () {
@@ -122,6 +231,21 @@ export class ThemeService extends Service {
this.root.style.setProperty('--primary-alpha', s.alpha);
this.root.style.setProperty('--primary-color', s.light_text ? 'white' : '#373e44');
+ // Calculate optimal sidebar colors based on effective background color
+ // Sidebar background uses: calc(0.5 + 0.5*alpha), so we need to blend with white
+ try {
+ const sidebarRgb = hslToRgb(s.hue, s.sat, s.lig);
+ const blendedSidebarRgb = blendWithWhite(sidebarRgb, s.alpha);
+ const sidebarTextColor = getOptimalTextColor(blendedSidebarRgb);
+
+ // Set CSS variables for both sidebar title and sidebar items
+ this.root.style.setProperty('--window-sidebar-title-color', sidebarTextColor);
+ this.root.style.setProperty('--window-sidebar-item-color', sidebarTextColor);
+ console.log('[ThemeService] Sidebar text colors set to:', sidebarTextColor);
+ } catch (error) {
+ console.error('[ThemeService] Error calculating sidebar colors:', error);
+ }
+
// TODO: Should we debounce this to reduce traffic?
this.#broadcastService.sendBroadcast('themeChanged', {
palette: {
diff --git a/src/puter-js/src/modules/KV.js b/src/puter-js/src/modules/KV.js
index d49def1bb4..254f0f2a1d 100644
--- a/src/puter-js/src/modules/KV.js
+++ b/src/puter-js/src/modules/KV.js
@@ -10,6 +10,7 @@ const gui_cache_keys = [
'user_preferences.show_hidden_files',
'user_preferences.language',
'user_preferences.clock_visible',
+ 'user_preferences.toolbar_auto_hide',
'has_seen_welcome_window',
];