Load commenting components based on seed flag

Set loadCommenting in the seed config for preview mode so the
frontend dynamically imports commenting components after
hydration. Review translations are now derived from the same
flag. This allows server-side gating of commenting via the
seed options.

REDMINE-21261

Author: tf

entry_types/scrolled/app/controllers/pageflow_scrolled/entries_controller.rb

@@ -15,19 +15,30 @@ class EntriesController < ActionController::Base
 
     def show
       entry = get_published_entry_from_env
+      mode = get_entry_mode_from_env
 
       I18n.locale = entry.locale
 
       render(
         locals: {
           entry:,
-          entry_mode: get_entry_mode_from_env,
-          seed_options: {
-            embed: get_embed_from_env,
-            origin_url: request.original_url
-          }
+          entry_mode: mode,
+          seed_options: seed_options(mode)
         }
       )
     end
+
+    private
+
+    def seed_options(mode)
+      options = {
+        embed: get_embed_from_env,
+        origin_url: request.original_url
+      }
+
+      options[:load_commenting] = true if mode == :preview
+
+      options
+    end
   end
 end

entry_types/scrolled/app/helpers/pageflow_scrolled/i18n_helper.rb

@@ -1,16 +1,28 @@
 module PageflowScrolled
   # @api private
   module I18nHelper
-    def scrolled_i18n_translations(entry, include_inline_editing: false)
+    def scrolled_i18n_translations(entry,
+                                   include_inline_editing: false,
+                                   include_review: false)
       result = scrolled_i18n_public_translations(entry)
 
-      return result unless include_inline_editing
+      if include_inline_editing
+        result = result.deep_merge(I18n.locale.to_s => {
+                                     pageflow_scrolled: {
+                                       inline_editing: I18n.t('pageflow_scrolled.inline_editing')
+                                     }
+                                   })
+      end
 
-      result.deep_merge(I18n.locale.to_s => {
-                          pageflow_scrolled: {
-                            inline_editing: I18n.t('pageflow_scrolled.inline_editing')
-                          }
-                        })
+      if include_review
+        result = result.deep_merge(I18n.locale.to_s => {
+                                     pageflow_scrolled: {
+                                       review: I18n.t('pageflow_scrolled.review')
+                                     }
+                                   })
+      end
+
+      result
     end
 
     private

entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder

@@ -54,6 +54,7 @@ json.config do
   json.embed options.fetch(:embed, false)
   json.origin_url options[:origin_url] if options[:origin_url]
   json.load_inline_editing true if options[:load_inline_editing]
+  json.load_commenting true if options[:load_commenting]
 end
 
 unless options[:skip_i18n]
@@ -62,7 +63,8 @@ unless options[:skip_i18n]
     json.locale I18n.locale
     json.translations scrolled_i18n_translations(
       entry,
-      include_inline_editing: !!options[:load_inline_editing]
+      include_inline_editing: !!options[:load_inline_editing],
+      include_review: !!options[:load_commenting]
     )
   end
 end

entry_types/scrolled/config/locales/de.yml

@@ -1909,3 +1909,5 @@ de:
       content_element_margin_top: Oberer Außenabstand
       content_element_margin_bottom: Unterer Außenabstand
       expose_motif_area: Motiv freilegen
+    review:
+      toolbar_label: Kommentare

entry_types/scrolled/config/locales/en.yml

@@ -1738,3 +1738,5 @@ en:
       content_element_margin_top: Top margin
       content_element_margin_bottom: Bottom margin
       expose_motif_area: Expose motif
+    review:
+      toolbar_label: Comments

entry_types/scrolled/package/src/frontend/commenting/EntryDecorator.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {FloatingToolbar} from './FloatingToolbar';
+
+export function EntryDecorator(props) {
+  return (
+    <>
+      {props.children}
+      <FloatingToolbar />
+    </>
+  );
+}

entry_types/scrolled/package/src/frontend/commenting/FloatingToolbar.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {useI18n} from '../i18n';
+import styles from './FloatingToolbar.module.css';
+
+export function FloatingToolbar() {
+  const {t} = useI18n({locale: 'ui'});
+
+  return (
+    <div className={styles.toolbar}>
+      {t('pageflow_scrolled.review.toolbar_label')}
+    </div>
+  );
+}

entry_types/scrolled/package/src/frontend/commenting/FloatingToolbar.module.css

@@ -0,0 +1,14 @@
+.toolbar {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  padding: 8px 16px;
+  background: #ffd24d;
+  color: #795f0f;
+  border-radius: 20px;
+  font-family: sans-serif;
+  font-size: 14px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}

entry_types/scrolled/package/src/frontend/commenting/index.js

@@ -0,0 +1,8 @@
+import {registerDecorators} from '../decoratorRegistry';
+import {EntryDecorator} from './EntryDecorator';
+
+export function loadCommentingComponents() {
+  registerDecorators('commenting', {
+    EntryDecorator
+  });
+}

entry_types/scrolled/package/src/frontend/index.js

@@ -169,6 +169,12 @@ global.pageflowScrolledRender = async function(seed) {
   }
 
   render(seed);
+
+  if (seed.config.loadCommenting) {
+    import(/* webpackPreload: true */ './commenting').then(
+      ({loadCommentingComponents}) => loadCommentingComponents()
+    );
+  }
 }
 
 global.pageflowScrolledRegisterUpdateSeedHandler = function() {