feat(ui): Implement drag-and-drop to reorder accounts Description

[sadraiiali]

Description

What does this PR do?

This pull request introduces the user-facing functionality for reordering accounts in the AccountListSidebar. Users can now drag and drop their account icons to set a custom display order. This change builds upon the backend functionality introduced in the core library and resolves a key part of issue #3671.

---

How It Works

This implementation uses native HTML drag-and-drop events within the React component to provide a smooth and responsive user experience.

1. Fetching the Initial Order:

   • The component now calls the new getAccountsOrder() RPC method (instead of getAllAccountIds()) to fetch the list of accounts in their correct, user-defined order on initial load.

2. Drag-and-Drop Logic (AccountListSidebar.tsx):

   • State Management: New state variables (draggedAccountId, dropIndicator) are used to track the item being dragged and the potential drop location.
   • Event Handlers:
     • onDragStart: Captures the ID of the account being dragged.
     • onDragOver: Prevents the default browser behavior and calculates whether the drop target is in the top or bottom half of the element being hovered over. This determines where the drop indicator line is shown.
     • onDrop:
       • Calculates the new position for the dragged account.
       • Optimistic UI Update: The local accounts state is updated immediately to give the user instant visual feedback.
       • Backend Sync: It then calls the setAccountsOrder() RPC method to persist the new order in the accounts.toml file.
       • Error Handling: If the backend call fails, the UI reverts to the previous order by calling refresh().
     • onDragEnd & onDragLeave: Clean up the state to remove visual indicators.

3. Visual Feedback (styles.module.scss):

   • Dragging Item: A .dragging class is applied to the account item being dragged, reducing its opacity and slightly scaling it down.
   • Drop Indicator: .dragOverTop and .dragOverBottom classes add a clear visual line (using a ::before pseudo-element) above or below the target item to show the user exactly where the account will be dropped.

---

Author's Notes & Context

• This implementation was created with AI assistance.
• This PR is the second part of the "reorder accounts" feature, following the core implementation. LINK TO PR
• Based on the discussion in issue Account Sidebar: Further Steps #3671, this PR uses the core's account manager to store the order in accounts.toml. This approach ensures the order is persisted correctly across sessions. It avoids using localStorage for a more robust solution, as was discussed.
• The window.__updateAccountListSidebar hack is still present but is unrelated to this change and will be addressed separately as noted in the issue.

[link2xt]

CI linter is unhappy about missing const and one unused variable, should be an easy fix.

[link2xt]

This is outdated, need to use getAllAccountIds now.

[Simon-Laux]

is there a reason to not use useRpcFetch anymore?

[WofWca]

It seems like the merger of main into this branch simply reverted all the recent changes from main.

[sadraiiali]

that is true. :(
I will pull it again and do the changes again

[link2xt]

I also noticed that if I drag the icon not on another icon, but precisely in-between, then nothing is changed. Moving only works by dragging on another icon, and depending on whether you point at the top or bottom half you get different position.

[sadraiiali]

exactly @link2xt I'm now trying to fix this issue thanks for mentioning.

[sadraiiali]

Discord :

Telegram:

I think best ux for this feature goes to discord :) but I also like telegram. because foldering is not there in the deltachat maybe the telegram approach would be good.

what do you think ?

[WofWca]

Telegram looks good.