refactor(portal): promote canvas glue to shared Portal.view.content (#12206) (#12224)

Co-authored-by: tobiu <tobiasuhlig78@gmail.com>

Author: neo-opus-ada

…rtal/view/news/tickets/CanvasWrapper.mjs …ps/portal/view/content/CanvasWrapper.mjsapps/portal/view/news/tickets/CanvasWrapper.mjs renamed to apps/portal/view/content/CanvasWrapper.mjs apps/portal/view/news/tickets/CanvasWrapper.mjs renamed to apps/portal/view/content/CanvasWrapper.mjs

@@ -1,26 +1,25 @@
-import Container        from '../../../../../src/container/Base.mjs';
-import ContentComponent from './Component.mjs';
-import TimelineCanvas   from './TimelineCanvas.mjs';
+import Container      from '../../../../../src/container/Base.mjs';
+import TimelineCanvas from './TimelineCanvas.mjs';
 
 /**
- * @class Portal.view.news.tickets.CanvasWrapper
+ * @class Portal.view.content.CanvasWrapper
  * @extends Neo.container.Base
  */
 class CanvasWrapper extends Container {
     static config = {
         /**
-         * @member {String} className='Portal.view.news.tickets.CanvasWrapper'
+         * @member {String} className='Portal.view.content.CanvasWrapper'
          * @protected
          */
-        className: 'Portal.view.news.tickets.CanvasWrapper',
+        className: 'Portal.view.content.CanvasWrapper',
         /**
          * @member {String[]} cls=['portal-canvas-wrapper']
          */
         cls: ['portal-canvas-wrapper'],
         /**
-         * @member {Neo.component.Base|null} contentComponent=ContentComponent
+         * @member {Neo.component.Base|null} contentComponent=null
          */
-        contentComponent: ContentComponent,
+        contentComponent: null,
         /**
          * @member {Object} layout=null
          */

…tal/view/news/tickets/TimelineCanvas.mjs …s/portal/view/content/TimelineCanvas.mjsapps/portal/view/news/tickets/TimelineCanvas.mjs renamed to apps/portal/view/content/TimelineCanvas.mjs apps/portal/view/news/tickets/TimelineCanvas.mjs renamed to apps/portal/view/content/TimelineCanvas.mjs

@@ -3,15 +3,15 @@ import SharedCanvas from '../../../../../src/app/SharedCanvas.mjs';
 /**
  * @summary The "Coordinator" component for the Neural Timeline, bridging the App Worker and Canvas Worker.
  *
- * This component renders a transparent canvas overlay on top of the Ticket List. It is responsible for:
- * 1. **Data Bridge**: Listening to the `sections` store and passing ticket data to the `TimelineCanvas` (SharedWorker).
+ * This component renders a transparent canvas overlay on top of the content list. It is responsible for:
+ * 1. **Data Bridge**: Listening to the `sections` store and passing record data to the `TimelineCanvas` (SharedWorker).
  * 2. **Visual Alignment**: Calculating the precise DOM positions of Ticket Avatars/Badges to ensure the
  *    canvas nodes align perfectly with the HTML content.
  * 3. **Lifecycle Management**: initializing the offscreen canvas transfer and handling resize events.
  *
  * It uses the `Portal.canvas.TimelineCanvas` singleton (via Remote Method Access) to drive the actual animation.
  *
- * @class Portal.view.news.tickets.TimelineCanvas
+ * @class Portal.view.content.TimelineCanvas
  * @extends Neo.app.SharedCanvas
  */
 class TimelineCanvas extends SharedCanvas {
@@ -27,10 +27,10 @@ class TimelineCanvas extends SharedCanvas {
 
     static config = {
         /**
-         * @member {String} className='Portal.view.news.tickets.TimelineCanvas'
+         * @member {String} className='Portal.view.content.TimelineCanvas'
          * @protected
          */
-        className: 'Portal.view.news.tickets.TimelineCanvas',
+        className: 'Portal.view.content.TimelineCanvas',
         /**
          * @member {String} rendererClassName='Portal.canvas.TimelineCanvas'
          */
@@ -43,7 +43,7 @@ class TimelineCanvas extends SharedCanvas {
          * @member {Object} _vdom
          */
         _vdom:
-        {tag: 'div', cls: ['neo-ticket-timeline-wrapper'], style: {width: '100%', height: '100%'}, cn: [
+        {tag: 'div', cls: ['neo-timeline-wrapper'], style: {width: '100%', height: '100%'}, cn: [
             {tag: 'canvas', style: {width: '100%', height: '100%'}}
         ]}
     }
@@ -143,7 +143,7 @@ class TimelineCanvas extends SharedCanvas {
      * This method synchronizes the Canvas nodes with the DOM elements (Avatars/Badges).
      *
      * **Strategy:**
-     * 1. **Targeting**: It uses the `-target` ID suffix to find the specific DOM elements (Avatars) within the ticket list.
+     * 1. **Targeting**: It uses the `-target` ID suffix to find the specific DOM elements (Avatars) within the content list.
      * 2. **Measurement**: It fetches the `DOMRect` for every target to get its exact screen position.
      * 3. **Translation**: It converts these screen coordinates into Canvas-local coordinates.
      * 4. **Handoff**: It packages this geometric data (x, y, radius, color) and sends it to the

apps/portal/view/news/tickets/MainContainer.mjs

@@ -1,4 +1,5 @@
-import CanvasWrapper    from './CanvasWrapper.mjs';
+import CanvasWrapper    from '../../content/CanvasWrapper.mjs';
+import Component        from './Component.mjs';
 import Controller       from './MainContainerController.mjs';
 import PageContainer    from './PageContainer.mjs';
 import SharedContainer  from '../../../../../src/app/content/Container.mjs';
@@ -32,7 +33,8 @@ class MainContainer extends SharedContainer {
             module         : PageContainer,
             buttonTextField: 'id',
             contentConfig  : {
-                module: CanvasWrapper
+                contentComponent: Component,
+                module          : CanvasWrapper
             }
         },
         /**