From fb7f44692c2c98ffedba335fd18cb8b0af974fed Mon Sep 17 00:00:00 2001
From: Mehdi Benadel <mehdi.benadel@gmail.com>
Date: Thu, 23 May 2024 22:52:39 +0200
Subject: [PATCH] fix linting

---
 .../common/configuration/contexts/channel.ts  |   6 +-
 .../elements/channel-configuration.ts         |  96 +++----
 .../configuration/elements/channel-home.ts    |  25 +-
 .../elements/configuration-row.ts             |   9 +-
 .../configuration/services/channel-details.ts |  22 +-
 client/common/lib/contexts/peertube.ts        |   3 +-
 client/common/lib/directives/translation.ts   |  74 +++---
 .../common/lib/elements/dynamic-table-form.ts | 236 ++++++++++++------
 client/common/lib/elements/help-button.ts     |  13 +-
 client/common/lib/elements/livechat.ts        |   2 +-
 10 files changed, 282 insertions(+), 204 deletions(-)

diff --git a/client/common/configuration/contexts/channel.ts b/client/common/configuration/contexts/channel.ts
index 09b2a606..ee41dc55 100644
--- a/client/common/configuration/contexts/channel.ts
+++ b/client/common/configuration/contexts/channel.ts
@@ -6,5 +6,7 @@ import type { ChannelConfiguration } from 'shared/lib/types'
 import { createContext } from '@lit/context'
 import { ChannelDetailsService } from '../services/channel-details'
 
