Implement Style Editor, Preview, and Settings Schema

package-lock.json

@@ -8,9 +8,11 @@
       "name": "open-chat-overlay",
       "version": "0.1.0",
       "dependencies": {
+        "clsx": "^2.1.1",
         "next": "16.1.1",
         "react": "19.2.3",
-        "react-dom": "19.2.3"
+        "react-dom": "19.2.3",
+        "tailwind-merge": "^3.4.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -2587,6 +2589,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -6029,6 +6040,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",

package.json

@@ -9,9 +9,11 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "next": "16.1.1",
     "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-dom": "19.2.3",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

src/app/editor/page.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import React, { useState } from 'react';
+import StyleControls from '@/components/dashboard/StyleControls';
+import PreviewFrame from '@/components/dashboard/PreviewFrame';
+import { OverlaySettings, DEFAULT_SETTINGS } from '@/lib/types';
+
+export default function EditorPage() {
+  const [settings, setSettings] = useState<OverlaySettings>(DEFAULT_SETTINGS);
+
+  const updateSettings = (newSettings: Partial<OverlaySettings>) => {
+    setSettings(prev => ({ ...prev, ...newSettings }));
+  };
+
+  return (
+    <main className="flex h-screen w-screen overflow-hidden bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100">
+      <StyleControls settings={settings} updateSettings={updateSettings} />
+      <PreviewFrame settings={settings} />
+    </main>
+  );
+}

src/app/page.tsx

@@ -1,65 +1,31 @@
-import Image from "next/image";
+import Link from 'next/link';
 
 export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+        <h1 className="text-4xl font-bold">OpenChat Overlay</h1>
+        <p className="text-lg text-zinc-600 dark:text-zinc-400">
+          A free, open-source alternative to StreamElements chat overlay.
+        </p>
+        
+        <div className="flex gap-4 items-center flex-col sm:flex-row">
+          <Link 
+            href="/editor"
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+          >
+            Go to Style Editor
+          </Link>
           <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
+            href="https://github.com"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
+            View on GitHub
           </a>
         </div>
       </main>
     </div>
   );
-}
+}

