From a484ca93c86325050a40acf4f912ace4312457bb Mon Sep 17 00:00:00 2001
From: Pepe44DEV <pascal.priessnitz@synqtec.de>
Date: Wed, 1 Jul 2026 04:55:26 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20HeroUI=20v3.2.1=20Export-Kompatibilit?=
 =?UTF-8?q?=C3=A4t=20=E2=80=94=20Divider->Separator,=20Select->native,=20T?=
 =?UTF-8?q?extarea->TextArea?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                       | 46 ++++++++++------------
 frontend/src/components/layout/Sidebar.tsx |  6 +--
 2 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ec8682c..5e0aa9b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import {
-  Alert, Avatar, Button, Card, CardContent, CardHeader, Chip, Divider,
-  Input, Select, SelectItem, Skeleton, Spinner, Switch, Tab, Tabs,
-  Textarea
+  Alert, Avatar, Button, Card, CardContent, CardHeader, Chip,
+  Input, Separator, Skeleton, Spinner, Switch, Tab, Tabs,
+  TextArea
 } from '@heroui/react';
 import {
   Activity, AudioLines, Bot, Cable, CalendarDays, ChevronRight, Command,
@@ -283,20 +283,16 @@ function App() {
         <div className="mx-auto w-full max-w-[1520px] px-6 py-6">
           <Topbar guildName={guildInfo?.name || selectedGuild.name} statusMessage={statusMessage}>
             <div className="lg:hidden">
-              <Select
+              <select
                 aria-label="Server auswählen"
-                className="w-48"
-                color="primary"
-                placeholder="Server"
-                selectedKeys={currentGuildId ? [currentGuildId] : []}
-                size="sm"
-                variant="bordered"
-                onSelectionChange={(keys) => { const v = [...keys][0]; if (v) setCurrentGuildId(String(v)); }}
+                className="w-48 rounded-xl border border-default-200 bg-default-50 px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-primary-400"
+                value={currentGuildId}
+                onChange={(e) => setCurrentGuildId(e.target.value)}
               >
                 {guilds.map((g) => (
-                  <SelectItem key={g.id}>{g.name}</SelectItem>
+                  <option key={g.id} value={g.id}>{g.name}</option>
                 ))}
-              </Select>
+              </select>
             </div>
           </Topbar>
 
@@ -476,7 +472,7 @@ function App() {
                   <FormPanel title="Neue Automation">
                     <Input label="Name" value={automationDraft.name} onValueChange={(v) => setAutomationDraft((s) => ({ ...s, name: v }))} />
                     <Input label="Kategorie / Zustand" value={automationDraft.conditionValue} onValueChange={(v) => setAutomationDraft((s) => ({ ...s, conditionValue: v }))} />
-                    <Textarea label="Aktion / Nachricht" value={automationDraft.actionValue} onValueChange={(v) => setAutomationDraft((s) => ({ ...s, actionValue: v }))} />
+                    <TextArea label="Aktion / Nachricht" value={automationDraft.actionValue} onValueChange={(v) => setAutomationDraft((s) => ({ ...s, actionValue: v }))} />
                     <Button color="primary" onPress={saveAutomation}>Automation speichern</Button>
                   </FormPanel>
                 </div>
@@ -494,7 +490,7 @@ function App() {
                   <FormPanel title="Neuer KB-Artikel">
                     <Input label="Titel" value={kbDraft.title} onValueChange={(v) => setKbDraft((s) => ({ ...s, title: v }))} />
                     <Input label="Keywords" value={kbDraft.keywords} onValueChange={(v) => setKbDraft((s) => ({ ...s, keywords: v }))} />
-                    <Textarea label="Inhalt" minRows={5} value={kbDraft.content} onValueChange={(v) => setKbDraft((s) => ({ ...s, content: v }))} />
+                    <TextArea label="Inhalt" minRows={5} value={kbDraft.content} onValueChange={(v) => setKbDraft((s) => ({ ...s, content: v }))} />
                     <Button color="primary" onPress={saveKbArticle}>Artikel speichern</Button>
                   </FormPanel>
                 </div>
@@ -511,8 +507,8 @@ function App() {
                   <Switch isSelected={settings.automodConfig?.linkFilter ?? false} onValueChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), linkFilter: v } }))}>Link-Filter</Switch>
                   <Switch isSelected={settings.automodConfig?.spamFilter ?? false} onValueChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), spamFilter: v } }))}>Spam-Filter</Switch>
                   <Input label="Log Channel ID" value={settings.automodConfig?.logChannelId || ''} onValueChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), logChannelId: v } }))} />
