From 1b9ecea44396d71d2ae7d7fadb3f28ab89d5b585 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Fri, 7 Jun 2024 11:51:32 +0200
Subject: [PATCH] Custom channel emoticons WIP (#130): tabs

---
 CHANGELOG.md                                  |  1 +
 assets/styles/configuration.scss              |  6 +++
 client/@types/global.d.ts                     |  1 +
 .../elements/channel-configuration.ts         | 11 +++--
 .../configuration/elements/channel-emojis.ts  | 11 +++--
 .../configuration/elements/channel-tabs.ts    | 40 +++++++++++++++++++
 client/common/configuration/elements/index.js |  1 +
 languages/en.yml                              |  4 ++
 8 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 client/common/configuration/elements/channel-tabs.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 81c9a60c..38ee5081 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,5 @@
 TODO: tag conversejs livechat branch, and replace commit ID in build-converse.js
+TODO: check that the help url is ok for the emojis configuration page.
 
 # Changelog
 
diff --git a/assets/styles/configuration.scss b/assets/styles/configuration.scss
index db8dadf4..92593965 100644
--- a/assets/styles/configuration.scss
+++ b/assets/styles/configuration.scss
@@ -33,6 +33,12 @@ $small-view: 800px;
     font-size: 1.3rem;
     border-bottom: 2px solid $grey-background-color;
     padding-bottom: 15px;
+  }
+
+  livechat-channel-tabs {
+    display: block;
+
+    /* See Peertube sub-menu-h1 mixin */
     margin-bottom: $sub-menu-margin-bottom;
   }
 
diff --git a/client/@types/global.d.ts b/client/@types/global.d.ts
index 9f9eba94..a5fa876e 100644
--- a/client/@types/global.d.ts
+++ b/client/@types/global.d.ts
@@ -95,6 +95,7 @@ declare const LOC_CHATROOM_NOT_ACCESSIBLE: string
 declare const LOC_PROMOTE: string
 
 declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_EMOJIS_TITLE: string
+declare const LOC_LIVECHAT_CONFIGURATION_CHANNEL_EMOJIS_DESC: string
 declare const LOC_LIVECHAT_EMOJIS_SHORTNAME: string
 declare const LOC_LIVECHAT_EMOJIS_SHORTNAME_DESC: string
 declare const LOC_LIVECHAT_EMOJIS_FILE: string
diff --git a/client/common/configuration/elements/channel-configuration.ts b/client/common/configuration/elements/channel-configuration.ts
index 7aa1edac..20b32c9a 100644
--- a/client/common/configuration/elements/channel-configuration.ts
+++ b/client/common/configuration/elements/channel-configuration.ts
@@ -209,15 +209,20 @@ export class ChannelConfigurationElement extends LivechatElement {
         <div class="margin-content peertube-plugin-livechat-configuration
                     peertube-plugin-livechat-configuration-channel">
           <h1>
-            ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_TITLE)}:
             <span class="peertube-plugin-livechat-configuration-channel-info">
               <span>${this._channelConfiguration?.channel.displayName}</span>
               <span>${this._channelConfiguration?.channel.name}</span>
             </span>
+          </h1>
+
+          <livechat-channel-tabs .active=${'configuration'} .channelId=${this.channelId}></livechat-channel-tabs>
+
+          <p>
+            ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_DESC)}
             <livechat-help-button .page=${'documentation/user/streamers/channel'}>
             </livechat-help-button>
-          </h1>
-          <p>${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_DESC)}</p>
+          </p>
+
           <form livechat-configuration-channel-options role="form" @submit=${this._saveConfig}>
           <div class="row mt-3">
             <div class="row mt-5">
diff --git a/client/common/configuration/elements/channel-emojis.ts b/client/common/configuration/elements/channel-emojis.ts
index a7f23ba4..2c97746f 100644
--- a/client/common/configuration/elements/channel-emojis.ts
+++ b/client/common/configuration/elements/channel-emojis.ts
@@ -65,15 +65,20 @@ export class ChannelEmojisElement extends LivechatElement {
           class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-channel"
         >
           <h1>
-            ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_EMOJIS_TITLE)}:
             <span class="peertube-plugin-livechat-configuration-channel-info">
               <span>${this._channelEmojisConfiguration?.channel.displayName}</span>
               <span>${this._channelEmojisConfiguration?.channel.name}</span>
             </span>
+          </h1>
+
+          <livechat-channel-tabs .active=${'emojis'} .channelId=${this.channelId}></livechat-channel-tabs>
+
+          <p>
+            ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_EMOJIS_DESC)}
             <livechat-help-button .page=${'documentation/user/streamers/emojis'}>
             </livechat-help-button>
-            FIXME: help url OK?
-          </h1>
+          </p>
+
           <form role="form" @submit=${this._saveEmojis}>
             <div class="row mt-5">
               <livechat-dynamic-table-form
diff --git a/client/common/configuration/elements/channel-tabs.ts b/client/common/configuration/elements/channel-tabs.ts
new file mode 100644
index 00000000..ca9e6c7c
--- /dev/null
+++ b/client/common/configuration/elements/channel-tabs.ts
@@ -0,0 +1,40 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { RegisterClientOptions } from '@peertube/peertube-types/client'
+import { registerClientOptionsContext } from '../../lib/contexts/peertube'
+import { LivechatElement } from '../../lib/elements/livechat'
+import { ptTr } from '../../lib/directives/translation'
+import { html, TemplateResult } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { consume } from '@lit/context'
+
+@customElement('livechat-channel-tabs')
+export class ChannelHomeElement extends LivechatElement {
+  @consume({ context: registerClientOptionsContext, subscribe: true })
+  public registerClientOptions?: RegisterClientOptions
+
+  @property({ attribute: false })
+  public channelId?: number
+
+  @property({ attribute: false })
+  public active?: string
+
+  protected override render = (): TemplateResult => {
+    return html`
+      <a
+        class="sub-menu-entry ${this.active === 'configuration' ? 'active' : ''}"
+        href=${'/p/livechat/configuration/channel?channelId=' + encodeURIComponent(this.channelId ?? '')}
+      >
+        ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_TITLE)}
+      </a>
+      <a
+        class="sub-menu-entry ${this.active === 'emojis' ? 'active' : ''}"
+        href=${'/p/livechat/configuration/emojis?channelId=' + encodeURIComponent(this.channelId ?? '')}
+      >
+        ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_EMOJIS_TITLE)}
+      </a>
+    `
+  }
+}
diff --git a/client/common/configuration/elements/index.js b/client/common/configuration/elements/index.js
index a98fb421..8df7d4ea 100644
--- a/client/common/configuration/elements/index.js
+++ b/client/common/configuration/elements/index.js
@@ -7,3 +7,4 @@
 import './channel-home'
 import './channel-configuration'
 import './channel-emojis'
+import './channel-tabs'
diff --git a/languages/en.yml b/languages/en.yml
index 698227ec..56dea6f9 100644
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -480,6 +480,10 @@ task_list_pick_message: |
 promote: 'Become moderator'
 
 livechat_configuration_channel_emojis_title: 'Channel emojis'
+livechat_configuration_channel_emojis_desc: |
+  You can configure custom emojis for your channel.
+  These emojis will be available in the emoji picker.
+  Users can also use them by with their short name (for example by writing ":shortname:").
 livechat_emojis_shortname: 'Short name'
 livechat_emojis_shortname_desc: |
   You can use emojis using ":shortname:".