Add client connection info modal to mailboxes list

app/dashboard/mailboxes/page.tsx

@@ -26,6 +26,7 @@ export default function MailboxesPage() {
   const [loading, setLoading] = useState(false);
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showPasswordModal, setShowPasswordModal] = useState<string | null>(null);
+  const [showInfoModal, setShowInfoModal] = useState<string | null>(null);
   const [isPending, startTransition] = useTransition();
   const [search, setSearch] = useState("");
   const [createForm, setCreateForm] = useState({ local_part: "", name: "", password: "", quota: 3072 });
@@ -241,6 +242,13 @@ export default function MailboxesPage() {
                       </td>
                       <td>
                         <div style={{ display: "flex", gap: 6 }}>
+                          <button
+                            className="btn btn-ghost btn-sm"
+                            onClick={() => setShowInfoModal(m.username)}
+                            title="Bağlantı Bilgileri"
+                          >
+                            <InfoIcon />
+                          </button>
                           <button
                             className="btn btn-ghost btn-sm"
                             onClick={() => setShowPasswordModal(m.username)}
@@ -366,6 +374,51 @@ export default function MailboxesPage() {
           </div>
         </div>
       )}
+      {/* Info Modal */}
+      {showInfoModal && (
+        <div className="modal-overlay" onClick={(e) => e.target === e.currentTarget && setShowInfoModal(null)}>
+          <div className="modal">
+            <div className="modal-header">
+              <h2 className="modal-title">İstemci Bağlantı Bilgileri</h2>
+              <button className="modal-close" onClick={() => setShowInfoModal(null)}><XIcon /></button>
+            </div>
+            <div className="modal-body form-group">
+              <div style={{ fontSize: 13, color: "var(--text-secondary)", marginBottom: 10 }}>
+                <strong>{showInfoModal}</strong> hesabını Apple Mail, Outlook veya telefonunuza kurmak için aşağıdaki bilgileri kullanın:
+              </div>
+              
+              <div style={{ background: "var(--bg-hover)", padding: 12, borderRadius: "var(--radius)", border: "1px solid var(--border)", fontSize: 13 }}>
+                <div style={{ marginBottom: 12 }}>
+                  <div style={{ color: "var(--text-secondary)", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.5 }}>IMAP (Gelen Sunucu)</div>
+                  <div style={{ display: "flex", justifyContent: "space-between", marginTop: 4 }}>
+                    <span>Sunucu: <strong>mail.{showInfoModal.split("@")[1]}</strong></span>
+                    <span>Port: <strong>993</strong> (SSL/TLS)</span>
+                  </div>
+                </div>
+                
+                <div style={{ marginBottom: 12, paddingTop: 12, borderTop: "1px solid var(--border)" }}>
+                  <div style={{ color: "var(--text-secondary)", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.5 }}>SMTP (Giden Sunucu)</div>
+                  <div style={{ display: "flex", justifyContent: "space-between", marginTop: 4 }}>
+                    <span>Sunucu: <strong>mail.{showInfoModal.split("@")[1]}</strong></span>
+                    <span>Port: <strong>587</strong> (STARTTLS) <span style={{ color: "var(--text-secondary)" }}>veya 465 (SSL)</span></span>
+                  </div>
+                </div>
+
+                <div style={{ paddingTop: 12, borderTop: "1px solid var(--border)" }}>
+                  <div style={{ color: "var(--text-secondary)", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.5 }}>Kimlik Doğrulama</div>
+                  <div style={{ marginTop: 4 }}>
+                    <div>Kullanıcı Adı: <strong>{showInfoModal}</strong></div>
+                    <div style={{ color: "var(--text-secondary)", marginTop: 2 }}>Şifre: <span style={{ fontStyle: "italic" }}>Hesap oluştururken belirlediğiniz şifre</span></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="modal-footer">
+              <button type="button" className="btn btn-primary" onClick={() => setShowInfoModal(null)}>Tamam</button>
+            </div>
+          </div>
+        </div>
+      )}
     </>
   );
 }
@@ -380,3 +433,4 @@ function KeyIcon() { return <svg width="13" height="13" viewBox="0 0 24 24" fill
 function PauseIcon() { return <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>; }
 function PlayIcon() { return <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>; }
 function XIcon() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>; }
+function InfoIcon() { return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>; }