Skip to content

QoL updates to the SearchModal #391

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SeanCassiere merged 11 commits into from
Apr 26, 2025
Merged

QoL updates to the SearchModal #391

Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6f7fcfb
capitalize library and add useEffect deps
SeanCassiere Apr 25, 2025
6720c1a
mobile styling optimizations
SeanCassiere Apr 25, 2025
40cc458
make the search modal more dark mode and mobile friendly
SeanCassiere Apr 25, 2025
7049686
add pagination
SeanCassiere Apr 25, 2025
2282e7a
Merge remote-tracking branch 'origin/main' into search-modal-qol
SeanCassiere Apr 25, 2025
539978e
more capitalization and tabular-nums
SeanCassiere Apr 26, 2025
60bd6d9
better pagination
SeanCassiere Apr 26, 2025
5b54435
restore effect deps with `main`
SeanCassiere Apr 26, 2025
84c7c57
reduce modal height on mobile
SeanCassiere Apr 26, 2025
4f67333
split classnames for pagination
SeanCassiere Apr 26, 2025
2c0f72a
`vh` -> `dvh`
SeanCassiere Apr 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 24 additions & 18 deletions app/components/SearchModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@ import {
Configure,
useRefinementList,
useInstantSearch,
Pagination,
} from 'react-instantsearch'
import { liteClient } from 'algoliasearch/lite'
import { MdClose, MdSearch } from 'react-icons/md'
import { Link, useRouterState } from '@tanstack/react-router'
import { useSearchContext } from '~/contexts/SearchContext'
import { frameworkOptions, libraries } from '~/libraries'
import { capitalize } from '~/utils/utils'

const searchClient = liteClient(
'FQ0DQ6MA3C',
Expand Down Expand Up @@ -111,7 +113,7 @@ const Hit = ({ hit, isFocused }: { hit: any; isFocused?: boolean }) => {
tabIndex={-1}
ref={ref}
>
<div className="flex items-start gap-4">
<article className="flex items-start gap-4">
<div className="flex-1">
<h3 className="font-bold text-gray-900 dark:text-white">
<Highlight attribute="hierarchy.lvl1" hit={hit} />
Expand All @@ -134,14 +136,14 @@ const Hit = ({ hit, isFocused }: { hit: any; isFocused?: boolean }) => {
</p>
) : null}
</div>
<div className="flex-none">
{(() => {
const framework = frameworkOptions.find((f) =>
hit.url.includes(`/framework/${f.value}`)
)
if (!framework) return null
{(() => {
const framework = frameworkOptions.find((f) =>
hit.url.includes(`/framework/${f.value}`)
)
if (!framework) return null

return (
return (
<div className="flex-none">
<div className="flex items-center gap-1 text-xs font-black bg-white rounded-xl px-2 py-1 dark:bg-black">
<img
src={framework.logo}
Expand All @@ -150,10 +152,10 @@ const Hit = ({ hit, isFocused }: { hit: any; isFocused?: boolean }) => {
/>
{framework.label}
</div>
)
})()}
</div>
</div>
</div>
)
})()}
</article>
</SafeLink>
)
}
Expand All @@ -179,7 +181,7 @@ function CustomRefinementList() {
if (!isAlreadyRefined && library) {
refine(subpathname)
}
}, [])
}, [items, refine, subpathname])

return (
<div className="overflow-x-auto scrollbar-hide">
Expand All @@ -200,7 +202,7 @@ function CustomRefinementList() {
: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
)}
>
{item.label} ({item.count.toLocaleString()})
{capitalize(item.label)} ({item.count.toLocaleString()})
</button>
)
})}
Expand Down Expand Up @@ -317,8 +319,8 @@ export function SearchModal() {
onKeyDown={handleKeyDown}
>
<div className="min-h-screen text-center">
<Dialog.Overlay className="fixed inset-0 bg-black/30" />
<div className="inline-block w-full max-w-2xl my-8 overflow-hidden text-left align-middle transition-all transform bg-white/80 dark:bg-black/80 shadow-xl rounded-2xl divide-y divide-gray-500/20 backdrop-blur-lg">
<Dialog.Overlay className="fixed inset-0 bg-black/60 xl:bg-black/30" />
<div className="inline-block w-[98%] xl:w-full max-w-2xl mt-8 overflow-hidden text-left align-middle transition-all transform bg-white/80 dark:bg-black/80 shadow-xl rounded-lg xl:rounded-xl divide-y divide-gray-500/20 backdrop-blur-lg dark:border dark:border-white/20">
<InstantSearch searchClient={searchClient} indexName="tanstack">
<Configure
attributesToRetrieve={[
Expand Down Expand Up @@ -347,7 +349,7 @@ export function SearchModal() {
placeholder="Search..."
classNames={{
root: 'w-full',
form: 'text-2xl flex items-center gap-2 px-4',
form: 'text-xl flex items-center gap-2 px-4',
input:
'flex-1 p-4 pl-0 outline-none font-bold [&::-webkit-search-cancel-button]:hidden bg-transparent',
submit: 'p-2',
Expand Down Expand Up @@ -384,7 +386,7 @@ function SearchResults({ focusedIndex }: { focusedIndex: number }) {
<>
<CustomRefinementList />
<div
className="max-h-[60vh] overflow-y-auto"
className="max-h-[80vh] lg:max-h-[60vh] overflow-y-auto"
role="listbox"
aria-label="Search results"
>
Expand All @@ -397,6 +399,10 @@ function SearchResults({ focusedIndex }: { focusedIndex: number }) {
return <Hit hit={hit} isFocused={index === focusedIndex} />
}}
/>
<Pagination
padding={2}
className="border-t text-sm dark:border-white/20 px-4 py-3 [&>ul]:w-full [&>ul]:flex [&>ul]:justify-between [&_li>*]:px-3 [&_li>*]:py-1.5 [&_.ais-Pagination-item--selected>*]:bg-red-500 [&_.ais-Pagination-item--selected>*]:rounded-lg [&_li>span]:cursor-not-allowed"
/>
</div>
</>
)
Expand Down