From 72c4b0804d9268a87e9e87f935ed6cd4da339bf4 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Wed, 12 Jun 2024 10:27:28 +0200
Subject: [PATCH] Better UI for channel configuration pages.

---
 assets/styles/configuration.scss              |  22 +-
 .../elements/channel-configuration.ts         | 297 ++++++++----------
 .../configuration/elements/channel-emojis.ts  |  90 +++---
 .../common/lib/elements/configuration-row.ts  |   7 +-
 .../common/lib/elements/dynamic-table-form.ts |   2 +-
 5 files changed, 203 insertions(+), 215 deletions(-)

diff --git a/assets/styles/configuration.scss b/assets/styles/configuration.scss
index f73e8ca8..42158745 100644
--- a/assets/styles/configuration.scss
+++ b/assets/styles/configuration.scss
@@ -22,6 +22,19 @@ $grey-background-color: var(--greyBackgroundColor);
 $sub-menu-margin-bottom: 30px;
 $small-view: 800px;
 
+livechat-help-button {
+  a {
+    height: 18px !important;
+    margin: 2px !important;
+    padding: 1px !important;
+  }
+
+  svg {
+    display: block;
+    height: auto;
+  }
+}
+
 /*
   These are styles to apply for the channel configuration pages.
 */
@@ -232,6 +245,7 @@ $small-view: 800px;
   }
 
   .peertube-plugin-livechat-configuration-actions {
+    margin-bottom: 1rem;
     text-align: right;
   }
 }
@@ -275,10 +289,6 @@ livechat-dynamic-table-form {
     }
   }
 
-  button {
-    padding: 2px !important;
-  }
-
   .dynamic-table-add-row {
     background-color: var(--bs-green);
 
@@ -462,3 +472,7 @@ livechat-image-file-input {
     max-height: 3em !important; // and no max-width
   }
 }
