openvibers/openvibe.live Commits

Popout chat: load cosmetics/chat-shared CSS and stop pinning stale asset versions

OP OpenVibers committed 27 Aug 2026 · e887bcbf14 · 1 file, +9 −4

The "broken badges" beside a fresh message were particle-cosmetic spans:
cosmetics.css (which positions and animates them) was never loaded by the
popout, so they sat inline as plain emojis until their 2.2s cleanup timer.
The popout now loads the same stylesheets as index.html — and its asset
version pins had drifted badly (style.css v61 vs v135, app.js v52 vs
v125, chat.js on a whole separate numbering), meaning popout users could
run week-old cached JS against the current backend. Versions are unified
with index.html; keep them in step when bumping.

Co-Authored-By: Claude Fable 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_017AyeSFu7qdLdR64Zv99QNm

Changes

ddiff --git a/public/popout-chat.html b/public/popout-chat.html
iindex 238c9f2b..dcf4594c 100644
---- a/public/popout-chat.html
++++ b/public/popout-chat.html
@@@ -4,7 +4,12 @@
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Chat — OpenVibe.Live</title>
--    <link rel="stylesheet" href="/css/style.css?v=61">
++    <!-- Keep these in step with index.html — the popout renders the same chat
++         components (cosmetics.css positions particle effects; without it they sit
++         inline next to the username as "broken badges" until their cleanup timer). -->
++    <link rel="stylesheet" href="/css/style.css?v=135">
++    <link rel="stylesheet" href="/css/chat-shared.css?v=1">
++    <link rel="stylesheet" href="/css/cosmetics.css?v=2">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
      <style>
          html, body { height: 100%; margin: 0; overflow: hidden; }
@@@ -221,14 +226,14 @@
  
      <!-- Chat feature scripts — mirror index.html so the popout has full parity.
           Order: dependencies (app/emotes/gif/uploads/coins/bucks/cosmetics) before chat.js. -->
--    <script src="/js/app.js?v=52"></script>
++    <script src="/js/app.js?v=125"></script>
      <script src="/js/emotes.js?v=8"></script>
      <script src="/js/gif-picker.js?v=1"></script>
--    <script src="/js/channel-uploads.js?v=6"></script>
++    <script src="/js/channel-uploads.js?v=12"></script>
      <script src="/js/vibes.js?v=8"></script>
      <script src="/js/opencoins.js?v=6"></script>
      <script src="/js/cosmetics-ui.js?v=2"></script>
--    <script src="/js/chat.js?v=43"></script>
++    <script src="/js/chat.js?v=73"></script>
      <script src="/js/chat-autocomplete.js?v=1"></script>
      <script>
      'use strict';