Custom channel emoticons WIP (#130): tabs

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>
+    `
+  }
+}