feat: Implement automatic database cleanup feature with configuration options and API support

src/components/config/ConfigTabs.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 import { GitHubConfigForm } from './GitHubConfigForm';
 import { GiteaConfigForm } from './GiteaConfigForm';
 import { ScheduleConfigForm } from './ScheduleConfigForm';
+import { DatabaseCleanupConfigForm } from './DatabaseCleanupConfigForm';
 import type {
   ConfigApiResponse,
   GiteaConfig,
@@ -9,6 +10,7 @@ import type {
   SaveConfigApiRequest,
   SaveConfigApiResponse,
   ScheduleConfig,
+  DatabaseCleanupConfig,
 } from '@/types/config';
 import { Button } from '../ui/button';
 import { useAuth } from '@/hooks/useAuth';
@@ -22,6 +24,7 @@ type ConfigState = {
   githubConfig: GitHubConfig;
   giteaConfig: GiteaConfig;
   scheduleConfig: ScheduleConfig;
+  cleanupConfig: DatabaseCleanupConfig;
 };
 
 export function ConfigTabs() {
@@ -48,13 +51,19 @@ export function ConfigTabs() {
       enabled: false,
       interval: 3600,
     },
+    cleanupConfig: {
+      enabled: false,
+      retentionDays: 7,
+    },
   });
   const { user, refreshUser } = useAuth();
   const [isLoading, setIsLoading] = useState(true);
   const [isSyncing, setIsSyncing] = useState<boolean>(false);
   const [isConfigSaved, setIsConfigSaved] = useState<boolean>(false);
