Filter bar + helper popup for search form

src/components/link.jsx

@@ -19,7 +19,7 @@ const Link = forwardRef((props, ref) => {
   let hash = (location.hash || '').replace(/^#/, '').trim();
   if (hash === '') hash = '/';
   const { to, ...restProps } = props;
-  const isActive = hash === to;
+  const isActive = decodeURIComponent(hash) === to;
   return (
     <a
       ref={ref}

src/pages/search.css

@@ -43,3 +43,61 @@ ul.link-list.hashtag-list li a {
     background-color: var(--bg-color);
   }
 }
+
+.search-popover-container {
+  position: relative;
+}
+.search-popover {
+  position: absolute;
+  left: 8px;
+  max-width: calc(100% - 16px);
+  /* right: 8px; */
+  background-color: var(--bg-color);
+  border: 1px solid var(--outline-color);
+  box-shadow: 0 4px 24px var(--drop-shadow-color);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  animation: appear-smooth 0.2s ease-out;
+  overflow: hidden;
+}
+.search-popover[hidden] {
+  display: none;
+}
+.search-popover-item {
+  text-decoration: none;
+  padding: 8px 16px 8px 8px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.search-popover-item[hidden] {
+  display: none;
+}
+.search-popover-item:is(:hover, :focus, .focus) {
+  background-color: var(--button-bg-color);
+  color: var(--button-text-color);
+}
+.search-popover-item :is(mark, q) {
+  background-color: var(--bg-faded-blur-color);
+  color: inherit;
+}
+.search-popover-item:is(:hover, :focus, .focus) :is(mark, q) {
+  background-color: var(--button-bg-color);
+}
+.search-popover:hover .search-popover-item.focus:not(:hover, :focus),
+.search-popover:hover
+  .search-popover-item.focus:not(:hover, :focus)
+  :is(mark, q) {
+  background-color: unset;
+  color: unset;
+}
+.search-popover-item > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.search-popover-item:is(:hover, :focus, .focus) > .icon {
+  opacity: 1;
+}

src/pages/search.jsx

@@ -1,6 +1,7 @@
 import './search.css';
 
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { forwardRef } from 'preact/compat';
+import { useEffect, useImperativeHandle, useRef, useState } from 'preact/hooks';
 import { useParams, useSearchParams } from 'react-router-dom';
 
 import AccountBlock from '../components/account-block';
@@ -18,25 +19,44 @@ function Search(props) {
     instance: params.instance,
   });
   const [uiState, setUiState] = useState('default');
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
-  const searchFieldRef = useRef();
+  const searchFormRef = useRef();
   const q = props?.query || searchParams.get('q');
-  useTitle(q ? `Search: ${q}` : 'Search', `/search`);
+  const type = props?.type || searchParams.get('type');
+  useTitle(
+    q
+      ? `Search: ${q}${
+          type
+            ? ` (${
+                {
+                  statuses: 'Posts',
+                  accounts: 'Accounts',
+                  hashtags: 'Hashtags',
+                }[type]
+              })`
+            : ''
+        }`
+      : 'Search',
+    `/search`,
+  );
 
   const [statusResults, setStatusResults] = useState([]);
   const [accountResults, setAccountResults] = useState([]);
   const [hashtagResults, setHashtagResults] = useState([]);
   useEffect(() => {
-    searchFieldRef.current?.focus?.();
+    // searchFieldRef.current?.focus?.();
+    // searchFormRef.current?.focus?.();
     if (q) {
-      searchFieldRef.current.value = q;
+      // searchFieldRef.current.value = q;
+      searchFormRef.current?.setValue?.(q);
 
       setUiState('loading');
       (async () => {
         const results = await masto.v2.search({
           q,
-          limit: 20,
+          limit: type ? 40 : 5,
           resolve: authenticated,
+          type,
         });
         console.log(results);
         setStatusResults(results.statuses);
@@ -45,7 +65,7 @@ function Search(props) {
         setUiState('default');
       })();
     }
-  }, [q, instance]);
+  }, [q, type, instance]);
 
   return (
     <div id="search-page" class="deck-container">
@@ -55,50 +75,83 @@ function Search(props) {
             <div class="header-side">
               <NavMenu />
             </div>
-            <form
+            <SearchForm ref={searchFormRef} />
-              onSubmit={(e) => {
+            <div class="header-side">&nbsp;</div>
-                e.preventDefault();
-                const { q } = e.target;
-                if (q.value) {
-                  setSearchParams({ q: q.value });
-                } else {
-                  setSearchParams({});
-                }
-              }}
-            >
-              <input
-                ref={searchFieldRef}
-                name="q"
-                type="search"
-                autofocus
-                placeholder="Search"
-                onSearch={(e) => {
-                  if (!e.target.value) {
-                    setSearchParams({});
-                  }
-                }}
-              />
-            </form>
-            <div class="header-side" />
           </div>
         </header>
         <main>
+          {!!q && (
+            <div class="filter-bar">
+              {!!type && <Link to={`/search${q ? `?q=${q}` : ''}`}>‹ All</Link>}
+              {[
+                {
+                  label: 'Accounts',
+                  type: 'accounts',
+                  to: `/search?q=${q}&type=accounts`,
+                },
+                {
+                  label: 'Hashtags',
+                  type: 'hashtags',
+                  to: `/search?q=${q}&type=hashtags`,
+                },
+                {
+                  label: 'Posts',
+                  type: 'statuses',
+                  to: `/search?q=${q}&type=statuses`,
+                },
+              ]
+                .sort((a, b) => {
+                  if (a.type === type) return -1;
+                  if (b.type === type) return 1;
+                  return 0;
+                })
+                .map((link) => (
+                  <Link to={link.to}>{link.label}</Link>
+                ))}
+            </div>
+          )}
           {!!q && uiState !== 'loading' ? (
             <>
+              {(!type || type === 'accounts') && (
+                <>
+                  {type !== 'accounts' && (
                     <h2 class="timeline-header">Accounts</h2>
+                  )}
                   {accountResults.length > 0 ? (
+                    <>
                       <ul class="timeline flat accounts-list">
                         {accountResults.map((account) => (
                           <li>
-                      <AccountBlock account={account} instance={instance} />
+                            <AccountBlock
+                              account={account}
+                              instance={instance}
+                            />
                           </li>
                         ))}
                       </ul>
+                      {type !== 'accounts' && (
+                        <div class="ui-state">
+                          <Link
+                            class="plain button"
+                            to={`/search?q=${q}&type=accounts`}
+                          >
+                            See more accounts <Icon icon="arrow-right" />
+                          </Link>
+                        </div>
+                      )}
+                    </>
                   ) : (
                     <p class="ui-state">No accounts found.</p>
                   )}
+                </>
+              )}
+              {(!type || type === 'hashtags') && (
+                <>
+                  {type !== 'hashtags' && (
                     <h2 class="timeline-header">Hashtags</h2>
+                  )}
                   {hashtagResults.length > 0 ? (
+                    <>
                       <ul class="link-list hashtag-list">
                         {hashtagResults.map((hashtag) => (
                           <li>
@@ -115,11 +168,29 @@ function Search(props) {
                           </li>
                         ))}
                       </ul>
+                      {type !== 'hashtags' && (
+                        <div class="ui-state">
+                          <Link
+                            class="plain button"
+                            to={`/search?q=${q}&type=hashtags`}
+                          >
+                            See more hashtags <Icon icon="arrow-right" />
+                          </Link>
+                        </div>
+                      )}
+                    </>
                   ) : (
                     <p class="ui-state">No hashtags found.</p>
                   )}
+                </>
+              )}
+              {(!type || type === 'statuses') && (
+                <>
+                  {type !== 'statuses' && (
                     <h2 class="timeline-header">Posts</h2>
+                  )}
                   {statusResults.length > 0 ? (
+                    <>
                       <ul class="timeline">
                         {statusResults.map((status) => (
                           <li>
@@ -136,10 +207,23 @@ function Search(props) {
                           </li>
                         ))}
                       </ul>
+                      {type !== 'statuses' && (
+                        <div class="ui-state">
+                          <Link
+                            class="plain button"
+                            to={`/search?q=${q}&type=statuses`}
+                          >
+                            See more posts <Icon icon="arrow-right" />
+                          </Link>
+                        </div>
+                      )}
+                    </>
                   ) : (
                     <p class="ui-state">No posts found.</p>
                   )}
                 </>
+              )}
+            </>
           ) : uiState === 'loading' ? (
             <p class="ui-state">
               <Loader abrupt />
@@ -156,3 +240,209 @@ function Search(props) {
 }
 
 export default Search;
+
+const SearchForm = forwardRef((props, ref) => {
+  const { instance } = api();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchMenuOpen, setSearchMenuOpen] = useState(false);
+  const [query, setQuery] = useState(searchParams.q || '');
+  const formRef = useRef(null);
+
+  const searchFieldRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    setValue: (value) => {
+      setQuery(value);
+    },
+    focus: () => {
+      searchFieldRef.current.focus();
+    },
+  }));
+
+  return (
+    <form
+      ref={formRef}
+      class="search-popover-container"
+      onSubmit={(e) => {
+        e.preventDefault();
+
+        if (query) {
+          setSearchParams({
+            q: query,
+          });
+        } else {
+          setSearchParams({});
+        }
+      }}
+    >
+      <input
+        ref={searchFieldRef}
+        value={query}
+        name="q"
+        type="search"
+        // autofocus
+        placeholder="Search"
+        onSearch={(e) => {
+          if (!e.target.value) {
+            setSearchParams({});
+          }
+        }}
+        onInput={(e) => {
+          setQuery(e.target.value);
+          setSearchMenuOpen(true);
+        }}
+        onFocus={() => {
+          setSearchMenuOpen(true);
+        }}
+        onBlur={() => {
+          setTimeout(() => {
+            setSearchMenuOpen(false);
+          }, 100);
+          formRef.current
+            ?.querySelector('.search-popover-item.focus')
+            ?.classList.remove('focus');
+        }}
+        onKeyDown={(e) => {
+          const { key } = e;
+          switch (key) {
+            case 'Escape':
+              setSearchMenuOpen(false);
+              break;
+            case 'Down':
+            case 'ArrowDown':
+              e.preventDefault();
+              if (searchMenuOpen) {
+                const focusItem = formRef.current.querySelector(
+                  '.search-popover-item.focus',
+                );
+                if (focusItem) {
+                  let nextItem = focusItem.nextElementSibling;
+                  while (nextItem && nextItem.hidden) {
+                    nextItem = nextItem.nextElementSibling;
+                  }
+                  if (nextItem) {
+                    nextItem.classList.add('focus');
+                    const siblings = Array.from(
+                      nextItem.parentElement.children,
+                    ).filter((el) => el !== nextItem);
+                    siblings.forEach((el) => {
+                      el.classList.remove('focus');
+                    });
+                  }
+                } else {
+                  const firstItem = formRef.current.querySelector(
+                    '.search-popover-item',
+                  );
+                  if (firstItem) {
+                    firstItem.classList.add('focus');
+                  }
+                }
+              }
+              break;
+            case 'Up':
+            case 'ArrowUp':
+              e.preventDefault();
+              if (searchMenuOpen) {
+                const focusItem = document.querySelector(
+                  '.search-popover-item.focus',
+                );
+                if (focusItem) {
+                  let prevItem = focusItem.previousElementSibling;
+                  while (prevItem && prevItem.hidden) {
+                    prevItem = prevItem.previousElementSibling;
+                  }
+                  if (prevItem) {
+                    prevItem.classList.add('focus');
+                    const siblings = Array.from(
+                      prevItem.parentElement.children,
+                    ).filter((el) => el !== prevItem);
+                    siblings.forEach((el) => {
+                      el.classList.remove('focus');
+                    });
+                  }
+                } else {
+                  const lastItem = document.querySelector(
+                    '.search-popover-item:last-child',
+                  );
+                  if (lastItem) {
+                    lastItem.classList.add('focus');
+                  }
+                }
+              }
+              break;
+            case 'Enter':
+              if (searchMenuOpen) {
+                const focusItem = document.querySelector(
+                  '.search-popover-item.focus',
+                );
+                if (focusItem) {
+                  e.preventDefault();
+                  focusItem.click();
+                }
+                setSearchMenuOpen(false);
+              }
+              break;
+          }
+        }}
+      />
+      <div class="search-popover" hidden={!searchMenuOpen || !query}>
+        {!!query &&
+          [
+            {
+              label: (
+                <>
+                  Posts with <q>{query}</q>
+                </>
+              ),
+              to: `/search?q=${encodeURIComponent(query)}&type=statuses`,
+              hidden: /^https?:/.test(query),
+            },
+            {
+              label: (
+                <>
+                  Posts tagged with <mark>#{query.replace(/^#/, '')}</mark>
+                </>
+              ),
+              to: `/${instance}/t/${query.replace(/^#/, '')}`,
+              hidden:
+                /^@/.test(query) || /^https?:/.test(query) || /\s/.test(query),
+              top: /^#/.test(query),
+              type: 'link',
+            },
+            {
+              label: (
+                <>
+                  Look up <mark>{query}</mark>
+                </>
+              ),
+              to: `/${query}`,
+              hidden: !/^https?:/.test(query),
+              top: /^https?:/.test(query),
+              type: 'link',
+            },
+            {
+              label: (
+                <>
+                  Accounts with <q>{query}</q>
+                </>
+              ),
+              to: `/search?q=${encodeURIComponent(query)}&type=accounts`,
+            },
+          ]
+            .sort((a, b) => {
+              if (a.top && !b.top) return -1;
+              if (!a.top && b.top) return 1;
+              return 0;
+            })
+            .map(({ label, to, hidden, type }) => (
+              <Link to={to} class="search-popover-item" hidden={hidden}>
+                <Icon
+                  icon={type === 'link' ? 'arrow-right' : 'search'}
+                  class="more-insignificant"
+                />
+                <span>{label}</span>{' '}
+              </Link>
+            ))}
+      </div>
+    </form>
+  );
+});