Intertwined server and client components parts

Description

Some client components are composed of parts bound by hooks or callbacks, and other parts, which does not contain interactive elements. Therefore, each of them could be divided into two separte components:

• One with the part connected to hooks, callbacks, event handlers etc., which would have use client sentence at the top of its file.
• Another one with the part which could be easily rendered on server side, i.e. headers, subheaders, descriptions.

After this split, these components could be combined in one component passed to the server side.

Steps to reproduce

One example of such component:

1. Go into the /src/component-library/pages/Rule/approve/ApproveRule.tsx.
2. Look at its structure and distinguish between the part containing headers and tips, and the part with interactive elements.

Rucio WebUI Version

No response

Additional Information

These problem occur in many components, not only in the example provided above.

Start with /src/component-library/pages/Rule/approve/ApproveRule.tsx and inspect how its headers and tips are mixed with hooks, callbacks, and other interactive elements. Identify similar intertwined components before changing scope. Done means the static portions can render on the server while interactive portions remain in client components, with the parts composed together.