feat(myshares): new version of myshares sections, supporting grants Users + Tokens

static/js/app/main.js

@@ -162,12 +162,30 @@ const ACTIONS_BAR_TEMPLATES = {
         <div class="action-buttons" id="default-buttons"></div>
         ${_batchToolbarButons}
         ${_toggleButtons}
+    `,
+    shared: `
+        <div class="action-buttons" id="default-buttons"></div>
+        <div class="view-toggle">
+            <div class="group-by-selector hidden" id="group-by-selector">
+                <button class="toggle-btn group-by-btn" id="group-by-btn"
+                        title="Group by" data-i18n-title="groupby.title">
+                    <i class="fas fa-layer-group"></i>
+                    <span class="group-by-label"></span>
+                </button>
+                <button class="toggle-btn sort-dir-btn" id="sort-dir-btn"
+                        title="Sort direction" data-i18n-title="sortdir.title">
+                    <i class="fas fa-arrow-up" id="sort-dir-icon"></i>
+                </button>
+                <div class="group-by-menu hidden" id="group-by-menu"></div>
+            </div>
+            <span class="view-toggle-separator hidden" id="group-by-separator"></span>
+        </div>
     `
 };
 
 /**
  *
- * @param {'files' | 'trash' | 'favorites' | 'recent' | 'sharedwithme' | 'hidden'} mode
+ * @param {'files' | 'trash' | 'favorites' | 'recent' | 'sharedwithme' | 'shared' | 'hidden'} mode
  * @param {boolean} [force=false]
  * @returns
  */
@@ -259,8 +277,12 @@ function syncGroupByMenu(defs = []) {
 
     // Rebuild menu options — call i18n.t() directly so each label is resolved
     // at call time (translations are loaded by the time any section switch runs).
-    menu.innerHTML = `<button class="group-by-option active" data-group-by="">${escapeHtml(i18n.t('groupby.none', 'None'))}</button>`;
+    // A def with key='' lets the section override the default "None" label.
+    const noneOverride = defs.find((d) => d.key === '');
+    const noneLabel = noneOverride ? noneOverride.label : i18n.t('groupby.none', 'None');
+    menu.innerHTML = `<button class="group-by-option active" data-group-by="">${escapeHtml(noneLabel)}</button>`;
     for (const def of defs) {
+        if (def.key === '') continue;
         menu.insertAdjacentHTML('beforeend', `<button class="group-by-option" data-group-by="${escapeHtml(def.key)}">${escapeHtml(def.label)}</button>`);
     }
 
@@ -640,8 +662,10 @@ function setupEventListeners() {
         } else {
             // change is from history, data provided in event
             switchSectionTo(e.state.section);
-            app.currentPath = e.state.id;
-            loadFiles({ insertHistory: false });
+            if (e.state.section === 'files') {
+                app.currentPath = e.state.id;
+                loadFiles({ insertHistory: false });
+            }
         }
     });
 

static/js/app/navigation.js

@@ -11,6 +11,7 @@ import { favorites } from '../features/library/favorites.js';
 import { musicView } from '../features/library/music.js';
 import { photosView } from '../features/library/photos.js';
 import { favoritesView } from '../views/favorites/favoritesView.js';
+import { mySharesView } from '../views/myShares/mySharesView.js';
 import { recentView } from '../views/recent/recentView.js';
 import { sharedView } from '../views/shared/sharedView.js';
 import { sharedWithMeView } from '../views/sharedWithMe/sharedWithMeView.js';
@@ -165,9 +166,10 @@ function setCurrentSection(section) {
         appElements.pageTitle.setAttribute('data-i18n', titleKey);
     }
 
-    // Hide sharedView when switching to any other section
-    if (section !== 'shared' && sharedView) {
-        sharedView.hide();
+    // Hide sharedView and mySharesView when switching to any other section
+    if (section !== 'shared') {
+        if (sharedView) sharedView.hide();
+        mySharesView.hide();
     }
 
     // Hide "Load more" button when leaving the sharedwithme section
@@ -208,21 +210,27 @@ function switchToSharedSection() {
     const breadcrumb = document.querySelector('.breadcrumb');
     breadcrumb?.classList.add('hidden');
 
-    // Hide actions-bar for shared view
-    setActionsBarMode('hidden');
+    // Show actions-bar with group-by controls only (no grid/list toggle —
+    // MySharesList is always in list mode).
+    setActionsBarMode('shared');
 
-    //reset files view + remove any error
-    ui.resetFilesList();
+    // Populate the group-by dropdown with this section's dimensions.
+    setGroupByView(mySharesView);
+    syncGroupByMenu(mySharesView.groupByDefs);
 
-    // Hide file containers
-    toggleFileContainer(false);
+    // Restore the saved group-by selection in the dropdown.
+    const msPrefs = viewPrefs.load('shared');
+    applyGroupByMenuState(msPrefs.groupBy, msPrefs.reversed);
 
-    // Show shared view
-    sharedView.init().then(() => {
-        sharedView.show();
-    });
+    // Show the files container always in list view — grid is not applicable here.
+    toggleFileContainer(true);
+    app.currentView = 'list';
+    syncViewContainers();
 
     if (batchToolbar) batchToolbar.clear();
+
+    // Load and render items into the files container
+    mySharesView.init();
 }
 
 function switchToSharedWithMeSection() {

static/js/app/ui.js

@@ -882,7 +882,7 @@ const ui = {
             loadFiles();
             return;
         }
-        if (app.currentSection === 'sharedwithme') {
+        if (app.currentSection === 'sharedwithme' || app.currentSection === 'shared') {
             // Activate Files UI (nav, breadcrumb, actions bar) without
             // resetting the path — the shared folder becomes the entry point.
             activateFilesUI();