Skip to content

[FEATURE] Drag-and-drop reordering of chat sessions in sidebar (#361)#382

Open
adikulkarni006 wants to merge 7 commits into
imDarshanGK:mainfrom
adikulkarni006:feature/drag-drop-sessions
Open

[FEATURE] Drag-and-drop reordering of chat sessions in sidebar (#361)#382
adikulkarni006 wants to merge 7 commits into
imDarshanGK:mainfrom
adikulkarni006:feature/drag-drop-sessions

Conversation

@adikulkarni006

Copy link
Copy Markdown
Collaborator

Closes #361

🎯 Problem

Sessions in sidebar are displayed in a fixed order (by creation or update date). Users cannot manually reorder important sessions to the top.

🚀 Solution Implemented

Adds drag‑and‑drop reordering to the session list:

  • Backend

    • Added order_index column to sessions table (default 0).
    • get_all_sessions() now orders by order_index ASC, updated_at DESC.
    • New update_sessions_order(session_ids) function to batch‑update indices.
    • New endpoint PATCH /api/sessions/reorder accepting a list of session IDs in the desired order.
  • Frontend

    • Installed @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities.
    • Replaced static session list in Sidebar.jsx with a sortable DndContext.
    • Each session is a useSortable item – drag handle is the whole row (click‑to‑load still works).
    • Visual placeholder while dragging, opacity feedback.
    • After drop, new order is sent to backend via reorderSessions() API and sessions list is refreshed.
    • Added refreshSessions prop in App.jsx to update list after reorder.
  • API

    • Added reorderSessions(sessionIds) function in api.js.

🧪 Testing Performed

  • ✅ Drag any session up/down – order changes instantly.
  • ✅ After drop, "Saving order..." message appears briefly.
  • ✅ Page reload – order persists (backed by order_index).
  • ✅ Existing functionality (new chat, delete, load, rename) remains unaffected.
  • ✅ Works with search filter – only visible sessions are draggable, but reorder applies to full list (consistent with expectations).

📁 Files Changed

File Change
backend/services/db_service.py + ensure_order_index_column(), modified get_all_sessions(), + update_sessions_order()
backend/routes/sessions.py + ReorderSessionsRequest model, + PATCH /reorder endpoint
frontend/src/components/Sidebar.jsx Full rewrite with @dnd-kit sortable list
frontend/src/utils/api.js + reorderSessions() export
frontend/src/App.jsx Pass refreshSessions to Sidebar
package.json (frontend) Added @dnd-kit dependencies

🔥 Why Merge?

  • Real user need – manual session reordering is a common request.
  • Clean implementation – uses modern dnd-kit (lightweight, accessible).
  • Persistent – order survives page reloads and server restarts.
  • Backwards compatible – existing sessions get order_index = 0 and keep update‑based fallback order.
  • No breaking changes – drag is an addition, no existing functionality removed.

Ready for review.

@vercel

vercel Bot commented Jun 11, 2026

Copy link
Copy Markdown

@adikulkarni006 is attempting to deploy a commit to the Darshan's projects Team on Vercel.

A member of the Team first needs to authorize it.

@adikulkarni006

Copy link
Copy Markdown
Collaborator Author

@imDarshanGK Branch updated. All checks green. Please merge. Thanks!

@adikulkarni006 adikulkarni006 added SSoC26 Part of Social Summer of Code 2026 Beginner labels Jun 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Beginner SSoC26 Part of Social Summer of Code 2026

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] Add drag-and-drop reordering of chat sessions in sidebar

1 participant