Redesign dashboard with list layout, sparklines, and search

- Add sparkline component for 7-day price history visualization
- Convert product cards to horizontal list items
- Add search functionality to filter products by name/URL
- Backend returns sparkline data and 7-day price change with products
- Show price trend indicator (green for drops, red for increases)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

backend/src/models/index.ts

@@ -51,6 +51,16 @@ export interface ProductWithLatestPrice extends Product {
   currency: string | null;
 }
 
+export interface SparklinePoint {
+  price: number;
+  recorded_at: Date;
+}
+
+export interface ProductWithSparkline extends ProductWithLatestPrice {
+  sparkline: SparklinePoint[];
+  price_change_7d: number | null;
+}
+
 export const productQueries = {
   findByUserId: async (userId: number): Promise<ProductWithLatestPrice[]> => {
     const result = await pool.query(
@@ -69,6 +79,65 @@ export const productQueries = {
     return result.rows;
   },
 
+  findByUserIdWithSparkline: async (userId: number): Promise<ProductWithSparkline[]> => {
+    // Get all products with current price
+    const productsResult = await pool.query(
+      `SELECT p.*, ph.price as current_price, ph.currency
+       FROM products p
+       LEFT JOIN LATERAL (
+         SELECT price, currency FROM price_history
+         WHERE product_id = p.id
+         ORDER BY recorded_at DESC
+         LIMIT 1
+       ) ph ON true
+       WHERE p.user_id = $1
+       ORDER BY p.created_at DESC`,
+      [userId]
+    );
+
+    const products = productsResult.rows;
+    if (products.length === 0) return [];
+
+    // Get sparkline data for all products (last 7 days)
+    const productIds = products.map((p: Product) => p.id);
+    const sparklineResult = await pool.query(
+      `SELECT product_id, price, recorded_at
+       FROM price_history
+       WHERE product_id = ANY($1)
+       AND recorded_at >= CURRENT_TIMESTAMP - INTERVAL '7 days'
+       ORDER BY product_id, recorded_at ASC`,
+      [productIds]
+    );
+
+    // Group sparkline data by product
+    const sparklineMap = new Map<number, SparklinePoint[]>();
+    for (const row of sparklineResult.rows) {
+      const points = sparklineMap.get(row.product_id) || [];
+      points.push({ price: row.price, recorded_at: row.recorded_at });
+      sparklineMap.set(row.product_id, points);
+    }
+
+    // Combine products with sparkline data
+    return products.map((product: ProductWithLatestPrice) => {
+      const sparkline = sparklineMap.get(product.id) || [];
+      let priceChange7d: number | null = null;
+
+      if (sparkline.length >= 2) {
+        const firstPrice = parseFloat(String(sparkline[0].price));
+        const lastPrice = parseFloat(String(sparkline[sparkline.length - 1].price));
+        if (firstPrice > 0) {
+          priceChange7d = ((lastPrice - firstPrice) / firstPrice) * 100;
+        }
+      }
+
+      return {
+        ...product,
+        sparkline,
+        price_change_7d: priceChange7d,
+      };
+    });
+  },
+
   findById: async (id: number, userId: number): Promise<ProductWithLatestPrice | null> => {
     const result = await pool.query(
       `SELECT p.*, ph.price as current_price, ph.currency

backend/src/routes/products.ts

@@ -8,11 +8,11 @@ const router = Router();
 // All routes require authentication
 router.use(authMiddleware);
 
-// Get all products for the authenticated user
+// Get all products for the authenticated user (with sparkline data)
 router.get('/', async (req: AuthRequest, res: Response) => {
   try {
     const userId = req.userId!;
-    const products = await productQueries.findByUserId(userId);
+    const products = await productQueries.findByUserIdWithSparkline(userId);
     res.json(products);
   } catch (error) {
     console.error('Error fetching products:', error);

frontend/src/api/client.ts

@@ -41,6 +41,11 @@ export const authApi = {
 };
 
 // Products API
+export interface SparklinePoint {
+  price: number;
+  recorded_at: string;
+}
+
 export interface Product {
   id: number;
   user_id: number;
@@ -52,6 +57,8 @@ export interface Product {
   created_at: string;
   current_price: number | null;
   currency: string | null;
+  sparkline?: SparklinePoint[];
+  price_change_7d?: number | null;
 }
 
 export interface ProductWithStats extends Product {

frontend/src/components/ProductCard.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import { Product } from '../api/client';
+import Sparkline from './Sparkline';
 
 interface ProductCardProps {
   product: Product;
@@ -16,107 +17,179 @@ export default function ProductCard({ product, onDelete }: ProductCardProps) {
     return `${currencySymbol}${numPrice.toFixed(2)}`;
   };
 
-  const formatDate = (dateStr: string | null) => {
+  const formatPriceChange = (change: number | null | undefined) => {
-    if (!dateStr) return 'Never';
+    if (change === null || change === undefined) return null;
-    const date = new Date(dateStr);
+    const sign = change > 0 ? '+' : '';
-    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+    return `${sign}${change.toFixed(1)}%`;
   };
 
-  const truncateUrl = (url: string, maxLength: number = 50) => {
+  const truncateUrl = (url: string) => {
     try {
       const parsed = new URL(url);
-      const display = parsed.hostname + parsed.pathname;
+      return parsed.hostname.replace('www.', '');
-      return display.length > maxLength
-        ? display.slice(0, maxLength) + '...'
-        : display;
     } catch {
-      return url.length > maxLength ? url.slice(0, maxLength) + '...' : url;
+      return url;
     }
   };
 
+  const priceChangeClass = product.price_change_7d
+    ? product.price_change_7d < 0
+      ? 'price-down'
+      : product.price_change_7d > 0
+      ? 'price-up'
+      : ''
+    : '';
+
   return (
-    <div className="product-card">
+    <div className="product-list-item">
       <style>{`
-        .product-card {
+        .product-list-item {
           background: var(--surface);
           border-radius: 0.75rem;
           box-shadow: var(--shadow);
-          overflow: hidden;
+          padding: 1rem;
           display: flex;
-          flex-direction: column;
+          align-items: center;
-          transition: box-shadow 0.2s;
+          gap: 1rem;
+          transition: box-shadow 0.2s, transform 0.2s;
         }
 
-        .product-card:hover {
+        .product-list-item:hover {
           box-shadow: var(--shadow-lg);
+          transform: translateY(-1px);
         }
 
-        .product-image {
+        .product-thumbnail {
-          width: 100%;
+          width: 64px;
-          height: 160px;
+          height: 64px;
+          border-radius: 0.5rem;
           object-fit: contain;
           background: #f8fafc;
-          padding: 1rem;
+          flex-shrink: 0;
         }
 
-        .product-image-placeholder {
+        [data-theme="dark"] .product-thumbnail {
-          width: 100%;
+          background: #334155;
-          height: 160px;
+        }
+
+        .product-thumbnail-placeholder {
+          width: 64px;
+          height: 64px;
+          border-radius: 0.5rem;
           background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%);
           display: flex;
           align-items: center;
           justify-content: center;
           color: var(--text-muted);
-          font-size: 2rem;
+          font-size: 1.5rem;
+          flex-shrink: 0;
         }
 
-        .product-content {
+        [data-theme="dark"] .product-thumbnail-placeholder {
-          padding: 1rem;
+          background: linear-gradient(135deg, #334155 0%, #475569 100%);
+        }
+
+        .product-info {
           flex: 1;
-          display: flex;
+          min-width: 0;
-          flex-direction: column;
         }
 
         .product-name {
           font-weight: 600;
           color: var(--text);
-          margin-bottom: 0.25rem;
+          font-size: 0.9375rem;
           line-height: 1.3;
           display: -webkit-box;
-          -webkit-line-clamp: 2;
+          -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
           overflow: hidden;
+          margin-bottom: 0.25rem;
         }
 
-        .product-url {
+        .product-source {
           font-size: 0.75rem;
           color: var(--text-muted);
-          margin-bottom: 0.75rem;
         }
 
-        .product-price {
+        .product-price-section {
-          font-size: 1.5rem;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+          gap: 0.25rem;
+          min-width: 80px;
+        }
+
+        .product-current-price {
+          font-size: 1.125rem;
           font-weight: 700;
           color: var(--primary);
-          margin-bottom: 0.5rem;
         }
 
-        .product-meta {
+        .product-price-change {
           font-size: 0.75rem;
-          color: var(--text-muted);
+          font-weight: 600;
-          margin-bottom: 1rem;
+        }
+
+        .product-price-change.price-up {
+          color: #ef4444;
+        }
+
+        .product-price-change.price-down {
+          color: #10b981;
+        }
+
+        .product-sparkline {
+          flex-shrink: 0;
         }
 
         .product-actions {
           display: flex;
           gap: 0.5rem;
-          margin-top: auto;
+          flex-shrink: 0;
         }
 
         .product-actions .btn {
-          flex: 1;
+          padding: 0.5rem 0.75rem;
-          padding: 0.5rem;
+          font-size: 0.8125rem;
-          font-size: 0.875rem;
+        }
+
+        @media (max-width: 768px) {
+          .product-list-item {
+            flex-wrap: wrap;
+          }
+
+          .product-info {
+            order: 1;
+            flex-basis: calc(100% - 80px);
+          }
+
+          .product-thumbnail,
+          .product-thumbnail-placeholder {
+            order: 0;
+          }
+
+          .product-price-section {
+            order: 2;
+            flex-basis: auto;
+          }
+
+          .product-sparkline {
+            order: 3;
+            flex-basis: 100%;
+            display: flex;
+            justify-content: center;
+            margin-top: 0.5rem;
+          }
+
+          .product-actions {
+            order: 4;
+            flex-basis: 100%;
+            margin-top: 0.5rem;
+          }
+
+          .product-actions .btn {
+            flex: 1;
+          }
         }
       `}</style>
 
@@ -124,33 +197,48 @@ export default function ProductCard({ product, onDelete }: ProductCardProps) {
         <img
           src={product.image_url}
           alt={product.name || 'Product'}
-          className="product-image"
+          className="product-thumbnail"
         />
       ) : (
-        <div className="product-image-placeholder">📦</div>
+        <div className="product-thumbnail-placeholder">📦</div>
       )}
 
-      <div className="product-content">
+      <div className="product-info">
         <h3 className="product-name">{product.name || 'Unknown Product'}</h3>
-        <p className="product-url">{truncateUrl(product.url)}</p>
+        <p className="product-source">{truncateUrl(product.url)}</p>
-        <div className="product-price">
+      </div>
-          {formatPrice(product.current_price, product.currency)}
-        </div>
-        <p className="product-meta">
-          Last checked: {formatDate(product.last_checked)}
-        </p>
 
-        <div className="product-actions">
+      <div className="product-price-section">
-          <Link to={`/product/${product.id}`} className="btn btn-primary">
+        <span className="product-current-price">
-            View Details
+          {formatPrice(product.current_price, product.currency)}
-          </Link>
+        </span>
-          <button
+        {product.price_change_7d !== null && product.price_change_7d !== undefined && (
-            className="btn btn-danger"
+          <span className={`product-price-change ${priceChangeClass}`}>
-            onClick={() => onDelete(product.id)}
+            {formatPriceChange(product.price_change_7d)} (7d)
-          >
+          </span>
-            Delete
+        )}
-          </button>
+      </div>
-        </div>
+
+      <div className="product-sparkline">
+        <Sparkline
+          data={product.sparkline || []}
+          width={100}
+          height={36}
+          showTrend={false}
+        />
+      </div>
+
+      <div className="product-actions">
+        <Link to={`/product/${product.id}`} className="btn btn-primary">
+          View
+        </Link>
+        <button
+          className="btn btn-danger"
+          onClick={() => onDelete(product.id)}
+          title="Delete"
+        >
+          ✕
+        </button>
       </div>
     </div>
   );

frontend/src/components/Sparkline.tsx

@@ -0,0 +1,145 @@
+import { SparklinePoint } from '../api/client';
+
+interface SparklineProps {
+  data: SparklinePoint[];
+  width?: number;
+  height?: number;
+  color?: string;
+  showTrend?: boolean;
+}
+
+export default function Sparkline({
+  data,
+  width = 120,
+  height = 40,
+  color,
+  showTrend = true,
+}: SparklineProps) {
+  if (!data || data.length < 2) {
+    return (
+      <div
+        className="sparkline-empty"
+        style={{ width, height }}
+      >
+        <style>{`
+          .sparkline-empty {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-muted);
+            font-size: 0.75rem;
+            background: var(--surface-alt, #f1f5f9);
+            border-radius: 4px;
+          }
+          [data-theme="dark"] .sparkline-empty {
+            background: #334155;
+          }
+        `}</style>
+        <span>No data</span>
+      </div>
+    );
+  }
+
+  const prices = data.map((d) =>
+    typeof d.price === 'string' ? parseFloat(d.price) : d.price
+  );
+  const minPrice = Math.min(...prices);
+  const maxPrice = Math.max(...prices);
+  const priceRange = maxPrice - minPrice || 1;
+
+  // Calculate trend
+  const firstPrice = prices[0];
+  const lastPrice = prices[prices.length - 1];
+  const trend = lastPrice < firstPrice ? 'down' : lastPrice > firstPrice ? 'up' : 'flat';
+
+  // Determine color based on trend (green for down = good, red for up = bad for prices)
+  const lineColor = color || (trend === 'down' ? '#10b981' : trend === 'up' ? '#ef4444' : '#6366f1');
+
+  // Create SVG path
+  const padding = 4;
+  const chartWidth = width - padding * 2;
+  const chartHeight = height - padding * 2;
+
+  const points = prices.map((price, index) => {
+    const x = padding + (index / (prices.length - 1)) * chartWidth;
+    const y = padding + chartHeight - ((price - minPrice) / priceRange) * chartHeight;
+    return `${x},${y}`;
+  });
+
+  const pathD = `M ${points.join(' L ')}`;
+
+  // Create gradient fill path
+  const fillPoints = [...points];
+  fillPoints.push(`${padding + chartWidth},${padding + chartHeight}`);
+  fillPoints.push(`${padding},${padding + chartHeight}`);
+  const fillD = `M ${points.join(' L ')} L ${padding + chartWidth},${padding + chartHeight} L ${padding},${padding + chartHeight} Z`;
+
+  return (
+    <div className="sparkline-container">
+      <style>{`
+        .sparkline-container {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .sparkline-svg {
+          display: block;
+        }
+        .sparkline-trend {
+          font-size: 0.75rem;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          gap: 2px;
+        }
+        .sparkline-trend.up {
+          color: #ef4444;
+        }
+        .sparkline-trend.down {
+          color: #10b981;
+        }
+        .sparkline-trend.flat {
+          color: var(--text-muted);
+        }
+      `}</style>
+      <svg
+        className="sparkline-svg"
+        width={width}
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+      >
+        <defs>
+          <linearGradient id={`sparkline-gradient-${lineColor.replace('#', '')}`} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor={lineColor} stopOpacity="0.3" />
+            <stop offset="100%" stopColor={lineColor} stopOpacity="0.05" />
+          </linearGradient>
+        </defs>
+        <path
+          d={fillD}
+          fill={`url(#sparkline-gradient-${lineColor.replace('#', '')})`}
+        />
+        <path
+          d={pathD}
+          fill="none"
+          stroke={lineColor}
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <circle
+          cx={padding + chartWidth}
+          cy={padding + chartHeight - ((lastPrice - minPrice) / priceRange) * chartHeight}
+          r="3"
+          fill={lineColor}
+        />
+      </svg>
+      {showTrend && (
+        <span className={`sparkline-trend ${trend}`}>
+          {trend === 'down' && '↓'}
+          {trend === 'up' && '↑'}
+          {trend === 'flat' && '→'}
+        </span>
+      )}
+    </div>
+  );
+}

frontend/src/pages/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import Layout from '../components/Layout';
 import ProductCard from '../components/ProductCard';
 import ProductForm from '../components/ProductForm';
@@ -8,6 +8,7 @@ export default function Dashboard() {
   const [products, setProducts] = useState<Product[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
 
   const fetchProducts = async () => {
     try {
@@ -42,11 +43,21 @@ export default function Dashboard() {
     }
   };
 
+  const filteredProducts = useMemo(() => {
+    if (!searchQuery.trim()) return products;
+    const query = searchQuery.toLowerCase();
+    return products.filter(
+      (p) =>
+        p.name?.toLowerCase().includes(query) ||
+        p.url.toLowerCase().includes(query)
+    );
+  }, [products, searchQuery]);
+
   return (
     <Layout>
       <style>{`
         .dashboard-header {
-          margin-bottom: 2rem;
+          margin-bottom: 1.5rem;
         }
 
         .dashboard-title {
@@ -60,10 +71,60 @@ export default function Dashboard() {
           margin-top: 0.25rem;
         }
 
-        .products-grid {
+        .dashboard-controls {
-          display: grid;
+          display: flex;
-          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+          gap: 1rem;
-          gap: 1.5rem;
+          margin-bottom: 1.5rem;
+          flex-wrap: wrap;
+        }
+
+        .search-container {
+          flex: 1;
+          min-width: 200px;
+          max-width: 400px;
+          position: relative;
+        }
+
+        .search-icon {
+          position: absolute;
+          left: 0.875rem;
+          top: 50%;
+          transform: translateY(-50%);
+          color: var(--text-muted);
+          pointer-events: none;
+        }
+
+        .search-input {
+          width: 100%;
+          padding: 0.75rem 0.875rem 0.75rem 2.5rem;
+          border: 1px solid var(--border);
+          border-radius: 0.5rem;
+          background: var(--surface);
+          color: var(--text);
+          font-size: 0.9375rem;
+          transition: border-color 0.2s, box-shadow 0.2s;
+        }
+
+        .search-input:focus {
+          outline: none;
+          border-color: var(--primary);
+          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+
+        .search-input::placeholder {
+          color: var(--text-muted);
+        }
+
+        .products-count {
+          color: var(--text-muted);
+          font-size: 0.875rem;
+          margin-bottom: 1rem;
+        }
+
+        .products-list {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
         }
 
         .empty-state {
@@ -90,6 +151,31 @@ export default function Dashboard() {
           color: var(--text-muted);
         }
 
+        .no-results {
+          text-align: center;
+          padding: 3rem 2rem;
+          background: var(--surface);
+          border-radius: 0.75rem;
+          box-shadow: var(--shadow);
+        }
+
+        .no-results-icon {
+          font-size: 2.5rem;
+          margin-bottom: 0.75rem;
+        }
+
+        .no-results-title {
+          font-size: 1rem;
+          font-weight: 600;
+          color: var(--text);
+          margin-bottom: 0.25rem;
+        }
+
+        .no-results-text {
+          color: var(--text-muted);
+          font-size: 0.875rem;
+        }
+
         .loading-state {
           display: flex;
           justify-content: center;
@@ -108,6 +194,35 @@ export default function Dashboard() {
 
       {error && <div className="alert alert-error">{error}</div>}
 
+      {!isLoading && products.length > 0 && (
+        <div className="dashboard-controls">
+          <div className="search-container">
+            <span className="search-icon">
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <circle cx="7" cy="7" r="5" />
+                <path d="M13 13L11 11" />
+              </svg>
+            </span>
+            <input
+              type="text"
+              className="search-input"
+              placeholder="Search products..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+        </div>
+      )}
+
       {isLoading ? (
         <div className="loading-state">
           <span className="spinner" style={{ width: '3rem', height: '3rem' }} />
@@ -120,16 +235,31 @@ export default function Dashboard() {
             Add your first product URL above to start tracking prices!
           </p>
         </div>
-      ) : (
+      ) : filteredProducts.length === 0 ? (
-        <div className="products-grid">
+        <div className="no-results">
-          {products.map((product) => (
+          <div className="no-results-icon">🔍</div>
-            <ProductCard
+          <h3 className="no-results-title">No matching products</h3>
-              key={product.id}
+          <p className="no-results-text">
-              product={product}
+            Try adjusting your search query
-              onDelete={handleDeleteProduct}
+          </p>
-            />
-          ))}
         </div>
+      ) : (
+        <>
+          <p className="products-count">
+            {filteredProducts.length === products.length
+              ? `${products.length} product${products.length !== 1 ? 's' : ''}`
+              : `${filteredProducts.length} of ${products.length} products`}
+          </p>
+          <div className="products-list">
+            {filteredProducts.map((product) => (
+              <ProductCard
+                key={product.id}
+                product={product}
+                onDelete={handleDeleteProduct}
+              />
+            ))}
+          </div>
+        </>
       )}
     </Layout>
   );