Add Support & Social module to dashboard sidebar

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "clsx": "^2.1.1",
         "next": "16.1.1",
+        "next-auth": "^4.24.13",
         "react": "19.2.3",
         "react-dom": "19.2.3",
         "tailwind-merge": "^3.4.0"
@@ -231,6 +232,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -1229,6 +1239,15 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@panva/hkdf": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.2.1.tgz",
+      "integrity": "sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -2632,6 +2651,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4421,6 +4449,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/jose": {
+      "version": "4.15.9",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.9.tgz",
+      "integrity": "sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5023,6 +5060,38 @@
         }
       }
     },
+    "node_modules/next-auth": {
+      "version": "4.24.13",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.13.tgz",
+      "integrity": "sha512-sgObCfcfL7BzIK76SS5TnQtc3yo2Oifp/yIpfv6fMfeBOiBJkDWF3A2y9+yqnmJ4JKc2C+nMjSjmgDeTwgN1rQ==",
+      "license": "ISC",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@panva/hkdf": "^1.0.2",
+        "cookie": "^0.7.0",
+        "jose": "^4.15.5",
+        "oauth": "^0.9.15",
+        "openid-client": "^5.4.0",
+        "preact": "^10.6.3",
+        "preact-render-to-string": "^5.1.19",
+        "uuid": "^8.3.2"
+      },
+      "peerDependencies": {
+        "@auth/core": "0.34.3",
+        "next": "^12.2.5 || ^13 || ^14 || ^15 || ^16",
+        "nodemailer": "^7.0.7",
+        "react": "^17.0.2 || ^18 || ^19",
+        "react-dom": "^17.0.2 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@auth/core": {
+          "optional": true
+        },
+        "nodemailer": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -5058,6 +5127,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/oauth": {
+      "version": "0.9.15",
+      "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
+      "integrity": "sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==",
+      "license": "MIT"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5068,6 +5143,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -5181,6 +5265,48 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/oidc-token-hash": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.2.0.tgz",
+      "integrity": "sha512-6gj2m8cJZ+iSW8bm0FXdGF0YhIQbKrfP4yWTNzxc31U6MOjfEmB1rHvlYvxI1B7t7BCi1F2vYTT6YhtQRG4hxw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^10.13.0 || >=12.0.0"
+      }
+    },
+    "node_modules/openid-client": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.7.1.tgz",
+      "integrity": "sha512-jDBPgSVfTnkIh71Hg9pRvtJc6wTwqjRkN88+gCFtYWrlP4Yx2Dsrow8uPi3qLr/aeymPF3o2+dS+wOpglK04ew==",
+      "license": "MIT",
+      "dependencies": {
+        "jose": "^4.15.9",
+        "lru-cache": "^6.0.0",
+        "object-hash": "^2.2.0",
+        "oidc-token-hash": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/openid-client/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/openid-client/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC"
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -5347,6 +5473,28 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/preact": {
+      "version": "10.28.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.28.1.tgz",
+      "integrity": "sha512-u1/ixq/lVQI0CakKNvLDEcW5zfCjUQfZdK9qqWuIJtsezuyG6pk9TWj75GMuI/EzRSZB/VAE43sNWWZfiy8psw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "node_modules/preact-render-to-string": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz",
+      "integrity": "sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==",
+      "license": "MIT",
+      "dependencies": {
+        "pretty-format": "^3.8.0"
+      },
+      "peerDependencies": {
+        "preact": ">=10"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5357,6 +5505,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pretty-format": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
+      "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==",
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -6408,6 +6562,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "next": "16.1.1",
+    "next-auth": "^4.24.13",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "tailwind-merge": "^3.4.0"

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,29 @@
+import NextAuth from "next-auth"
+import TwitchProvider from "next-auth/providers/twitch"
+
+const handler = NextAuth({
+  providers: [
+    TwitchProvider({
+      clientId: process.env.TWITCH_CLIENT_ID!,
+      clientSecret: process.env.TWITCH_CLIENT_SECRET!,
+    }),
+  ],
+  callbacks: {
+    async session({ session, token }) {
+      if (session?.user) {
+        // Pass the user ID to the session
+        // Note: We might need to extend the type definition for session.user
+        (session.user as any).id = token.sub; 
+      }
+      return session;
+    },
+    async jwt({ token, user }) {
+      if (user) {
+        token.id = user.id;
+      }
+      return token;
+    },
+  },
+})
+
+export { handler as GET, handler as POST }

src/app/api/twitch/status/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+import { getTwitchStatus } from '@/lib/twitch';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const username = searchParams.get('username');
+
+  if (!username) {
+    return NextResponse.json({ error: 'Username is required' }, { status: 400 });
+  }
+
+  const isLive = await getTwitchStatus(username);
+
+  return NextResponse.json({ isLive });
+}

src/components/AuthButtons.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { signIn, signOut, useSession } from "next-auth/react";
+import Link from "next/link";
+
+export function LoginButton() {
+  return (
+    <button
+      onClick={() => signIn("twitch", { callbackUrl: "/editor" })}
+      className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-[#9146FF] text-white gap-2 hover:bg-[#7a3acc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+    >
+      Login with Twitch
+    </button>
+  );
+}
+
+export function LogoutButton() {
+  return (
+    <button
+      onClick={() => signOut({ callbackUrl: "/" })}
+      className="text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300"
+    >
+      Sign out
+    </button>
+  );
+}
+
+export function UserProfile() {
+  const { data: session } = useSession();
+
+  if (!session?.user) return null;
+
+  return (
+    <div className="flex items-center gap-3">
+      {session.user.image && (
+        <img 
+          src={session.user.image} 
+          alt={session.user.name || "User"} 
+          className="w-8 h-8 rounded-full border border-zinc-200 dark:border-zinc-800"
+        />
+      )}
+      <div className="flex flex-col">
+        <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+          {session.user.name}
+        </span>
+        <LogoutButton />
+      </div>
+    </div>
+  );
+}

src/components/dashboard/StyleControls.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { OverlaySettings } from '@/lib/types';
+import SupportModule from './SupportModule';
 
 interface StyleControlsProps {
   settings: OverlaySettings;
@@ -209,6 +210,8 @@ export default function StyleControls({ settings, updateSettings }: StyleControl
           <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">7TV Emotes</span>
         </label>
       </div>
+
+      <SupportModule />
     </div>
   );
 }

src/components/dashboard/SupportModule.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import React, { useEffect, useState } from 'react';
+
+const DEVELOPER_USERNAME = 'ramforth'; // Hardcoded developer username
+
+export default function SupportModule() {
+  const [isLive, setIsLive] = useState(false);
+
+  useEffect(() => {
+    const checkStatus = async () => {
+      try {
+        const res = await fetch(`/api/twitch/status?username=${DEVELOPER_USERNAME}`);
+        const data = await res.json();
+        setIsLive(data.isLive);
+      } catch (error) {
+        console.error('Failed to check Twitch status:', error);
+      }
+    };
+
+    checkStatus();
+    // Poll every 5 minutes
+    const interval = setInterval(checkStatus, 5 * 60 * 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="mt-auto pt-6 border-t border-zinc-200 dark:border-zinc-800">
+      <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-4">
+        Support & Social
+      </h3>
+
+      <div className="flex flex-col gap-3">
+        {/* Live Indicator / Watch Button */}
+        <a
+          href={`https://twitch.tv/${DEVELOPER_USERNAME}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={`
+            group relative flex items-center justify-between p-3 rounded-lg border transition-all duration-300
+            ${isLive 
+              ? 'bg-zinc-900 border-indigo-500/50 hover:border-indigo-500 hover:shadow-[0_0_15px_-3px_rgba(99,102,241,0.4)]' 
+              : 'bg-zinc-50 dark:bg-zinc-800/50 border-zinc-200 dark:border-zinc-700 hover:bg-zinc-100 dark:hover:bg-zinc-800'
+            }
+          `}
+        >
+          <div className="flex items-center gap-3">
+            {/* Avatar / Icon Placeholder */}
+            <div className={`
+              w-8 h-8 rounded-full flex items-center justify-center
+              ${isLive ? 'bg-indigo-600 text-white' : 'bg-zinc-200 dark:bg-zinc-700 text-zinc-500'}
+            `}>
+               {/* Simple Twitch Icon SVG */}
+               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="transform scale-90">
+                <path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h2.143L22.286 11.143V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/>
+              </svg>
+            </div>
+            
+            <div className="flex flex-col">
+              <span className={`text-xs font-bold ${isLive ? 'text-indigo-400' : 'text-zinc-700 dark:text-zinc-300'}`}>
+                ramforth
+              </span>
+              <span className="text-[10px] text-zinc-500">Developer</span>
+            </div>
+          </div>
+
+          {isLive ? (
+            <div className="flex items-center gap-1.5 px-2 py-1 rounded bg-red-500/10 border border-red-500/20">
+              <span className="relative flex h-2 w-2">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
+              </span>
+              <span className="text-[10px] font-bold text-red-500 uppercase tracking-wide">LIVE</span>
+            </div>
+          ) : (
+            <span className="text-[10px] text-zinc-400 group-hover:text-zinc-600 dark:group-hover:text-zinc-200 transition-colors">
+              Offline
+            </span>
+          )}
+        </a>
+
+        {/* Action Buttons */}
+        <div className="grid grid-cols-2 gap-2">
+          <a
+            href={`https://twitch.tv/${DEVELOPER_USERNAME}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium text-white bg-[#9146FF] hover:bg-[#7a3acc] rounded-md transition-colors"
+          >
+            <span>Follow</span>
+          </a>
+          
+          <a
+            href="#" 
+            /* Replace # with actual donation link e.g., ko-fi.com/ramforth */
+            className="flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium text-zinc-700 dark:text-zinc-200 bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-md transition-colors border border-zinc-200 dark:border-zinc-700"
+          >
+            <span>❤️ Donate</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

src/lib/twitch.ts

@@ -0,0 +1,54 @@
+// src/lib/twitch.ts
+
+export async function getTwitchStatus(username: string) {
+  const clientId = process.env.TWITCH_CLIENT_ID;
+  const clientSecret = process.env.TWITCH_CLIENT_SECRET;
+
+  if (!clientId || !clientSecret) {
+    console.error('Missing Twitch API credentials');
+    return false;
+  }
+
+  try {
+    // 1. Get App Access Token
+    const tokenResponse = await fetch('https://id.twitch.tv/oauth2/token', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: new URLSearchParams({
+        client_id: clientId,
+        client_secret: clientSecret,
+        grant_type: 'client_credentials',
+      }),
+    });
+
+    if (!tokenResponse.ok) {
+      throw new Error('Failed to get Twitch access token');
+    }
+
+    const tokenData = await tokenResponse.json();
+    const accessToken = tokenData.access_token;
+
+    // 2. Check Stream Status
+    const streamResponse = await fetch(`https://api.twitch.tv/helix/streams?user_login=${username}`, {
+      headers: {
+        'Client-ID': clientId,
+        'Authorization': `Bearer ${accessToken}`,
+      },
+    });
+
+    if (!streamResponse.ok) {
+        throw new Error('Failed to fetch stream status');
+    }
+
+    const streamData = await streamResponse.json();
+    
+    // If the data array is not empty, the user is live
+    return streamData.data && streamData.data.length > 0;
+
+  } catch (error) {
+    console.error('Error fetching Twitch status:', error);
+    return false;
+  }
+}