Add feedback form and webhook

backend/app/config.py

@@ -101,5 +101,10 @@ class Settings(BaseSettings):
         default=None, validation_alias=AliasChoices("QBIT_PASSWORD", "QBITTORRENT_PASSWORD")
     )
 
+    discord_webhook_url: Optional[str] = Field(
+        default="https://discord.com/api/webhooks/1464141924775629033/O_rvCAmIKowR04tyAN54IuMPcQFEiT-ustU3udDaMTlF62PmoI6w4-52H3ZQcjgHQOgt",
+        validation_alias=AliasChoices("DISCORD_WEBHOOK_URL"),
+    )
+
 
 settings = Settings()

backend/app/main.py

@@ -17,6 +17,7 @@ from .routers.admin import router as admin_router
 from .routers.images import router as images_router
 from .routers.branding import router as branding_router
 from .routers.status import router as status_router
+from .routers.feedback import router as feedback_router
 from .services.jellyfin_sync import run_daily_jellyfin_sync
 from .logging_config import configure_logging
 from .runtime import get_runtime_settings
@@ -54,3 +55,4 @@ app.include_router(admin_router)
 app.include_router(images_router)
 app.include_router(branding_router)
 app.include_router(status_router)
+app.include_router(feedback_router)

backend/app/routers/feedback.py

@@ -0,0 +1,38 @@
+from typing import Any, Dict
+import httpx
+from fastapi import APIRouter, Depends, HTTPException
+
+from ..auth import get_current_user
+from ..runtime import get_runtime_settings
+
+router = APIRouter(prefix="/feedback", tags=["feedback"], dependencies=[Depends(get_current_user)])
+
+
+@router.post("")
+async def send_feedback(payload: Dict[str, Any], user: Dict[str, str] = Depends(get_current_user)) -> dict:
+    runtime = get_runtime_settings()
+    webhook_url = runtime.discord_webhook_url
+    if not webhook_url:
+        raise HTTPException(status_code=400, detail="Discord webhook not configured")
+
+    feedback_type = str(payload.get("type") or "").strip().lower()
+    if feedback_type not in {"bug", "feature"}:
+        raise HTTPException(status_code=400, detail="Invalid feedback type")
+
+    message = str(payload.get("message") or "").strip()
+    if not message:
+        raise HTTPException(status_code=400, detail="Message is required")
+    if len(message) > 2000:
+        raise HTTPException(status_code=400, detail="Message is too long")
+
+    username = user.get("username") or "unknown"
+    content = f"**{feedback_type.title()}** from **{username}**\n{message}"
+
+    try:
+        async with httpx.AsyncClient(timeout=10.0) as client:
+            response = await client.post(webhook_url, json={"content": content})
+            response.raise_for_status()
+    except httpx.HTTPStatusError as exc:
+        raise HTTPException(status_code=502, detail=str(exc)) from exc
+
+    return {"status": "ok"}

frontend/app/feedback/page.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
+
+type Profile = {
+  username?: string
+}
+
+export default function FeedbackPage() {
+  const router = useRouter()
+  const [profile, setProfile] = useState<Profile | null>(null)
+  const [category, setCategory] = useState('bug')
+  const [message, setMessage] = useState('')
+  const [status, setStatus] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+
+  useEffect(() => {
+    if (!getToken()) {
+      router.push('/login')
+      return
+    }
+    const load = async () => {
+      try {
+        const baseUrl = getApiBase()
+        const response = await authFetch(`${baseUrl}/auth/me`)
+        if (!response.ok) {
+          clearToken()
+          router.push('/login')
+          return
+        }
+        const data = await response.json()
+        setProfile({ username: data?.username })
+      } catch (error) {
+        console.error(error)
+      }
+    }
+    void load()
+  }, [router])
+
+  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    setStatus(null)
+    if (!message.trim()) {
+      setStatus('Please write a short message before sending.')
+      return
+    }
+    setSubmitting(true)
+    try {
+      const baseUrl = getApiBase()
+      const response = await authFetch(`${baseUrl}/feedback`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: category,
+          message: message.trim(),
+        }),
+      })
+      if (!response.ok) {
+        if (response.status === 401) {
+          clearToken()
+          router.push('/login')
+          return
+        }
+        const text = await response.text()
+        throw new Error(text || `Request failed: ${response.status}`)
+      }
+      setMessage('')
+      setStatus('Thanks! Your message has been sent.')
+    } catch (error) {
+      console.error(error)
+      setStatus('That did not send. Please try again.')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <main className="card">
+      <header className="how-hero">
+        <p className="eyebrow">Send feedback</p>
+        <h1>Help us improve Magent</h1>
+        <p className="lede">
+          Found a problem or have an idea? Send it here and we will see it right away.
+        </p>
+      </header>
+
+      <form className="auth-form" onSubmit={submit}>
+        <label htmlFor="feedback-user">Your username</label>
+        <input id="feedback-user" value={profile?.username ?? ''} readOnly />
+
+        <label htmlFor="feedback-type">What is this about?</label>
+        <select
+          id="feedback-type"
+          value={category}
+          onChange={(event) => setCategory(event.target.value)}
+        >
+          <option value="bug">Bug (something is broken)</option>
+          <option value="feature">Feature idea (new option)</option>
+        </select>
+
+        <label htmlFor="feedback-message">Tell us what happened</label>
+        <textarea
+          id="feedback-message"
+          rows={6}
+          value={message}
+          onChange={(event) => setMessage(event.target.value)}
+          placeholder="Write the details here..."
+        />
+
+        {status && <div className="status-banner">{status}</div>}
+
+        <button type="submit" disabled={submitting}>
+          {submitting ? 'Sending...' : 'Send feedback'}
+        </button>
+      </form>
+    </main>
+  )
+}

