From 4cf7fdc1c2d058bb68d54cfa89a0cb623ead4652 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Fri, 20 Mar 2026 00:38:04 +0100
Subject: [PATCH] feat(frontend): add library sync interval + sync now to admin
 settings panel

---
 .../components/transcode-settings-dialog.tsx  | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/k-tv-frontend/app/(main)/dashboard/components/transcode-settings-dialog.tsx b/k-tv-frontend/app/(main)/dashboard/components/transcode-settings-dialog.tsx
index ac3b75f..785c835 100644
--- a/k-tv-frontend/app/(main)/dashboard/components/transcode-settings-dialog.tsx
+++ b/k-tv-frontend/app/(main)/dashboard/components/transcode-settings-dialog.tsx
@@ -18,6 +18,8 @@ import {
   useTranscodeStats,
   useClearTranscodeCache,
 } from "@/hooks/use-transcode";
+import { useAdminSettings, useUpdateAdminSettings } from "@/hooks/use-admin-settings";
+import { useTriggerSync, useLibrarySyncStatus } from "@/hooks/use-library-sync";
 import { toast } from "sonner";
 
 interface Props {
@@ -39,6 +41,14 @@ export function TranscodeSettingsDialog({ open, onOpenChange }: Props) {
   const updateSettings = useUpdateTranscodeSettings();
   const clearCache = useClearTranscodeCache();
 
+  const { data: adminSettings } = useAdminSettings();
+  const updateAdminSettings = useUpdateAdminSettings();
+  const triggerSync = useTriggerSync();
+  const { data: syncStatuses } = useLibrarySyncStatus();
+  const syncInterval = adminSettings?.library_sync_interval_hours ?? 6;
+  const [syncIntervalInput, setSyncIntervalInput] = useState<number | null>(null);
+  const displayInterval = syncIntervalInput ?? syncInterval;
+
   const [ttl, setTtl] = useState<number>(24);
   const [confirmClear, setConfirmClear] = useState(false);
 
@@ -130,6 +140,42 @@ export function TranscodeSettingsDialog({ open, onOpenChange }: Props) {
           )}
         </div>
 
+        <div className="border-t border-zinc-800 pt-4 mt-4">
+          <h3 className="text-sm font-medium mb-3">Library sync</h3>
+          <div className="flex items-center gap-3 mb-3">
+            <label className="text-xs text-zinc-400 w-32">Sync interval (hours)</label>
+            <Input
+              type="number"
+              min={1}
+              max={168}
+              value={displayInterval}
+              onChange={e => setSyncIntervalInput(Number(e.target.value))}
+              className="h-8 w-24 text-xs bg-zinc-800 border-zinc-700 text-zinc-100"
+            />
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => updateAdminSettings.mutate({ library_sync_interval_hours: displayInterval })}
+              disabled={updateAdminSettings.isPending}
+              className="border-zinc-700 bg-transparent text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100"
+            >
+              Save
+            </Button>
+          </div>
+          <Button
+            size="sm"
+            onClick={() => triggerSync.mutate()}
+            disabled={triggerSync.isPending || syncStatuses?.some(s => s.status === "running")}
+          >
+            {triggerSync.isPending ? "Triggering…" : "Sync now"}
+          </Button>
+          {syncStatuses?.map(s => (
+            <p key={s.id} className="mt-1 text-xs text-zinc-500">
+              {s.provider_id}: {s.status} — {s.items_found} items
+            </p>
+          ))}
+        </div>
+
         <DialogFooter>
           <Button
             variant="outline"