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: {
icon: "FiAlbum",
icon: "MdAlbum",
label: "Tracks",
renderItem: (props) => {
const { item, onClick } = props
return (
<div className="suggestion" onClick={onClick}>
<MusicTrack track={item} />
<div className="suggestion">
<MusicTrack track={item} onClick={onClick} />
</div>
)
},
},
playlists: {
icon: "FiAlbum",
icon: "MdPlaylistPlay",
label: "Playlists",
renderItem: (props) => {
return (
@ -83,18 +83,6 @@ const Results = (props) => {
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) => {
if (typeof decorator.onClick === "function") {
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 (
<div
className={classnames("searcher_results", {
@ -121,12 +129,12 @@ const Results = (props) => {
return (
<div className="searcher_results_category" key={index}>
<div className="searcher_results_category_header">
<h1>
<h2>
{createIconRender(decorator.icon)}
<Translation>
{(t) => t(decorator.label)}
</Translation>
</h1>
</h2>
</div>
<div
@ -150,7 +158,7 @@ const Results = (props) => {
)
}
export default (props) => {
const Searcher = (props) => {
const [loading, setLoading] = React.useState(false)
const [searchResult, setSearchResult] = React.useState(null)
const [searchValue, setSearchValue] = React.useState("")
@ -253,13 +261,14 @@ export default (props) => {
/>
{searchResult && props.renderResults && (
<div className="results">
{loading && <antd.Skeleton active />}
{!loading && (
<Results results={searchResult} onClose={props.close} />
)}
</div>
<Results
loading={loading}
results={searchResult}
onClose={props.close}
/>
)}
</div>
)
}
export default Searcher

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

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