-export const channelConfigurationContext = createContext<ChannelConfiguration | undefined>(Symbol('channel-configuration'))
-export const channelDetailsServiceContext = createContext<ChannelDetailsService | undefined>(Symbol('channel-configuration-service'))
+export const channelConfigurationContext =
+  createContext<ChannelConfiguration | undefined>(Symbol('channel-configuration'))
+export const channelDetailsServiceContext =
+  createContext<ChannelDetailsService | undefined>(Symbol('channel-configuration-service'))
diff --git a/client/common/configuration/elements/channel-configuration.ts b/client/common/configuration/elements/channel-configuration.ts
index 5f7706dd..46c92b87 100644
--- a/client/common/configuration/elements/channel-configuration.ts
+++ b/client/common/configuration/elements/channel-configuration.ts
@@ -16,7 +16,6 @@ import { LivechatElement } from '../../lib/elements/livechat'
 
 @customElement('livechat-channel-configuration')
 export class ChannelConfigurationElement extends LivechatElement {
-
   @provide({ context: registerClientOptionsContext })
   @property({ attribute: false })
   public registerClientOptions: RegisterClientOptions | undefined
@@ -34,38 +33,36 @@ export class ChannelConfigurationElement extends LivechatElement {
   @state()
   public _formStatus: boolean | any = undefined
 
-  private _asyncTaskRender = new Task(this, {
-
-    task: async ([registerClientOptions], { signal }) => {
-      if (this.registerClientOptions) {
-        this._channelDetailsService = new ChannelDetailsService(this.registerClientOptions)
+  private readonly _asyncTaskRender = new Task(this, {
+    task: async ([registerClientOptions]) => {
+      if (registerClientOptions) {
+        this._channelDetailsService = new ChannelDetailsService(registerClientOptions)
         this._channelConfiguration = await this._channelDetailsService.fetchConfiguration(this.channelId ?? 0)
       }
     },
-
     args: () => [this.registerClientOptions]
+  })
 
-  });
-
-  private _saveConfig = (ev?: Event) => {
+  private readonly _saveConfig = (ev?: Event): undefined => {
     ev?.preventDefault()
     if (this._channelDetailsService && this._channelConfiguration) {
-      this._channelDetailsService.saveOptions(this._channelConfiguration.channel.id, this._channelConfiguration.configuration)
-        .then((value) => {
+      this._channelDetailsService.saveOptions(this._channelConfiguration.channel.id,
+        this._channelConfiguration.configuration)
+        .then(() => {
           this._formStatus = { success: true }
-          console.log(`Configuration has been updated`)
+          console.log('Configuration has been updated')
           this.requestUpdate('_formStatus')
         })
         .catch((error) => {
           this._formStatus = error
           console.log(`An error occurred : ${JSON.stringify(this._formStatus)}`)
           this.requestUpdate('_formStatus')
-        });
+        })
     }
   }
 
-  render = () => {
-    let tableHeaderList = {
+  protected override render = (): unknown => {
+    const tableHeaderList = {
       forbiddenWords: {
         entries: {
           colName: ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_FORBIDDEN_WORDS_LABEL),
@@ -113,16 +110,16 @@ export class ChannelConfigurationElement extends LivechatElement {
         }
       }
     }
-    let tableSchema = {
+    const tableSchema = {
       forbiddenWords: {
         entries: {
           inputType: 'textarea',
           default: [''],
-          separator: '\n',
+          separator: '\n'
         },
         regex: {
           inputType: 'checkbox',
-          default: false,
+          default: false
         },
         applyToModerators: {
           inputType: 'checkbox',
@@ -140,34 +137,35 @@ export class ChannelConfigurationElement extends LivechatElement {
         comments: {
           inputType: 'textarea',
           default: ''
-        },
+        }
       },
       quotes: {
         messages: {
           inputType: 'textarea',
           default: [''],
-          separator: '\n',
+          separator: '\n'
         },
         delay: {
           inputType: 'number',
-          default: 10,
+          default: 10
         }
       },
       commands: {
         command: {
           inputType: 'text',
-          default: '',
+          default: ''
         },
         message: {
           inputType: 'text',
-          default: '',
+          default: ''
         }
       }
     }
 
     return this._asyncTaskRender.render({
       complete: () => html`
-        <div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-channel">
+        <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">
@@ -185,7 +183,7 @@ export class ChannelConfigurationElement extends LivechatElement {
                 <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"}>
+                  .helpPage=${'documentation/user/streamers/slow_mode'}>
                 </livechat-configuration-row>
               </div>
               <div class="col-12 col-lg-8 col-xl-9">
@@ -199,8 +197,10 @@ export class ChannelConfigurationElement extends LivechatElement {
                       max="1000"
                       id="peertube-livechat-slow-mode-duration"
                       @input=${(event: InputEvent) => {
-                          if (event?.target && this._channelConfiguration)
-                            this._channelConfiguration.configuration.slowMode.duration = Number((event.target as HTMLInputElement).value)
+                          if (event?.target && this._channelConfiguration) {
+                            this._channelConfiguration.configuration.slowMode.duration =
+                              Number((event.target as HTMLInputElement).value)
+                          }
                           this.requestUpdate('_channelConfiguration')
                         }
                       }
@@ -215,7 +215,7 @@ export class ChannelConfigurationElement extends LivechatElement {
               <livechat-configuration-row
                 .title=${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_OPTIONS_TITLE)}
                 .description=${''}
-                .helpPage=${"documentation/user/streamers/channel"}>
+                .helpPage=${'documentation/user/streamers/channel'}>
               </livechat-configuration-row>
               </div>
               <div class="col-12 col-lg-8 col-xl-9">
@@ -226,8 +226,10 @@ export class ChannelConfigurationElement extends LivechatElement {
                       name="bot"
                       id="peertube-livechat-bot"
                       @input=${(event: InputEvent) => {
-                          if (event?.target && this._channelConfiguration)
-                            this._channelConfiguration.configuration.bot.enabled = (event.target as HTMLInputElement).checked
+                          if (event?.target && this._channelConfiguration) {
+                            this._channelConfiguration.configuration.bot.enabled =
+                              (event.target as HTMLInputElement).checked
+                          }
                           this.requestUpdate('_channelConfiguration')
                         }
                       }
@@ -237,17 +239,21 @@ export class ChannelConfigurationElement extends LivechatElement {
                     ${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>
+                ${this._channelConfiguration?.configuration.bot.enabled
+                ? html`<div class="form-group">
+                  <labelfor="peertube-livechat-bot-nickname">
+                    ${ptTr(LOC_LIVECHAT_CONFIGURATION_CHANNEL_BOT_NICKNAME)}
+                  </label>
                   <input
                     type="text"
                     name="bot_nickname"
                     class="form-control"
                     id="peertube-livechat-bot-nickname"
                     @input=${(event: InputEvent) => {
-                        if (event?.target && this._channelConfiguration)
-                          this._channelConfiguration.configuration.bot.nickname = (event.target as HTMLInputElement).value
+                        if (event?.target && this._channelConfiguration) {
+                          this._channelConfiguration.configuration.bot.nickname =
+                          (event.target as HTMLInputElement).value
+                        }
                         this.requestUpdate('_channelConfiguration')
                       }
                     }
@@ -258,13 +264,13 @@ export class ChannelConfigurationElement extends LivechatElement {
               }
               </div>
             </div>
-            ${this._channelConfiguration?.configuration.bot.enabled ?
-            html`<div class="row mt-5">
+            ${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"}>
+                  .helpPage=${'documentation/user/streamers/bot/forbidden_words'}>
                 </livechat-configuration-row>
               </div>
               <div class="col-12 col-lg-8 col-xl-9">
@@ -288,7 +294,7 @@ export class ChannelConfigurationElement extends LivechatElement {
                 <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"}>
+                  .helpPage=${'documentation/user/streamers/bot/quotes'}>
                 </livechat-configuration-row>
               </div>
               <div class="col-12 col-lg-8 col-xl-9">
@@ -312,7 +318,7 @@ export class ChannelConfigurationElement extends LivechatElement {
                 <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"}>
+                  .helpPage=${'documentation/user/streamers/bot/commands'}>
                 </livechat-configuration-row>
               </div>
               <div class="col-12 col-lg-8 col-xl-9">
@@ -336,14 +342,14 @@ export class ChannelConfigurationElement extends LivechatElement {
             <div class="form-group mt-5">
               <input type="submit" class="peertube-button-link orange-button" value=${ptTr(LOC_SAVE)} />
             </div>
-            ${(this._formStatus && this._formStatus.success === undefined) ?
-            html`<div class="alert alert-warning" role="alert">
+            ${(this._formStatus && this._formStatus.success === undefined)
+            ? html`<div class="alert alert-warning" role="alert">
               An error occurred : ${JSON.stringify(this._formStatus)}
             </div>`
               : ''
             }
-            ${(this._formStatus && this._formStatus.success === true) ?
-            html`<div class="alert alert-success" role="alert">
+            ${(this._formStatus && this._formStatus.success === true)
+            ? html`<div class="alert alert-success" role="alert">
               Configuration has been updated
             </div>`
               : ''
diff --git a/client/common/configuration/elements/channel-home.ts b/client/common/configuration/elements/channel-home.ts
index b98a7bd0..d9ba165d 100644
--- a/client/common/configuration/elements/channel-home.ts
+++ b/client/common/configuration/elements/channel-home.ts
@@ -6,7 +6,7 @@ import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import { html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { ptTr } from '../../lib/directives/translation'
-import { Task } from '@lit/task';
+import { Task } from '@lit/task'
 import type { ChannelLiveChatInfos } from 'shared/lib/types'
 import { ChannelDetailsService } from '../services/channel-details'
 import { provide } from '@lit/context'
@@ -16,7 +16,6 @@ import { LivechatElement } from '../../lib/elements/livechat'
 
 @customElement('livechat-channel-home')
 export class ChannelHomeElement extends LivechatElement {
-
   @provide({ context: registerClientOptionsContext })
   @property({ attribute: false })
   public registerClientOptions: RegisterClientOptions | undefined
@@ -30,26 +29,23 @@ export class ChannelHomeElement extends LivechatElement {
   @state()
   public _formStatus: boolean | any = undefined
 
-  private _asyncTaskRender = new Task(this, {
-
-    task: async ([registerClientOptions], {signal}) => {
+  private readonly _asyncTaskRender = new Task(this, {
+    task: async ([registerClientOptions]) => {
       // Getting the current username in localStorage. Don't know any cleaner way to do.
       const username = window.localStorage.getItem('username')
       if (!username) {
         throw new Error('Can\'t get the current username.')
       }
 
-      if (this.registerClientOptions) {
-        this._channelDetailsService = new ChannelDetailsService(this.registerClientOptions)
+      if (registerClientOptions) {
+        this._channelDetailsService = new ChannelDetailsService(registerClientOptions)
         this._channels = await this._channelDetailsService.fetchUserChannels(username)
       }
     },
-
     args: () => [this.registerClientOptions]
+  })
 
-  });
-
-  render = () => {
+  protected override render = (): unknown => {
     return this._asyncTaskRender.render({
       complete: () => html`
       <div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home">
@@ -64,10 +60,9 @@ export class ChannelHomeElement extends LivechatElement {
         ${this._channels?.map((channel) => html`
           <li>
             <a href="${channel.livechatConfigurationUri}">
-              ${channel.avatar ?
-                html`<img class="avatar channel" src="${channel.avatar.path}">`
-                       :
-                html`<div class="avatar channel initial gray"></div>`
+              ${channel.avatar
+                ? html`<img class="avatar channel" src="${channel.avatar.path}">`
+                       : html`<div class="avatar channel initial gray"></div>`
               }
             </a>
             <div class="peertube-plugin-livechat-configuration-home-info">
diff --git a/client/common/configuration/elements/configuration-row.ts b/client/common/configuration/elements/configuration-row.ts
index 78f03fa2..31b919d0 100644
--- a/client/common/configuration/elements/configuration-row.ts
+++ b/client/common/configuration/elements/configuration-row.ts
@@ -8,17 +8,16 @@ import { LivechatElement } from '../../lib/elements/livechat'
 
 @customElement('livechat-configuration-row')
 export class ConfigurationRowElement extends LivechatElement {
+  @property({ attribute: false })
+  public title: string = 'title'
 
   @property({ attribute: false })
-  public title: string = `title`
-
-  @property({ attribute: false })
-  public description: string = `Here's a description`
+  public description: string = 'Here\'s a description'
 
   @property({ attribute: false })
   public helpPage: string = 'documentation'
 
-  render() {
+  protected override render = (): unknown => {
     return html`
       <h2>${this.title}</h2>
       <p>${this.description}</p>
diff --git a/client/common/configuration/services/channel-details.ts b/client/common/configuration/services/channel-details.ts
index 559ad47d..ad212d0e 100644
--- a/client/common/configuration/services/channel-details.ts
+++ b/client/common/configuration/services/channel-details.ts
@@ -4,32 +4,30 @@
 
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 import { ChannelLiveChatInfos, ChannelConfiguration, ChannelConfigurationOptions } from 'shared/lib/types'
-import { getBaseRoute } from "../../../utils/uri"
-
+import { getBaseRoute } from '../../../utils/uri'
 
 export class ChannelDetailsService {
-
   public _registerClientOptions: RegisterClientOptions
 
-  private _headers : any = {}
+  private readonly _headers: any = {}
 
-  constructor(registerClientOptions: RegisterClientOptions) {
+  constructor (registerClientOptions: RegisterClientOptions) {
     this._registerClientOptions = registerClientOptions
 
     this._headers = this._registerClientOptions.peertubeHelpers.getAuthHeader() ?? {}
     this._headers['content-type'] = 'application/json;charset=UTF-8'
   }
 
-  validateOptions = (channelConfigurationOptions: ChannelConfigurationOptions) => {
-    return true
+  validateOptions = (channelConfigurationOptions: ChannelConfigurationOptions): boolean => {
+    return !!channelConfigurationOptions
   }
 
-  saveOptions = async (channelId: number, channelConfigurationOptions: ChannelConfigurationOptions) => {
+  saveOptions = async (channelId: number,
+    channelConfigurationOptions: ChannelConfigurationOptions): Promise<Response> => {
     if (!await this.validateOptions(channelConfigurationOptions)) {
       throw new Error('Invalid form data')
     }
 
-
     const response = await fetch(
       getBaseRoute(this._registerClientOptions) + '/api/configuration/channel/' + encodeURIComponent(channelId),
       {
@@ -43,7 +41,7 @@ export class ChannelDetailsService {
       throw new Error('Failed to save configuration options.')
     }
 
-    return await response.json()
+    return response.json()
   }
 
   fetchUserChannels = async (username: string): Promise<ChannelLiveChatInfos[]> => {
@@ -90,6 +88,6 @@ export class ChannelDetailsService {
       throw new Error('Can\'t get channel configuration options.')
     }
 
-    return await response.json()
+    return response.json()
   }
-}
\ No newline at end of file
+}
diff --git a/client/common/lib/contexts/peertube.ts b/client/common/lib/contexts/peertube.ts
index b8f37377..cdc647a2 100644
--- a/client/common/lib/contexts/peertube.ts
+++ b/client/common/lib/contexts/peertube.ts
@@ -5,4 +5,5 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client/types'
 import { createContext } from '@lit/context'
 
-export const registerClientOptionsContext = createContext<RegisterClientOptions | undefined>(Symbol('register-client-options'))
+export const registerClientOptionsContext =
+  createContext<RegisterClientOptions | undefined>(Symbol('register-client-options'))
diff --git a/client/common/lib/directives/translation.ts b/client/common/lib/directives/translation.ts
index b796d707..5404f7bc 100644
--- a/client/common/lib/directives/translation.ts
+++ b/client/common/lib/directives/translation.ts
@@ -2,59 +2,59 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { PartInfo, directive } from 'lit/directive.js'
+import { /* PartInfo, */ directive } from 'lit/directive.js'
 import { AsyncDirective } from 'lit/async-directive.js'
-import { RegisterClientHelpers } from '@peertube/peertube-types/client';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { html } from 'lit';
+import { RegisterClientHelpers } from '@peertube/peertube-types/client'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
+import { html } from 'lit'
 
 export class TranslationDirective extends AsyncDirective {
+  private readonly _peertubeHelpers?: RegisterClientHelpers
 
-    private _peertubeHelpers?: RegisterClientHelpers
+  private _translatedValue: string = ''
+  private _localizationId: string = ''
 
-    private _translatedValue : string = ''
-    private _localizationId : string = ''
+  private _allowUnsafeHTML = false
 
-    private _allowUnsafeHTML = false
+  // constructor (partInfo: PartInfo) {
+  //   super(partInfo)
 
-    constructor(partInfo: PartInfo) {
-        super(partInfo);
+  //   _peertubeOptionsPromise.then((options) => this._peertubeHelpers = options.peertubeHelpers)
+  // }
 
-        //_peertubeOptionsPromise.then((options) => this._peertubeHelpers = options.peertubeHelpers)
+  // update = (part: ElementPart) => {
+  //   if (part) console.log(`Element : ${part?.element?.getAttributeNames?.().join(' ')}`);
+  //   return this.render(this._localizationId);
+  // }
+
+  public override render = (locId: string, allowHTML: boolean = false): unknown => {
+    this._localizationId = locId // TODO Check current component for context (to infer the prefix)
+
+    this._allowUnsafeHTML = allowHTML
+
+    if (this._translatedValue === '') {
+      this._translatedValue = locId
     }
 
-    // update = (part: ElementPart) => {
-    //     if (part) console.log(`Element : ${part?.element?.getAttributeNames?.().join(' ')}`);
-    //     return this.render(this._localizationId);
-    // }
+    this._asyncUpdateTranslation().then(() => {}, () => {})
 
-    override render = (locId: string, allowHTML: boolean = false) => {
-        this._localizationId = locId // TODO Check current component for context (to infer the prefix)
+    return this._internalRender()
+  }
 
-        this._allowUnsafeHTML = allowHTML
+  private readonly _internalRender = (): unknown => {
+    return this._allowUnsafeHTML ? html`${unsafeHTML(this._translatedValue)}` : this._translatedValue
+  }
 
-        if (this._translatedValue === '') {
-            this._translatedValue = locId
-        }
+  private readonly _asyncUpdateTranslation = async (): Promise<true> => {
+    const newValue = await this._peertubeHelpers?.translate(this._localizationId) ?? ''
 
-        this._asyncUpdateTranslation().then(() => {}, () => {})
-
-        return this._internalRender()
+    if (newValue !== '' && newValue !== this._translatedValue) {
+      this._translatedValue = newValue
+      this.setValue(this._internalRender())
     }
 
-    _internalRender = () => {
-        return this._allowUnsafeHTML ? html`${unsafeHTML(this._translatedValue)}` : this._translatedValue
-    }
-
-    _asyncUpdateTranslation = async () => {
-        let newValue = await this._peertubeHelpers?.translate(this._localizationId) ?? ''
-
-        if (newValue !== '' && newValue !== this._translatedValue) {
-            this._translatedValue = newValue
-            this.setValue(this._internalRender())
-        }
-    }
+    return true
+  }
 }
 
 export const ptTr = directive(TranslationDirective)
-
diff --git a/client/common/lib/elements/dynamic-table-form.ts b/client/common/lib/elements/dynamic-table-form.ts
index 4f489d9c..e62200ae 100644
--- a/client/common/lib/elements/dynamic-table-form.ts
+++ b/client/common/lib/elements/dynamic-table-form.ts
@@ -2,6 +2,8 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
+/* eslint no-fallthrough: "off" */
+
 import { html, nothing, TemplateResult } from 'lit'
 import { repeat } from 'lit/directives/repeat.js'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -9,43 +11,45 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { LivechatElement } from './livechat'
 
-  // This content comes from the file assets/images/plus-square.svg, from the Feather icons set https://feathericons.com/
+// This content comes from the file assets/images/plus-square.svg, from the Feather icons set https://feathericons.com/
 const AddSVG: string =
-  `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square">
+  `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+  stroke-linejoin="round" class="feather feather-plus-square">
     <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
     <line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line>
   </svg>`
 
-  // This content comes from the file assets/images/x-square.svg, from the Feather icons set https://feathericons.com/
+// This content comes from the file assets/images/x-square.svg, from the Feather icons set https://feathericons.com/
 const RemoveSVG: string =
-  `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-square">
+  `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+  stroke-linejoin="round" class="feather feather-x-square">
     <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
     <line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line>
   </svg>`
 
-
 type DynamicTableAcceptedTypes = number | string | boolean | Date | Array<number | string>
 
 type DynamicTableAcceptedInputTypes = 'textarea'
-  | 'select'
-  | 'checkbox'
-  | 'range'
-  | 'color'
-  | 'date'
-  | 'datetime'
-  | 'datetime-local'
-  | 'email'
-  | 'file'
-  | 'image'
-  | 'month'
-  | 'number'
-  | 'password'
-  | 'tel'
-  | 'text'
-  | 'time'
-  | 'url'
-  | 'week'
-
+| 'select'
+| 'checkbox'
+| 'range'
+| 'color'
+| 'date'
+| 'datetime'
+| 'datetime-local'
+| 'email'
+| 'file'
+| 'image'
+| 'month'
+| 'number'
+| 'password'
+| 'tel'
+| 'text'
+| 'time'
+| 'url'
+| 'week'
 
 interface CellDataSchema {
   min?: number
@@ -63,19 +67,17 @@ interface CellDataSchema {
 
 @customElement('livechat-dynamic-table-form')
 export class DynamicTableFormElement extends LivechatElement {
-
   @property({ attribute: false })
   public header: { [key: string]: { colName: TemplateResult, description: TemplateResult } } = {}
 
-
   @property({ attribute: false })
   public schema: { [key: string]: CellDataSchema } = {}
 
   @property({ attribute: false })
-  public rows: { [key: string]: DynamicTableAcceptedTypes }[] = []
+  public rows: Array<{ [key: string]: DynamicTableAcceptedTypes }> = []
 
   @state()
-  public _rowsById: { _id: number; row: { [key: string]: DynamicTableAcceptedTypes } }[] = []
+  public _rowsById: Array<{ _id: number, row: { [key: string]: DynamicTableAcceptedTypes } }> = []
 
   @property({ attribute: false })
   public formName: string = ''
@@ -87,29 +89,28 @@ export class DynamicTableFormElement extends LivechatElement {
   private columnOrder: string[] = []
 
   // fixes situations when list has been reinitialized or changed outside of CustomElement
-  private _updateLastRowId = () => {
-    for (let rowById of this._rowsById) {
-      this._lastRowId = Math.max(this._lastRowId, rowById._id + 1);
+  private readonly _updateLastRowId = (): void => {
+    for (const rowById of this._rowsById) {
+      this._lastRowId = Math.max(this._lastRowId, rowById._id + 1)
     }
   }
 
-  private _getDefaultRow = () : { [key: string]: DynamicTableAcceptedTypes } => {
+  private readonly _getDefaultRow = (): { [key: string]: DynamicTableAcceptedTypes } => {
     this._updateLastRowId()
     return Object.fromEntries([...Object.entries(this.schema).map((entry) => [entry[0], entry[1].default ?? ''])])
   }
 
-  private _addRow = () => {
-    let newRow = this._getDefaultRow()
-    this._rowsById.push({_id:this._lastRowId++, row: newRow})
+  private readonly _addRow = (): void => {
+    const newRow = this._getDefaultRow()
+    this._rowsById.push({ _id: this._lastRowId++, row: newRow })
     this.rows.push(newRow)
     this.requestUpdate('rows')
     this.requestUpdate('_rowsById')
     this.dispatchEvent(new CustomEvent('update', { detail: this.rows }))
   }
 
-
-  private _removeRow = (rowId: number) => {
-    let rowToRemove = this._rowsById.filter(rowById => rowById._id == rowId).map(rowById => rowById.row)[0]
+  private readonly _removeRow = (rowId: number): void => {
+    const rowToRemove = this._rowsById.filter(rowById => rowById._id === rowId).map(rowById => rowById.row)[0]
     this._rowsById = this._rowsById.filter(rowById => rowById._id !== rowId)
     this.rows = this.rows.filter((row) => row !== rowToRemove)
     this.requestUpdate('rows')
@@ -117,16 +118,16 @@ export class DynamicTableFormElement extends LivechatElement {
     this.dispatchEvent(new CustomEvent('update', { detail: this.rows }))
   }
 
-  render = () => {
+  protected override render = (): unknown => {
     const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-table`
 
     this._updateLastRowId()
 
     this._rowsById.filter(rowById => this.rows.includes(rowById.row))
 
-    for (let row of this.rows) {
-      if (this._rowsById.filter(rowById => rowById.row === row).length == 0) {
-        this._rowsById.push({_id: this._lastRowId++, row })
+    for (const row of this.rows) {
+      if (this._rowsById.filter(rowById => rowById.row === row).length === 0) {
+        this._rowsById.push({ _id: this._lastRowId++, row })
       }
     }
 
@@ -148,50 +149,68 @@ export class DynamicTableFormElement extends LivechatElement {
     `
   }
 
-  private _renderHeader = () => {
+  private readonly _renderHeader = (): TemplateResult => {
     return html`<thead>
       <tr>
-        ${Object.entries(this.header).sort(([k1,_1], [k2,_2]) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2))
-                                     .map(([k,v]) => this._renderHeaderCell(v))}
+        ${Object.entries(this.header)
+                .sort(([k1, _1], [k2, _2]) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2))
+                .map(([_, v]) => this._renderHeaderCell(v))}
         <th scope="col"></th>
       </tr>
     </thead>`
   }
 
-  private _renderHeaderCell = (headerCellData: { colName: TemplateResult, description: TemplateResult }) => {
+  private readonly _renderHeaderCell = (headerCellData: { colName: TemplateResult
+    description: TemplateResult }): TemplateResult => {
     return html`<th scope="col">
-      <div data-toggle="tooltip" data-placement="bottom" data-html="true" title=${headerCellData.description}>${headerCellData.colName}</div>
+      <div data-toggle="tooltip" data-placement="bottom" data-html="true" title=${headerCellData.description}>
+        ${headerCellData.colName}
+      </div>
     </th>`
   }
 
-  private _renderDataRow = (rowData: { _id: number; row: {[key: string]: DynamicTableAcceptedTypes} }) => {
+  private readonly _renderDataRow = (rowData: { _id: number
+    row: {[key: string]: DynamicTableAcceptedTypes} }): TemplateResult => {
     const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-row-${rowData._id}`
 
     return html`<tr id=${inputId}>
-      ${Object.keys(this.header).sort((k1, k2) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2))
-                                     .map(k => this.renderDataCell([k, rowData.row[k] ?? this.schema[k].default], rowData._id))}
-      <td class="form-group"><button type="button" class="peertube-button-link orange-button dynamic-table-remove-row" @click=${() => this._removeRow(rowData._id)}>${unsafeHTML(RemoveSVG)}</button></td>
+      ${Object.keys(this.header)
+              .sort((k1, k2) => this.columnOrder.indexOf(k1) - this.columnOrder.indexOf(k2))
+              .map(k => this.renderDataCell([k, rowData.row[k] ?? this.schema[k].default], rowData._id))}
+      <td class="form-group">
+        <button type="button"
+        class="peertube-button-link orange-button dynamic-table-remove-row"
+        @click=${() => this._removeRow(rowData._id)}>
+          ${unsafeHTML(RemoveSVG)}
+        </button>
+      </td>
     </tr>`
-
   }
 
-  private _renderFooter = () => {
+  private readonly _renderFooter = (): TemplateResult => {
     return html`<tfoot>
     <tr>
       ${Object.values(this.header).map(() => html`<td></td>`)}
-      <td><button type="button" class="peertube-button-link orange-button dynamic-table-add-row" @click=${this._addRow}>${unsafeHTML(AddSVG)}</button></td>
+      <td>
+        <button type="button"
+        class="peertube-button-link orange-button dynamic-table-add-row"
+        @click=${this._addRow}>
+          ${unsafeHTML(AddSVG)}
+        </button>
+      </td>
     </tr>
   </tfoot>`
   }
 
-  renderDataCell = (property: [string, DynamicTableAcceptedTypes], rowId: number) => {
+  renderDataCell = (property: [string, DynamicTableAcceptedTypes], rowId: number): TemplateResult => {
     let [propertyName, propertyValue] = property
     const propertySchema = this.schema[propertyName] ?? {}
 
     let formElement
 
     const inputName = `${this.formName.replace(/-/g, '_')}_${propertyName.toString().replace(/-/g, '_')}_${rowId}`
-    const inputId = `peertube-livechat-${this.formName.replace(/_/g, '-')}-${propertyName.toString().replace(/_/g, '-')}-${rowId}`
+    const inputId =
+      `peertube-livechat-${this.formName.replace(/_/g, '-')}-${propertyName.toString().replace(/_/g, '-')}-${rowId}`
 
     switch (propertySchema.default?.constructor) {
       case String:
@@ -215,15 +234,30 @@ export class DynamicTableFormElement extends LivechatElement {
           case 'time':
           case 'url':
           case 'week':
-            formElement = this._renderInput(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as string)
+            formElement = this._renderInput(rowId,
+              inputId,
+              inputName,
+              propertyName,
+              propertySchema,
+              propertyValue as string)
             break
 
           case 'textarea':
-            formElement = this._renderTextarea(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as string)
+            formElement = this._renderTextarea(rowId,
+              inputId,
+              inputName,
+              propertyName,
+              propertySchema,
+              propertyValue as string)
             break
 
           case 'select':
-            formElement = this._renderSelect(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as string)
+            formElement = this._renderSelect(rowId,
+              inputId,
+              inputName,
+              propertyName,
+              propertySchema,
+              propertyValue as string)
             break
         }
         break
@@ -237,7 +271,12 @@ export class DynamicTableFormElement extends LivechatElement {
           case 'datetime':
           case 'datetime-local':
           case 'time':
-            formElement = this._renderInput(rowId, inputId, inputName, propertyName, propertySchema, (propertyValue as Date).toISOString())
+            formElement = this._renderInput(rowId,
+              inputId,
+              inputName,
+              propertyName,
+              propertySchema,
+              (propertyValue as Date).toISOString())
             break
         }
         break
@@ -249,7 +288,12 @@ export class DynamicTableFormElement extends LivechatElement {
 
           case 'number':
           case 'range':
-            formElement = this._renderInput(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as string)
+            formElement = this._renderInput(rowId,
+              inputId,
+              inputName,
+              propertyName,
+              propertySchema,
+              propertyValue as string)
             break
         }
         break
@@ -260,7 +304,12 @@ export class DynamicTableFormElement extends LivechatElement {
             propertySchema.inputType = 'checkbox'
 
           case 'checkbox':
-            formElement = this._renderCheckbox(rowId, inputId, inputName, propertyName, propertySchema, propertyValue as boolean)
+            formElement = this._renderCheckbox(rowId,
+              inputId,
+              inputName,
+              propertyName,
+              propertySchema,
+              propertyValue as boolean)
             break
         }
         break
@@ -290,27 +339,32 @@ export class DynamicTableFormElement extends LivechatElement {
               propertyValue = (propertyValue) ? [propertyValue as (number | string)] : []
             }
             formElement = this._renderInput(rowId, inputId, inputName, propertyName, propertySchema,
-              (propertyValue as Array<number | string>)?.join(propertySchema.separator ?? ',') ?? propertyValue ?? propertySchema.default ?? '')
+              (propertyValue)?.join(propertySchema.separator ?? ',') ?? propertyValue ?? propertySchema.default ?? '')
             break
           case 'textarea':
             if (propertyValue.constructor !== Array) {
               propertyValue = (propertyValue) ? [propertyValue as (number | string)] : []
             }
             formElement = this._renderTextarea(rowId, inputId, inputName, propertyName, propertySchema,
-              (propertyValue as Array<number | string>)?.join(propertySchema.separator ?? ',') ?? propertyValue ?? propertySchema.default ?? '')
+              (propertyValue)?.join(propertySchema.separator ?? ',') ?? propertyValue ?? propertySchema.default ?? '')
             break
         }
     }
 
     if (!formElement) {
-      console.warn(`value type '${propertyValue.constructor}' is incompatible`
-        + `with field type '${propertySchema.inputType}' for form entry '${propertyName.toString()}'.`)
+      console.warn(`value type '${(propertyValue.constructor.toString())}' is incompatible` +
+        `with field type '${propertySchema.inputType as string}' for form entry '${propertyName.toString()}'.`)
     }
 
     return html`<td class="form-group">${formElement}</td>`
   }
 
-  _renderInput = (rowId: number, inputId: string, inputName: string, propertyName: string, propertySchema: CellDataSchema, propertyValue: string) => {
+  _renderInput = (rowId: number,
+    inputId: string,
+    inputName: string,
+    propertyName: string,
+    propertySchema: CellDataSchema,
+    propertyValue: string): TemplateResult => {
     return html`<input
       type=${propertySchema.inputType}
       name=${inputName}
@@ -324,13 +378,20 @@ export class DynamicTableFormElement extends LivechatElement {
       @change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
       .value=${propertyValue}
     />
-    ${(propertySchema.datalist) ? html`<datalist id=${inputId + '-datalist'}>
+    ${(propertySchema.datalist)
+? html`<datalist id=${inputId + '-datalist'}>
       ${(propertySchema.datalist ?? []).map((value) => html`<option value=${value} />`)}
-    </datalist>` : nothing}
+    </datalist>`
+: nothing}
     `
   }
 
-  _renderTextarea = (rowId: number, inputId: string, inputName: string, propertyName: string, propertySchema: CellDataSchema, propertyValue: string) => {
+  _renderTextarea = (rowId: number,
+    inputId: string,
+    inputName: string,
+    propertyName: string,
+    propertySchema: CellDataSchema,
+    propertyValue: string): TemplateResult => {
     return html`<textarea
       name=${inputName}
       class="form-control"
@@ -344,7 +405,12 @@ export class DynamicTableFormElement extends LivechatElement {
     ></textarea>`
   }
 
-  _renderCheckbox = (rowId: number, inputId: string, inputName: string, propertyName: string, propertySchema: CellDataSchema, propertyValue: boolean) => {
+  _renderCheckbox = (rowId: number,
+    inputId: string,
+    inputName: string,
+    propertyName: string,
+    propertySchema: CellDataSchema,
+    propertyValue: boolean): TemplateResult => {
     return html`<input
       type="checkbox"
       name=${inputName}
@@ -356,7 +422,12 @@ export class DynamicTableFormElement extends LivechatElement {
     />`
   }
 
-  _renderSelect = (rowId: number, inputId: string, inputName: string, propertyName: string, propertySchema: CellDataSchema, propertyValue: string) => {
+  _renderSelect = (rowId: number,
+    inputId: string,
+    inputName: string,
+    propertyName: string,
+    propertySchema: CellDataSchema,
+    propertyValue: string): TemplateResult => {
     return html`<select
       class="form-select"
       aria-label="Default select example"
@@ -370,13 +441,19 @@ export class DynamicTableFormElement extends LivechatElement {
     </select>`
   }
 
-
-  _updatePropertyFromValue = (event: Event, propertyName: string, propertySchema: CellDataSchema, rowId: number) => {
-    let target = event.target as (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)
-    let value = (target) ? (target instanceof HTMLInputElement && target.type == "checkbox") ? !!(target.checked) : target.value : undefined
+  _updatePropertyFromValue = (event: Event,
+    propertyName: string,
+    propertySchema: CellDataSchema,
+    rowId: number): undefined => {
+    const target = event.target as (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)
+    const value = (target)
+      ? (target instanceof HTMLInputElement && target.type === 'checkbox')
+          ? !!(target.checked)
+          : target.value
+      : undefined
 
     if (value !== undefined) {
-      for (let rowById of this._rowsById) {
+      for (const rowById of this._rowsById) {
         if (rowById._id === rowId) {
           switch (propertySchema.default?.constructor) {
             case Array:
@@ -397,9 +474,8 @@ export class DynamicTableFormElement extends LivechatElement {
       }
 
       console.warn(`Could not update property : Did not find a property named '${propertyName}' in row '${rowId}'`)
-    }
-    else {
-      console.warn(`Could not update property : Target or value was undefined`)
+    } else {
+      console.warn('Could not update property : Target or value was undefined')
     }
   }
 }
diff --git a/client/common/lib/elements/help-button.ts b/client/common/lib/elements/help-button.ts
index 7253d792..5ac2c15b 100644
--- a/client/common/lib/elements/help-button.ts
+++ b/client/common/lib/elements/help-button.ts
@@ -17,7 +17,6 @@ import { LivechatElement } from './livechat'
 
 @customElement('livechat-help-button')
 export class HelpButtonElement extends LivechatElement {
-
   @consume({ context: registerClientOptionsContext, subscribe: true })
   public registerClientOptions: RegisterClientOptions | undefined
 
@@ -30,14 +29,16 @@ export class HelpButtonElement extends LivechatElement {
   @state()
   public url: URL = new URL('https://lmddgtfy.net/')
 
-  private _asyncTaskRender = new Task(this, {
-    task: async ([registerClientOptions], {signal}) => {
-      this.url = new URL(registerClientOptions ? await localizedHelpUrl(registerClientOptions, { page: this.page }) : '')
+  private readonly _asyncTaskRender = new Task(this, {
+    task: async ([registerClientOptions]) => {
+      this.url = new URL(registerClientOptions
+        ? await localizedHelpUrl(registerClientOptions, { page: this.page })
+        : '')
     },
     args: () => [this.registerClientOptions]
-  });
+  })
 
-  render() {
+  protected override render = (): unknown => {
     return this._asyncTaskRender.render({
       complete: () => html`<a
         href="${this.url.href}"
diff --git a/client/common/lib/elements/livechat.ts b/client/common/lib/elements/livechat.ts
index 4c1aa2f0..b3445f40 100644
--- a/client/common/lib/elements/livechat.ts
+++ b/client/common/lib/elements/livechat.ts
@@ -8,7 +8,7 @@ import { LitElement } from 'lit'
  * Base class for all Custom Elements.
  */
 export class LivechatElement extends LitElement {
-  protected createRenderRoot = () => {
+  protected override createRenderRoot = (): Element | ShadowRoot => {
     return this
   }
 }