add client side sort to album song list

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

@@ -1,3 +1,5 @@
+import { Dispatch, SetStateAction } from 'react';
+
 import i18n from '/@/i18n/i18n';
 import { useSortByFilter } from '/@/renderer/features/shared/hooks/use-sort-by-filter';
 import { useCurrentServer } from '/@/renderer/store';
@@ -19,6 +21,7 @@ import { ItemListKey } from '/@/shared/types/types';
 interface ListSortByDropdownProps {
     defaultSortByValue: string;
     disabled?: boolean;
+    includeId?: boolean;
     itemType: LibraryItem;
     listKey: ItemListKey;
     onChange?: (value: string) => void;
@@ -72,6 +75,57 @@ export const ListSortByDropdown = ({
     );
 };
 
+interface ListSortByDropdownControlledProps {
+    disabled?: boolean;
+    itemType: LibraryItem;
+    setSortBy: Dispatch<SetStateAction<string>>;
+    sortBy: string;
+    target?: React.ReactNode;
+}
+
+export const ListSortByDropdownControlled = ({
+    disabled,
+    itemType,
+    setSortBy,
+    sortBy,
+    target,
+}: ListSortByDropdownControlledProps) => {
+    const server = useCurrentServer();
+
+    const sortByLabel =
+        (itemType && FILTERS[itemType][server.type].find((f) => f.value === sortBy)?.name) || '—';
+
+    const handleSortByChange = (sortBy: string) => {
+        setSortBy(sortBy);
+    };
+
+    return (
+        <DropdownMenu disabled={disabled} position="bottom-start">
+            <DropdownMenu.Target>
+                {target ? (
+                    target
+                ) : (
+                    <Button disabled={disabled} variant="subtle">
+                        {sortByLabel}
+                    </Button>
+                )}
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+                {FILTERS[itemType][server.type].map((f) => (
+                    <DropdownMenu.Item
+                        isSelected={f.value === sortBy}
+                        key={`filter-${f.name}`}
+                        onClick={() => handleSortByChange(f.value)}
+                        value={f.value}
+                    >
+                        {f.name}
+                    </DropdownMenu.Item>
+                ))}
+            </DropdownMenu.Dropdown>
+        </DropdownMenu>
+    );
+};
+
 const CLIENT_SIDE_SONG_FILTERS = [
     {
         defaultOrder: SortOrder.ASC,

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

@@ -29,3 +29,25 @@ export const ListSortOrderToggleButton = ({
         />
     );
 };
+
+interface ListSortOrderToggleButtonControlledProps {
+    disabled?: boolean;
+    setSortOrder: (sortOrder: SortOrder) => void;
+    sortOrder: SortOrder;
+}
+
+export const ListSortOrderToggleButtonControlled = ({
+    disabled,
+    setSortOrder,
+    sortOrder,
+}: ListSortOrderToggleButtonControlledProps) => {
+    return (
+        <OrderToggleButton
+            disabled={disabled}
+            onToggle={() =>
+                setSortOrder(sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC)
+            }
+            sortOrder={sortOrder as SortOrder}
+        />
+    );
+};