Move the shared marker onto the icon's corner and shrink it

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

@@ -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>

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;' : ''}" 

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;

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 {

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');
 };