src/components/dashboard/PreviewFrame.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import React from 'react';
+import { OverlaySettings } from '@/lib/types';
+
+interface PreviewFrameProps {
+  settings: OverlaySettings;
+}
+
+const MOCK_MESSAGES = [
+  { id: 1, user: 'StreamElements', color: '#5b99ff', text: 'Welcome to the stream! Enjoy your stay.', badges: ['moderator'] },
+  { id: 2, user: 'Viewer123', color: '#ff5b5b', text: 'PogChamp this overlay is amazing!', badges: ['subscriber'] },
+  { id: 3, user: 'Lurker', color: '#5bff89', text: 'Can I get a shoutout?', badges: [] },
+  { id: 4, user: 'ProGamer', color: '#ffb35b', text: 'What game are we playing today? kappa', badges: ['subscriber', 'turbo'] },
+];
+
+export default function PreviewFrame({ settings }: PreviewFrameProps) {
+  // Convert hex to rgb for background opacity
+  const r = parseInt(settings.backgroundColor.slice(1, 3), 16);
+  const g = parseInt(settings.backgroundColor.slice(3, 5), 16);
+  const b = parseInt(settings.backgroundColor.slice(5, 7), 16);
+  const rgbaBackground = `rgba(${r}, ${g}, ${b}, ${settings.backgroundOpacity})`;
+
+  const containerStyle: React.CSSProperties = {
+    fontFamily: settings.fontFamily,
+    backgroundColor: 'transparent', // The frame background is transparent, messages have their own bg or the container has it?
+    // In many overlays, the messages themselves are transparent or the whole container has a background.
+    // Based on the CSS generator: .chat-message has the background. Wait, no.
+    // In generateOverlayCSS:
+    // .chat-message { background-color: var(--chat-bg-color); ... }
+    // So the background applies to individual messages.
+  };
+
+  const messageStyle: React.CSSProperties = {
+    backgroundColor: rgbaBackground,
+    color: settings.textColor,
+    textShadow: settings.textShadow,
+    fontSize: settings.fontSize,
+    marginBottom: settings.messageSpacing,
+  };
+
+  return (
+    <div className="flex-1 bg-zinc-100 dark:bg-zinc-950 p-8 flex items-center justify-center h-full overflow-hidden">
+        <div className="relative w-full max-w-md aspect-[9/16] bg-[url('/file.svg')] bg-cover bg-center border-4 border-zinc-800 rounded-xl shadow-2xl overflow-hidden bg-zinc-800">
+            {/* Mock Stream Background (Optional) */}
+            <div className="absolute inset-0 bg-gradient-to-br from-indigo-900 to-purple-900 opacity-50"></div>
+            
+            <div 
+                className="absolute inset-0 flex flex-col justify-end p-4"
+                style={containerStyle}
+            >
+                {MOCK_MESSAGES.map((msg) => (
+                    <div key={msg.id} className="p-2 rounded mb-2 animate-in fade-in slide-in-from-bottom-2" style={messageStyle}>
+                        <div className="flex flex-wrap items-baseline">
+                            {settings.showBadges && msg.badges.length > 0 && (
+                                <span className="mr-2 inline-flex gap-1">
+                                    {msg.badges.map(badge => (
+                                        <span key={badge} className="w-4 h-4 bg-zinc-400 rounded-sm inline-block" title={badge}></span>
+                                    ))}
+                                </span>
+                            )}
+                            <span 
+                                className="font-bold mr-2" 
+                                style={{ color: settings.usernameColor === 'twitch' ? msg.color : settings.textColor }}
+                            >
+                                {msg.user}:
+                            </span>
+                            <span>{msg.text}</span>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+        <div className="absolute top-4 right-4 text-xs text-zinc-500">Live Preview</div>
+    </div>
+  );
+}

src/components/dashboard/StyleControls.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import React from 'react';
+import { OverlaySettings } from '@/lib/types';
+
+interface StyleControlsProps {
+  settings: OverlaySettings;
+  updateSettings: (newSettings: Partial<OverlaySettings>) => void;
+}
+
+export default function StyleControls({ settings, updateSettings }: StyleControlsProps) {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value, type } = e.target;
+    let newValue: string | number | boolean = value;
+
+    if (type === 'range') {
+      newValue = parseFloat(value);
+    } else if (type === 'checkbox') {
+      newValue = (e.target as HTMLInputElement).checked;
+    }
+
+    updateSettings({ [name]: newValue });
+  };
+
+  const handleEmoteChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, checked } = e.target;
+    updateSettings({
+      emotes: {
+        ...settings.emotes,
+        [name]: checked,
+      },
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-6 p-6 bg-white dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-800 h-full overflow-y-auto w-80 shrink-0">
+      <h2 className="text-xl font-bold text-zinc-900 dark:text-white">Style Editor</h2>
+
+      {/* Font Family */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Font Family</label>
+        <select
+          name="fontFamily"
+          value={settings.fontFamily}
+          onChange={handleChange}
+          className="w-full p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white"
+        >
+          <option value="Inter, sans-serif">Inter</option>
+          <option value="Roboto, sans-serif">Roboto</option>
+          <option value="'Open Sans', sans-serif">Open Sans</option>
+          <option value="Lato, sans-serif">Lato</option>
+          <option value="Montserrat, sans-serif">Montserrat</option>
+          <option value="'Press Start 2P', cursive">Pixel Art</option>
+        </select>
+      </div>
+
+      {/* Font Size */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Font Size</label>
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            name="fontSize"
+            value={settings.fontSize}
+            onChange={handleChange}
+            className="w-full p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white"
+          />
+        </div>
+      </div>
+
+      {/* Text Color */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Text Color</label>
+        <div className="flex items-center gap-2">
+          <input
+            type="color"
+            name="textColor"
+            value={settings.textColor}
+            onChange={handleChange}
+            className="h-10 w-10 p-0 border-0 rounded overflow-hidden cursor-pointer"
+          />
+          <input
+            type="text"
+            name="textColor"
+            value={settings.textColor}
+            onChange={handleChange}
+            className="flex-1 p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white uppercase"
+          />
+        </div>
+      </div>
+
+      {/* Background Color */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Background Color</label>
+        <div className="flex items-center gap-2">
+          <input
+            type="color"
+            name="backgroundColor"
+            value={settings.backgroundColor}
+            onChange={handleChange}
+            className="h-10 w-10 p-0 border-0 rounded overflow-hidden cursor-pointer"
+          />
+          <input
+            type="text"
+            name="backgroundColor"
+            value={settings.backgroundColor}
+            onChange={handleChange}
+            className="flex-1 p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white uppercase"
+          />
+        </div>
+      </div>
+
+      {/* Background Opacity */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300 flex justify-between">
+          <span>Opacity</span>
+          <span>{Math.round(settings.backgroundOpacity * 100)}%</span>
+        </label>
+        <input
+          type="range"
+          name="backgroundOpacity"
+          min="0"
+          max="1"
+          step="0.01"
+          value={settings.backgroundOpacity}
+          onChange={handleChange}
+          className="w-full accent-indigo-600 cursor-pointer"
+        />
+      </div>
+
+      {/* Toggles */}
+      <div className="space-y-4 pt-4 border-t border-zinc-200 dark:border-zinc-800">
+        <label className="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            name="showBadges"
+            checked={settings.showBadges}
+            onChange={handleChange}
+            className="w-5 h-5 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500"
+          />
+          <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Show Badges</span>
+        </label>
+
+        <label className="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            name="bttv"
+            checked={settings.emotes.bttv}
+            onChange={handleEmoteChange}
+            className="w-5 h-5 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500"
+          />
+          <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">BTTV Emotes</span>
+        </label>
+
+        <label className="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            name="seventv"
+            checked={settings.emotes.seventv}
+            onChange={handleEmoteChange}
+            className="w-5 h-5 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500"
+          />
+          <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">7TV Emotes</span>
+        </label>
+      </div>
+    </div>
+  );
+}

src/lib/types.ts

@@ -0,0 +1,33 @@
+export interface OverlaySettings {
+  fontFamily: string;
+  fontSize: string;
+  textColor: string;
+  backgroundColor: string;
+  backgroundOpacity: number;
+  showBadges: boolean;
+  textShadow: string;
+  messageSpacing: string;
+  usernameColor: string; // 'custom' or 'twitch'
+  emotes: {
+    bttv: boolean;
+    seventv: boolean;
+    ffz: boolean;
+  };
+}
+
+export const DEFAULT_SETTINGS: OverlaySettings = {
+  fontFamily: 'Inter, sans-serif',
+  fontSize: '16px',
+  textColor: '#ffffff',
+  backgroundColor: '#000000',
+  backgroundOpacity: 0.5,
+  showBadges: true,
+  textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
+  messageSpacing: '0.5rem',
+  usernameColor: 'twitch',
+  emotes: {
+    bttv: true,
+    seventv: true,
+    ffz: true,
+  },
+};

src/lib/utils.ts

@@ -0,0 +1,75 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { OverlaySettings } from "./types";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function generateOverlayCSS(settings: OverlaySettings): string {
+  // Convert backgroundOpacity (0-1) to hex alpha if needed, or use rgba
+  // Here we assume CSS Injection will be used as a <style> tag or returned by API
+
+  const r = parseInt(settings.backgroundColor.slice(1, 3), 16);
+  const g = parseInt(settings.backgroundColor.slice(3, 5), 16);
+  const b = parseInt(settings.backgroundColor.slice(5, 7), 16);
+  const rgbaBackground = `rgba(${r}, ${g}, ${b}, ${settings.backgroundOpacity})`;
+
+  return `
+    :root {
+      --chat-font-family: ${settings.fontFamily};
+      --chat-font-size: ${settings.fontSize};
+      --chat-text-color: ${settings.textColor};
+      --chat-bg-color: ${rgbaBackground};
+      --chat-text-shadow: ${settings.textShadow};
+      --chat-spacing: ${settings.messageSpacing};
+    }
+
+    body {
+      background-color: transparent;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      font-family: var(--chat-font-family);
+    }
+
+    .chat-container {
+      width: 100%;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      padding: 1rem;
+      box-sizing: border-box;
+    }
+
+    .chat-message {
+      background-color: var(--chat-bg-color);
+      color: var(--chat-text-color);
+      text-shadow: var(--chat-text-shadow);
+      font-size: var(--chat-font-size);
+      margin-bottom: var(--chat-spacing);
+      padding: 0.5rem;
+      border-radius: 4px;
+      word-wrap: break-word;
+      animation: fadeIn 0.2s ease-out;
+    }
+
+    .username {
+      font-weight: bold;
+      margin-right: 0.5rem;
+    }
+
+    .badges {
+      display: ${settings.showBadges ? 'inline-flex' : 'none'};
+      margin-right: 0.25rem;
+      vertical-align: middle;
+      gap: 0.25rem;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+  `;
+}