From bd67f2fcf2da67be1e2b178c00be707248c869bf Mon Sep 17 00:00:00 2001
From: lordlogo2002 <i96774080@gmail.com>
Date: Sat, 19 Jul 2025 23:38:19 +0200
Subject: [PATCH] refactor: rename RickLabel to RickPanel and enhance click
 handling with stay focused option

---
 source/src/index.tsx | 66 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 59 insertions(+), 7 deletions(-)

diff --git a/source/src/index.tsx b/source/src/index.tsx
index 7db028d..c84b4fe 100644
--- a/source/src/index.tsx
+++ b/source/src/index.tsx
@@ -1,32 +1,84 @@
 import { h, render, Component } from 'nano-jsx'
 
-class RickLabel extends Component {
+class RickPanel extends Component {
   count = 0
+  stayFocused = true
 
   handleClick = () => {
     this.count++
-    window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
+
+    const win = window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
+
+    if (!this.stayFocused && win) {
+      win.focus()
+    }
+
     this.update?.()
   }
 
+  handleCheckbox = (e: Event) => {
+    const input = e.target as HTMLInputElement
+    this.stayFocused = input.checked
+  }
+
+  handleSansClick = () => {
+    window.open('https://www.youtube.com/watch?v=ZcoqR9Bwx1Y', '_blank') // Megalovania 🎶
+  }
+
   render() {
     return (
       <div
-        style="background:white; padding:8px 12px; border-radius:6px; cursor:pointer; font-family:sans-serif;"
-        onclick={this.handleClick}
+        style="
+          background: #fefefe;
+          color: #111;
+          font-family: sans-serif;
+          padding: 16px;
+          border: 1px solid #ccc;
+          border-radius: 10px;
+          width: fit-content;
+          box-shadow: 0 0 10px rgba(0,0,0,0.1);
+        "
       >
-        Rickroll Me ({this.count})
+        <div style="margin-bottom: 10px;">
+          <strong>🔥 Rickroll Panel</strong>
+        </div>
+
+        <button
+          onclick={this.handleClick}
+          style="padding: 6px 12px; border: none; background: #007bff; color: white; border-radius: 5px; cursor: pointer;"
+        >
+          Rickroll Me ({this.count})
+        </button>
+
+        <div style="margin-top: 10px; font-size: 0.9em;">
+          <label>
+            <input
+              type="checkbox"
+              onchange={this.handleCheckbox}
+              checked={this.stayFocused}
+              style="margin-right: 6px;"
+            />
+            Stay in new tab
+          </label>
+        </div>
+
+        <div
+          onclick={this.handleSansClick}
+          style="margin-top: 14px; color: #666; font-size: 0.8em; cursor: pointer; text-decoration: underline;"
+        >
+          sans.
+        </div>
       </div>
     )
   }
 }
 
-export function insertRickLabel(target: HTMLElement | string = document.body): void {
+export function insertRickPanel(target: HTMLElement | string = document.body): void {
   const container = typeof target === 'string'
     ? document.querySelector(target)
     : target
 
   if (container instanceof HTMLElement) {
-    render(<RickLabel />, container)
+    render(<RickPanel />, container)
   }
 }