FEATURE: Let users select flair (#13587)

User flair was given by user's primary group. This PR separates the
two, adds a new field to the user model for flair group ID and users
can select their flair from user preferences now.

app/assets/javascripts/select-kit/addon/components/flair-chooser.js

@@ -0,0 +1,14 @@
+import ComboBoxComponent from "select-kit/components/combo-box";
+
+export default ComboBoxComponent.extend({
+  pluginApiIdentifiers: ["flair-chooser"],
+  classNames: ["flair-chooser"],
+
+  selectKitOptions: {
+    selectedNameComponent: "selected-flair",
+  },
+
+  modifyComponentForRow() {
+    return "flair-row";
+  },
+});

app/assets/javascripts/select-kit/addon/components/flair-row.js

@@ -0,0 +1,7 @@
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+import layout from "select-kit/templates/components/flair-row";
+
+export default SelectKitRowComponent.extend({
+  layout,
+  classNames: ["flair-row"],
+});

app/assets/javascripts/select-kit/addon/components/selected-flair.js

@@ -0,0 +1,7 @@
+import SelectedNameComponent from "select-kit/components/selected-name";
+import layout from "select-kit/templates/components/flair-row";
+
+export default SelectedNameComponent.extend({
+  layout,
+  tagName: "",
+});

app/assets/javascripts/select-kit/addon/templates/components/flair-row.hbs

@@ -0,0 +1,10 @@
+{{#if item.url}}
+  {{avatar-flair
+    flairName=item.name
+    flairUrl=item.url
+    flairBgColor=item.bgColor
+    flairColor=item.color
+  }}
+{{/if}}
+
+<span>{{label}}</span>