From f9d7c48d886578edc1bfdc8b6ff3768ba3a12392 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Mon, 8 Jun 2026 08:49:27 +0330
Subject: [PATCH] Admin settings: give each ingestion source its own card

The sources panel (Telegram/Bale/Divar/Medjobs/Websites/Proxy) ran
together as one flat list. Each is now wrapped in a bordered .source-box
with an icon + hint, so it's clear where one source's settings end and the
next begins.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../Pages/Admin/Settings.cshtml               | 105 ++++++++++--------
 src/JobsMedical.Web/wwwroot/css/site.css      |   5 +
 2 files changed, 64 insertions(+), 46 deletions(-)

diff --git a/src/JobsMedical.Web/Pages/Admin/Settings.cshtml b/src/JobsMedical.Web/Pages/Admin/Settings.cshtml
index 8486b89..f4637d6 100644
--- a/src/JobsMedical.Web/Pages/Admin/Settings.cshtml
+++ b/src/JobsMedical.Web/Pages/Admin/Settings.cshtml
@@ -96,60 +96,73 @@
                         <input type="number" name="IngestIntervalMinutes" min="1" value="@Model.IngestIntervalMinutes" dir="ltr" />
                     </div>
 
-                    <label class="toggle-row">
-                        <input type="checkbox" name="TelegramEnabled" value="true" checked="@Model.TelegramEnabled" />
-                        <span class="t-body"><span>تلگرام (کانال‌های عمومی — بدون توکن)</span></span>
-                    </label>
-                    <div class="filter-group">
-                        <label>یوزرنیم کانال‌ها (هر خط یک کانال)</label>
-                        <textarea name="TelegramChannels" rows="3" dir="ltr" placeholder="shift_channel&#10;another_channel">@Model.TelegramChannels</textarea>
-                        <label class="proxy-toggle"><input type="checkbox" name="TelegramUseProxy" value="true" checked="@Model.TelegramUseProxy" /> از پروکسی استفاده شود</label>
+                    <p class="muted" style="font-size:12px; margin:0 0 4px;">هر منبع را جداگانه روشن/خاموش و تنظیم کن.</p>
+
+                    <div class="source-box">
+                        <label class="toggle-row">
+                            <input type="checkbox" name="TelegramEnabled" value="true" checked="@Model.TelegramEnabled" />
+                            <span class="t-body"><span>📨 تلگرام</span><span class="t-hint">کانال‌های عمومی — بدون توکن.</span></span>
+                        </label>
+                        <div class="filter-group">
+                            <label>یوزرنیم کانال‌ها (هر خط یک کانال)</label>
+                            <textarea name="TelegramChannels" rows="3" dir="ltr" placeholder="shift_channel&#10;another_channel">@Model.TelegramChannels</textarea>
+                            <label class="proxy-toggle"><input type="checkbox" name="TelegramUseProxy" value="true" checked="@Model.TelegramUseProxy" /> از پروکسی استفاده شود</label>
+                        </div>
                     </div>
 
-                    <label class="toggle-row">
-                        <input type="checkbox" name="BaleEnabled" value="true" checked="@Model.BaleEnabled" />
-                        <span class="t-body"><span>بله (بات باید عضو کانال باشد)</span></span>
-                    </label>
-                    <div class="filter-group"><label>توکن بات بله</label><input type="password" name="BaleBotToken" value="@Model.BaleBotToken" dir="ltr" />
-                        <label class="proxy-toggle"><input type="checkbox" name="BaleUseProxy" value="true" checked="@Model.BaleUseProxy" /> از پروکسی استفاده شود</label>
+                    <div class="source-box">
+                        <label class="toggle-row">
+                            <input type="checkbox" name="BaleEnabled" value="true" checked="@Model.BaleEnabled" />
+                            <span class="t-body"><span>💬 بله</span><span class="t-hint">بات باید عضو کانال باشد.</span></span>
+                        </label>
+                        <div class="filter-group"><label>توکن بات بله</label><input type="password" name="BaleBotToken" value="@Model.BaleBotToken" dir="ltr" />
+                            <label class="proxy-toggle"><input type="checkbox" name="BaleUseProxy" value="true" checked="@Model.BaleUseProxy" /> از پروکسی استفاده شود</label>
+                        </div>
                     </div>
 
