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

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">
-      <h2 className="text-xl font-bold text-zinc-900 dark:text-white">Style Editor</h2>
+      
+      {/* 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">