-  const [isAutoSaving, setIsAutoSaving] = useState<boolean>(false);
-  const autoSaveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const [isAutoSavingSchedule, setIsAutoSavingSchedule] = useState<boolean>(false);
+  const [isAutoSavingCleanup, setIsAutoSavingCleanup] = useState<boolean>(false);
+  const autoSaveScheduleTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const autoSaveCleanupTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const isConfigFormValid = (): boolean => {
     const { githubConfig, giteaConfig } = config;
@@ -107,6 +116,7 @@ export function ConfigTabs() {
       githubConfig: config.githubConfig,
       giteaConfig: config.giteaConfig,
       scheduleConfig: config.scheduleConfig,
+      cleanupConfig: config.cleanupConfig,
     };
     try {
       const response = await fetch('/api/config', {
@@ -142,19 +152,20 @@ export function ConfigTabs() {
     if (!user?.id || !isConfigSaved) return; // Only auto-save if config was previously saved
 
     // Clear any existing timeout
-    if (autoSaveTimeoutRef.current) {
-      clearTimeout(autoSaveTimeoutRef.current);
+    if (autoSaveScheduleTimeoutRef.current) {
+      clearTimeout(autoSaveScheduleTimeoutRef.current);
     }
 
     // Debounce the auto-save to prevent excessive API calls
-    autoSaveTimeoutRef.current = setTimeout(async () => {
-      setIsAutoSaving(true);
+    autoSaveScheduleTimeoutRef.current = setTimeout(async () => {
+      setIsAutoSavingSchedule(true);
 
       const reqPayload: SaveConfigApiRequest = {
         userId: user.id!,
         githubConfig: config.githubConfig,
         giteaConfig: config.giteaConfig,
         scheduleConfig: scheduleConfig,
+        cleanupConfig: config.cleanupConfig,
       };
 
       try {
@@ -184,16 +195,71 @@ export function ConfigTabs() {
           { duration: 3000 }
         );
       } finally {
-        setIsAutoSaving(false);
+        setIsAutoSavingSchedule(false);
       }
     }, 500); // 500ms debounce
-  }, [user?.id, isConfigSaved, config.githubConfig, config.giteaConfig]);
+  }, [user?.id, isConfigSaved, config.githubConfig, config.giteaConfig, config.cleanupConfig]);
 
-  // Cleanup timeout on unmount
+  // Auto-save function specifically for cleanup config changes
+  const autoSaveCleanupConfig = useCallback(async (cleanupConfig: DatabaseCleanupConfig) => {
+    if (!user?.id || !isConfigSaved) return; // Only auto-save if config was previously saved
+
+    // Clear any existing timeout
+    if (autoSaveCleanupTimeoutRef.current) {
+      clearTimeout(autoSaveCleanupTimeoutRef.current);
+    }
+
+    // Debounce the auto-save to prevent excessive API calls
+    autoSaveCleanupTimeoutRef.current = setTimeout(async () => {
+      setIsAutoSavingCleanup(true);
+
+      const reqPayload: SaveConfigApiRequest = {
+        userId: user.id!,
+        githubConfig: config.githubConfig,
+        giteaConfig: config.giteaConfig,
+        scheduleConfig: config.scheduleConfig,
+        cleanupConfig: cleanupConfig,
+      };
+
+      try {
+        const response = await fetch('/api/config', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(reqPayload),
+        });
+        const result: SaveConfigApiResponse = await response.json();
+
+        if (result.success) {
+          // Silent success - no toast for auto-save
+          // Invalidate config cache so other components get fresh data
+          invalidateConfigCache();
+        } else {
+          toast.error(
+            `Auto-save failed: ${result.message || 'Unknown error'}`,
+            { duration: 3000 }
+          );
+        }
+      } catch (error) {
+        toast.error(
+          `Auto-save error: ${
+            error instanceof Error ? error.message : String(error)
+          }`,
+          { duration: 3000 }
+        );
+      } finally {
+        setIsAutoSavingCleanup(false);
+      }
+    }, 500); // 500ms debounce
+  }, [user?.id, isConfigSaved, config.githubConfig, config.giteaConfig, config.scheduleConfig]);
+
+  // Cleanup timeouts on unmount
   useEffect(() => {
     return () => {
-      if (autoSaveTimeoutRef.current) {
-        clearTimeout(autoSaveTimeoutRef.current);
+      if (autoSaveScheduleTimeoutRef.current) {
+        clearTimeout(autoSaveScheduleTimeoutRef.current);
+      }
+      if (autoSaveCleanupTimeoutRef.current) {
+        clearTimeout(autoSaveCleanupTimeoutRef.current);
       }
     };
   }, []);
@@ -216,6 +282,8 @@ export function ConfigTabs() {
               response.giteaConfig || config.giteaConfig,
             scheduleConfig:
               response.scheduleConfig || config.scheduleConfig,
+            cleanupConfig:
+              response.cleanupConfig || config.cleanupConfig,
           });
           if (response.id) setIsConfigSaved(true);
         }
@@ -273,11 +341,20 @@ export function ConfigTabs() {
               </div>
             </div>
           </div>
-          <div className="border rounded-lg p-4">
-            <div className="space-y-4">
-              <Skeleton className="h-8 w-48" />
-              <Skeleton className="h-16 w-full" />
-              <Skeleton className="h-8 w-32" />
+          <div className="flex gap-x-4">
+            <div className="w-1/2 border rounded-lg p-4">
+              <div className="space-y-4">
+                <Skeleton className="h-8 w-48" />
+                <Skeleton className="h-16 w-full" />
+                <Skeleton className="h-8 w-32" />
+              </div>
+            </div>
+            <div className="w-1/2 border rounded-lg p-4">
+              <div className="space-y-4">
+                <Skeleton className="h-8 w-48" />
+                <Skeleton className="h-16 w-full" />
+                <Skeleton className="h-8 w-32" />
+              </div>
             </div>
           </div>
         </div>
@@ -368,20 +445,40 @@ export function ConfigTabs() {
             }
           />
         </div>
-        <ScheduleConfigForm
-          config={config.scheduleConfig}
-          setConfig={update =>
-            setConfig(prev => ({
-              ...prev,
-              scheduleConfig:
-                typeof update === 'function'
-                  ? update(prev.scheduleConfig)
-                  : update,
-            }))
-          }
-          onAutoSave={autoSaveScheduleConfig}
-          isAutoSaving={isAutoSaving}
-        />
+        <div className="flex gap-x-4">
+          <div className="w-1/2">
+            <ScheduleConfigForm
+              config={config.scheduleConfig}
+              setConfig={update =>
+                setConfig(prev => ({
+                  ...prev,
+                  scheduleConfig:
+                    typeof update === 'function'
+                      ? update(prev.scheduleConfig)
+                      : update,
+                }))
+              }
+              onAutoSave={autoSaveScheduleConfig}
+              isAutoSaving={isAutoSavingSchedule}
+            />
+          </div>
+          <div className="w-1/2">
+            <DatabaseCleanupConfigForm
+              config={config.cleanupConfig}
+              setConfig={update =>
+                setConfig(prev => ({
+                  ...prev,
+                  cleanupConfig:
+                    typeof update === 'function'
+                      ? update(prev.cleanupConfig)
+                      : update,
+                }))
+              }
+              onAutoSave={autoSaveCleanupConfig}
+              isAutoSaving={isAutoSavingCleanup}
+            />
+          </div>
+        </div>
       </div>
     </div>
   );

src/components/config/DatabaseCleanupConfigForm.tsx

@@ -0,0 +1,146 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "../ui/checkbox";
+import type { DatabaseCleanupConfig } from "@/types/config";
+import { formatDate } from "@/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { RefreshCw, Database } from "lucide-react";
+
+interface DatabaseCleanupConfigFormProps {
+  config: DatabaseCleanupConfig;
+  setConfig: React.Dispatch<React.SetStateAction<DatabaseCleanupConfig>>;
+  onAutoSave?: (config: DatabaseCleanupConfig) => void;
+  isAutoSaving?: boolean;
+}
+
+export function DatabaseCleanupConfigForm({
+  config,
+  setConfig,
+  onAutoSave,
+  isAutoSaving = false,
+}: DatabaseCleanupConfigFormProps) {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
+    const { name, value, type } = e.target;
+    const newConfig = {
+      ...config,
+      [name]:
+        type === "checkbox" ? (e.target as HTMLInputElement).checked : value,
+    };
+    setConfig(newConfig);
+
+    // Trigger auto-save for cleanup config changes
+    if (onAutoSave) {
+      onAutoSave(newConfig);
+    }
+  };
+
+  // Predefined retention periods
+  const retentionOptions: { value: number; label: string }[] = [
+    { value: 1, label: "1 day" },
+    { value: 3, label: "3 days" },
+    { value: 7, label: "7 days" },
+    { value: 14, label: "14 days" },
+    { value: 30, label: "30 days" },
+    { value: 60, label: "60 days" },
+    { value: 90, label: "90 days" },
+  ];
+
+  return (
+    <Card>
+      <CardContent className="pt-6 relative">
+        {isAutoSaving && (
+          <div className="absolute top-4 right-4 flex items-center text-sm text-muted-foreground">
+            <RefreshCw className="h-3 w-3 animate-spin mr-1" />
+            <span className="text-xs">Auto-saving...</span>
+          </div>
+        )}
+        <div className="flex flex-col gap-y-4">
+          <div className="flex items-center">
+            <Checkbox
+              id="cleanup-enabled"
+              name="enabled"
+              checked={config.enabled}
+              onCheckedChange={(checked) =>
+                handleChange({
+                  target: {
+                    name: "enabled",
+                    type: "checkbox",
+                    checked: Boolean(checked),
+                    value: "",
+                  },
+                } as React.ChangeEvent<HTMLInputElement>)
+              }
+            />
+            <label
+              htmlFor="cleanup-enabled"
+              className="select-none ml-2 block text-sm font-medium"
+            >
+              <div className="flex items-center gap-2">
+                <Database className="h-4 w-4" />
+                Enable Automatic Database Cleanup
+              </div>
+            </label>
+          </div>
+
+          {config.enabled && (
+            <div>
+              <label className="block text-sm font-medium mb-2">
+                Retention Period
+              </label>
+
+              <Select
+                name="retentionDays"
+                value={String(config.retentionDays)}
+                onValueChange={(value) =>
+                  handleChange({
+                    target: { name: "retentionDays", value },
+                  } as React.ChangeEvent<HTMLInputElement>)
+                }
+              >
+                <SelectTrigger className="w-full border border-input dark:bg-background dark:hover:bg-background">
+                  <SelectValue placeholder="Select retention period" />
+                </SelectTrigger>
+                <SelectContent className="bg-background text-foreground border border-input shadow-sm">
+                  {retentionOptions.map((option) => (
+                    <SelectItem
+                      key={option.value}
+                      value={option.value.toString()}
+                      className="cursor-pointer text-sm px-3 py-2 hover:bg-accent focus:bg-accent focus:text-accent-foreground"
+                    >
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              <p className="text-xs text-muted-foreground mt-1">
+                Activities and events older than this period will be automatically deleted.
+              </p>
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm font-medium mb-1">Last Run</label>
+            <div className="text-sm">
+              {config.lastRun ? formatDate(config.lastRun) : "Never"}
+            </div>
+          </div>
+
+          {config.nextRun && config.enabled && (
+            <div>
+              <label className="block text-sm font-medium mb-1">Next Run</label>
+              <div className="text-sm">{formatDate(config.nextRun)}</div>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/components/config/ScheduleConfigForm.tsx

@@ -90,51 +90,53 @@ export function ScheduleConfigForm({
             </label>
           </div>
 
-          <div>
-            <label
-              htmlFor="interval"
-              className="block text-sm font-medium mb-1.5"
-            >
-              Mirroring Interval
-            </label>
-
-            <Select
-              name="interval"
-              value={String(config.interval)}
-              onValueChange={(value) =>
-                handleChange({
-                  target: { name: "interval", value },
-                } as React.ChangeEvent<HTMLInputElement>)
-              }
-            >
-              <SelectTrigger className="w-full border border-input dark:bg-background dark:hover:bg-background">
-                <SelectValue placeholder="Select interval" />
-              </SelectTrigger>
-              <SelectContent className="bg-background text-foreground border border-input shadow-sm">
-                {intervals.map((interval) => (
-                  <SelectItem
-                    key={interval.value}
-                    value={interval.value.toString()}
-                    className="cursor-pointer text-sm px-3 py-2 hover:bg-accent focus:bg-accent focus:text-accent-foreground"
-                  >
-                    {interval.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-
-            <p className="text-xs text-muted-foreground mt-1">
-              How often the mirroring process should run.
-            </p>
-          </div>
-
-          {config.lastRun && (
+          {config.enabled && (
             <div>
-              <label className="block text-sm font-medium mb-1">Last Run</label>
-              <div className="text-sm">{formatDate(config.lastRun)}</div>
+              <label
+                htmlFor="interval"
+                className="block text-sm font-medium mb-1.5"
+              >
+                Mirroring Interval
+              </label>
+
+              <Select
+                name="interval"
+                value={String(config.interval)}
+                onValueChange={(value) =>
+                  handleChange({
+                    target: { name: "interval", value },
+                  } as React.ChangeEvent<HTMLInputElement>)
+                }
+              >
+                <SelectTrigger className="w-full border border-input dark:bg-background dark:hover:bg-background">
+                  <SelectValue placeholder="Select interval" />
+                </SelectTrigger>
+                <SelectContent className="bg-background text-foreground border border-input shadow-sm">
+                  {intervals.map((interval) => (
+                    <SelectItem
+                      key={interval.value}
+                      value={interval.value.toString()}
+                      className="cursor-pointer text-sm px-3 py-2 hover:bg-accent focus:bg-accent focus:text-accent-foreground"
+                    >
+                      {interval.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              <p className="text-xs text-muted-foreground mt-1">
+                How often the mirroring process should run.
+              </p>
             </div>
           )}
 
+          <div>
+            <label className="block text-sm font-medium mb-1">Last Run</label>
+            <div className="text-sm">
+              {config.lastRun ? formatDate(config.lastRun) : "Never"}
+            </div>
+          </div>
+
           {config.nextRun && config.enabled && (
             <div>
               <label className="block text-sm font-medium mb-1">Next Run</label>