From 47b580d132d81b63b767f81a26032a5577cb0bf9 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Fri, 7 Jun 2024 12:02:50 +0200
Subject: [PATCH] Custom channel emoticons WIP (#130)

---
 assets/styles/configuration.scss              |  4 ++++
 .../configuration/elements/channel-emojis.ts  |  3 ++-
 .../common/lib/elements/dynamic-table-form.ts | 22 +++++++++++++------
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/assets/styles/configuration.scss b/assets/styles/configuration.scss
index 92593965..0c777ac5 100644
--- a/assets/styles/configuration.scss
+++ b/assets/styles/configuration.scss
@@ -216,6 +216,10 @@ $small-view: 800px;
       }
     }
   }
+
+  .peertube-livechat-emojis-thead-file {
+    min-width: 400px;
+  }
 }
 
 livechat-dynamic-table-form {
diff --git a/client/common/configuration/elements/channel-emojis.ts b/client/common/configuration/elements/channel-emojis.ts
index 2c97746f..c7c46c8d 100644
--- a/client/common/configuration/elements/channel-emojis.ts
+++ b/client/common/configuration/elements/channel-emojis.ts
@@ -45,7 +45,8 @@ export class ChannelEmojisElement extends LivechatElement {
       },
       url: {
         colName: ptTr(LOC_LIVECHAT_EMOJIS_FILE),
-        description: ptTr(LOC_LIVECHAT_EMOJIS_FILE_DESC)
+        description: ptTr(LOC_LIVECHAT_EMOJIS_FILE_DESC),
+        headerClassList: ['peertube-livechat-emojis-thead-file']
       }
     }
     const tableSchema: DynamicFormSchema = {
diff --git a/client/common/lib/elements/dynamic-table-form.ts b/client/common/lib/elements/dynamic-table-form.ts
index 8dd0c73c..8214865d 100644
--- a/client/common/lib/elements/dynamic-table-form.ts
+++ b/client/common/lib/elements/dynamic-table-form.ts
@@ -78,11 +78,14 @@ interface DynamicTableRowData {
   row: { [key: string]: DynamicTableAcceptedTypes }
 }
 
+interface DynamicFormHeaderCellData {
+  colName: TemplateResult | DirectiveResult
+  description: TemplateResult | DirectiveResult
+  headerClassList?: string[]
+}
+
 export interface DynamicFormHeader {
-  [key: string]: {
-    colName: TemplateResult | DirectiveResult
-    description: TemplateResult | DirectiveResult
-  }
+  [key: string]: DynamicFormHeaderCellData
 }
 export interface DynamicFormSchema { [key: string]: CellDataSchema }
 
@@ -197,10 +200,15 @@ export class DynamicTableFormElement extends LivechatElement {
     </thead>`
   }
 
-  private readonly _renderHeaderCell = (headerCellData: { colName: TemplateResult | DirectiveResult
-    description: TemplateResult | DirectiveResult }): TemplateResult => {
+  private readonly _renderHeaderCell = (headerCellData: DynamicFormHeaderCellData): TemplateResult => {
     return html`<th scope="col">
-      <div data-toggle="tooltip" data-placement="bottom" data-html="true" title=${headerCellData.description}>
+      <div
+        data-toggle="tooltip"
+        data-placement="bottom"
+        data-html="true"
+        title=${headerCellData.description}
+        class=${headerCellData.headerClassList?.join(' ') ?? ''}
+      >
         ${headerCellData.colName}
       </div>
     </th>`