diff --git a/packages/app-extension/src/spotlight/SearchBody.tsx b/packages/app-extension/src/spotlight/SearchBody.tsx index fa8d7f22c..55872094d 100644 --- a/packages/app-extension/src/spotlight/SearchBody.tsx +++ b/packages/app-extension/src/spotlight/SearchBody.tsx @@ -33,89 +33,101 @@ export const SearchBody = ({ if (!searchFilter) return <div />; - return ( - <div - style={{ - padding: 16, - }} - > - <div> - <SpotlightContacts - selectedIndex={ - currentCounter < contacts.length ? currentCounter : null - } - contacts={contacts} - setSelectedContact={setSelectedContact} - /> - </div> - {groups.length > 0 ? <> - <Divider - style={{ - backgroundColor: theme.custom.colors.nav, - marginTop: 12, - marginBottom: 12, - }} + const rows = [ + { + component: ( + <div> + <SpotlightContacts + selectedIndex={ + currentCounter < contacts.length ? currentCounter : null + } + contacts={contacts} + setSelectedContact={setSelectedContact} /> + </div> + ), + count: contacts.length, + isFirst: contacts.length > 0, + }, + { + component: ( <div> <SpotlightGroups selectedIndex={ - currentCounter >= contacts.length && - currentCounter < contacts.length + groups.length - ? currentCounter - contacts.length - : null - } + currentCounter >= contacts.length && + currentCounter < contacts.length + groups.length + ? currentCounter - contacts.length + : null + } groups={groups} setOpen={setOpen} - /> - </div> - </> : null} - {nfts.length > 0 ? <> - <Divider - style={{ - backgroundColor: theme.custom.colors.nav, - marginTop: 12, - marginBottom: 12, - }} /> + </div> + ), + count: groups.length, + isFirst: contacts.length === 0 && groups.length > 0, + }, + { + component: ( <div> <SpotlightNfts selectedIndex={ - currentCounter >= contacts.length + groups.length && - currentCounter < contacts.length + groups.length + nfts.length - ? currentCounter - contacts.length - groups.length - : null - } + currentCounter >= contacts.length + groups.length && + currentCounter < contacts.length + groups.length + nfts.length + ? currentCounter - contacts.length - groups.length + : null + } nfts={nfts} setOpen={setOpen} - /> - </div> - </> : null} - {tokens.length > 0 ? <> - <Divider - style={{ - backgroundColor: theme.custom.colors.nav, - marginTop: 12, - marginBottom: 12, - }} /> + </div> + ), + count: nfts.length, + isFirst: contacts.length === 0 && groups.length === 0 && nfts.length > 0, + }, + { + component: ( <div> <SpotlightTokens selectedIndex={ - currentCounter >= - contacts.length + groups.length + nfts.length && - currentCounter < - contacts.length + groups.length + nfts.length + tokens.length - ? currentCounter - - contacts.length - - groups.length - - nfts.length - : null - } + currentCounter >= contacts.length + groups.length + nfts.length && + currentCounter < + contacts.length + groups.length + nfts.length + tokens.length + ? currentCounter - contacts.length - groups.length - nfts.length + : null + } tokens={tokens} setOpen={setOpen} - /> + /> </div> - </> : null} + ), + count: tokens.length, + isFirst: + contacts.length === 0 && + groups.length === 0 && + nfts.length === 0 && + tokens.length > 0, + }, + ]; + + return ( + <div + style={{ + padding: 16, + }} + > + {rows.map((row) => ( + <> + {row.count > 0 && !row.isFirst ? <Divider + style={{ + backgroundColor: theme.custom.colors.nav, + marginTop: 12, + marginBottom: 12, + }} + /> : null} + {row.component} + </> + ))} </div> ); }; diff --git a/packages/app-extension/src/spotlight/Spotlight.tsx b/packages/app-extension/src/spotlight/Spotlight.tsx index 2d771da81..4b07e0aeb 100644 --- a/packages/app-extension/src/spotlight/Spotlight.tsx +++ b/packages/app-extension/src/spotlight/Spotlight.tsx @@ -82,7 +82,7 @@ export const Spotlight = () => { sx={{ ...style }} style={{ background: theme.custom.colors.background, - width: isXs ? 343 : 400, + width: isXs ? 343 : 500, borderRadius: "12px", }} > @@ -208,19 +208,21 @@ function SpotlightInner({ searchFilter={searchFilter} setSearchFilter={setSearchFilter} /> - {searchFilter.trim() !== "" ? <> - <Divider - style={{ + {searchFilter.trim() !== "" ? ( + <> + <Divider + style={{ backgroundColor: theme.custom.colors.nav, }} /> - <SearchBody - arrowIndex={arrowIndex} - searchFilter={searchFilter} - setOpen={setOpen} - setSelectedContact={setSelectedContact} + <SearchBody + arrowIndex={arrowIndex} + searchFilter={searchFilter} + setOpen={setOpen} + setSelectedContact={setSelectedContact} /> - </> : null} + </> + ) : null} </div> ); }