-                  <Textarea label="Whitelist Links (Komma-getrennt)" value={(settings.automodConfig?.linkWhitelist || []).join(', ')} onValueChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), linkWhitelist: v.split(',').map((x) => x.trim()).filter(Boolean) } }))} />
-                  <Divider className="my-1" />
+                  <TextArea label="Whitelist Links (Komma-getrennt)" value={(settings.automodConfig?.linkWhitelist || []).join(', ')} onValueChange={(v) => setSettings((s) => ({ ...s, automodConfig: { ...(s.automodConfig || {}), linkWhitelist: v.split(',').map((x) => x.trim()).filter(Boolean) } }))} />
+                  <Separator className="my-1" />
                   <Button color="primary" onPress={() => saveSettingsPayload({ automodEnabled: settings.automodEnabled !== false, automodConfig: settings.automodConfig || {} }, 'Automod gespeichert')}>
                     Speichern
                   </Button>
@@ -531,9 +527,9 @@ function App() {
                   <Switch isSelected={settings.welcomeConfig?.enabled !== false} onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), enabled: v } }))}>Welcome aktiv</Switch>
                   <Input label="Channel ID" value={settings.welcomeConfig?.channelId || settings.welcomeChannelId || ''} onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), channelId: v } }))} />
                   <Input label="Titel" value={settings.welcomeConfig?.embedTitle || ''} onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), embedTitle: v } }))} />
-                  <Textarea label="Beschreibung" value={settings.welcomeConfig?.embedDescription || ''} onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), embedDescription: v } }))} />
+                  <TextArea label="Beschreibung" value={settings.welcomeConfig?.embedDescription || ''} onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), embedDescription: v } }))} />
                   <Input label="Footer" value={settings.welcomeConfig?.embedFooter || ''} onValueChange={(v) => setSettings((s) => ({ ...s, welcomeConfig: { ...(s.welcomeConfig || {}), embedFooter: v } }))} />
-                  <Divider className="my-1" />
+                  <Separator className="my-1" />
                   <Button color="primary" onPress={() => saveSettingsPayload({ welcomeConfig: settings.welcomeConfig || {} }, 'Welcome gespeichert')}>
                     Speichern
                   </Button>
