klbr/LetterFeed
1
0
Fork 0
mirror of https://github.com/khoaliber/LetterFeed.git synced 2026-03-05 05:39:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: toast for settings save

Browse Source
This commit is contained in:
Leon
2025-07-16 18:20:45 +02:00
parent 0e19af170d
commit d47e975574
2 changed files with 137 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
frontend/components/letterfeed/SettingsDialog.tsx
View File

@@ -11,9 +11,21 @@ import {
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { Loader2, CheckCircle, XCircle } from "lucide-react"
import { Settings as AppSettings, SettingsCreate, updateSettings, testImapConnection } from "@/lib/api"
import {
Settings as AppSettings,
SettingsCreate,
updateSettings,
testImapConnection,
} from "@/lib/api"
import { toast } from "sonner"
interface SettingsDialogProps {
settings: AppSettings
@@ -23,9 +35,19 @@ interface SettingsDialogProps {
onSuccess: () => void
}
export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange, onSuccess }: SettingsDialogProps) {
const [currentSettings, setCurrentSettings] = useState<SettingsCreate | null>(null)
const [testConnectionStatus, setTestConnectionStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
export function SettingsDialog({
settings,
folderOptions,
isOpen,
onOpenChange,
onSuccess,
}: SettingsDialogProps) {
const [currentSettings, setCurrentSettings] = useState<SettingsCreate | null>(
null
)
const [testConnectionStatus, setTestConnectionStatus] = useState<
"idle" | "loading" | "success" | "error"
>("idle")
const [testConnectionMessage, setTestConnectionMessage] = useState("")
useEffect(() => {
@@ -36,7 +58,10 @@ export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange,
if (!currentSettings) return null
const handleSettingsChange = <K extends keyof SettingsCreate>(key: K, value: SettingsCreate[K]) => {
const handleSettingsChange = <K extends keyof SettingsCreate>(
key: K,
value: SettingsCreate[K]
) => {
setCurrentSettings((prev) => (prev ? { ...prev, [key]: value } : null))
}
@@ -44,10 +69,12 @@ export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange,
if (!currentSettings) return
try {
await updateSettings(currentSettings)
toast.success("Settings saved successfully!")
onOpenChange(false)
onSuccess()
} catch (error) {
console.error("Failed to save settings:", error)
toast.error("Failed to save settings.")
}
}
@@ -74,18 +101,24 @@ export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange,
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Settings</DialogTitle>
<DialogDescription>Fields are locked if they are set by environment variables.</DialogDescription>
<DialogDescription>
Fields are locked if they are set by environment variables.
</DialogDescription>
</DialogHeader>
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 py-4">
{/* IMAP Configuration */}
<div className="space-y-4">
<h3 className="text-lg font-medium col-span-1 md:col-span-2">IMAP Configuration</h3>
<h3 className="text-lg font-medium col-span-1 md:col-span-2">
IMAP Configuration
</h3>
<div className="space-y-2">
<Label htmlFor="imap-server">IMAP Server</Label>
<Input
id="imap-server"
value={currentSettings.imap_server}
onChange={(e) => handleSettingsChange("imap_server", e.target.value)}
onChange={(e) =>
handleSettingsChange("imap_server", e.target.value)
}
placeholder="imap.gmail.com"
disabled={settings.locked_fields.includes("imap_server")}
/>
@@ -95,7 +128,9 @@ export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange,
<Input
id="imap-username"
value={currentSettings.imap_username}
onChange={(e) => handleSettingsChange("imap_username", e.target.value)}
onChange={(e) =>
handleSettingsChange("imap_username", e.target.value)
}
placeholder="your-email@gmail.com"
disabled={settings.locked_fields.includes("imap_username")}
/>
@@ -106,7 +141,9 @@ export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange,
id="imap-password"
type="password"
value={currentSettings.imap_password}
onChange={(e) => handleSettingsChange("imap_password", e.target.value)}
onChange={(e) =>
handleSettingsChange("imap_password", e.target.value)
}
placeholder="Your password or app password"
disabled={settings.locked_fields.includes("imap_password")}
/>
@@ -118,18 +155,26 @@ export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange,
variant="outline"
size="sm"
>
{testConnectionStatus === "loading" && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
{testConnectionStatus === "loading" && (
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
)}
Test Connection
</Button>
{testConnectionStatus !== "idle" && (
<div
data-testid="connection-status"
className={`mt-2 flex items-center text-sm ${
testConnectionStatus === "success" ? "text-green-600" : "text-red-600"
testConnectionStatus === "success"
? "text-green-600"
: "text-red-600"
}`}
>
{testConnectionStatus === "success" && <CheckCircle className="w-4 h-4 mr-2" />}
{testConnectionStatus === "error" && <XCircle className="w-4 h-4 mr-2" />}
{testConnectionStatus === "success" && (
<CheckCircle className="w-4 h-4 mr-2" />
)}
{testConnectionStatus === "error" && (
<XCircle className="w-4 h-4 mr-2" />
)}
{testConnectionMessage}
</div>
)}
@@ -138,12 +183,16 @@ export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange,
{/* Email Processing */}
<div className="space-y-4">
<h3 className="text-lg font-medium col-span-1 md:col-span-2">Email Processing</h3>
<h3 className="text-lg font-medium col-span-1 md:col-span-2">
Email Processing
</h3>
<div className="space-y-2">
<Label htmlFor="search-folder">Folder to Search</Label>
<Select
value={currentSettings.search_folder}
onValueChange={(value) => handleSettingsChange("search_folder", value)}
onValueChange={(value) =>
handleSettingsChange("search_folder", value)
}
disabled={settings.locked_fields.includes("search_folder")}
>
<SelectTrigger>
@@ -162,7 +211,12 @@ export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange,
<Label htmlFor="move-folder">Move to Folder</Label>
<Select
value={currentSettings.move_to_folder || "None"}
onValueChange={(value) => handleSettingsChange("move_to_folder", value === "None" ? null : value)}
onValueChange={(value) =>
handleSettingsChange(
"move_to_folder",
value === "None" ? null : value
)
}
disabled={settings.locked_fields.includes("move_to_folder")}
>
<SelectTrigger>
@@ -186,7 +240,12 @@ export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange,
min="1"
max="1440"
value={currentSettings.email_check_interval}
onChange={(e) => handleSettingsChange("email_check_interval", Number.parseInt(e.target.value) || 15)}
onChange={(e) =>
handleSettingsChange(
"email_check_interval",
Number.parseInt(e.target.value) || 15
)
}
placeholder="15"
disabled={settings.locked_fields.includes("email_check_interval")}
/>
@@ -195,7 +254,9 @@ export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange,
<Checkbox
id="mark-read"
checked={currentSettings.mark_as_read}
onCheckedChange={(checked) => handleSettingsChange("mark_as_read", !!checked)}
onCheckedChange={(checked) =>
handleSettingsChange("mark_as_read", !!checked)
}
disabled={settings.locked_fields.includes("mark_as_read")}
/>
<Label htmlFor="mark-read" className="text-sm font-normal">
@@ -206,7 +267,9 @@ export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange,
<Checkbox
id="auto-add"
checked={currentSettings.auto_add_new_senders}
onCheckedChange={(checked) => handleSettingsChange("auto_add_new_senders", !!checked)}
onCheckedChange={(checked) =>
handleSettingsChange("auto_add_new_senders", !!checked)
}
disabled={settings.locked_fields.includes("auto_add_new_senders")}
/>
<Label htmlFor="auto-add" className="text-sm font-normal">