diff --git a/src/components/Form/Settings/ChipSelect/ChipSelect.jsx b/src/components/Form/Settings/ChipSelect/ChipSelect.jsx index c2a5c7ae..d25ecafa 100644 --- a/src/components/Form/Settings/ChipSelect/ChipSelect.jsx +++ b/src/components/Form/Settings/ChipSelect/ChipSelect.jsx @@ -4,8 +4,9 @@ import { MdExpandMore, MdClose, MdCheck } from 'react-icons/md'; import './ChipSelect.scss'; -function ChipSelect({ label, options, onChange }) { - let start = (localStorage.getItem('apiCategories') || '').split(','); +function ChipSelect({ label, options, onChange, name }) { + const storageKey = name || 'apiCategories'; + let start = (localStorage.getItem(storageKey) || '').split(','); if (start[0] === '') { start = []; } @@ -84,7 +85,8 @@ function ChipSelect({ label, options, onChange }) { } setOptionsSelected(newSelected); - localStorage.setItem('apiCategories', newSelected.join(',')); + const storageKey = name || 'apiCategories'; + localStorage.setItem(storageKey, newSelected.join(',')); if (onChange) { onChange(newSelected); diff --git a/src/features/background/options/sections/PhotoPackSettings.jsx b/src/features/background/options/sections/PhotoPackSettings.jsx index c715955a..ad8ae674 100644 --- a/src/features/background/options/sections/PhotoPackSettings.jsx +++ b/src/features/background/options/sections/PhotoPackSettings.jsx @@ -1,54 +1,12 @@ import React, { useState, useEffect } from 'react'; import variables from 'config/variables'; import EventBus from 'utils/eventbus'; -import { Dropdown, Text, Switch, Slider } from 'components/Form/Settings'; +import { Dropdown, Text, Switch, Slider, ChipSelect } from 'components/Form/Settings'; import { Row, Content, Action } from 'components/Layout/Settings/Item'; import { Button } from 'components/Elements'; +import { Section } from 'components/Layout/Settings'; import { refreshAPIPackCache } from 'features/background/api/photoPackAPI'; -import { MdRefresh, MdWarning } from 'react-icons/md'; - -/** - * ChipSelect component for multi-select options - */ -const ChipSelect = ({ label, options, defaultValue, name, onChange }) => { - const [selected, setSelected] = useState(defaultValue || []); - - const toggleChip = (value) => { - const newSelected = selected.includes(value) - ? selected.filter((v) => v !== value) - : [...selected, value]; - setSelected(newSelected); - onChange(newSelected); - }; - - return ( -
- -
- {options.map((option) => ( - - ))} -
-
- ); -}; +import { MdRefresh, MdWarning, MdExpandMore, MdExpandLess } from 'react-icons/md'; const PhotoPackSettings = ({ pack }) => { if (!pack.settings_schema || pack.settings_schema.length === 0) { @@ -63,6 +21,7 @@ const PhotoPackSettings = ({ pack }) => { const [dynamicOptions, setDynamicOptions] = useState({}); const [isRefreshing, setIsRefreshing] = useState(false); const [validationErrors, setValidationErrors] = useState([]); + const [isExpanded, setIsExpanded] = useState(false); // Load dynamic options (e.g., categories from API) useEffect(() => { @@ -85,7 +44,7 @@ const PhotoPackSettings = ({ pack }) => { const categories = await response.json(); setDynamicOptions((prev) => ({ ...prev, - [field.key]: categories.map((cat) => ({ value: cat, label: cat })), + [field.key]: categories, })); } catch (error) { console.error('Failed to load categories:', error); @@ -139,12 +98,16 @@ const PhotoPackSettings = ({ pack }) => { switch (field.type) { case 'dropdown': + const dropdownItems = field.options.map((opt) => ({ + value: opt.value, + text: opt.label, + })); return ( handleSettingChange(field.key, newValue)} /> ); @@ -155,7 +118,6 @@ const PhotoPackSettings = ({ pack }) => { handleSettingChange(field.key, newValue)} /> @@ -204,38 +166,60 @@ const PhotoPackSettings = ({ pack }) => { return ( <> - - - -