@@ -550,7 +546,7 @@ function App() {
                   <Input label="Lobby Channel ID" value={settings.dynamicVoiceConfig?.lobbyChannelId || ''} onValueChange={(v) => setSettings((s) => ({ ...s, dynamicVoiceConfig: { ...(s.dynamicVoiceConfig || {}), lobbyChannelId: v } }))} />
                   <Input label="Kategorie ID" value={settings.dynamicVoiceConfig?.categoryId || ''} onValueChange={(v) => setSettings((s) => ({ ...s, dynamicVoiceConfig: { ...(s.dynamicVoiceConfig || {}), categoryId: v } }))} />
                   <Input label="Template" value={settings.dynamicVoiceConfig?.template || ''} onValueChange={(v) => setSettings((s) => ({ ...s, dynamicVoiceConfig: { ...(s.dynamicVoiceConfig || {}), template: v } }))} />
-                  <Divider className="my-1" />
+                  <Separator className="my-1" />
                   <Button color="primary" onPress={() => saveSettingsPayload({ dynamicVoiceConfig: settings.dynamicVoiceConfig || {} }, 'Dynamic Voice gespeichert')}>
                     Speichern
                   </Button>
@@ -566,8 +562,8 @@ function App() {
                   <Switch isSelected={birthday.config?.enabled !== false} onValueChange={(v) => setBirthday((s: any) => ({ ...s, config: { ...s.config, enabled: v } }))}>Birthday aktiv</Switch>
                   <Input label="Channel ID" value={birthday.config?.channelId || ''} onValueChange={(v) => setBirthday((s: any) => ({ ...s, config: { ...s.config, channelId: v } }))} />
                   <Input label="Sendezeit (Stunde)" type="number" value={String(birthday.config?.sendHour ?? 9)} onValueChange={(v) => setBirthday((s: any) => ({ ...s, config: { ...s.config, sendHour: Number(v || 0) } }))} />
-                  <Textarea label="Template" value={birthday.config?.messageTemplate || ''} onValueChange={(v) => setBirthday((s: any) => ({ ...s, config: { ...s.config, messageTemplate: v } }))} />
-                  <Divider className="my-1" />
+                  <TextArea label="Template" value={birthday.config?.messageTemplate || ''} onValueChange={(v) => setBirthday((s: any) => ({ ...s, config: { ...s.config, messageTemplate: v } }))} />
+                  <Separator className="my-1" />
                   <Button color="primary" onPress={saveBirthday}>Speichern</Button>
                 </FormPanel>
                 <ListPanel title="Gespeicherte Geburtstage">
@@ -594,7 +590,7 @@ function App() {
                 <FormPanel title="Neues Set">
                   <Input label="Titel" value={reactionDraft.title} onValueChange={(v) => setReactionDraft((s) => ({ ...s, title: v }))} />
                   <Input label="Channel ID" value={reactionDraft.channelId} onValueChange={(v) => setReactionDraft((s) => ({ ...s, channelId: v }))} />
-                  <Textarea label="Einträge (Emoji | Role ID | Label)" minRows={6} value={reactionDraft.entries} onValueChange={(v) => setReactionDraft((s) => ({ ...s, entries: v }))} />
+                  <TextArea label="Einträge (Emoji | Role ID | Label)" minRows={6} value={reactionDraft.entries} onValueChange={(v) => setReactionDraft((s) => ({ ...s, entries: v }))} />
                   <Button color="primary" onPress={saveReactionRole}>Reaction Role speichern</Button>
                 </FormPanel>
               </div>
@@ -651,7 +647,7 @@ function App() {
                   <Switch isSelected={settings.loggingConfig?.categories?.joinLeave !== false} onValueChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), joinLeave: v } } }))}>Join / Leave loggen</Switch>
                   <Switch isSelected={settings.loggingConfig?.categories?.messageEdit !== false} onValueChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), messageEdit: v } } }))}>Message Edit loggen</Switch>
                   <Switch isSelected={settings.loggingConfig?.categories?.messageDelete !== false} onValueChange={(v) => setSettings((s) => ({ ...s, loggingConfig: { ...(s.loggingConfig || {}), categories: { ...(s.loggingConfig?.categories || {}), messageDelete: v } } }))}>Message Delete loggen</Switch>
-                  <Divider className="my-1" />
+                  <Separator className="my-1" />
                   <Button color="primary" onPress={() => saveSettingsPayload(settings, 'Settings gespeichert')}>Speichern</Button>
                 </FormPanel>
               </div>
@@ -695,7 +691,7 @@ function App() {
                 </ListPanel>
                 <FormPanel title="Neues Event">
                   <Input label="Titel" value={eventDraft.title} onValueChange={(v) => setEventDraft((s) => ({ ...s, title: v }))} />
-                  <Textarea label="Beschreibung" value={eventDraft.description} onValueChange={(v) => setEventDraft((s) => ({ ...s, description: v }))} />
+                  <TextArea label="Beschreibung" value={eventDraft.description} onValueChange={(v) => setEventDraft((s) => ({ ...s, description: v }))} />
                   <Input label="Channel ID" value={eventDraft.channelId} onValueChange={(v) => setEventDraft((s) => ({ ...s, channelId: v }))} />
                   <Input label="Start (ISO)" value={eventDraft.startsAt} onValueChange={(v) => setEventDraft((s) => ({ ...s, startsAt: v }))} />
                   <Button color="primary" onPress={saveEvent}>Event speichern</Button>
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 3b97e94..dd9749c 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Button, Card, CardContent, Chip, Divider } from '@heroui/react';
+import { Avatar, Button, Card, CardContent, Chip } from '@heroui/react';
 import { LogOut, Server } from 'lucide-react';
 import { navItems } from '../../utils/constants';
 import type { NavKey, Guild, User } from '../../types';
@@ -44,7 +44,7 @@ export function Sidebar({ user, guilds, currentGuildId, section, onSectionChange
         </CardContent>
       </Card>
 
-      <Divider className="my-2" />
+      <div className="h-px bg-default-200 my-2" />
 
       <nav className="flex flex-1 flex-col gap-1 overflow-y-auto">
         {navItems
@@ -63,7 +63,7 @@ export function Sidebar({ user, guilds, currentGuildId, section, onSectionChange
           ))}
       </nav>
 
-      <Divider className="my-2" />
+      <div className="h-px bg-default-200 my-2" />
 
       <Card className="border border-default-100 bg-default-50/20">
         <CardContent className="flex flex-row items-center gap-3 p-3">