Add unread indication to subscription cards

This commit is contained in:
Sami Abuzakuk
2025-10-14 20:23:21 +02:00
parent 6460cab465
commit 3c6acc9359
7 changed files with 46 additions and 13 deletions

View File

@@ -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 {

View File

@@ -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">

View File

@@ -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}