+
+livechat-configuration-row {
+  margin-top: 3rem;
+}
diff --git a/client/common/configuration/elements/channel-configuration.ts b/client/common/configuration/elements/channel-configuration.ts
index 2dfe5426..3d669cb2 100644
--- a/client/common/configuration/elements/channel-configuration.ts
+++ b/client/common/configuration/elements/channel-configuration.ts
@@ -251,178 +251,151 @@ export class ChannelConfigurationElement extends LivechatElement {
           </p>
 
           <form livechat-configuration-channel-options role="form" @submit=${this._saveConfig}>
-            <div class="row mt-5">
-              <div class="col-12 col-lg-4 col-xl-3">
-                <livechat-configuration-row
-                  .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)}
-                  .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_DESC, true)}
-                  .helpPage=${'documentation/user/streamers/slow_mode'}>
-                </livechat-configuration-row>
-              </div>
-              <div class="col-12 col-lg-8 col-xl-9">
-                <div class="form-group">
-                  <label>
-                    <input
-                      type="number"
-                      name="slowmode_duration"
-                      class="form-control ${classMap(this._getInputValidationClass('slowMode.duration'))}"
-                      min="0"
-                      max="1000"
-                      id="peertube-livechat-slowmode-duration"
-                      aria-describedby="peertube-livechat-slowmode-duration-feedback"
-                      @input=${(event: InputEvent) => {
-                          if (event?.target && this._channelConfiguration) {
-                            this._channelConfiguration.configuration.slowMode.duration =
-                              Number((event.target as HTMLInputElement).value)
-                          }
-                          this.requestUpdate('_channelConfiguration')
-                        }
-                      }
-                      value="${this._channelConfiguration?.configuration.slowMode.duration}"
-                    />
-                  </label>
-                  ${this._renderFeedback('peertube-livechat-slowmode-duration-feedback', 'slowMode.duration')}
-                </div>
-              </div>
-            </div>
-            <div class="row mt-5">
-              <div class="col-12 col-lg-4 col-xl-3">
-              <livechat-configuration-row
-                .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE)}
-                .description=${''}
-                .helpPage=${'documentation/user/streamers/channel'}>
-              </livechat-configuration-row>
-              </div>
-              <div class="col-12 col-lg-8 col-xl-9">
-                <div class="form-group">
-                  <label>
-                    <input
-                      type="checkbox"
-                      name="bot"
-                      id="peertube-livechat-bot"
-                      @input=${(event: InputEvent) => {
-                          if (event?.target && this._channelConfiguration) {
-                            this._channelConfiguration.configuration.bot.enabled =
-                              (event.target as HTMLInputElement).checked
-                          }
-                          this.requestUpdate('_channelConfiguration')
-                        }
-                      }
-                      value="1"
-                      ?checked=${this._channelConfiguration?.configuration.bot.enabled}
-                    />
-                    ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL)}
-                  </label>
-                </div>
-                ${this._channelConfiguration?.configuration.bot.enabled
-                ? html`<div class="form-group">
-                  <label for="peertube-livechat-bot-nickname">
-                    ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME)}
-                  </label>
-                  <input
-                    type="text"
-                    name="bot_nickname"
-                    class="form-control ${classMap(this._getInputValidationClass('bot.nickname'))}"
-                    id="peertube-livechat-bot-nickname"
-                    aria-describedby="peertube-livechat-bot-nickname-feedback"
-                    @input=${(event: InputEvent) => {
-                        if (event?.target && this._channelConfiguration) {
-                          this._channelConfiguration.configuration.bot.nickname =
-                          (event.target as HTMLInputElement).value
-                        }
-                        this.requestUpdate('_channelConfiguration')
+            <livechat-configuration-row
+              .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)}
+              .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_DESC, true)}
+              .helpPage=${'documentation/user/streamers/slow_mode'}>
+            </livechat-configuration-row>
+            <div class="form-group">
+              <label>
+                ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_SLOW_MODE_LABEL)}
+                <input
+                  type="number"
+                  name="slowmode_duration"
+                  class="form-control ${classMap(this._getInputValidationClass('slowMode.duration'))}"
+                  min="0"
+                  max="1000"
+                  id="peertube-livechat-slowmode-duration"
+                  aria-describedby="peertube-livechat-slowmode-duration-feedback"
+                  @input=${(event: InputEvent) => {
+                      if (event?.target && this._channelConfiguration) {
+                        this._channelConfiguration.configuration.slowMode.duration =
+                          Number((event.target as HTMLInputElement).value)
                       }
+                      this.requestUpdate('_channelConfiguration')
                     }
-                    value="${this._channelConfiguration?.configuration.bot.nickname}"
-                  />
-                  ${this._renderFeedback('peertube-livechat-bot-nickname-feedback', 'bot.nickname')}
-                </div>`
-                : ''
-              }
-              </div>
+                  }
+                  value="${this._channelConfiguration?.configuration.slowMode.duration ?? ''}"
+                />
+              </label>
+              ${this._renderFeedback('peertube-livechat-slowmode-duration-feedback', 'slowMode.duration')}
             </div>
