fine tuning

frontend/src/pages/Settings/Publishing.tsx

@@ -8,6 +8,8 @@ import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
 import Checkbox from '../../components/form/input/Checkbox';
 import Label from '../../components/form/Label';
+import Input from '../../components/form/input/Input';
+import Select from '../../components/form/input/Select';
 import PublishingRules, { PublishingRule } from '../../components/publishing/PublishingRules';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { fetchAPI } from '../../services/api';
@@ -18,6 +20,9 @@ export default function Publishing() {
   const [saving, setSaving] = useState(false);
   const [defaultDestinations, setDefaultDestinations] = useState<string[]>(['sites']);
   const [autoPublishEnabled, setAutoPublishEnabled] = useState(false);
+  const [autoSyncEnabled, setAutoSyncEnabled] = useState(false);
+  const [syncInterval, setSyncInterval] = useState<number>(60); // Default 60 minutes
+  const [syncIntervalUnit, setSyncIntervalUnit] = useState<'minutes' | 'hours'>('minutes');
   const [publishingRules, setPublishingRules] = useState<PublishingRule[]>([]);
 
   useEffect(() => {
@@ -31,6 +36,9 @@ export default function Publishing() {
       // For now, use defaults
       setDefaultDestinations(['sites']);
       setAutoPublishEnabled(false);
+      setAutoSyncEnabled(false);
+      setSyncInterval(60);
+      setSyncIntervalUnit('minutes');
       setPublishingRules([]);
     } catch (error: any) {
       toast.error(`Failed to load settings: ${error.message}`);
@@ -147,6 +155,67 @@ export default function Publishing() {
           </div>
         </Card>
 
+        {/* Auto-Sync Settings */}
+        <Card className="p-6">
+          <div className="space-y-4">
+            <div>
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
+                Auto-Sync Settings
+              </h2>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                Configure automatic content synchronization with publishing platforms
+              </p>
+            </div>
+
+            <div className="flex items-center gap-3">
+              <Checkbox
+                checked={autoSyncEnabled}
+                onChange={(e) => setAutoSyncEnabled(e.target.checked)}
+                label="Enable auto-sync"
+              />
+            </div>
+
+            {autoSyncEnabled && (
+              <div className="mt-4 space-y-4">
+                <div>
+                  <Label>Sync Interval</Label>
+                  <div className="flex gap-3 items-center mt-2">
+                    <div className="w-32">
+                      <Input
+                        type="number"
+                        min="1"
+                        max={syncIntervalUnit === 'minutes' ? 1440 : 24}
+                        value={syncInterval}
+                        onChange={(e) => setSyncInterval(parseInt(e.target.value) || 1)}
+                        placeholder="60"
+                      />
+                    </div>
+                    <div className="w-32">
+                      <Select
+                        value={syncIntervalUnit}
+                        onChange={(e) => setSyncIntervalUnit(e.target.value as 'minutes' | 'hours')}
+                      >
+                        <option value="minutes">Minutes</option>
+                        <option value="hours">Hours</option>
+                      </Select>
+                    </div>
+                  </div>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    How often the system should check for and publish ready content
+                  </p>
+                </div>
+
+                <div className="p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
+                  <p className="text-sm text-amber-800 dark:text-amber-200">
+                    <strong>Note:</strong> Content will be automatically published every{' '}
+                    {syncInterval} {syncIntervalUnit} if it has status "review" and all images are generated.
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </Card>
+
         {/* Publishing Rules */}
         <Card className="p-6">
           <PublishingRules rules={publishingRules} onChange={setPublishingRules} />