diff --git a/src/components/Elements/MainModal/scss/marketplace/_main.scss b/src/components/Elements/MainModal/scss/marketplace/_main.scss index 0edc1062..b3c83da2 100644 --- a/src/components/Elements/MainModal/scss/marketplace/_main.scss +++ b/src/components/Elements/MainModal/scss/marketplace/_main.scss @@ -114,6 +114,18 @@ } } + // Disabled pack styling + &.item-disabled { + opacity: 0.5; + + .card-title, + .card-subtitle { + @include themed { + color: t($subColor); + } + } + } + .item-uninstall-btn { display: flex; align-items: center; diff --git a/src/features/background/api/photoPackAPI.js b/src/features/background/api/photoPackAPI.js index 1ee3de8b..7decf2cb 100644 --- a/src/features/background/api/photoPackAPI.js +++ b/src/features/background/api/photoPackAPI.js @@ -162,12 +162,17 @@ export async function checkAndRefreshAPIPacks() { export function buildPhotoPool() { const pool = []; const installed = JSON.parse(localStorage.getItem('installed') || '[]'); + const enabledPacks = JSON.parse(localStorage.getItem('enabledPacks') || '{}'); const apiPacksReady = JSON.parse(localStorage.getItem('api_packs_ready') || '[]'); const apiPackCache = JSON.parse(localStorage.getItem('api_pack_cache') || '{}'); installed.forEach((pack) => { if (pack.type !== 'photos') return; + // Filter by enabled status - default to enabled if not in enabledPacks object + const packId = pack.id || pack.name; + if (enabledPacks[packId] === false) return; + if (pack.api_enabled) { // API pack - check if configured and ready if (apiPacksReady.includes(pack.id)) { diff --git a/src/features/background/options/sections/SourceSection.jsx b/src/features/background/options/sections/SourceSection.jsx index 3a226a92..dfc6f78f 100644 --- a/src/features/background/options/sections/SourceSection.jsx +++ b/src/features/background/options/sections/SourceSection.jsx @@ -65,7 +65,9 @@ const SourceSection = ({ toggleFunction={onToggle} showCreateYourOwn={false} onUninstall={onPhotoPackUninstall} + onTogglePack={() => {}} viewType="grid" + showChips={false} /> {/* Settings for API packs */} diff --git a/src/features/marketplace/components/Items/Items.jsx b/src/features/marketplace/components/Items/Items.jsx index 7d1ebd91..bdfe1796 100644 --- a/src/features/marketplace/components/Items/Items.jsx +++ b/src/features/marketplace/components/Items/Items.jsx @@ -4,7 +4,10 @@ import { MdCheckCircle, MdOutlineUploadFile, MdClose } from 'react-icons/md'; import placeholderIcon from 'assets/icons/marketplace-placeholder.png'; import { Tooltip } from 'components/Elements'; +import { Button } from 'components/Elements'; +import Switch from 'components/Form/Settings/Switch/Switch'; import Dropdown from '../../../../components/Form/Settings/Dropdown/Dropdown'; +import EventBus from 'utils/eventbus'; import { getProxiedImageUrl } from 'utils/marketplace'; function filterItems(item, filter, categoryFilter) { @@ -60,32 +63,92 @@ function ItemCard({ isInstalled, isAdded, onUninstall, + onTogglePack, + showChips = true, }) { item._onCollection = onCollection; const isSideloaded = item.sideload === true; + const packId = item.id || item.name; + + // Use React state to manage enabled status for immediate UI updates + const [isEnabled, setIsEnabled] = useState(() => { + const enabledPacks = JSON.parse(localStorage.getItem('enabledPacks') || '{}'); + return enabledPacks[packId] !== false; // Default to enabled if not set + }); + + const handleTogglePack = (e) => { + e.stopPropagation(); + const newState = !isEnabled; + + // Update local state immediately for UI responsiveness + setIsEnabled(newState); + + // Update localStorage + const enabledPacks = JSON.parse(localStorage.getItem('enabledPacks') || '{}'); + enabledPacks[packId] = newState; + localStorage.setItem('enabledPacks', JSON.stringify(enabledPacks)); + + if (onTogglePack) { + onTogglePack(packId, newState); + } + + // Emit refresh event for quotes only (background will update on next interval) + if (item.type === 'quotes') { + EventBus.emit('refresh', 'quote'); + } + }; return (
toggleFunction(item)} key={item.name} > - {isAdded && onUninstall && ( - e.stopPropagation()} style={{ position: 'absolute', top: '12px', right: '12px', zIndex: 3 }} > - - +
+ {showChips && ( +
+ {item.type && ( + + {variables.getMessage('modals.main.marketplace.' + getTypeTranslationKey(item.type))} + + )} + {item.in_collections && item.in_collections.length > 0 && !onCollection && ( + + {item.in_collections[0].display_name || item.in_collections[0].name} + + )} +
+ )} + + {isAdded && onUninstall && ( +