+
+            <livechat-configuration-row
+              .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE)}
+              .description=${''}
+              .helpPage=${'documentation/user/streamers/channel'}>
+            </livechat-configuration-row>
+            <div class="form-group">
+              <label>
+                <input
+                  type="checkbox"
+                  name="bot"
+                  id="peertube-livechat-bot"
+                  @input=${(event: InputEvent) => {
+                      if (event?.target && this._channelConfiguration) {
+                        this._channelConfiguration.configuration.bot.enabled =
+                          (event.target as HTMLInputElement).checked
+                      }
+                      this.requestUpdate('_channelConfiguration')
+                    }
+                  }
+                  value="1"
+                  ?checked=${this._channelConfiguration?.configuration.bot.enabled}
+                />
+                ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_ENABLE_BOT_LABEL)}
+              </label>
+            </div>
+
             ${!this._channelConfiguration?.configuration.bot.enabled
-            ? ''
-            : html`
-              <div class="row mt-5">
-                <div class="col-12 col-lg-4 col-xl-3">
-                  <livechat-configuration-row
-                    .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL)}
-                    .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC)}
-                    .helpPage=${'documentation/user/streamers/bot/forbidden_words'}>
-                  </livechat-configuration-row>
-                </div>
-                <div class="col-12 col-lg-8 col-xl-9">
-                  <livechat-dynamic-table-form
-                    .header=${tableHeaderList.forbiddenWords}
-                    .schema=${tableSchema.forbiddenWords}
-                    .validation=${this._validationError?.properties}
-                    .validationPrefix=${'bot.forbiddenWords'}
-                    .rows=${this._channelConfiguration?.configuration.bot.forbiddenWords}
-                    @update=${(e: CustomEvent) => {
-                        if (this._channelConfiguration) {
-                          this._channelConfiguration.configuration.bot.forbiddenWords = e.detail
-                          this.requestUpdate('_channelConfiguration')
-                        }
+              ? ''
+              : html`<div class="form-group">
+                <label for="peertube-livechat-bot-nickname">
+                  ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME)}
+                </label>
+                <input
+                  type="text"
+                  name="bot_nickname"
+                  class="form-control ${classMap(this._getInputValidationClass('bot.nickname'))}"
+                  id="peertube-livechat-bot-nickname"
+                  aria-describedby="peertube-livechat-bot-nickname-feedback"
+                  @input=${(event: InputEvent) => {
+                      if (event?.target && this._channelConfiguration) {
+                        this._channelConfiguration.configuration.bot.nickname =
+                        (event.target as HTMLInputElement).value
                       }
+                      this.requestUpdate('_channelConfiguration')
                     }
-                    .formName=${'forbidden-words'}>
-                  </livechat-dynamic-table-form>
-                </div>
+                  }
+                  value="${this._channelConfiguration?.configuration.bot.nickname ?? ''}"
+                />
+                ${this._renderFeedback('peertube-livechat-bot-nickname-feedback', 'bot.nickname')}
               </div>
