mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-14 12:18:30 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fixes + improvements to search UI

Browse source
This commit is contained in:
Lim Chee Aun 2024-01-29 21:11:08 +08:00
parent 9792700f30
commit a66307b757
4 changed files with 84 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/ICONS.jsx
View file

@ -99,4 +99,5 @@ export const ICONS = {
speak: () => import('@iconify-icons/mingcute/radar-line'),
building: () => import('@iconify-icons/mingcute/building-5-line'),
history: () => import('@iconify-icons/mingcute/history-2-line'),
document: () => import('@iconify-icons/mingcute/document-line'),
};

42
src/components/search-form.jsx
View file

@ -73,6 +73,7 @@ const SearchForm = forwardRef((props, ref) => {
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
onSearch={(e) => {
if (!e.target.value) {
setSearchParams({});
@ -84,6 +85,9 @@ const SearchForm = forwardRef((props, ref) => {
}}
onFocus={() => {
setSearchMenuOpen(true);
formRef.current
?.querySelector('.search-popover-item')
?.classList.add('focus');
}}
onBlur={() => {
setTimeout(() => {
@ -178,8 +182,33 @@ const SearchForm = forwardRef((props, ref) => {
}}
/>
<div class="search-popover" hidden={!searchMenuOpen || !query}>
{/* {!!query && (
<Link
to={`/search?q=${encodeURIComponent(query)}`}
class="search-popover-item focus"
onClick={(e) => {
props?.onSubmit?.(e);
}}
>
<Icon icon="search" />
<span>{query}</span>
</Link>
)} */}
{!!query &&
[
{
label: (
<>
{query}{' '}
<small class="insignificant">
‒ accounts, hashtags &amp; posts
</small>
</>
),
to: `/search?q=${encodeURIComponent(query)}`,
top: !type && !/\s/.test(query),
hidden: !!type,
},
{
label: (
<>
@ -188,6 +217,8 @@ const SearchForm = forwardRef((props, ref) => {
),
to: `/search?q=${encodeURIComponent(query)}&type=statuses`,
hidden: /^https?:/.test(query),
top: /\s/.test(query),
icon: 'document',
},
{
label: (
@ -200,6 +231,7 @@ const SearchForm = forwardRef((props, ref) => {
/^@/.test(query) || /^https?:/.test(query) || /\s/.test(query),
top: /^#/.test(query),
type: 'link',
icon: 'hashtag',
},
{
label: (
@ -219,6 +251,7 @@ const SearchForm = forwardRef((props, ref) => {
</>
),
to: `/search?q=${encodeURIComponent(query)}&type=accounts`,
icon: 'group',
},
]
.sort((a, b) => {
@ -226,17 +259,18 @@ const SearchForm = forwardRef((props, ref) => {
if (!a.top && b.top) return 1;
return 0;
})
.map(({ label, to, hidden, type }) => (
.filter(({ hidden }) => !hidden)
.map(({ label, to, icon, type }, i) => (
<Link
to={to}
class="search-popover-item"
hidden={hidden}
class={`search-popover-item ${i === 0 ? 'focus' : ''}`}
// hidden={hidden}
onClick={(e) => {
props?.onSubmit?.(e);
}}
>
<Icon
icon={type === 'link' ? 'arrow-right' : 'search'}
icon={icon || (type === 'link' ? 'arrow-right' : 'search')}
class="more-insignificant"
/>
<span>{label}</span>{' '}

12
src/pages/search.css
View file

@ -44,6 +44,18 @@
}
}
#search-page h2 {
a {
.icon {
vertical-align: middle;
transition: transform 0.2s;
}
&:hover .icon {
transform: translateX(4px);
}
}
}
#search-page ul.accounts-list {
display: flex;
flex-wrap: wrap;

39
src/pages/search.jsx
View file

@ -253,7 +253,14 @@ function Search({ columnMode, ...props }) {
{(!type || type === 'accounts') && (
<>
{type !== 'accounts' && (
<h2 class="timeline-header">Accounts</h2>
<h2 class="timeline-header">
Accounts{' '}
<Link
to={`/search?q=${encodeURIComponent(q)}&type=accounts`}
>
<Icon icon="arrow-right" size="l" />
</Link>
</h2>
)}
{accountResults.length > 0 ? (
<>
@ -273,7 +280,9 @@ function Search({ columnMode, ...props }) {
<div class="ui-state">
<Link
class="plain button"
to={`/search?q=${q}&type=accounts`}
to={`/search?q=${encodeURIComponent(
q,
)}&type=accounts`}
>
See more accounts <Icon icon="arrow-right" />
</Link>
@ -295,7 +304,14 @@ function Search({ columnMode, ...props }) {
{(!type || type === 'hashtags') && (
<>
{type !== 'hashtags' && (
<h2 class="timeline-header">Hashtags</h2>
<h2 class="timeline-header">
Hashtags{' '}
<Link
to={`/search?q=${encodeURIComponent(q)}&type=hashtags`}
>
<Icon icon="arrow-right" size="l" />
</Link>
</h2>
)}
{hashtagResults.length > 0 ? (
<>
@ -331,7 +347,9 @@ function Search({ columnMode, ...props }) {
<div class="ui-state">
<Link
class="plain button"
to={`/search?q=${q}&type=hashtags`}
to={`/search?q=${encodeURIComponent(
q,
)}&type=hashtags`}
>
See more hashtags <Icon icon="arrow-right" />
</Link>
@ -353,7 +371,14 @@ function Search({ columnMode, ...props }) {
{(!type || type === 'statuses') && (
<>
{type !== 'statuses' && (
<h2 class="timeline-header">Posts</h2>
<h2 class="timeline-header">
Posts{' '}
<Link
to={`/search?q=${encodeURIComponent(q)}&type=statuses`}
>
<Icon icon="arrow-right" size="l" />
</Link>
</h2>
)}
{statusResults.length > 0 ? (
<>
@ -377,7 +402,9 @@ function Search({ columnMode, ...props }) {
<div class="ui-state">
<Link
class="plain button"
to={`/search?q=${q}&type=statuses`}
to={`/search?q=${encodeURIComponent(
q,
)}&type=statuses`}
>
See more posts <Icon icon="arrow-right" />
</Link>