WIP Chat overhaul

public/s/css/f0ckm.css

@@ -10032,6 +10032,7 @@ html[theme="orange"] .image-brand {
   .pagewrapper:has(.index-layout-wrapper),
   .pagewrapper:has(.item-layout-container),
   .pagewrapper:has(.meme-layout-wrapper),
+  .pagewrapper:has(.chat-page),
   body.private-gate-active .pagewrapper {
     padding-right: 0 !important;
   }
@@ -14704,6 +14705,7 @@ body.layout-modern .xd-score-wrapper {
   z-index: 950;
   display: flex;
   flex-direction: column;
+  justify-content: flex-end;
   align-items: flex-end;
   pointer-events: none;
   font-family: var(--font, monospace);
@@ -14788,8 +14790,9 @@ body.scroller-active #gchat-reopen-bubble {
   display: flex;
   flex-direction: column;
   width: 300px;
-  height: 40dvh;
+  height: 400px;
-  max-height: calc(100dvh - var(--navbar-h, 50px));
+  max-height: calc(100dvh - var(--navbar-h, 50px) - 15px);
+  min-height: 180px;
   background: var(--bg, #1a1a1a);
   border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.08));
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65);
@@ -14974,22 +14977,12 @@ body.scroller-active #gchat-reopen-bubble {
   white-space: nowrap;
 }
 
-#gchat-topic {
-  padding: 5px 10px;
-  font-size: 0.78em;
-  font-weight: 600;
-  color: var(--bg, #111);
-  background: var(--accent, #f2ef0b);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-  word-break: break-word;
-  white-space: pre-wrap;
-  flex-shrink: 0;
-  opacity: 0.95;
 }
 
 #gchat-messages {
-  flex: 1;
+  flex: 1 1 0%;
-  overflow-y: auto;
+  min-height: 0;
+  overflow-y: auto !important;
   overflow-x: hidden;
   padding: 8px;
   display: flex;
@@ -15096,7 +15089,9 @@ body.scroller-active #gchat-reopen-bubble {
 
 /* Emoji images inside chat bubbles */
 .gchat-bubble .emoji {
-  height: 10.4em;
+  height: 1.4em;
+  max-height: 28px;
+  width: auto;
   vertical-align: middle;
   display: inline-block;
 }
@@ -15204,33 +15199,15 @@ body.scroller-active #gchat-reopen-bubble {
   transform: scale(0.92);
 }
 
-/* Emoji picker grid (above input area, inside panel) */
 #gchat-emoji-picker {
   display: none;
-  grid-template-columns: repeat(6, 1fr);
+  flex-direction: column;
-  gap: 4px;
+  max-height: 220px;
-  padding: 8px;
-  overflow-y: auto;
-  max-height: 140px;
   background: var(--nav-bg, #111);
   border-top: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.08));
   scrollbar-width: thin;
 }
 
-#gchat-emoji-picker img {
-  width: 36px;
-  height: 36px;
-  object-fit: contain;
-  cursor: pointer;
-  border-radius: 4px;
-  padding: 2px;
-  transition: background 0.1s;
-}
-
-#gchat-emoji-picker img:hover {
-  background: rgba(255, 255, 255, 0.12);
-}
-
 /* :emoji inline autocomplete — portaled to body */
 #gchat-emoji-ac {
   position: fixed;
@@ -15743,14 +15720,319 @@ body.scroller-active #gchat-reopen-bubble {
   white-space: nowrap;
 }
 
