From 62eb6d6b30935e260ae56cdb10463da291f84e56 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 11 Feb 2023 17:01:43 +0800
Subject: [PATCH] Reuse style for search page, time to surface it

---
 src/app.css             | 28 ++++++++++++++++++++++++----
 src/components/menu.jsx |  4 ++--
 src/pages/search.jsx    |  8 ++++++--
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/app.css b/src/app.css
index 4fc3151b..a728da2b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1223,27 +1223,47 @@ ul.link-list {
   list-style: none;
   padding: 16px;
   margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
 }
 ul.link-list li {
   padding: 0;
   margin: 0;
 }
 ul.link-list li a {
+  --radius: 8px;
   display: block;
   background-color: var(--bg-faded-color);
-  border-radius: 8px;
   line-height: 1.25;
   padding: 12px;
   text-decoration: none;
   line-height: 1.4;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+ul.link-list li:first-child a {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+}
+ul.link-list li:last-child a {
+  border-bottom-left-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
+ul.link-list li a:is(:hover, :focus) {
+  color: var(--text-color);
+}
+ul.link-list li a:active {
+  filter: brightness(0.9);
 }
 ul.link-list li a * {
   vertical-align: middle;
 }
+ul.link-list li a .icon {
+  flex-shrink: 0;
+}
 
 @media (min-width: 40em) {
   ul.link-list li a {
diff --git a/src/components/menu.jsx b/src/components/menu.jsx
index 461263d8..90048eca 100644
--- a/src/components/menu.jsx
+++ b/src/components/menu.jsx
@@ -41,9 +41,9 @@ function NavMenu(props) {
         <Icon icon="heart" size="l" /> <span>Favourites</span>
       </MenuLink>
       <MenuDivider />
-      {/* <MenuLink to={`/search`}>
+      <MenuLink to={`/search`}>
         <Icon icon="search" size="l" /> <span>Search</span>
-      </MenuLink> */}
+      </MenuLink>
       <MenuLink to={`/${instance}/p/l`}>
         <Icon icon="group" size="l" /> <span>Local</span>
       </MenuLink>
diff --git a/src/pages/search.jsx b/src/pages/search.jsx
index 19154c4b..be1d4028 100644
--- a/src/pages/search.jsx
+++ b/src/pages/search.jsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import { useSearchParams } from 'react-router-dom';
 
 import Avatar from '../components/avatar';
+import Icon from '../components/icon';
 import Link from '../components/link';
 import Loader from '../components/loader';
 import Menu from '../components/menu';
@@ -54,6 +55,8 @@ function Search() {
                 const { q } = e.target;
                 if (q.value) {
                   setSearchParams({ q: q.value });
+                } else {
+                  setSearchParams({});
                 }
               }}
             >
@@ -91,7 +94,7 @@ function Search() {
               )}
               <h2 class="timeline-header">Hashtags</h2>
               {hashtagResults.length > 0 ? (
-                <ul>
+                <ul class="link-list">
                   {hashtagResults.map((hashtag) => (
                     <li>
                       <Link
@@ -101,7 +104,8 @@ function Search() {
                             : `/t/${hashtag.name}`
                         }
                       >
-                        #{hashtag.name}
+                        <Icon icon="hashtag" />
+                        <span>{hashtag.name}</span>
                       </Link>
                     </li>
                   ))}