Add refresh controls and notification support

- Add refresh button to product list items with spinning animation
- Add editable refresh interval dropdown on product detail page
- Add user profile dropdown with settings link in navbar
- Create Settings page for Telegram and Discord configuration
- Add per-product notification options (price drop threshold, back in stock)
- Integrate notifications into scheduler for automatic alerts
- Add notification service supporting Telegram Bot API and Discord webhooks

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

frontend/src/components/Layout.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState, useEffect } from 'react';
+import { ReactNode, useState, useEffect, useRef } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../hooks/useAuth';
 
@@ -13,12 +13,25 @@ export default function Layout({ children }: LayoutProps) {
     const saved = localStorage.getItem('theme');
     return (saved as 'light' | 'dark') || 'light';
   });
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', theme);
     localStorage.setItem('theme', theme);
   }, [theme]);
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
   const toggleTheme = () => {
     setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
   };
@@ -110,8 +123,113 @@ export default function Layout({ children }: LayoutProps) {
           margin: 0 auto;
         }
 
+        .user-dropdown {
+          position: relative;
+        }
+
+        .user-dropdown-trigger {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          padding: 0.5rem 0.75rem;
+          background: var(--background);
+          border: 1px solid var(--border);
+          border-radius: 0.5rem;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+
+        .user-dropdown-trigger:hover {
+          border-color: var(--primary);
+        }
+
+        .user-dropdown-avatar {
+          width: 28px;
+          height: 28px;
+          background: var(--primary);
+          color: white;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 0.75rem;
+          font-weight: 600;
+        }
+
+        .user-dropdown-email {
+          color: var(--text);
+          font-size: 0.875rem;
+          max-width: 150px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .user-dropdown-arrow {
+          color: var(--text-muted);
+          transition: transform 0.2s;
+        }
+
+        .user-dropdown-trigger.open .user-dropdown-arrow {
+          transform: rotate(180deg);
+        }
+
+        .user-dropdown-menu {
+          position: absolute;
+          top: calc(100% + 0.5rem);
+          right: 0;
+          min-width: 200px;
+          background: var(--surface);
+          border: 1px solid var(--border);
+          border-radius: 0.5rem;
+          box-shadow: var(--shadow-lg);
+          overflow: hidden;
+          z-index: 1000;
+        }
+
+        .user-dropdown-menu-item {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          padding: 0.75rem 1rem;
+          color: var(--text);
+          text-decoration: none;
+          transition: background 0.2s;
+          border: none;
+          background: none;
+          width: 100%;
+          text-align: left;
+          cursor: pointer;
+          font-size: 0.875rem;
+        }
+
+        .user-dropdown-menu-item:hover {
+          background: var(--background);
+          text-decoration: none;
+        }
+
+        .user-dropdown-menu-item svg {
+          width: 18px;
+          height: 18px;
+          color: var(--text-muted);
+        }
+
+        .user-dropdown-divider {
+          height: 1px;
+          background: var(--border);
+          margin: 0.25rem 0;
+        }
+
+        .user-dropdown-menu-item.danger {
+          color: var(--danger);
+        }
+
+        .user-dropdown-menu-item.danger svg {
+          color: var(--danger);
+        }
+
         @media (max-width: 640px) {
-          .navbar-email {
+          .navbar-email, .user-dropdown-email {
             display: none;
           }
         }
@@ -133,12 +251,60 @@ export default function Layout({ children }: LayoutProps) {
               {theme === 'light' ? '🌙' : '☀️'}
             </button>
             {user && (
-              <>
-                <span className="navbar-email">{user.email}</span>
-                <button className="btn btn-secondary" onClick={handleLogout}>
-                  Logout
+              <div className="user-dropdown" ref={dropdownRef}>
+                <button
+                  className={`user-dropdown-trigger ${isDropdownOpen ? 'open' : ''}`}
+                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                >
+                  <span className="user-dropdown-avatar">
+                    {user.email.charAt(0).toUpperCase()}
+                  </span>
+                  <span className="user-dropdown-email">{user.email}</span>
+                  <svg
+                    className="user-dropdown-arrow"
+                    width="12"
+                    height="12"
+                    viewBox="0 0 12 12"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M3 4.5L6 7.5L9 4.5" />
+                  </svg>
                 </button>
-              </>
+                {isDropdownOpen && (
+                  <div className="user-dropdown-menu">
+                    <Link
+                      to="/settings"
+                      className="user-dropdown-menu-item"
+                      onClick={() => setIsDropdownOpen(false)}
+                    >
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <circle cx="12" cy="12" r="3" />
+                        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+                      </svg>
+                      Settings
+                    </Link>
+                    <div className="user-dropdown-divider" />
+                    <button
+                      className="user-dropdown-menu-item danger"
+                      onClick={() => {
+                        setIsDropdownOpen(false);
+                        handleLogout();
+                      }}
+                    >
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+                        <polyline points="16 17 21 12 16 7" />
+                        <line x1="21" y1="12" x2="9" y2="12" />
+                      </svg>
+                      Logout
+                    </button>
+                  </div>
+                )}
+              </div>
             )}
           </div>
         </div>

frontend/src/components/ProductCard.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Product } from '../api/client';
 import Sparkline from './Sparkline';
@@ -5,9 +6,20 @@ import Sparkline from './Sparkline';
 interface ProductCardProps {
   product: Product;
   onDelete: (id: number) => void;
+  onRefresh: (id: number) => Promise<void>;
 }
 
-export default function ProductCard({ product, onDelete }: ProductCardProps) {
+export default function ProductCard({ product, onDelete, onRefresh }: ProductCardProps) {
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      await onRefresh(product.id);
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
   const formatPrice = (price: number | string | null, currency: string | null) => {
     if (price === null || price === undefined) return 'N/A';
     const numPrice = typeof price === 'string' ? parseFloat(price) : price;
@@ -185,6 +197,28 @@ export default function ProductCard({ product, onDelete }: ProductCardProps) {
           font-size: 0.8125rem;
         }
 
+        .product-actions .btn-icon {
+          padding: 0.5rem;
+          min-width: unset;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .product-actions .btn-icon svg {
+          width: 16px;
+          height: 16px;
+        }
+
+        .product-actions .btn-icon.refreshing svg {
+          animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+
         @media (max-width: 768px) {
           .product-list-item {
             flex-wrap: wrap;
@@ -269,15 +303,30 @@ export default function ProductCard({ product, onDelete }: ProductCardProps) {
       </div>
 
       <div className="product-actions">
+        <button
+          className={`btn btn-secondary btn-icon ${isRefreshing ? 'refreshing' : ''}`}
+          onClick={handleRefresh}
+          disabled={isRefreshing}
+          title="Refresh price"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+            <path d="M3 3v5h5" />
+            <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+            <path d="M16 21h5v-5" />
+          </svg>
+        </button>
         <Link to={`/product/${product.id}`} className="btn btn-primary">
           View
         </Link>
         <button
-          className="btn btn-danger"
+          className="btn btn-danger btn-icon"
           onClick={() => onDelete(product.id)}
           title="Delete"
         >
-          ✕
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
         </button>
       </div>
     </div>