Add unread indication to subscription cards

.gitignore

@@ -3,3 +3,4 @@ __pycache__
 *.db
 .envrc
 exec_folder/
+.env

backend/backend.py

@@ -52,15 +52,6 @@ def hello():
     return {"message": "Welcome to the Project Monitor API"}
 
 
-# Subscriptions API Endpoints
-@app.get("/subscriptions")
-def list_subscriptions():
-    db = SessionLocal()
-    subscriptions = db.query(Subscription).all()
-    db.close()
-    return subscriptions
-
-
 class SubscriptionCreate(BaseModel):
     topic: str
 
@@ -69,10 +60,33 @@ class SubscriptionResponse(BaseModel):
     id: int
     topic: str
     created_at: datetime
+    has_unread: bool
 
     model_config = {"from_attributes": True}
 
 
+# Subscriptions API Endpoints
+@app.get("/subscriptions", response_model=list[SubscriptionResponse])
+def list_subscriptions():
+    db = SessionLocal()
+    subscriptions = db.query(Subscription).all()
+
+    # TODO: find a better way to do this
+    for subscription in subscriptions:
+        not_viewed_count = (
+            db.query(Notification)
+            .filter(
+                Notification.subscription_id == subscription.id,
+                ~Notification.viewed,
+            )
+            .count()
+        )
+        subscription.has_unread = not_viewed_count > 0
+
+    db.close()
+    return subscriptions
+
+
 @app.get("/subscriptions/{subscription_id}", response_model=SubscriptionResponse)
 def get_subscription(subscription_id: int):
     db = SessionLocal()
@@ -82,6 +96,17 @@ def get_subscription(subscription_id: int):
     if not subscription:
         db.close()
         raise HTTPException(status_code=404, detail="Subscription not found")
+
+    # checking if subscription has unread messages
+    subscription.has_unread = (
+        db.query(Notification)
+        .filter(
+            Notification.subscription_id == subscription_id and not Notification.viewed
+        )
+        .count()
+        > 0
+    )
+
     db.close()
     return subscription
 

backend/get_notifications.py

@@ -18,6 +18,7 @@ def fetch_ntfy_notifications(base_url, subscriptions):
 
     notifications = []
     for subscription in subscriptions:
+        print(f"Fetching notifications for {subscription.topic}")
         topic = subscription.topic
         last_message_id = subscription.last_message_id
         since_param = "all" if last_message_id is None else last_message_id

backend/model.py

@@ -6,7 +6,10 @@ from sqlalchemy.sql.sqltypes import DateTime
 import os
 
 # Initialize the database
-DATABASE_URL = os.getenv("DATABASE_URL", "sqlite:///./project_monitor.db")
+DATABASE_URL = os.getenv("DATABASE_URL")
+
+if not DATABASE_URL:
+    raise ValueError("DATABASE_URL environment variable is not set")
 
 # SQLAlchemy setup
 engine = create_engine(DATABASE_URL, connect_args={"check_same_thread": False})

frontend/src/lib/api.ts

@@ -1,6 +1,6 @@
 import { env } from '$env/dynamic/public';
 
-export const API_URL = env.PUBLIC_API_URL || 'http://localhost:8080';
+export const API_URL = env.PUBLIC_API_URL || 'http://localhost:8000';
 
 /**
  * Type definitions for Subscriptions and Notifications
@@ -9,6 +9,7 @@ export interface Subscription {
 	id: number;
 	topic: string;
 	created_at: string;
+	has_unread: boolean;
 }
 
 export interface Notification {

frontend/src/routes/+layout.svelte

@@ -41,7 +41,6 @@
 	<div class="container mx-auto flex justify-between items-center p-4">
 		<a href="/" class="text-2xl font-bold hover:text-gray-400">Project Monitor</a>
 		<div class="flex space-x-6">
-			<a href="/" class="text-lg hover:text-gray-400">Home</a>
 			<a href="/scripts" class="text-lg hover:text-gray-400">Scripts</a>
 			<a href="/notifications" class="text-lg hover:text-gray-400">Notifications</a>
 			<a href="/settings" class="text-lg hover:text-gray-400">

frontend/src/routes/notifications/+page.svelte

@@ -39,8 +39,11 @@
 		{#each subscriptions as subscription (subscription.id)}
 			<a
 				href={`/notifications/${subscription.id}`}
-				class="block p-4 border rounded bg-white hover:bg-gray-100 shadow-lg shadow-blue-500/50"
+				class="relative block p-4 border rounded bg-white hover:bg-gray-100 shadow-lg shadow-blue-500/50"
 			>
+				{#if subscription.has_unread}
+					<span class="absolute top-2 right-2 w-3 h-3 bg-green-500 rounded-full"></span>
+				{/if}
 				<h2 class="text-lg font-semibold text-gray-800">{subscription.topic}</h2>
 			</a>
 		{/each}