feat(AuthFilesOAuthExcludedEditPage): refactor model item rendering to use SelectionCheckbox component

src/pages/AuthFilesOAuthExcludedEditPage.module.scss

@@ -170,19 +170,19 @@
 }
 
 .modelItem {
-  display: flex;
-  align-items: center;
-  gap: $spacing-sm;
+  width: 100%;
+  align-items: flex-start;
   padding: 10px 0;
   border-bottom: 1px solid var(--border-color);
+  border-radius: $radius-sm;
+  transition: background-color $transition-fast;
 
   &:last-child {
     border-bottom: none;
   }
 
-  input {
-    width: 16px;
-    height: 16px;
+  &:hover {
+    background-color: var(--bg-hover);
   }
 }
 
@@ -191,6 +191,7 @@
   flex-direction: column;
   gap: 2px;
   min-width: 0;
+  flex: 1;
 }
 
 .modelId {

src/pages/AuthFilesOAuthExcludedEditPage.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { SelectionCheckbox } from '@/components/ui/SelectionCheckbox';
 import { AutocompleteInput } from '@/components/ui/AutocompleteInput';
 import { EmptyState } from '@/components/ui/EmptyState';
 import { IconInfo } from '@/components/ui/icons';
@@ -400,20 +401,22 @@ export function AuthFilesOAuthExcludedEditPage() {
                 {modelsList.map((model) => {
                   const checked = selectedModels.has(model.id);
                   return (
-                    <label key={model.id} className={styles.modelItem}>
-                      <input
-                        type="checkbox"
-                        checked={checked}
-                        disabled={disableControls || saving}
-                        onChange={(event) => toggleModel(model.id, event.target.checked)}
-                      />
-                      <span className={styles.modelText}>
-                        <span className={styles.modelId}>{model.id}</span>
-                        {model.display_name && model.display_name !== model.id && (
-                          <span className={styles.modelDisplayName}>{model.display_name}</span>
-                        )}
-                      </span>
-                    </label>
+                    <SelectionCheckbox
+                      key={model.id}
+                      checked={checked}
+                      disabled={disableControls || saving}
+                      onChange={(value) => toggleModel(model.id, value)}
+                      className={styles.modelItem}
+                      labelClassName={styles.modelText}
+                      label={
+                        <>
+                          <span className={styles.modelId}>{model.id}</span>
+                          {model.display_name && model.display_name !== model.id && (
+                            <span className={styles.modelDisplayName}>{model.display_name}</span>
+                          )}
+                        </>
+                      }
+                    />
                   );
                 })}
               </div>