`;
h += '})
` : ((file.thumbnail && this.currentView === 'grid') ? `
` : this.determineIcon(file));
+ const iconResult = await item_icon(file);
+ const icon = `})
`;
const row = document.createElement("div");
row.setAttribute('class', `item row ${file.is_dir ? 'folder' : 'file'}`);
row.setAttribute("data-id", item_id);
@@ -2005,7 +2008,7 @@ const TabFiles = {
row.setAttribute("data-size", file.size);
row.setAttribute("data-type", html_encode(file.type) ?? '');
row.setAttribute("data-modified", file.modified);
- row.setAttribute("data-associated_app_name", html_encode(file.associated_app_name) ?? '');
+ row.setAttribute("data-associated_app_name", html_encode(file.associated_app?.name) ?? '');
row.setAttribute("data-path", html_encode(file.path));
row.innerHTML = `
})
`;
- case 'cpp':
- return `})
`;
- case 'css':
- return `})
`;
- case 'csv':
- return `})
`;
- case 'doc':
- case 'docx':
- return `})
`;
- case 'exe':
- return `})
`;
- case 'gzip':
- return `})
`;
- case 'html':
- return `})
`;
- case 'jpg':
- case 'jpeg':
- case 'png':
- case 'webp':
- case 'gif':
- return `})
`;
- case 'jar':
- return `})
`;
- case 'java':
- return `})
`;
- case 'js':
- return `})
`;
- case 'json':
- return `})
`;
- case 'jsp':
- return `})
`;
- case 'log':
- return `})
`;
- case 'md':
- return `})
`;
- case 'mp3':
- return `})
`;
- case 'otf':
- return `})
`;
- case 'pdf':
- return ``;
- case 'php':
- return `})
`;
- case 'pptx':
- return `})
`;
- case 'psd':
- return `})
`;
- case 'py':
- return `})
`;
- case 'rss':
- return `})
`;
- case 'rtf':
- return `})
`;
- case 'ruby':
- return `})
`;
- case 'sketch':
- return `})
`;
- case 'sql':
- return `})
`;
- case 'svg':
- return `})
`;
- case 'tar':
- return `})
`;
- case 'tpl':
- case 'xltx':
- case 'potx':
- case 'tmpl':
- return `})
`;
- case 'text':
- case 'txt':
- return `})
`;
- case 'tif':
- return `})
`;
- case 'tiff':
- return `})
`;
- case 'ttf':
- return `})
`;
- case 'mp4':
- case 'avi':
- case 'mov':
- case 'wmf':
- case 'mkv':
- case 'webm':
- return `})
`;
- case 'wav':
- return `})
`;
- case 'xlsx':
- return `})
`;
- case 'xml':
- return `})
`;
- case 'zip':
- return `})
`;
- default:
- return `})
`;
- }
- },
-
/**
* Attaches event listeners to a file/folder row element.
*
@@ -2199,11 +2091,20 @@ const TabFiles = {
let rename_cancelled = false;
let shift_clicked = false;
let itemWasSelectedOnMousedown = false;
+ let lastPointerType = null;
el_item.onpointerdown = (e) => {
if ( e.target.classList.contains('item-more') ) return;
if ( el_item.classList.contains('header') ) return;
+ // Track pointer type so onclick can distinguish touch from mouse.
+ lastPointerType = e.pointerType;
+
+ // On touch devices, skip all selection logic here.
+ // Taps are handled by onclick (opens item) and taphold (context menu),
+ // so pointerdown never accidentally selects while the user is scrolling.
+ if ( e.pointerType === 'touch' ) return;
+
shift_clicked = false;
// Track whether item was already selected before this mousedown
@@ -2251,7 +2152,9 @@ const TabFiles = {
// In select mode on mobile, treat taps like Ctrl+click (toggle selection)
const isMobileSelectMode = (window.isMobile.phone || window.isMobile.tablet) && _this.selectModeActive;
- // If clicking on .item-name, .item-icon, or .item-badges, select immediately so item drag works
+ // If clicking on .item-name, .item-icon, or .item-badges, select immediately so item drag works.
+ // On touch devices, these elements have pointer-events:none via CSS so this path
+ // won't be reached — touches land on .row instead, deferring selection to onclick.
const isDragHandle = e.target.closest('.item-name, .item-icon, .item-badges');
if ( e.button === 0 && !e.ctrlKey && !e.metaKey && !e.shiftKey && !el_item.classList.contains('selected') && !isMobileSelectMode && isDragHandle ) {
el_item.parentElement.querySelectorAll('.row.selected').forEach(r => {
@@ -2324,9 +2227,23 @@ const TabFiles = {
return;
}
- // On mobile in select mode, selection was already handled in pointerdown
- // Just return early to prevent any further processing
- if ( (window.isMobile.phone || window.isMobile.tablet) && _this.selectModeActive ) {
+ // On touch/mobile: tap opens the item directly, no selection step needed.
+ // Selection (and context menu) is handled via taphold.
+ // Use lastPointerType as primary signal (works even if isMobile misdetects).
+ if ( lastPointerType === 'touch' || window.isMobile.phone || window.isMobile.tablet ) {
+ // In select mode, tap toggles selection instead of opening
+ if ( _this.selectModeActive ) {
+ el_item.classList.toggle('selected');
+ window.latest_selected_item = el_item;
+ _this.updateFooterStats();
+ return;
+ }
+ if ( isFolder === "1" ) {
+ _this.pushNavHistory(file.path);
+ _this.renderDirectory(file.path);
+ } else {
+ open_item({ item: el_item });
+ }
return;
}
@@ -2353,18 +2270,6 @@ const TabFiles = {
}
}
}
-
- // On mobile, single tap opens folders (no double-tap on touch devices)
- if ( window.isMobile.phone || window.isMobile.tablet ) {
- // Normal mode: open the item
- if ( isFolder === "1" ) {
- _this.pushNavHistory(file.path);
- _this.renderDirectory(file.path);
- } else {
- open_item({ item: el_item });
- }
- el_item.classList.remove('selected');
- }
};
el_item.ondblclick = (e) => {
@@ -2470,9 +2375,16 @@ const TabFiles = {
// Right-click context menu handler (desktop) and taphold (touch devices)
$(el_item).on('contextmenu taphold', async (e) => {
// Dismiss taphold on non-touch devices
- if ( e.type === 'taphold' && !window.isMobile.phone && !window.isMobile.tablet ) {
+ if ( e.type === 'taphold' && !window.isMobile.phone && !window.isMobile.tablet && !(navigator.maxTouchPoints > 0) ) {
return;
}
+ // On iOS, both contextmenu and taphold can fire for the same long-press.
+ // Debounce to prevent duplicate modals.
+ if ( el_item._contextMenuShownAt && Date.now() - el_item._contextMenuShownAt < 500 ) {
+ e.preventDefault();
+ return;
+ }
+ el_item._contextMenuShownAt = Date.now();
e.preventDefault();
e.stopPropagation();
@@ -2484,9 +2396,9 @@ const TabFiles = {
items = await _this.generateContextMenuItems(el_item, file);
}
- if ( window.isMobile.phone || window.isMobile.tablet ) {
+ if ( window.isMobile.phone || window.isMobile.tablet || navigator.maxTouchPoints > 0 ) {
const modal = new ContextMenuModal();
- modal.show(items, el_item.getBoundingClientRect());
+ modal.show(items, el_item.getBoundingClientRect(), { title: file.name });
} else {
UIContextMenu({ items: items, position: { left: e.pageX, top: e.pageY } });
}
@@ -3140,12 +3052,7 @@ const TabFiles = {
* @returns {void}
*/
updateDashboardUrl (filePath) {
- // Use pushState to update URL without firing hashchange.
- // The popstate listener in UIDashboard handles back/forward navigation.
- const newHash = `#files${filePath}`;
- if ( window.location.hash !== newHash ) {
- history.pushState(null, '', newHash);
- }
+ // Disabled: don't modify the browser URL when navigating files.
},
/**
@@ -3169,10 +3076,10 @@ const TabFiles = {
}
// Use mobile-friendly context menu on touch devices
- if ( window.isMobile.phone || window.isMobile.tablet ) {
+ if ( window.isMobile.phone || window.isMobile.tablet || navigator.maxTouchPoints > 0 ) {
const targetRect = targetElement.getBoundingClientRect();
const modal = new ContextMenuModal();
- modal.show(items, targetRect);
+ modal.show(items, targetRect, { title: file.name });
} else {
UIContextMenu({ items: items });
}
diff --git a/src/gui/src/UI/Dashboard/TabHome.js b/src/gui/src/UI/Dashboard/TabHome.js
index ec554fc51..ea53b7173 100644
--- a/src/gui/src/UI/Dashboard/TabHome.js
+++ b/src/gui/src/UI/Dashboard/TabHome.js
@@ -166,6 +166,14 @@ const TabHome = {
h += '
';
h += '';
h += `})
`;
h += '
';
@@ -45,6 +59,59 @@ function buildAppsGrid (apps) {
return h;
}
+function showUninstallModal ({ appName, appTitle, appUid, self, $el_window }) {
+ const displayName = (appTitle || appName || '').trim();
+ const $overlay = $(`
+
+ `);
+
+ $el_window.append($overlay);
+
+ const close = () => $overlay.remove();
+
+ $overlay.on('click', '.myapps-modal-cancel', close);
+ $overlay.on('click', function (e) {
+ if ( e.target === $overlay[0] ) close();
+ });
+ $(document).on('keydown.uninstall-modal', function (e) {
+ if ( e.key === 'Escape' ) {
+ close();
+ $(document).off('keydown.uninstall-modal');
+ }
+ });
+
+ $overlay.on('click', '.myapps-modal-confirm', async function () {
+ const $btn = $(this);
+ $btn.prop('disabled', true).text('Uninstalling…');
+
+ try {
+ await puter.perms.revokeApp(appUid, '*');
+ // Remove from internal state
+ self._apps = self._apps.filter(a => a.name !== appName);
+ // Remove tile from DOM
+ $el_window.find(`.myapps-tile[data-app-name="${appName}"]`).remove();
+ // Show empty state if no apps left
+ if ( self._apps.length === 0 ) {
+ const $container = $el_window.find('.myapps-container');
+ $container.html(buildAppsGrid(null));
+ }
+ } catch ( err ) {
+ console.error('Failed to uninstall app:', err);
+ }
+ close();
+ $(document).off('keydown.uninstall-modal');
+ });
+}
+
function revealWhenLoaded ($container) {
const $grid = $container.find('.myapps-grid-loading');
if ( $grid.length === 0 ) return;
@@ -151,6 +218,42 @@ const TabApps = {
window.open(`/app/${appName}`, '_blank');
}
});
+
+ // Context menu on right-click
+ $el_window.on('contextmenu', '.myapps-tile', function (e) {
+ const appName = $(this).attr('data-app-name');
+ const appTitle = $(this).attr('data-app-title');
+ const appUid = $(this).attr('data-app-uid');
+ const nameLower = (appName || '').toLowerCase();
+ const noUninstall = APP_NAMES_NO_UNINSTALL.has(nameLower);
+
+ const items = noUninstall
+ ? []
+ : [
+ {
+ html: 'Uninstall',
+ onClick: () => {
+ showUninstallModal({
+ appName,
+ appTitle,
+ appUid,
+ self,
+ $el_window,
+ });
+ },
+ },
+ ];
+
+ if ( items.length === 0 ) return;
+
+ e.preventDefault();
+ e.stopPropagation();
+
+ UIContextMenu({
+ position: { top: e.clientY, left: e.clientX },
+ items,
+ });
+ });
},
async loadApps ($el_window) {
@@ -185,6 +288,7 @@ const TabApps = {
].map(app => ({
name: app.name,
title: app.title,
+ uid: app.uuid || app.uid || null,
iconUrl: app.icon || null,
}));
diff --git a/src/gui/src/UI/Dashboard/TabFiles.js b/src/gui/src/UI/Dashboard/TabFiles.js
index 28309ab07..a4240a341 100644
--- a/src/gui/src/UI/Dashboard/TabFiles.js
+++ b/src/gui/src/UI/Dashboard/TabFiles.js
@@ -27,6 +27,7 @@ import UIAlert from '../UIAlert.js';
import generate_file_context_menu from '../../helpers/generate_file_context_menu.js';
import truncate_filename from '../../helpers/truncate_filename.js';
import update_title_based_on_uploads from '../../helpers/update_title_based_on_uploads.js';
+import item_icon from '../../helpers/item_icon.js';
import new_context_menu_item from '../../helpers/new_context_menu_item.js';
import ContextMenuModal from './ContextMenu/ContextMenu.js';
@@ -232,7 +233,8 @@ const TabFiles = {
};
// Add touch-device class for touch devices to show .item-more button
- if ( window.isMobile.phone || window.isMobile.tablet ) {
+ // Use multiple detection methods since user-agent sniffing can miss devices
+ if ( window.isMobile.phone || window.isMobile.tablet || navigator.maxTouchPoints > 0 ) {
$el_window.find('.files-tab').addClass('touch-device');
}
@@ -1983,7 +1985,8 @@ const TabFiles = {
const is_shared_with_me = (file.path !== `/${window.user.username}` && !file.path.startsWith(`/${window.user.username}/`));
const is_worker = file.workers?.length > 0;
const worker_url = is_worker ? file.workers[0]?.address : '';
- const icon = file.is_dir ? `` : ((file.thumbnail && this.currentView === 'grid') ? `
@@ -2068,117 +2071,6 @@ const TabFiles = {
this.createItemListeners(row, file);
},
- /**
- * Determines the appropriate icon for a file based on its extension.
- *
- * @param {Object} file - The file object containing the filename
- * @returns {string} HTML string for the icon image element
- */
- determineIcon (file) {
- const extension = file.name.split('.').pop().toLowerCase();
- switch ( extension ) {
- case 'm4a':
- case 'ogg':
- case 'aac':
- case 'flac':
- return `
`;
- case 'cpp':
- return ``;
- case 'css':
- return ``;
- case 'csv':
- return ``;
- case 'doc':
- case 'docx':
- return ``;
- case 'exe':
- return ``;
- case 'gzip':
- return ``;
- case 'html':
- return ``;
- case 'jpg':
- case 'jpeg':
- case 'png':
- case 'webp':
- case 'gif':
- return ``;
- case 'jar':
- return ``;
- case 'java':
- return ``;
- case 'js':
- return ``;
- case 'json':
- return ``;
- case 'jsp':
- return ``;
- case 'log':
- return ``;
- case 'md':
- return ``;
- case 'mp3':
- return ``;
- case 'otf':
- return ``;
- case 'pdf':
- return ``;
- case 'php':
- return ``;
- case 'pptx':
- return ``;
- case 'psd':
- return ``;
- case 'py':
- return ``;
- case 'rss':
- return ``;
- case 'rtf':
- return ``;
- case 'ruby':
- return ``;
- case 'sketch':
- return ``;
- case 'sql':
- return ``;
- case 'svg':
- return ``;
- case 'tar':
- return ``;
- case 'tpl':
- case 'xltx':
- case 'potx':
- case 'tmpl':
- return ``;
- case 'text':
- case 'txt':
- return ``;
- case 'tif':
- return ``;
- case 'tiff':
- return ``;
- case 'ttf':
- return ``;
- case 'mp4':
- case 'avi':
- case 'mov':
- case 'wmf':
- case 'mkv':
- case 'webm':
- return ``;
- case 'wav':
- return ``;
- case 'xlsx':
- return ``;
- case 'xml':
- return ``;
- case 'zip':
- return ``;
- default:
- return ``;
- }
- },
-
/**
* Attaches event listeners to a file/folder row element.
*
@@ -2199,11 +2091,20 @@ const TabFiles = {
let rename_cancelled = false;
let shift_clicked = false;
let itemWasSelectedOnMousedown = false;
+ let lastPointerType = null;
el_item.onpointerdown = (e) => {
if ( e.target.classList.contains('item-more') ) return;
if ( el_item.classList.contains('header') ) return;
+ // Track pointer type so onclick can distinguish touch from mouse.
+ lastPointerType = e.pointerType;
+
+ // On touch devices, skip all selection logic here.
+ // Taps are handled by onclick (opens item) and taphold (context menu),
+ // so pointerdown never accidentally selects while the user is scrolling.
+ if ( e.pointerType === 'touch' ) return;
+
shift_clicked = false;
// Track whether item was already selected before this mousedown
@@ -2251,7 +2152,9 @@ const TabFiles = {
// In select mode on mobile, treat taps like Ctrl+click (toggle selection)
const isMobileSelectMode = (window.isMobile.phone || window.isMobile.tablet) && _this.selectModeActive;
- // If clicking on .item-name, .item-icon, or .item-badges, select immediately so item drag works
+ // If clicking on .item-name, .item-icon, or .item-badges, select immediately so item drag works.
+ // On touch devices, these elements have pointer-events:none via CSS so this path
+ // won't be reached — touches land on .row instead, deferring selection to onclick.
const isDragHandle = e.target.closest('.item-name, .item-icon, .item-badges');
if ( e.button === 0 && !e.ctrlKey && !e.metaKey && !e.shiftKey && !el_item.classList.contains('selected') && !isMobileSelectMode && isDragHandle ) {
el_item.parentElement.querySelectorAll('.row.selected').forEach(r => {
@@ -2324,9 +2227,23 @@ const TabFiles = {
return;
}
- // On mobile in select mode, selection was already handled in pointerdown
- // Just return early to prevent any further processing
- if ( (window.isMobile.phone || window.isMobile.tablet) && _this.selectModeActive ) {
+ // On touch/mobile: tap opens the item directly, no selection step needed.
+ // Selection (and context menu) is handled via taphold.
+ // Use lastPointerType as primary signal (works even if isMobile misdetects).
+ if ( lastPointerType === 'touch' || window.isMobile.phone || window.isMobile.tablet ) {
+ // In select mode, tap toggles selection instead of opening
+ if ( _this.selectModeActive ) {
+ el_item.classList.toggle('selected');
+ window.latest_selected_item = el_item;
+ _this.updateFooterStats();
+ return;
+ }
+ if ( isFolder === "1" ) {
+ _this.pushNavHistory(file.path);
+ _this.renderDirectory(file.path);
+ } else {
+ open_item({ item: el_item });
+ }
return;
}
@@ -2353,18 +2270,6 @@ const TabFiles = {
}
}
}
-
- // On mobile, single tap opens folders (no double-tap on touch devices)
- if ( window.isMobile.phone || window.isMobile.tablet ) {
- // Normal mode: open the item
- if ( isFolder === "1" ) {
- _this.pushNavHistory(file.path);
- _this.renderDirectory(file.path);
- } else {
- open_item({ item: el_item });
- }
- el_item.classList.remove('selected');
- }
};
el_item.ondblclick = (e) => {
@@ -2470,9 +2375,16 @@ const TabFiles = {
// Right-click context menu handler (desktop) and taphold (touch devices)
$(el_item).on('contextmenu taphold', async (e) => {
// Dismiss taphold on non-touch devices
- if ( e.type === 'taphold' && !window.isMobile.phone && !window.isMobile.tablet ) {
+ if ( e.type === 'taphold' && !window.isMobile.phone && !window.isMobile.tablet && !(navigator.maxTouchPoints > 0) ) {
return;
}
+ // On iOS, both contextmenu and taphold can fire for the same long-press.
+ // Debounce to prevent duplicate modals.
+ if ( el_item._contextMenuShownAt && Date.now() - el_item._contextMenuShownAt < 500 ) {
+ e.preventDefault();
+ return;
+ }
+ el_item._contextMenuShownAt = Date.now();
e.preventDefault();
e.stopPropagation();
@@ -2484,9 +2396,9 @@ const TabFiles = {
items = await _this.generateContextMenuItems(el_item, file);
}
- if ( window.isMobile.phone || window.isMobile.tablet ) {
+ if ( window.isMobile.phone || window.isMobile.tablet || navigator.maxTouchPoints > 0 ) {
const modal = new ContextMenuModal();
- modal.show(items, el_item.getBoundingClientRect());
+ modal.show(items, el_item.getBoundingClientRect(), { title: file.name });
} else {
UIContextMenu({ items: items, position: { left: e.pageX, top: e.pageY } });
}
@@ -3140,12 +3052,7 @@ const TabFiles = {
* @returns {void}
*/
updateDashboardUrl (filePath) {
- // Use pushState to update URL without firing hashchange.
- // The popstate listener in UIDashboard handles back/forward navigation.
- const newHash = `#files${filePath}`;
- if ( window.location.hash !== newHash ) {
- history.pushState(null, '', newHash);
- }
+ // Disabled: don't modify the browser URL when navigating files.
},
/**
@@ -3169,10 +3076,10 @@ const TabFiles = {
}
// Use mobile-friendly context menu on touch devices
- if ( window.isMobile.phone || window.isMobile.tablet ) {
+ if ( window.isMobile.phone || window.isMobile.tablet || navigator.maxTouchPoints > 0 ) {
const targetRect = targetElement.getBoundingClientRect();
const modal = new ContextMenuModal();
- modal.show(items, targetRect);
+ modal.show(items, targetRect, { title: file.name });
} else {
UIContextMenu({ items: items });
}
diff --git a/src/gui/src/UI/Dashboard/TabHome.js b/src/gui/src/UI/Dashboard/TabHome.js
index ec554fc51..ea53b7173 100644
--- a/src/gui/src/UI/Dashboard/TabHome.js
+++ b/src/gui/src/UI/Dashboard/TabHome.js
@@ -166,6 +166,14 @@ const TabHome = {
h += '