FIX: show both group's full name & name when they differ (#30672)

In the groups page (/g) where we list all the groups, we were only
showing one group "name" per group. If a full name was set, we would
show it, otherwise we would show the group's "display name".

This was somewhat inconsistent because we only show the group's names
in all the various controls we use to filter/search by group.

Plus we used a slightly different logic when displaying the names of a
group on the "group page".

So I updated the "GroupsInfo" component to show either 1 or 2 names
depending on whether a full name is set, and it's different from the
display name or the name of the group.

I used this component in the "group page" so the names will be
consistent between the "groups page" and the "group page".

Also renamed the "GroupsInfo" component to "GroupInfo" since it only
ever deals with 1 group at a time.

Ref - https://meta.discourse.org/t/-/345415

---

## When "full name" differs from the "group's name"

(cf. `@admins`, `@staff`, and `@moderators`)

<img width="1250" alt="Screenshot 2025-01-09 at 15 56 29"
src="https://github.com/user-attachments/assets/f8a0ecdd-2715-40d9-a1ed-26288f638d9f"
/>

## When "full name" is the same as the "group's name"

When `unicode` is allowed in usernames, then the group's full name is
the same as the group's name, so we only show one name.

<img width="1249" alt="Screenshot 2025-01-09 at 16 25 53"
src="https://github.com/user-attachments/assets/03438fbd-04f1-4672-91d5-bd6af2b32475"
/>

app/assets/javascripts/discourse/app/components/group-info.gjs

@@ -0,0 +1,37 @@
+import Component from "@glimmer/component";
+import { hash } from "@ember/helper";
+import PluginOutlet from "discourse/components/plugin-outlet";
+
+export default class GroupInfo extends Component {
+  <template>
+    <PluginOutlet
+      @name="group-info-details"
+      @outletArgs={{hash group=@group}}
+      @defaultGlimmer={{true}}
+    >
+      <span class="group-info-details">
+        <span class="group-info-name">
+          {{this.name}}
+        </span>
+        {{#if this.mentionName}}
+          <span class="group-info-mention-name">
+            {{this.mentionName}}
+          </span>
+        {{/if}}
+      </span>
+    </PluginOutlet>
+  </template>
+
+  get names() {
+    const { full_name, display_name, name } = this.args.group;
+    return [...new Set([full_name, display_name, name].filter(Boolean))];
+  }
+
+  get name() {
+    return this.names[0];
+  }
+
+  get mentionName() {
+    return this.names[1] ? `@${this.names[1]}` : null;
+  }
+}

app/assets/javascripts/discourse/app/components/groups-info.gjs

@@ -1,19 +0,0 @@
-import { hash } from "@ember/helper";
-import { or } from "truth-helpers";
-import PluginOutlet from "discourse/components/plugin-outlet";
-
-const GroupsInfo = <template>
-  <PluginOutlet
-    @name="group-info-details"
-    @outletArgs={{hash group=@group}}
-    @defaultGlimmer={{true}}
-  >
-    <span class="group-info-details">
-      <span class="groups-info-name">
-        {{or @group.full_name @group.displayName}}
-      </span>
-    </span>
-  </PluginOutlet>
-</template>;
-
-export default GroupsInfo;

app/assets/javascripts/discourse/app/templates/group.hbs

@@ -31,15 +31,7 @@
       {{/if}}
 
       <div class="group-info-names">
-        <span class="group-info-name">
-          {{or this.model.full_name this.model.name}}
-        </span>
-
-        {{#if this.model.full_name}}
-          <div class="group-info-full-name">
-            {{this.model.name}}
-          </div>
-        {{/if}}
+        <GroupInfo @group={{this.model}} />
 
         {{#if (and this.canManageGroup this.model.automatic)}}
           <DTooltip class="group-automatic-tooltip">

app/assets/javascripts/discourse/app/templates/groups/index.hbs

@@ -65,7 +65,7 @@
                   {{/if}}
 
                   <span class="group-info">
-                    <GroupsInfo @group={{group}} />
+                    <GroupInfo @group={{group}} />
                     <div class="group-user-count">{{d-icon
                         "user"
                       }}{{group.user_count}}</div>

app/assets/stylesheets/common/base/groups.scss

@@ -111,12 +111,6 @@
       }
     }
 
-    .groups-info-name {
-      font-size: var(--font-up-1);
-      font-weight: bold;
-      color: var(--primary);
-    }
-
     $size: 40px;
     $icon-size: math.div($size, 1.8);
 

app/models/group.rb

@@ -502,6 +502,11 @@ class Group < ActiveRecord::Base
     end
   end
 
+  def self.can_use_name?(name, group)
+    UsernameValidator.new(name).valid_format? &&
+      (group.name == name || !User.username_exists?(name))
+  end
+
   def self.refresh_automatic_group!(name)
     return unless id = AUTO_GROUPS[name]
 
@@ -519,9 +524,16 @@ class Group < ActiveRecord::Base
 
     # don't allow shoddy localization to break this
     localized_name = I18n.t("groups.default_names.#{name}", locale: SiteSetting.default_locale)
-    validator = UsernameValidator.new(localized_name)
+    default_name = I18n.t("groups.default_names.#{name}")
 
-    group.name = localized_name if validator.valid_format? && !User.username_exists?(localized_name)
+    group.name =
+      if can_use_name?(localized_name, group)
+        localized_name
+      elsif can_use_name?(default_name, group)
+        default_name
+      else
+        name.to_s
+      end
 
     # the everyone group is special, it can include non-users so there is no
     # way to have the membership in a table

config/site_settings.yml

@@ -692,7 +692,7 @@ users:
       cs: "[ěščřžýáíéóůúďťňĚŠČŘŽÝÁÍÉÓŮÚĎŤŇ]"
       de: "[äöüßÄÖÜẞ]"
       fi: "[åäöÅÄÖ]"
-      ja: '[\p{Han}\p{Katakana}\p{Hiragana}]'
+      ja: '[\p{Han}\p{Katakana}\p{Hiragana}ー]'
       ko: '\p{Hangul}'
       zh_CN: '\p{Han}'
       zh_TW: '\p{Han}'