Publicaré un componente temático en GitHub para agregar un botón de cierre de sesión al menú superior si alguien pudiera informarme cómo actualizar el código de @pfaffman aquí…
(Por el momento, seguir esas instrucciones y habilitar el componente solo hace que desaparezca todo el menú superior 
)
Algo así. Siéntete libre de ajustar según tus necesidades.
import DButton from "discourse/components/d-button";
import routeAction from "discourse/helpers/route-action";
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer("1.28.0", (api) => {
if (api.getCurrentUser()) {
api.headerIcons.add(
"logout",
`<template>
<li class="logout">
<DButton
@action={{routeAction "logout"}}
class="btn-flat icon"
@icon="sign-out-alt"
@title="user.log_out"
@label="user.log_out"
/>
</li>
</template>`,
{ before: "auth" }
);
}
});
.d-header-icons .logout {
margin-left: 1em;
button.icon {
width: auto;
padding-left: 0.5em;
padding-right: 0.5em;
svg {
margin-right: 0.2em;
width: 1em;
}
}
}
OK, lo he implementado, pero agradecería cualquier prueba antes de enviarlo a Meta…
(Terminé usando el enlace de Carson Central Theme Header User Icons - #4 by carson como punto de partida)
No recomendaría usar un widget; eventualmente desaparecerá como parte de la modernización principal.
Lo mismo ocurre con api.addToHeaderIcons; ahora está obsoleto en favor de api.headerIcons.add.
Aquí hay algunas sugerencias:
Te animo a usar GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes como referencia al crear un componente de tema. Contiene los últimos archivos de configuración. Es útil para linting/prettifying código y una buena práctica tener una estructura estándar.
Al usar la sintaxis de \u003ctemplate\u003e, renombra el archivo con .gjs (glimmer JS); de lo contrario, puede que no funcione.
En mi ejemplo, podrías mover la plantilla a su archivo, por ejemplo:
/javascripts/discourse/components/logout-header-button.gjs
import DButton from "discourse/components/d-button";
import routeAction from "discourse/helpers/route-action";
const LogoutHeaderButton = \u003ctemplate\u003e
\u003cli class="logout"\u003e
\u003cDButton
@action={{routeAction "logout"}}
class="btn-flat icon"
@icon="sign-out-alt"
@title="user.log_out"
@label="user.log_out"
/\u003e
\u003c/li\u003e
\u003c/template\u003e;
export default LogoutHeaderButton;
Luego, en el inicializador, importas el componente y lo usas como parámetro en headerIcons:
import LogoutHeaderButton from "../components/logout-header-button";
export default apiInitializer("1.28.0", (api) =\u003e {
if (api.getCurrentUser()) {
api.headerIcons.add("logout", LogoutHeaderButton, { before: "auth" });
}
});
Avísame si tienes preguntas. Siempre puedo hacer un PR más tarde si necesitas un ejemplo. 
Simplemente increíble. ¡Muchas gracias por tomarte el tiempo de guiarme!