Refactor AiAssistantKeywordSearch and SelectablePagePageList to always display the page list, adding a message for no selected pages and ensuring consistent class naming.

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

@@ -194,23 +194,11 @@ export const AiAssistantKeywordSearch = (props: { updateBaseSelectedPages: (page
         </h4>
 
         <div className="px-4">
-          { selectedPages.length > 0
-            ? (
-              <SelectablePagePageList
-                pages={selectedPages}
-                method="remove"
-                onClickMethodButton={removePageHandler}
-              />
-            )
-            : (
-              <div className="card bg-light border-0 text-center px-4">
-                <div className="card-body">
-                  <p className="text-muted mb-0">{t('modal_ai_assistant.no_pages_selected')}</p>
-                </div>
-              </div>
-            )
-          }
-
+          <SelectablePagePageList
+            pages={selectedPages}
+            method="remove"
+            onClickMethodButton={removePageHandler}
+          />
           <label className="form-text text-muted mt-2">
             {t('modal_ai_assistant.can_add_later')}
           </label>

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

@@ -5,9 +5,9 @@
 // == Colors
 @include bs.color-mode(light) {
   .selectable-page-page-list :global {
-    .list-group-item {
+    .page-list-item {
       background-color: #{bs.$gray-100};
-        &:hover {
+        &:not(.card):hover {
           background-color: var(--grw-primary-100);
       }
     }
@@ -16,9 +16,9 @@
 
 @include bs.color-mode(dark) {
   .selectable-page-page-list :global {
-    .list-group-item {
+    .page-list-item {
       background-color: #{bs.$gray-900};
-      &:hover {
+      &:not(.card):hover {
         background-color: var(--grw-primary-800);
       }
     }

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

@@ -1,4 +1,5 @@
 import type { IPageHasId } from '@growi/core';
+import { useTranslation } from 'react-i18next';
 
 import styles from './SelectablePagePageList.module.scss';
 
@@ -16,6 +17,20 @@ export const SelectablePagePageList = (props: Props): JSX.Element => {
     pages, method, disablePageIds, onClickMethodButton,
   } = props;
 
+  const { t } = useTranslation();
+
+  if (pages.length === 0) {
+    return (
+      <div className={moduleClass}>
+        <div className="card border-0 text-center page-list-item">
+          <div className="card-body">
+            <p className="text-muted mb-0">{t('modal_ai_assistant.no_pages_selected')}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={`list-group ${moduleClass}`}>
       {pages.map((page) => {
@@ -23,7 +38,7 @@ export const SelectablePagePageList = (props: Props): JSX.Element => {
           <button
             key={page._id}
             type="button"
-            className="list-group-item border-0 list-group-item-action d-flex align-items-center p-1 mb-2 rounded"
+            className="list-group-item border-0 list-group-item-action page-list-item d-flex align-items-center p-1 mb-2 rounded"
             onClick={(e) => {
               e.stopPropagation();
             }}