At the end of the day I need a new topic button in the topic list body in the discourse central theme . Every engineer is complaining that they don’t like the start new conversation button just being at the bottom of the topic list inside each category . They dont want to use the new topic menu choice up top because that does not start the topic in the category they are presently in I have run this through llama 3.1 405B as well as gpt4 via ask.discourse.com but I cannot get a version of a java script that will compile. I am constantly getting Compile error: SyntaxError: Private field must be used in an enclosing class I also get a widget registry error but that is because the custom widget never gets created due to the js compile error I am using Discourse Central Theme Given this Header section: " api.createWidget('custom-new-topic-button', { tagName: 'div.custom-new-topic-button', buildKey: () => `custom-new-topic-button`, html() { return [ this.attach('button', { className: 'btn btn-primary', action: 'createNewTopic', contents: 'New Topic' }) ]; }, click() { const composerController = this.container.lookup("controller:composer"); const currentCategory = this.container.lookup("controller:navigation/category").get("model.id"); composerController.open({ action: require("discourse/models/composer").default.CREATE_TOPIC, draftKey: require("discourse/models/composer").default.DRAFT, categoryId: currentCategory, }); return false; }, }); api.decorateWidget('topic-list:before', (helper) => { if (api.getCurrentUser()) { helper.appendChild(helper.createWidget('custom-new-topic-button')); } }); " with this Head section {{#if currentUser}} {{custom-new-topic-button}} {{/if}} and this CSS .topic-list-body::before { content: ""; display: block; position: relative; /* Important to allow absolute positioning within */ } .topic-list-body-new-topic { position: absolute; top: 0; left: 0; padding: 10px; background: #f2f3f5; border-bottom: 1px solid #ccc; } .custom-new-topic-button .btn.btn-primary { background-color: #007bff; border-color: #007bff; color: #fff; } That was my origianl code the latest recommendation is api.createWidget('custom-new-topic-button', { tagName: 'div.custom-new-topic-button', buildKey() { return 'custom-new-topic-button'; }, defaultState() { return {}; }, html() { return [ this.attach('button', { className: 'btn btn-primary', action: 'createNewTopic', contents: 'New Topic' }) ]; }, createNewTopic() { const composerController = this.container.lookup("controller:composer"); const currentCategory = this.container.lookup("controller:navigation/category").get("model.id"); const Composer = require("discourse/models/composer").default; composerController.open({ action: Composer.CREATE_TOPIC, draftKey: Composer.DRAFT, categoryId: currentCategory, }); return false; }, }); api.decorateWidget('topic-list:before', (helper) => { if (api.getCurrentUser()) { helper.appendChild(helper.createWidget('custom-new-topic-button')); } });

Got it to work. @sam I exhausted my daily calls to ask …sorry about that. And then ran over to our LLAMA 405 B and after a bunch of back and forth I got working code. I cannot imagine how much money this would have cost me . I may hear form other folks in the forum hey idiot there was a setting to do this over at this location . But this was a fun exercise of continuous prompt revision to get working code. Some of the keys are to say ( mind you some of these may be inaccurate because I’ve been a java script developer and a discourse develoepr for about 2 days total time.) This is a forum hosted by discourse and I do not have OS access This is a plugin so you cannot reference Discourse. directly . You cannot reference Ember directly If you are going to use this, please ensure you bind it to self An then go into the functional traits you want. api.modifyClass('component:topic-list', { pluginId: 'your-plugin-id', didRender: function() { const category = this.get('category'); if (!category) { console.error('Category not found'); return; } const currentUser = this.currentUser; if (!currentUser) { console.error('Current user not found'); return; } const canCreateTopic = currentUser.can_create_topic; if (canCreateTopic === undefined) { console.error('Can create topic not defined'); return; } console.log('category:', category); console.log('canCreateTopic:', canCreateTopic); if (category && canCreateTopic) { const topicListBody = document.querySelector('.topic-list-body'); const listContainer = document.querySelector('.list-container'); const topicList = document.querySelector('.topic-list'); let container = topicListBody || listContainer || topicList; if (!container) { container = this.element; // Use the component's element as the container } console.log('container:', container); const existingButton = container.querySelector('.new-topic-button'); if (!existingButton) { const newTopicButton = document.createElement('a'); newTopicButton.href = '#'; newTopicButton.className = 'new-topic-button'; newTopicButton.setAttribute('data-category-id', category.id); newTopicButton.textContent = 'New Topic'; const self = this; // Store the component's context newTopicButton.onclick = (e) => { e.preventDefault(); const router = api.container.lookup('router:main'); const url = router.generate('new-topic', { queryParams: { category: category.slug } }); router.transitionTo(url); }; container.prepend(newTopicButton); console.log('button added'); } } } });

I spoke to soon that version had a sticky little didRender issue where it didn’t want to post into any categories other than the first one . got llama to fix that api.modifyClass('component:topic-list', { pluginId: 'your-plugin-id', didRender: function() { const category = this.get('category'); if (!category) { console.error('Category not found'); return; } const currentUser = this.currentUser; if (!currentUser) { console.error('Current user not found'); return; } const canCreateTopic = currentUser.can_create_topic; if (canCreateTopic === undefined) { console.error('Can create topic not defined'); return; } console.log('category:', category); console.log('canCreateTopic:', canCreateTopic); if (category && canCreateTopic) { const topicListBody = document.querySelector('.topic-list-body'); const listContainer = document.querySelector('.list-container'); const topicList = document.querySelector('.topic-list'); let container = topicListBody || listContainer || topicList; if (!container) { container = this.element; // Use the component's element as the container } console.log('container:', container); let newTopicButton = container.querySelector('.new-topic-button'); if (!newTopicButton) { newTopicButton = document.createElement('a'); newTopicButton.href = '#'; newTopicButton.className = 'new-topic-button'; container.prepend(newTopicButton); console.log('button added'); } newTopicButton.setAttribute('data-category-id', category.id); newTopicButton.textContent = 'New Topic'; const self = this; // Store the component's context newTopicButton.onclick = (e) => { e.preventDefault(); const router = api.container.lookup('router:main'); const url = router.generate('new-topic', { queryParams: { category: category.slug } }); router.transitionTo(url); }; } } });

Seems like you’ve solved your problem, as I often do when composing requests for help. New Topic Header Button - #67 by patrickemin would provide an example and may be exactly what you’re looking for. Also, tell your engineers they can press the c key to compose a message.

In Central the start a new conversation button is at the bottom of the topic list . Everyone wanted a button up top. I may change it to a small plus but these two screen shots show it . [The image displays a screenshot of a mobile phone browser showing a discussion forum page with various posts visible. (Captioned by AI)] [The image shows a chat window with a user's input and response from an AI. (Captioned by AI)]

@pfaffman I tried the new topic header button as the first attempt. However that does not play well with the new Discourse Central theme

We will need to remove a bunch of old content out of AI rags then as well as wait for post widget models to be fine tuned . Even ask.discourse.com pushed toward the widget route. What will be replacing widgets ? Ill see if I can get a model to spit out code that takes that into account. By the way the bulk of my exercise is to see if I can get a model to do this work since I know virtually noting about js :slight_smile:

[image] Coby David Adams Jr.: By the way the bulk of my exercise is to see if I can get a model to do this work since I know virtually noting about js I know the feeling. [image] Coby David Adams Jr.: What will be replacing widgets ? Glimmer components. Somewhere there is a decent topic describing them. But here’s an example to create the component: javascripts/discourse/components/custom-header-topic-button.gjs main import Component from "@glimmer/component"; import { action } from "@ember/object"; import { getOwner } from "@ember/owner"; import { service } from "@ember/service"; import DButton from "discourse/components/d-button"; import routeAction from "discourse/helpers/route-action"; import Category from "discourse/models/category"; import { i18n } from "discourse-i18n"; export default class CustomHeaderTopicButton extends Component { @service composer; @service currentUser; @service router; get topic() { return this.router.currentRouteName.includes("topic") ? getOwner(this).lookup("controller:topic") : null; } This file has been truncated. show original And here is a javascript way to insert it: javascripts/discourse/initializers/initialize-header-new-topic-button.gjs main import { apiInitializer } from "discourse/lib/api"; import CustomHeaderTopicButton from "../components/custom-header-topic-button"; export default apiInitializer((api) => { api.renderInOutlet("before-header-panel", CustomHeaderTopicButton); }); The other way to insert it is the becoming-old-school way of creating a connector that then inserts the component, but the advantage of the initializer way is that you can then pass the desired plugin outlet to the initializer so you can have a setting the changes where it gets displayed. I think you want to find an example of something that calls shouldDisplay ( or something like that) if you want it to display only sometimes (like if they are logged).

OH my final code that I got llama to spit out last night did nto use widgets but it didnt use glimmer either. I’ll fiddle with glimmer later today api.modifyClass('component:topic-list', { pluginId: 'your-plugin-id', didRender: function() { const category = this.get('category'); if (!category) { console.error('Category not found'); return; } const currentUser = this.currentUser; if (!currentUser) { console.error('Current user not found'); return; } const canCreateTopic = currentUser.can_create_topic; if (canCreateTopic === undefined) { console.error('Can create topic not defined'); return; } console.log('category:', category); console.log('canCreateTopic:', canCreateTopic); if (category && canCreateTopic) { const topicListBody = document.querySelector('.topic-list-body'); const listContainer = document.querySelector('.list-container'); const topicList = document.querySelector('.topic-list'); let container = topicListBody || listContainer || topicList; if (!container) { container = this.element; // Use the component's element as the container } console.log('container:', container); let newTopicButton = container.querySelector('.new-topic-button'); if (!newTopicButton) { newTopicButton = document.createElement('a'); newTopicButton.href = '#'; newTopicButton.className = 'new-topic-button'; container.prepend(newTopicButton); console.log('button added'); } newTopicButton.setAttribute('data-category-id', category.id); newTopicButton.textContent = 'New Topic'; const self = this; // Store the component's context newTopicButton.onclick = (e) => { e.preventDefault(); const router = api.container.lookup('router:main'); const url = router.generate('new-topic', { queryParams: { category: category.slug } }); router.transitionTo(url); }; } } });

Cannot get the js in my component to compile SyntaxError: Private field must be used in an enclosing class

Development

merefield (Robert) September 21, 2024, 3:32pm 8

Widgets are going away. It’s not a good idea to use the widget api.

Use Glimmer Components.

Topic		Replies	Views
New Topic Header Button Theme component official , new-topic-header-button	43	17213	February 15, 2026
Customize new topic button text Theme component official , topic-button-text	29	4502	April 9, 2026
Topic Template Placeholder Text theme component Theme component	60	7815	August 21, 2026
Reply Template Theme component official , reply-template	55	12211	November 2, 2025
Modernizing inline script tags for templates & JS API Development dev-news	46	6286	March 25, 2026

Cannot get the js in my component to compile SyntaxError: Private field must be used in an enclosing class

Related topics