Add drag-and-drop site reordering with sortOrder persistence

[mikaoelitiana]

Summary

This PR implements drag-and-drop site reordering functionality. Users can now reorder sites in the sidebar by dragging and dropping them, with the new sort order being saved to disk. Existing sites without a sort order will be sorted alphabetically after those with an explicit order.

The main changes involve making site items draggable and updating sortOrder property upon item drop. This new field is added to the data stored locally.

Enregistrement.de.l.ecran.2026-02-06.a.10.40.16.mov

Resolves #588

[profucius]

Hi there, thanks for taking this feature! I watched your video above and it looks great so far.

[wojtekn]

Thanks for working on that @mikaoelitiana .

I think we could drop the drag indicator to keep the interface cleaner.

I opened #2531 to trigger CI.

[mikaoelitiana]

Thanks for working on that @mikaoelitiana .

I think we could drop the drag indicator to keep the interface cleaner.

I opened #2531 to trigger CI.

OK I will remove it

[mikaoelitiana]

@wojtekn I have remove the drag icon and updated the video on the PR description

[bcotrim]

Thanks for the contribution @mikaoelitiana and welcome to the project!

I added some comments, please let me know what you think.

[bcotrim]

The reorder should update the UI optimistically — call setSites with the new order immediately, then persist to the ipc in the background (ideally debounced to avoid excessive writes during rapid drag-and-drop). Right now the list waits for the full IPC roundtrip before reflecting the new order, which causes a visible delay.

[mikaoelitiana]

@bcotrim I made some refactoring to address your comments. For the debounce part, I checked if we already do that somewhere in the project but I don't seem to find anything. Do you think we should install a dependency for that or create it in-house?

[bcotrim]

No need for an external dependency, a simple setTimeout/clearTimeout with a useRef does the trick. The key is to keep setSites immediate (optimistic) and only debounce the IPC persist:

const saveTimeoutRef = useRef< ReturnType< typeof setTimeout > >();
const DEBOUNCE_SAVE_MS = 300;

const updateSitesSortOrder = useCallback( ( sites: SiteDetails[] ) => {
    setSites( sites );

    const updates = sites.map( ( site, index ) => ( {
        siteId: site.id,
        sortOrder: ( index + 1 ) * 1000,
    } ) );

    clearTimeout( saveTimeoutRef.current );
    saveTimeoutRef.current = setTimeout( () => {
        getIpcApi().updateSitesSortOrder( updates );
    }, DEBOUNCE_SAVE_MS );
}, [] );