dynamic http embeds, kofi button, etc

webui/src/components/DiscordInviteButton.jsx

@@ -11,8 +11,8 @@ export default function DiscordInviteButton({text = "Join our Discord!"}) {
     <a
       href={discordInvite}
       target="_blank"
-      rel="noopener noreferrer"npm 
-      className="inline-flex items-center w-full h-full text-white rainbow-animate-bg transition justify-center"
+      rel="noopener noreferrer"
+      className="inline-flex items-center w-full px-0.5 py-0.5 text-sm font-medium text-white rainbow-animate-bg transition justify-center"
     // animated rainbow backgound
     // className="inline-flex items-center px-3 py-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white rounded hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 transition"
     >
@@ -20,4 +20,4 @@ export default function DiscordInviteButton({text = "Join our Discord!"}) {
         {text}
     </a>
   );
-}
+}

webui/src/components/KoFiButton.jsx

@@ -0,0 +1,21 @@
+import { useSession } from "../context/SessionContext";
+import { FaCoffee } from "react-icons/fa";
+
+export default function KoFiButton({ text = "Support me on Ko-fi!" }) {
+  const { session } = useSession();
+  const kofiLink = session?.kofi?.link || null;
+
+  if (!kofiLink) return null;
+
+  return (
+    <a
+      href={kofiLink}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex items-center w-full px-0.5 py-0.5 text-sm font-medium text-white kofi-animate-bg transition justify-center"
+    >
+      <FaCoffee className="mr-1" />
+      {text}
+    </a>
+  );
+}

webui/src/components/UserListPanel.jsx

@@ -4,6 +4,7 @@ import { useSettingsNamespace } from '../settings/index.js';
 import { useSocket } from '../context/SocketContext.jsx';
 import NicknameForm from './NicknameForm.jsx';
 import DiscordInviteButton from './DiscordInviteButton.jsx';
+import KoFiButton from './KoFiButton.jsx';
 
 function roleColors(role) {
   switch (role) {
@@ -129,13 +130,17 @@ export default function UserListPanel({ hideNicknameForm = false, hideHeader = f
       className={`panel-section space-y-0.5 text-base ${fillHeight ? 'flex h-full min-h-0 flex-col overflow-hidden' : ''} ${className}`}
     >
       {!hideNicknameForm && (
-        <div className="space-y-0.5 flex">
-          <div className='w-1/2'>
-          <NicknameForm />
-
-          </div>
-          <div className='w-1/2'>
-            <DiscordInviteButton />
+        <div className="space-y-0.5">
+          <div className="flex items-stretch gap-0.5">
+            <div className="flex min-w-0 flex-1">
+              <div className="surface flex w-full items-center">
+                <NicknameForm />
+              </div>
+            </div>
+            <div className="flex w-1/2 min-w-[8rem] flex-col gap-0.5">
+              <DiscordInviteButton />
+              <KoFiButton />
+            </div>
           </div>
           {!canSetNickname && <p className="text-xs text-slate-500">Spectators cannot set nicknames.</p>}
         </div>

webui/src/index.css

@@ -115,6 +115,18 @@ body {
       background-position: 0% 50%;
     }
   }
+
+  .kofi-animate-bg {
+    background: linear-gradient(
+      270deg,
+      #ff5f5f,
+      #ff9f43,
+      #ffd166,
+      #ff5f5f
+    );
+    background-size: 800% 800%;
+    animation: rainbowBG 240s ease infinite;
+  }
 }
 
 @layer utilities {