feat: add timezone support for reminders and enhance UI for settings overview

frontend/src/App.tsx

@@ -905,18 +905,17 @@ export default function App() {
 						<article className="card">
 							<div className="card-head">
 								<h2>Automatic Reminders</h2>
-								<span className="pill neutral">Daily check at 6:00 AM</span>
+								<span className="pill neutral">Daily at 6:00 AM</span>
 							</div>
 							{settingsLoading ? (
 								<p>Loading settings...</p>
 							) : (
 								<form className="settings-form" onSubmit={saveSettings}>
-									<div className="setting-info-box">
-										<p>🤖 <strong>How it works:</strong> The server checks daily at 6:00 AM. When a medication drops below the threshold, you get notified via <strong>all enabled channels</strong> below.</p>
-										<div className="enabled-channels" style={{ marginTop: "0.5rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+									<div className="channels-overview">
+										<div className="channels-status">
 											<button
 												type="button"
-												className={`pill clickable ${settings.emailEnabled ? "success" : "neutral"}`}
+												className={`channel-btn ${settings.emailEnabled ? "active" : ""}`}
 												onClick={async () => {
 													const newSettings = { ...settings, emailEnabled: !settings.emailEnabled };
 													setSettings(newSettings);
@@ -928,13 +927,16 @@ export default function App() {
 														});
 													} catch (e) { console.error(e); }
 												}}
-												style={{ cursor: "pointer", border: "none" }}
 											>
-												📧 Email: {settings.emailEnabled ? "ON" : "OFF"}
+												<span className="channel-icon">📧</span>
+												<span className="channel-name">Email</span>
+												<span className={`channel-status ${settings.emailEnabled ? "on" : "off"}`}>
+													{settings.emailEnabled ? "ON" : "OFF"}
+												</span>
 											</button>
 											<button
 												type="button"
-												className={`pill clickable ${settings.shoutrrrEnabled ? "success" : "neutral"}`}
+												className={`channel-btn ${settings.shoutrrrEnabled ? "active" : ""}`}
 												onClick={async () => {
 													const newSettings = { ...settings, shoutrrrEnabled: !settings.shoutrrrEnabled };
 													setSettings(newSettings);
@@ -946,34 +948,53 @@ export default function App() {
 														});
 													} catch (e) { console.error(e); }
 												}}
-												style={{ cursor: "pointer", border: "none" }}
 											>
-												🔔 Push: {settings.shoutrrrEnabled ? "ON" : "OFF"}
+												<span className="channel-icon">🔔</span>
+												<span className="channel-name">Push</span>
+												<span className={`channel-status ${settings.shoutrrrEnabled ? "on" : "off"}`}>
+													{settings.shoutrrrEnabled ? "ON" : "OFF"}
+												</span>
 											</button>
 										</div>
+										<div className="schedule-info">
+											<div className="schedule-row">
+												<span className="schedule-label">Next check</span>
+												<span className="schedule-value">{settings.nextScheduledCheck ? new Date(settings.nextScheduledCheck).toLocaleString([], { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" }) : "—"}</span>
+											</div>
+											{settings.lastAutoEmailSent && (
+												<div className="schedule-row">
+													<span className="schedule-label">Last sent</span>
+													<span className="schedule-value">{new Date(settings.lastAutoEmailSent).toLocaleString([], { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" })}</span>
+												</div>
+											)}
+										</div>
 									</div>
 
 									<div className="setting-section">
-										<h3>⚙️ Reminder Settings</h3>
-										<p className="setting-hint">These settings apply to both Email and Push notifications.</p>
-										<div className="setting-group">
+										<div className="section-header">
+											<h3>⚙️ Reminder Threshold</h3>
+											<span className="info-tooltip" title="Applies to both Email and Push notifications. When a medication's remaining supply falls below this threshold, you'll receive a notification.">ⓘ</span>
+										</div>
+										<div className="threshold-input">
 											<label>
-												Reminder threshold (days)
-												<input
-													type="number"
-													min="1"
-													max="90"
-													value={settings.reminderDaysBefore}
-													onChange={(e) => setSettings({ ...settings, reminderDaysBefore: Number(e.target.value) || 7 })}
-												/>
-												<span className="input-hint">Send reminder when stock lasts less than this</span>
+												<span className="threshold-label">Send reminder when supply drops below</span>
+												<div className="threshold-field">
+													<input
+														type="number"
+														min="1"
+														max="90"
+														value={settings.reminderDaysBefore}
+														onChange={(e) => setSettings({ ...settings, reminderDaysBefore: Number(e.target.value) || 7 })}
+													/>
+													<span className="threshold-unit">days</span>
+												</div>
 											</label>
 										</div>
-										<div className="setting-row">
-											<div className="setting-info">
-												<label className="setting-label">Repeat daily reminders</label>
-												<p className="setting-desc">Send daily notifications while stock is low (otherwise only once per medication)</p>
-											</div>
+										<div className="setting-row compact">
+											<label className="setting-label">
+												Repeat daily
+												<span className="info-tooltip small" title="When enabled, sends reminders every day while stock is low. Otherwise, only notifies once per medication until restocked.">ⓘ</span>
+											</label>
 											<label className="toggle-switch small">
 												<input
 													type="checkbox"
@@ -983,152 +1004,111 @@ export default function App() {
 												<span className="toggle-slider"></span>
 											</label>
 										</div>
-										<div className="setting-info-box">
-											<p>⏰ <strong>Next automatic check:</strong> {settings.nextScheduledCheck ? new Date(settings.nextScheduledCheck).toLocaleString() : "—"}</p>
-											{settings.lastAutoEmailSent && (
-												<p style={{ marginTop: "0.5rem" }}>✓ Last notification sent: <strong>{new Date(settings.lastAutoEmailSent).toLocaleString()}</strong></p>
-											)}
-										</div>
 									</div>
 
-									<div className="setting-section">
-										<h3>📧 Email Notifications</h3>
-										<div className="setting-row">
-											<div className="setting-info">
-												<label className="setting-label">Enable Email Notifications</label>
-												<p className="setting-desc">Receive reminders via email</p>
+									{settings.emailEnabled && (
+										<div className="setting-section">
+											<div className="section-header">
+												<h3>📧 Email Settings</h3>
 											</div>
-											<label className="toggle-switch">
-												<input
-													type="checkbox"
-													checked={settings.emailEnabled}
-													onChange={(e) => setSettings({ ...settings, emailEnabled: e.target.checked })}
-												/>
-												<span className="toggle-slider"></span>
-											</label>
-										</div>
-
-										{settings.emailEnabled && (
-											<>
-												<div className="setting-group">
-													<label className="full">
-														Email address
-														<input
-															type="email"
-															value={settings.notificationEmail}
-															onChange={(e) => setSettings({ ...settings, notificationEmail: e.target.value })}
-															placeholder="your@email.com"
-														/>
-													</label>
-												</div>
-												<div className="smtp-readonly">
-													<div className="smtp-field">
-														<span className="smtp-label">SMTP Host</span>
-														<span className="smtp-value">{settings.smtpHost || "—"}</span>
-													</div>
-													<div className="smtp-field">
-														<span className="smtp-label">Port</span>
-														<span className="smtp-value">{settings.smtpPort}</span>
-													</div>
-													<div className="smtp-field">
-														<span className="smtp-label">From</span>
-														<span className="smtp-value">{settings.smtpFrom || "—"}</span>
-													</div>
-													<div className="smtp-field">
-														<span className="smtp-label">Status</span>
-														<span className="smtp-value">{settings.hasSmtpPassword ? "✓ Configured" : "Not configured"}</span>
-													</div>
-												</div>
-												<p className="setting-hint" style={{ marginTop: "0.5rem" }}>SMTP is configured via <code>.env</code> file</p>
-												<div className="setting-actions">
-													<button type="button" className="ghost" onClick={testEmail} disabled={testingEmail || !settings.notificationEmail}>
-														{testingEmail ? "Sending..." : "Send Test Email"}
-													</button>
-													{testEmailResult && (
-														<span className={testEmailResult.success ? "success-text" : "danger-text"}>
-															{testEmailResult.message}
-														</span>
-													)}
-												</div>
-											</>
-										)}
-									</div>
-
-									<div className="setting-section">
-										<h3>🔔 Shoutrrr Push Notifications</h3>
-										<p className="setting-hint">Send push notifications via Shoutrrr-compatible services (ntfy, Discord, Telegram, Slack, etc.). Uses the same reminder threshold.</p>
-										
-										<div className="setting-row">
-											<div className="setting-info">
-												<label className="setting-label">Enable Shoutrrr Notifications</label>
-												<p className="setting-desc">Receive reminders via push notification services</p>
+											<div className="setting-group">
+												<label className="full">
+													<span className="field-label">Recipient</span>
+													<input
+														type="email"
+														value={settings.notificationEmail}
+														onChange={(e) => setSettings({ ...settings, notificationEmail: e.target.value })}
+														placeholder="your@email.com"
+													/>
+												</label>
+											</div>
+											<div className="smtp-info">
+												<span className="smtp-summary">
+													SMTP: {settings.smtpHost || "Not configured"}:{settings.smtpPort}
+													{settings.hasSmtpPassword && " ✓"}
+												</span>
+												<span className="info-tooltip small" title={`Host: ${settings.smtpHost || "—"}\nPort: ${settings.smtpPort}\nFrom: ${settings.smtpFrom || "—"}\n\nConfigured via .env file`}>ⓘ</span>
+											</div>
+											<div className="setting-actions">
+												<button type="button" className="ghost" onClick={testEmail} disabled={testingEmail || !settings.notificationEmail}>
+													{testingEmail ? "Sending..." : "Test Email"}
+												</button>
+												{testEmailResult && (
+													<span className={testEmailResult.success ? "success-text" : "danger-text"}>
+														{testEmailResult.message}
+													</span>
+												)}
 											</div>
-											<label className="toggle-switch">
-												<input
-													type="checkbox"
-													checked={settings.shoutrrrEnabled}
-													onChange={(e) => setSettings({ ...settings, shoutrrrEnabled: e.target.checked })}
-												/>
-												<span className="toggle-slider"></span>
-											</label>
 										</div>
+									)}
 
-										{settings.shoutrrrEnabled && (
-											<>
-												<div className="setting-group">
-													<label className="full">
-														Notification URL
-														<input
-															type="url"
-															value={settings.shoutrrrUrl}
-															onChange={(e) => setSettings({ ...settings, shoutrrrUrl: e.target.value })}
-															placeholder="https://ntfy.sh/your-topic"
-															pattern="(https?|ntfy|discord|telegram|slack):\/\/.+"
-														/>
-														<span className="input-hint">
-															Examples: <code>https://ntfy.sh/mytopic</code> · <code>ntfy://ntfy.sh/mytopic</code> · <code>discord://token@id</code>
-														</span>
-													</label>
-												</div>
-												<div className="setting-actions">
-													<button type="button" className="ghost" onClick={testShoutrrr} disabled={testingShoutrrr || !settings.shoutrrrUrl}>
-														{testingShoutrrr ? "Sending..." : "Send Test Notification"}
-													</button>
-													{testShoutrrrResult && (
-														<span className={testShoutrrrResult.success ? "success-text" : "danger-text"}>
-															{testShoutrrrResult.message}
-														</span>
-													)}
-												</div>
-											</>
-										)}
-									</div>
+									{settings.shoutrrrEnabled && (
+										<div className="setting-section">
+											<div className="section-header">
+												<h3>🔔 Push Settings</h3>
+												<span className="info-tooltip" title="Supports ntfy, Discord, Telegram, Slack and other Shoutrrr-compatible services.">ⓘ</span>
+											</div>
+											<div className="setting-group">
+												<label className="full">
+													<span className="field-label">Notification URL</span>
+													<input
+														type="url"
+														value={settings.shoutrrrUrl}
+														onChange={(e) => setSettings({ ...settings, shoutrrrUrl: e.target.value })}
+														placeholder="https://ntfy.sh/your-topic"
+														pattern="(https?|ntfy|discord|telegram|slack):\/\/.+"
+													/>
+													<span className="field-examples">e.g. https://ntfy.sh/mytopic, discord://token@id</span>
+												</label>
+											</div>
+											<div className="setting-actions">
+												<button type="button" className="ghost" onClick={testShoutrrr} disabled={testingShoutrrr || !settings.shoutrrrUrl}>
+													{testingShoutrrr ? "Sending..." : "Test Push"}
+												</button>
+												{testShoutrrrResult && (
+													<span className={testShoutrrrResult.success ? "success-text" : "danger-text"}>
+														{testShoutrrrResult.message}
+													</span>
+												)}
+											</div>
+										</div>
+									)}
 
 									<div className="setting-section">
-										<h3>📊 Stock Thresholds</h3>
-										<p className="setting-hint">Define stock level colors based on how many days of medication you have left.</p>
-										<div className="setting-group">
-											<label>
-												Low Stock (days)
-												<input
-													type="number"
-													min="1"
-													max="365"
-													value={settings.lowStockDays}
-													onChange={(e) => setSettings({ ...settings, lowStockDays: Number(e.target.value) || 30 })}
-												/>
-												<span className="input-hint">⚠ Yellow below this</span>
+										<div className="section-header">
+											<h3>📊 Stock Display</h3>
+											<span className="info-tooltip" title="These thresholds control the color-coding in the medication overview. They don't affect when reminders are sent.">ⓘ</span>
+										</div>
+										<div className="threshold-grid">
+											<label className="threshold-card warning">
+												<span className="threshold-icon">⚠️</span>
+												<span className="threshold-title">Low Stock</span>
+												<div className="threshold-input-wrap">
+													<input
+														type="number"
+														min="1"
+														max="365"
+														value={settings.lowStockDays}
+														onChange={(e) => setSettings({ ...settings, lowStockDays: Number(e.target.value) || 30 })}
+													/>
+													<span>days</span>
+												</div>
+												<span className="threshold-desc">Yellow warning</span>
 											</label>
-											<label>
-												High Stock (days)
-												<input
-													type="number"
-													min="1"
-													max="730"
-													value={settings.highStockDays}
-													onChange={(e) => setSettings({ ...settings, highStockDays: Number(e.target.value) || 180 })}
-												/>
-												<span className="input-hint">★ Green with star above this</span>
+											<label className="threshold-card success">
+												<span className="threshold-icon">✓</span>
+												<span className="threshold-title">High Stock</span>
+												<div className="threshold-input-wrap">
+													<input
+														type="number"
+														min="1"
+														max="730"
+														value={settings.highStockDays}
+														onChange={(e) => setSettings({ ...settings, highStockDays: Number(e.target.value) || 180 })}
+													/>
+													<span>days</span>
+												</div>
+												<span className="threshold-desc">Green with star</span>
 											</label>
 										</div>
 									</div>

frontend/src/styles.css

@@ -862,37 +862,361 @@ textarea {
   color: var(--success);
 }
 
-.smtp-readonly {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+/* Info Tooltips */
+.info-tooltip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  cursor: help;
+  transition: color 0.15s;
+  position: relative;
+}
+
+.info-tooltip:hover {
+  color: var(--accent);
+}
+
+.info-tooltip.small {
+  width: 1rem;
+  height: 1rem;
+  font-size: 0.75rem;
+}
+
+.info-tooltip[title] {
+  position: relative;
+}
+
+.info-tooltip::after {
+  content: attr(title);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  font-size: 0.8rem;
+  font-weight: 400;
+  line-height: 1.4;
+  white-space: pre-line;
+  min-width: 200px;
+  max-width: 280px;
+  text-align: left;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--border-primary);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s, visibility 0.15s;
+  z-index: 100;
+  pointer-events: none;
+}
+
+.info-tooltip::before {
+  content: "";
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: var(--border-primary);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s, visibility 0.15s;
+  z-index: 101;
+}
+
+.info-tooltip:hover::after,
+.info-tooltip:hover::before {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Channels Overview */
+.channels-overview {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1.5rem;
+  padding: 1rem 1.25rem;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+}
+
+.channels-status {
+  display: flex;
   gap: 0.75rem;
 }
 
-.smtp-field {
+.channel-btn {
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 0.25rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0.75rem 1.25rem;
   background: var(--bg-input);
-  border: 1px solid var(--border-primary);
-  border-radius: 8px;
+  border: 2px solid var(--border-primary);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 80px;
 }
 
-.smtp-label {
-  font-size: 0.7rem;
+.channel-btn:hover {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.channel-btn.active {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.channel-icon {
+  font-size: 1.5rem;
+}
+
+.channel-name {
+  font-size: 0.75rem;
+  font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   color: var(--text-secondary);
 }
 
-.smtp-value {
+.channel-status {
+  font-size: 0.65rem;
+  font-weight: 700;
+  padding: 0.15rem 0.5rem;
+  border-radius: 4px;
+}
+
+.channel-status.on {
+  background: var(--success-bg);
+  color: var(--success);
+}
+
+.channel-status.off {
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+}
+
+.schedule-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  font-size: 0.8rem;
+}
+
+.schedule-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.schedule-label {
+  color: var(--text-secondary);
+}
+
+.schedule-value {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+/* Section Header with Tooltip */
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.section-header h3 {
+  margin: 0;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--accent-light);
+}
+
+/* Threshold Input */
+.threshold-input {
+  margin-bottom: 1rem;
+}
+
+.threshold-label {
+  display: block;
   font-size: 0.9rem;
   color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.threshold-field {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.threshold-field input {
+  width: 80px;
+  text-align: center;
+}
+
+.threshold-unit {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
+/* Compact Setting Row */
+.setting-row.compact {
+  padding: 0.75rem 1rem;
+  margin-top: 0.5rem;
+}
+
+.setting-row.compact .setting-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+}
+
+/* Field Label */
+.field-label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+.field-examples {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-top: 0.35rem;
   font-family: "SF Mono", "Fira Code", monospace;
 }
 
+/* SMTP Info */
+.smtp-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-input);
+  border-radius: 8px;
+  margin-top: 0.75rem;
+}
+
+.smtp-summary {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  font-family: "SF Mono", "Fira Code", monospace;
+}
+
+/* Threshold Cards */
+.threshold-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.threshold-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 1rem;
+  background: var(--bg-input);
+  border: 2px solid var(--border-primary);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.threshold-card:hover,
+.threshold-card:focus-within {
+  border-color: var(--accent);
+}
+
+.threshold-card.warning {
+  border-color: rgba(252, 211, 77, 0.3);
+}
+
+.threshold-card.warning:hover,
+.threshold-card.warning:focus-within {
+  border-color: #fcd34d;
+}
+
+.threshold-card.success {
+  border-color: rgba(57, 217, 138, 0.3);
+}
+
+.threshold-card.success:hover,
+.threshold-card.success:focus-within {
+  border-color: #39d98a;
+}
+
+.threshold-icon {
+  font-size: 1.25rem;
+}
+
+.threshold-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--text-primary);
+}
+
+.threshold-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-top: 0.25rem;
+}
+
+.threshold-input-wrap input {
+  width: 60px;
+  text-align: center;
+  padding: 0.35rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.threshold-input-wrap span {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.threshold-desc {
+  font-size: 0.7rem;
+  color: var(--text-secondary);
+}
+
 @media (max-width: 500px) {
-  .smtp-readonly {
+  .channels-overview {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .channels-status {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .schedule-info {
+    width: 100%;
+    align-items: center;
+  }
+  
+  .threshold-grid {
     grid-template-columns: 1fr;
   }
 }