refactor: add icons to selected/all

fix truncation on category select in composer header

public/src/client/unread.js

@@ -88,12 +88,14 @@ define('forum/unread', [
 				{
 					cid: 'selected',
 					name: '[[unread:selected]]',
-					icon: '',
+					icon: 'fa-regular fa-square-check',
+					color: 'var(--bs-secondary)',
 				},
 				{
 					cid: 'all',
 					name: '[[unread:all]]',
-					icon: '',
+					icon: 'fa-list',
+					color: 'var(--bs-secondary)',
 				},
 			],
 			defaultCategories,

public/src/modules/categoryFilter.js

@@ -82,10 +82,10 @@ define('categoryFilter', ['categorySearch', 'api', 'hooks'], function (categoryS
 					return a - b;
 				});
 				icon.toggleClass('invisible');
-				listEl.find('[data-cid="all"] i').toggleClass('invisible', !!selectedCids.length);
+				listEl.find('[data-cid="all"] [component="category/select/icon"]').toggleClass('invisible', !!selectedCids.length);
 			} else {
 				el.find('[component="category/select/icon"]').addClass('invisible');
-				listEl.find('[data-cid="all"] i').removeClass('invisible');
+				listEl.find('[data-cid="all"] [component="category/select/icon"]').removeClass('invisible');
 				selectedCids = [];
 			}
 

src/views/partials/category/filter-dropdown-content.tpl

@@ -19,7 +19,10 @@
         {{{ if !hideAll }}}
         <li role="presentation" class="category" data-cid="all">
             <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}">
-                <div class="flex-grow-1">[[unread:all-categories]]</div>
+                <div class="flex-grow-1 d-flex gap-1 align-items-center">
+                    <span class="icon d-inline-flex justify-content-center align-items-center align-middle rounded" style="width:24px; height: 24px; font-size: 12px;"><i class="fa fa-fw fa-list text-secondary"></i></span>
+                    <span>[[unread:all-categories]]</span>
+                </div>
                 <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i>
             </a>
         </li>
@@ -33,7 +36,7 @@
                         {{{ if ./icon }}}
                         {buildCategoryIcon(@value, "24px", "rounded-circle")}
                         {{{ end }}}
-                        {./name}
+                        <span class="category-name">{./name}</span>
                     </div>
                 </span>
                 <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !./selected }}}invisible{{{ end }}}"></i>

src/views/partials/category/selector-dropdown-content.tpl

@@ -1,13 +1,13 @@
 <button type="button" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    <span component="category-selector-selected">
+    <span component="category-selector-selected" class="fw-semibold">
         {{{ if (selectedCategory && !showCategorySelectLabel) }}}
         <span class="category-item d-inline-flex align-items-center gap-1">
             {buildCategoryIcon(selectedCategory, "24px", "rounded-circle")}
-            <span class="fw-semibold">{selectedCategory.name}</span>
+            <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="visible-md-inline visible-lg-inline fw-semibold">{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread-tools.select-category]]{{{ end }}}</span>
+        <span class="d-none d-md-inline">{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread-tools.select-category]]{{{ end }}}</span>
         {{{ end }}}
     </span>
 </button>
@@ -25,12 +25,12 @@
         <li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ 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}}}">
-                    <div class="category-item d-inline-flex align-items-center gap-1">
+                    <span class="category-item d-inline-flex align-items-center gap-1">
                         {{{ if ./icon }}}
                         {buildCategoryIcon(@value, "24px", "rounded-circle")}
                         {{{ end }}}
-                        {./name}
+                        <span class="category-name">{./name}</span>
-                    </div>
+                    </span>
                 </span>
             </a>
         </li>