refactor: add isEditable prop to SelectablePagePageList and update rendering logic

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

@@ -1,6 +1,21 @@
 @use '~/styles/variables' as var;
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 
+ .selectable-page-page-list :global {
+    .page-path {
+      padding: 0.25rem 0.5rem;
+    }
+
+    .page-path-editable {
+      cursor: pointer;
+      border-radius: var(--bs-border-radius);
+
+      &:hover {
+        border: 2px solid var(--bs-border-color);
+      }
+    }
+}
+
 
 // == Colors
 @include bs.color-mode(light) {
@@ -8,12 +23,6 @@
     .page-list-item {
       background-color: #{bs.$gray-100};
     }
-
-    .list-group-item {
-      &:hover {
-        background-color: var(--grw-primary-100);
-      }
-    }
   }
 }
 
@@ -22,11 +31,5 @@
     .page-list-item {
       background-color: #{bs.$gray-900};
     }
-
-    .list-group-item {
-      &:hover {
-        background-color: var(--grw-primary-800)
-      }
-    }
   }
 }

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

@@ -48,6 +48,7 @@ type SelectablePagePageListProps = {
   method: 'add' | 'remove' | 'delete'
   methodButtonPosition?: 'left' | 'right',
   disablePagePaths?: string[],
+  isEditable?: boolean,
   onClickMethodButton: (page: SelectablePage) => void,
 }
 
@@ -57,6 +58,7 @@ export const SelectablePagePageList = (props: SelectablePagePageListProps): JSX.
     method,
     methodButtonPosition = 'left',
     disablePagePaths = [],
+    isEditable,
     onClickMethodButton,
   } = props;
 
@@ -125,7 +127,7 @@ export const SelectablePagePageList = (props: SelectablePagePageListProps): JSX.
             }
 
             <div className={`flex-grow-1 ${methodButtonPosition === 'left' ? 'me-4' : 'ms-2'}`}>
-              <span>
+              <span className={`page-path ${isEditable ? 'page-path-editable' : ''}`}>
                 {page.path}
               </span>
             </div>