Refactor AiAssistantKeywordSearch to use SelectablePagePageList component for page selection and removal

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementKeywordSearch.module.scss

@@ -1,6 +1,5 @@
 @use '@growi/core-styles/scss/variables/growi-official-colors';
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-@use '~/styles/variables' as var;
 
 
 .grw-ai-assistant-keyword-search :global {
@@ -20,31 +19,4 @@
        display: none !important;
     }
   }
-
-  .list-group-item {
-    border: none;
-  }
-}
-
-// == Colors
-@include bs.color-mode(light) {
-  .grw-ai-assistant-keyword-search :global {
-    .list-group-item {
-      background-color: #{bs.$gray-100};
-        &:hover {
-          background-color: var(--grw-primary-100);
-      }
-    }
-  }
-}
-
-@include bs.color-mode(dark) {
-  .grw-ai-assistant-keyword-search :global {
-    .list-group-item {
-      background-color: #{bs.$gray-900};
-      &:hover {
-        background-color: var(--grw-primary-800);
-      }
-    }
-  }
 }

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

@@ -16,6 +16,7 @@ import {
 } from '../../../stores/ai-assistant';
 
 import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
+import { SelectablePagePageList } from './SelectablePagePageList';
 
 import styles from './AiAssistantManagementKeywordSearch.module.scss';
 
@@ -150,43 +151,11 @@ export const AiAssistantKeywordSearch = (): JSX.Element => {
             <h4 className="text-center fw-bold mb-4 mt-5">
               {t('modal_ai_assistant.select_assistant_reference_pages')}
             </h4>
-
-            <div className="px-4 list-group">
-              {searchResult?.data.map((page) => {
-                return (
-                  <button
-                    type="button"
-                    className="list-group-item list-group-item-action d-flex align-items-center p-1 mb-2 rounded"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                    }}
-                  >
-                    <button
-                      type="button"
-                      className="btn text-primary"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        addPageHandler(page.data);
-                      }}
-                    >
-                      <span className="material-symbols-outlined">
-                        add_circle
-                      </span>
-                    </button>
-                    <div className="flex-grow-1">
-                      <span>
-                        {page.data.path}
-                      </span>
-                    </div>
-                    <span className="badge bg-body-secondary rounded-pill me-2">
-                      <span className="text-body-tertiary">
-                        {page.data.descendantCount}
-                      </span>
-                    </span>
-                  </button>
-                );
-              })}
-            </div>
+            <SelectablePagePageList
+              pages={searchResult?.data.map(page => page.data) ?? []}
+              method="add"
+              onClick={addPageHandler}
+            />
           </>
         )}
 
@@ -195,46 +164,14 @@ export const AiAssistantKeywordSearch = (): JSX.Element => {
             <h4 className="text-center fw-bold mb-4 mt-3">
               {t('modal_ai_assistant.reference_pages')}
             </h4>
-            <div className="px-4 list-group">
-              {selectedPages?.map((page) => {
-                return (
-                  <button
-                    type="button"
-                    className="list-group-item list-group-item-action d-flex align-items-center p-1 mb-2 rounded"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                    }}
-                  >
-                    <button
-                      type="button"
-                      className="btn text-secondary"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        removePageHandler(page);
-                      }}
-                    >
-                      <span className="material-symbols-outlined">
-                        do_not_disturb_on
-                      </span>
-                    </button>
-                    <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>
-                  </button>
-                );
-              })}
-            </div>
+            <SelectablePagePageList
+              pages={selectedPages}
+              method="remove"
+              onClick={removePageHandler}
+            />
           </>
         )}
 
-
       </ModalBody>
     </div>
   );

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

@@ -0,0 +1,32 @@
+@use '~/styles/variables' as var;
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/variables/growi-official-colors';
+
+.selectable-page-page-list :global {
+  .list-group-item {
+    border: none;
+  }
+}
+
+// == Colors
+@include bs.color-mode(light) {
+  .selectable-page-page-list :global {
+    .list-group-item {
+      background-color: #{bs.$gray-100};
+        &:hover {
+          background-color: var(--grw-primary-100);
+      }
+    }
+  }
+}
+
+@include bs.color-mode(dark) {
+  .selectable-page-page-list :global {
+    .list-group-item {
+      background-color: #{bs.$gray-900};
+      &:hover {
+        background-color: var(--grw-primary-800);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+import type { IPageHasId } from '@growi/core';
+
+import styles from './SelectablePagePageList.module.scss';
+
+const moduleClass = styles['selectable-page-page-list'] ?? '';
+
+type Props = {
+  pages: IPageHasId[],
+  onClick: (page: IPageHasId) => void,
+  method: 'add' | 'remove',
+}
+
+export const SelectablePagePageList = (props: Props): JSX.Element => {
+  const { pages, method, onClick } = props;
+
+  return (
+    <div className={`px-4 list-group ${moduleClass}`}>
+      {pages.map((page) => {
+        return (
+          <button
+            key={page._id}
+            type="button"
+            className="list-group-item list-group-item-action d-flex align-items-center p-1 mb-2 rounded"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <button
+              type="button"
+              className={`btn ${method === 'add' ? 'text-primary' : 'text-secondary'}`}
+              onClick={(e) => {
+                e.stopPropagation();
+                onClick(page);
+              }}
+            >
+              <span className="material-symbols-outlined">
+                { method === 'add' ? 'add_circle' : 'do_not_disturb_on' }
+              </span>
+            </button>
+            <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>
+          </button>
+        );
+      })}
+    </div>
+  );
+};