diff --git a/src/components/Elements/MainModal/Main.jsx b/src/components/Elements/MainModal/Main.jsx index 059acb26..b0898ea9 100644 --- a/src/components/Elements/MainModal/Main.jsx +++ b/src/components/Elements/MainModal/Main.jsx @@ -162,10 +162,14 @@ function MainModal({ modalClose, deepLinkData }) { const handleSectionChange = (section, sectionName) => { setCurrentSection(section); setCurrentSectionName(sectionName); - setCurrentSubSection(null); - const entry = { section, sectionName, subSection: null }; + // Only reset subsection if we're actually changing to a different section + // Don't reset on initial section set (when currentSectionName is empty) + if (currentSectionName !== '' && currentSectionName !== sectionName) { + setCurrentSubSection(null); + } + const entry = { section, sectionName, subSection: (currentSectionName === '' || currentSectionName === sectionName) ? currentSubSection : null }; const current = historyRef.current[historyIndexRef.current]; - if (!current || current.sectionName !== sectionName || current.subSection !== null) { + if (!current || current.sectionName !== sectionName || current.subSection !== entry.subSection) { historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1).concat(entry); historyIndexRef.current = historyRef.current.length - 1; updateNavButtons(); @@ -183,7 +187,11 @@ function MainModal({ modalClose, deepLinkData }) { updateHash(`#${currentTab}/${sectionKey}`); } } else if (currentTab === TAB_TYPES.SETTINGS && sectionName) { - updateHash(`#${currentTab}/${sectionName}`, false); + // Include subsection in hash if it exists and we're not changing sections + const hash = currentSubSection && (currentSectionName === '' || currentSectionName === sectionName) + ? `#${currentTab}/${sectionName}/${currentSubSection}` + : `#${currentTab}/${sectionName}`; + updateHash(hash, false); } }; diff --git a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss index ebaf8a34..702100f6 100644 --- a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss +++ b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss @@ -13,10 +13,11 @@ // height: 100%; overflow-y: auto; + margin-bottom: 0; + padding-bottom: 2rem; @include themed { background: t($modal-background); - margin: 0; border-radius: t($borderRadius); } diff --git a/src/features/background/options/sections/SourceSection.jsx b/src/features/background/options/sections/SourceSection.jsx index 95cbad14..7f79dec9 100644 --- a/src/features/background/options/sections/SourceSection.jsx +++ b/src/features/background/options/sections/SourceSection.jsx @@ -4,6 +4,7 @@ import { Dropdown } from 'components/Form/Settings'; import { Row, Content, Action } from 'components/Layout/Settings/Item'; import { Button } from 'components/Elements'; import Items from 'features/marketplace/components/Items/Items'; +import SuggestedPacks from 'features/marketplace/components/SuggestedPacks'; import { getBackgroundOptionItems } from '../optionTypes'; const SourceSection = ({ @@ -70,6 +71,7 @@ const SourceSection = ({ viewType="grid" showChips={false} /> + )} diff --git a/src/features/marketplace/components/Items/Items.jsx b/src/features/marketplace/components/Items/Items.jsx index 5035a52c..3ceea076 100644 --- a/src/features/marketplace/components/Items/Items.jsx +++ b/src/features/marketplace/components/Items/Items.jsx @@ -278,6 +278,7 @@ function Items({ onTogglePack, viewType = 'grid', showChips = true, + style, }) { const [selectedCategory, setSelectedCategory] = useState('all'); const [sortType, setSortType] = useState(localStorage.getItem('sortMarketplace') || 'a-z'); @@ -329,7 +330,7 @@ function Items({ /> )} -
+
{items ?.filter((item) => filterItems(item, filter, filterOptions ? selectedCategory : 'all')) .map((item, index) => ( diff --git a/src/features/marketplace/components/SuggestedPacks/SuggestedPacks.jsx b/src/features/marketplace/components/SuggestedPacks/SuggestedPacks.jsx new file mode 100644 index 00000000..58d4eee9 --- /dev/null +++ b/src/features/marketplace/components/SuggestedPacks/SuggestedPacks.jsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { MdExplore } from 'react-icons/md'; +import { useT } from 'contexts'; +import { Row, Content, Action } from 'components/Layout/Settings'; +import { Button } from 'components/Elements'; +import Items from 'features/marketplace/components/Items/Items'; +import { updateHash } from 'utils/deepLinking'; +import { useSuggestedPacks } from './useSuggestedPacks'; + +/** + * Component that displays suggested packs from the marketplace + * @param {Object} props + * @param {string} props.category - 'quote_packs' or 'photo_packs' + * @param {number} props.limit - Number of suggestions to display (default: 4) + * @param {number} props.minToShow - Minimum suggestions to show, hide if fewer (default: 2) + */ +const SuggestedPacks = ({ category, limit = 4, minToShow = 2 }) => { + const t = useT(); + const { suggestions, loading, error } = useSuggestedPacks(category, limit, minToShow); + + // Don't render anything while loading, on error, or if no suggestions + if (loading || error || !suggestions || suggestions.length === 0) { + return null; + } + + // Determine the section key based on category + const sectionKey = category === 'quote_packs' ? 'quote' : 'background'; + + // Navigate to marketplace category page + const goToMarketplace = () => { + updateHash(`#discover/${category}`); + const event = new window.Event('popstate'); + window.dispatchEvent(event); + }; + + // Navigate to specific item detail page + const navigateToItem = (item) => { + const itemId = item.id || item.name; + updateHash(`#discover/${category}/${itemId}`); + const event = new window.Event('popstate'); + window.dispatchEvent(event); + }; + + return ( + <> + + + +