feat: implement tweakable utility workers concurrency, instead of hard-coded value set to 5

spotizerr-ui/src/components/config/ServerTab.tsx

@@ -110,6 +110,76 @@ function SpotifyApiForm() {
   );
 }
 
+function UtilityConcurrencyForm() {
+  const queryClient = useQueryClient();
+  const { data: configData, isLoading } = useQuery({
+    queryKey: ["config"],
+    queryFn: () => authApiClient.getConfig<any>(),
+  });
+
+  const { register, handleSubmit, reset, formState: { isDirty } } = useForm<{ utilityConcurrency: number }>();
+
+  useEffect(() => {
+    if (configData) {
+      reset({ utilityConcurrency: Number(configData.utilityConcurrency ?? 1) });
+    }
+  }, [configData, reset]);
+
+  const mutation = useMutation({
+    mutationFn: (payload: { utilityConcurrency: number }) => authApiClient.updateConfig(payload),
+    onSuccess: () => {
+      toast.success("Utility worker concurrency saved!");
+      queryClient.invalidateQueries({ queryKey: ["config"] });
+    },
+    onError: (e) => {
+      toast.error(`Failed to save: ${(e as any).message}`);
+    },
+  });
+
+  const onSubmit = (values: { utilityConcurrency: number }) => {
+    const value = Math.max(1, Number(values.utilityConcurrency || 1));
+    mutation.mutate({ utilityConcurrency: value });
+  };
+
+  if (isLoading) return <p className="text-content-muted dark:text-content-muted-dark">Loading server settings...</p>;
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div className="flex items-center justify-end mb-2">
+        <div className="flex items-center gap-3">
+          <button
+            type="submit"
+            disabled={mutation.isPending || !isDirty}
+            className="px-4 py-2 bg-button-primary hover:bg-button-primary-hover text-button-primary-text rounded-md disabled:opacity-50"
+            title="Save Utility Concurrency"
+          >
+            {mutation.isPending ? (
+              <img src="/spinner.svg" alt="Saving" className="w-5 h-5 animate-spin logo" />
+            ) : (
+              <img src="/save.svg" alt="Save" className="w-5 h-5 logo" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <label htmlFor="utilityConcurrency" className="text-content-primary dark:text-content-primary-dark">Utility Worker Concurrency</label>
+        <input
+          id="utilityConcurrency"
+          type="number"
+          min={1}
+          step={1}
+          {...register("utilityConcurrency", { valueAsNumber: true })}
+          className="block w-full p-2 border bg-input-background dark:bg-input-background-dark border-input-border dark:border-input-border-dark rounded-md focus:outline-none focus:ring-2 focus:ring-input-focus"
+          placeholder="1"
+        />
+        <p className="text-xs text-content-secondary dark:text-content-secondary-dark">Controls concurrency of the utility Celery worker. Minimum 1.</p>
+      </div>
+    </form>
+  );
+}
+
+// --- Components ---
 function WebhookForm() {
   const queryClient = useQueryClient();
   const { data, isLoading } = useQuery({ queryKey: ["webhookConfig"], queryFn: fetchWebhookConfig });
@@ -223,6 +293,12 @@ export function ServerTab() {
         <SpotifyApiForm />
       </div>
       <hr className="border-border dark:border-border-dark" />
+      <div>
+        <h3 className="text-xl font-semibold text-content-primary dark:text-content-primary-dark">Utility Worker</h3>
+        <p className="text-sm text-content-muted dark:text-content-muted-dark mt-1">Tune background utility worker concurrency for low-powered systems.</p>
+        <UtilityConcurrencyForm />
+      </div>
+      <hr className="border-border dark:border-border-dark" />
       <div>
         <h3 className="text-xl font-semibold text-content-primary dark:text-content-primary-dark">Webhooks</h3>
         <p className="text-sm text-content-muted dark:text-content-muted-dark mt-1">