refactor: add methodButtonPosition prop to SelectablePagePageList for flexible button placement

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementPageTreeSelection.tsx

@@ -61,7 +61,7 @@ const SelectablePageTree = memo((props: { onClickAddPageButton: (page: IPageHasI
             pageTreeItemHandler(page);
           }}
         >
-          <span className="material-symbols-outlined p-0 me-3 text-primary">add_circle</span>
+          <span className="material-symbols-outlined p-0 me-2 text-primary">add_circle</span>
         </button>
       );
     };
@@ -122,6 +122,7 @@ export const AiAssistantManagementPageTreeSelection = (): JSX.Element => {
           <SelectablePagePageList
             pages={Array.from(selectedPages.values())}
             method="remove"
+            methodButtonPosition="right"
             onClickMethodButton={removePageHandler}
           />
           <label className="form-text text-muted mt-2">

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/SelectablePagePageList.tsx

@@ -8,17 +8,40 @@ const moduleClass = styles['selectable-page-page-list'] ?? '';
 type Props = {
   pages: IPageHasId[],
   method: 'add' | 'remove',
+  methodButtonPosition?: 'left' | 'right',
   disablePageIds?: string[],
   onClickMethodButton: (page: IPageHasId) => void,
 }
 
 export const SelectablePagePageList = (props: Props): JSX.Element => {
   const {
-    pages, method, disablePageIds, onClickMethodButton,
+    pages,
+    method,
+    methodButtonPosition = 'left',
+    disablePageIds,
+    onClickMethodButton,
   } = props;
 
   const { t } = useTranslation();
 
+  const methodButton = (page: IPageHasId) => {
+    return (
+      <button
+        type="button"
+        className={`btn border-0 ${method === 'add' ? 'text-primary' : 'text-secondary'}`}
+        disabled={disablePageIds?.includes(page._id)}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClickMethodButton(page);
+        }}
+      >
+        <span className="material-symbols-outlined">
+          { method === 'add' ? 'add_circle' : 'do_not_disturb_on' }
+        </span>
+      </button>
+    );
+  };
+
   if (pages.length === 0) {
     return (
       <div className={moduleClass}>
@@ -41,29 +64,22 @@ export const SelectablePagePageList = (props: Props): JSX.Element => {
               e.stopPropagation();
             }}
           >
-            <button
-              type="button"
-              className={`btn border-0 ${method === 'add' ? 'text-primary' : 'text-secondary'}`}
-              disabled={disablePageIds?.includes(page._id)}
-              onClick={(e) => {
-                e.stopPropagation();
-                onClickMethodButton(page);
-              }}
-            >
-              <span className="material-symbols-outlined">
-                { method === 'add' ? 'add_circle' : 'do_not_disturb_on' }
-              </span>
-            </button>
+
+            {methodButtonPosition === 'left' && methodButton(page)}
+
             <div className="flex-grow-1">
               <span>
                 {page.path}
               </span>
             </div>
+
             <span className="badge bg-body-secondary rounded-pill me-2">
               <span className="text-body-tertiary">
                 {page.descendantCount}
               </span>
             </span>
+
+            {methodButtonPosition === 'right' && methodButton(page)}
           </button>
         );
       })}