Building Prayer Status: An Islamic Companion Extension for VS Code

Developers often lose track of time when immersed in complex code sessions. I created Prayer Time Reminder (published on VS Code Marketplace as riflo.prayer-time-reminder) to integrate real-time prayer schedule countdowns, daily Quran verses, and dhikr tools seamlessly into the code editor.

[Status Bar] 🕌 Asr in 00:42:15 | 📿 Tasbih: 33 (Click +1)

Prayer Time: Show Schedule      -> View today's full schedule
Prayer Time: Refresh            -> Force sync with calculation API
Prayer Time: Increment Tasbih   -> +1 to your Dhikr counter
Prayer Time: Reset Tasbih       -> Reset Tasbih counter to 0

{
  "prayer.playAdzanSound": true,
  "prayer.dailyAyatEnabled": true,
  "prayer.city": "", // Auto-detected via IP if left empty
  "prayer.country": ""
}

Key Architecture & Features

Building a VS Code extension required leveraging VS Code's extension API efficiently without burning background CPU cycles:

• Status Bar Item API: Displays a live HH:MM:SS countdown timer that updates every second using non-blocking JS intervals.
• Aesthetic Sidebar Dashboard: Webview panel presenting today's prayer schedule cards and status badges.
• IP-Based Auto Location: Fetches city/country location automatically on initial launch, eliminating setup steps.
• Daily Quran Ayah: Displays random daily Quran verses with English/Indonesian translations upon editor startup.
• Built-in Tasbih Counter: Interactive status bar click counter allowing quick dhikr logging during code compilation.
• Dynamic Color Indicators: Reacts visually to upcoming prayer times (Yellow warning threshold, Red on arrival).