[FEATURE] Proactive Crisis Resource Banner on High-Risk Story Cards

[dhruvpatel16120]

Description

Currently, when an anonymous story is classified as HIGH risk by the crisis detection system, it only displays a small "Needs Support" badge in the feed. To provide immediate safety and crisis intervention value to survivors and readers, we should render a direct, actionable emergency helpline banner on those specific high-risk cards.

Proposed Solution

1. In src/pages/Stories.tsx, within the mapping of story cards, check if story.risk_level === 'HIGH'.
2. If true, dynamically render a clean, supportive crisis resources banner below the story content:
   • Provide the National Women's Helpline (1091) with a direct click-to-call link (tel:1091).
   • Provide a direct link to the verified NGO Directory page (/resources).
3. Apply styling that aligns with the current dark mode and pink/rose color palette of SafeVoice.

Code Snippet Reference

In Stories.tsx:

{story.risk_level === 'HIGH' && (
  <div className="mt-3 p-3 bg-red-50 dark:bg-red-950/20 border-l-4 border-red-500 rounded text-xs text-red-700 dark:text-red-300">
    💡 <strong>In need of support?</strong> Immediate help is available. 
    Call the National Women's Helpline at <a href="tel:1091" className="underline font-bold hover:text-red-800 dark:hover:text-red-200">1091</a> or view our verified <a href="/resources" className="underline font-bold hover:text-red-800 dark:hover:text-red-200">NGO Directory</a>.
  </div>
)}

Impact

• Provides life-saving support indicators directly on distress posts.
• Easy to implement (less than 10 lines of code) with high immediate impact.
• Zero external dependencies.

[dhruvpatel16120]

hello @Piyushydv08 ! i want to work on this feature under GSSOC, please assign this to me !

[Piyushydv08]

hello @Piyushydv08 ! i want to work on this feature under GSSOC, please assign this to me !

Assigned to u @dhruvpatel16120