fixed scrolling when reordering

Author: roboslone

src/components/habit/card.tsx

@@ -57,15 +57,13 @@ export const HabitCard: React.FC = () => {
 
     if (!matchActiveTags(habit, tags.active)) return null
 
-    const extraProps = isReordering
-        ? { ref: setNodeRef, style, ...attributes, ...listeners }
-        : undefined
+    const extraProps = isReordering ? { ref: setNodeRef, style, ...attributes } : undefined
 
     return (
         <div
             {...extraProps}
             className={cn(
-                "habit-card rounded truncate w-full max-w-211 flex flex-col gap-1 touch-none",
+                "habit-card rounded truncate w-full max-w-211 flex flex-col gap-1",
                 {
                     "min-h-40": !displayOptions.hideChart,
                 },
@@ -86,7 +84,7 @@ export const HabitCard: React.FC = () => {
                 <div className={cn("flex items-center gap-1 w-full px-2 pl-3 min-h-11")}>
                     <LinkWrapper>
                         <div className="flex items-center gap-3 grow">
-                            <HabitIcon size={20} className="w-6" />
+                            <HabitIcon size={20} className="w-6 touch-none" {...listeners} />
 
                             <div className="flex flex-col gap-0">
                                 <span

src/components/ordering/provider.tsx

@@ -79,7 +79,7 @@ export const OrderingProvider: React.FC<React.PropsWithChildren> = ({ children }
 
     React.useEffect(() => {
         setOrderedNames(reorder(habits, completed, collection.order, isReordering))
-    }, [completed])
+    }, [completed, habits])
 
     const handleDragEnd = (event: DragEndEvent) => {
         const { active, over } = event

src/lib/queries.ts

@@ -238,12 +238,14 @@ const usePushHabit = () => {
 export const useNewHabit = () => {
     const repo = useRepoContext()
     const pushHabit = usePushHabit()
+    const invalidateCollection = useInvalidateCollection()
 
     return useMutation({
         mutationFn: (habit: Habit) => pushHabit(`start new habit - "${habit.name}"`, habit),
 
         onSettled: async () => {
             await client.invalidateQueries({ queryKey: ["repo", repo.id, "content"] })
+            await invalidateCollection()
         },
         retry: handleError("Failed to start a habit", { maxFailures: 0 }),
     })