Change function names and fix ui when report button is also visible

ui/analyse/src/view/components.ts

@@ -385,7 +385,7 @@ export const addChapterId = (study: StudyCtrl | undefined, cssClass: string) =>
   cssClass + (study && study.data.chapter ? '.' + study.data.chapter.id : '');
 
 function broadcastChatHandler(ctrl: AnalyseCtrl): BroadcastChatHandler {
-  const encode = (text: string): string => {
+  const encodeMsg = (text: string): string => {
     if (ctrl.study?.relay && !ctrl.study.relay.tourShow()) {
       const chapterId = ctrl.study.currentChapter().id;
       const ply = ctrl.study.currentNode().ply;
@@ -394,12 +394,14 @@ function broadcastChatHandler(ctrl: AnalyseCtrl): BroadcastChatHandler {
     }
     return text;
   };
-  const getClearedText = (msg: string): string => {
+
+  const cleanMsg = (msg: string): string => {
     if (msg.includes('\ue666') && ctrl.study?.relay) {
       return msg.split('\ue666')[0];
     }
     return msg;
   };
+
   const jumpToMove = (msg: string): void => {
     if (msg.includes('\ue666') && ctrl.study?.relay) {
       const segs = msg.split('\ue666');
@@ -410,15 +412,21 @@ function broadcastChatHandler(ctrl: AnalyseCtrl): BroadcastChatHandler {
       }
     }
   };
-  const canJumpToMove = (msg: string): boolean => {
-    if (msg.includes('\ue666') && ctrl.study?.relay && msg.split('\ue666').length === 3) {
-      return true;
+
+  const canJumpToMove = (msg: string): string | null => {
+    if (msg.includes('\ue666') && ctrl.study?.relay) {
+      const segs = msg.split('\ue666');
+      if (segs.length == 3) {
+        const [_, chapterId, ply] = segs;
+        return `${chapterId}#${ply}`;
+      }
     }
-    return false;
+    return null;
   };
+
   return {
-    encode,
-    getClearedText,
+    encodeMsg,
+    cleanMsg,
     jumpToMove,
     canJumpToMove,
   };

ui/chat/css/_discussion.scss

@@ -78,12 +78,7 @@
 
     action {
       display: none;
-      position: absolute;
-      top: 5px;
-      @include inline-end(0);
       cursor: pointer;
-      margin-inline-end: 3px;
-      padding: 1px 5px;
       opacity: 0.7;
       color: $c-accent;
 
@@ -112,11 +107,17 @@
   }
 
   a.jump {
-    position: absolute;
-    top: 5px;
     font-size: medium;
-    @include inline-end(5px);
     cursor: pointer;
+  }
+
+  div.actions {
+    position: absolute;
+    @include inline-end(0);
+    display: flex;
+    flex-direction: row;
+    top: 5px;
+    gap: 6px;
     margin-inline-end: 3px;
     padding: 1px 5px;
   }

ui/chat/src/ctrl.ts

@@ -101,13 +101,13 @@ export default class ChatCtrl {
     text = text.trim();
     if (!text) return false;
     if (text == 'You too!' && !this.data.lines.some(l => l.u != this.data.userId)) return false;
-    if (text.length > 125) {
-      alert('Max length: 125 chars. ' + text.length + ' chars used.');
+    if (text.length > 140) {
+      alert('Max length: 140 chars. ' + text.length + ' chars used.');
       return false;
     }
     if (text.includes('\ue666')) return false;
 
-    if (this.broadcastChatHandler) text = this.broadcastChatHandler.encode(text);
+    if (this.broadcastChatHandler) text = this.broadcastChatHandler.encodeMsg(text);
 
     site.pubsub.emit('socket.send', 'talk', text);
     return true;

ui/chat/src/discussion.ts

@@ -189,7 +189,7 @@ const userThunk = (name: string, title?: string, patron?: boolean, flair?: Flair
   userLink({ name, title, patron, line: !!patron, flair });
 
 function renderLine(ctrl: ChatCtrl, line: Line): VNode {
-  const textNode = renderText(ctrl.broadcastChatHandler?.getClearedText(line.t) || line.t, ctrl.opts.enhance);
+  const textNode = renderText(ctrl.broadcastChatHandler?.cleanMsg(line.t) || line.t, ctrl.opts.enhance);
 
   if (line.u === 'lichess') return h('li.system', textNode);
 
@@ -205,18 +205,21 @@ function renderLine(ctrl: ChatCtrl, line: Line): VNode {
       .match(enhance.userPattern)
       ?.find(mention => mention.trim().toLowerCase() == `@${ctrl.data.userId}`);
 
-  const jumpToPly = ctrl.broadcastChatHandler?.canJumpToMove(line.t)
+  const msgPly = ctrl.broadcastChatHandler?.canJumpToMove(line.t);
+
+  const jumpToPly = msgPly
     ? h(
         'a.jump',
         {
           hook: bind('click', ctrl.broadcastChatHandler.jumpToMove.bind(null, line.t)),
           attrs: {
-            title: `Jump to move ${line.chapterId}#${line.ply}`,
+            title: `Jump to move ${msgPly}`,
           },
         },
         '#',
       )
     : null;
+
   return h(
     'li',
     {
@@ -227,17 +230,19 @@ function renderLine(ctrl: ChatCtrl, line: Line): VNode {
       },
     },
     ctrl.moderation
-      ? [line.u ? modLineAction() : null, userNode, ' ', textNode, jumpToPly]
+      ? [h('div.actions', [line.u ? modLineAction() : null, jumpToPly]), userNode, ' ', textNode]
       : [
-          myUserId && line.u && myUserId != line.u
-            ? h('action.flag', {
-                attrs: { 'data-icon': licon.CautionTriangle, title: 'Report' },
-              })
-            : null,
+          h('div.actions', [
+            myUserId && line.u && myUserId != line.u
+              ? h('action.flag', {
+                  attrs: { 'data-icon': licon.CautionTriangle, title: 'Report' },
+                })
+              : null,
+            jumpToPly,
+          ]),
           userNode,
           ' ',
           textNode,
-          jumpToPly,
         ],
   );
 }

ui/chat/src/interfaces.ts

@@ -53,15 +53,13 @@ export interface Line {
   p?: boolean; // patron
   f?: Flair;
   title?: string;
-  chapterId?: string;
-  ply?: number;
 }
 
 export interface BroadcastChatHandler {
-  encode(text: string): string;
-  getClearedText(msg: string): string;
+  encodeMsg(text: string): string;
+  cleanMsg(msg: string): string;
   jumpToMove(msg: string): void;
-  canJumpToMove(msg: string): boolean;
+  canJumpToMove(msg: string): string | null;
 }
 
 export interface Permissions {