mostly works

Author: pfaffman

assets/.gitkeep

@@ -0,0 +1,22 @@
+import { apiInitializer } from "discourse/lib/api";
+import ButtonLink from "../components/button-link";
+import CustomStatusPicker from "../components/custom-status-picker";
+import concatClass from "discourse/helpers/concat-class";
+import { htmlSafe } from "@ember/template";
+
+export default apiInitializer("1.8.0", (api) => {
+  // loop through settings.buttons and render a button for each one
+  settings.buttons.forEach((button) => {
+    api.renderInOutlet(button.outlet, <template>
+      <ButtonLink @button={{button}} />
+    </template>);
+  });
+  settings.custom_text_block.forEach((component) => {
+    console.log("component", component);
+    api.renderInOutlet(component.outlet, <template>
+      <div class={{concatClass "custom-component" component.class}}>
+        {{htmlSafe component.text}}
+      </div>
+    </template>);
+  });
+});

common/common.scss

@@ -0,0 +1,37 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import concatClass from "discourse/helpers/concat-class";
+
+export default class ButtonLink extends Component {
+  @service currentUser;
+  get showButtonLink() {
+    // assign isGroupMember to true if user is a member of any of the groups in the button object
+    // user is in group if any this.currentUser.groups have an id that is in the button.groups array
+    let isGroupMember = this.args.button.groups.some((group) => {
+      return this.currentUser.groups.some((userGroup) => {
+        return userGroup.id === group;
+      });
+    });
+    if (this.args.button.group_action === "show") {
+      return isGroupMember;
+    } else {
+      return !isGroupMember;
+    }
+  }
+  get button() {
+    return this.args.button;
+  }
+
+  <template>
+    {{#if this.showButtonLink}}
+      <DButton
+        @icon={{this.button.icon}}
+        @translatedLabel={{this.button.text}}
+        class={{concatClass "btn-custom" this.button.class}}
+        @translatedTitle={{this.button.title}}
+        @href={{this.button.url}}
+      />
+    {{/if}}
+  </template>
+}

desktop/desktop.scss

@@ -0,0 +1,40 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+import concatClass from "discourse/helpers/concat-class";
+import UserStatusPicker from "discourse/components/user-status-picker";
+import { TrackedObject } from "@ember-compat/tracked-built-ins";
+
+// this is a proof of concept.
+// It will show the status picker, but it doesn't work.
+
+export default class CustomStatusPicker extends Component {
+  @service currentUser;
+  get showStatusPicker() {
+    console.log("show the picker", this.args.statusPicker);
+    console.log("this.currentUser", this.currentUser);
+    // status = new TrackedObject({ ...this.args.model.status });
+
+    // assign isGroupMember to true if user is a member of any of the groups in the button object
+    // user is in group if any this.currentUser.groups have an id that is in the button.groups array
+    let isGroupMember = this.args.statusPicker.groups.some((group) => {
+      return this.currentUser.groups.some((userGroup) => {
+        return userGroup.id === group;
+      });
+    });
+    if (this.args.statusPicker.group_action === "show") {
+      return isGroupMember;
+    } else {
+      return !isGroupMember;
+    }
+    return true;
+  }
+  get picker() {
+    return this.args.statusPicker;
+  }
+
+  <template>
+    {{#if this.showStatusPicker}}
+      <UserStatusPicker status={{this.picker.status}} />
+    {{/if}}
+  </template>
+}

javascripts/.gitkeep

@@ -3,3 +3,50 @@ en:
     description: Add custom components (e.g., buttons) at any plugin outlet
     settings:
       example_setting: A description of a setting.
+      buttons:
+        description: A list of buttons to display at the specified outlet
+        schema:
+          properties:
+            text:
+              label: Button Text
+              description: The text to display on the button
+            title:
+              label: Button Title
+              description: The title attribute for the button
+            url:
+              label: Button URL
+              description: The URL to link to when the button is clicked
+            class:
+              label: Button Class
+              description: The class to apply to the button
+            icon:
+              label: Button Icon
+              description: The name of the icon to display on the button
+            outlet:
+              label: Button Outlet
+              description: The name of the outlet where the button should be displayed
+            group_action:
+              label: Group Action
+              description: Whether to show or hide the button for the specified groups
+            groups:
+              label: Button Groups
+              description: The button will be displayed/hidden if the user is in one of these groups
+      custom_text_block:
+        description: A list of text blocks to display at the specified outlet
+        schema:
+          properties:
+            text:
+              label: Text Block
+              description: The text to display (html is allowed)
+            outlet:
+              label: Text Block Outlet
+              description: The name of the plugin outlet where the text block should be displayed
+            class:
+              label: Text Block Class
+              description: The class to apply to the text block
+            group_action:
+              label: Group Action
+              description: Whether to show or hide the text block for the specified groups
+            groups:
+              label: Text Block Groups
+              description: The text block will be displayed/hidden if the user is in one of these groups