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/stories/components/Dropdown.stories.tsx

@@ -2,10 +2,10 @@ import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 import { UserSchedule } from '@shared/types/UserSchedule';
 import { generateRandomId } from '@shared/util/random';
 import type { Meta, StoryObj } from '@storybook/react';
-import List from '@views/components/common/List';
 import type { ScheduleDropdownProps } from '@views/components/common/ScheduleDropdown';
 import ScheduleDropdown from '@views/components/common/ScheduleDropdown';
 import ScheduleListItem from '@views/components/common/ScheduleListItem';
+import { SortableList } from '@views/components/common/SortableList';
 import useSchedules, { getActiveSchedule, switchSchedule } from '@views/hooks/useSchedules';
 import type { Serialized } from 'chrome-extension-toolkit';
 import React, { useEffect } from 'react';
@@ -48,10 +48,10 @@ const meta: Meta<typeof ScheduleDropdown> = {
         return (
             <div className='w-80'>
                 <ScheduleDropdown {...args}>
-                    <List
+                    <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);
 
@@ -59,18 +59,10 @@ const meta: Meta<typeof ScheduleDropdown> = {
                             UserScheduleStore.set('schedules', reordered);
                             UserScheduleStore.set('activeIndex', activeIndex);
                         }}
-                        gap={10}
-                    >
-                        {(schedule, handleProps) => (
-                            <ScheduleListItem
-                                schedule={schedule}
-                                onClick={() => {
-                                    switchSchedule(schedule.id);
-                                }}
-                                dragHandleProps={handleProps}
-                            />
+                        renderItem={schedule => (
+                            <ScheduleListItem schedule={schedule} onClick={() => switchSchedule(schedule.id)} />
                         )}
-                    </List>
+                    />
                 </ScheduleDropdown>
             </div>
         );