Add UI clarity for per-project GitHub configuration

## Summary
- Add visual indicator showing GitHub config is per-project, not global
- Users were confused thinking settings applied to all projects

## Changes Made

### 1. Added info box to GitHub Integration section
- Displays project name in configuration context
- Explains that each project can have its own repository
- Only shown when GitHub Integration is enabled

### 2. Component updates
- GitHubIntegrationSection: Added projectName prop and info box
- ProjectSettings: Pass project.name to GitHubIntegrationSection

## User Impact
Eliminates confusion about configuration scope - users now clearly understand
that GitHub repository settings are project-specific.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Amen-Ra Mendel
2025-12-19 06:17:38 -05:00
parent b3636a5bce
commit c9745b6669
2 changed files with 20 additions and 1 deletions
@@ -238,6 +238,7 @@ export function ProjectSettings({ project, open, onOpenChange }: ProjectSettings
onUpdateConfig={updateEnvConfig}
gitHubConnectionStatus={gitHubConnectionStatus}
isCheckingGitHub={isCheckingGitHub}
projectName={project.name}
/>
<Separator />
@@ -1,5 +1,5 @@
import { useState } from 'react';
import { Github, RefreshCw, KeyRound } from 'lucide-react';
import { Github, RefreshCw, KeyRound, Info } from 'lucide-react';
import { CollapsibleSection } from './CollapsibleSection';
import { StatusBadge } from './StatusBadge';
import { PasswordInput } from './PasswordInput';
@@ -19,6 +19,7 @@ interface GitHubIntegrationSectionProps {
onUpdateConfig: (updates: Partial<ProjectEnvConfig>) => void;
gitHubConnectionStatus: GitHubSyncStatus | null;
isCheckingGitHub: boolean;
projectName?: string;
}
export function GitHubIntegrationSection({
@@ -28,6 +29,7 @@ export function GitHubIntegrationSection({
onUpdateConfig,
gitHubConnectionStatus,
isCheckingGitHub,
projectName,
}: GitHubIntegrationSectionProps) {
const [showOAuthFlow, setShowOAuthFlow] = useState(false);
@@ -48,6 +50,22 @@ export function GitHubIntegrationSection({
onToggle={onToggle}
badge={badge}
>
{/* Project-Specific Configuration Notice */}
{projectName && (
<div className="rounded-lg border border-info/30 bg-info/5 p-3 mb-4">
<div className="flex items-start gap-2">
<Info className="h-4 w-4 text-info mt-0.5 shrink-0" />
<div className="flex-1">
<p className="text-sm font-medium text-foreground">Project-Specific Configuration</p>
<p className="text-xs text-muted-foreground mt-1">
This GitHub repository is configured only for <span className="font-semibold text-foreground">{projectName}</span>.
Each project can have its own GitHub repository.
</p>
</div>
</div>
</div>
)}
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label className="font-normal text-foreground">Enable GitHub Issues</Label>