-              <div class="row mt-5">
-                <div class="col-12 col-lg-4 col-xl-3">
-                  <livechat-configuration-row
-                    .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL)}
-                    .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC)}
-                    .helpPage=${'documentation/user/streamers/bot/quotes'}>
-                  </livechat-configuration-row>
-                </div>
-                <div class="col-12 col-lg-8 col-xl-9">
-                  <livechat-dynamic-table-form
-                    .header=${tableHeaderList.quotes}
-                    .schema=${tableSchema.quotes}
-                    .validation=${this._validationError?.properties}
-                    .validationPrefix=${'bot.quotes'}
-                    .rows=${this._channelConfiguration?.configuration.bot.quotes}
-                    @update=${(e: CustomEvent) => {
-                        if (this._channelConfiguration) {
-                          this._channelConfiguration.configuration.bot.quotes = e.detail
-                          this.requestUpdate('_channelConfiguration')
-                        }
-                      }
+
+              <livechat-configuration-row
+                .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL)}
+                .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_DESC)}
+                .helpPage=${'documentation/user/streamers/bot/forbidden_words'}>
+              </livechat-configuration-row>
+              <livechat-dynamic-table-form
+                .header=${tableHeaderList.forbiddenWords}
+                .schema=${tableSchema.forbiddenWords}
+                .validation=${this._validationError?.properties}
+                .validationPrefix=${'bot.forbiddenWords'}
+                .rows=${this._channelConfiguration?.configuration.bot.forbiddenWords}
+                @update=${(e: CustomEvent) => {
+                    if (this._channelConfiguration) {
+                      this._channelConfiguration.configuration.bot.forbiddenWords = e.detail
+                      this.requestUpdate('_channelConfiguration')
                     }
-                    .formName=${'quote'}>
-                  </livechat-dynamic-table-form>
-                </div>
-              </div>
-              <div class="row mt-5">
-                <div class="col-12 col-lg-4 col-xl-3">
-                  <livechat-configuration-row
-                    .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_LABEL)}
-                    .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC)}
-                    .helpPage=${'documentation/user/streamers/bot/commands'}>
-                  </livechat-configuration-row>
-                </div>
-                <div class="col-12 col-lg-8 col-xl-9">
-                  <livechat-dynamic-table-form
-                    .header=${tableHeaderList.commands}
-                    .schema=${tableSchema.commands}
-                    .validation=${this._validationError?.properties}
-                    .validationPrefix=${'bot.commands'}
-                    .rows=${this._channelConfiguration?.configuration.bot.commands}
-                    @update=${(e: CustomEvent) => {
-                        if (this._channelConfiguration) {
-                          this._channelConfiguration.configuration.bot.commands = e.detail
-                          this.requestUpdate('_channelConfiguration')
-                        }
-                      }
+                  }
+                }
+                .formName=${'forbidden-words'}
+              ></livechat-dynamic-table-form>
+
+              <livechat-configuration-row
+                .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_LABEL)}
+                .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_QUOTE_DESC)}
+                .helpPage=${'documentation/user/streamers/bot/quotes'}>
+              </livechat-configuration-row>
+              <livechat-dynamic-table-form
+                .header=${tableHeaderList.quotes}
+                .schema=${tableSchema.quotes}
+                .validation=${this._validationError?.properties}
+                .validationPrefix=${'bot.quotes'}
+                .rows=${this._channelConfiguration?.configuration.bot.quotes}
+                @update=${(e: CustomEvent) => {
+                    if (this._channelConfiguration) {
+                      this._channelConfiguration.configuration.bot.quotes = e.detail
+                      this.requestUpdate('_channelConfiguration')
                     }
-                    .formName=${'command'}>
-                  </livechat-dynamic-table-form>
-                </div>
-              </div>
+                  }
+                }
+                .formName=${'quote'}
+              ></livechat-dynamic-table-form>
+
+              <livechat-configuration-row
+                .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_LABEL)}
+                .description=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_COMMAND_DESC)}
+                .helpPage=${'documentation/user/streamers/bot/commands'}>
+              </livechat-configuration-row>
+              <livechat-dynamic-table-form
+                .header=${tableHeaderList.commands}
+                .schema=${tableSchema.commands}
+                .validation=${this._validationError?.properties}
+                .validationPrefix=${'bot.commands'}
+                .rows=${this._channelConfiguration?.configuration.bot.commands}
+                @update=${(e: CustomEvent) => {
+                    if (this._channelConfiguration) {
+                      this._channelConfiguration.configuration.bot.commands = e.detail
+                      this.requestUpdate('_channelConfiguration')
+                    }
+                  }
+                }
+                .formName=${'command'}
+              ></livechat-dynamic-table-form>
             `}
+
             <div class="form-group mt-5">
               <button type="reset" @click=${this._reset} ?disabled=${this._actionDisabled}>
                 ${ptTr(LOC_CANCEL)}
diff --git a/client/common/configuration/elements/channel-emojis.ts b/client/common/configuration/elements/channel-emojis.ts
index 876111da..cb4ac3ac 100644
--- a/client/common/configuration/elements/channel-emojis.ts
+++ b/client/common/configuration/elements/channel-emojis.ts
@@ -93,55 +93,55 @@ export class ChannelEmojisElement extends LivechatElement {
             </livechat-help-button>
           </p>
 
-          <div class="peertube-plugin-livechat-configuration-actions">
-            ${
-              this._channelEmojisConfiguration?.emojis?.customEmojis?.length
-                ? html`
-                <button
-                  @click=${this._exportEmojis}
-                  ?disabled=${this._actionDisabled}
-                >
-                  ${ptTr(LOC_ACTION_EXPORT)}
-                </button>`
-                : ''
-            }
-            ${
-              (this._channelEmojisConfiguration?.emojis?.customEmojis?.length ?? 0) < maxEmojisPerChannel
-                ? html`
-                <button
-                  @click=${this._importEmojis}
-                  ?disabled=${this._actionDisabled}
-                >
-                  ${ptTr(LOC_ACTION_IMPORT)}
-                </button>`
-                : ''
-            }
-          </div>
-
+          
           <form role="form" @submit=${this._saveEmojis}>
-            <div class="row mt-5">
-              <livechat-dynamic-table-form
-                .header=${tableHeaderList}
-                .schema=${tableSchema}
-                .maxLines=${maxEmojisPerChannel}
-                .validation=${this._validationError?.properties}
-                .validationPrefix=${'emojis'}
-                .rows=${this._channelEmojisConfiguration?.emojis.customEmojis}
-                @update=${(e: CustomEvent) => {
-                    if (this._channelEmojisConfiguration) {
-                      this._channelEmojisConfiguration.emojis.customEmojis = e.detail
-                      // Fixing missing ':' for shortnames:
-                      for (const desc of this._channelEmojisConfiguration.emojis.customEmojis) {
-                        if (desc.sn === '') { continue }
-                        if (!desc.sn.startsWith(':')) { desc.sn = ':' + desc.sn }
-                        if (!desc.sn.endsWith(':')) { desc.sn += ':' }
-                      }
-                      this.requestUpdate('_channelEmojisConfiguration')
+            <div class="peertube-plugin-livechat-configuration-actions">
+              ${
+                this._channelEmojisConfiguration?.emojis?.customEmojis?.length
+                  ? html`
+                  <button
+                    @click=${this._exportEmojis}
+                    ?disabled=${this._actionDisabled}
+                  >
+                    ${ptTr(LOC_ACTION_EXPORT)}
+                  </button>`
+                  : ''
+              }
+              ${
+                (this._channelEmojisConfiguration?.emojis?.customEmojis?.length ?? 0) < maxEmojisPerChannel
+                  ? html`
+                  <button
+                    @click=${this._importEmojis}
+                    ?disabled=${this._actionDisabled}
+                  >
+                    ${ptTr(LOC_ACTION_IMPORT)}
+                  </button>`
+                  : ''
+              }
+            </div>
+
+            <livechat-dynamic-table-form
+              .header=${tableHeaderList}
+              .schema=${tableSchema}
+              .maxLines=${maxEmojisPerChannel}
+              .validation=${this._validationError?.properties}
+              .validationPrefix=${'emojis'}
+              .rows=${this._channelEmojisConfiguration?.emojis.customEmojis}
+              @update=${(e: CustomEvent) => {
+                  if (this._channelEmojisConfiguration) {
+                    this._channelEmojisConfiguration.emojis.customEmojis = e.detail
+                    // Fixing missing ':' for shortnames:
+                    for (const desc of this._channelEmojisConfiguration.emojis.customEmojis) {
+                      if (desc.sn === '') { continue }
+                      if (!desc.sn.startsWith(':')) { desc.sn = ':' + desc.sn }
+                      if (!desc.sn.endsWith(':')) { desc.sn += ':' }
                     }
+                    this.requestUpdate('_channelEmojisConfiguration')
                   }
                 }
-              ></livechat-dynamic-table-form>
-            </div>
+              }
+            ></livechat-dynamic-table-form>
+
             <div class="form-group mt-5">
               <button type="reset" @click=${this._reset} ?disabled=${this._actionDisabled}>
                 ${ptTr(LOC_CANCEL)}
diff --git a/client/common/lib/elements/configuration-row.ts b/client/common/lib/elements/configuration-row.ts
index b4ca85f3..f2fdaa14 100644
--- a/client/common/lib/elements/configuration-row.ts
+++ b/client/common/lib/elements/configuration-row.ts
@@ -19,10 +19,11 @@ export class ConfigurationRowElement extends LivechatElement {
 
   protected override render = (): unknown => {
     return html`
-      <h2>${this.title}</h2>
+      <h2>
+        ${this.title}
+        <livechat-help-button .page=${this.helpPage}></livechat-help-button>
+      </h2>
       <p>${this.description}</p>
-      <livechat-help-button .page=${this.helpPage}>
-      </livechat-help-button>
       `
   }
 }
diff --git a/client/common/lib/elements/dynamic-table-form.ts b/client/common/lib/elements/dynamic-table-form.ts
index 3f99c5d5..31d2c1c0 100644
--- a/client/common/lib/elements/dynamic-table-form.ts
+++ b/client/common/lib/elements/dynamic-table-form.ts
@@ -268,7 +268,7 @@ export class DynamicTableFormElement extends LivechatElement {
         <button type="button"
           class="peertube-button-link orange-button dynamic-table-remove-row"
           .title=${ptTr(LOC_ACTION_REMOVE_ENTRY)}
-          @click=${() => this._removeRow(rowData._id)}
+          @click=${async () => this._removeRow(rowData._id)}
         >
           ${unsafeHTML(RemoveSVG)}
         </button>