From 4104d82ef04c50cab3c90d1868edfd6ea44fdf5c Mon Sep 17 00:00:00 2001
From: Mukan Erkin <mukanerkin@cw.tr>
Date: Sun, 19 Apr 2026 06:45:38 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20TomSelect=20ile=20coin=20se=C3=A7ici?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/web/index.html | 77 ++++++++++++++++++++--------------------------
 1 file changed, 33 insertions(+), 44 deletions(-)
diff --git a/src/web/index.html b/src/web/index.html
index 9ae8671..09207ce 100644
--- a/src/web/index.html
+++ b/src/web/index.html
@@ -4,6 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mukan Special Edition</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2/dist/css/tom-select.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/tom-select@2/dist/js/tom-select.complete.min.js"></script>
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
@@ -57,6 +59,12 @@
     .auth-box input { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 9px 12px; color: var(--text); font-size: 14px; width: 100%; }
     .auth-box input:focus { outline: none; border-color: var(--accent); }
     .auth-error { color: var(--red); font-size: 12px; display: none; }
+    .ts-wrapper .ts-control { background: var(--bg); border-color: var(--border); color: var(--text); min-height: 32px; padding: 4px 10px; border-radius: 5px; }
+    .ts-wrapper.focus .ts-control { border-color: var(--accent); box-shadow: none; }
+    .ts-dropdown { background: var(--surface); border-color: var(--border); color: var(--text); }
+    .ts-dropdown .option { padding: 7px 12px; }
+    .ts-dropdown .option.active { background: rgba(108,99,255,0.2); color: var(--text); }
+    .ts-wrapper .ts-control .item { color: var(--text); background: rgba(108,99,255,0.15); border-radius: 3px; padding: 1px 6px; }
   </style>
 </head>
 <body>
@@ -89,11 +97,9 @@
     <div class="section-header">Yeni Bot Ekle</div>
     <div class="form-grid">
       <div class="form-group"><label>İsim</label><input id="f-name" placeholder="DOGE Bot" /></div>
-      <div class="form-group" style="position:relative">
+      <div class="form-group">
         <label>Coin (USDT çifti)</label>
-        <input id="f-symbol-search" placeholder="Ara: DOGE, BTC..." autocomplete="off" oninput="filterSymbols(this.value)" onfocus="showDropdown()" onblur="setTimeout(hideDropdown,150)" />
-        <div id="symbol-dropdown" style="display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:5px;max-height:200px;overflow-y:auto;z-index:50;"></div>
-        <input type="hidden" id="f-symbol" />
+        <select id="f-symbol"><option value="">Yükleniyor...</option></select>
       </div>
       <div class="form-group"><label>Timeframe</label>
         <select id="f-timeframe">
@@ -141,7 +147,7 @@
 <script>
 let AUTH_TOKEN = localStorage.getItem('mse_token') || '';
 let sseSource = null;
-let allSymbols = []; // [{symbol, min_notional}]
+let symbolSelect = null;
 
 function login() {
   const t = document.getElementById('token-input').value.trim();
@@ -185,46 +191,29 @@ async function loadAll() {
 
 async function loadSymbols() {
   const res = await api('GET', '/symbols');
-  allSymbols = await res.json();
-}
+  const symbols = await res.json();
 
-function filterSymbols(query) {
-  const q = query.toUpperCase();
-  const matches = q
-    ? allSymbols.filter(s => s.symbol.startsWith(q) || s.symbol.includes(q)).slice(0, 50)
-    : allSymbols.slice(0, 50);
-  renderDropdown(matches);
-  showDropdown();
-}
-
-function renderDropdown(items) {
-  const dd = document.getElementById('symbol-dropdown');
-  if (!items.length) { dd.innerHTML = '<div style="padding:8px 12px;color:var(--muted)">Bulunamadı</div>'; return; }
-  dd.innerHTML = items.map(s =>
-    `<div style="padding:7px 12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center"
-      onmousedown="selectSymbol('${s.symbol}',${s.min_notional})">
-      <strong>${s.symbol}</strong><span style="color:var(--muted);font-size:11px">min ${s.min_notional} USDT</span>
-    </div>`
-  ).join('');
-}
-
-function selectSymbol(symbol, minNotional) {
-  document.getElementById('f-symbol').value = symbol;
-  document.getElementById('f-symbol-search').value = symbol;
-  document.getElementById('f-usdt').value = minNotional;
-  document.getElementById('f-min-label').textContent = `(min ${minNotional} USDT)`;
-  hideDropdown();
-}
-
-function showDropdown() {
-  const dd = document.getElementById('symbol-dropdown');
-  if (!allSymbols.length) return;
-  if (!dd.innerHTML) filterSymbols(document.getElementById('f-symbol-search').value);
-  dd.style.display = 'block';
-}
-
-function hideDropdown() {
-  document.getElementById('symbol-dropdown').style.display = 'none';
+  symbolSelect = new TomSelect('#f-symbol', {
+    valueField: 'symbol',
+    labelField: 'symbol',
+    searchField: 'symbol',
+    options: symbols,
+    placeholder: 'Ara: DOGE, BTC...',
+    render: {
+      option: (data) =>
+        `<div style="display:flex;justify-content:space-between;align-items:center">
+          <strong>${data.symbol}</strong>
+          <span style="color:#888;font-size:11px">min ${data.min_notional} USDT</span>
+        </div>`,
+      item: (data) => `<div>${data.symbol}</div>`,
+    },
+    onChange(value) {
+      const item = symbols.find(s => s.symbol === value);
+      if (!item) return;
+      document.getElementById('f-usdt').value = item.min_notional;
+      document.getElementById('f-min-label').textContent = `(min ${item.min_notional} USDT)`;
+    },
+  });
 }
 
 async function loadBots() {