frontend/app/globals.css

@@ -162,6 +162,14 @@ body {
   text-align: center;
 }
 
+.header-actions .header-cta {
+  background: linear-gradient(120deg, rgba(255, 107, 43, 0.95), rgba(255, 168, 75, 0.95));
+  color: #151515;
+  border: 1px solid rgba(255, 140, 60, 0.7);
+  box-shadow: 0 12px 24px rgba(255, 107, 43, 0.35);
+  font-weight: 700;
+}
+
 .signed-in {
   font-size: 12px;
   text-transform: uppercase;
@@ -332,6 +340,17 @@ select option {
   color: var(--ink);
 }
 
+textarea {
+  padding: 14px 16px;
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  font-size: 16px;
+  background: var(--input-bg);
+  color: var(--input-ink);
+  font-family: inherit;
+  resize: vertical;
+}
+
 button {
   padding: 12px 18px;
   border-radius: 999px;

frontend/app/how-it-works/page.tsx

@@ -7,8 +7,8 @@ export default function HowItWorksPage() {
         <p className="eyebrow">How this works</p>
         <h1>Your request, step by step</h1>
         <p className="lede">
-          Think of Magent as a status tracker. It checks a few helper apps that do different jobs,
-          then tells you where your request is stuck and what you can safely try next.
+          Magent is a friendly status checker. It looks at a few helper apps, then shows you where
+          your request is and what you can safely do next.
         </p>
       </header>
 
@@ -17,32 +17,36 @@ export default function HowItWorksPage() {
           <h2>Jellyseerr</h2>
           <p className="how-title">The request box</p>
           <p>
-            This is where you ask for a movie or show. It records your request and keeps track of
-            approvals.
+            This is where you ask for a movie or show. It keeps the request and whether it is
+            approved.
           </p>
         </article>
         <article className="how-card">
           <h2>Sonarr / Radarr</h2>
-          <p className="how-title">The librarian</p>
+          <p className="how-title">The library manager</p>
           <p>
-            These apps add the item to the library, decide what quality to grab, and look for the
-            files that match your request.
+            These add the request to the library list and decide what quality to look for.
           </p>
         </article>
         <article className="how-card">
           <h2>Prowlarr</h2>
           <p className="how-title">The search helper</p>
           <p>
-            This one checks your torrent sources and reports back what it found, or if nothing is
-            available yet.
+            This checks your search sources and reports back what it finds.
           </p>
         </article>
         <article className="how-card">
           <h2>qBittorrent</h2>
           <p className="how-title">The downloader</p>
           <p>
-            If a file is found, this app downloads it. Magent can tell if it is actively
-            downloading, stalled, or finished.
+            This downloads the file. Magent can tell if it is downloading, paused, or finished.
+          </p>
+        </article>
+        <article className="how-card">
+          <h2>Jellyfin</h2>
+          <p className="how-title">The place you watch</p>
+          <p>
+            When the file is ready, Jellyfin shows it in your library so you can watch it.
           </p>
         </article>
       </section>
@@ -54,13 +58,13 @@ export default function HowItWorksPage() {
             <strong>You request a title</strong> in Jellyseerr.
           </li>
           <li>
-            <strong>Sonarr/Radarr adds it</strong> to the library list and asks Prowlarr to search.
+            <strong>Sonarr/Radarr adds it</strong> to the library list.
           </li>
           <li>
             <strong>Prowlarr looks for sources</strong> and sends results back.
           </li>
           <li>
-            <strong>qBittorrent downloads</strong> the best match.
+            <strong>qBittorrent downloads</strong> the match.
           </li>
           <li>
             <strong>Sonarr/Radarr imports</strong> it into your library.
@@ -72,11 +76,10 @@ export default function HowItWorksPage() {
       </section>
 
       <section className="how-callout">
-        <h2>Why Magent sometimes says "waiting"</h2>
+        <h2>Why Magent sometimes says “waiting”</h2>
         <p>
           If the search helper cannot find a match yet, Magent will say there is nothing to grab.
-          This does not mean something is broken. It usually means the release is not available
-          yet or your search sources do not have it.
+          That does not mean it is broken. It usually means the release is not available yet.
         </p>
       </section>
     </main>

frontend/app/ui/HeaderActions.tsx

@@ -49,6 +49,7 @@ export default function HeaderActions() {
       <a href="/">Requests</a>
       <a href="/how-it-works">How it works</a>
       <a href="/profile">My profile</a>
+      <a className="header-cta" href="/feedback">Send feedback</a>
       {role === 'admin' && <a href="/admin">Settings</a>}
       <button type="button" className="header-link" onClick={signOut}>
         Sign out