From ba42078b160356470188f01157b3cb99be67ab77 Mon Sep 17 00:00:00 2001
From: brymut <mutaiwork@gmail.com>
Date: Mon, 25 Aug 2025 12:48:38 +0300
Subject: [PATCH] Enhance search results display

---
 components/items.js         | 44 +++++++++++++++++++++++++++----------
 components/items.module.css | 16 ++++++++++++++
 pages/search.js             | 28 +++++++++++++++++------
 3 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/components/items.js b/components/items.js
index 738ee76440..e0717406f1 100644
--- a/components/items.js
+++ b/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 }) {
diff --git a/components/items.module.css b/components/items.module.css
index bf34a2e98d..8855fedd4b 100644
--- a/components/items.module.css
+++ b/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: 1px solid var(--bs-secondary);
+}
+  
+.searchResultComment {
+    border-left: 1px solid var(--bs-info);
+    border-radius: 0;
 }
\ No newline at end of file
diff --git a/pages/search.js b/pages/search.js
index ba7ddd5aa8..4f278f861b 100644
--- a/pages/search.js
+++ b/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-2 mb-1'>
+              <div className='d-flex align-items-center gap-1'>
+                <span style={{ display: 'inline-block', height: '12px', borderLeft: '1px solid var(--bs-secondary)' }} />
+                <span>post</span>
+              </div>
+              <div className='d-flex align-items-center gap-1'>
+                <span style={{ display: 'inline-block', height: '12px', borderLeft: '1px 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}>