Enhance search results display

Author: brymut

components/items.js

@@ -55,7 +55,14 @@ export default function Items ({ ssrData, variables = DEFAULT_VARIABLES, query,
       <div className={styles.grid}>
         {ad && <ListItem item={ad} ad />}
         {itemsWithPins.filter(filter).map((item, i) => (
-          <ListItem key={`${item.id}-${i + 1}`} item={item} rank={rank && i + 1} itemClassName={variables.includeComments ? 'py-2' : ''} pinnable={isHome ? false : pins?.length > 0} />
+          <ListItem
+            key={`${item.id}-${i + 1}`}
+            item={item}
+            rank={rank && i + 1}
+            itemClassName={variables.includeComments ? 'py-2' : ''}
+            pinnable={isHome ? false : pins?.length > 0}
+            isSearchResults={Boolean(variables.includeComments && variables.q)}
+          />
         ))}
       </div>
       <Foooter
@@ -67,16 +74,31 @@ export default function Items ({ ssrData, variables = DEFAULT_VARIABLES, query,
   )
 }
 
-export function ListItem ({ item, ...props }) {
-  return (
-    item.parentId
-      ? <CommentFlat item={item} noReply includeParent {...props} />
-      : (item.isJob
-          ? <ItemJob item={item} />
-          : (item.searchText
-              ? <ItemFull item={item} noReply {...props} />
-              : <Item item={item} {...props} />))
-  )
+export function ListItem ({ item, isSearchResults, ...props }) {
+  const searchClasses = isSearchResults
+    ? [
+        styles.searchResult,
+        item.parentId ? styles.searchResultComment : styles.searchResultPost
+      ].join(' ')
+    : ''
+
+  const content = item.parentId
+    ? <CommentFlat item={item} noReply includeParent {...props} />
+    : (item.isJob
+        ? <ItemJob item={item} />
+        : (item.searchText
+            ? <ItemFull item={item} noReply {...props} />
+            : <Item item={item} {...props} />))
+
+  if (isSearchResults) {
+    return (
+      <div className={searchClasses}>
+        {content}
+      </div>
+    )
+  }
+
+  return content
 }
 
 export function ItemsSkeleton ({ rank, startRank = 0, limit = LIMIT, Footer }) {

components/items.module.css

@@ -1,4 +1,20 @@
 .grid {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
+}
+  
+.searchResult {
+    background: var(--theme-commentBg);
+    margin-bottom: 10px;
+    padding-left: 0.75rem;
+    grid-column: 1 / -1;
+}
+  
+.searchResultPost {
+    border-left: 3px solid var(--bs-secondary);
+}
+  
+.searchResultComment {
+    border-left: 3px solid var(--bs-info);
+    border-radius: 0;
 }

pages/search.js

@@ -19,13 +19,27 @@ export default function Index ({ ssrData }) {
   return (
     <SearchLayout sub={sub}>
       {variables.q
-        ? <Items
-            ssrData={ssrData}
-            query={SUB_SEARCH}
-            destructureData={data => data.search}
-            variables={variables}
-            noMoreText='NO MORE'
-          />
+        ? (
+          <>
+            <div className='text-muted small d-flex align-items-center gap-3 mb-2'>
+              <div className='d-flex align-items-center gap-2'>
+                <span style={{ display: 'inline-block', height: '14px', borderLeft: '3px solid var(--bs-secondary)' }} />
+                <span>post</span>
+              </div>
+              <div className='d-flex align-items-center gap-2'>
+                <span style={{ display: 'inline-block', height: '14px', borderLeft: '3px solid var(--bs-info)' }} />
+                <span>comment</span>
+              </div>
+            </div>
+            <Items
+              ssrData={ssrData}
+              query={SUB_SEARCH}
+              destructureData={data => data.search}
+              variables={variables}
+              noMoreText='NO MORE'
+            />
+          </>
+          )
         : (
           <div className={styles.content}>
             <div className={styles.box}>