fix(ui): fix longstanding drag-and-drop duplication issue (#502)

* fix(ui): fixed color switching on list reordering

* chore: remove lock file

* chore: add back lock file

* feat(ui): fix color duplication issue and prevent scrolling beyond parent

* feat(ui): add to storybook

* fix(ui): remove white background while dragging

* chore: remove dnd pangea from package.json

* chore: rebuild lock file

* chore: remove nested li element issue

* fix(ui): allow grabbing cursor while dragging

* fix(ui): address chromatic errors

* fix(ui): address chromatic errors

* fix(ui): address linting issues and pass tests

* fix(ui): create hook for modifying the cursor globally

* chore: add check for storybook env

* chore: add back unused import to AddAllButton

* fix: make cursor grabbing hook more explicit

* chore: move sortable list item into sortable list file

* fix: remove isStorybook prop from ScheduleListItem

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/views/components/calendar/CalendarSchedules.tsx

@@ -1,10 +1,9 @@
 import createSchedule from '@pages/background/lib/createSchedule';
 import { Plus } from '@phosphor-icons/react';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
-import { getSpacingInPx } from '@shared/types/Spacing';
 import { Button } from '@views/components/common/Button';
-import List from '@views/components/common/List';
 import ScheduleListItem from '@views/components/common/ScheduleListItem';
+import { SortableList } from '@views/components/common/SortableList';
 import Text from '@views/components/common/Text/Text';
 import { useEnforceScheduleLimit } from '@views/hooks/useEnforceScheduleLimit';
 import useSchedules, { getActiveSchedule, switchSchedule } from '@views/hooks/useSchedules';
@@ -41,11 +40,10 @@ export function CalendarSchedules() {
                 />
             </div>
             <div className='w-full flex flex-col'>
-                <List
-                    gap={getSpacingInPx('spacing-3')}
+                <SortableList
+                    className='gap-spacing-3'
                     draggables={schedules}
-                    itemKey={s => s.id}
-                    onReordered={reordered => {
+                    onChange={reordered => {
                         const activeSchedule = getActiveSchedule();
                         const activeIndex = reordered.findIndex(s => s.id === activeSchedule.id);
 
@@ -53,17 +51,10 @@ export function CalendarSchedules() {
                         UserScheduleStore.set('schedules', reordered);
                         UserScheduleStore.set('activeIndex', activeIndex);
                     }}
-                >
-                    {(schedule, handleProps) => (
-                        <ScheduleListItem
-                            schedule={schedule}
-                            onClick={() => {
-                                switchSchedule(schedule.id);
-                            }}
-                            dragHandleProps={handleProps}
-                        />
+                    renderItem={schedule => (
+                        <ScheduleListItem schedule={schedule} onClick={() => switchSchedule(schedule.id)} />
                     )}
-                </List>
+                />
             </div>
         </div>
     );