Fixes + improvements to search UI

src/components/ICONS.jsx

@@ -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'),
 };

src/components/search-form.jsx

@@ -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"
+                class={`search-popover-item ${i === 0 ? 'focus' : ''}`}
-                hidden={hidden}
+                // 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>{' '}

src/pages/search.css

@@ -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;

src/pages/search.jsx

@@ -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>