-.gchat-item-card-meta {
+/* ── Dedicated /chat Page ── */
-  font-size: 0.7rem;
+html:has(.chat-page),
-  opacity: 0.5;
+body:has(.chat-page) {
+  height: 100% !important;
+  overflow: hidden !important;
+}
+
+body:has(.chat-page) .pagewrapper {
+  height: calc(100dvh - var(--navbar-h, 60px)) !important;
+  min-height: 0 !important;
+  max-width: 100% !important;
+  width: 100% !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  overflow: hidden !important;
+  display: flex !important;
+  flex-direction: column !important;
+  transition: padding-right 0.3s ease-in-out !important;
+}
+
+@media (min-width: 1000px) {
+  body:has(.chat-page):not(.sidebar-right-hidden) .pagewrapper {
+    padding-right: 300px !important;
+  }
+}
+
+body:has(.chat-page) footer,
+body:has(.chat-page) .footer {
+  display: none !important;
+}
+
+.chat-page {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.site-chat-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  border-radius: 0;
+  overflow: hidden;
+  border: none;
+  background: var(--bg, #1a1a1a);
+  box-shadow: none;
+}
+
+.gchat-page-panel {
+  position: relative !important;
+  inset: auto !important;
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  display: flex !important;
+  flex-direction: column !important;
+  transform: none !important;
+}
+
+.gchat-page-panel #gchat-resize-h,
+.gchat-page-panel #gchat-resize-w,
+.gchat-page-panel #gchat-resize-e,
+.gchat-page-panel .gchat-header-btns {
+  display: none !important;
+}
+
+/* Flex layout containers for chat body */
+.gchat-body-wrap {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+#gchat-panel:not(.gchat-page-panel) .gchat-body-wrap {
+  flex-direction: column;
+}
+
+.gchat-page-panel .gchat-body-wrap {
+  flex-direction: row;
+}
+
+.gchat-main-area {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+
+.gchat-page-panel #gchat-messages {
+  flex: 1;
+  min-height: 0;
+  padding: 14px;
+  overflow-y: auto;
+}
+
+.gchat-page-panel .gchat-msg {
+  max-width: 100% !important;
+}
+
+/* Right-side user list in page mode */
+.gchat-page-panel #gchat-online {
+  width: 250px;
+  min-width: 200px;
+  max-width: 300px;
+  border-left: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
+  background: rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.gchat-page-panel .gchat-online-header {
+  padding: 12px 14px 4px 14px;
+  font-size: 0.92rem;
+  font-weight: 700;
+  color: var(--accent, #f2ef0b);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.gchat-page-panel .gchat-online-subhead {
+  padding: 2px 14px 10px 14px;
+  font-size: 0.75rem;
+  opacity: 0.6;
+  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
+}
+
+.gchat-page-panel .gchat-online-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.gchat-page-panel .gchat-online-user-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  text-decoration: none;
+  color: var(--fg, #e0e0e0);
+  transition: background 0.15s ease;
+}
+
+.gchat-page-panel .gchat-online-user-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.gchat-page-panel .gchat-online-user-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.gchat-page-panel .gchat-online-user-avatar.guest-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.08);
+  font-size: 0.8rem;
+  color: #aaa;
+}
+
+.gchat-page-panel .gchat-online-user-name {
+  font-size: 0.88rem;
+  font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+@media (max-width: 768px) {
+  .gchat-page-panel .gchat-body-wrap {
+    flex-direction: column !important;
+    flex: 1 !important;
+    min-height: 0 !important;
+    height: 100% !important;
+    overflow: hidden !important;
+  }
+
+  .gchat-page-panel #gchat-online {
+    width: 100% !important;
+    max-width: 100% !important;
+    height: 40px !important;
+    min-height: 40px !important;
+    max-height: 40px !important;
+    border-left: none !important;
+    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
+    order: -1 !important;
+    flex-shrink: 0 !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    padding: 0 10px !important;
+    overflow: hidden !important;
+    background: rgba(0, 0, 0, 0.3) !important;
+  }
+
+  .gchat-page-panel .gchat-online-header {
+    padding: 0 !important;
+    font-size: 0.8rem !important;
+    white-space: nowrap !important;
+    flex-shrink: 0 !important;
+    gap: 4px !important;
+  }
+
+  .gchat-page-panel .gchat-online-header span {
+    font-size: 0.78rem !important;
+  }
+
+  .gchat-page-panel .gchat-online-subhead {
+    display: none !important;
+  }
+
+  .gchat-page-panel .gchat-online-list {
+    flex: 1 !important;
+    min-width: 0 !important;
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: nowrap !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    gap: 6px !important;
+    padding: 0 4px !important;
+    align-items: center !important;
+    scrollbar-width: none !important;
+    -webkit-overflow-scrolling: touch !important;
+    touch-action: pan-x !important;
+  }
+
+  .gchat-page-panel .gchat-online-list::-webkit-scrollbar {
+    display: none !important;
+  }
+
+  .gchat-page-panel .gchat-online-user-item {
+    flex-shrink: 0 !important;
+    padding: 2px 8px !important;
+    gap: 6px !important;
+    border-radius: 12px !important;
+    background: rgba(255, 255, 255, 0.08) !important;
+    height: 28px !important;
+    align-items: center !important;
+  }
+
+  .gchat-page-panel .gchat-online-user-avatar {
+    width: 20px !important;
+    height: 20px !important;
+  }
+
+  .gchat-page-panel .gchat-online-user-name {
+    font-size: 0.75rem !important;
+    max-width: 110px !important;
+  }
+
+  .gchat-page-panel .gchat-main-area {
+    flex: 1 !important;
+    min-height: 0 !important;
+    height: auto !important;
+    display: flex !important;
+    flex-direction: column !important;
+    overflow: hidden !important;
+  }
+
+  .gchat-page-panel #gchat-messages {
+    flex: 1 !important;
+    min-height: 0 !important;
+    overflow-y: auto !important;
+    padding: 10px !important;
+    -webkit-overflow-scrolling: touch !important;
+  }
+
+  .gchat-page-panel .gchat-msg {
+    max-width: 92% !important;
+  }
+
+  .gchat-page-panel #gchat-input-area {
+    flex-shrink: 0 !important;
+    background: var(--nav-bg, #0d0d0d) !important;
+    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
+  }
+}
+
 /* =============================================
    SETTINGS PAGE – MOBILE OVERFLOW FIXES
    Prevents long i18n strings (Deutsch / Zange)

public/s/js/f0ckm.js

@@ -2438,7 +2438,7 @@ window.cancelAnimFrame = (function () {
     const isAdmin = !!pathname.match(/^\/admin/);
     const isMod = !!pathname.match(/^\/mod/);
     const isSettings = pathname.match(/\/settings\/?(?:$|\?)/);
-    const isStatic = pathname.match(/\/(about|rules|terms|upload|subscriptions|stats|docs|discord|ranking|meme|memes)($|\/|\?)/);
+    const isStatic = pathname.match(/\/(about|rules|terms|upload|subscriptions|stats|docs|discord|ranking|meme|memes|chat)($|\/|\?)/);
     const isUpload = pathname.match(/\/upload\/?(?:$|\?)/);
     const parts = pathname.split('/').filter(Boolean);
     const isItem = !pathname.match(/\/p\//) && (
@@ -2446,8 +2446,9 @@ window.cancelAnimFrame = (function () {
       (parts.length >= 3 && (parts[0] === 'tag' || parts[0] === 'user' || parts[0] === 'h') && /^\d+$/.test(parts[parts.length - 1]))
     );
     const isMessages = !!pathname.match(/^\/messages(\/|$)/);
+    const isChat     = !!pathname.match(/^\/chat(\/|$)/);
     const isAbyss    = !!pathname.match(/^\/abyss(\/|$|\?|#)/) || pathname === '/abyss';
-    const isGrid = !isProfile && !isUserHall && !isUserHalls && !isHall && !isHalls && !isTags && !isComments && !isNotifs && !isItem && !isAdmin && !isMod && !isSettings && !isStatic && !isUpload && !isMessages && !isAbyss;
+    const isGrid = !isProfile && !isUserHall && !isUserHalls && !isHall && !isHalls && !isTags && !isComments && !isNotifs && !isItem && !isAdmin && !isMod && !isSettings && !isStatic && !isUpload && !isMessages && !isChat && !isAbyss;
 
     if (isItem) {
        isNavigating = false;
@@ -4079,7 +4080,7 @@ window.cancelAnimFrame = (function () {
         return false;
       }
 
-      if (!isSpecialLink && (pathname === '/' || pathname.startsWith('/halls') || pathname.startsWith('/h/') || pathname.startsWith('/notifications') || pathname.startsWith('/tag') || pathname.startsWith('/user/') || pathname.match(/^\/(image|video|audio)/) || pathname.match(/\/p\/\d+/) || pathname.match(/^\/\d+/) || pathname.match(/^\/(about|rules|terms|upload|subscriptions|stats|docs|settings|admin|mod|ranking|messages|meme|memes)/) || pathname.startsWith('/abyss'))) {
+      if (!isSpecialLink && (pathname === '/' || pathname.startsWith('/halls') || pathname.startsWith('/h/') || pathname.startsWith('/notifications') || pathname.startsWith('/tag') || pathname.startsWith('/user/') || pathname.match(/^\/(image|video|audio)/) || pathname.match(/\/p\/\d+/) || pathname.match(/^\/\d+/) || pathname.match(/^\/(about|rules|terms|upload|subscriptions|stats|docs|settings|admin|mod|ranking|messages|meme|memes|chat)/) || pathname.startsWith('/abyss'))) {
         e.preventDefault();
         e.stopImmediatePropagation();
 
@@ -4533,7 +4534,7 @@ window.cancelAnimFrame = (function () {
       (parts.length >= 3 && parts[0] === 'tag' && /^\d+$/.test(parts[parts.length - 1])) ||
       (parts.length >= 3 && parts[0] === 'user' && /^\d+$/.test(parts[parts.length - 1]))
     );
-    const isSpecial = p.startsWith('/notifications') || p.startsWith('/tags') || p.startsWith('/user/') || p.startsWith('/subscriptions') || p.startsWith('/ranking');
+    const isSpecial = p.startsWith('/notifications') || p.startsWith('/tags') || p.startsWith('/user/') || p.startsWith('/subscriptions') || p.startsWith('/ranking') || p.startsWith('/chat');
     const isGridLike = url.match(/\/p\/\d+/) || url.match(/[?&]page=\d+/) || p === '/';
 
     window.f0ckDebug("[popstate] Navigation to:", url, { isItem, isSpecial, isGridLike });

src/inc/locales/de.json

@@ -4,6 +4,7 @@
     "meme": "Meme",
     "halls": "Hallen",
     "tags": "Tags",
+    "chat": "Chat",
     "search": "Suchen",
     "random": "Zufall",
     "profile": "Profil",

src/inc/locales/en.json

@@ -4,6 +4,7 @@
     "meme": "Meme",
     "halls": "Halls",
     "tags": "Tags",
+    "chat": "Chat",
     "search": "Search",
     "random": "Random",
     "profile": "Profile",

src/inc/locales/nl.json

@@ -4,6 +4,7 @@
     "meme": "meme",
     "halls": "Hallen",
     "tags": "Tags",
+    "chat": "Chat",
     "search": "Zoeken",
     "random": "Willekeurig",
     "profile": "profiel",

src/inc/locales/zange.json

@@ -4,6 +4,7 @@
     "meme": "Memen",
     "halls": "Hallen",
     "tags": "Etiketten",
+    "chat": "Geschwafel",
     "search": "Suche",
     "random": "Zufall",
     "profile": "Profil",

src/inc/routes/chat.mjs

@@ -47,6 +47,25 @@ function buildBgHostRegex() {
 
 export default (router, tpl) => {
 
+    // GET /chat — Dedicated site chat page
+    router.get('/chat', async (req, res) => {
+        if (!cfg.websrv.enable_global_chat) {
+            return res.reply({ code: 404, body: 'Not found' });
+        }
+        if (!req.session) {
+            return res.redirect('/login');
+        }
+        if (req.session.banned) {
+            return res.reply({ code: 403, body: 'Access denied: You are banned' });
+        }
+        return res.html(tpl.render('chat', {
+            session: req.session,
+            hidePagination: true,
+            link: { main: '/chat', path: '/chat' },
+            domain: cfg.main.url.domain
+        }, req));
+    });
+
     // GET /api/chat — fetch recent messages
     router.get('/api/chat', async (req, res) => {
         if (!cfg.websrv.enable_global_chat) {

views/chat.html

@@ -0,0 +1,9 @@
+@include(snippets/header)
+<div class="pagewrapper">
+<div id="main" class="chat-page">
+    <div id="site-chat-container" class="site-chat-container">
+        <!-- Site chat widget is mounted here by globalchat.js -->
+    </div>
+</div>
+</div>
+@include(snippets/footer)

views/snippets/navbar.html

@@ -26,6 +26,9 @@
         </div>
         @endif
         <a href="/tags" title="{{ t('nav.tags') }}"><i class="fa-solid fa-tags"></i></a>
+        @if(enable_global_chat)
+        <a href="/chat" title="{{ t('nav.chat') }}"><i class="fa-solid fa-comments"></i></a>
+        @endif
         @if(abyss_enabled)
         <a href="/abyss" title="{{ t('nav.abyss') }}"><i class="fa-solid fa-dice-d6"></i></a>
         @endif