feat(viewPref): keep record of user view preferences per section (groupBy, order, list or grid)

static/js/app/filesView.js

@@ -17,6 +17,7 @@
 import { ResourceListComponent } from '../components/resourceList.js';
 import { normalizeDateBucket, sizeBucket } from '../core/formatters.js';
 import { i18n } from '../core/i18n.js';
+import * as viewPrefs from '../core/viewPrefs.js';
 import { batchToolbar } from '../features/files/batchToolbar.js';
 import { inlineViewer } from '../features/files/inlineViewer.js';
 import { favorites } from '../features/library/favorites.js';
@@ -163,6 +164,7 @@ const filesView = {
     setGroupBy(key) {
         if (_groupBy === key) return;
         _groupBy = key;
+        viewPrefs.save('files', _groupBy, _reversed, viewPrefs.load('files').view);
         _nextCursor = null;
         _component?.clear();
         _loadPage({ isFirstPage: true });
@@ -176,6 +178,7 @@ const filesView = {
     setDirection(reversed) {
         if (_reversed === reversed) return;
         _reversed = reversed;
+        viewPrefs.save('files', _groupBy, _reversed, viewPrefs.load('files').view);
         _nextCursor = null;
         _component?.clear();
         _loadPage({ isFirstPage: true });
@@ -359,10 +362,11 @@ async function loadFiles(options = { insertHistory: true }) {
         return;
     }
 
-    // Reset cursor, groupBy, and direction on navigation to a different folder.
+    // Reset cursor on navigation; restore saved group-by/direction preferences.
     _nextCursor = null;
-    _groupBy = '';
-    _reversed = false;
+    const _savedPrefs = viewPrefs.load('files');
+    _groupBy = _savedPrefs.groupBy;
+    _reversed = _savedPrefs.reversed;
 
     // Delay spinner so fast loads avoid the flash
     const spinnerTimeout = setTimeout(() => {

static/js/app/navigation.js

@@ -3,7 +3,9 @@
  * Extracted from main.js to keep navigation concerns isolated.
  */
 
+import { applyGroupByMenuState } from '../core/groupBySync.js';
 import { i18n } from '../core/i18n.js';
+import * as viewPrefs from '../core/viewPrefs.js';
 import { batchToolbar } from '../features/files/batchToolbar.js';
 import { favorites } from '../features/library/favorites.js';
 import { musicView } from '../features/library/music.js';
@@ -22,6 +24,14 @@ import { ui } from './ui.js';
  * Sync the hidden class and inline display for the grid/list containers
  * based on the current view preference.
  */
+/**
+ * Restore the grid/list view preference for a section before rendering.
+ * @param {string} section  Matches `app.currentSection` values.
+ */
+function restoreView(section) {
+    app.currentView = viewPrefs.resolveView(section);
+}
+
 function syncViewContainers() {
     const filesList = document.getElementById('files-list');
     const gridViewBtn = document.getElementById('grid-view-btn');
@@ -225,11 +235,16 @@ function switchToSharedWithMeSection() {
     setGroupByView(sharedWithMeView);
     syncGroupByMenu(sharedWithMeView.groupByDefs);
 
+    // Restore the saved group-by selection in the dropdown.
+    const swmPrefs = viewPrefs.load('sharedwithme');
+    applyGroupByMenuState(swmPrefs.groupBy, swmPrefs.reversed);
+
     // Show the Owner column — names are resolved async after render.
     ui.setOwnerColumnVisible(true);
 
     // Show the standard files container and respect grid/list preference
     toggleFileContainer(true);
+    restoreView('sharedwithme');
     syncViewContainers();
 
     if (batchToolbar) batchToolbar.clear();
@@ -246,6 +261,10 @@ function switchToFilesSection() {
     setGroupByView(filesView);
     syncGroupByMenu(filesView.groupByDefs);
 
+    // Restore the saved group-by selection in the dropdown.
+    const filesPrefs = viewPrefs.load('files');
+    applyGroupByMenuState(filesPrefs.groupBy, filesPrefs.reversed);
+
     // Show owner column in the Files section
     ui.setOwnerColumnVisible(true);
 
@@ -257,6 +276,7 @@ function switchToFilesSection() {
     toggleFileContainer(true);
 
     // ensure correct view
+    restoreView('files');
     syncViewContainers();
 
     //reset files view + remove any error
@@ -282,6 +302,10 @@ function switchToFavoritesSection() {
     setGroupByView(favoritesView);
     syncGroupByMenu(favoritesView.groupByDefs);
 
+    // Restore the saved group-by selection in the dropdown.
+    const favPrefs = viewPrefs.load('favorites');
+    applyGroupByMenuState(favPrefs.groupBy, favPrefs.reversed);
+
     // Show the Owner column — names are resolved async after render.
     ui.setOwnerColumnVisible(true);
 
@@ -293,6 +317,7 @@ function switchToFavoritesSection() {
     toggleFileContainer(true);
 
     // ensure correct view
+    restoreView('favorites');
     syncViewContainers();
 
     if (batchToolbar) batchToolbar.clear();
@@ -320,6 +345,7 @@ function switchToRecentFilesSection() {
     toggleFileContainer(true);
 
     // ensure correct view
+    restoreView('recent');
     syncViewContainers();
 
     //reset files view + remove any error
@@ -381,6 +407,7 @@ function switchToTrashSection() {
     ui.resetFilesList();
 
     //ensure buttons match the current view
+    restoreView('trash');
     syncViewContainers();
 
     // Load trash items

static/js/app/ui.js

@@ -7,6 +7,7 @@
 
 import { i18n } from '../core/i18n.js';
 import { OxiIcons } from '../core/icons.js';
+import * as viewPrefs from '../core/viewPrefs.js';
 import { batchToolbar } from '../features/files/batchToolbar.js';
 import { contextMenus } from '../features/files/contextMenus.js';
 import { fileOps } from '../features/files/fileOperations.js';
@@ -419,6 +420,7 @@ const ui = {
     switchToGridView() {
         app.currentView = 'grid';
         localStorage.setItem('oxicloud-view', 'grid');
+        if (app.currentSection) viewPrefs.saveView(app.currentSection, 'grid');
 
         syncViewContainers();
     },
@@ -429,6 +431,7 @@ const ui = {
     switchToListView() {
         app.currentView = 'list';
         localStorage.setItem('oxicloud-view', 'list');
+        if (app.currentSection) viewPrefs.saveView(app.currentSection, 'list');
 
         syncViewContainers();
     },