@@ -156,4 +332,4 @@ FormatSettings.propTypes = {
onScoreChange: PropTypes.func.isRequired
};
-export default FormatSettings;
+export default FormatSettings;
\ No newline at end of file
diff --git a/frontend/src/components/profile/scoring/ProfileScoringTab.jsx b/frontend/src/components/profile/scoring/ProfileScoringTab.jsx
index 1b34fb3..0f73429 100644
--- a/frontend/src/components/profile/scoring/ProfileScoringTab.jsx
+++ b/frontend/src/components/profile/scoring/ProfileScoringTab.jsx
@@ -70,9 +70,10 @@ const ProfileScoringTab = ({
Format Settings
- Assign scores to different formats to control download
- preferences. View formats in the traditional arr style,
- or in filtered A/V grids.
+ Customize format scoring to prioritize your preferred downloads.
+ Use Basic mode for a simple list view with sliders, Advanced mode for
+ detailed A/V category grids, and Selective mode to display and manage
+ only formats you care about instead of all available formats.
diff --git a/frontend/src/components/profile/scoring/SelectiveView.jsx b/frontend/src/components/profile/scoring/SelectiveView.jsx
new file mode 100644
index 0000000..d19ef89
--- /dev/null
+++ b/frontend/src/components/profile/scoring/SelectiveView.jsx
@@ -0,0 +1,219 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import NumberInput from '@ui/NumberInput';
+import { useSorting } from '@hooks/useSorting';
+import SortDropdown from '@ui/SortDropdown';
+import { Plus, X } from 'lucide-react';
+
+const SelectiveView = ({ formats, onScoreChange, allFormats }) => {
+ const [selectedFormats, setSelectedFormats] = useState([]);
+ const [availableFormats, setAvailableFormats] = useState([]);
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const [searchInput, setSearchInput] = useState('');
+
+ const sortOptions = [
+ { label: 'Score', value: 'score' },
+ { label: 'Name', value: 'name' }
+ ];
+
+ const { sortConfig, updateSort, sortData } = useSorting({
+ field: 'score',
+ direction: 'desc'
+ });
+
+ // Initialize selected formats from the formats prop
+ useEffect(() => {
+ setSelectedFormats(formats);
+
+ // Set available formats (those not already selected)
+ updateAvailableFormats(formats);
+
+ // Save selected format IDs to localStorage
+ const selectedIds = formats.map(f => f.id);
+ localStorage.setItem('selectedFormatsList', JSON.stringify(selectedIds));
+ }, [formats, allFormats]);
+
+ // Update available formats list (excluding already selected ones)
+ const updateAvailableFormats = (selectedFormats) => {
+ const selectedIds = selectedFormats.map(f => f.id);
+ setAvailableFormats(allFormats.filter(f => !selectedIds.includes(f.id)));
+ };
+
+ // Add a format to the selected list
+ const addFormat = (format) => {
+ // Always start with score 0 for newly added formats
+ const formatWithScore = {...format, score: 0};
+ const newSelectedFormats = [...selectedFormats, formatWithScore];
+ setSelectedFormats(newSelectedFormats);
+ updateAvailableFormats(newSelectedFormats);
+ setDropdownOpen(false);
+ setSearchInput('');
+
+ // Update the localStorage list of selected formats
+ const selectedIds = newSelectedFormats.map(f => f.id);
+ localStorage.setItem('selectedFormatsList', JSON.stringify(selectedIds));
+
+ // Notify parent component about the new format
+ onScoreChange(format.id, 0);
+ };
+
+ // Remove a format from the selected list
+ const removeFormat = (formatId) => {
+ const newSelectedFormats = selectedFormats.filter(f => f.id !== formatId);
+ setSelectedFormats(newSelectedFormats);
+ updateAvailableFormats(newSelectedFormats);
+
+ // Update the localStorage list of selected formats
+ const selectedIds = newSelectedFormats.map(f => f.id);
+ localStorage.setItem('selectedFormatsList', JSON.stringify(selectedIds));
+
+ // Also notify parent component that this format is no longer used
+ onScoreChange(formatId, 0);
+ };
+
+ // Filter available formats based on search input
+ const filteredAvailableFormats = availableFormats.filter(format =>
+ format.name.toLowerCase().includes(searchInput.toLowerCase())
+ );
+
+ const sortedFormats = sortData(selectedFormats);
+
+ return (
+
+
+
+ Selected Formats
+
+
+
+
+
+
+
+ {/* Add new format button */}
+
+
+
+ {/* Dropdown for selecting a format to add */}
+ {dropdownOpen && (
+ <>
+