fix(frontend): tooltip on folder line (#2650)

…isabled state

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromConnections/SyncElementLine/SyncElementLine.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 
 import { Checkbox } from "@/lib/components/ui/Checkbox/Checkbox";
 import Icon from "@/lib/components/ui/Icon/Icon";
+import Tooltip from "@/lib/components/ui/Tooltip/Tooltip";
 
 import styles from "./SyncElementLine.module.scss";
 
@@ -64,7 +65,7 @@ export const SyncElementLine = ({
     setChecked((prevChecked) => !prevChecked);
   };
 
-  return (
+  const content = (
     <div
       className={`${styles.sync_element_line_wrapper} ${
         isCheckboxHovered || !isFolder || checked ? styles.no_hover : ""
@@ -85,11 +86,6 @@ export const SyncElementLine = ({
           checked={checked}
           setChecked={handleSetChecked}
           disabled={!selectable}
-          tooltip={
-            !selectable
-              ? "Only premium members can sync folders. This feature automatically adds new files from your folders to your brain, keeping it up-to-date without manual effort."
-              : ""
-          }
         />
       </div>
 
@@ -97,4 +93,12 @@ export const SyncElementLine = ({
       <span className={styles.element_name}>{name}</span>
     </div>
   );
+
+  return selectable ? (
+    content
+  ) : (
+    <Tooltip tooltip="Only premium members can sync folders. This feature automatically adds new files from your folders to your brain, keeping it up-to-date without manual effort.">
+      {content}
+    </Tooltip>
+  );
 };

frontend/lib/components/AddBrainModal/components/BrainRecapStep/BrainRecapStep.tsx

@@ -48,13 +48,13 @@ export const BrainRecapStep = (): JSX.Element => {
   return (
     <div className={styles.brain_recap_wrapper}>
       <div className={styles.content_wrapper}>
-        <span className={styles.title}>Brain Recap</span>
         <MessageInfoBox type="warning">
           <span className={styles.warning_message}>
             Depending on the number of knowledge, the upload can take
             <strong> few minutes</strong>.
           </span>
         </MessageInfoBox>
+        <span className={styles.title}>Brain Recap</span>
         <div className={styles.brain_info_wrapper}>
           <div className={styles.name_field}>
             <Controller

frontend/lib/components/ui/Checkbox/Checkbox.tsx

@@ -3,14 +3,12 @@ import { useEffect, useState } from "react";
 import styles from "./Checkbox.module.scss";
 
 import { Icon } from "../Icon/Icon";
-import Tooltip from "../Tooltip/Tooltip";
 
 interface CheckboxProps {
   label?: string;
   checked: boolean;
   setChecked: (value: boolean) => void;
   disabled?: boolean;
-  tooltip?: string;
 }
 
 export const Checkbox = ({
@@ -18,7 +16,6 @@ export const Checkbox = ({
   checked,
   setChecked,
   disabled,
-  tooltip,
 }: CheckboxProps): JSX.Element => {
   const [currentChecked, setCurrentChecked] = useState<boolean>(checked);
 
@@ -26,7 +23,7 @@ export const Checkbox = ({
     setCurrentChecked(checked);
   }, [checked]);
 
-  const checkboxElement = (
+  return (
     <div
       className={`${styles.checkbox_wrapper} ${
         disabled ? styles.disabled : ""
@@ -47,10 +44,4 @@ export const Checkbox = ({
       {label && <span>{label}</span>}
     </div>
   );
-
-  return tooltip ? (
-    <Tooltip tooltip={tooltip}>{checkboxElement}</Tooltip>
-  ) : (
-    checkboxElement
-  );
 };