fix(FR-1470): preserve board items order after drag and drop (#4287)

Resolves #4277 ([FR-1470](https://lablup.atlassian.net/browse/FR-1470))

## Summary

This PR fixes the issue where board items on Dashboard and Start pages revert to their original positions after drag & drop operations. Users can now properly rearrange board items and the layout will be preserved across page refreshes.

## Changes

### DashboardPage.tsx
- Added useMemo optimization for mergedBoardItems calculation
- Implemented localStorage order preservation using Map-based sorting
- Import fix: Added useMemo to React imports

### StartPage.tsx
- Refactored board items logic to match DashboardPage pattern
- Replaced state-based approach with useMemo and direct localStorage integration
- Removed unnecessary boardItems state and setBoardItems calls
- Improved performance by eliminating redundant re-renders

## Technical Implementation

The key fix involves sorting merged items by localStorage order while preserving new items:

1. Map initialBoardItems with localStorage data
2. Create order map from localStorage indices
3. Sort merged items using localStorage order
4. New items get MAX_VALUE (placed at end)

## Impact

- Fixed: Board items now maintain their position after drag & drop
- Performance: Optimized with useMemo to prevent unnecessary recalculations
- Backward compatibility: New items automatically appear at the end
- Consistency: Both Dashboard and Start pages use the same pattern

## Test Case

1. Go to Dashboard or Start page
2. Drag and drop any board item to a new position
3. Refresh the page
4. Expected: Item remains in the new position
5. Before this fix: Item would revert to original position

[FR-1470]: https://lablup.atlassian.net/browse/FR-1470?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: ironAiken2

react/src/pages/DashboardPage.tsx

@@ -177,22 +177,31 @@ const DashboardPage: React.FC = () => {
   // and thus not displayed on screen.
   // Opted-out items should also be stored separately in localStorage, and newly added items
   // should be included in initialBoardItems.
-  const mergedBoardItems = filterOutEmpty(
-    _.map(initialBoardItems, (item) => {
-      const updatedItem = _.find(
+  const newlyAddedItems = _.filter(
+    initialBoardItems,
+    (item) =>
+      !_.find(
         localStorageBoardItems,
         (itemInStorage) => itemInStorage.id === item.id,
-      );
-      return { ...item, ...updatedItem };
+      ),
+  );
+  const localstorageBoardItemsWithData = filterOutEmpty(
+    _.map(localStorageBoardItems, (item) => {
+      const matchedData = _.find(
+        initialBoardItems,
+        (initialItem) => initialItem.id === item.id,
+      )?.data;
+      return matchedData ? { ...item, data: matchedData } : undefined;
     }),
   );
+  const boardItems = [...localstorageBoardItemsWithData, ...newlyAddedItems];
 
   return (
     <BAIBoard
       movable
       resizable
       bordered
-      items={mergedBoardItems}
+      items={boardItems}
       onItemsChange={(event) => {
         const changedItems = [...event.detail.items];
         setLocalStorageBoardItems(

react/src/pages/StartPage.tsx

@@ -51,7 +51,7 @@ const StartPage: React.FC = () => {
     });
   }, [count, t, upsertNotification]);
 
-  const defaultBoardItem = filterOutEmpty<StartPageBoardItem>([
+  const initialBoardItems = filterOutEmpty<StartPageBoardItem>([
     {
       id: 'createFolder',
       requiredMenuKey: 'data',
@@ -142,22 +142,28 @@ const StartPage: React.FC = () => {
   const [localStorageBoardItems, setLocalStorageBoardItems] =
     useBAISettingUserState('start_page_board_items');
 
-  const initialBoardItems = localStorageBoardItems
-    ? filterOutEmpty<StartPageBoardItem>(
-        _.map(localStorageBoardItems, (item) => {
-          const initialItem = _.find(
-            defaultBoardItem,
-            (defaultItem) => defaultItem.id === item.id,
-          );
-          return initialItem ? { ...item, data: initialItem.data } : null;
-        }),
-      )
-    : defaultBoardItem;
-
-  const [boardItems, setBoardItems] =
-    useState<_.Omit<StartPageBoardItem, 'requiredMenuKey'>[]>(
-      initialBoardItems,
-    );
+  // TODO: Issue occurs when newly added items in new webui version are not saved in localStorage
+  // and thus not displayed on screen.
+  // Opted-out items should also be stored separately in localStorage, and newly added items
+  // should be included in initialBoardItems.
+  const newlyAddedItems = _.filter(
+    initialBoardItems,
+    (item) =>
+      !_.find(
+        localStorageBoardItems,
+        (itemInStorage) => itemInStorage.id === item.id,
+      ),
+  );
+  const localstorageBoardItemsWithData = filterOutEmpty(
+    _.map(localStorageBoardItems, (item) => {
+      const matchedData = _.find(
+        initialBoardItems,
+        (initialItem) => initialItem.id === item.id,
+      )?.data;
+      return matchedData ? { ...item, data: matchedData } : undefined;
+    }),
+  );
+  const boardItems = [...localstorageBoardItemsWithData, ...newlyAddedItems];
 
   return (
     <BAIFlex direction="column" gap={'md'} align="stretch">
@@ -168,7 +174,6 @@ const StartPage: React.FC = () => {
         onItemsChange={(event) => {
           // use spread operator to ignore readonly type error
           const changedItems = [...event.detail.items];
-          setBoardItems(changedItems);
           setLocalStorageBoardItems(
             _.map(changedItems, (item) => _.omit(item, 'data')),
           );