Fix Composer Icon Chips Dropdown

AGENTS.md

@@ -100,11 +100,6 @@ Complete the following:
 
 Tasks to be considered in the future, not implemented immediately. Keep them in scope when making decisions.
 
-- [ ] Consider a light mode/dark mode toggle while retaining core theme, preferably without adding a Skin
-- [ ] Un-bold "topics" and "posts" and make the color lines replace the black line drived from category background color to either use the foreground color of the icon, or an ornate gilding like the icons (image 2)
-- [ ] Consider making the category names a bit smoother; it looks like it's not anti-aliased. (image 3)
-- [ ] Mobile website doesn't use the correct fonts.
-
 - [-] Implement curated game-icons support for category/subcategory icons: sanitize selected SVGs into mask-friendly theme assets, expose them through `staticDirs`, add reusable `wg-icon-*` CSS mask classes, and include category custom classes in the local category/subcategory templates if Harmony data supports them.
   - [x] Phase 1: Build our icon stack.
     - [x] Recommend icons from the game-icons pack for forum categories and their subcategories. See `GAME_ICONS.md`.

scss/westgate/_categories.scss

@@ -108,20 +108,23 @@ $wg-game-icons: (
 
 .westgate-category-header-icon[class*="wg-icon-"] > .icon,
 li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-0 > .icon,
-.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon {
+.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon,
+.category-item[class*="wg-icon-"] > .icon {
 	position: relative;
 	color: var(--wg-ledger-ink);
 }
 
 .westgate-category-header-icon[class*="wg-icon-"] > .icon > i,
 li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-0 > .icon > i,
-.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon > i {
+.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon > i,
+.category-item[class*="wg-icon-"] > .icon > i {
 	opacity: 0;
 }
 
 .westgate-category-header-icon[class*="wg-icon-"] > .icon::before,
 li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-0 > .icon::before,
-.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon::before {
+.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon::before,
+.category-item[class*="wg-icon-"] > .icon::before {
 	content: "";
 	position: absolute;
 	inset: 13%;
@@ -143,10 +146,15 @@ li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-
 	inset: 16%;
 }
 
+.category-item[class*="wg-icon-"] > .icon::before {
+	inset: 18%;
+}
+
 @each $name, $file in $wg-game-icons {
 	.westgate-category-header-icon.wg-icon-#{$name} > .icon::before,
 	li[component="categories/category"].wg-icon-#{$name} > .d-flex > .flex-shrink-0 > .icon::before,
-	.category-children-item.wg-icon-#{$name} > .westgate-category-child > .icon::before {
+	.category-children-item.wg-icon-#{$name} > .westgate-category-child > .icon::before,
+	.category-item.wg-icon-#{$name} > .icon::before {
 		-webkit-mask-image: url("#{$wg-game-icon-path}#{$file}");
 		mask-image: url("#{$wg-game-icon-path}#{$file}");
 	}

templates/partials/category/selector-dropdown-content.tpl

@@ -0,0 +1,39 @@
+<button type="button" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 dropdown-toggle h-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <span component="category-selector-selected" class="fw-semibold">
+        {{{ if (selectedCategory && !showCategorySelectLabel) }}}
+        <span class="category-item d-inline-flex align-items-center gap-1 {{{ if selectedCategory.class }}}{selectedCategory.class}{{{ end }}}">
+            {buildCategoryIcon(selectedCategory, "24px", "rounded-circle")}
+            <span class="category-name">{selectedCategory.name}</span>
+        </span>
+        {{{ else }}}
+        <i class="fa fa-fw {{{ if selectCategoryIcon }}}{selectCategoryIcon}{{{ else }}}fa-list{{{ end }}} text-primary"></i>
+        <span class="d-none d-md-inline">{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread-tools.select-category]]{{{ end }}}</span>
+        {{{ end }}}
+    </span>
+</button>
+
+<div class="dropdown-menu p-1">
+    <div component="category-selector-search" class="p-1 hidden">
+        <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
+        <hr class="mt-2 mb-0"/>
+    </div>
+    <ul component="category/list" class="list-unstyled mb-0 text-sm category-dropdown-menu ghost-scrollbar" role="menu">
+        <li component="category/no-matches" role="presentation" class="category hidden">
+            <a class="dropdown-item rounded-1" role="menuitem">[[search:no-matches]]</a>
+        </li>
+        {{{ each categoryItems }}}
+        <li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ end }}}{{{ if ./class }}} {./class}{{{ end }}}" data-cid="{./cid}" data-name="{./name}" data-parent-cid="{./parentCid}">
+            <a class="dropdown-item rounded-1 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menuitem" href="#">{./level}
+                <span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
+                    <span class="category-item d-inline-flex align-items-center gap-1 {{{ if ./class }}}{./class}{{{ end }}}">
+                        {{{ if ./icon }}}
+                        {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                        {{{ end }}}
+                        <span class="category-name">{./name}</span>
+                    </span>
+                </span>
+            </a>
+        </li>
+        {{{ end }}}
+    </ul>
+</div>