Add Discord update feature for superadmins in Dashboard

Superadmins can now send custom update messages to Discord directly from
the Dashboard via a new modal with server type selection, title template,
description, and color picker.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

gsm-frontend/src/api.js

@@ -323,5 +323,14 @@ export async function saveDisplaySettings(token, serverId, address, hint) {
   })
 }
 
+// Discord Updates
+export async function sendDiscordUpdate(token, title, description, serverType, color) {
+  return fetchAPI('/servers/discord/send-update', {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+    body: JSON.stringify({ title, description, serverType, color }),
+  })
+}
+
 // Alias for backwards compatibility
 export const setDisplaySettings = saveDisplaySettings

gsm-frontend/src/components/SendUpdateModal.jsx

@@ -0,0 +1,189 @@
+import { useState } from 'react'
+import { sendDiscordUpdate } from '../api'
+import { useUser } from '../context/UserContext'
+
+const SERVER_TYPES = [
+  { value: 'general', label: 'Allgemein', icon: '📢', titleTemplate: '' },
+  { value: 'minecraft', label: 'Minecraft', icon: '⛏️', titleTemplate: 'Minecraft Server Update' },
+  { value: 'factorio', label: 'Factorio', icon: '⚙️', titleTemplate: 'Factorio Server Update' },
+  { value: 'terraria', label: 'Terraria', icon: '⚔️', titleTemplate: 'Terraria Server Update' },
+  { value: 'palworld', label: 'Palworld', icon: '🦎', titleTemplate: 'Palworld Server Update' },
+  { value: 'vrising', label: 'V Rising', icon: '🧛', titleTemplate: 'V Rising Server Update' },
+  { value: 'zomboid', label: 'Project Zomboid', icon: '🧟', titleTemplate: 'Project Zomboid Server Update' },
+  { value: 'hytale', label: 'Hytale', icon: '🏰', titleTemplate: 'Hytale Server Update' },
+]
+
+const COLORS = [
+  { value: 0x5865F2, label: 'Blau', hex: '#5865F2' },
+  { value: 0x57F287, label: 'Grün', hex: '#57F287' },
+  { value: 0xFEE75C, label: 'Gelb', hex: '#FEE75C' },
+  { value: 0xED4245, label: 'Rot', hex: '#ED4245' },
+  { value: 0x00BFFF, label: 'Cyan', hex: '#00BFFF' },
+]
+
+export default function SendUpdateModal({ onClose }) {
+  const { token } = useUser()
+  const [serverType, setServerType] = useState('general')
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [color, setColor] = useState(COLORS[0].value)
+  const [loading, setLoading] = useState(false)
+  const [success, setSuccess] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleServerTypeChange = (e) => {
+    const newType = e.target.value
+    setServerType(newType)
+    const template = SERVER_TYPES.find(t => t.value === newType)?.titleTemplate || ''
+    setTitle(template)
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!title.trim() || !description.trim()) {
+      setError('Titel und Beschreibung sind erforderlich')
+      return
+    }
+
+    setLoading(true)
+    setError('')
+    setSuccess(false)
+
+    try {
+      await sendDiscordUpdate(token, title.trim(), description.trim(), serverType, color)
+      setSuccess(true)
+      setTimeout(() => {
+        onClose()
+      }, 1500)
+    } catch (err) {
+      setError(err.message || 'Fehler beim Senden')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="modal-backdrop" onClick={onClose}>
+      <div className="modal fade-in-scale" onClick={(e) => e.stopPropagation()} style={{ maxWidth: '500px' }}>
+        <div className="modal-header">
+          <h2 className="modal-title">Discord Update senden</h2>
+          <button onClick={onClose} className="btn btn-ghost">
+            &times;
+          </button>
+        </div>
+        <form onSubmit={handleSubmit}>
+          <div className="modal-body space-y-4">
+            {/* Server Type Dropdown */}
+            <div>
+              <label className="block text-sm text-neutral-400 mb-1">Server-Typ</label>
+              <select
+                value={serverType}
+                onChange={handleServerTypeChange}
+                className="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-purple-500"
+              >
+                {SERVER_TYPES.map(type => (
+                  <option key={type.value} value={type.value}>
+                    {type.icon} {type.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Title */}
+            <div>
+              <label className="block text-sm text-neutral-400 mb-1">Titel</label>
+              <input
+                type="text"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Update-Titel eingeben..."
+                className="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-white placeholder-neutral-500 focus:outline-none focus:border-purple-500"
+              />
+            </div>
+
+            {/* Description */}
+            <div>
+              <label className="block text-sm text-neutral-400 mb-1">Beschreibung</label>
+              <textarea
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Update-Beschreibung eingeben..."
+                rows={4}
+                className="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-white placeholder-neutral-500 focus:outline-none focus:border-purple-500 resize-none"
+              />
+            </div>
+
+            {/* Color Selection */}
+            <div>
+              <label className="block text-sm text-neutral-400 mb-2">Farbe</label>
+              <div className="flex gap-2">
+                {COLORS.map(c => (
+                  <button
+                    key={c.value}
+                    type="button"
+                    onClick={() => setColor(c.value)}
+                    className={`w-10 h-10 rounded-lg transition-all ${color === c.value ? 'ring-2 ring-white ring-offset-2 ring-offset-neutral-900 scale-110' : 'hover:scale-105'}`}
+                    style={{ backgroundColor: c.hex }}
+                    title={c.label}
+                  />
+                ))}
+              </div>
+            </div>
+
+            {/* Error/Success Messages */}
+            {error && (
+              <div className="alert alert-error text-sm">
+                {error}
+              </div>
+            )}
+            {success && (
+              <div className="alert alert-success text-sm">
+                Update erfolgreich gesendet!
+              </div>
+            )}
+          </div>
+
+          <div className="modal-footer">
+            <button
+              type="button"
+              onClick={onClose}
+              className="btn btn-ghost"
+              disabled={loading}
+            >
+              Abbrechen
+            </button>
+            <button
+              type="submit"
+              className="btn btn-primary flex items-center gap-2"
+              disabled={loading || success}
+            >
+              {loading ? (
+                <>
+                  <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                  </svg>
+                  Senden...
+                </>
+              ) : success ? (
+                <>
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                  Gesendet
+                </>
+              ) : (
+                <>
+                  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
+                  </svg>
+                  Senden
+                </>
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

gsm-frontend/src/pages/Dashboard.jsx

@@ -6,6 +6,7 @@ import ServerCard from '../components/ServerCard'
 import UserManagement from '../components/UserManagement'
 import ActivityLog from '../components/ActivityLog'
 import LoginModal from '../components/LoginModal'
+import SendUpdateModal from '../components/SendUpdateModal'
 
 export default function Dashboard({ onLogout }) {
   const navigate = useNavigate()
@@ -17,6 +18,7 @@ export default function Dashboard({ onLogout }) {
   const [showUserMgmt, setShowUserMgmt] = useState(false)
   const [showActivityLog, setShowActivityLog] = useState(false)
   const [showLogin, setShowLogin] = useState(false)
+  const [showSendUpdate, setShowSendUpdate] = useState(false)
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   const isGuest = user?.isGuest || role === 'guest'
@@ -120,6 +122,12 @@ export default function Dashboard({ onLogout }) {
                         </div>
                         {isSuperadmin && (
                           <>
+                            <button
+                              onClick={() => setShowSendUpdate(true)}
+                              className="btn btn-ghost"
+                            >
+                              Update
+                            </button>
                             <button
                               onClick={() => setShowUserMgmt(true)}
                               className="btn btn-ghost"
@@ -206,6 +214,12 @@ export default function Dashboard({ onLogout }) {
                   <>
                     {isSuperadmin && (
                       <>
+                        <button
+                          onClick={() => { setShowSendUpdate(true); setMobileMenuOpen(false); }}
+                          className="btn btn-ghost justify-start"
+                        >
+                          Discord Update
+                        </button>
                         <button
                           onClick={() => { setShowUserMgmt(true); setMobileMenuOpen(false); }}
                           className="btn btn-ghost justify-start"
@@ -307,6 +321,9 @@ export default function Dashboard({ onLogout }) {
       {showLogin && (
         <LoginModal onClose={() => setShowLogin(false)} />
       )}
+      {showSendUpdate && (
+        <SendUpdateModal onClose={() => setShowSendUpdate(false)} />
+      )}
     </div>
   )
 }