frontend/projects/starred: keep order stable!

Author: haraldschilly

src/packages/frontend/projects/projects-starred.tsx

@@ -11,7 +11,6 @@ import { Icon, TimeAgo } from "@cocalc/frontend/components";
 import { trunc } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import { useBookmarkedProjects } from "./use-bookmarked-projects";
-import { sortProjectsLastEdited } from "./util";
 
 const DROPDOWN_WIDTH = 100; // Width reserved for dropdown button + buffer
 
@@ -33,7 +32,7 @@ export function StarredProjectsBar() {
   const { bookmarkedProjects } = useBookmarkedProjects();
   const project_map = useTypedRedux("projects", "project_map");
 
-  // Get starred projects sorted by title
+  // Get starred projects in bookmarked order (newest bookmarked first)
   const starredProjects = useMemo(() => {
     if (!bookmarkedProjects || !project_map) return [];
 
@@ -54,8 +53,8 @@ export function StarredProjectsBar() {
       })
       .filter((p) => p != null);
 
-    // Sort by last edited, newest first
-    return projects.sort(sortProjectsLastEdited).reverse();
+    // Return projects in their bookmarked order
+    return projects;
   }, [bookmarkedProjects, project_map]);
 
   // State for tracking how many projects can be shown

src/packages/frontend/projects/use-bookmarked-projects.ts

@@ -17,7 +17,7 @@ bm.set("projects", ['project_id_1', 'project_id_2'])
 bm.on('change', (e) => console.log('Bookmark change:', e))
  */
 
-import { sortBy, uniq } from "lodash";
+import { uniq } from "lodash";
 import { useEffect, useRef, useState } from "react";
 
 import { redux } from "@cocalc/frontend/app-framework";
@@ -78,7 +78,7 @@ export function useBookmarkedProjects() {
         // Load initial data from conat
         const initialBookmarks = conatBookmarks.get(PROJECTS_KEY) ?? [];
         if (Array.isArray(initialBookmarks)) {
-          setBookmarkedProjects(sortBy(uniq(initialBookmarks)));
+          setBookmarkedProjects(uniq(initialBookmarks));
         }
 
         // Create stable listener function
@@ -90,7 +90,7 @@ export function useBookmarkedProjects() {
           if (changeEvent.key === PROJECTS_KEY) {
             const remoteBookmarks =
               (changeEvent.value as BookmarkedProjects) ?? [];
-            setBookmarkedProjects(sortBy(uniq(remoteBookmarks)));
+            setBookmarkedProjects(uniq(remoteBookmarks));
           }
         };
 
@@ -125,7 +125,7 @@ export function useBookmarkedProjects() {
     }
 
     const next = bookmarked
-      ? sortBy(uniq([...bookmarkedProjects, project_id]))
+      ? uniq([project_id, ...bookmarkedProjects])
       : bookmarkedProjects.filter((p) => p !== project_id);
 
     // Update local state immediately for responsive UI