fix news feed

app/components/news.py

@@ -7,24 +7,7 @@ import html as html_module
 
 
 def display_news_card(news_item: dict):
-    """Display a single news card with professional styling."""
-
-    # Sentiment color mapping
-    sentiment_colors = {
-        'positive': '#10b981',  # Green
-        'negative': '#ef4444',  # Red
-        'neutral': '#6b7280'    # Gray
-    }
-
-    # Impact badge styling
-    impact_styles = {
-        'high': 'background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;',
-        'medium': 'background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;',
-        'low': 'background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd;'
-    }
-
-    sentiment_color = sentiment_colors.get(news_item['sentiment'], '#6b7280')
-    impact_style = impact_styles.get(news_item['impact'], '')
+    """Display a single news card with professional styling using Streamlit components."""
 
     # Calculate time ago
     time_diff = datetime.now() - news_item['timestamp']
@@ -35,78 +18,52 @@ def display_news_card(news_item: dict):
     else:
         time_ago = f"{time_diff.seconds // 3600}h ago"
 
-    # Breaking news indicator
-    breaking_badge = ""
-    if news_item.get('is_breaking', False):
-        breaking_badge = """
-        <span style='padding: 4px 8px; border-radius: 4px; font-size: 11px;
-                     font-weight: 700; background: #dc2626; color: white;
-                     margin-left: 8px; animation: pulse 2s infinite;'>
-            🔴 BREAKING
-        </span>
-        """
-
-    html = f"""
-    <div style='background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
-                border: 1px solid #374151; border-radius: 12px;
-                padding: 20px; margin-bottom: 16px;
-                transition: all 0.3s; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);'>
-
-        <div style='display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;'>
-            <div style='flex: 1;'>
-                <!-- Header: Source + Badges -->
-                <div style='display: flex; gap: 10px; margin-bottom: 12px; align-items: center; flex-wrap: wrap;'>
-                    <span style='color: #60a5fa; font-size: 14px; font-weight: 600;'>
-                        {news_item['source']}
-                    </span>
-                    <span style='padding: 4px 10px; border-radius: 6px; font-size: 11px;
-                                 font-weight: 600; {impact_style} text-transform: uppercase;'>
-                        {news_item['impact']} IMPACT
-                    </span>
-                    <span style='display: inline-flex; align-items: center; gap: 6px;
-                                 padding: 4px 10px; border-radius: 6px; font-size: 11px;
-                                 background: rgba(107, 114, 128, 0.2); color: #9ca3af;'>
-                        <span style='width: 8px; height: 8px; border-radius: 50%;
-                                     background: {sentiment_color};'></span>
-                        {news_item['sentiment'].title()}
-                    </span>
-                    <span style='padding: 4px 10px; border-radius: 6px; font-size: 11px;
-                                 background: rgba(59, 130, 246, 0.1); color: #60a5fa;
-                                 text-transform: uppercase;'>
-                        #{news_item['category']}
-                    </span>
-                    {breaking_badge}
-                </div>
-
-                <!-- Title -->
-                <h3 style='color: #f3f4f6; margin: 0 0 12px 0; font-size: 17px;
-                           line-height: 1.5; font-weight: 600;'>
-                    {news_item.get('summary', '').strip()}
-                </h3>
-
-                <!-- Meta info -->
-                <div style='color: #9ca3af; font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap;'>
-                    <span>🕐 {time_ago}</span>
-                    <span>❤️ {news_item['likes']:,}</span>
-                    <span>🔄 {news_item['retweets']:,}</span>
-                    <span>⚡ Engagement: {(news_item['likes'] + news_item['retweets'] * 2):,}</span>
-                </div>
-            </div>
-
-            <!-- Action button -->
-            <a href='{news_item['url']}' target='_blank'
-               style='background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-                      color: white; padding: 10px 20px; border-radius: 8px;
-                      text-decoration: none; white-space: nowrap; font-size: 14px;
-                      font-weight: 600; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
-                      transition: all 0.2s; display: inline-block;'>
-                Read More →
-            </a>
-        </div>
-    </div>
-    """
-
-    st.markdown(html, unsafe_allow_html=True)
+    # Create container with custom styling
+    with st.container():
+        # Add custom CSS for this card
+        st.markdown("""
+        <style>
+        .news-card {
+            background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+            border: 1px solid #374151;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 16px;
+        }
+        </style>
+        """, unsafe_allow_html=True)
+
+        # Header row with source and badges
+        col1, col2 = st.columns([3, 1])
+
+        with col1:
+            # Source and badges in one line
+            badge_cols = st.columns([2, 1, 1, 1])
+            with badge_cols[0]:
+                st.markdown(f"**:blue[{news_item['source']}]**")
+            with badge_cols[1]:
+                if news_item['impact'] == 'high':
+                    st.markdown("🔴 **HIGH**")
+                elif news_item['impact'] == 'medium':
+                    st.markdown("🟡 **MED**")
+                else:
+                    st.markdown("🟢 **LOW**")
+            with badge_cols[2]:
+                sentiment_emoji = {'positive': '📈', 'negative': '📉', 'neutral': '➡️'}
+                st.markdown(f"{sentiment_emoji.get(news_item['sentiment'], '➡️')} {news_item['sentiment'].title()}")
+            with badge_cols[3]:
+                st.markdown(f"**#{news_item['category']}**")
+
+        with col2:
+            st.markdown(f"[**Read More →**]({news_item['url']})")
+
+        # Title/Summary
+        st.markdown(f"### {news_item.get('summary', '').strip()}")
+
+        # Meta information
+        st.caption(f"🕐 {time_ago} | ❤️ {news_item['likes']:,} | 🔄 {news_item['retweets']:,}")
+
+        st.markdown("---")
 
 
 def display_news_feed(df: pd.DataFrame, max_items: int = 20):
