RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve search

Browse Source
This commit is contained in:
SrGooglo 2025-04-09 15:44:02 +00:00
parent 61ec4a80f8
commit deed590d9e
2 changed files with 195 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
packages/app/src/components/Searcher/index.jsx
View File

@ -33,20 +33,20 @@ const ResultsTypeDecorators = {
}, },
}, },
tracks: { tracks: {
icon: "FiAlbum", icon: "MdAlbum",
label: "Tracks", label: "Tracks",
renderItem: (props) => { renderItem: (props) => {
const { item, onClick } = props const { item, onClick } = props
return ( return (
<div className="suggestion" onClick={onClick}> <div className="suggestion">
<MusicTrack track={item} /> <MusicTrack track={item} onClick={onClick} />
</div> </div>
) )
}, },
}, },
playlists: { playlists: {
icon: "FiAlbum", icon: "MdPlaylistPlay",
label: "Playlists", label: "Playlists",
renderItem: (props) => { renderItem: (props) => {
return ( return (
@ -83,18 +83,6 @@ const Results = (props) => {
return results[key].items.length > 0 return results[key].items.length > 0
}) })
if (groupsKeys.length === 0) {
return (
<div className="searcher no_results">
<antd.Result
status="info"
title="No results"
subTitle="We are sorry, but we could not find any results for your search."
/>
</div>
)
}
const handleClick = async (decorator, data) => { const handleClick = async (decorator, data) => {
if (typeof decorator.onClick === "function") { if (typeof decorator.onClick === "function") {
await decorator.onClick(data) await decorator.onClick(data)
@ -105,6 +93,26 @@ const Results = (props) => {
} }
} }
if (props.loading) {
return (
<div className="searcher_results">
<antd.Skeleton active />
</div>
)
}
if (groupsKeys.length === 0) {
return (
<div className="searcher_results no_results">
<antd.Result
status="info"
title="No results"
subTitle="We are sorry, but we could not find any results for your search."
/>
</div>
)
}
return ( return (
<div <div
className={classnames("searcher_results", { className={classnames("searcher_results", {
@ -121,12 +129,12 @@ const Results = (props) => {
return ( return (
<div className="searcher_results_category" key={index}> <div className="searcher_results_category" key={index}>
<div className="searcher_results_category_header"> <div className="searcher_results_category_header">
<h1> <h2>
{createIconRender(decorator.icon)} {createIconRender(decorator.icon)}
<Translation> <Translation>
{(t) => t(decorator.label)} {(t) => t(decorator.label)}
</Translation> </Translation>
</h1> </h2>
</div> </div>
<div <div
@ -150,7 +158,7 @@ const Results = (props) => {
) )
} }
export default (props) => { const Searcher = (props) => {
const [loading, setLoading] = React.useState(false) const [loading, setLoading] = React.useState(false)
const [searchResult, setSearchResult] = React.useState(null) const [searchResult, setSearchResult] = React.useState(null)
const [searchValue, setSearchValue] = React.useState("") const [searchValue, setSearchValue] = React.useState("")
@ -253,13 +261,14 @@ export default (props) => {
/> />
{searchResult && props.renderResults && ( {searchResult && props.renderResults && (
<div className="results"> <Results
{loading && <antd.Skeleton active />} loading={loading}
{!loading && ( results={searchResult}
<Results results={searchResult} onClose={props.close} /> onClose={props.close}
)} />
</div>
)} )}
</div> </div>
) )
} }
export default Searcher

35
packages/app/src/components/Searcher/index.less
View File

@ -61,15 +61,8 @@ html {
gap: 10px; gap: 10px;
.results {
border-radius: 10px;
width: 100%; width: 100%;
overflow-x: hidden;
overflow-y: overlay;
}
&.small { &.small {
.ant-input-affix-wrapper { .ant-input-affix-wrapper {
padding: 7px; padding: 7px;
@ -107,6 +100,8 @@ html {
padding: 0 10px; padding: 0 10px;
background-color: var(--background-color-primary);
.ant-input-prefix { .ant-input-prefix {
font-size: 2rem; font-size: 2rem;
@ -131,7 +126,23 @@ html {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%;
gap: 10px; gap: 10px;
padding: 20px;
border-radius: 12px;
overflow-x: hidden;
overflow-y: overlay;
color: var(--text-color);
background-color: var(--background-color-primary);
.ant-result,
.ant-result-title,
.ant-result-subtitle {
color: var(--text-color);
}
&.one_column { &.one_column {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -146,10 +157,6 @@ html {
} }
.searcher_results_category { .searcher_results_category {
background-color: var(--background-color-primary);
padding: 20px;
border-radius: 8px; border-radius: 8px;
height: fit-content; height: fit-content;
@ -158,6 +165,12 @@ html {
gap: 20px; gap: 20px;
.searcher_results_category_header { .searcher_results_category_header {
background-color: var(--background-color-accent);
border-radius: 8px;
padding: 5px 10px;
width: fit-content;
h1 { h1 {
margin: 0; margin: 0;
} }