tg stickers v5

public/s/css/f0ckm.css

@@ -248,7 +248,7 @@ html[theme='amoled'] {
 }
 
 html[theme="amoled"] .comment-input textarea {
-  border: 1px solid #ffffff1c;
+  border: 1px solid var(--nav-border-color);
 }
 
 html[theme="amoled"] #settings-quicknav a:hover, #settings-quicknav a.active {
@@ -5626,8 +5626,8 @@ body[type='login'] {
   max-width: 100%;
   min-height: 200px;
   max-height: 200px;
-  background: var(--dropdown-bg);
+  background: var(--bg);
-  border: 1px solid var(--black);
+  border: 1px solid var(--nav-border-color);
   padding: 5px;
   z-index: 1000;
   overflow-y: auto;
@@ -5699,10 +5699,10 @@ body[type='login'] {
   overflow-x: auto;
   overflow-y: hidden;
   flex-shrink: 0;
-  background: rgba(0,0,0,0.25);
+  background: var(--bg);
   border-bottom: 1px solid rgba(255,255,255,0.07);
   scrollbar-width: none;
-  padding: 0 2px;
+  padding: 0;
 }
 .emoji-picker-tabs::-webkit-scrollbar { display: none; }
 

public/s/js/comments.js

@@ -4021,6 +4021,7 @@ class CommentSystem {
                 document.body.appendChild(overlay);
                 let _hideTimer = null;
                 window.stickerPreview = {
+                    isShowing: false,
                     show(src, isVideo) {
                         clearTimeout(_hideTimer);
                         overlay.innerHTML = '';
@@ -4029,9 +4030,11 @@ class CommentSystem {
                         if (isVideo) { el.autoplay = true; el.loop = true; el.muted = true; el.playsInline = true; }
                         overlay.appendChild(el);
                         overlay.classList.add('visible');
+                        this.isShowing = true;
                         if (isVideo) el.play().catch(() => {});
                     },
                     hide() {
+                        this.isShowing = false;
                         overlay.classList.remove('visible');
                         _hideTimer = setTimeout(() => { overlay.innerHTML = ''; }, 200);
                     }
@@ -4068,6 +4071,8 @@ class CommentSystem {
                     }
                     el.title = `:${name}:`;
                     el.onerror = () => { el.style.display = 'none'; };
+                    el._stickerSrc = url;
+                    el._stickerIsVideo = isVideo;
                     // Hold-to-preview
                     let holdTimer = null;
                     const startHold = () => { holdTimer = setTimeout(() => window.stickerPreview?.show(url, isVideo), 400); };
@@ -4076,6 +4081,10 @@ class CommentSystem {
                     el.addEventListener('mousedown', startHold);
                     el.addEventListener('mouseup', endHold);
                     el.addEventListener('mouseleave', cancelHold);
+                    // Instant switch: if already previewing and mouse enters a new emoji, show it immediately
+                    el.addEventListener('mouseenter', () => {
+                        if (window.stickerPreview?.isShowing) window.stickerPreview.show(url, isVideo);
+                    });
                     el.addEventListener('touchstart', startHold, { passive: true });
                     el.addEventListener('touchend', endHold);
                     el.addEventListener('touchcancel', endHold);
@@ -4136,6 +4145,16 @@ class CommentSystem {
                         };
                         gridArea.appendChild(el);
                     });
+
+                    // Touch slide: switch preview immediately as finger moves over a new sticker
+                    gridArea.addEventListener('touchmove', (e) => {
+                        if (!window.stickerPreview?.isShowing) return;
+                        const touch = e.touches[0];
+                        const target = document.elementFromPoint(touch.clientX, touch.clientY);
+                        if (target && target !== gridArea && (target.tagName === 'IMG' || target.tagName === 'VIDEO') && target._stickerSrc) {
+                            window.stickerPreview.show(target._stickerSrc, target._stickerIsVideo);
+                        }
+                    }, { passive: true });
                 };
 
                 // Build tab buttons

public/s/js/messages.js

@@ -1784,6 +1784,8 @@ if (window.__dmLoaded) {
             }
             el.title = `:${name}:`;
             el.onerror = () => { el.style.display = 'none'; };
+            el._stickerSrc = url;
+            el._stickerIsVideo = isVideo;
             // Hold-to-preview (uses shared window.stickerPreview from comments.js)
             let holdTimer = null;
             const startHold = () => { holdTimer = setTimeout(() => window.stickerPreview?.show(url, isVideo), 400); };
@@ -1792,6 +1794,10 @@ if (window.__dmLoaded) {
             el.addEventListener('mousedown', startHold);
             el.addEventListener('mouseup', endHold);
             el.addEventListener('mouseleave', cancelHold);
+            // Instant switch when already previewing
+            el.addEventListener('mouseenter', () => {
+                if (window.stickerPreview?.isShowing) window.stickerPreview.show(url, isVideo);
+            });
             el.addEventListener('touchstart', startHold, { passive: true });
             el.addEventListener('touchend', endHold);
             el.addEventListener('touchcancel', endHold);
@@ -1857,6 +1863,16 @@ if (window.__dmLoaded) {
                 gridArea.querySelectorAll('video').forEach(v =>
                     v.play().catch(() => v.addEventListener('canplay', () => v.play().catch(() => {}), { once: true }))
                 );
+                // Touch slide: switch preview immediately as finger moves over a new sticker
+                gridArea.onTouchMoveBound = null; // reset before re-adding
+                gridArea.addEventListener('touchmove', (e) => {
+                    if (!window.stickerPreview?.isShowing) return;
+                    const touch = e.touches[0];
+                    const target = document.elementFromPoint(touch.clientX, touch.clientY);
+                    if (target && target !== gridArea && (target.tagName === 'IMG' || target.tagName === 'VIDEO') && target._stickerSrc) {
+                        window.stickerPreview.show(target._stickerSrc, target._stickerIsVideo);
+                    }
+                }, { passive: true });
             };
 
             packs.forEach((pack) => {