feat(notifications): follow modes, milestone alerts, notification enhancements
Follow Modes (neutral / pocket_veto / pocket_boost):
- Alembic migration 0013 adds follow_mode column to follows table
- FollowButton rewritten as mode-aware dropdown for bills; simple toggle for members/topics
- PATCH /api/follows/{id}/mode endpoint with validation
- Dispatcher filters pocket_veto follows (suppress new_document/new_amendment events)
- Dispatcher adds ntfy Actions header for pocket_boost follows
Change-driven (milestone) Alerts:
- New notification_utils.py with shared emit helpers and 30-min dedup
- congress_poller emits bill_updated events on milestone action text
- llm_processor replaced with shared emit util (also notifies member/topic followers)
Notification Enhancements:
- ntfy priority levels (high for bill_updated, default for others)
- Quiet hours (UTC): dispatcher holds events outside allowed window
- Digest mode (daily/weekly): send_notification_digest Celery beat task
- Notification history endpoint + Recent Alerts UI section
- Enriched following page (bill titles, member photos/details via sub-components)
- Follow mode test buttons in admin settings panel
Infrastructure:
- nginx: switch upstream blocks to set $variable proxy_pass so Docker DNS
re-resolves upstream IPs after container rebuilds (valid=10s)
- TROUBLESHOOTING.md documenting common Docker/nginx/postgres gotchas
Authored-By: Jack Levy
This commit is contained in:
Jack Levy
@@ -97,7 +97,7 @@ export default function BillDetailPage({ params }: { params: Promise<{ id: strin
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<FollowButton type="bill" value={bill.bill_id} />
|
||||
<FollowButton type="bill" value={bill.bill_id} supportsModes />
|
||||
</div>
|
||||
|
||||
{/* Content grid */}
|
||||
|
||||
@@ -1,9 +1,120 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Heart, X } from "lucide-react";
|
||||
import { Heart, ExternalLink, X } from "lucide-react";
|
||||
import { useFollows, useRemoveFollow } from "@/lib/hooks/useFollows";
|
||||
import { billLabel } from "@/lib/utils";
|
||||
import { useBill } from "@/lib/hooks/useBills";
|
||||
import { useMember } from "@/lib/hooks/useMembers";
|
||||
import { FollowButton } from "@/components/shared/FollowButton";
|
||||
import { billLabel, chamberBadgeColor, cn, formatDate, partyBadgeColor } from "@/lib/utils";
|
||||
import type { Follow } from "@/lib/types";
|
||||
|
||||
// ── Bill row ────────────────────────────────────────────────────────────────
|
||||
|
||||
function BillRow({ follow }: { follow: Follow }) {
|
||||
const { data: bill } = useBill(follow.follow_value);
|
||||
const label = bill ? billLabel(bill.bill_type, bill.bill_number) : follow.follow_value;
|
||||
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-lg p-4 flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="text-xs font-mono font-semibold text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
|
||||
{label}
|
||||
</span>
|
||||
{bill?.chamber && (
|
||||
<span className={cn("text-xs px-1.5 py-0.5 rounded font-medium", chamberBadgeColor(bill.chamber))}>
|
||||
{bill.chamber}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Link
|
||||
href={`/bills/${follow.follow_value}`}
|
||||
className="text-sm font-medium hover:text-primary transition-colors line-clamp-2 leading-snug"
|
||||
>
|
||||
{bill ? (bill.short_title || bill.title || label) : <span className="text-muted-foreground">Loading…</span>}
|
||||
</Link>
|
||||
{bill?.latest_action_text && (
|
||||
<p className="text-xs text-muted-foreground mt-1.5 line-clamp-1">
|
||||
{bill.latest_action_date && <span>{formatDate(bill.latest_action_date)} — </span>}
|
||||
{bill.latest_action_text}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<FollowButton type="bill" value={follow.follow_value} supportsModes />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Member row ───────────────────────────────────────────────────────────────
|
||||
|
||||
function MemberRow({ follow, onRemove }: { follow: Follow; onRemove: () => void }) {
|
||||
const { data: member } = useMember(follow.follow_value);
|
||||
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-lg p-4 flex items-center gap-4">
|
||||
{/* Photo */}
|
||||
<div className="shrink-0">
|
||||
{member?.photo_url ? (
|
||||
<img
|
||||
src={member.photo_url}
|
||||
alt={member.name}
|
||||
className="w-12 h-12 rounded-full object-cover border border-border"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center text-lg font-semibold text-muted-foreground">
|
||||
{member ? member.name[0] : "?"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Link
|
||||
href={`/members/${follow.follow_value}`}
|
||||
className="text-sm font-semibold hover:text-primary transition-colors"
|
||||
>
|
||||
{member?.name ?? follow.follow_value}
|
||||
</Link>
|
||||
{member?.party && (
|
||||
<span className={cn("text-xs px-1.5 py-0.5 rounded font-medium", partyBadgeColor(member.party))}>
|
||||
{member.party}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{(member?.chamber || member?.state || member?.district) && (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{[member.chamber, member.state, member.district ? `District ${member.district}` : null]
|
||||
.filter(Boolean)
|
||||
.join(" · ")}
|
||||
</p>
|
||||
)}
|
||||
{member?.official_url && (
|
||||
<a
|
||||
href={member.official_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-xs text-primary hover:underline mt-1"
|
||||
>
|
||||
Official site <ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Unfollow */}
|
||||
<button
|
||||
onClick={onRemove}
|
||||
className="text-muted-foreground hover:text-destructive transition-colors p-1 shrink-0"
|
||||
title="Unfollow"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Page ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function FollowingPage() {
|
||||
const { data: follows = [], isLoading } = useFollows();
|
||||
@@ -13,33 +124,6 @@ export default function FollowingPage() {
|
||||
const members = follows.filter((f) => f.follow_type === "member");
|
||||
const topics = follows.filter((f) => f.follow_type === "topic");
|
||||
|
||||
const Section = ({ title, items, renderValue }: {
|
||||
title: string;
|
||||
items: typeof follows;
|
||||
renderValue: (v: string) => React.ReactNode;
|
||||
}) => (
|
||||
<div>
|
||||
<h2 className="font-semibold mb-3">{title} ({items.length})</h2>
|
||||
{!items.length ? (
|
||||
<p className="text-sm text-muted-foreground">Nothing followed yet.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{items.map((f) => (
|
||||
<div key={f.id} className="bg-card border border-border rounded-lg p-3 flex items-center justify-between">
|
||||
<div>{renderValue(f.follow_value)}</div>
|
||||
<button
|
||||
onClick={() => remove.mutate(f.id)}
|
||||
className="text-muted-foreground hover:text-destructive transition-colors p-1"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (isLoading) return <div className="text-center py-20 text-muted-foreground">Loading...</div>;
|
||||
|
||||
return (
|
||||
@@ -51,38 +135,58 @@ export default function FollowingPage() {
|
||||
<p className="text-muted-foreground text-sm mt-1">Manage what you follow</p>
|
||||
</div>
|
||||
|
||||
<Section
|
||||
title="Bills"
|
||||
items={bills}
|
||||
renderValue={(v) => {
|
||||
const [congress, type, num] = v.split("-");
|
||||
return (
|
||||
<Link href={`/bills/${v}`} className="text-sm font-medium hover:text-primary transition-colors">
|
||||
{type && num ? billLabel(type, parseInt(num)) : v}
|
||||
</Link>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Section
|
||||
title="Members"
|
||||
items={members}
|
||||
renderValue={(v) => (
|
||||
<Link href={`/members/${v}`} className="text-sm font-medium hover:text-primary transition-colors">
|
||||
{v}
|
||||
</Link>
|
||||
{/* Bills */}
|
||||
<div>
|
||||
<h2 className="font-semibold mb-3">Bills ({bills.length})</h2>
|
||||
{!bills.length ? (
|
||||
<p className="text-sm text-muted-foreground">No bills followed yet.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{bills.map((f) => <BillRow key={f.id} follow={f} />)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Section
|
||||
title="Topics"
|
||||
items={topics}
|
||||
renderValue={(v) => (
|
||||
<Link href={`/bills?topic=${v}`} className="text-sm font-medium hover:text-primary transition-colors capitalize">
|
||||
{v.replace("-", " ")}
|
||||
</Link>
|
||||
{/* Members */}
|
||||
<div>
|
||||
<h2 className="font-semibold mb-3">Members ({members.length})</h2>
|
||||
{!members.length ? (
|
||||
<p className="text-sm text-muted-foreground">No members followed yet.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{members.map((f) => (
|
||||
<MemberRow key={f.id} follow={f} onRemove={() => remove.mutate(f.id)} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Topics */}
|
||||
<div>
|
||||
<h2 className="font-semibold mb-3">Topics ({topics.length})</h2>
|
||||
{!topics.length ? (
|
||||
<p className="text-sm text-muted-foreground">No topics followed yet.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{topics.map((f) => (
|
||||
<div key={f.id} className="bg-card border border-border rounded-lg p-3 flex items-center justify-between">
|
||||
<Link
|
||||
href={`/bills?topic=${f.follow_value}`}
|
||||
className="text-sm font-medium hover:text-primary transition-colors capitalize"
|
||||
>
|
||||
{f.follow_value.replace(/-/g, " ")}
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => remove.mutate(f.id)}
|
||||
className="text-muted-foreground hover:text-destructive transition-colors p-1"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,8 +2,13 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { Bell, Rss, CheckCircle, Copy, RefreshCw, XCircle, FlaskConical } from "lucide-react";
|
||||
import {
|
||||
Bell, Rss, CheckCircle, Copy, RefreshCw, XCircle,
|
||||
FlaskConical, Clock, Calendar, FileText, AlertTriangle,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { notificationsAPI, type NotificationTestResult } from "@/lib/api";
|
||||
import type { NotificationEvent } from "@/lib/types";
|
||||
|
||||
const AUTH_METHODS = [
|
||||
{ value: "none", label: "No authentication", hint: "Public ntfy.sh topics or open self-hosted servers" },
|
||||
@@ -11,12 +16,39 @@ const AUTH_METHODS = [
|
||||
{ value: "basic", label: "Username & password", hint: "For servers behind HTTP basic auth or nginx ACL" },
|
||||
];
|
||||
|
||||
const HOURS = Array.from({ length: 24 }, (_, i) => ({
|
||||
value: i,
|
||||
label: `${i.toString().padStart(2, "0")}:00 UTC`,
|
||||
}));
|
||||
|
||||
const EVENT_META: Record<string, { label: string; icon: typeof Bell; color: string }> = {
|
||||
new_document: { label: "New Bill Text", icon: FileText, color: "text-blue-500" },
|
||||
new_amendment: { label: "Amendment Filed", icon: FileText, color: "text-purple-500" },
|
||||
bill_updated: { label: "Bill Updated", icon: AlertTriangle, color: "text-orange-500" },
|
||||
};
|
||||
|
||||
function timeAgo(iso: string) {
|
||||
const diff = Date.now() - new Date(iso).getTime();
|
||||
const m = Math.floor(diff / 60000);
|
||||
if (m < 1) return "just now";
|
||||
if (m < 60) return `${m}m ago`;
|
||||
const h = Math.floor(m / 60);
|
||||
if (h < 24) return `${h}h ago`;
|
||||
return `${Math.floor(h / 24)}d ago`;
|
||||
}
|
||||
|
||||
export default function NotificationsPage() {
|
||||
const { data: settings, refetch } = useQuery({
|
||||
queryKey: ["notification-settings"],
|
||||
queryFn: () => notificationsAPI.getSettings(),
|
||||
});
|
||||
|
||||
const { data: history = [], isLoading: historyLoading } = useQuery({
|
||||
queryKey: ["notification-history"],
|
||||
queryFn: () => notificationsAPI.getHistory(),
|
||||
staleTime: 60 * 1000,
|
||||
});
|
||||
|
||||
const update = useMutation({
|
||||
mutationFn: (data: Parameters<typeof notificationsAPI.updateSettings>[0]) =>
|
||||
notificationsAPI.updateSettings(data),
|
||||
@@ -46,6 +78,17 @@ export default function NotificationsPage() {
|
||||
const [rssSaved, setRssSaved] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
// Quiet hours state
|
||||
const [quietEnabled, setQuietEnabled] = useState(false);
|
||||
const [quietStart, setQuietStart] = useState(22);
|
||||
const [quietEnd, setQuietEnd] = useState(8);
|
||||
const [quietSaved, setQuietSaved] = useState(false);
|
||||
|
||||
// Digest state
|
||||
const [digestEnabled, setDigestEnabled] = useState(false);
|
||||
const [digestFrequency, setDigestFrequency] = useState<"daily" | "weekly">("daily");
|
||||
const [digestSaved, setDigestSaved] = useState(false);
|
||||
|
||||
// Populate from loaded settings
|
||||
useEffect(() => {
|
||||
if (!settings) return;
|
||||
@@ -54,6 +97,15 @@ export default function NotificationsPage() {
|
||||
setToken(settings.ntfy_token ?? "");
|
||||
setUsername(settings.ntfy_username ?? "");
|
||||
setPassword(settings.ntfy_password ?? "");
|
||||
setDigestEnabled(settings.digest_enabled ?? false);
|
||||
setDigestFrequency(settings.digest_frequency ?? "daily");
|
||||
if (settings.quiet_hours_start != null) {
|
||||
setQuietEnabled(true);
|
||||
setQuietStart(settings.quiet_hours_start);
|
||||
setQuietEnd(settings.quiet_hours_end ?? 8);
|
||||
} else {
|
||||
setQuietEnabled(false);
|
||||
}
|
||||
}, [settings]);
|
||||
|
||||
const saveNtfy = (enabled: boolean) => {
|
||||
@@ -77,6 +129,28 @@ export default function NotificationsPage() {
|
||||
);
|
||||
};
|
||||
|
||||
const saveQuietHours = () => {
|
||||
if (quietEnabled) {
|
||||
update.mutate(
|
||||
{ quiet_hours_start: quietStart, quiet_hours_end: quietEnd },
|
||||
{ onSuccess: () => { setQuietSaved(true); setTimeout(() => setQuietSaved(false), 2000); } }
|
||||
);
|
||||
} else {
|
||||
// -1 signals the backend to clear the values
|
||||
update.mutate(
|
||||
{ quiet_hours_start: -1 },
|
||||
{ onSuccess: () => { setQuietSaved(true); setTimeout(() => setQuietSaved(false), 2000); } }
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const saveDigest = () => {
|
||||
update.mutate(
|
||||
{ digest_enabled: digestEnabled, digest_frequency: digestFrequency },
|
||||
{ onSuccess: () => { setDigestSaved(true); setTimeout(() => setDigestSaved(false), 2000); } }
|
||||
);
|
||||
};
|
||||
|
||||
const testNtfy = async () => {
|
||||
setNtfyTesting(true);
|
||||
setNtfyTestResult(null);
|
||||
@@ -119,6 +193,19 @@ export default function NotificationsPage() {
|
||||
? `${typeof window !== "undefined" ? window.location.origin : ""}/api/notifications/feed/${settings.rss_token}.xml`
|
||||
: null;
|
||||
|
||||
const ResultBadge = ({ result }: { result: NotificationTestResult }) => (
|
||||
<div className={`flex items-start gap-2 text-xs rounded-md px-3 py-2 ${
|
||||
result.status === "ok"
|
||||
? "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400"
|
||||
: "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400"
|
||||
}`}>
|
||||
{result.status === "ok"
|
||||
? <CheckCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" />
|
||||
: <XCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" />}
|
||||
{result.detail}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-8 max-w-2xl">
|
||||
<div>
|
||||
@@ -149,7 +236,6 @@ export default function NotificationsPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Topic URL */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium">Topic URL</label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
@@ -165,20 +251,13 @@ export default function NotificationsPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Auth method */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Authentication</label>
|
||||
<div className="space-y-2">
|
||||
{AUTH_METHODS.map(({ value, label, hint }) => (
|
||||
<label key={value} className="flex items-start gap-3 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="ntfy-auth"
|
||||
value={value}
|
||||
checked={authMethod === value}
|
||||
onChange={() => setAuthMethod(value)}
|
||||
className="mt-0.5"
|
||||
/>
|
||||
<input type="radio" name="ntfy-auth" value={value} checked={authMethod === value}
|
||||
onChange={() => setAuthMethod(value)} className="mt-0.5" />
|
||||
<div>
|
||||
<div className="text-sm font-medium">{label}</div>
|
||||
<div className="text-xs text-muted-foreground">{hint}</div>
|
||||
@@ -188,92 +267,144 @@ export default function NotificationsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Token input */}
|
||||
{authMethod === "token" && (
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium">Access Token</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="tk_..."
|
||||
value={token}
|
||||
<input type="password" placeholder="tk_..." value={token}
|
||||
onChange={(e) => setToken(e.target.value)}
|
||||
className="w-full px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
/>
|
||||
className="w-full px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Basic auth inputs */}
|
||||
{authMethod === "basic" && (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="your-username"
|
||||
value={username}
|
||||
<input type="text" placeholder="your-username" value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="w-full px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
/>
|
||||
className="w-full px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary" />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="your-password"
|
||||
value={password}
|
||||
<input type="password" placeholder="your-password" value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
/>
|
||||
className="w-full px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="space-y-3 pt-1 border-t border-border">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => saveNtfy(true)}
|
||||
disabled={!topicUrl.trim() || update.isPending}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
<button onClick={() => saveNtfy(true)} disabled={!topicUrl.trim() || update.isPending}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors">
|
||||
{ntfySaved ? <CheckCircle className="w-3.5 h-3.5" /> : <Bell className="w-3.5 h-3.5" />}
|
||||
{ntfySaved ? "Saved!" : "Save & Enable"}
|
||||
</button>
|
||||
<button
|
||||
onClick={testNtfy}
|
||||
disabled={!topicUrl.trim() || ntfyTesting}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-muted hover:bg-accent rounded-md disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{ntfyTesting
|
||||
? <RefreshCw className="w-3.5 h-3.5 animate-spin" />
|
||||
: <FlaskConical className="w-3.5 h-3.5" />}
|
||||
<button onClick={testNtfy} disabled={!topicUrl.trim() || ntfyTesting}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-muted hover:bg-accent rounded-md disabled:opacity-50 transition-colors">
|
||||
{ntfyTesting ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <FlaskConical className="w-3.5 h-3.5" />}
|
||||
{ntfyTesting ? "Sending…" : "Test"}
|
||||
</button>
|
||||
{settings?.ntfy_enabled && (
|
||||
<button
|
||||
onClick={() => saveNtfy(false)}
|
||||
disabled={update.isPending}
|
||||
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<button onClick={() => saveNtfy(false)} disabled={update.isPending}
|
||||
className="text-xs text-muted-foreground hover:text-foreground transition-colors">
|
||||
Disable
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{ntfyTestResult && (
|
||||
<div className={`flex items-start gap-2 text-xs rounded-md px-3 py-2 ${
|
||||
ntfyTestResult.status === "ok"
|
||||
? "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400"
|
||||
: "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400"
|
||||
}`}>
|
||||
{ntfyTestResult.status === "ok"
|
||||
? <CheckCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" />
|
||||
: <XCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" />}
|
||||
{ntfyTestResult.detail}
|
||||
</div>
|
||||
)}
|
||||
{ntfyTestResult && <ResultBadge result={ntfyTestResult} />}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Quiet Hours */}
|
||||
<section className="bg-card border border-border rounded-lg p-6 space-y-4">
|
||||
<div>
|
||||
<h2 className="font-semibold flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" /> Quiet Hours
|
||||
</h2>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Pause ntfy push notifications during set hours. Events accumulate and fire as a batch when quiet hours end.
|
||||
All times are UTC. RSS is unaffected.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<input type="checkbox" checked={quietEnabled} onChange={(e) => setQuietEnabled(e.target.checked)}
|
||||
className="rounded" />
|
||||
<span className="text-sm font-medium">Enable quiet hours</span>
|
||||
</label>
|
||||
|
||||
{quietEnabled && (
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm text-muted-foreground">From</label>
|
||||
<select value={quietStart} onChange={(e) => setQuietStart(Number(e.target.value))}
|
||||
className="px-2 py-1.5 text-sm bg-background border border-border rounded-md">
|
||||
{HOURS.map(({ value, label }) => <option key={value} value={value}>{label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm text-muted-foreground">To</label>
|
||||
<select value={quietEnd} onChange={(e) => setQuietEnd(Number(e.target.value))}
|
||||
className="px-2 py-1.5 text-sm bg-background border border-border rounded-md">
|
||||
{HOURS.map(({ value, label }) => <option key={value} value={value}>{label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
{quietStart > quietEnd && (
|
||||
<span className="text-xs text-muted-foreground">(overnight window)</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button onClick={saveQuietHours} disabled={update.isPending}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors">
|
||||
{quietSaved ? <CheckCircle className="w-3.5 h-3.5" /> : null}
|
||||
{quietSaved ? "Saved!" : "Save Quiet Hours"}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
{/* Digest */}
|
||||
<section className="bg-card border border-border rounded-lg p-6 space-y-4">
|
||||
<div>
|
||||
<h2 className="font-semibold flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" /> Digest Mode
|
||||
</h2>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Instead of per-event push notifications, receive a single bundled ntfy summary on a schedule.
|
||||
RSS feed is always real-time regardless of this setting.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<input type="checkbox" checked={digestEnabled} onChange={(e) => setDigestEnabled(e.target.checked)}
|
||||
className="rounded" />
|
||||
<span className="text-sm font-medium">Enable digest mode</span>
|
||||
</label>
|
||||
|
||||
{digestEnabled && (
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="text-sm text-muted-foreground">Frequency</label>
|
||||
<div className="flex gap-3">
|
||||
{(["daily", "weekly"] as const).map((freq) => (
|
||||
<label key={freq} className="flex items-center gap-2 cursor-pointer">
|
||||
<input type="radio" name="digest-freq" value={freq} checked={digestFrequency === freq}
|
||||
onChange={() => setDigestFrequency(freq)} />
|
||||
<span className="text-sm capitalize">{freq}</span>
|
||||
{freq === "weekly" && <span className="text-xs text-muted-foreground">(Mondays, 8 AM UTC)</span>}
|
||||
{freq === "daily" && <span className="text-xs text-muted-foreground">(8 AM UTC)</span>}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button onClick={saveDigest} disabled={update.isPending}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors">
|
||||
{digestSaved ? <CheckCircle className="w-3.5 h-3.5" /> : null}
|
||||
{digestSaved ? "Saved!" : "Save Digest Settings"}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
{/* RSS */}
|
||||
<section className="bg-card border border-border rounded-lg p-6 space-y-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
@@ -298,15 +429,8 @@ export default function NotificationsPage() {
|
||||
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Your feed URL</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 text-xs bg-muted px-2 py-2 rounded truncate">{rssUrl}</code>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(rssUrl);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}}
|
||||
className="shrink-0 p-1.5 rounded hover:bg-accent transition-colors"
|
||||
title="Copy RSS URL"
|
||||
>
|
||||
<button onClick={() => { navigator.clipboard.writeText(rssUrl); setCopied(true); setTimeout(() => setCopied(false), 2000); }}
|
||||
className="shrink-0 p-1.5 rounded hover:bg-accent transition-colors" title="Copy RSS URL">
|
||||
{copied ? <CheckCircle className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4 text-muted-foreground" />}
|
||||
</button>
|
||||
</div>
|
||||
@@ -316,61 +440,90 @@ export default function NotificationsPage() {
|
||||
<div className="space-y-3 pt-1 border-t border-border">
|
||||
<div className="flex items-center gap-3">
|
||||
{!settings?.rss_enabled ? (
|
||||
<button
|
||||
onClick={() => toggleRss(true)}
|
||||
disabled={update.isPending}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
<button onClick={() => toggleRss(true)} disabled={update.isPending}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors">
|
||||
{rssSaved ? <CheckCircle className="w-3.5 h-3.5" /> : <Rss className="w-3.5 h-3.5" />}
|
||||
{rssSaved ? "Enabled!" : "Enable RSS"}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => toggleRss(false)}
|
||||
disabled={update.isPending}
|
||||
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<button onClick={() => toggleRss(false)} disabled={update.isPending}
|
||||
className="text-xs text-muted-foreground hover:text-foreground transition-colors">
|
||||
Disable RSS
|
||||
</button>
|
||||
)}
|
||||
{rssUrl && (
|
||||
<>
|
||||
<button
|
||||
onClick={testRss}
|
||||
disabled={rssTesting}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-muted hover:bg-accent rounded-md disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{rssTesting
|
||||
? <RefreshCw className="w-3.5 h-3.5 animate-spin" />
|
||||
: <FlaskConical className="w-3.5 h-3.5" />}
|
||||
<button onClick={testRss} disabled={rssTesting}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-muted hover:bg-accent rounded-md disabled:opacity-50 transition-colors">
|
||||
{rssTesting ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <FlaskConical className="w-3.5 h-3.5" />}
|
||||
{rssTesting ? "Checking…" : "Test"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => resetRss.mutate()}
|
||||
disabled={resetRss.isPending}
|
||||
<button onClick={() => resetRss.mutate()} disabled={resetRss.isPending}
|
||||
className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
title="Generate a new URL — old URL will stop working"
|
||||
>
|
||||
<RefreshCw className="w-3 h-3" />
|
||||
Regenerate URL
|
||||
title="Generate a new URL — old URL will stop working">
|
||||
<RefreshCw className="w-3 h-3" /> Regenerate URL
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{rssTestResult && (
|
||||
<div className={`flex items-start gap-2 text-xs rounded-md px-3 py-2 ${
|
||||
rssTestResult.status === "ok"
|
||||
? "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400"
|
||||
: "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400"
|
||||
}`}>
|
||||
{rssTestResult.status === "ok"
|
||||
? <CheckCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" />
|
||||
: <XCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" />}
|
||||
{rssTestResult.detail}
|
||||
</div>
|
||||
)}
|
||||
{rssTestResult && <ResultBadge result={rssTestResult} />}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Notification History */}
|
||||
<section className="bg-card border border-border rounded-lg p-6 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="font-semibold flex items-center gap-2">
|
||||
<Bell className="w-4 h-4" /> Recent Alerts
|
||||
</h2>
|
||||
<p className="text-xs text-muted-foreground mt-1">Last 50 notification events for your account.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{historyLoading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading history…</p>
|
||||
) : history.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No events yet. Follow some bills and check back after the next poll.
|
||||
</p>
|
||||
) : (
|
||||
<div className="divide-y divide-border">
|
||||
{history.map((event: NotificationEvent) => {
|
||||
const meta = EVENT_META[event.event_type] ?? { label: "Update", icon: Bell, color: "text-muted-foreground" };
|
||||
const Icon = meta.icon;
|
||||
const payload = event.payload ?? {};
|
||||
return (
|
||||
<div key={event.id} className="flex items-start gap-3 py-3">
|
||||
<Icon className={`w-4 h-4 mt-0.5 shrink-0 ${meta.color}`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-xs font-medium">{meta.label}</span>
|
||||
{payload.bill_label && (
|
||||
<Link href={`/bills/${event.bill_id}`}
|
||||
className="text-xs font-mono bg-muted px-1.5 py-0.5 rounded hover:text-primary transition-colors">
|
||||
{payload.bill_label}
|
||||
</Link>
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground ml-auto">{timeAgo(event.created_at)}</span>
|
||||
</div>
|
||||
{payload.bill_title && (
|
||||
<p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{payload.bill_title}</p>
|
||||
)}
|
||||
{payload.brief_summary && (
|
||||
<p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{payload.brief_summary}</p>
|
||||
)}
|
||||
</div>
|
||||
<span className={`text-xs shrink-0 ${event.dispatched_at ? "text-green-500" : "text-amber-500"}`}
|
||||
title={event.dispatched_at ? `Sent ${timeAgo(event.dispatched_at)}` : "Pending dispatch"}>
|
||||
{event.dispatched_at ? "✓" : "⏳"}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
Settings,
|
||||
@@ -15,9 +15,11 @@ import {
|
||||
ShieldOff,
|
||||
BarChart3,
|
||||
Bell,
|
||||
Shield,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { settingsAPI, adminAPI, type AdminUser, type LLMModel, type ApiHealthResult } from "@/lib/api";
|
||||
import { settingsAPI, adminAPI, notificationsAPI, type AdminUser, type LLMModel, type ApiHealthResult } from "@/lib/api";
|
||||
import { useAuthStore } from "@/stores/authStore";
|
||||
|
||||
const LLM_PROVIDERS = [
|
||||
@@ -112,6 +114,23 @@ export default function SettingsPage() {
|
||||
model?: string;
|
||||
} | null>(null);
|
||||
const [testing, setTesting] = useState(false);
|
||||
|
||||
const [modeTestResults, setModeTestResults] = useState<Record<string, { status: string; detail: string }>>({});
|
||||
const [modeTestRunning, setModeTestRunning] = useState<Record<string, boolean>>({});
|
||||
const runModeTest = async (key: string, mode: string, event_type: string) => {
|
||||
setModeTestRunning((p) => ({ ...p, [key]: true }));
|
||||
try {
|
||||
const result = await notificationsAPI.testFollowMode(mode, event_type);
|
||||
setModeTestResults((p) => ({ ...p, [key]: result }));
|
||||
} catch (e: unknown) {
|
||||
setModeTestResults((p) => ({
|
||||
...p,
|
||||
[key]: { status: "error", detail: e instanceof Error ? e.message : String(e) },
|
||||
}));
|
||||
} finally {
|
||||
setModeTestRunning((p) => ({ ...p, [key]: false }));
|
||||
}
|
||||
};
|
||||
const [taskIds, setTaskIds] = useState<Record<string, string>>({});
|
||||
const [taskStatuses, setTaskStatuses] = useState<Record<string, "running" | "done" | "error">>({});
|
||||
const [confirmDelete, setConfirmDelete] = useState<number | null>(null);
|
||||
@@ -185,6 +204,87 @@ export default function SettingsPage() {
|
||||
<span className="text-xs text-muted-foreground group-hover:text-foreground">→</span>
|
||||
</Link>
|
||||
|
||||
{/* Follow Mode Notification Testing */}
|
||||
<section className="bg-card border border-border rounded-lg p-6 space-y-4">
|
||||
<div>
|
||||
<h2 className="font-semibold flex items-center gap-2">
|
||||
<Bell className="w-4 h-4" /> Follow Mode Notifications
|
||||
</h2>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Requires at least one bill followed and ntfy configured. Tests use your first followed bill.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-border">
|
||||
{([
|
||||
{
|
||||
key: "veto-suppress",
|
||||
mode: "pocket_veto",
|
||||
event_type: "new_document",
|
||||
icon: Shield,
|
||||
label: "Pocket Veto — suppress brief",
|
||||
description: "Sends a new_document event. Dispatcher should silently drop it — no ntfy notification.",
|
||||
expectColor: "text-amber-600 dark:text-amber-400",
|
||||
},
|
||||
{
|
||||
key: "veto-deliver",
|
||||
mode: "pocket_veto",
|
||||
event_type: "bill_updated",
|
||||
icon: Shield,
|
||||
label: "Pocket Veto — deliver milestone",
|
||||
description: "Sends a bill_updated (milestone) event. Dispatcher should allow it and send ntfy.",
|
||||
expectColor: "text-amber-600 dark:text-amber-400",
|
||||
},
|
||||
{
|
||||
key: "boost-deliver",
|
||||
mode: "pocket_boost",
|
||||
event_type: "bill_updated",
|
||||
icon: Zap,
|
||||
label: "Pocket Boost — deliver with actions",
|
||||
description: "Sends a bill_updated event. ntfy notification should include 'View Bill' and 'Find Your Rep' action buttons.",
|
||||
expectColor: "text-green-600 dark:text-green-400",
|
||||
},
|
||||
] as Array<{
|
||||
key: string;
|
||||
mode: string;
|
||||
event_type: string;
|
||||
icon: React.ElementType;
|
||||
label: string;
|
||||
description: string;
|
||||
expectColor: string;
|
||||
}>).map(({ key, mode, event_type, icon: Icon, label, description }) => {
|
||||
const result = modeTestResults[key];
|
||||
const running = modeTestRunning[key];
|
||||
return (
|
||||
<div key={key} className="flex items-start gap-3 py-3.5">
|
||||
<Icon className="w-4 h-4 mt-0.5 shrink-0 text-muted-foreground" />
|
||||
<div className="flex-1 min-w-0 space-y-1">
|
||||
<div className="text-sm font-medium">{label}</div>
|
||||
<p className="text-xs text-muted-foreground">{description}</p>
|
||||
{result && (
|
||||
<div className="flex items-start gap-1.5 text-xs mt-1">
|
||||
{result.status === "ok"
|
||||
? <CheckCircle className="w-3.5 h-3.5 text-green-500 shrink-0 mt-px" />
|
||||
: <XCircle className="w-3.5 h-3.5 text-red-500 shrink-0 mt-px" />}
|
||||
<span className={result.status === "ok" ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"}>
|
||||
{result.detail}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => runModeTest(key, mode, event_type)}
|
||||
disabled={running}
|
||||
className="shrink-0 flex items-center gap-1.5 px-3 py-1.5 text-xs bg-muted hover:bg-accent rounded-md transition-colors font-medium disabled:opacity-50"
|
||||
>
|
||||
{running ? <RefreshCw className="w-3 h-3 animate-spin" /> : "Run"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Analysis Status */}
|
||||
<section className="bg-card border border-border rounded-lg p-6 space-y-4">
|
||||
<h2 className="font-semibold flex items-center gap-2">
|
||||
|
||||
@@ -62,7 +62,7 @@ export function BillCard({ bill, compact = false }: BillCardProps) {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-2 shrink-0">
|
||||
<FollowButton type="bill" value={bill.bill_id} />
|
||||
<FollowButton type="bill" value={bill.bill_id} supportsModes />
|
||||
{score !== undefined && score > 0 && (
|
||||
<div className={cn("flex items-center gap-1 text-xs font-medium", trendColor(score))}>
|
||||
<TrendingUp className="w-3 h-3" />
|
||||
|
||||
@@ -1,44 +1,164 @@
|
||||
"use client";
|
||||
|
||||
import { Heart } from "lucide-react";
|
||||
import { useAddFollow, useIsFollowing, useRemoveFollow } from "@/lib/hooks/useFollows";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import { Heart, Shield, Zap, ChevronDown } from "lucide-react";
|
||||
import { useAddFollow, useIsFollowing, useRemoveFollow, useUpdateFollowMode } from "@/lib/hooks/useFollows";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const MODES = {
|
||||
neutral: {
|
||||
label: "Following",
|
||||
icon: Heart,
|
||||
color: "bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400",
|
||||
},
|
||||
pocket_veto: {
|
||||
label: "Pocket Veto",
|
||||
icon: Shield,
|
||||
color: "bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400",
|
||||
},
|
||||
pocket_boost: {
|
||||
label: "Pocket Boost",
|
||||
icon: Zap,
|
||||
color: "bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400",
|
||||
},
|
||||
} as const;
|
||||
|
||||
type FollowMode = keyof typeof MODES;
|
||||
|
||||
interface FollowButtonProps {
|
||||
type: "bill" | "member" | "topic";
|
||||
value: string;
|
||||
label?: string;
|
||||
supportsModes?: boolean;
|
||||
}
|
||||
|
||||
export function FollowButton({ type, value, label }: FollowButtonProps) {
|
||||
export function FollowButton({ type, value, label, supportsModes = false }: FollowButtonProps) {
|
||||
const existing = useIsFollowing(type, value);
|
||||
const add = useAddFollow();
|
||||
const remove = useRemoveFollow();
|
||||
const updateMode = useUpdateFollowMode();
|
||||
const [open, setOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const isFollowing = !!existing;
|
||||
const isPending = add.isPending || remove.isPending;
|
||||
const currentMode: FollowMode = (existing?.follow_mode as FollowMode) ?? "neutral";
|
||||
const isPending = add.isPending || remove.isPending || updateMode.isPending;
|
||||
|
||||
const handleClick = () => {
|
||||
if (isFollowing && existing) {
|
||||
remove.mutate(existing.id);
|
||||
} else {
|
||||
add.mutate({ type, value });
|
||||
}
|
||||
// Close dropdown on outside click
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handler);
|
||||
return () => document.removeEventListener("mousedown", handler);
|
||||
}, [open]);
|
||||
|
||||
// Simple toggle for non-bill follows
|
||||
if (!supportsModes) {
|
||||
const handleClick = () => {
|
||||
if (isFollowing && existing) {
|
||||
remove.mutate(existing.id);
|
||||
} else {
|
||||
add.mutate({ type, value });
|
||||
}
|
||||
};
|
||||
return (
|
||||
<button
|
||||
onClick={handleClick}
|
||||
disabled={isPending}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
||||
isFollowing
|
||||
? "bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400"
|
||||
: "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<Heart className={cn("w-3.5 h-3.5", isFollowing && "fill-current")} />
|
||||
{isFollowing ? "Unfollow" : label || "Follow"}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// Mode-aware follow button for bills
|
||||
if (!isFollowing) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => add.mutate({ type, value })}
|
||||
disabled={isPending}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<Heart className="w-3.5 h-3.5" />
|
||||
{label || "Follow"}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const { label: modeLabel, icon: ModeIcon, color } = MODES[currentMode];
|
||||
const otherModes = (Object.keys(MODES) as FollowMode[]).filter((m) => m !== currentMode);
|
||||
|
||||
const switchMode = (mode: FollowMode) => {
|
||||
if (existing) updateMode.mutate({ id: existing.id, mode });
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleUnfollow = () => {
|
||||
if (existing) remove.mutate(existing.id);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const modeDescriptions: Record<FollowMode, string> = {
|
||||
neutral: "Alert me on all material changes",
|
||||
pocket_veto: "Alert me only if this bill advances toward passage",
|
||||
pocket_boost: "Alert me on all changes + remind me to contact my rep",
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleClick}
|
||||
disabled={isPending}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
||||
isFollowing
|
||||
? "bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400"
|
||||
: "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
disabled={isPending}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
|
||||
color
|
||||
)}
|
||||
>
|
||||
<ModeIcon className={cn("w-3.5 h-3.5", currentMode === "neutral" && "fill-current")} />
|
||||
{modeLabel}
|
||||
<ChevronDown className="w-3 h-3 ml-0.5 opacity-70" />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute right-0 mt-1 w-64 bg-popover border border-border rounded-md shadow-lg z-50 py-1">
|
||||
{otherModes.map((mode) => {
|
||||
const { label: optLabel, icon: OptIcon } = MODES[mode];
|
||||
return (
|
||||
<button
|
||||
key={mode}
|
||||
onClick={() => switchMode(mode)}
|
||||
title={modeDescriptions[mode]}
|
||||
className="w-full text-left px-3 py-2 text-sm hover:bg-accent transition-colors flex flex-col gap-0.5"
|
||||
>
|
||||
<span className="flex items-center gap-1.5 font-medium">
|
||||
<OptIcon className="w-3.5 h-3.5" />
|
||||
Switch to {optLabel}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground pl-5">{modeDescriptions[mode]}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<div className="border-t border-border mt-1 pt-1">
|
||||
<button
|
||||
onClick={handleUnfollow}
|
||||
className="w-full text-left px-3 py-2 text-sm text-destructive hover:bg-accent transition-colors"
|
||||
>
|
||||
Unfollow
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<Heart className={cn("w-3.5 h-3.5", isFollowing && "fill-current")} />
|
||||
{isFollowing ? "Unfollow" : label || "Follow"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ import type {
|
||||
MemberTrendScore,
|
||||
MemberNewsArticle,
|
||||
NewsArticle,
|
||||
NotificationEvent,
|
||||
NotificationSettings,
|
||||
PaginatedResponse,
|
||||
SettingsData,
|
||||
@@ -98,6 +99,8 @@ export const followsAPI = {
|
||||
apiClient.post<Follow>("/api/follows", { follow_type, follow_value }).then((r) => r.data),
|
||||
remove: (id: number) =>
|
||||
apiClient.delete(`/api/follows/${id}`),
|
||||
updateMode: (id: number, mode: string) =>
|
||||
apiClient.patch<Follow>(`/api/follows/${id}/mode`, { follow_mode: mode }).then((r) => r.data),
|
||||
};
|
||||
|
||||
// Dashboard
|
||||
@@ -189,6 +192,10 @@ export const notificationsAPI = {
|
||||
apiClient.post<NotificationTestResult>("/api/notifications/test/ntfy", data).then((r) => r.data),
|
||||
testRss: () =>
|
||||
apiClient.post<NotificationTestResult>("/api/notifications/test/rss").then((r) => r.data),
|
||||
testFollowMode: (mode: string, event_type: string) =>
|
||||
apiClient.post<NotificationTestResult>("/api/notifications/test/follow-mode", { mode, event_type }).then((r) => r.data),
|
||||
getHistory: () =>
|
||||
apiClient.get<NotificationEvent[]>("/api/notifications/history").then((r) => r.data),
|
||||
};
|
||||
|
||||
// Admin
|
||||
|
||||
@@ -30,3 +30,12 @@ export function useIsFollowing(type: string, value: string) {
|
||||
const { data: follows = [] } = useFollows();
|
||||
return follows.find((f) => f.follow_type === type && f.follow_value === value);
|
||||
}
|
||||
|
||||
export function useUpdateFollowMode() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ id, mode }: { id: number; mode: string }) =>
|
||||
followsAPI.updateMode(id, mode),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ["follows"] }),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -138,6 +138,7 @@ export interface Follow {
|
||||
id: number;
|
||||
follow_type: "bill" | "member" | "topic";
|
||||
follow_value: string;
|
||||
follow_mode: "neutral" | "pocket_veto" | "pocket_boost";
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
@@ -164,4 +165,22 @@ export interface NotificationSettings {
|
||||
ntfy_enabled: boolean;
|
||||
rss_enabled: boolean;
|
||||
rss_token: string | null;
|
||||
digest_enabled: boolean;
|
||||
digest_frequency: "daily" | "weekly";
|
||||
quiet_hours_start: number | null;
|
||||
quiet_hours_end: number | null;
|
||||
}
|
||||
|
||||
export interface NotificationEvent {
|
||||
id: number;
|
||||
bill_id: string;
|
||||
event_type: "new_document" | "new_amendment" | "bill_updated";
|
||||
payload: {
|
||||
bill_title?: string;
|
||||
bill_label?: string;
|
||||
brief_summary?: string;
|
||||
bill_url?: string;
|
||||
} | null;
|
||||
dispatched_at: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user