Update recently used view (#6487)

* improve recently used item list ui

* update view in recently used from repo list to folder list

frontend/src/components/file-chooser/file-chooser.js

@@ -7,6 +7,7 @@ import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import RepoInfo from '../../models/repo-info';
 import RepoListView from './repo-list-view';
+import RecentlyUsedListView from './recently-used-list-view';
 import Loading from '../loading';
 import SearchedListView from './searched-list-view';
 
@@ -416,7 +417,7 @@ class FileChooser extends React.Component {
   renderRepoListView = () => {
     const { mode, currentPath, isShowFile, fileSuffixes } = this.props;
     const { isCurrentRepoShow, isOtherRepoShow, currentRepoInfo, repoList, selectedRepo, selectedPath, selectedItemInfo } = this.state;
-    const recentlyUsedRepos = JSON.parse(localStorage.getItem('recently-used-repos')) || [];
+    const recentlyUsedList = JSON.parse(localStorage.getItem('recently-used-list')) || [];
 
     return (
       <div className='scroll-wrapper' onScroll={this.onScroll}>
@@ -520,16 +521,10 @@ class FileChooser extends React.Component {
           )}
           {mode === 'recently_used' && (
             <div className="list-view">
-              <RepoListView
+              <RecentlyUsedListView
-                initToShowChildren={false}
+                recentlyUsedList={recentlyUsedList}
-                repoList={recentlyUsedRepos}
                 selectedRepo={selectedRepo}
-                selectedPath={selectedPath}
-                onRepoItemClick={this.onRepoItemClick}
                 onDirentItemClick={this.onDirentItemClick}
-                isShowFile={isShowFile}
-                fileSuffixes={fileSuffixes}
-                selectedItemInfo={selectedItemInfo}
               />
             </div>
           )}

frontend/src/components/file-chooser/recently-used-list-item.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const RecentlyUsedListItem = ({ path, isSelected, onItemClick }) => {
+  const title = path.split('/').pop();
+
+  const handleItemClick = () => {
+    onItemClick(path);
+  };
+
+  return (
+    <li>
+      <div className={`${isSelected ? 'item-active' : ''} item-info recently-used`} onClick={handleItemClick}>
+        <div className="item-left-icon">
+          <i className="tree-node-icon">
+            <span className="icon sf3-font sf3-font-folder tree-node-icon"></span>
+          </i>
+        </div>
+        <div className="item-text">
+          <span className="name user-select-none ellipsis" title={title}>{title}</span>
+        </div>
+      </div>
+    </li>
+  );
+};
+
+export default RecentlyUsedListItem;

frontend/src/components/file-chooser/recently-used-list-view.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import RecentlyUsedListItem from './recently-used-list-item';
+
+const RecentlyUsedListView = ({ recentlyUsedList, selectedRepo, onDirentItemClick }) => {
+  const [selectedItem, setSelectedItem] = useState(null);
+
+  const onItemClick = (path) => {
+    setSelectedItem(path);
+    onDirentItemClick(selectedRepo, path);
+  };
+
+  return (
+    <ul className="list-view-content file-chooser-item" >
+      {recentlyUsedList.length > 0 && recentlyUsedList.map((path, index) => {
+        return (
+          <RecentlyUsedListItem
+            key={index}
+            path={path}
+            isSelected={selectedItem === path}
+            onItemClick={onItemClick}
+          />
+        );
+      })}
+    </ul>
+  );
+};
+
+export default RecentlyUsedListView;

frontend/src/css/file-chooser.css

@@ -63,6 +63,10 @@
   transition: color 0.3s ease, background-color 0.3s ease;
 }
 
+.file-chooser-item .recently-used .item-left-icon {
+  padding: 0 0.25rem 0 0.5rem;
+}
+
 .file-chooser-search-close {
   position: absolute;
   top: -0.5rem;

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -715,16 +715,16 @@ class LibContentView extends React.Component {
     });
   };
 
-  updateRecentlyUsedRepos = (destRepo) => {
+  updateRecentlyUsedRepos = (destPath) => {
-    const recentlyUsed = JSON.parse(localStorage.getItem('recently-used-repos')) || [];
+    const recentlyUsed = JSON.parse(localStorage.getItem('recently-used-list')) || [];
-    const updatedRecentlyUsed = [destRepo, ...recentlyUsed.filter(repo => repo.repo_id !== destRepo.repo_id)];
+    const updatedRecentlyUsed = [destPath, ...recentlyUsed.filter(path => path !== destPath)];
 
     const seen = new Set();
-    const filteredRecentlyUsed = updatedRecentlyUsed.filter(repo => {
+    const filteredRecentlyUsed = updatedRecentlyUsed.filter(path => {
-      if (seen.has(repo.repo_id)) {
+      if (seen.has(path)) {
         return false;
       } else {
-        seen.add(repo.repo_id);
+        seen.add(path);
         return true;
       }
     });
@@ -733,7 +733,7 @@ class LibContentView extends React.Component {
       updatedRecentlyUsed.pop(); // Limit to 10 recent directories
     }
 
-    localStorage.setItem('recently-used-repos', JSON.stringify(filteredRecentlyUsed));
+    localStorage.setItem('recently-used-list', JSON.stringify(filteredRecentlyUsed));
   };
 
   // toolbar operations
@@ -775,7 +775,7 @@ class LibContentView extends React.Component {
         toaster.success(message);
       }
 
-      this.updateRecentlyUsedRepos(destRepo);
+      this.updateRecentlyUsedRepos(destDirentPath);
 
     }).catch((error) => {
       if (!error.response.data.lib_need_decrypt) {
@@ -1247,7 +1247,7 @@ class LibContentView extends React.Component {
         toaster.success(message);
       }
 
-      this.updateRecentlyUsedRepos(destRepo);
+      this.updateRecentlyUsedRepos(moveToDirentPath);
 
     }).catch((error) => {
       if (!error.response.data.lib_need_decrypt) {