DEV: Modernize signature preferences component (#101)

This updates the signature preferences connector to use modern Ember patterns and the new plugin API.

Changes:
- Convert to Glimmer component with `@service` injection
- Replace classic `<Input>` with native `<input>` and `{{on}}` modifier
- Use new `api.addSaveableCustomFields("profile")` API instead of `modifyClass save()` override
- Remove dead `@showUploadModal` argument from `DEditor`
- Add CSS to hide preview panel and match bio editor width

The `modifyClass` pattern for saving `custom_fields` was broken because `saveAttrNames` is now a getter that returns a fresh array on each call, so pushing to it in `save()` had no effect. The new `addSaveableCustomFields` API uses value transformers to properly add "`custom_fields`" to the save attributes.

cf. https://github.com/discourse/discourse/pull/36757

.discourse-compatibility

@@ -1,3 +1,4 @@
+< 3.6.0.beta3-dev: bf969e997950d703f0af5ee28f8700eed19cad75
 < 2025.12.0-latest: a8a305227da023ff1ce7ac4d702fc2204d9b5e2f
 < 3.6.0.beta1-dev: 7d6b0623ec27e986182b2e245bfaf886b7faecb1
 < 3.5.0.beta8-dev: c0d69bd03fb2ec0c0169965464d5ba138ad28414

assets/javascripts/discourse/connectors/user-custom-preferences/signature-preferences.gjs

@@ -1,39 +1,60 @@
-import Component, { Input } from "@ember/component";
-import { classNames, tagName } from "@ember-decorators/component";
+import Component from "@glimmer/component";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
 import DEditor from "discourse/components/d-editor";
 import { i18n } from "discourse-i18n";
 
-@tagName("div")
-@classNames("user-custom-preferences-outlet", "signature-preferences")
 export default class SignaturePreferences extends Component {
+  @service siteSettings;
+
+  @action
+  updateSeeSignatures(event) {
+    const model = this.args.model;
+    model.set("see_signatures", event.target.checked);
+    model.set("custom_fields.see_signatures", event.target.checked);
+  }
+
+  @action
+  updateSignatureUrl(event) {
+    this.args.model.set("custom_fields.signature_url", event.target.value);
+  }
+
   <template>
     {{#if this.siteSettings.signatures_enabled}}
-      <div class="control-group signatures">
-        <label class="control-label">{{i18n
-            "signatures.enable_signatures"
-          }}</label>
-        <div class="controls">
-          <label class="checkbox-label">
-            <Input @type="checkbox" @checked={{this.model.see_signatures}} />
-            {{i18n "signatures.show_signatures"}}
-          </label>
+      <div class="user-custom-preferences-outlet signature-preferences">
+        <div class="control-group signatures">
+          <label class="control-label">{{i18n
+              "signatures.enable_signatures"
+            }}</label>
+          <div class="controls">
+            <label class="checkbox-label">
+              <input
+                type="checkbox"
+                checked={{@model.see_signatures}}
+                {{on "change" this.updateSeeSignatures}}
+              />
+              {{i18n "signatures.show_signatures"}}
+            </label>
+          </div>
+        </div>
+        <div class="control-group signatures">
+          <label class="control-label">{{i18n
+              "signatures.my_signature"
+            }}</label>
+          <div class="controls input-xxlarge">
+            {{#if this.siteSettings.signatures_advanced_mode}}
+              <DEditor @value={{@model.custom_fields.signature_raw}} />
+            {{else}}
+              <input
+                type="text"
+                placeholder={{i18n "signatures.signature_placeholder"}}
+                value={{@model.custom_fields.signature_url}}
+                {{on "input" this.updateSignatureUrl}}
+              />
+            {{/if}}
+          </div>
         </div>
-      </div>
-      <div class="control-group signatures">
-        <label class="control-label">{{i18n "signatures.my_signature"}}</label>
-        {{#if this.siteSettings.signatures_advanced_mode}}
-          <DEditor
-            @value={{this.model.custom_fields.signature_raw}}
-            @showUploadModal="showUploadModal"
-          />
-        {{else}}
-          <Input
-            @type="text"
-            class="input-xxlarge"
-            placeholder={{i18n "signatures.signature_placeholder"}}
-            @value={{this.model.custom_fields.signature_url}}
-          />
-        {{/if}}
       </div>
     {{/if}}
   </template>

assets/javascripts/discourse/initializers/extend-for-signatures.js

@@ -1,39 +1,16 @@
-import { action } from "@ember/object";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import PostSignature from "../components/post-signature";
 
-function customizePost(api) {
-  api.addTrackedPostProperties("user_signature");
-
-  api.renderAfterWrapperOutlet("post-content-cooked-html", PostSignature);
-}
-
-function addSetting(api) {
-  api.modifyClass(
-    "controller:preferences/profile",
-    (Superclass) =>
-      class extends Superclass {
-        @action
-        save() {
-          this.set(
-            "model.custom_fields.see_signatures",
-            this.get("model.see_signatures")
-          );
-          this.get("saveAttrNames").push("custom_fields");
-          super.save();
-        }
-      }
-  );
-}
-
 export default {
   name: "extend-for-signatures",
   initialize(container) {
-    const siteSettings = container.lookup("service:site-settings");
-    if (siteSettings.signatures_enabled) {
+    const { signatures_enabled } = container.lookup("service:site-settings");
+
+    if (signatures_enabled) {
       withPluginApi((api) => {
-        customizePost(api);
-        addSetting(api);
+        api.addTrackedPostProperties("user_signature");
+        api.renderAfterWrapperOutlet("post-content-cooked-html", PostSignature);
+        api.addSaveableCustomFields("profile");
       });
     }
   },

assets/stylesheets/common/signatures.scss

@@ -1,3 +1,15 @@
 .user-signature img {
   max-width: calc(100% - 5px);
 }
+
+.signature-preferences .d-editor {
+  width: 100%;
+
+  .d-editor-preview-wrapper {
+    display: none;
+  }
+
+  .d-editor-textarea-wrapper {
+    flex: 1;
+  }
+}