From 50a6cf649940dce5c77aae9cda4f88f12e26d3a2 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 14 Oct 2025 10:49:36 +0200
Subject: [PATCH] fix(explore): remove max-width constraint for grid layout

- Remove me-tab-content wrapper that was limiting width to 600px
- Allow explore-grid to use full width for proper multi-column layout
- Blog posts now display in proper grid format
---
 src/components/Explore.tsx       | 16 ++++----
 src/components/HighlightCard.tsx | 63 ++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 7 deletions(-)
 create mode 100644 src/components/HighlightCard.tsx

diff --git a/src/components/Explore.tsx b/src/components/Explore.tsx
index fb495520..1b9431b9 100644
--- a/src/components/Explore.tsx
+++ b/src/components/Explore.tsx
@@ -10,7 +10,7 @@ import { fetchBlogPostsFromAuthors, BlogPostPreview } from '../services/exploreS
 import { fetchHighlightsFromAuthors } from '../services/highlightService'
 import { Highlight } from '../types/highlights'
 import BlogPostCard from './BlogPostCard'
-import { HighlightItem } from './HighlightItem'
+import { HighlightCard } from './HighlightCard'
 import { getCachedPosts, upsertCachedPost, setCachedPosts, getCachedHighlights, upsertCachedHighlight, setCachedHighlights } from '../services/exploreCache'
 import { usePullToRefresh } from '../hooks/usePullToRefresh'
 import PullToRefreshIndicator from './PullToRefreshIndicator'
@@ -238,11 +238,15 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
         ) : (
           <div className="explore-grid">
             {highlights.map((highlight) => (
-              <HighlightItem
+              <HighlightCard
                 key={highlight.id}
                 highlight={highlight}
-                relayPool={relayPool}
-                onHighlightDelete={handleHighlightDelete}
+                onClick={() => {
+                  // Navigate to the highlighted article if available
+                  if (highlight.url) {
+                    navigate(`/r/${encodeURIComponent(highlight.url)}`)
+                  }
+                }}
               />
             ))}
           </div>
@@ -323,9 +327,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
         </div>
       </div>
 
-      <div className="me-tab-content">
-        {renderTabContent()}
-      </div>
+      {renderTabContent()}
     </div>
   )
 }
diff --git a/src/components/HighlightCard.tsx b/src/components/HighlightCard.tsx
new file mode 100644
index 00000000..17631b76
--- /dev/null
+++ b/src/components/HighlightCard.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons'
+import { Highlight } from '../types/highlights'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+import { formatDateCompact } from '../utils/bookmarkUtils'
+
+interface HighlightCardProps {
+  highlight: Highlight
+  onClick?: () => void
+}
+
+export const HighlightCard: React.FC<HighlightCardProps> = ({ 
+  highlight,
+  onClick 
+}) => {
+  const profile = useEventModel(Models.ProfileModel, [highlight.pubkey])
+  
+  const getUserDisplayName = () => {
+    if (profile?.name) return profile.name
+    if (profile?.display_name) return profile.display_name
+    return `${highlight.pubkey.slice(0, 8)}...`
+  }
+
+  const truncateText = (text: string, maxLength: number) => {
+    if (text.length <= maxLength) return text
+    return text.slice(0, maxLength) + '...'
+  }
+
+  return (
+    <div 
+      className="blog-post-card highlight-card" 
+      onClick={onClick}
+      style={{ cursor: onClick ? 'pointer' : 'default' }}
+    >
+      <div className="highlight-card-header">
+        <FontAwesomeIcon icon={faQuoteLeft} className="highlight-card-icon" />
+      </div>
+      <div className="blog-post-card-content">
+        <div className="highlight-card-text">
+          {truncateText(highlight.text, 200)}
+        </div>
+        {highlight.comment && (
+          <div className="highlight-card-comment">
+            {truncateText(highlight.comment, 100)}
+          </div>
+        )}
+        <div className="blog-post-card-footer">
+          <div className="blog-post-card-author">
+            <FontAwesomeIcon icon={faQuoteLeft} style={{ fontSize: '0.7rem', opacity: 0.5 }} />
+            {' '}
+            {getUserDisplayName()}
+          </div>
+          <div className="blog-post-card-date">
+            {formatDateCompact(highlight.timestamp)}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+