Adds an "Expand" button (↔️) to the top of the chatbox
// ==UserScript==
// @name Fishtank Chat Expander
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Adds an "Expand" button (↔️) to the top of the chatbox
// @author @c
// @match *://*.fishtank.live/*
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const C = 'ft-expanded';
GM_addStyle(`
body.modern.${C} main,body.modern.${C} .pb-10{display:none!important}
body.modern.${C} div.fixed:has(#chat-input){inset:88px 20px 80px!important;width:auto!important;height:auto!important;margin:0!important;transform:none!important;z-index:5!important}
body.classic.${C} [class*="layout_left"],body.classic.${C} [class*="layout_center"],body.classic.${C} [class*="layout_mobile-xp-bar"]{display:none!important}
body.classic.${C} [class*="layout_layout"]{display:block!important}
body.classic.${C} [class*="layout_right"]{width:100%!important;max-width:none!important;padding:0 20px!important}
body.classic.${C} [class*="chat_chat"]{height:calc(100vh - 120px)!important}
@media(max-width:1024px){
body.${C} div.fixed:has(#chat-input),body.${C} [class*="layout_right"]{position:fixed!important;inset:0!important;z-index:9999!important;height:100dvh!important}
}
`.replace(/\s+/g, ' '));
const S = () => {
if (document.getElementById('chat-expander')) return;
const classic = !!document.querySelector('[class*="layout_layout"]');
document.body.classList.add(classic ? 'classic' : 'modern');
const container = classic
? document.querySelector('[class*="chat-room-selector"]')
: document.querySelector('.flex.items-center.gap-0\\.5');
if (!container) return;
const btn = document.createElement('button');
btn.id = 'chat-expander';
btn.innerHTML = '<div style="font-size:14px;width:22px;cursor:pointer;">↔️</div>';
if (!classic) {
btn.className = 'bg-gradient-to-r from-tertiary-500 to-tertiary-600/75 p-0.5 rounded-md mr-1';
btn.firstChild.className = 'bg-gradient-to-t from-tertiary-400 to-tertiary-500 text-light-text p-1 rounded-sm';
} else {
btn.style.cssText = 'background:rgba(0,0,0,0.2);border:1px solid #000;border-radius:4px;margin-right:8px;padding:2px;';
}
btn.onclick = e => {
e.preventDefault(); e.stopPropagation();
const active = document.body.classList.toggle(C);
btn.querySelector('div').textContent = active ? '↙️' : '↔️';
window.dispatchEvent(new Event('resize'));
};
classic ? container.parentNode.insertBefore(btn, container) : container.prepend(btn);
};
new MutationObserver(S).observe(document.body, { childList: true, subtree: true });
})();