Enhance UI with Gitea link, Resolution setting, and Copy Link feature

src/app/page.tsx

@@ -18,11 +18,11 @@ export default function Home() {
           </Link>
           <a
             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"
+            href="https://gitea.ramforth.net/RamTech/twitchChatOverlayServer"
             target="_blank"
             rel="noopener noreferrer"
           >
-            View on GitHub
+            View on Gitea
           </a>
         </div>
       </main>

src/components/dashboard/StyleControls.tsx

@@ -9,6 +9,8 @@ interface StyleControlsProps {
 }
 
 export default function StyleControls({ settings, updateSettings }: StyleControlsProps) {
+  const [copySuccess, setCopySuccess] = React.useState(false);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
     const { name, value, type } = e.target;
     let newValue: string | number | boolean = value;
@@ -32,9 +34,53 @@ export default function StyleControls({ settings, updateSettings }: StyleControl
     });
   };
 
+  const copyLink = () => {
+    // Mock token for now
+    const url = `${window.location.origin}/overlay/mock-token`;
+    navigator.clipboard.writeText(url);
+    setCopySuccess(true);
+    setTimeout(() => setCopySuccess(false), 2000);
+  };
+
   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">
+      
+      {/* Copy Link Section */}
+      <div className="p-4 bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-100 dark:border-indigo-800 rounded-lg">
+        <h3 className="text-xs font-semibold text-indigo-900 dark:text-indigo-200 uppercase tracking-wider mb-2">Overlay URL</h3>
+        <div className="flex gap-2">
+          <input 
+            readOnly 
+            value="/overlay/..." 
+            className="flex-1 min-w-0 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded text-xs px-2 py-1 text-zinc-500"
+          />
+          <button 
+            onClick={copyLink}
+            className="bg-indigo-600 hover:bg-indigo-700 text-white text-xs px-3 py-1 rounded transition-colors"
+          >
+            {copySuccess ? 'Copied!' : 'Copy'}
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-1">
         <h2 className="text-xl font-bold text-zinc-900 dark:text-white">Style Editor</h2>
+        <p className="text-xs text-zinc-500">Customize your chat appearance</p>
+      </div>
+
+      {/* Resolution */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Base Resolution</label>
+        <select
+          name="resolution"
+          value={settings.resolution}
+          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="720p">720p (HD)</option>
+          <option value="1080p">1080p (Full HD)</option>
+        </select>
+      </div>
 
       {/* Font Family */}
       <div className="space-y-2">

src/lib/types.ts

@@ -8,6 +8,7 @@ export interface OverlaySettings {
   textShadow: string;
   messageSpacing: string;
   usernameColor: string; // 'custom' or 'twitch'
+  resolution: '720p' | '1080p';
   emotes: {
     bttv: boolean;
     seventv: boolean;
@@ -25,6 +26,7 @@ export const DEFAULT_SETTINGS: OverlaySettings = {
   textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
   messageSpacing: '0.5rem',
   usernameColor: 'twitch',
+  resolution: '1080p',
   emotes: {
     bttv: true,
     seventv: true,