From 1160ea140b4fe6774da849bf24e574b0af69820f Mon Sep 17 00:00:00 2001
From: Sam Hoang Van <samhv.ict@gmail.com>
Date: Wed, 18 Jun 2025 00:23:53 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20disable=20sorting=20for?=
 =?UTF-8?q?=20threads=20in=20SortableItem=20and=20clean=20up=20thread=20or?=
 =?UTF-8?q?der=20handling=20(#5326)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web-app/src/containers/ThreadList.tsx | 44 ++-------------------------
 web-app/src/hooks/useThreads.ts       | 35 +--------------------
 2 files changed, 3 insertions(+), 76 deletions(-)

diff --git a/web-app/src/containers/ThreadList.tsx b/web-app/src/containers/ThreadList.tsx
index 44f8bbfc4..0702c1bf9 100644
--- a/web-app/src/containers/ThreadList.tsx
+++ b/web-app/src/containers/ThreadList.tsx
@@ -9,7 +9,6 @@ import {
 import {
   SortableContext,
   verticalListSortingStrategy,
-  arrayMove,
   useSortable,
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
@@ -54,7 +53,7 @@ const SortableItem = memo(({ thread }: { thread: Thread }) => {
     transform,
     transition,
     isDragging,
-  } = useSortable({ id: thread.id })
+  } = useSortable({ id: thread.id, disabled: true })
 
   const style = {
     transform: CSS.Transform.toString(transform),
@@ -263,18 +262,8 @@ type ThreadListProps = {
 }
 
 function ThreadList({ threads }: ThreadListProps) {
-  const { setThreads } = useThreads()
-
   const sortedThreads = useMemo(() => {
     return threads.sort((a, b) => {
-      // If both have order, sort by order (ascending, so lower order comes first)
-      if (a.order != null && b.order != null) {
-        return a.order - b.order
-      }
-      // If only one has order, prioritize the one with order (order comes first)
-      if (a.order != null) return -1
-      if (b.order != null) return 1
-      // If neither has order, sort by updated time (newer threads first)
       return (b.updated || 0) - (a.updated || 0)
     })
   }, [threads])
@@ -290,36 +279,7 @@ function ThreadList({ threads }: ThreadListProps) {
   )
 
   return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragEnd={(event) => {
-        const { active, over } = event
-        if (active.id !== over?.id && over) {
-          // Access Global State
-          const allThreadsMap = useThreads.getState().threads
-          const allThreadsArray = Object.values(allThreadsMap)
-
-          // Calculate Global Indices
-          const oldIndexInGlobal = allThreadsArray.findIndex(
-            (t) => t.id === active.id
-          )
-          const newIndexInGlobal = allThreadsArray.findIndex(
-            (t) => t.id === over.id
-          )
-
-          // Reorder Globally and Update State
-          if (oldIndexInGlobal !== -1 && newIndexInGlobal !== -1) {
-            const reorderedGlobalThreads = arrayMove(
-              allThreadsArray,
-              oldIndexInGlobal,
-              newIndexInGlobal
-            )
-            setThreads(reorderedGlobalThreads)
-          }
-        }
-      }}
-    >
+    <DndContext sensors={sensors} collisionDetection={closestCenter}>
       <SortableContext
         items={sortedThreads.map((t) => t.id)}
         strategy={verticalListSortingStrategy}
diff --git a/web-app/src/hooks/useThreads.ts b/web-app/src/hooks/useThreads.ts
index 806749b73..7bc46675e 100644
--- a/web-app/src/hooks/useThreads.ts
+++ b/web-app/src/hooks/useThreads.ts
@@ -32,11 +32,9 @@ export const useThreads = create<ThreadState>()((set, get) => ({
   threads: {},
   searchIndex: null,
   setThreads: (threads) => {
-    threads.forEach((thread, index) => {
-      thread.order = index + 1
+    threads.forEach((thread) => {
       updateThread({
         ...thread,
-        order: index + 1,
       })
     })
     const threadMap = threads.reduce(
@@ -159,7 +157,6 @@ export const useThreads = create<ThreadState>()((set, get) => ({
       id: ulid(),
       title: title ?? 'New Thread',
       model,
-      // order: 1, // Will be set properly by setThreads
       updated: Date.now() / 1000,
       assistants: assistant ? [assistant] : [],
     }
@@ -244,44 +241,14 @@ export const useThreads = create<ThreadState>()((set, get) => ({
       const thread = state.threads[threadId]
       if (!thread) return state
 
-      // If the thread is already at order 1, just update the timestamp
-      if (thread.order === 1) {
-        const updatedThread = {
-          ...thread,
-          updated: Date.now() / 1000,
-        }
-        updateThread(updatedThread)
-
-        return {
-          threads: {
-            ...state.threads,
-            [threadId]: updatedThread,
-          },
-        }
-      }
-
       // Update the thread with new timestamp and set it to order 1 (top)
       const updatedThread = {
         ...thread,
         updated: Date.now() / 1000,
-        order: 1,
       }
 
       // Update all other threads to increment their order by 1
       const updatedThreads = { ...state.threads }
-      Object.keys(updatedThreads).forEach((id) => {
-        if (id !== threadId) {
-          const otherThread = updatedThreads[id]
-          updatedThreads[id] = {
-            ...otherThread,
-            order: (otherThread.order || 1) + 1,
-          }
-          // Update the backend for other threads
-          updateThread(updatedThreads[id])
-        }
-      })
-
-      // Set the updated thread
       updatedThreads[threadId] = updatedThread
 
       // Update the backend for the main thread