Skip to content

Conversation

@PrayagCodes
Copy link

Description

Adds a context menu option to toggle visibility of all desktop icons (including Trash). The menu text dynamically switches between "Hide Desktop Icons" and "Show Desktop Icons" based on current state. Preference persists across sessions and syncs in real-time across browser tabs.

Close Features

Closes Issue #5 - Implement dynamic top toolbar #9

Workflow

  1. User right-clicks on empty desktop area
  2. Selects "Hide Desktop Icons" from context menu
  3. All icons (including Trash) instantly disappear
  4. Preference saved and synced across tabs
  5. Right-click → "Show Desktop Icons" to restore

Key Changes

  • Added hide_desktop_icons preference with cloud storage persistence
  • Created toggle_desktop_icons_visibility() helper function
  • Added dynamic context menu item in desktop right-click menu
  • Implemented full i18n support for 37 languages

Implementation Details

Approach: Uses CSS .item-hidden class to toggle visibility without destroying DOM elements, preserving icon positions and event handlers.

Critical Fix: Visibility is applied inside refresh_item_container.js after items are loaded (not before), fixing async timing issue where icons would reappear after page refresh.

Scope: Desktop only - does not affect file explorer windows.

Files Modified:

  • src/gui/src/globals.js - Default preference
  • src/gui/src/helpers.js - Toggle function
  • src/gui/src/UI/UIDesktop.js - Context menu + preference loading
  • src/gui/src/helpers/refresh_item_container.js - Apply visibility after item load
  • src/gui/src/i18n/translations/*.js - 37 language translations

  This feature addresses user requests for a cleaner desktop workspace
  while preserving icon positions and file organization.

  Key implementation details:
  - Preference stored in puter.kv for cross-session persistence
  - CSS-based visibility toggle using existing .item-hidden class
  - Real-time sync across browser tabs via WebSocket
  - Applied after async item loading to prevent timing issues
  - Full internationalization support (37 languages)

  Technical approach:
  The visibility toggle is applied inside refresh_item_container.js
  after items are created but before fade-in animation. This ensures
  DOM elements exist when the CSS class is applied.

  Modified files:
  - src/gui/src/globals.js: Add default preference
  - src/gui/src/helpers.js: Add toggle_desktop_icons_visibility()
  - src/gui/src/UI/UIDesktop.js: Add context menu item + load preference
  - src/gui/src/helpers/refresh_item_container.js: Apply visibility after items load
  - src/gui/src/i18n/translations/*.js: Add translations (37 languages)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Issue #5 - Add a way to hide or show all desktop icons

1 participant