round14: Uebernehmen-Bug und Suggestion-Debounce fixen, Read-Later-Verwaltungsseite, konfigurierbares Read-Later-Limit

apps/frontend/src/routes/admin/SettingsPage.tsx

@@ -15,8 +15,17 @@ function InfoRow({ label, value }: { label: string; value: string }) {
   );
 }
 
-function RecentVisitsLimitSetting() {
-  const { data: settings } = useSettings();
+function LimitSetting({
+  label,
+  hint,
+  settingKey,
+  value: currentValue,
+}: {
+  label: string;
+  hint: string;
+  settingKey: "recentVisitsLimit" | "readLaterLimit";
+  value: number | undefined;
+}) {
   const queryClient = useQueryClient();
   const [value, setValue] = useState<string | null>(null);
 
@@ -25,7 +34,7 @@ function RecentVisitsLimitSetting() {
       const res = await fetch("/api/settings", {
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ recentVisitsLimit: limit }),
+        body: JSON.stringify({ [settingKey]: limit }),
       });
       if (!res.ok) throw new Error(`Speichern fehlgeschlagen (HTTP ${res.status})`);
       return res.json();
@@ -33,15 +42,13 @@ function RecentVisitsLimitSetting() {
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ["settings"] }),
   });
 
-  const displayed = value ?? String(settings?.recentVisitsLimit ?? 5);
+  const displayed = value ?? String(currentValue ?? 5);
 
   return (
     <div className="flex items-center justify-between py-2">
       <div>
-        <span className="text-sm text-black/50 dark:text-white/50">
-          Anzahl „Zuletzt besucht"
-        </span>
-        <p className="text-xs text-black/30 dark:text-white/30">0 = Leiste ausblenden</p>
+        <span className="text-sm text-black/50 dark:text-white/50">{label}</span>
+        <p className="text-xs text-black/30 dark:text-white/30">{hint}</p>
       </div>
       <div className="flex items-center gap-2">
         <input
@@ -282,6 +289,7 @@ function DangerZone() {
 export function SettingsPage() {
   const { health, error } = useBackendHealth();
   const [theme, toggleTheme] = useTheme();
+  const { data: settings } = useSettings();
 
   return (
     <div>
@@ -301,7 +309,18 @@ export function SettingsPage() {
               {theme === "dark" ? "🌙 Dunkel" : "☀️ Hell"} – wechseln
             </button>
           </div>
-          <RecentVisitsLimitSetting />
+          <LimitSetting
+            label='Anzahl „Zuletzt besucht"'
+            hint="0 = Leiste ausblenden"
+            settingKey="recentVisitsLimit"
+            value={settings?.recentVisitsLimit}
+          />
+          <LimitSetting
+            label='Anzahl „Später lesen" auf der Startseite'
+            hint="0 = Box ausblenden. Ändert nichts an der Gesamtliste (siehe Admin -> Später lesen)."
+            settingKey="readLaterLimit"
+            value={settings?.readLaterLimit}
+          />
         </div>
 
         <div className="rounded-2xl border border-black/10 p-5 dark:border-white/10">