diff --git a/src/gui/src/UI/Dashboard/TabFiles.js b/src/gui/src/UI/Dashboard/TabFiles.js
index 07c9ff016..d3e771f65 100644
--- a/src/gui/src/UI/Dashboard/TabFiles.js
+++ b/src/gui/src/UI/Dashboard/TabFiles.js
@@ -33,6 +33,7 @@ import new_context_menu_item from '../../helpers/new_context_menu_item.js';
import publish_as_website from '../../helpers/publish_as_website.js';
import ContextMenuModal, { isTouchPrimaryDevice } from './ContextMenu/ContextMenu.js';
import UIItemPropertiesModal from './UIItemPropertiesModal.js';
+import UIShareModal from './UIShareModal.js';
import { dedupedName } from './dedupedName.js';
import { isEntryVisible, isHiddenName, showHiddenFiles } from './hiddenFiles.js';
@@ -3882,6 +3883,16 @@ const TabFiles = {
$container: _this.$el_window,
});
},
+ onShare: ({ name, path: item_path }) => {
+ // Dashboard uses a responsive modal instead of the desktop UIWindow.
+ UIShareModal({
+ name,
+ path: item_path,
+ // The row's fs entry, so the modal can show the item's icon.
+ fsentry: options,
+ $container: _this.$el_window,
+ });
+ },
});
return menu_items;
diff --git a/src/gui/src/UI/Dashboard/UIShareModal.js b/src/gui/src/UI/Dashboard/UIShareModal.js
new file mode 100644
index 000000000..983ead642
--- /dev/null
+++ b/src/gui/src/UI/Dashboard/UIShareModal.js
@@ -0,0 +1,377 @@
+/*
+ * Copyright (C) 2024-present Puter Technologies Inc.
+ *
+ * This file is part of Puter.
+ *
+ * Puter is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
+
+import path from '../../lib/path.js';
+import item_icon from '../../helpers/item_icon.js';
+import { owner_of_path } from '../../helpers/path_owner.js';
+import { invalidate_shared_roots } from '../../helpers/shared_access.js';
+import { icons } from '../../helpers/actionIcons.js';
+
+const { html_encode } = window;
+
+const closeIcon = ``;
+
+// Offered when granting. The API accepts `see` and `list` too, but they are a
+// developer-level distinction with no place in this dialog — a row already set
+// to one is shown as-is rather than quietly rounded up to `read`.
+const MODES = ['read', 'write', 'manage'];
+
+// Raw (unencoded) text: i18n() html-encodes by default, and callers wrap this
+// in html_encode() — leaving that on would render "&" as a literal "&".
+const mode_label = (mode) => {
+ if ( mode === 'write' ) return i18n('share_access_write', [], false);
+ if ( mode === 'manage' ) return i18n('share_access_manage', [], false);
+ if ( mode === 'read' ) return i18n('share_access_read', [], false);
+ return mode;
+};
+
+const options_for = (current) => {
+ const modes = MODES.includes(current) ? MODES : [current, ...MODES];
+ return modes
+ .map(
+ (mode) =>
+ ``,
+ )
+ .join('');
+};
+
+// Stable, name-derived hue so a person keeps the same avatar color across
+// rows and reopenings. The CSS derives both fill and glyph color from it.
+const hue_for = (name) => {
+ let hue = 0;
+ for ( let i = 0; i < name.length; i++ ) {
+ hue = (hue * 31 + name.charCodeAt(i)) % 360;
+ }
+ return hue;
+};
+
+const avatar_html = (name) => {
+ const initial = (name || '?').trim().charAt(0).toUpperCase() || '?';
+ return `${html_encode(initial)}`;
+};
+
+/**
+ * A responsive, from-scratch sharing modal for the Dashboard's Files tab.
+ * Unlike UIWindowShare (which spawns a desktop UIWindow), this renders a
+ * self-contained overlay that behaves as a centered card on desktop and a
+ * bottom sheet on mobile, styled with the dashboard's design tokens.
+ *
+ * Feature-equivalent to UIWindowShare: grant access by email or username,
+ * list who has access (owner, direct grants, grants inherited from an
+ * ancestor folder), change a grant's mode, and revoke — with the revoke
+ * confirmation inlined into the row instead of a stacked alert window.
+ *
+ * @param {Object} opts
+ * @param {string} opts.path - Full path of the item to share
+ * @param {string} [opts.name] - Display name; defaults to the path's basename
+ * @param {string} [opts.owner] - Owner's username; defaults to the first path
+ * segment, which is not the current user when a `manage` recipient opens this
+ * @param {Object} [opts.fsentry] - The item's fs entry, used to render its icon
+ * @param {jQuery} [opts.$container] - Element to append the overlay to (defaults to )
+ * @returns {{ close: () => void }}
+ */
+export default function UIShareModal ({ path: item_path, name, owner, fsentry, $container }) {
+ const $root = $container && $container.length ? $container : $('body');
+ const item_name = name ?? path.basename(item_path);
+ const item_owner = owner ?? owner_of_path(item_path) ?? window.user.username;
+
+ const $overlay = $(`
+
+
+
+
+
+
+ ${html_encode(item_name)}
+ ${i18n('share')}
+
+
+
+
+
+
+
+
${i18n('share_who_has_access')}
+
+
+
+
+
+
+ `);
+
+ $root.append($overlay);
+
+ // Reveal after paint so the CSS transition (fade + scale/slide) runs.
+ requestAnimationFrame(() => $overlay.addClass('share-modal-show'));
+
+ const $status = $overlay.find('.share-modal-status');
+ const $list = $overlay.find('.share-modal-list');
+ const $recipient = $overlay.find('.share-modal-recipient');
+ const $submit = $overlay.find('.share-modal-submit');
+
+ // Focus returns to wherever the user was (usually the shared row) when
+ // the modal closes; the input takes it while the modal is up.
+ const el_previous_focus = document.activeElement;
+ $recipient.get(0)?.focus({ preventScroll: true });
+
+ let closed = false;
+ const close = () => {
+ if ( closed ) return;
+ closed = true;
+ $overlay.removeClass('share-modal-show');
+ $(document).off('keydown.share-modal');
+ setTimeout(() => $overlay.remove(), 200);
+ if ( el_previous_focus && document.contains(el_previous_focus) ) {
+ try {
+ el_previous_focus.focus({ preventScroll: true });
+ } catch { /* focus restoration is best-effort */ }
+ }
+ };
+
+ // The last successfully fetched share list, so canceling an inline revoke
+ // confirmation can restore the row without another network round-trip.
+ let last_shares = [];
+
+ const show_error = (message) => {
+ $status
+ .removeClass('share-modal-status-success')
+ .addClass('share-modal-status-error')
+ .html(html_encode(message));
+ };
+
+ const show_success = (message_html) => {
+ $status
+ .removeClass('share-modal-status-error')
+ .addClass('share-modal-status-success')
+ .html(message_html);
+ };
+
+ const clear_status = () => {
+ $status.removeClass('share-modal-status-error share-modal-status-success').empty();
+ };
+
+ const render = (shares) => {
+ last_shares = shares;
+ let rows = '';
+
+ // The owner's access comes from owning the item, so it can't be revoked
+ rows += '
';
+
+ for ( const share of shares ) {
+ const holder = html_encode(share.holder ?? '');
+ const you_suffix = share.holder === window.user.username ? ` (${i18n('share_you')})` : '';
+ if ( share.inheritedFrom ) {
+ // Granted on an ancestor, so it can only be changed there
+ rows += '