From 970a42043348deb9e5c77e6e53c84ddb04343eeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Sat, 21 Feb 2026 12:26:45 -0500
Subject: [PATCH] refactor: add icons to selected/all

fix truncation on category select in composer header
---
 public/src/client/unread.js                          |  6 ++++--
 public/src/modules/categoryFilter.js                 |  4 ++--
 .../partials/category/filter-dropdown-content.tpl    |  7 +++++--
 .../partials/category/selector-dropdown-content.tpl  | 12 ++++++------
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/public/src/client/unread.js b/public/src/client/unread.js
index 240d426a53..6851ba1ec4 100644
--- a/public/src/client/unread.js
+++ b/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,
diff --git a/public/src/modules/categoryFilter.js b/public/src/modules/categoryFilter.js
index 4f330be091..1f624b4415 100644
--- a/public/src/modules/categoryFilter.js
+++ b/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 = [];
 			}
 
diff --git a/src/views/partials/category/filter-dropdown-content.tpl b/src/views/partials/category/filter-dropdown-content.tpl
index 8e92c5d7cf..4905ce3cc2 100644
--- a/src/views/partials/category/filter-dropdown-content.tpl
+++ b/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>
diff --git a/src/views/partials/category/selector-dropdown-content.tpl b/src/views/partials/category/selector-dropdown-content.tpl
index 260ad4fa9a..e3941a1b8e 100644
--- a/src/views/partials/category/selector-dropdown-content.tpl
+++ b/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}
-                    </div>
+                        <span class="category-name">{./name}</span>
+                    </span>
                 </span>
             </a>
         </li>