feat: Mehrere Suchbegriffe im Maps-Tab (Chip-System)

- Keywords als Chip-Input statt einzelnem Textfeld
- Queries = jedes Keyword × jede Region (Kreuzprodukt)
- Vorschläge für gängige deutsche B2B-Branchen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Timo Uttenweiler
2026-03-20 14:12:47 +01:00
parent ea93d674a2
commit 6711633a5d

View File

@@ -32,12 +32,10 @@ const RESULTS_OPTIONS = [
{ value: "60", label: "60 per query (max)" },
];
// Preset queries for common German solar use cases
const PRESET_QUERIES = [
"Solaranlage Installateur Deutschland",
"Photovoltaik Montage",
"Solar Handwerker",
"Solarstrom Installation",
const KEYWORD_PRESETS = [
"Solaranlage Installateur", "Dachdecker", "Elektriker",
"Heizungsbauer", "Sanitär", "Steuerberater", "Rechtsanwalt",
"Zahnarzt", "Physiotherapeut", "Immobilienmakler",
];
const GERMAN_REGIONS = [
@@ -50,7 +48,8 @@ const GERMAN_REGIONS = [
type Stage = "idle" | "running" | "done" | "failed";
export default function MapsPage() {
const [keyword, setKeyword] = useState("Solaranlage Installateur");
const [keywords, setKeywords] = useState<string[]>(["Solaranlage Installateur"]);
const [keywordInput, setKeywordInput] = useState("");
const [regions, setRegions] = useState<string[]>(["Bayern", "Baden-Württemberg"]);
const [regionInput, setRegionInput] = useState("");
const [maxResults, setMaxResults] = useState("60");
@@ -62,10 +61,18 @@ export default function MapsPage() {
const [results, setResults] = useState<ResultRow[]>([]);
const { addJob, updateJob, removeJob } = useAppStore();
// Build the final queries array: one per region
const queries = regions.length > 0
? regions.map(r => `${keyword} ${r}`)
: [keyword];
// Build queries: every keyword × every region
const queries = keywords.length === 0 ? [] :
regions.length > 0
? keywords.flatMap(k => regions.map(r => `${k} ${r}`))
: keywords;
const addKeyword = (k: string) => {
const trimmed = k.trim();
if (trimmed && !keywords.includes(trimmed)) setKeywords(prev => [...prev, trimmed]);
setKeywordInput("");
};
const removeKeyword = (k: string) => setKeywords(prev => prev.filter(x => x !== k));
const addRegion = (r: string) => {
const trimmed = r.trim();
@@ -78,7 +85,7 @@ export default function MapsPage() {
const removeRegion = (r: string) => setRegions(prev => prev.filter(x => x !== r));
const startJob = async () => {
if (!keyword.trim()) return toast.error("Suchbegriff eingeben");
if (!keywords.length) return toast.error("Mindestens einen Suchbegriff eingeben");
setStage("running");
setResults([]);
@@ -208,28 +215,41 @@ export default function MapsPage() {
Suchanfrage konfigurieren
</h2>
{/* Keyword */}
{/* Keywords */}
<div>
<Label className="text-gray-300 text-sm mb-1.5 block">Suchbegriff</Label>
<Input
placeholder="z.B. Solaranlage Installateur"
value={keyword}
onChange={e => setKeyword(e.target.value)}
className="bg-[#0d0d18] border-[#2e2e3e] text-white placeholder:text-gray-600 focus:border-green-500"
/>
{/* Presets */}
<div className="flex flex-wrap gap-1.5 mt-2">
{PRESET_QUERIES.map(q => (
<Label className="text-gray-300 text-sm mb-1.5 block">
Suchbegriffe
<span className="text-gray-500 font-normal ml-2"> mehrere möglich</span>
</Label>
<div className="min-h-[44px] flex flex-wrap gap-2 p-2.5 bg-[#0d0d18] border border-[#2e2e3e] rounded-lg focus-within:border-green-500 transition-colors mb-2">
{keywords.map(k => (
<span key={k} className="flex items-center gap-1 bg-green-500/15 text-green-300 border border-green-500/25 rounded-md px-2.5 py-0.5 text-sm">
{k}
<button onClick={() => removeKeyword(k)} className="hover:text-white transition-colors">
<X className="w-3 h-3" />
</button>
</span>
))}
<input
className="flex-1 min-w-[160px] bg-transparent text-sm text-white outline-none placeholder:text-gray-600"
placeholder="Begriff eingeben, Enter drücken..."
value={keywordInput}
onChange={e => setKeywordInput(e.target.value)}
onKeyDown={e => {
if (e.key === "Enter" || e.key === ",") { e.preventDefault(); addKeyword(keywordInput); }
}}
onBlur={() => keywordInput && addKeyword(keywordInput)}
/>
</div>
{/* Keyword presets */}
<div className="flex flex-wrap gap-1.5">
{KEYWORD_PRESETS.filter(k => !keywords.includes(k)).map(k => (
<button
key={q}
onClick={() => setKeyword(q)}
className={`text-xs px-2.5 py-1 rounded-md border transition-all ${
keyword === q
? "bg-green-500/20 text-green-300 border-green-500/40"
: "bg-[#0d0d18] text-gray-500 border-[#2e2e3e] hover:border-green-500/30 hover:text-gray-300"
}`}
key={k}
onClick={() => addKeyword(k)}
className="flex items-center gap-1 text-xs px-2 py-0.5 rounded border border-[#2e2e3e] text-gray-500 hover:border-green-500/30 hover:text-gray-300 transition-all"
>
{q}
<Plus className="w-2.5 h-2.5" /> {k}
</button>
))}
</div>
@@ -380,7 +400,7 @@ export default function MapsPage() {
{stage === "idle" || stage === "failed" ? (
<Button
onClick={startJob}
disabled={!keyword.trim()}
disabled={!keywords.length}
className="bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 text-white font-medium px-8 shadow-lg hover:shadow-green-500/25 transition-all"
>
<MapPin className="w-4 h-4 mr-2" />