build 1

2026-03-27 23:33:31 -05:00
parent 9fa1df47ad
commit 6f7c038834
29 changed files with 2093 additions and 0 deletions
--- a/frontend/src/components/EditItemModal.tsx
+++ b/frontend/src/components/EditItemModal.tsx
@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { X } from 'lucide-react';
+import type { WatchedItem } from '../types';
+import { updateItem } from '../api/client';
+
+interface Props {
+  item: WatchedItem;
+  onClose: () => void;
+  onSaved: () => void;
+}
+
+function displayName(item: WatchedItem): string {
+  if (item.name) return item.name;
+  try { return new URL(item.url).pathname.split('/').filter(Boolean).pop() ?? item.url; }
+  catch { return item.url; }
+}
+
+export default function EditItemModal({ item, onClose, onSaved }: Props) {
+  const [interval, setInterval] = useState(String(item.check_interval));
+  const [loading, setLoading]   = useState(false);
+  const [error, setError]       = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    const secs = Math.max(30, parseInt(interval, 10) || item.check_interval);
+    setLoading(true);
+    try {
+      await updateItem(item.id, { check_interval: secs });
+      onSaved();
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to save changes');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="modal-backdrop" onClick={e => e.target === e.currentTarget && onClose()}>
+      <div className="modal" role="dialog" aria-modal="true" aria-labelledby="edit-title">
+        <div className="modal-header">
+          <div>
+            <div className="modal-title" id="edit-title">Edit Item</div>
+            <div className="modal-subtitle" style={{ maxWidth: 360, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {displayName(item)}
+            </div>
+          </div>
+          <button className="modal-close" onClick={onClose} aria-label="Close">
+            <X size={18} />
+          </button>
+        </div>
+
+        {error && <div className="form-error">{error}</div>}
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label className="form-label">Product URL</label>
+            <input
+              className="form-input"
+              type="text"
+              value={item.url}
+              disabled
+              style={{ opacity: 0.5, cursor: 'not-allowed' }}
+            />
+          </div>
+
+          <div className="form-group">
+            <label className="form-label" htmlFor="edit-interval">Check Every (seconds)</label>
+            <input
+              id="edit-interval"
+              className="form-input"
+              type="number"
+              min="30"
+              step="1"
+              value={interval}
+              onChange={e => setInterval(e.target.value)}
+              autoFocus
+              required
+            />
+            <div className="form-hint">Minimum 30 seconds. The scheduler will restart with the new interval immediately.</div>
+          </div>
+
+          <div className="form-actions">
+            <button type="button" className="btn-secondary" onClick={onClose} disabled={loading}>
+              Cancel
+            </button>
+            <button type="submit" className="btn-primary" disabled={loading}>
+              {loading ? <><div className="spinner" style={{ width: 14, height: 14 }} /> Saving…</> : 'Save Changes'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}