Add projects

frontend/src/features/authFiles/components/OAuthExcludedCard.tsx

@@ -0,0 +1,77 @@
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { EmptyState } from '@/components/ui/EmptyState';
+import type { OAuthConfigLoadError } from '@/features/authFiles/constants';
+import styles from './OAuthConfigPanels.module.scss';
+
+export type OAuthExcludedCardProps = {
+  disableControls: boolean;
+  excludedError: OAuthConfigLoadError;
+  excluded: Record<string, string[]>;
+  onRetry: () => void | Promise<void>;
+  onAdd: () => void;
+  onEdit: (provider: string) => void;
+  onDelete: (provider: string) => void;
+};
+
+export function OAuthExcludedCard(props: OAuthExcludedCardProps) {
+  const { t } = useTranslation();
+  const { disableControls, excludedError, excluded, onRetry, onAdd, onEdit, onDelete } = props;
+
+  return (
+    <section className={styles.panel}>
+      <header className={styles.panelHead}>
+        <h3 className={styles.panelTitle}>{t('oauth_excluded.title')}</h3>
+        <div className={styles.panelExtra}>
+          <Button size="sm" onClick={onAdd} disabled={disableControls || excludedError !== null}>
+            {t('oauth_excluded.add')}
+          </Button>
+        </div>
+      </header>
+      <div className={styles.panelBody}>
+        {excludedError === 'unsupported' ? (
+          <EmptyState
+            title={t('oauth_excluded.upgrade_required_title')}
+            description={t('oauth_excluded.upgrade_required_desc')}
+          />
+        ) : excludedError === 'load' ? (
+          <EmptyState
+            title={t('notification.refresh_failed')}
+            action={
+              <Button variant="secondary" size="sm" onClick={() => void onRetry()}>
+                {t('common.refresh')}
+              </Button>
+            }
+          />
+        ) : excludedError === 'loading' ? (
+          <EmptyState title={t('common.loading')} />
+        ) : Object.keys(excluded).length === 0 ? (
+          <EmptyState title={t('oauth_excluded.list_empty_all')} />
+        ) : (
+          <div className={styles.list}>
+            {Object.entries(excluded).map(([provider, models]) => (
+              <div key={provider} className={styles.item}>
+                <div className={styles.itemInfo}>
+                  <div className={styles.itemProvider}>{provider}</div>
+                  <div className={styles.itemCount}>
+                    {models?.length
+                      ? t('oauth_excluded.model_count', { count: models.length })
+                      : t('oauth_excluded.no_models')}
+                  </div>
+                </div>
+                <div className={styles.itemActions}>
+                  <Button variant="secondary" size="sm" onClick={() => onEdit(provider)}>
+                    {t('common.edit')}
+                  </Button>
+                  <Button variant="danger" size="sm" onClick={() => onDelete(provider)}>
+                    {t('oauth_excluded.delete')}
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}