# راهنمای نصب و راه‌اندازی قابلیت Auto-Click-to-IDE

این قابلیت به برنامه‌نویسان اجازه می‌دهد تا در حالت توسعه (Development)، با نگه داشتن کلید `Alt` و کلیک روی هر بخش از رابط کاربری وب‌سایت، مستقیماً به فایل و خط کد مربوطه در محیط ادیتور (IDE) منتقل شوند. این ابزار بهینه‌سازی شده تا فایل‌ها را در **پنجره فعلی ادیتور** باز کند و از باز شدن نرم‌افزارهای تکراری جلوگیری نماید.

## فایل‌های مورد نیاز
برای انتقال این قابلیت به پروژه‌های جدید Next.js، به ۳ فایل زیر نیاز دارید:

1. `dev-click-to-component.tsx` (کامپوننت اصلی رابط کاربری)
2. `add-data-locator.cjs` (پلاگین Babel برای یافتن خطوط کد)
3. `open-in-ide.ts` (رابط API برای ارتباط با ادیتور)

---

## مراحل نصب در پروژه‌های جدید Next.js

### مرحله ۱: انتقال فایل‌ها
ابتدا فایل‌های مورد نیاز را در مسیرهای مناسب در پروژه جدید قرار دهید:
- فایل `dev-click-to-component.tsx` را در پوشه کامپوننت‌ها (مثلاً `src/components/utils/`) کپی کنید.
- فایل `add-data-locator.cjs` را در ریشه پروژه (یا پوشه `src/plugins/`) کپی کنید.

### مرحله ۲: ایجاد API Route (بسیار مهم)
برای اینکه فایل‌ها در همان پنجره‌ی باز ادیتور لود شوند (نه در پنجره جدید)، باید یک API بسازیم.
در پروژه خود (اگر از Pages Router استفاده می‌کنید) فایلی در مسیر `src/pages/api/open-in-ide.ts` بسازید و کدهای زیر را در آن قرار دهید:

```typescript
import type { NextApiRequest, NextApiResponse } from 'next';
import { exec } from 'child_process';
import os from 'os';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') return res.status(405).json({ message: 'Method Not Allowed' });

  const { locator } = req.body;
  if (!locator) return res.status(400).json({ message: 'Locator is required' });

  // اجرای کامند برای باز کردن در ادیتور (-r برای جلوگیری از ساخت پنجره جدید)
  const isWindows = os.platform() === 'win32';
  const bin = isWindows ? 'antigravity-ide.cmd' : 'antigravity-ide';
  const cmd = `${bin} -r -g "${locator}"`;

  exec(cmd, (error) => {
    if (error) {
      console.error(`[open-in-ide] Error: ${error.message}`);
      return res.status(500).json({ message: 'Failed to open file in IDE' });
    }
    res.status(200).json({ success: true });
  });
}
```

### مرحله ۳: تنظیمات Babel
Next.js باید بتواند پلاگین ما را بخواند. یک فایل به نام `.babelrc` در ریشه (Root) پروژه خود بسازید (اگر ندارید) و کدهای زیر را در آن قرار دهید:

```json
{
  "presets": ["next/babel"],
  "env": {
    "development": {
      "plugins": [
        "./add-data-locator.cjs"
      ]
    }
  }
}
```
*(نکته: آدرس `./add-data-locator.cjs` را بر اساس مکانی که فایل را در مرحله ۱ قرار داده‌اید تنظیم کنید).*

### مرحله ۴: اضافه کردن کامپوننت به Layout
در نهایت، فایل اصلی پروژه خود (مثلاً `src/pages/_app.tsx` یا `src/app/layout.tsx`) را باز کنید و کامپوننت را در محیط توسعه (Development) فراخوانی کنید:

```tsx
import { DevClickToComponent } from '@/components/utils/dev-click-to-component';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      
      {/* این خط فقط در حالت لوکال اجرا میشود */}
      {process.env.NODE_ENV === 'development' && <DevClickToComponent />}
    </>
  );
}
```

---

## نحوه استفاده
پس از اتمام مراحل بالا، دستور `npm run dev` را مجدداً اجرا کنید.
وارد مرورگر شوید، کلید **`Alt`** را روی کیبورد نگه دارید و روی هر بخشی از سایت کلیک کنید. می‌بینید که فایل مربوطه مستقیماً در ادیتور شما (روی همان خط کد) باز خواهد شد!