discourse-ai/assets/javascripts/discourse/components/ai-gist-toggle.gjs

import Component from "@glimmer/component";
import { concat, fn } from "@ember/helper";
import { action } from "@ember/object";
import { service } from "@ember/service";
import DButton from "discourse/components/d-button";
import DropdownMenu from "discourse/components/dropdown-menu";
import bodyClass from "discourse/helpers/body-class";
import icon from "discourse-common/helpers/d-icon";
import i18n from "discourse-common/helpers/i18n";
import DMenu from "float-kit/components/d-menu";
import eq from "truth-helpers/helpers/eq";

export default class AiGistToggle extends Component {
  @service gists;

  get buttons() {
    return [
      {
        id: "table",
        label: "discourse_ai.summarization.topic_list_layout.button.compact",
        icon: "discourse-table",
      },
      {
        id: "table-ai",
        label: "discourse_ai.summarization.topic_list_layout.button.expanded",
        icon: "discourse-table-sparkles",
        description:
          "discourse_ai.summarization.topic_list_layout.button.expanded_description",
      },
    ];
  }

  get selectedOptionId() {
    return this.gists.get("preference");
  }

  get currentButton() {
    const buttonPreference = this.buttons.find(
      (button) => button.id === this.selectedOptionId
    );
    return buttonPreference || this.buttons[0];
  }

  @action
  onRegisterApi(api) {
    this.dMenu = api;
  }

  @action
  onSelect(optionId) {
    this.gists.setPreference(optionId);
    this.dMenu.close();
  }

  <template>
    {{#if this.gists.shouldShow}}
      {{bodyClass (concat "topic-list-layout-" this.gists.preference)}}
      <DMenu
        @modalForMobile={{true}}
        @autofocus={{true}}
        @identifier="topic-list-layout"
        @onRegisterApi={{this.onRegisterApi}}
        @triggerClass="btn-default btn-icon"
      >
        <:trigger>
          {{icon this.currentButton.icon}}
        </:trigger>
        <:content>
          <DropdownMenu as |dropdown|>
            {{#each this.buttons as |button|}}
              <dropdown.item>
                <DButton
                  @label={{button.label}}
                  @icon={{button.icon}}
                  class="btn-transparent
                    {{if button.description '--with-description'}}
                    {{if (eq this.currentButton.id button.id) '--active'}}"
                  @action={{fn this.onSelect button.id}}
                >
                  {{#if button.description}}
                    <div class="btn__description">
                      {{i18n button.description}}
                    </div>
                  {{/if}}
                </DButton>
              </dropdown.item>
            {{/each}}
          </DropdownMenu>
        </:content>
      </DMenu>
    {{/if}}
  </template>
}