-                    <label class="toggle-row">
-                        <input type="checkbox" name="DivarEnabled" value="true" checked="@Model.DivarEnabled" />
-                        <span class="t-body"><span>دیوار</span></span>
-                    </label>
-                    <div class="filter-group" style="display:flex; gap:8px;">
-                        <div style="flex:0 0 120px;"><label>شهر (slug)</label><input type="text" name="DivarCity" value="@Model.DivarCity" dir="ltr" placeholder="tehran" /></div>
-                        <div style="flex:1;"><label>عبارت‌های جستجو (هر خط یکی)</label><textarea name="DivarQueries" rows="3">@Model.DivarQueries</textarea></div>
-                    </div>
-                    <label class="proxy-toggle"><input type="checkbox" name="DivarUseProxy" value="true" checked="@Model.DivarUseProxy" /> از پروکسی استفاده شود</label>
-
-                    <label class="toggle-row">
-                        <input type="checkbox" name="MedjobsEnabled" value="true" checked="@Model.MedjobsEnabled" />
-                        <span class="t-body"><span>مدجابز (medjobs.ir)</span><span class="t-hint">خواندن کامل آگهی‌ها از سایت‌مپ.</span></span>
-                    </label>
-                    <div class="filter-group"><label>حداکثر آگهی در هر اجرا</label><input type="number" name="MedjobsMaxAds" min="1" max="500" value="@Model.MedjobsMaxAds" dir="ltr" />
-                        <label class="proxy-toggle"><input type="checkbox" name="MedjobsUseProxy" value="true" checked="@Model.MedjobsUseProxy" /> از پروکسی استفاده شود</label>
+                    <div class="source-box">
+                        <label class="toggle-row">
+                            <input type="checkbox" name="DivarEnabled" value="true" checked="@Model.DivarEnabled" />
+                            <span class="t-body"><span>🟥 دیوار</span></span>
+                        </label>
+                        <div class="filter-group" style="display:flex; gap:8px;">
+                            <div style="flex:0 0 120px;"><label>شهر (slug)</label><input type="text" name="DivarCity" value="@Model.DivarCity" dir="ltr" placeholder="tehran" /></div>
+                            <div style="flex:1;"><label>عبارت‌های جستجو (هر خط یکی)</label><textarea name="DivarQueries" rows="3">@Model.DivarQueries</textarea></div>
+                        </div>
+                        <label class="proxy-toggle"><input type="checkbox" name="DivarUseProxy" value="true" checked="@Model.DivarUseProxy" /> از پروکسی استفاده شود</label>
                     </div>
 
-                    <label class="toggle-row">
-                        <input type="checkbox" name="WebsitesEnabled" value="true" checked="@Model.WebsitesEnabled" />
-                        <span class="t-body"><span>وب‌سایت‌ها (آدرس‌های دلخواه)</span></span>
-                    </label>
-                    <div class="filter-group">
-                        <label>آدرس صفحه‌ها (هر خط یک URL)</label>
-                        <textarea name="WebsiteUrls" rows="3" dir="ltr" placeholder="https://example.ir/jobs/123">@Model.WebsiteUrls</textarea>
-                        <label class="proxy-toggle"><input type="checkbox" name="WebsitesUseProxy" value="true" checked="@Model.WebsitesUseProxy" /> از پروکسی استفاده شود</label>
+                    <div class="source-box">
+                        <label class="toggle-row">
+                            <input type="checkbox" name="MedjobsEnabled" value="true" checked="@Model.MedjobsEnabled" />
+                            <span class="t-body"><span>🩺 مدجابز (medjobs.ir)</span><span class="t-hint">خواندن کامل آگهی‌ها از سایت‌مپ + استخراج شماره.</span></span>
+                        </label>
+                        <div class="filter-group"><label>حداکثر آگهی در هر اجرا</label><input type="number" name="MedjobsMaxAds" min="1" max="500" value="@Model.MedjobsMaxAds" dir="ltr" />
+                            <label class="proxy-toggle"><input type="checkbox" name="MedjobsUseProxy" value="true" checked="@Model.MedjobsUseProxy" /> از پروکسی استفاده شود</label>
+                        </div>
                     </div>
 
