fix news UI

app/components/news.py

@@ -161,8 +161,8 @@ def display_scrollable_news_section(df: pd.DataFrame, section_title: str, sectio
         """, unsafe_allow_html=True)
         return
 
-    # Section header
-    st.markdown(f"""
+    # Build header HTML
+    header_html = f"""
     <div style="
         background: linear-gradient(135deg, #2A2E39 0%, #1E222D 100%);
         border: 1px solid #363A45;
@@ -172,33 +172,67 @@ def display_scrollable_news_section(df: pd.DataFrame, section_title: str, sectio
     ">
         <div style="display: flex; justify-content: space-between; align-items: center;">
             <div>
-                <h3 style="
-                    color: #D1D4DC;
-                    margin: 0;
-                    font-size: 18px;
-                    font-weight: 600;
-                    font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
-                ">{section_icon} {section_title}</h3>
-                <p style="
-                    color: #787B86;
-                    margin: 4px 0 0 0;
-                    font-size: 12px;
-                ">{section_subtitle}</p>
+                <h3 style="color: #D1D4DC; margin: 0; font-size: 18px; font-weight: 600;">{section_icon} {section_title}</h3>
+                <p style="color: #787B86; margin: 4px 0 0 0; font-size: 12px;">{section_subtitle}</p>
             </div>
-            <div style="
-                background: rgba(56, 97, 251, 0.15);
-                color: #3861FB;
-                padding: 6px 12px;
-                border-radius: 6px;
-                font-size: 13px;
-                font-weight: 600;
-            ">{len(df.head(max_items))} stories</div>
+            <div style="background: rgba(56, 97, 251, 0.15); color: #3861FB; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;">{len(df.head(max_items))} stories</div>
         </div>
     </div>
-    """, unsafe_allow_html=True)
+    """
+
+    # Render header
+    st.markdown(header_html, unsafe_allow_html=True)
+
+    # Build all news cards HTML
+    news_cards_html = ""
+    for idx, row in df.head(max_items).iterrows():
+        news_item = row.to_dict()
+
+        # Calculate time ago
+        time_diff = datetime.now() - news_item['timestamp']
+        if time_diff.seconds < 60:
+            time_ago = f"{time_diff.seconds}s ago"
+        elif time_diff.seconds < 3600:
+            time_ago = f"{time_diff.seconds // 60}m ago"
+        else:
+            hours = time_diff.seconds // 3600
+            time_ago = f"{hours}h ago" if hours < 24 else f"{time_diff.days}d ago"
+
+        # Impact and sentiment colors
+        impact_colors = {'high': '#F23645', 'medium': '#FF9800', 'low': '#089981'}
+        sentiment_colors = {'positive': '#089981', 'negative': '#F23645', 'neutral': '#787B86'}
 
-    # Scrollable container with TradingView-style scrollbar
-    st.markdown(f"""
+        impact_color = impact_colors.get(news_item['impact'], '#787B86')
+        sentiment_color = sentiment_colors.get(news_item['sentiment'], '#787B86')
+
+        # Escape HTML
+        summary = html_module.escape(news_item.get('summary', '').strip())
+        source = html_module.escape(news_item['source'])
+        category = html_module.escape(news_item['category'])
+        url = html_module.escape(news_item['url'])
+
+        sentiment_symbol = '▲' if news_item['sentiment'] == 'positive' else '▼' if news_item['sentiment'] == 'negative' else '●'
+
+        # Build card HTML
+        news_cards_html += f"""
+        <div style="background: linear-gradient(135deg, #1E222D 0%, #131722 100%); border: 1px solid #2A2E39; border-radius: 8px; padding: 16px; margin-bottom: 12px; transition: all 0.2s ease; cursor: pointer; position: relative; overflow: hidden;" onmouseover="this.style.borderColor='#3861FB'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(56, 97, 251, 0.15)';" onmouseout="this.style.borderColor='#2A2E39'; this.style.transform='translateY(0)'; this.style.boxShadow='none';">
+            <div style="position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: {impact_color};"></div>
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; margin-left: 8px;">
+                <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
+                    <span style="color: #3861FB; font-weight: 600; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;">{source}</span>
+                    <span style="background: {impact_color}; color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px;">{news_item['impact'].upper()}</span>
+                    <span style="color: {sentiment_color}; font-size: 11px; font-weight: 600; padding: 2px 6px; border: 1px solid {sentiment_color}; border-radius: 4px;">{sentiment_symbol} {news_item['sentiment'].upper()}</span>
+                    <span style="color: #787B86; font-size: 11px; background: rgba(120, 123, 134, 0.1); padding: 2px 6px; border-radius: 4px;">#{category}</span>
+                </div>
+                <span style="color: #787B86; font-size: 11px; white-space: nowrap;">{time_ago}</span>
+            </div>
+            <div style="color: #D1D4DC; font-size: 14px; line-height: 1.5; margin-bottom: 8px; margin-left: 8px; font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;">{summary}</div>
+            <a href="{url}" target="_blank" style="color: #3861FB; font-size: 12px; text-decoration: none; margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; font-weight: 500;" onmouseover="this.style.color='#5880FF';" onmouseout="this.style.color='#3861FB';">Read Full Story →</a>
+        </div>
+        """
+
+    # Render scrollable container with all news cards using st.markdown
+    scrollable_html = f"""
     <style>
     .news-scroll-container {{
         height: {height};
@@ -209,37 +243,27 @@ def display_scrollable_news_section(df: pd.DataFrame, section_title: str, sectio
         border-radius: 0 0 8px 8px;
         padding: 16px;
     }}
-
-    /* TradingView-style scrollbar */
     .news-scroll-container::-webkit-scrollbar {{
         width: 8px;
     }}
-
     .news-scroll-container::-webkit-scrollbar-track {{
         background: #1E222D;
         border-radius: 4px;
     }}
-
     .news-scroll-container::-webkit-scrollbar-thumb {{
         background: #363A45;
         border-radius: 4px;
     }}
-
     .news-scroll-container::-webkit-scrollbar-thumb:hover {{
         background: #434651;
     }}
     </style>
-    """, unsafe_allow_html=True)
-
-    # Start scrollable container
-    st.markdown('<div class="news-scroll-container">', unsafe_allow_html=True)
-
-    # Display news items
-    for idx, row in df.head(max_items).iterrows():
-        display_tradingview_news_card(row.to_dict())
+    <div class="news-scroll-container">
+    {news_cards_html}
+    </div>
+    """
 
-    # End scrollable container
-    st.markdown('</div>', unsafe_allow_html=True)
+    st.markdown(scrollable_html, unsafe_allow_html=True)
 
 
 def display_news_feed(df: pd.DataFrame, max_items: int = 20):