🐛 Reordering corrupting important list order

When re-ordering the updated order was based on the
currently rendered todos. This meant that when
a subset of star roles were active the updated
order would only include those and therefore lose
all the other important todos from other star
roles.

The fix was to lookup the index of the todo in the
complete important list order and update based on
those indices rather than the ones emitted on the
event based on the currently rendered todos.

components/pages/Home.tsx

@@ -555,20 +555,20 @@ export const Log = ({ limit }: { limit: number }) => {
 
 export const Important = () => {
 	const { inActiveStarRoles, query } = useView()
+	const importantList = useLiveQuery(() => db.lists.get('#important'))
 	const todos = useLiveQuery(async () => {
 		console.debug('re-running important query')
-		const importantList = await db.lists.get('#important')
 		return (await db.todos.bulkGet(importantList?.order || [])).filter(
 			todo => matchesQuery(query, todo!) && inActiveStarRoles(todo!),
 		) as Todo[]
-	}, [inActiveStarRoles, query])
+	}, [importantList, inActiveStarRoles, query])
 
 	const [present] = useTodoActionSheet()
 
 	return (
 		<>
 			<h1>Important</h1>
-			{todos === undefined ? (
+			{importantList === undefined || todos === undefined ? (
 				<IonSpinner
 					className="w-20 h-20"
 					name="dots"
@@ -582,11 +582,16 @@ export const Important = () => {
 							// Instead we re-order right away, calculate the new order ourselves, and update the DB.
 							event.detail.complete()
 
-							const todoIds = [...todos.map(i => i.id)]
+							const fromIndex = importantList.order.indexOf(
+								todos[event.detail.from].id,
+							)
+							const toIndex = importantList.order.indexOf(
+								todos[event.detail.to].id,
+							)
 							const reorderedTodoIds = moveItemInArray(
-								todoIds,
-								event.detail.from,
-								event.detail.to,
+								importantList.order,
+								fromIndex,
+								toIndex,
 							)
 							await db.lists.put({
 								type: '#important',