From 39b0bc02c4f8cc9a24cd84a0c2abb0aab8733caf Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 21 Jan 2026 11:06:44 +0100
Subject: [PATCH 01/22] Add dragHandle icon to the menu item

---
 src/components/site-menu.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
index 542a317f03..657a8d56a7 100644
--- a/src/components/site-menu.tsx
+++ b/src/components/site-menu.tsx
@@ -2,6 +2,7 @@ import * as Sentry from '@sentry/electron/renderer';
 import { speak } from '@wordpress/a11y';
 import { Spinner } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
+import { Icon, dragHandle } from '@wordpress/icons';
 import { useEffect } from 'react';
 import { XDebugIcon } from 'src/components/icons/xdebug-icon';
 import { Tooltip } from 'src/components/tooltip';
@@ -184,12 +185,13 @@ function SiteItem( { site }: { site: SiteDetails } ) {
 	return (
 		<li
 			className={ cx(
-				'flex flex-row min-w-[168px] h-8 hover:bg-[#ffffff0C] rounded transition-all ms-1',
+				'flex flex-row min-w-[168px] h-8 hover:bg-[#ffffff0C] rounded transition-all ms-1 items-center',
 				isMac() ? 'me-5' : 'me-4',
 				isSelected && 'bg-[#ffffff19] hover:bg-[#ffffff19]'
 			) }
 			onContextMenu={ handleContextMenu }
 		>
+			<Icon icon={ dragHandle } className="fill-white" />
 			<button
 				className="p-2 text-xs rounded-tl rounded-bl whitespace-nowrap overflow-hidden text-ellipsis w-full text-left rtl:text-right focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-a8c-blue-50"
 				onClick={ () => {

From 1da00c73353d6be59577454639712d85c71aec71 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 21 Jan 2026 11:34:32 +0100
Subject: [PATCH 02/22] Add drag and drop handler functions

---
 src/components/site-menu.tsx | 83 ++++++++++++++++++++++++++++++++++--
 1 file changed, 79 insertions(+), 4 deletions(-)

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
index 657a8d56a7..4524c7e8b7 100644
--- a/src/components/site-menu.tsx
+++ b/src/components/site-menu.tsx
@@ -3,7 +3,7 @@ import { speak } from '@wordpress/a11y';
 import { Spinner } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, dragHandle } from '@wordpress/icons';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { XDebugIcon } from 'src/components/icons/xdebug-icon';
 import { Tooltip } from 'src/components/tooltip';
 import { useSyncSites } from 'src/hooks/sync-sites';
@@ -133,7 +133,19 @@ function ButtonToRun( {
 		</Tooltip>
 	);
 }
-function SiteItem( { site }: { site: SiteDetails } ) {
+function SiteItem( {
+	site,
+	onDragStart,
+	onDragOver,
+	onDrop,
+	onDragEnd,
+}: {
+	site: SiteDetails;
+	onDragStart: ( e: React.DragEvent, site: SiteDetails ) => void;
+	onDragOver: ( e: React.DragEvent ) => void;
+	onDrop: ( e: React.DragEvent, site: SiteDetails ) => void;
+	onDragEnd: () => void;
+} ) {
 	const { selectedSite, setSelectedSiteId, loadingServer, isSiteDeleting } = useSiteDetails();
 	const isSelected = site === selectedSite;
 	const { isSiteImporting, isSiteExporting } = useImportExport();
@@ -190,6 +202,11 @@ function SiteItem( { site }: { site: SiteDetails } ) {
 				isSelected && 'bg-[#ffffff19] hover:bg-[#ffffff19]'
 			) }
 			onContextMenu={ handleContextMenu }
+			draggable
+			onDragStart={ ( e ) => onDragStart( e, site ) }
+			onDragOver={ onDragOver }
+			onDrop={ ( e ) => onDrop( e, site ) }
+			onDragEnd={ onDragEnd }
 		>
 			<Icon icon={ dragHandle } className="fill-white" />
 			<button
@@ -219,6 +236,57 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 	const { setSelectedTab } = useContentTabs();
 	const { handleDeleteSite } = useDeleteSite();
 	const { data: editor } = useGetUserEditorQuery();
+	const [ draggedSite, setDraggedSite ] = useState< SiteDetails | null >( null );
+	const [ localSites, setLocalSites ] = useState< SiteDetails[] >( sites );
+
+	useEffect( () => {
+		setLocalSites( sites );
+	}, [ sites ] );
+
+	const handleDragStart = ( e: React.DragEvent, site: SiteDetails ) => {
+		setDraggedSite( site );
+		e.dataTransfer.effectAllowed = 'move';
+	};
+
+	const handleDragOver = ( e: React.DragEvent ) => {
+		e.preventDefault();
+		e.dataTransfer.dropEffect = 'move';
+	};
+
+	const handleDrop = ( e: React.DragEvent, targetSite: SiteDetails ) => {
+		e.preventDefault();
+		if ( ! draggedSite || draggedSite.id === targetSite.id ) {
+			return;
+		}
+
+		const draggedIndex = localSites.findIndex( ( site ) => site.id === draggedSite.id );
+		const targetIndex = localSites.findIndex( ( site ) => site.id === targetSite.id );
+
+		if ( draggedIndex === -1 || targetIndex === -1 ) {
+			return;
+		}
+
+		const newSites = [ ...localSites ];
+		newSites.splice( draggedIndex, 1 );
+		newSites.splice( targetIndex, 0, draggedSite );
+
+		setLocalSites( newSites );
+
+		// Persist the new order (assuming reorderSites will be added to useSiteDetails)
+		// For now, we'll update local state - the persistence logic would need to be added to the hook
+	};
+
+	const handleDragEnd = () => {
+		setDraggedSite( null );
+	};
+
+	// Persist the reordered sites when drag ends
+	useEffect( () => {
+		if ( draggedSite === null && localSites !== sites ) {
+			// TODO: Add persistence logic - call reorderSites or IPC method to save new order
+			// For now, this will only reorder locally
+		}
+	}, [ draggedSite, localSites, sites ] );
 
 	useEffect( () => {
 		const unsubscribe = window.ipcListener.subscribe(
@@ -308,8 +376,15 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 			) }
 		>
 			<ul className="pt-px">
-				{ sites.map( ( site ) => (
-					<SiteItem key={ site.id } site={ site } />
+				{ localSites.map( ( site ) => (
+					<SiteItem
+						key={ site.id }
+						site={ site }
+						onDragStart={ handleDragStart }
+						onDragOver={ handleDragOver }
+						onDrop={ handleDrop }
+						onDragEnd={ handleDragEnd }
+					/>
 				) ) }
 			</ul>
 		</nav>

From c27153cc598e880973fa0eb883fe806ca7eb5174 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 21 Jan 2026 11:42:50 +0100
Subject: [PATCH 03/22] fix: spinner position

---
 src/components/site-menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
index 4524c7e8b7..031d170b98 100644
--- a/src/components/site-menu.tsx
+++ b/src/components/site-menu.tsx
@@ -220,7 +220,7 @@ function SiteItem( {
 			{ showSpinner ? (
 				<Tooltip text={ tooltipText }>
 					<div className="grid place-items-center">
-						<Spinner className="!w-2.5 !h-2.5 !top-[6px] !mr-2 [&>circle]:stroke-a8c-gray-70" />
+						<Spinner className="!w-2.5 !h-2.5 !mt-0 !mr-2 [&>circle]:stroke-a8c-gray-70" />
 					</div>
 				</Tooltip>
 			) : (

From 153bf1f13580e6a4aec5ac8d938f3402e769f005 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 10:47:20 +0100
Subject: [PATCH 04/22] Add sortOrder field to StoppedSiteDetails type

---
 src/ipc-types.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ipc-types.d.ts b/src/ipc-types.d.ts
index 0cfc231cbb..46a398b09f 100644
--- a/src/ipc-types.d.ts
+++ b/src/ipc-types.d.ts
@@ -31,6 +31,7 @@ interface StoppedSiteDetails {
 	autoStart?: boolean;
 	latestCliPid?: number;
 	enableXdebug?: boolean;
+	sortOrder?: number;
 }
 
 interface StartedSiteDetails extends StoppedSiteDetails {

From e941b09c8d6efc1e7095a60dc81992e4efd3e27d Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 10:47:37 +0100
Subject: [PATCH 05/22] Update sortSites to prioritize sortOrder field over
 name

---
 common/lib/sort-sites.ts | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/common/lib/sort-sites.ts b/common/lib/sort-sites.ts
index 27aa26c94d..d1aa919909 100644
--- a/common/lib/sort-sites.ts
+++ b/common/lib/sort-sites.ts
@@ -1,3 +1,18 @@
-export function sortSites< T extends { name: string } >( sites: T[] ): T[] {
-	return sites.sort( ( a, b ) => a.name.localeCompare( b.name, undefined, { numeric: true } ) );
+export function sortSites< T extends { name: string; sortOrder?: number } >( sites: T[] ): T[] {
+	return sites.sort( ( a, b ) => {
+		// If both have sortOrder, sort by sortOrder
+		if ( a.sortOrder !== undefined && b.sortOrder !== undefined ) {
+			return a.sortOrder - b.sortOrder;
+		}
+		// If only a has sortOrder, a comes first
+		if ( a.sortOrder !== undefined ) {
+			return -1;
+		}
+		// If only b has sortOrder, b comes first
+		if ( b.sortOrder !== undefined ) {
+			return 1;
+		}
+		// Neither has sortOrder, sort by name
+		return a.name.localeCompare( b.name, undefined, { numeric: true } );
+	} );
 }

From a44acd00037ab1044d4372ad8c5ca6491bc0ceb4 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 10:48:16 +0100
Subject: [PATCH 06/22] Add updateSitesSortOrder IPC handler for persisting
 site order

---
 src/ipc-handlers.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/ipc-handlers.ts b/src/ipc-handlers.ts
index 2431f75d4a..775e38bd0b 100644
--- a/src/ipc-handlers.ts
+++ b/src/ipc-handlers.ts
@@ -1408,3 +1408,25 @@ export async function setWindowControlVisibility( event: IpcMainInvokeEvent, vis
 		parentWindow.setWindowButtonVisibility( visible );
 	}
 }
+
+export async function updateSitesSortOrder(
+	event: IpcMainInvokeEvent,
+	updates: { siteId: string; sortOrder: number }[]
+): Promise< void > {
+	try {
+		await lockAppdata();
+		const userData = await loadUserData();
+
+		const updatedSites = userData.sites.map( ( site ) => {
+			const update = updates.find( ( u ) => u.siteId === site.id );
+			if ( update ) {
+				return { ...site, sortOrder: update.sortOrder };
+			}
+			return site;
+		} );
+
+		await saveUserData( { ...userData, sites: updatedSites } );
+	} finally {
+		await unlockAppdata();
+	}
+}

From 8f68d7c5c6ead061e48f83370669728c9910102e Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 10:48:51 +0100
Subject: [PATCH 07/22] Persist site sort order after drag and drop in site
 menu

---
 src/components/site-menu.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
index 031d170b98..1486bc4298 100644
--- a/src/components/site-menu.tsx
+++ b/src/components/site-menu.tsx
@@ -283,8 +283,17 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 	// Persist the reordered sites when drag ends
 	useEffect( () => {
 		if ( draggedSite === null && localSites !== sites ) {
-			// TODO: Add persistence logic - call reorderSites or IPC method to save new order
-			// For now, this will only reorder locally
+			// Calculate sparse sortOrder values (1000, 2000, 3000...)
+			const updates = localSites.map( ( site, index ) => ( {
+				siteId: site.id,
+				sortOrder: ( index + 1 ) * 1000,
+			} ) );
+
+			getIpcApi()
+				.updateSitesSortOrder( updates )
+				.catch( ( error ) => {
+					console.error( 'Failed to save site order:', error );
+				} );
 		}
 	}, [ draggedSite, localSites, sites ] );
 

From 2f2ff0dcbc831362e01c1122bf7c86ae627e9295 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 10:52:07 +0100
Subject: [PATCH 08/22] Expose updateSitesSortOrder in preload script

---
 src/preload.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/preload.ts b/src/preload.ts
index ab6f4e37b3..9813878649 100644
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -148,6 +148,7 @@ const api: IpcApi = {
 	showSiteContextMenu: ( context ) => ipcRendererSend( 'showSiteContextMenu', context ),
 	setWindowControlVisibility: ( visible ) =>
 		ipcRendererInvoke( 'setWindowControlVisibility', visible ),
+	updateSitesSortOrder: ( updates ) => ipcRendererInvoke( 'updateSitesSortOrder', updates ),
 	isStudioCliInstalled: () => ipcRendererInvoke( 'isStudioCliInstalled' ),
 	installStudioCli: () => ipcRendererInvoke( 'installStudioCli' ),
 	uninstallStudioCli: () => ipcRendererInvoke( 'uninstallStudioCli' ),

From f52d28c9790e7ce51f24bdb50bae523cf7dd4a17 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 10:52:42 +0100
Subject: [PATCH 09/22] Add tests for sortOrder sorting functionality

---
 common/lib/tests/sort-sites.test.ts | 55 +++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/common/lib/tests/sort-sites.test.ts b/common/lib/tests/sort-sites.test.ts
index 3d41b2d470..e73e7cf7f7 100644
--- a/common/lib/tests/sort-sites.test.ts
+++ b/common/lib/tests/sort-sites.test.ts
@@ -20,4 +20,59 @@ describe( 'sortSites', () => {
 			'Tristan',
 		] );
 	} );
+
+	it( 'should sort sites by sortOrder when available', () => {
+		const sites = [
+			{ name: 'Charlie', sortOrder: 3000 },
+			{ name: 'Alpha', sortOrder: 1000 },
+			{ name: 'Bravo', sortOrder: 2000 },
+		] as SiteDetails[];
+
+		const sortedSites = sortSites( sites );
+
+		expect( sortedSites.map( ( site ) => site.name ) ).toEqual( [ 'Alpha', 'Bravo', 'Charlie' ] );
+	} );
+
+	it( 'should prioritize sortOrder over name', () => {
+		const sites = [
+			{ name: 'Zebra', sortOrder: 1000 },
+			{ name: 'Apple', sortOrder: 2000 },
+		] as SiteDetails[];
+
+		const sortedSites = sortSites( sites );
+
+		expect( sortedSites.map( ( site ) => site.name ) ).toEqual( [ 'Zebra', 'Apple' ] );
+	} );
+
+	it( 'should sort sites with sortOrder before sites without sortOrder', () => {
+		const sites = [
+			{ name: 'Zebra' },
+			{ name: 'Apple', sortOrder: 1000 },
+			{ name: 'Beta' },
+		] as SiteDetails[];
+
+		const sortedSites = sortSites( sites );
+
+		expect( sortedSites.map( ( site ) => site.name ) ).toEqual( [ 'Apple', 'Beta', 'Zebra' ] );
+	} );
+
+	it( 'should handle mixed sites with and without sortOrder', () => {
+		const sites = [
+			{ name: 'Zulu', sortOrder: 3000 },
+			{ name: 'Charlie' },
+			{ name: 'Alpha', sortOrder: 1000 },
+			{ name: 'Bravo' },
+			{ name: 'Beta', sortOrder: 2000 },
+		] as SiteDetails[];
+
+		const sortedSites = sortSites( sites );
+
+		expect( sortedSites.map( ( site ) => site.name ) ).toEqual( [
+			'Alpha',
+			'Beta',
+			'Zulu',
+			'Bravo',
+			'Charlie',
+		] );
+	} );
 } );

From fd254fbee390f83a6346208d495687743b8c6df7 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 10:58:48 +0100
Subject: [PATCH 10/22] Move sort order persistence from useEffect to
 handleDrop

---
 src/components/site-menu.tsx | 30 +++++++++++-------------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
index 1486bc4298..dc140086b4 100644
--- a/src/components/site-menu.tsx
+++ b/src/components/site-menu.tsx
@@ -272,31 +272,23 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 
 		setLocalSites( newSites );
 
-		// Persist the new order (assuming reorderSites will be added to useSiteDetails)
-		// For now, we'll update local state - the persistence logic would need to be added to the hook
+		// Persist the new order immediately
+		const updates = newSites.map( ( site, index ) => ( {
+			siteId: site.id,
+			sortOrder: ( index + 1 ) * 1000,
+		} ) );
+
+		getIpcApi()
+			.updateSitesSortOrder( updates )
+			.catch( ( error ) => {
+				console.error( 'Failed to save site order:', error );
+			} );
 	};
 
 	const handleDragEnd = () => {
 		setDraggedSite( null );
 	};
 
-	// Persist the reordered sites when drag ends
-	useEffect( () => {
-		if ( draggedSite === null && localSites !== sites ) {
-			// Calculate sparse sortOrder values (1000, 2000, 3000...)
-			const updates = localSites.map( ( site, index ) => ( {
-				siteId: site.id,
-				sortOrder: ( index + 1 ) * 1000,
-			} ) );
-
-			getIpcApi()
-				.updateSitesSortOrder( updates )
-				.catch( ( error ) => {
-					console.error( 'Failed to save site order:', error );
-				} );
-		}
-	}, [ draggedSite, localSites, sites ] );
-
 	useEffect( () => {
 		const unsubscribe = window.ipcListener.subscribe(
 			'site-context-menu-action',

From ccb2e5cfb59e59d4fb4369c33734800dbd0f9fd4 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 11:08:06 +0100
Subject: [PATCH 11/22] Add sortOrder to toDiskFormat to persist sort order to
 disk

---
 src/storage/user-data.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/storage/user-data.ts b/src/storage/user-data.ts
index da35a653a2..b4596eee22 100644
--- a/src/storage/user-data.ts
+++ b/src/storage/user-data.ts
@@ -167,6 +167,7 @@ function toDiskFormat( { sites, ...rest }: UserData ): PersistedUserData {
 				autoStart,
 				latestCliPid,
 				enableXdebug,
+				sortOrder,
 			} ) => {
 				// No object spreading allowed. TypeScript's structural typing is too permissive and
 				// will permit us to persist properties that aren't in the type definition.
@@ -184,6 +185,7 @@ function toDiskFormat( { sites, ...rest }: UserData ): PersistedUserData {
 					autoStart,
 					latestCliPid,
 					enableXdebug,
+					sortOrder,
 					themeDetails: {
 						name: themeDetails?.name || '',
 						path: themeDetails?.path || '',

From ff01410bb34922280105d304bb08abb9116e508a Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 11:12:03 +0100
Subject: [PATCH 12/22] fix: remove duplicate tests

---
 common/lib/tests/sort-sites.test.ts | 23 -----------------------
 1 file changed, 23 deletions(-)

diff --git a/common/lib/tests/sort-sites.test.ts b/common/lib/tests/sort-sites.test.ts
index e73e7cf7f7..231fa05191 100644
--- a/common/lib/tests/sort-sites.test.ts
+++ b/common/lib/tests/sort-sites.test.ts
@@ -34,29 +34,6 @@ describe( 'sortSites', () => {
 	} );
 
 	it( 'should prioritize sortOrder over name', () => {
-		const sites = [
-			{ name: 'Zebra', sortOrder: 1000 },
-			{ name: 'Apple', sortOrder: 2000 },
-		] as SiteDetails[];
-
-		const sortedSites = sortSites( sites );
-
-		expect( sortedSites.map( ( site ) => site.name ) ).toEqual( [ 'Zebra', 'Apple' ] );
-	} );
-
-	it( 'should sort sites with sortOrder before sites without sortOrder', () => {
-		const sites = [
-			{ name: 'Zebra' },
-			{ name: 'Apple', sortOrder: 1000 },
-			{ name: 'Beta' },
-		] as SiteDetails[];
-
-		const sortedSites = sortSites( sites );
-
-		expect( sortedSites.map( ( site ) => site.name ) ).toEqual( [ 'Apple', 'Beta', 'Zebra' ] );
-	} );
-
-	it( 'should handle mixed sites with and without sortOrder', () => {
 		const sites = [
 			{ name: 'Zulu', sortOrder: 3000 },
 			{ name: 'Charlie' },

From 1e1d7066c4b259e43b458b26d449bef89df5f955 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 11:55:27 +0100
Subject: [PATCH 13/22] Add reorderSites to context for automatic site refresh
 after reorder

---
 src/components/site-menu.tsx   | 19 ++++++++++++-------
 src/hooks/use-site-details.tsx | 10 ++++++++++
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
index dc140086b4..2f5d40c7f3 100644
--- a/src/components/site-menu.tsx
+++ b/src/components/site-menu.tsx
@@ -231,8 +231,15 @@ function SiteItem( {
 }
 
 export default function SiteMenu( { className }: SiteMenuProps ) {
-	const { sites, selectedSite, setSelectedSiteId, startServer, stopServer, setIsEditModalOpen } =
-		useSiteDetails();
+	const {
+		sites,
+		selectedSite,
+		setSelectedSiteId,
+		startServer,
+		stopServer,
+		setIsEditModalOpen,
+		reorderSites,
+	} = useSiteDetails();
 	const { setSelectedTab } = useContentTabs();
 	const { handleDeleteSite } = useDeleteSite();
 	const { data: editor } = useGetUserEditorQuery();
@@ -278,11 +285,9 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 			sortOrder: ( index + 1 ) * 1000,
 		} ) );
 
-		getIpcApi()
-			.updateSitesSortOrder( updates )
-			.catch( ( error ) => {
-				console.error( 'Failed to save site order:', error );
-			} );
+		reorderSites( updates ).catch( ( error ) => {
+			console.error( 'Failed to save site order:', error );
+		} );
 	};
 
 	const handleDragEnd = () => {
diff --git a/src/hooks/use-site-details.tsx b/src/hooks/use-site-details.tsx
index f21c0b3bbe..48d0244d90 100644
--- a/src/hooks/use-site-details.tsx
+++ b/src/hooks/use-site-details.tsx
@@ -23,6 +23,7 @@ import type { Blueprint } from 'src/stores/wpcom-api';
 interface SiteDetailsContext {
 	selectedSite: SiteDetails | null;
 	updateSite: ( site: SiteDetails, wpVersion?: string ) => Promise< void >;
+	reorderSites: ( updates: { siteId: string; sortOrder: number }[] ) => Promise< void >;
 	sites: SiteDetails[];
 	setSelectedSiteId: ( selectedSiteId: string ) => void;
 	createSite: (
@@ -54,6 +55,7 @@ interface SiteDetailsContext {
 const defaultContext: SiteDetailsContext = {
 	selectedSite: null,
 	updateSite: async () => undefined,
+	reorderSites: async () => undefined,
 	sites: [],
 	siteCreationMessages: {},
 	setSelectedSiteId: () => undefined,
@@ -392,6 +394,12 @@ export function SiteDetailsProvider( { children }: SiteDetailsProviderProps ) {
 		setSites( updatedSites );
 	}, [] );
 
+	const reorderSites = useCallback( async ( updates: { siteId: string; sortOrder: number }[] ) => {
+		await getIpcApi().updateSitesSortOrder( updates );
+		const updatedSites = await getIpcApi().getSiteDetails();
+		setSites( updatedSites );
+	}, [] );
+
 	const startServer = useCallback(
 		async ( id: string ) => {
 			toggleLoadingServerForSite( id );
@@ -518,6 +526,7 @@ export function SiteDetailsProvider( { children }: SiteDetailsProviderProps ) {
 			setSelectedSiteId,
 			createSite,
 			updateSite,
+			reorderSites,
 			startServer,
 			stopServer,
 			stopAllRunningSites,
@@ -538,6 +547,7 @@ export function SiteDetailsProvider( { children }: SiteDetailsProviderProps ) {
 			setSelectedSiteId,
 			createSite,
 			updateSite,
+			reorderSites,
 			startServer,
 			stopServer,
 			stopAllRunningSites,

From ab15f0470a8da725c427cbdda535592ef48886d8 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 15:03:55 +0100
Subject: [PATCH 14/22] fix: remove local state

---
 src/components/site-menu.tsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
index 2f5d40c7f3..1fb58fbb86 100644
--- a/src/components/site-menu.tsx
+++ b/src/components/site-menu.tsx
@@ -244,11 +244,6 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 	const { handleDeleteSite } = useDeleteSite();
 	const { data: editor } = useGetUserEditorQuery();
 	const [ draggedSite, setDraggedSite ] = useState< SiteDetails | null >( null );
-	const [ localSites, setLocalSites ] = useState< SiteDetails[] >( sites );
-
-	useEffect( () => {
-		setLocalSites( sites );
-	}, [ sites ] );
 
 	const handleDragStart = ( e: React.DragEvent, site: SiteDetails ) => {
 		setDraggedSite( site );
@@ -266,19 +261,17 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 			return;
 		}
 
-		const draggedIndex = localSites.findIndex( ( site ) => site.id === draggedSite.id );
-		const targetIndex = localSites.findIndex( ( site ) => site.id === targetSite.id );
+		const draggedIndex = sites.findIndex( ( site ) => site.id === draggedSite.id );
+		const targetIndex = sites.findIndex( ( site ) => site.id === targetSite.id );
 
 		if ( draggedIndex === -1 || targetIndex === -1 ) {
 			return;
 		}
 
-		const newSites = [ ...localSites ];
+		const newSites = [ ...sites ];
 		newSites.splice( draggedIndex, 1 );
 		newSites.splice( targetIndex, 0, draggedSite );
 
-		setLocalSites( newSites );
-
 		// Persist the new order immediately
 		const updates = newSites.map( ( site, index ) => ( {
 			siteId: site.id,
@@ -382,7 +375,7 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 			) }
 		>
 			<ul className="pt-px">
-				{ localSites.map( ( site ) => (
+				{ sites.map( ( site ) => (
 					<SiteItem
 						key={ site.id }
 						site={ site }

From 3589c66091bd74308729001a3fb5991984739a51 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 15:05:53 +0100
Subject: [PATCH 15/22] Add drop zone at bottom of list for dragging to end

---
 src/components/site-menu.tsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
index 1fb58fbb86..732424a47e 100644
--- a/src/components/site-menu.tsx
+++ b/src/components/site-menu.tsx
@@ -385,6 +385,37 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 						onDragEnd={ handleDragEnd }
 					/>
 				) ) }
+				{ /* Drop zone for dragging to bottom of list */ }
+				<li
+					className="min-h-[8px]"
+					onDragOver={ handleDragOver }
+					onDrop={ ( e ) => {
+						e.preventDefault();
+						if ( ! draggedSite ) {
+							return;
+						}
+
+						const draggedIndex = sites.findIndex( ( site ) => site.id === draggedSite.id );
+						if ( draggedIndex === -1 ) {
+							return;
+						}
+
+						// Move dragged site to end
+						const newSites = [ ...sites ];
+						newSites.splice( draggedIndex, 1 );
+						newSites.push( draggedSite );
+
+						// Persist the new order
+						const updates = newSites.map( ( site, index ) => ( {
+							siteId: site.id,
+							sortOrder: ( index + 1 ) * 1000,
+						} ) );
+
+						reorderSites( updates ).catch( ( error ) => {
+							console.error( 'Failed to save site order:', error );
+						} );
+					} }
+				/>
 			</ul>
 		</nav>
 	);

From 95e9adc6797c8209523f63279ae50c414e834b08 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 16:36:06 +0100
Subject: [PATCH 16/22] Increase drop zone height to match other items

---
 src/components/site-menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
index 732424a47e..a2144539af 100644
--- a/src/components/site-menu.tsx
+++ b/src/components/site-menu.tsx
@@ -387,7 +387,7 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 				) ) }
 				{ /* Drop zone for dragging to bottom of list */ }
 				<li
-					className="min-h-[8px]"
+					className="min-h-[168px]"
 					onDragOver={ handleDragOver }
 					onDrop={ ( e ) => {
 						e.preventDefault();

From d0b56ad568aa9b23ccc70c3c8c4ec0ebcb5b8dd4 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 16:37:08 +0100
Subject: [PATCH 17/22] Fix drop zone height to h-8

---
 src/components/site-menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
index a2144539af..ca0e3fe704 100644
--- a/src/components/site-menu.tsx
+++ b/src/components/site-menu.tsx
@@ -387,7 +387,7 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 				) ) }
 				{ /* Drop zone for dragging to bottom of list */ }
 				<li
-					className="min-h-[168px]"
+					className="h-8"
 					onDragOver={ handleDragOver }
 					onDrop={ ( e ) => {
 						e.preventDefault();

From 81495e89ba45b7b5b8e4938f1f4bdd54b64db042 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 16:52:32 +0100
Subject: [PATCH 18/22] Add hover effect when dragging over site items

---
 src/components/site-menu.tsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
index ca0e3fe704..dadd8e57db 100644
--- a/src/components/site-menu.tsx
+++ b/src/components/site-menu.tsx
@@ -139,12 +139,14 @@ function SiteItem( {
 	onDragOver,
 	onDrop,
 	onDragEnd,
+	isDragOver,
 }: {
 	site: SiteDetails;
 	onDragStart: ( e: React.DragEvent, site: SiteDetails ) => void;
-	onDragOver: ( e: React.DragEvent ) => void;
+	onDragOver: ( e: React.DragEvent, site: SiteDetails ) => void;
 	onDrop: ( e: React.DragEvent, site: SiteDetails ) => void;
 	onDragEnd: () => void;
+	isDragOver: boolean;
 } ) {
 	const { selectedSite, setSelectedSiteId, loadingServer, isSiteDeleting } = useSiteDetails();
 	const isSelected = site === selectedSite;
@@ -199,12 +201,13 @@ function SiteItem( {
 			className={ cx(
 				'flex flex-row min-w-[168px] h-8 hover:bg-[#ffffff0C] rounded transition-all ms-1 items-center',
 				isMac() ? 'me-5' : 'me-4',
-				isSelected && 'bg-[#ffffff19] hover:bg-[#ffffff19]'
+				isSelected && 'bg-[#ffffff19] hover:bg-[#ffffff19]',
+				isDragOver && 'bg-[#ffffff26]'
 			) }
 			onContextMenu={ handleContextMenu }
 			draggable
 			onDragStart={ ( e ) => onDragStart( e, site ) }
-			onDragOver={ onDragOver }
+			onDragOver={ ( e ) => onDragOver( e, site ) }
 			onDrop={ ( e ) => onDrop( e, site ) }
 			onDragEnd={ onDragEnd }
 		>
@@ -244,19 +247,24 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 	const { handleDeleteSite } = useDeleteSite();
 	const { data: editor } = useGetUserEditorQuery();
 	const [ draggedSite, setDraggedSite ] = useState< SiteDetails | null >( null );
+	const [ dragOverSiteId, setDragOverSiteId ] = useState< string | null >( null );
 
 	const handleDragStart = ( e: React.DragEvent, site: SiteDetails ) => {
 		setDraggedSite( site );
 		e.dataTransfer.effectAllowed = 'move';
 	};
 
-	const handleDragOver = ( e: React.DragEvent ) => {
+	const handleDragOver = ( e: React.DragEvent, site: SiteDetails ) => {
 		e.preventDefault();
 		e.dataTransfer.dropEffect = 'move';
+		if ( draggedSite && draggedSite.id !== site.id ) {
+			setDragOverSiteId( site.id );
+		}
 	};
 
 	const handleDrop = ( e: React.DragEvent, targetSite: SiteDetails ) => {
 		e.preventDefault();
+		setDragOverSiteId( null );
 		if ( ! draggedSite || draggedSite.id === targetSite.id ) {
 			return;
 		}
@@ -285,6 +293,7 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 
 	const handleDragEnd = () => {
 		setDraggedSite( null );
+		setDragOverSiteId( null );
 	};
 
 	useEffect( () => {
@@ -383,14 +392,19 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 						onDragOver={ handleDragOver }
 						onDrop={ handleDrop }
 						onDragEnd={ handleDragEnd }
+						isDragOver={ dragOverSiteId === site.id }
 					/>
 				) ) }
 				{ /* Drop zone for dragging to bottom of list */ }
 				<li
 					className="h-8"
-					onDragOver={ handleDragOver }
+					onDragOver={ ( e ) => {
+						e.preventDefault();
+						e.dataTransfer.dropEffect = 'move';
+					} }
 					onDrop={ ( e ) => {
 						e.preventDefault();
+						setDragOverSiteId( null );
 						if ( ! draggedSite ) {
 							return;
 						}

From 5890e9fac8ff450ded64f48d1d8dc5f48ac54ad7 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Wed, 28 Jan 2026 19:24:03 +0100
Subject: [PATCH 19/22] Extract common reorder logic into helper function

---
 src/components/site-menu.tsx | 31 +++++++++++++------------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
index dadd8e57db..9bab339a31 100644
--- a/src/components/site-menu.tsx
+++ b/src/components/site-menu.tsx
@@ -262,6 +262,17 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 		}
 	};
 
+	const reorderSitesToNewPositions = ( newSites: SiteDetails[] ) => {
+		const updates = newSites.map( ( site, index ) => ( {
+			siteId: site.id,
+			sortOrder: ( index + 1 ) * 1000,
+		} ) );
+
+		reorderSites( updates ).catch( ( error ) => {
+			console.error( 'Failed to save site order:', error );
+		} );
+	};
+
 	const handleDrop = ( e: React.DragEvent, targetSite: SiteDetails ) => {
 		e.preventDefault();
 		setDragOverSiteId( null );
@@ -280,15 +291,7 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 		newSites.splice( draggedIndex, 1 );
 		newSites.splice( targetIndex, 0, draggedSite );
 
-		// Persist the new order immediately
-		const updates = newSites.map( ( site, index ) => ( {
-			siteId: site.id,
-			sortOrder: ( index + 1 ) * 1000,
-		} ) );
-
-		reorderSites( updates ).catch( ( error ) => {
-			console.error( 'Failed to save site order:', error );
-		} );
+		reorderSitesToNewPositions( newSites );
 	};
 
 	const handleDragEnd = () => {
@@ -419,15 +422,7 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 						newSites.splice( draggedIndex, 1 );
 						newSites.push( draggedSite );
 
-						// Persist the new order
-						const updates = newSites.map( ( site, index ) => ( {
-							siteId: site.id,
-							sortOrder: ( index + 1 ) * 1000,
-						} ) );
-
-						reorderSites( updates ).catch( ( error ) => {
-							console.error( 'Failed to save site order:', error );
-						} );
+						reorderSitesToNewPositions( newSites );
 					} }
 				/>
 			</ul>

From 97d06c84353fe902803bf274f21762d489fd9de4 Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Thu, 29 Jan 2026 10:14:11 +0100
Subject: [PATCH 20/22] fix: simplify drag/drop logic

---
 src/components/site-menu.tsx | 88 ++++++++++++++++--------------------
 1 file changed, 38 insertions(+), 50 deletions(-)

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
index 9bab339a31..4b65d573a0 100644
--- a/src/components/site-menu.tsx
+++ b/src/components/site-menu.tsx
@@ -47,6 +47,7 @@ function ButtonToRun( {
 	const classCircle = `rounded-full`;
 	const triangle = (
 		<svg
+			aria-hidden="true"
 			width="8"
 			height="10"
 			viewBox="0 0 8 10"
@@ -64,7 +65,14 @@ function ButtonToRun( {
 	);
 
 	const rectangle = (
-		<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<svg
+			aria-hidden="true"
+			width="10"
+			height="10"
+			viewBox="0 0 10 10"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
 			<path
 				d="M0.25 2C0.25 1.0335 1.0335 0.25 2 0.25H8C8.9665 0.25 9.75 1.0335 9.75 2V8C9.75 8.9665 8.9665 9.75 8 9.75H2C1.0335 9.75 0.25 8.9665 0.25 8V2Z"
 				fill="#FF8085"
@@ -83,6 +91,7 @@ function ButtonToRun( {
 	return (
 		<Tooltip text={ tooltipText }>
 			<button
+				type="button"
 				aria-disabled={ loadingServer[ id ] }
 				onClick={ () => {
 					if ( loadingServer[ id ] ) {
@@ -135,6 +144,7 @@ function ButtonToRun( {
 }
 function SiteItem( {
 	site,
+	index,
 	onDragStart,
 	onDragOver,
 	onDrop,
@@ -142,9 +152,10 @@ function SiteItem( {
 	isDragOver,
 }: {
 	site: SiteDetails;
-	onDragStart: ( e: React.DragEvent, site: SiteDetails ) => void;
-	onDragOver: ( e: React.DragEvent, site: SiteDetails ) => void;
-	onDrop: ( e: React.DragEvent, site: SiteDetails ) => void;
+	index: number;
+	onDragStart: ( e: React.DragEvent, index: number ) => void;
+	onDragOver: ( e: React.DragEvent, index: number ) => void;
+	onDrop: ( e: React.DragEvent, index: number ) => void;
 	onDragEnd: () => void;
 	isDragOver: boolean;
 } ) {
@@ -163,7 +174,7 @@ function SiteItem( {
 	const showSpinner =
 		site.isAddingSite || isImporting || isPulling || isPushing || isExporting || isDeleting;
 
-	let tooltipText;
+	let tooltipText: string;
 	if ( site.isAddingSite ) {
 		tooltipText = __( 'Adding' );
 	} else if ( isImporting ) {
@@ -206,13 +217,14 @@ function SiteItem( {
 			) }
 			onContextMenu={ handleContextMenu }
 			draggable
-			onDragStart={ ( e ) => onDragStart( e, site ) }
-			onDragOver={ ( e ) => onDragOver( e, site ) }
-			onDrop={ ( e ) => onDrop( e, site ) }
+			onDragStart={ ( e ) => onDragStart( e, index ) }
+			onDragOver={ ( e ) => onDragOver( e, index ) }
+			onDrop={ ( e ) => onDrop( e, index ) }
 			onDragEnd={ onDragEnd }
 		>
 			<Icon icon={ dragHandle } className="fill-white" />
 			<button
+				type="button"
 				className="p-2 text-xs rounded-tl rounded-bl whitespace-nowrap overflow-hidden text-ellipsis w-full text-left rtl:text-right focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-a8c-blue-50"
 				onClick={ () => {
 					setSelectedSiteId( site.id );
@@ -246,19 +258,19 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 	const { setSelectedTab } = useContentTabs();
 	const { handleDeleteSite } = useDeleteSite();
 	const { data: editor } = useGetUserEditorQuery();
-	const [ draggedSite, setDraggedSite ] = useState< SiteDetails | null >( null );
-	const [ dragOverSiteId, setDragOverSiteId ] = useState< string | null >( null );
+	const [ draggedIndex, setDraggedIndex ] = useState< number | null >( null );
+	const [ dragOverIndex, setDragOverIndex ] = useState< number | null >( null );
 
-	const handleDragStart = ( e: React.DragEvent, site: SiteDetails ) => {
-		setDraggedSite( site );
+	const handleDragStart = ( e: React.DragEvent, index: number ) => {
+		setDraggedIndex( index );
 		e.dataTransfer.effectAllowed = 'move';
 	};
 
-	const handleDragOver = ( e: React.DragEvent, site: SiteDetails ) => {
+	const handleDragOver = ( e: React.DragEvent, index: number ) => {
 		e.preventDefault();
 		e.dataTransfer.dropEffect = 'move';
-		if ( draggedSite && draggedSite.id !== site.id ) {
-			setDragOverSiteId( site.id );
+		if ( draggedIndex !== null && draggedIndex !== index ) {
+			setDragOverIndex( index );
 		}
 	};
 
@@ -273,30 +285,23 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 		} );
 	};
 
-	const handleDrop = ( e: React.DragEvent, targetSite: SiteDetails ) => {
+	const handleDrop = ( e: React.DragEvent, targetIndex: number ) => {
 		e.preventDefault();
-		setDragOverSiteId( null );
-		if ( ! draggedSite || draggedSite.id === targetSite.id ) {
-			return;
-		}
-
-		const draggedIndex = sites.findIndex( ( site ) => site.id === draggedSite.id );
-		const targetIndex = sites.findIndex( ( site ) => site.id === targetSite.id );
-
-		if ( draggedIndex === -1 || targetIndex === -1 ) {
+		setDragOverIndex( null );
+		if ( draggedIndex === null || draggedIndex === targetIndex ) {
 			return;
 		}
 
 		const newSites = [ ...sites ];
-		newSites.splice( draggedIndex, 1 );
-		newSites.splice( targetIndex, 0, draggedSite );
+		const [ movedSite ] = newSites.splice( draggedIndex, 1 );
+		newSites.splice( targetIndex, 0, movedSite );
 
 		reorderSitesToNewPositions( newSites );
 	};
 
 	const handleDragEnd = () => {
-		setDraggedSite( null );
-		setDragOverSiteId( null );
+		setDraggedIndex( null );
+		setDragOverIndex( null );
 	};
 
 	useEffect( () => {
@@ -387,15 +392,16 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 			) }
 		>
 			<ul className="pt-px">
-				{ sites.map( ( site ) => (
+				{ sites.map( ( site, index ) => (
 					<SiteItem
 						key={ site.id }
 						site={ site }
+						index={ index }
 						onDragStart={ handleDragStart }
 						onDragOver={ handleDragOver }
 						onDrop={ handleDrop }
 						onDragEnd={ handleDragEnd }
-						isDragOver={ dragOverSiteId === site.id }
+						isDragOver={ dragOverIndex === index }
 					/>
 				) ) }
 				{ /* Drop zone for dragging to bottom of list */ }
@@ -405,25 +411,7 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 						e.preventDefault();
 						e.dataTransfer.dropEffect = 'move';
 					} }
-					onDrop={ ( e ) => {
-						e.preventDefault();
-						setDragOverSiteId( null );
-						if ( ! draggedSite ) {
-							return;
-						}
-
-						const draggedIndex = sites.findIndex( ( site ) => site.id === draggedSite.id );
-						if ( draggedIndex === -1 ) {
-							return;
-						}
-
-						// Move dragged site to end
-						const newSites = [ ...sites ];
-						newSites.splice( draggedIndex, 1 );
-						newSites.push( draggedSite );
-
-						reorderSitesToNewPositions( newSites );
-					} }
+					onDrop={ ( e ) => handleDrop( e, sites.length ) }
 				/>
 			</ul>
 		</nav>

From 7ce988d5c69b41e1ab5c7eaedbe0024364adcdbf Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Thu, 29 Jan 2026 10:36:01 +0100
Subject: [PATCH 21/22] fix: reuse handleDragOver

---
 src/components/site-menu.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/site-menu.tsx b/src/components/site-menu.tsx
index 4b65d573a0..76d0164746 100644
--- a/src/components/site-menu.tsx
+++ b/src/components/site-menu.tsx
@@ -407,10 +407,7 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 				{ /* Drop zone for dragging to bottom of list */ }
 				<li
 					className="h-8"
-					onDragOver={ ( e ) => {
-						e.preventDefault();
-						e.dataTransfer.dropEffect = 'move';
-					} }
+					onDragOver={ ( e ) => handleDragOver( e, sites.length ) }
 					onDrop={ ( e ) => handleDrop( e, sites.length ) }
 				/>
 			</ul>

From 74f9866f46413f7498dbe2435be537453f08c74c Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mika.andrianarijaona@busbud.com>
Date: Thu, 29 Jan 2026 16:42:52 +0100
Subject: [PATCH 22/22] Fix duplicate site entry when dragging a site being
 added

---
 src/hooks/use-site-details.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/use-site-details.tsx b/src/hooks/use-site-details.tsx
index 48d0244d90..81d7ed8df2 100644
--- a/src/hooks/use-site-details.tsx
+++ b/src/hooks/use-site-details.tsx
@@ -357,7 +357,7 @@ export function SiteDetailsProvider( { children }: SiteDetailsProviderProps ) {
 				} );
 				setSites( ( prevData ) =>
 					sortSites( [
-						...prevData.filter( ( site ) => site.id !== tempSiteId ),
+						...prevData.filter( ( site ) => site.id !== tempSiteId && site.id !== newSite.id ),
 						{ ...newSite, isAddingSite: true },
 					] )
 				);