WIP: Generic theme store spike

javascripts/discourse/components/custom-header-links.js

@@ -1,22 +1,40 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { inject as service } from "@ember/service";
 import { dasherize } from "@ember/string";
 
 export default class CustomHeaderLinks extends Component {
+  @service themeStore;
+  @tracked loading = true;
+
+  customHeaderLinks;
+
+  constructor() {
+    super(...arguments);
+
+    this.themeStore
+      .fetch(16, "custom_header_links")
+      .then((result) => {
+        this.customHeaderLinks = result;
+      })
+      .finally(() => {
+        this.loading = false;
+      });
+  }
+
   get shouldShow() {
-    return settings.Custom_header_links?.length > 0;
+    return !this.loading && this.customHeaderLinks?.length > 0;
   }
 
   get links() {
-    return settings.Custom_header_links.split("|").reduce((result, item) => {
-      let [
-        linkText,
-        linkTitle,
-        linkHref,
-        device,
-        target = "",
-        keepOnScroll,
-        locale,
-      ] = item.split(",").map((s) => s.trim());
+    return this.customHeaderLinks.reduce((result, item) => {
+      const linkText = item.name;
+      const linkTitle = item.title;
+      const linkHref = item.url;
+      const device = item.device;
+      const target = item.target || "";
+      const keepOnScroll = item.hide_on_scroll;
+      const locale = item.locale;
 
       if (!linkText || (locale && document.documentElement.lang !== locale)) {
         return result;

settings.yml

@@ -1,10 +1,3 @@
-Custom_header_links:
-  type: list
-  list_type: simple
-  default: "External link, this link will open in a new tab, https://meta.discourse.org, vdo, blank, remove|Most Liked, Posts with the most amount of likes, /latest/?order=op_likes, vdo, self, keep|Privacy, Our Privacy Policy, /privacy, vdm, self, keep"
-  description:
-    en: "Comma delimited in this order: link text, link title, URL, view, target, hide on scroll<br><b>Link text:</b> The text for the link<br><b>Link title:</b> the text that shows when the link is hovered<br><b>URL:</b> The path for the link (can be relative)<br><b>View:</b> vdm = desktop and mobile, vdo = desktop only, vmo = mobile only<br><b>Target:</b> blank = opens in a new tab, self = opens in the same tab<br><b>Hide on scroll:</b> remove = hides the link when the title is expanded on topic pages keep = keeps the link visible even when the title is visible on topic pages<br><b>Language:</b> blank = no locale assoaciated to the link, else insert a locale code (en, fr, de, ...)"
-
 links_position:
   default: right
   type: enum