mirror of
https://github.com/elisiariocouto/leggen.git
synced 2025-12-26 10:59:27 +00:00
feat(frontend): Implement notification settings with separate drawers and improved design.
- Add shadcn/ui drawer and switch components - Create NotificationFiltersDrawer for editing notification filters - Create DiscordConfigDrawer with test functionality - Create TelegramConfigDrawer with test functionality - Add reusable EditButton component for consistent design language - Refactor Settings page to use separate drawers per configuration type - Remove test notifications card, integrate testing into service drawers - Simplify notification service status indicators for cleaner UI - Remove redundant service descriptions for streamlined layout 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Elisiário Couto
181
frontend/src/components/DiscordConfigDrawer.tsx
Normal file
181
frontend/src/components/DiscordConfigDrawer.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { MessageSquare, TestTube } from "lucide-react";
|
||||
import { apiClient } from "../lib/api";
|
||||
import { Button } from "./ui/button";
|
||||
import { Input } from "./ui/input";
|
||||
import { Label } from "./ui/label";
|
||||
import { Switch } from "./ui/switch";
|
||||
import { EditButton } from "./ui/edit-button";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerTrigger,
|
||||
} from "./ui/drawer";
|
||||
import type { NotificationSettings, DiscordConfig } from "../types/api";
|
||||
|
||||
interface DiscordConfigDrawerProps {
|
||||
settings: NotificationSettings | undefined;
|
||||
trigger?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function DiscordConfigDrawer({
|
||||
settings,
|
||||
trigger,
|
||||
}: DiscordConfigDrawerProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [config, setConfig] = useState<DiscordConfig>({
|
||||
webhook: "",
|
||||
enabled: true,
|
||||
});
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
useEffect(() => {
|
||||
if (settings?.discord) {
|
||||
setConfig({ ...settings.discord });
|
||||
}
|
||||
}, [settings]);
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (discordConfig: DiscordConfig) =>
|
||||
apiClient.updateNotificationSettings({
|
||||
...settings,
|
||||
discord: discordConfig,
|
||||
filters: settings?.filters || { case_insensitive: [], case_sensitive: [] },
|
||||
}),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["notificationSettings"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["notificationServices"] });
|
||||
setOpen(false);
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("Failed to update Discord configuration:", error);
|
||||
},
|
||||
});
|
||||
|
||||
const testMutation = useMutation({
|
||||
mutationFn: () => apiClient.testNotification({
|
||||
service: "discord",
|
||||
message: "Test notification from Leggen - Discord configuration is working!"
|
||||
}),
|
||||
onSuccess: () => {
|
||||
console.log("Test Discord notification sent successfully");
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("Failed to send test Discord notification:", error);
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
updateMutation.mutate(config);
|
||||
};
|
||||
|
||||
const handleTest = () => {
|
||||
testMutation.mutate();
|
||||
};
|
||||
|
||||
const isConfigValid = config.webhook.trim().length > 0 && config.webhook.includes('discord.com/api/webhooks');
|
||||
|
||||
return (
|
||||
<Drawer open={open} onOpenChange={setOpen}>
|
||||
<DrawerTrigger asChild>
|
||||
{trigger || <EditButton />}
|
||||
</DrawerTrigger>
|
||||
<DrawerContent>
|
||||
<div className="mx-auto w-full max-w-md">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle className="flex items-center space-x-2">
|
||||
<MessageSquare className="h-5 w-5 text-primary" />
|
||||
<span>Discord Configuration</span>
|
||||
</DrawerTitle>
|
||||
<DrawerDescription>
|
||||
Configure Discord webhook notifications for transaction alerts
|
||||
</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-4 space-y-6">
|
||||
{/* Enable/Disable Toggle */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-base font-medium">Enable Discord Notifications</Label>
|
||||
<Switch
|
||||
checked={config.enabled}
|
||||
onCheckedChange={(enabled) => setConfig({ ...config, enabled })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Webhook URL */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="discord-webhook">Discord Webhook URL</Label>
|
||||
<Input
|
||||
id="discord-webhook"
|
||||
type="url"
|
||||
placeholder="https://discord.com/api/webhooks/..."
|
||||
value={config.webhook}
|
||||
onChange={(e) => setConfig({ ...config, webhook: e.target.value })}
|
||||
disabled={!config.enabled}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Create a webhook in your Discord server settings under Integrations → Webhooks
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Configuration Status */}
|
||||
{config.enabled && (
|
||||
<div className="p-3 bg-muted rounded-md">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-2 h-2 rounded-full ${isConfigValid ? 'bg-green-500' : 'bg-red-500'}`} />
|
||||
<span className="text-sm font-medium">
|
||||
{isConfigValid ? 'Configuration Valid' : 'Invalid Webhook URL'}
|
||||
</span>
|
||||
</div>
|
||||
{!isConfigValid && config.webhook.trim().length > 0 && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Please enter a valid Discord webhook URL
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DrawerFooter className="px-0">
|
||||
<div className="flex space-x-2">
|
||||
<Button type="submit" disabled={updateMutation.isPending || !config.enabled}>
|
||||
{updateMutation.isPending ? "Saving..." : "Save Configuration"}
|
||||
</Button>
|
||||
{config.enabled && isConfigValid && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleTest}
|
||||
disabled={testMutation.isPending}
|
||||
>
|
||||
{testMutation.isPending ? (
|
||||
<>
|
||||
<TestTube className="h-4 w-4 mr-2 animate-spin" />
|
||||
Testing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TestTube className="h-4 w-4 mr-2" />
|
||||
Test
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<DrawerClose asChild>
|
||||
<Button variant="ghost">Cancel</Button>
|
||||
</DrawerClose>
|
||||
</DrawerFooter>
|
||||
</form>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user