@@ -168,7 +125,7 @@ def display_news_statistics(stats: dict):
 
 
 def display_category_breakdown(stats: dict):
-    """Display news breakdown by category."""
+    """Display news breakdown by category using Streamlit components."""
 
     if 'by_category' not in stats:
         return
@@ -185,75 +142,61 @@ def display_category_breakdown(stats: dict):
     col1, col2, col3 = st.columns(3)
 
     with col1:
-        macro_pct = (categories.get('macro', 0) / total) * 100
-        st.markdown(f"""
-        <div style='padding: 16px; background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
-                    border-radius: 10px; border: 1px solid #374151; text-align: center;'>
-            <div style='color: #60a5fa; font-size: 14px; margin-bottom: 8px;'>📈 MACRO</div>
-            <div style='color: #f3f4f6; font-size: 28px; font-weight: 700;'>
-                {categories.get('macro', 0)}
-            </div>
-            <div style='color: #9ca3af; font-size: 12px;'>{macro_pct:.1f}% of total</div>
-        </div>
-        """, unsafe_allow_html=True)
+        macro_count = categories.get('macro', 0)
+        macro_pct = (macro_count / total) * 100
+        with st.container():
+            st.markdown("**:blue[📈 MACRO]**")
+            st.markdown(f"# {macro_count}")
+            st.caption(f"{macro_pct:.1f}% of total")
 
     with col2:
-        geo_pct = (categories.get('geopolitical', 0) / total) * 100
-        st.markdown(f"""
-        <div style='padding: 16px; background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
-                    border-radius: 10px; border: 1px solid #374151; text-align: center;'>
-            <div style='color: #f59e0b; font-size: 14px; margin-bottom: 8px;'>🌍 GEOPOLITICAL</div>
-            <div style='color: #f3f4f6; font-size: 28px; font-weight: 700;'>
-                {categories.get('geopolitical', 0)}
-            </div>
-            <div style='color: #9ca3af; font-size: 12px;'>{geo_pct:.1f}% of total</div>
-        </div>
-        """, unsafe_allow_html=True)
+        geo_count = categories.get('geopolitical', 0)
+        geo_pct = (geo_count / total) * 100
+        with st.container():
+            st.markdown("**:orange[🌍 GEOPOLITICAL]**")
+            st.markdown(f"# {geo_count}")
+            st.caption(f"{geo_pct:.1f}% of total")
 
     with col3:
-        markets_pct = (categories.get('markets', 0) / total) * 100
-        st.markdown(f"""
-        <div style='padding: 16px; background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
-                    border-radius: 10px; border: 1px solid #374151; text-align: center;'>
-            <div style='color: #10b981; font-size: 14px; margin-bottom: 8px;'>💹 MARKETS</div>
-            <div style='color: #f3f4f6; font-size: 28px; font-weight: 700;'>
-                {categories.get('markets', 0)}
-            </div>
-            <div style='color: #9ca3af; font-size: 12px;'>{markets_pct:.1f}% of total</div>
-        </div>
-        """, unsafe_allow_html=True)
+        markets_count = categories.get('markets', 0)
+        markets_pct = (markets_count / total) * 100
+        with st.container():
+            st.markdown("**:green[💹 MARKETS]**")
+            st.markdown(f"# {markets_count}")
+            st.caption(f"{markets_pct:.1f}% of total")
 
 
 def display_breaking_news_banner(df: pd.DataFrame):
-    """Display breaking news banner at the top."""
+    """Display breaking news banner at the top using Streamlit components."""
 
     breaking = df[df['is_breaking'] == True] if not df.empty and 'is_breaking' in df.columns else pd.DataFrame()
 
     if not breaking.empty:
         latest = breaking.iloc[0]
 
-        st.markdown(f"""
-        <div style='background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
-                    border-radius: 12px; padding: 20px; margin-bottom: 24px;
-                    border: 2px solid #fca5a5; animation: pulse 3s infinite;
-                    box-shadow: 0 8px 16px rgba(220, 38, 38, 0.4);'>
-            <div style='display: flex; align-items: center; gap: 16px;'>
-                <span style='font-size: 32px;'>🚨</span>
-                <div style='flex: 1;'>
-                    <div style='color: white; font-size: 12px; font-weight: 700;
-                                letter-spacing: 1px; margin-bottom: 8px;'>
-                        BREAKING NEWS • {latest['source'].upper()}
-                    </div>
-                    <div style='color: white; font-size: 18px; font-weight: 600; line-height: 1.4;'>
-                        {latest.get('summary', '').strip()}
-                    </div>
-                </div>
-                <a href='{latest['url']}' target='_blank'
-                   style='background: white; color: #dc2626; padding: 12px 24px;
-                          border-radius: 8px; text-decoration: none; font-weight: 700;
-                          white-space: nowrap;'>
-                    READ NOW →
-                </a>
-            </div>
-        </div>
-        """, unsafe_allow_html=True)
+        # Create container with red background styling
+        with st.container():
+            st.markdown("""
+            <style>
+            .breaking-news-container {
+                background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
+                border-radius: 12px;
+                padding: 20px;
+                margin-bottom: 24px;
+                border: 2px solid #fca5a5;
+            }
+            </style>
+            """, unsafe_allow_html=True)
+
+            # Layout with emoji and content
+            col1, col2, col3 = st.columns([1, 8, 2])
+
+            with col1:
+                st.markdown("# 🚨")
+
+            with col2:
+                st.markdown(f"**:red[BREAKING NEWS • {latest['source'].upper()}]**")
+                st.markdown(f"## {latest.get('summary', '').strip()}")
+
+            with col3:
+                st.markdown(f"[**READ NOW →**]({latest['url']})")