feat: 30 günlük havuz referansı (kalıcı erime) + 25 sektör, çoklu sektör seçimi ve sunucudan gelen tek kaynaklı liste

src/components/LeftSidebar.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useApp } from '../context/AppContext';
-import { SECTORS_LIST, INSTITUTION_TYPES_LIST, CITIES_LIST } from '../data/constants';
+import { INSTITUTION_TYPES_LIST, CITIES_LIST } from '../data/constants';
 import {
   Compass, Zap, Wrench, Calendar, Eye, EyeOff, FileText, CheckCircle2, XCircle, Archive,
   Bot, PlusCircle, Trash2, ChevronDown, ChevronUp, Filter, MapPin, Building2, Tag, Star
@@ -16,8 +16,10 @@ export const LeftSidebar = () => {
     deleteSavedFilter,
     selectedAlimTuru,
     setSelectedAlimTuru,
-    selectedSektor,
-    setSelectedSektor,
+    selectedSektorler,
+    setSelectedSektorler,
+    toggleSektor,
+    sektorListesi,
     selectedKurumTipi,
     setSelectedKurumTipi,
     selectedCity,
@@ -25,6 +27,7 @@ export const LeftSidebar = () => {
     clearAllFilters
   } = useApp();
 
+  const [sektorAra, setSektorAra] = useState('');
   const [openSections, setOpenSections] = useState({
     alimTuru: true,
     sektorler: true,
@@ -59,7 +62,7 @@ export const LeftSidebar = () => {
           <span className="font-bold text-xs uppercase tracking-wider text-slate-700 flex items-center gap-1.5">
             <Compass className="w-4 h-4 text-blue-600" /> Hızlı Erişim
           </span>
-          {(quickFilter !== 'all' || selectedSektor || selectedCity || selectedAlimTuru || selectedKurumTipi) && (
+          {(quickFilter !== 'all' || selectedSektorler.length || selectedCity || selectedAlimTuru || selectedKurumTipi) && (
             <button
               onClick={clearAllFilters}
               className="text-[11px] font-medium text-blue-600 hover:underline"
@@ -199,22 +202,42 @@ export const LeftSidebar = () => {
             {openSections.sektorler ? <ChevronUp className="w-4 h-4 text-slate-400" /> : <ChevronDown className="w-4 h-4 text-slate-400" />}
           </button>
           {openSections.sektorler && (
-            <div className="p-3 space-y-1 text-xs max-h-48 overflow-y-auto">
+            <div className="p-3 space-y-1 text-xs">
+              {/* 25 sektör var; aramadan bulmak zor */}
+              <input
+                value={sektorAra}
+                onChange={(e) => setSektorAra(e.target.value)}
+                placeholder="Sektör ara…"
+                className="w-full border border-slate-200 rounded-lg px-2 py-1.5 mb-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-blue-500/30"
+              />
+              <div className="max-h-56 overflow-y-auto space-y-1">
               <button
-                onClick={() => { setSelectedSektor(''); setActiveTab('list'); }}
-                className={`w-full text-left px-2 py-1 rounded font-medium ${!selectedSektor ? 'bg-blue-50 text-blue-700 font-bold' : 'text-slate-600 hover:bg-slate-50'}`}
+                onClick={() => { setSelectedSektorler([]); setActiveTab('list'); }}
+                className={`w-full text-left px-2 py-1 rounded font-medium ${!selectedSektorler.length ? 'bg-blue-50 text-blue-700 font-bold' : 'text-slate-600 hover:bg-slate-50'}`}
               >
-                Tüm Sektörler
+                Tüm Sektörler {selectedSektorler.length > 0 && <span className="text-slate-400">({selectedSektorler.length} seçili)</span>}
               </button>
-              {SECTORS_LIST.map(sec => (
-                <button
-                  key={sec}
-                  onClick={() => { setSelectedSektor(sec); setActiveTab('list'); }}
-                  className={`w-full text-left px-2 py-1 rounded truncate font-medium ${selectedSektor === sec ? 'bg-blue-50 text-blue-700 font-bold' : 'text-slate-600 hover:bg-slate-50'}`}
-                >
-                  {sec}
-                </button>
-              ))}
+              {/* Çoklu seçim: kutucuklar birikir, liste kapanmaz */}
+              {sektorListesi
+                .filter((sec) => sec.toLocaleLowerCase('tr').includes(sektorAra.toLocaleLowerCase('tr')))
+                .map(sec => {
+                const secili = selectedSektorler.includes(sec);
+                return (
+                  <label
+                    key={sec}
+                    className={`flex items-center gap-2 px-2 py-1 rounded cursor-pointer font-medium ${secili ? 'bg-blue-50 text-blue-700 font-bold' : 'text-slate-600 hover:bg-slate-50'}`}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={secili}
+                      onChange={() => { toggleSektor(sec); setActiveTab('list'); }}
+                      className="accent-blue-600 shrink-0"
+                    />
+                    <span className="truncate">{sec}</span>
+                  </label>
+                );
+              })}
+              </div>
             </div>
           )}
         </div>