apunkt/PriceGhost
1
0
Fork 0
mirror of https://github.com/clucraft/PriceGhost.git synced 2026-05-03 04:42:46 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add notification badges to product list items

Browse source 
Show configured notifications on dashboard:
- Bell icon with dollar amount for price drop threshold
- Package icon for back-in-stock alerts

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
clucraft 2026-01-20 22:35:06 -05:00
parent 59db0f5bb0
commit 7be9906c61
1 changed files with 47 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

47
frontend/src/components/ProductCard.tsx
View file

@ -125,6 +125,31 @@ export default function ProductCard({ product, onDelete, onRefresh }: ProductCar
color: var(--text-muted);
}
.product-notifications {
display: flex;
gap: 0.5rem;
margin-top: 0.375rem;
flex-wrap: wrap;
}
.product-notification-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
font-size: 0.6875rem;
font-weight: 500;
background: var(--background);
color: var(--text-muted);
border: 1px solid var(--border);
}
.product-notification-badge svg {
width: 12px;
height: 12px;
}
.product-price-section {
display: flex;
flex-direction: column;
@ -272,6 +297,28 @@ export default function ProductCard({ product, onDelete, onRefresh }: ProductCar
<div className="product-info">
<h3 className="product-name">{product.name || 'Unknown Product'}</h3>
<p className="product-source">{truncateUrl(product.url)}</p>
{(product.price_drop_threshold || product.notify_back_in_stock) && (
<div className="product-notifications">
{product.price_drop_threshold && (
<span className="product-notification-badge" title="Price drop alert">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
</svg>
${Number(product.price_drop_threshold).toFixed(2)} drop
</span>
)}
{product.notify_back_in_stock && (
<span className="product-notification-badge" title="Back in stock alert">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
<path d="m9 12 2 2 4-4" />
</svg>
Stock alert
</span>
)}
</div>
)}
</div>
<div className="product-price-section">