From b08dc70654f596efcc10a267b3a67c40123651f5 Mon Sep 17 00:00:00 2001
From: Juan Castro <jfcastro9208@gmail.com>
Date: Wed, 26 Aug 2026 11:07:48 -0400
Subject: [PATCH] Move the shared marker onto the icon's corner and shrink it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review feedback: too big, and in the wrong place. It sat in the badge
cluster, which the dashboard pins to the row's top-left corner rather
than to the icon — and at 12px it dominated a 24px row icon.

Now a dot on the icon itself, lower-right: 9px on the desktop's 45px
icons, 7px on the dashboard's 24px rows. Anchoring to .item-icon rather
than to the badge cluster is what keeps it on the corner at both sizes.

Dropping the people glyph with it — unreadable at either size, and
colour was the signal the ticket asked for.
---
 src/gui/src/UI/Dashboard/TabFiles.js | 10 ++++------
 src/gui/src/UI/UIItem.js             | 13 ++++++-------
 src/gui/src/css/dashboard.css        |  9 +++++++++
 src/gui/src/css/style.css            | 22 ++++++++++++----------
 src/gui/src/helpers/sharedBadge.js   |  4 ++--
 5 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/gui/src/UI/Dashboard/TabFiles.js b/src/gui/src/UI/Dashboard/TabFiles.js
index 5c712078a..c6fe9cd82 100644
--- a/src/gui/src/UI/Dashboard/TabFiles.js
+++ b/src/gui/src/UI/Dashboard/TabFiles.js
@@ -2513,6 +2513,10 @@ const TabFiles = {
             <div class="item-checkbox"><span class="checkbox-icon"></span></div>
             <div class="item-icon">
                 ${icon}
+                <div class="item-shared-marker"
+                    style="${file.is_shared === true ? '' : 'display:none;'}"
+                    title="${html_encode(i18n('item_shared_by_you'))}"
+                ></div>
             </div>
             <div class="item-badges">
                 <img class="item-badge item-has-website-badge long-hover"
@@ -2536,12 +2540,6 @@ const TabFiles = {
                     src="${html_encode(window.icons['worker.svg'])}"
                     data-item-id="${item_id}"
                 >
-                <img class="item-badge item-is-shared-badge"
-                    style="${file.is_shared === true ? 'display:block;' : ''}"
-                    src="${html_encode(window.icons['owner-shared.svg'])}"
-                    data-item-id="${item_id}"
-                    title="${html_encode(i18n('item_shared_by_you'))}"
-                >
             </div>
             <div class="item-name-wrapper">
                 <pre class="item-name">${html_encode(displayName)}</pre>
diff --git a/src/gui/src/UI/UIItem.js b/src/gui/src/UI/UIItem.js
index 599667008..7ea257b46 100644
--- a/src/gui/src/UI/UIItem.js
+++ b/src/gui/src/UI/UIItem.js
@@ -217,6 +217,12 @@ async function UIItem (options) {
     // icon
     h += '<div class="item-icon">';
     h += `<img src="${html_encode(options.icon.image)}" class="item-icon-${options.icon.type}" data-item-id="${item_id}">`;
+    // Shared marker: on the icon rather than in the badge cluster, so it stays
+    // on the item's own corner at every icon size.
+    h += `<div class="item-shared-marker"
+                style="${options.is_shared ? '' : 'display:none;'}"
+                title="${html_encode(i18n('item_shared_by_you'))}"
+            ></div>`;
     h += '</div>';
     // badges
     h += '<div class="item-badges">';
@@ -240,13 +246,6 @@ async function UIItem (options) {
                         data-item-id="${item_id}"
                         title="${i18n('item_shortcut')}"
                     >`;
-    // shared badge
-    h += `<img  class="item-badge item-is-shared-badge"
-                        style="${options.is_shared ? 'display:block;' : ''}"
-                        src="${html_encode(window.icons['owner-shared.svg'])}"
-                        data-item-id="${item_id}"
-                        title="${i18n('item_shared_by_you')}"
-                    >`;
     // worker badge
     h += `<img  class="item-badge item-is-worker long-hover"
                         style="background-color: #ffffff; padding: 2px; ${is_worker ? 'display:block;' : ''}" 
diff --git a/src/gui/src/css/dashboard.css b/src/gui/src/css/dashboard.css
index ebb62a917..93ba4b950 100644
--- a/src/gui/src/css/dashboard.css
+++ b/src/gui/src/css/dashboard.css
@@ -4044,6 +4044,15 @@ body.myapps-reordering .myapps-tile {
     border-radius: 2px;
 }
 
+/* Smaller than the desktop's, to match a 24px row icon. */
+.dashboard-section-files .files-tab .files .row .item-shared-marker {
+    width: 7px;
+    height: 7px;
+    right: 0;
+    bottom: 0;
+    box-shadow: 0 0 0 1px white;
+}
+
 .dashboard-section-files .files-tab .files.files-list-view .row .item-icon img {
     width: 18px;
     height: 18px;
diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css
index 6a0a7491f..20482cb7a 100644
--- a/src/gui/src/css/style.css
+++ b/src/gui/src/css/style.css
@@ -533,6 +533,8 @@ span.header-sort-icon img {
 }
 
 .item-icon {
+    /* Anchors the shared marker to the icon's corner. */
+    position: relative;
     display: block;
     margin: 0 auto;
     padding: 5px;
@@ -674,18 +676,18 @@ span.header-sort-icon img {
     cursor: pointer;
 }
 
-/* Shared, owner-side. The ring is what reads at the 8px list-view size. */
-.item-badge.item-is-shared-badge {
+/* Shared, owner-side: a dot on the icon's lower-right. A glyph is unreadable
+   at the size a row icon allows, and colour is the signal that survives it. */
+.item-shared-marker {
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    width: 9px;
+    height: 9px;
     border-radius: 50%;
-    background: white;
-    padding: 2px;
-    box-shadow: 0 0 0 1.5px #3b82f6;
-}
-
-.item-container-details .item-badges .item-badge.item-is-shared-badge {
-    /* Small enough that only the ring reads, so fill it in. */
     background: #3b82f6;
-    box-shadow: none;
+    box-shadow: 0 0 0 1.5px white;
+    pointer-events: all;
 }
 
 .item-name, .item-name-editor, .item-name-shadow {
diff --git a/src/gui/src/helpers/sharedBadge.js b/src/gui/src/helpers/sharedBadge.js
index 7444a36cc..c04267fc2 100644
--- a/src/gui/src/helpers/sharedBadge.js
+++ b/src/gui/src/helpers/sharedBadge.js
@@ -37,6 +37,6 @@ export const mark_item_shared = (path, is_shared) => {
     const $items = $(`.item[data-path="${html_encode(path)}" i]`);
     $items.attr('data-is_shared', is_shared ? 1 : 0);
     $items
-        .find('.item-is-shared-badge')
-        .css('display', is_shared ? 'block' : 'none');
+        .find('.item-shared-marker')
+        .css('display', is_shared ? '' : 'none');
 };