diff --git a/frontend/src/components/profile/scoring/FormatGroup.jsx b/frontend/src/components/profile/scoring/FormatGroup.jsx
index d8dcf85..52e7ee3 100644
--- a/frontend/src/components/profile/scoring/FormatGroup.jsx
+++ b/frontend/src/components/profile/scoring/FormatGroup.jsx
@@ -1,12 +1,14 @@
-import React, { useState, useCallback, memo } from 'react';
+import React, { useState, useCallback, memo, useMemo } from 'react';
import PropTypes from 'prop-types';
-import { ChevronDown, Volume2, Monitor, Users, Tv, Code, HardDrive, Tag, Square, Layers, Database, Folder } from 'lucide-react';
+import { ChevronDown, ChevronUp, ChevronsUpDown, Volume2, Monitor, Users, Tv, Code, HardDrive, Tag, Square, Layers, Database, Folder } from 'lucide-react';
import NumberInput from '@ui/NumberInput';
import Tooltip from '@ui/Tooltip';
import { Copy } from 'lucide-react';
const FormatGroup = memo(({ groupName, formats, onScoreChange, onFormatToggle, icon }) => {
const [isExpanded, setIsExpanded] = useState(true);
+ const [sortColumn, setSortColumn] = useState('radarr');
+ const [sortDirection, setSortDirection] = useState('desc');
// Map group names to icons
const groupIcons = {
@@ -45,6 +47,60 @@ const FormatGroup = memo(({ groupName, formats, onScoreChange, onFormatToggle, i
}
}, [formats, onScoreChange]);
+ const handleSort = useCallback((column) => {
+ if (sortColumn === column) {
+ setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
+ } else {
+ setSortColumn(column);
+ setSortDirection('asc');
+ }
+ }, [sortColumn]);
+
+ // Sort formats based on current sort settings
+ const sortedFormats = useMemo(() => {
+ const sorted = [...formats].sort((a, b) => {
+ let aValue, bValue;
+
+ switch (sortColumn) {
+ case 'name':
+ aValue = a.name.toLowerCase();
+ bValue = b.name.toLowerCase();
+ break;
+ case 'radarr':
+ // Sort by enabled status first, then by score
+ if (a.radarr && !b.radarr) return -1;
+ if (!a.radarr && b.radarr) return 1;
+ aValue = a.radarrScore ?? a.score ?? 0;
+ bValue = b.radarrScore ?? b.score ?? 0;
+ break;
+ case 'sonarr':
+ // Sort by enabled status first, then by score
+ if (a.sonarr && !b.sonarr) return -1;
+ if (!a.sonarr && b.sonarr) return 1;
+ aValue = a.sonarrScore ?? a.score ?? 0;
+ bValue = b.sonarrScore ?? b.score ?? 0;
+ break;
+ default:
+ return 0;
+ }
+
+ if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1;
+ if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1;
+ return 0;
+ });
+
+ return sorted;
+ }, [formats, sortColumn, sortDirection]);
+
+ const SortIcon = ({ column }) => {
+ if (sortColumn !== column) {
+ return
| - Format + | handleSort('name')}
+ >
+
+ Format
+
|
- - Radarr + | handleSort('radarr')}
+ >
+
+ Radarr
+
|
- - Sonarr + | handleSort('sonarr')}
+ >
+
+ Sonarr
+
|
|---|