-                    <hr style="border:none; border-top:1px solid var(--line); margin:18px 0;" />
-                    <h3 style="margin-top:0;">پروکسی (Xray/V2Ray)</h3>
-                    <div class="filter-group">
-                        <label>آدرس پروکسی محلی</label>
-                        <input type="text" name="IngestProxyUrl" value="@Model.IngestProxyUrl" dir="ltr" placeholder="socks5://xray:10808" />
-                        <p class="muted" style="font-size:12px; margin:4px 0 0;">یک کلاینت Xray/V2Ray کانفیگ vmess/vless/trojan تو را به یک پروکسی محلی تبدیل می‌کند (socks5:// یا socks4:// یا http://). <strong>هر منبع جداگانه</strong> با تیکِ «از پروکسی استفاده شود» تعیین می‌کند که از این پروکسی عبور کند یا نه.</p>
-                        <button type="submit" asp-page-handler="TestProxy" class="btn btn-outline" style="margin-top:8px;">🔌 تست اتصال VPN/پروکسی</button>
-                        <p class="muted" style="font-size:11px; margin:4px 0 0;">از طریق پروکسی به یک سایت فیلترشده وصل می‌شود؛ موفقیت یعنی تونل برقرار است. (ابتدا آدرس را ذخیره کن.)</p>
+                    <div class="source-box">
+                        <label class="toggle-row">
+                            <input type="checkbox" name="WebsitesEnabled" value="true" checked="@Model.WebsitesEnabled" />
+                            <span class="t-body"><span>🌐 وب‌سایت‌ها</span><span class="t-hint">آدرس‌های دلخواه.</span></span>
+                        </label>
+                        <div class="filter-group">
+                            <label>آدرس صفحه‌ها (هر خط یک URL)</label>
+                            <textarea name="WebsiteUrls" rows="3" dir="ltr" placeholder="https://example.ir/jobs/123">@Model.WebsiteUrls</textarea>
+                            <label class="proxy-toggle"><input type="checkbox" name="WebsitesUseProxy" value="true" checked="@Model.WebsitesUseProxy" /> از پروکسی استفاده شود</label>
+                        </div>
+                    </div>
+
+                    <div class="source-box">
+                        <h4 style="margin:0 0 8px;">🛡️ پروکسی (Xray/V2Ray)</h4>
+                        <div class="filter-group">
+                            <label>آدرس پروکسی محلی</label>
+                            <input type="text" name="IngestProxyUrl" value="@Model.IngestProxyUrl" dir="ltr" placeholder="socks5://xray:10808" />
+                            <p class="muted" style="font-size:12px; margin:4px 0 0;">یک کلاینت Xray/V2Ray کانفیگ vmess/vless/trojan تو را به یک پروکسی محلی تبدیل می‌کند (socks5:// یا socks4:// یا http://). <strong>هر منبع جداگانه</strong> با تیکِ «از پروکسی استفاده شود» تعیین می‌کند که از این پروکسی عبور کند یا نه.</p>
+                            <button type="submit" asp-page-handler="TestProxy" class="btn btn-outline" style="margin-top:8px;">🔌 تست اتصال VPN/پروکسی</button>
+                            <p class="muted" style="font-size:11px; margin:4px 0 0;">از طریق پروکسی به یک سایت فیلترشده وصل می‌شود؛ موفقیت یعنی تونل برقرار است. (ابتدا آدرس را ذخیره کن.)</p>
+                        </div>
                     </div>
                 </section>
 
diff --git a/src/JobsMedical.Web/wwwroot/css/site.css b/src/JobsMedical.Web/wwwroot/css/site.css
index 0eaa71b..dd54e76 100644
--- a/src/JobsMedical.Web/wwwroot/css/site.css
+++ b/src/JobsMedical.Web/wwwroot/css/site.css
@@ -376,6 +376,11 @@ label { font-size: 13px; }
 @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
 .settings-panel h3:first-child { margin-top: 0; }
 
+/* Each ingestion source gets its own card so the settings don't run together. */
+.source-box { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 12px 0; background: var(--surface); }
+.source-box .toggle-row { background: var(--bg); margin-bottom: 10px; }
+.source-box .filter-group:last-child { margin-bottom: 0; }
+
 /* Toggle rows — give each boolean field a clean, card-like row. */
 .toggle-row {
   display: flex; align-items: flex-start; gap: 10px; font-weight: 700;