feat: replace AI provider modals with dedicated edit pages

src/pages/AuthFilesOAuthExcludedEditPage.tsx

@@ -6,7 +6,8 @@ import { Button } from '@/components/ui/Button';
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
 import { AutocompleteInput } from '@/components/ui/AutocompleteInput';
 import { EmptyState } from '@/components/ui/EmptyState';
-import { IconChevronLeft, IconInfo } from '@/components/ui/icons';
+import { IconInfo } from '@/components/ui/icons';
+import { SecondaryScreenShell } from '@/components/common/SecondaryScreenShell';
 import { useEdgeSwipeBack } from '@/hooks/useEdgeSwipeBack';
 import { useAuthStore, useNotificationStore } from '@/stores';
 import { authFilesApi } from '@/services/api';
@@ -294,40 +295,21 @@ export function AuthFilesOAuthExcludedEditPage() {
   const canSave = !disableControls && !saving && !excludedUnsupported;
 
   return (
-    <div className={styles.container} ref={swipeRef}>
-      <div className={styles.topBar}>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={handleBack}
-          className={styles.backButton}
-          aria-label={t('common.back')}
-        >
-          <span className={styles.backIcon}>
-            <IconChevronLeft size={18} />
-          </span>
-          <span className={styles.backText}>{t('common.back')}</span>
-        </Button>
-        <div className={styles.topBarTitle} title={title}>
-          {title}
-        </div>
-        <Button
-          size="sm"
-          onClick={handleSave}
-          loading={saving}
-          disabled={!canSave}
-          className={styles.saveButton}
-        >
+    <SecondaryScreenShell
+      ref={swipeRef}
+      title={title}
+      onBack={handleBack}
+      backLabel={t('common.back')}
+      backAriaLabel={t('common.back')}
+      rightAction={
+        <Button size="sm" onClick={handleSave} loading={saving} disabled={!canSave}>
           {t('oauth_excluded.save')}
         </Button>
-      </div>
-
-      {initialLoading ? (
-        <div className={styles.loadingState}>
-          <LoadingSpinner size={16} />
-          <span>{t('common.loading')}</span>
-        </div>
-      ) : excludedUnsupported ? (
+      }
+      isLoading={initialLoading}
+      loadingLabel={t('common.loading')}
+    >
+      {excludedUnsupported ? (
         <Card>
           <EmptyState
             title={t('oauth_excluded.upgrade_required_title')}
@@ -335,7 +317,7 @@ export function AuthFilesOAuthExcludedEditPage() {
           />
         </Card>
       ) : (
-        <div className={styles.content}>
+        <>
           <Card className={styles.settingsCard}>
             <div className={styles.settingsHeader}>
               <div className={styles.settingsHeaderTitle}>
@@ -443,8 +425,8 @@ export function AuthFilesOAuthExcludedEditPage() {
               <div className={styles.emptyModels}>{t('oauth_excluded.provider_required')}</div>
             )}
           </Card>
-        </div>
+        </>
       )}
-    </div>
+    </SecondaryScreenShell>
   );
 }