diff --git a/components/common/DialogContent/index.module.scss b/components/common/DialogContent/index.module.scss index 92df55c2..7942f99b 100644 --- a/components/common/DialogContent/index.module.scss +++ b/components/common/DialogContent/index.module.scss @@ -16,9 +16,6 @@ @include breakpoint(phone) { place-items: flex-end; overflow-y: hidden; - - &.filter { - } } .dialogContent { @@ -72,7 +69,7 @@ box-sizing: border-box; display: flex; flex-direction: column; - min-height: 430px; + height: 60vh; max-height: none; padding: 0; @@ -93,7 +90,8 @@ } &.editParty { - min-height: 80vh; + // min-height: 80vh; + height: 60vh; .container { display: flex; @@ -103,6 +101,8 @@ } .container { + display: flex; + flex-direction: column; overflow-y: hidden; &.scrollable { diff --git a/components/search/SearchModal/index.module.scss b/components/search/SearchModal/index.module.scss index 751a6e6f..4bffefff 100644 --- a/components/search/SearchModal/index.module.scss +++ b/components/search/SearchModal/index.module.scss @@ -1,5 +1,6 @@ .header { align-items: inherit; + border-bottom: 1px solid var(--button-contained-bg); display: flex; flex-direction: column; gap: $unit; @@ -65,23 +66,59 @@ } .results { + flex-grow: 1; margin: 0; - padding: 0 ($unit * 1.5); + padding: $unit-2x ($unit * 1.5) 0; padding-bottom: $unit * 1.5; // Infinite scroll overflow-y: auto; - max-height: 500px; @include breakpoint(phone) { max-height: initial; } - h5.total { - font-size: $font-regular; - font-weight: $normal; - color: var(--text-tertiary); - padding: $unit-half ($unit * 1.5); + .totalRow { + font-size: $font-small; + display: flex; + justify-content: space-between; + padding-bottom: $unit-half; + + h5.total { + font-weight: $bold; + color: var(--text-tertiary); + padding: $unit-half ($unit * 1.5); + } + + .viewSwitcher { + align-items: center; + display: flex; + gap: $unit-fourth; + + span { + color: var(--text-tertiary); + margin-right: $unit-half; + } + + .link { + background: none; + border-radius: $item-corner-small; + color: var(--text-secondary); + display: inline-block; + font-size: $font-small; + + &:hover { + background: var(--button-contained-bg); + cursor: pointer; + text-decoration: none; + } + + &.active { + background: var(--button-contained-bg); + font-weight: $bold; + } + } + } } .footer { diff --git a/components/search/SearchModal/index.tsx b/components/search/SearchModal/index.tsx index b2e20bcf..ca19dfc2 100644 --- a/components/search/SearchModal/index.tsx +++ b/components/search/SearchModal/index.tsx @@ -26,6 +26,7 @@ import type { SearchableObject, SearchableObjectArray } from '~types' import styles from './index.module.scss' import CrossIcon from '~public/icons/Cross.svg' +import classNames from 'classnames' interface Props extends DialogProps { send: (object: SearchableObject, position: number) => any @@ -57,8 +58,20 @@ const SearchModal = (props: Props) => { // Pagination states const [recordCount, setRecordCount] = useState(0) const [currentPage, setCurrentPage] = useState(1) + const [currentView, setCurrentView] = useState(0) const [totalPages, setTotalPages] = useState(1) + // Classes + const newestViewClasses = classNames({ + [styles.link]: true, + [styles.active]: currentView === 0, + }) + + const recentViewClasses = classNames({ + [styles.link]: true, + [styles.active]: currentView === 1, + }) + useEffect(() => { if (searchInput.current) searchInput.current.focus() }, [searchInput]) @@ -119,6 +132,7 @@ const SearchModal = (props: Props) => { const cookieObj: SearchableObjectArray = cookie ? JSON.parse(cookie as string) : [] + let recents: SearchableObjectArray = [] if (props.object === 'weapons') { @@ -187,31 +201,6 @@ const SearchModal = (props: Props) => { } }, [open, currentPage]) - useEffect(() => { - // Filters changed - const key = `recent_${props.object}` - const cookie = getCookie(key) - const cookieObj: Weapon[] | Summon[] | Character[] = cookie - ? JSON.parse(cookie as string) - : [] - - if (open) { - if ( - firstLoad && - cookieObj && - cookieObj.length > 0 && - !extraPositions().includes(props.fromPosition) - ) { - setResults(cookieObj) - setRecordCount(cookieObj.length) - setFirstLoad(false) - } else { - setCurrentPage(1) - fetchResults({ replace: true }) - } - } - }, [filters]) - useEffect(() => { // Query changed if (open && query.length != 1) { @@ -231,6 +220,33 @@ const SearchModal = (props: Props) => { setCurrentPage(currentPage + 1) } + function showNewest() { + if (currentView !== 0) { + setCurrentView(0) + + setCurrentPage(1) + fetchResults({ replace: true }) + } + } + + function showRecent() { + if (currentView !== 1) { + setCurrentView(1) + + // Fetch recently used items + const key = `recent_${props.object}` + const cookie = getCookie(key) + const cookieObj: Weapon[] | Summon[] | Character[] = cookie + ? JSON.parse(cookie as string) + : [] + + // Set the view + setResults(cookieObj) + setRecordCount(cookieObj.length) + setFirstLoad(false) + } + } + function renderResults() { let jsx @@ -437,9 +453,22 @@ const SearchModal = (props: Props) => {
-
- {t('search.result_count', { record_count: recordCount })} -
+
+
+ {t('search.result_count', { record_count: recordCount })} +
+ {(props.object === 'weapons' || props.object === 'summons') && ( +
+ {t('search.labels.view')} + + +
+ )} +
{open ? renderResults() : ''}
diff --git a/public/locales/en/common.json b/public/locales/en/common.json index d40113bc..0bc3c376 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -512,6 +512,11 @@ "end_results": "No more results", "type": "Keep typing..." }, + "labels": { + "view": "View:", + "newest": "Newly added", + "recently_used": "Recently used" + }, "placeholders": { "weapon": "Search for a weapon...", "summon": "Search for a summon...", diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json index c4ae05b7..21ddb6ef 100644 --- a/public/locales/ja/common.json +++ b/public/locales/ja/common.json @@ -510,6 +510,11 @@ "end_results": "検索結果これ以上ありません", "type": "もっと入力してください" }, + "labels": { + "view": "表示:", + "newest": "最新発表", + "recently_used": "最近使用" + }, "placeholders": { "weapon": "武器を検索...", "summon": "召喚石を検索...",