add support for full playlist re-order (#1327)

src/renderer/features/shared/components/list-refresh-button.tsx

@@ -5,13 +5,14 @@ import { RefreshButton } from '/@/renderer/features/shared/components/refresh-bu
 import { ItemListKey } from '/@/shared/types/types';
 
 interface ListRefreshButtonProps {
+    disabled?: boolean;
     listKey: ItemListKey;
 }
 
-export const ListRefreshButton = ({ listKey }: ListRefreshButtonProps) => {
+export const ListRefreshButton = ({ disabled, listKey }: ListRefreshButtonProps) => {
     const handleRefresh = useCallback(() => {
         eventEmitter.emit('ITEM_LIST_REFRESH', { key: listKey });
     }, [listKey]);
 
-    return <RefreshButton onClick={handleRefresh} />;
+    return <RefreshButton disabled={disabled} onClick={handleRefresh} />;
 };

src/renderer/features/shared/components/list-sort-by-dropdown.tsx

@@ -18,6 +18,7 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface ListSortByDropdownProps {
     defaultSortByValue: string;
+    disabled?: boolean;
     itemType: LibraryItem;
     listKey: ItemListKey;
     onChange?: (value: string) => void;
@@ -26,6 +27,7 @@ interface ListSortByDropdownProps {
 
 export const ListSortByDropdown = ({
     defaultSortByValue,
+    disabled,
     itemType,
     listKey,
     onChange,
@@ -44,9 +46,15 @@ export const ListSortByDropdown = ({
     };
 
     return (
-        <DropdownMenu position="bottom-start">
+        <DropdownMenu disabled={disabled} position="bottom-start">
             <DropdownMenu.Target>
-                {target ? target : <Button variant="subtle">{sortByLabel}</Button>}
+                {target ? (
+                    target
+                ) : (
+                    <Button disabled={disabled} variant="subtle">
+                        {sortByLabel}
+                    </Button>
+                )}
             </DropdownMenu.Target>
             <DropdownMenu.Dropdown>
                 {FILTERS[itemType][server.type].map((f) => (

src/renderer/features/shared/components/list-sort-order-toggle-button.tsx

@@ -5,11 +5,13 @@ import { ItemListKey } from '/@/shared/types/types';
 
 interface ListSortOrderToggleButtonProps {
     defaultSortOrder: SortOrder;
+    disabled?: boolean;
     listKey: ItemListKey;
 }
 
 export const ListSortOrderToggleButton = ({
     defaultSortOrder,
+    disabled,
     listKey,
 }: ListSortOrderToggleButtonProps) => {
     const { setSortOrder, sortOrder } = useSortOrderFilter(defaultSortOrder, listKey);
@@ -20,6 +22,10 @@ export const ListSortOrderToggleButton = ({
     };
 
     return (
-        <OrderToggleButton onToggle={handleToggleSortOrder} sortOrder={sortOrder as SortOrder} />
+        <OrderToggleButton
+            disabled={disabled}
+            onToggle={handleToggleSortOrder}
+            sortOrder={sortOrder as SortOrder}
+        />
     );
 };

src/renderer/features/shared/components/order-toggle-button.tsx

@@ -5,15 +5,22 @@ import { SortOrder } from '/@/shared/types/domain-types';
 
 interface OrderToggleButtonProps {
     buttonProps?: Partial<ActionIconProps>;
+    disabled?: boolean;
     onToggle: () => void;
     sortOrder: SortOrder;
 }
 
-export const OrderToggleButton = ({ buttonProps, onToggle, sortOrder }: OrderToggleButtonProps) => {
+export const OrderToggleButton = ({
+    buttonProps,
+    disabled,
+    onToggle,
+    sortOrder,
+}: OrderToggleButtonProps) => {
     const { t } = useTranslation();
 
     return (
         <ActionIcon
+            disabled={disabled}
             icon={sortOrder === SortOrder.ASC ? 'sortAsc' : 'sortDesc'}
             iconProps={{
                 size: 'lg',