feat(task-filters): enhance localization and UI for task filters

- Added new translation keys for task filter functionalities across multiple languages, improving user experience and accessibility.
- Updated the ImprovedTaskFilters component to utilize localized strings for search placeholders, loading states, and filter messages.
- Enhanced styling for filter buttons and dropdowns to ensure consistency in both light and dark modes.
- Introduced a description column in task management components, improving the display of task details.

worklenz-frontend/public/locales/alb/task-list-filters.json

@@ -55,5 +55,18 @@
   "selectCategory": "Zgjidh një kategori",
   "pleaseEnterAName": "Ju lutemi vendosni një emër",
   "pleaseSelectACategory": "Ju lutemi zgjidhni një kategori",
-  "create": "Krijo"
+  "create": "Krijo",
+
+  "searchTasks": "Kërko detyrat...",
+  "searchPlaceholder": "Kërko...",
+  "fieldsText": "Fushat",
+  "loadingFilters": "Duke ngarkuar filtrat...",
+  "noOptionsFound": "Nuk u gjetën opsione",
+  "filtersActive": "filtra aktiv",
+  "filterActive": "filtër aktiv",
+  "clearAll": "Pastro të gjitha",
+  "clearing": "Duke pastruar...",
+  "cancel": "Anulo",
+  "search": "Kërko",
+  "groupedBy": "Grupuar sipas"
 }

worklenz-frontend/public/locales/de/task-list-filters.json

@@ -55,5 +55,18 @@
   "selectCategory": "Kategorie auswählen",
   "pleaseEnterAName": "Bitte geben Sie einen Namen ein",
   "pleaseSelectACategory": "Bitte wählen Sie eine Kategorie aus",
-  "create": "Erstellen"
+  "create": "Erstellen",
+
+  "searchTasks": "Aufgaben suchen...",
+  "searchPlaceholder": "Suchen...",
+  "fieldsText": "Felder",
+  "loadingFilters": "Filter werden geladen...",
+  "noOptionsFound": "Keine Optionen gefunden",
+  "filtersActive": "Filter aktiv",
+  "filterActive": "Filter aktiv",
+  "clearAll": "Alle löschen",
+  "clearing": "Löschen...",
+  "cancel": "Abbrechen",
+  "search": "Suchen",
+  "groupedBy": "Gruppiert nach"
 }

worklenz-frontend/public/locales/en/task-list-filters.json

@@ -55,5 +55,18 @@
   "selectCategory": "Select a category",
   "pleaseEnterAName": "Please enter a name",
   "pleaseSelectACategory": "Please select a category",
-  "create": "Create"
+  "create": "Create",
+
+  "searchTasks": "Search tasks...",
+  "searchPlaceholder": "Search...",
+  "fieldsText": "Fields",
+  "loadingFilters": "Loading filters...",
+  "noOptionsFound": "No options found",
+  "filtersActive": "filters active",
+  "filterActive": "filter active",
+  "clearAll": "Clear all",
+  "clearing": "Clearing...",
+  "cancel": "Cancel",
+  "search": "Search",
+  "groupedBy": "Grouped by"
 }

worklenz-frontend/public/locales/es/task-list-filters.json

@@ -51,5 +51,18 @@
   "selectCategory": "Seleccionar una categoría",
   "pleaseEnterAName": "Por favor, ingrese un nombre",
   "pleaseSelectACategory": "Por favor, seleccione una categoría",
-  "create": "Crear"
+  "create": "Crear",
+
+  "searchTasks": "Buscar tareas...",
+  "searchPlaceholder": "Buscar...",
+  "fieldsText": "Campos",
+  "loadingFilters": "Cargando filtros...",
+  "noOptionsFound": "No se encontraron opciones",
+  "filtersActive": "filtros activos",
+  "filterActive": "filtro activo",
+  "clearAll": "Limpiar todo",
+  "clearing": "Limpiando...",
+  "cancel": "Cancelar",
+  "search": "Buscar",
+  "groupedBy": "Agrupado por"
 }

worklenz-frontend/public/locales/pt/task-list-filters.json

@@ -52,5 +52,18 @@
   "selectCategory": "Selecionar uma categoria",
   "pleaseEnterAName": "Por favor, insira um nome",
   "pleaseSelectACategory": "Por favor, selecione uma categoria",
-  "create": "Criar"
+  "create": "Criar",
+
+  "searchTasks": "Pesquisar tarefas...",
+  "searchPlaceholder": "Pesquisar...",
+  "fieldsText": "Campos",
+  "loadingFilters": "Carregando filtros...",
+  "noOptionsFound": "Nenhuma opção encontrada",
+  "filtersActive": "filtros ativos",
+  "filterActive": "filtro ativo",
+  "clearAll": "Limpar tudo",
+  "clearing": "Limpando...",
+  "cancel": "Cancelar",
+  "search": "Pesquisar",
+  "groupedBy": "Agrupado por"
 }

worklenz-frontend/src/components/task-list-v2/SubtaskLoadingSkeleton.tsx

@@ -32,6 +32,12 @@ const SubtaskLoadingSkeleton: React.FC<SubtaskLoadingSkeletonProps> = ({ visible
             <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
           </div>
         );
+      case 'description':
+        return (
+          <div style={baseStyle} className="flex items-center px-2">
+            <div className="h-4 w-40 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+          </div>
+        );
       case 'status':
         return (
           <div style={baseStyle} className="flex items-center">

worklenz-frontend/src/components/task-list-v2/TaskRow.tsx

@@ -352,6 +352,24 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
           </div>
         );
 
+      case 'description':
+        return (
+          <div style={baseStyle} className="px-2">
+            <div
+              className="text-sm text-gray-600 dark:text-gray-400 truncate"
+              style={{
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                maxHeight: '24px',
+                lineHeight: '24px',
+              }}
+              title={task.description || ''}
+              dangerouslySetInnerHTML={{ __html: task.description || '' }}
+            />
+          </div>
+        );
+
       case 'status':
         return (
           <div style={baseStyle}>

worklenz-frontend/src/components/task-list-v2/TaskRowWithSubtasks.tsx

@@ -93,6 +93,8 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
         return <div style={baseStyle} />;
       case 'taskKey':
         return <div style={baseStyle} />;
+      case 'description':
+        return <div style={baseStyle} />;
       case 'title':
         return (
           <div className="flex items-center h-full" style={baseStyle}>

worklenz-frontend/src/components/task-list-v2/components/AddTaskRow.tsx

@@ -92,6 +92,7 @@ const AddTaskRow: React.FC<AddTaskRowProps> = memo(({
       case 'dragHandle':
       case 'checkbox':
       case 'taskKey':
+      case 'description':
         return <div style={baseStyle} />;
       case 'title':
         return (

worklenz-frontend/src/components/task-list-v2/constants/columns.ts

@@ -17,6 +17,7 @@ export const BASE_COLUMNS = [
   { id: 'checkbox', label: '', width: '28px', isSticky: true, key: 'checkbox' },
   { id: 'taskKey', label: 'keyColumn', width: '100px', key: COLUMN_KEYS.KEY, minWidth: '100px', maxWidth: '150px' },
   { id: 'title', label: 'taskColumn', width: '470px', isSticky: true, key: COLUMN_KEYS.NAME },
+  { id: 'description', label: 'descriptionColumn', width: '260px', key: COLUMN_KEYS.DESCRIPTION },
   { id: 'status', label: 'statusColumn', width: '120px', key: COLUMN_KEYS.STATUS },
   { id: 'assignees', label: 'assigneesColumn', width: '150px', key: COLUMN_KEYS.ASSIGNEES },
   { id: 'priority', label: 'priorityColumn', width: '120px', key: COLUMN_KEYS.PRIORITY },

worklenz-frontend/src/components/task-management/improved-task-filters.tsx

@@ -372,6 +372,7 @@ const FilterDropdown: React.FC<{
   isDarkMode,
   className = '',
 }) => {
+  const { t } = useTranslation('task-list-filters');
   // Add permission checks for groupBy section
   const isOwnerOrAdmin = useAuthService().isOwnerOrAdmin();
   const isProjectManager = useIsProjectManager();
@@ -447,7 +448,7 @@ const FilterDropdown: React.FC<{
             selectedCount > 0
               ? isDarkMode
                 ? 'bg-gray-600 text-white border-gray-500'
-                : 'bg-blue-50 text-blue-800 border-blue-300 font-semibold'
+                : 'bg-gray-200 text-gray-800 border-gray-300 font-semibold'
               : `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
           }
           hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2
@@ -458,7 +459,14 @@ const FilterDropdown: React.FC<{
       >
         <IconComponent className="w-3.5 h-3.5" />
         <span>{section.label}</span>
-        {selectedCount > 0 && (
+        {/* Show selected option for single-select (group by) */}
+        {section.id === 'groupBy' && selectedCount > 0 && (
+          <span className={`text-xs ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
+            {section.options.find(opt => opt.value === section.selectedValues[0])?.label}
+          </span>
+        )}
+        {/* Show count for multi-select filters */}
+        {section.id !== 'groupBy' && selectedCount > 0 && (
           <span className="inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-gray-500 rounded-full">
             {selectedCount}
           </span>
@@ -489,7 +497,7 @@ const FilterDropdown: React.FC<{
                 <input
                   value={searchTerm}
                   onChange={e => setSearchTerm(e.target.value)}
-                  placeholder={`Search ${section.label.toLowerCase()}...`}
+                  placeholder={`${t('searchPlaceholder')} ${section.label.toLowerCase()}...`}
                   className={`w-full pl-8 pr-2 py-1 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150 ${
                     isDarkMode
                       ? 'bg-gray-700 text-gray-100 placeholder-gray-400 border-gray-600'
@@ -504,7 +512,7 @@ const FilterDropdown: React.FC<{
           <div className="max-h-48 overflow-y-auto">
             {filteredOptions.length === 0 ? (
               <div className={`p-2 text-xs text-center ${themeClasses.secondaryText}`}>
-                No options found
+                {t('noOptionsFound')}
               </div>
             ) : (
               <div className="p-0.5">
@@ -522,12 +530,13 @@ const FilterDropdown: React.FC<{
                           isSelected
                             ? isDarkMode
                               ? 'bg-gray-600 text-white'
-                              : 'bg-blue-50 text-blue-800 font-semibold'
+                              : 'bg-gray-200 text-gray-800 font-semibold'
                             : `${themeClasses.optionText} ${themeClasses.optionHover}`
                         }
                       `}
                     >
-                      {/* Checkbox/Radio indicator */}
+                      {/* Checkbox/Radio indicator - hide for group by */}
+                      {section.id !== 'groupBy' && (
                         <div
                           className={`
                           flex items-center justify-center w-3.5 h-3.5 border rounded
@@ -540,6 +549,7 @@ const FilterDropdown: React.FC<{
                         >
                           {isSelected && <CheckOutlined className="w-2.5 h-2.5" />}
                         </div>
+                      )}
 
                       {/* Color indicator */}
                       {option.color && (
@@ -588,7 +598,8 @@ const SearchFilter: React.FC<{
   placeholder?: string;
   themeClasses: any;
   className?: string;
-}> = ({ value, onChange, placeholder = 'Search tasks...', themeClasses, className = '' }) => {
+}> = ({ value, onChange, placeholder, themeClasses, className = '' }) => {
+  const { t } = useTranslation('task-list-filters');
   const [isExpanded, setIsExpanded] = useState(false);
   const [localValue, setLocalValue] = useState(value);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -622,14 +633,14 @@ const SearchFilter: React.FC<{
       {!isExpanded ? (
         <button
           onClick={handleToggle}
-          className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText} ${
+          className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 ${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText} ${
             themeClasses.containerBg === 'bg-gray-800'
               ? 'focus:ring-offset-gray-900'
               : 'focus:ring-offset-white'
           }`}
         >
           <SearchOutlined className="w-3.5 h-3.5" />
-          <span>Search</span>
+          <span>{t('search')}</span>
         </button>
       ) : (
         <form onSubmit={handleSubmit} className="flex items-center gap-1.5">
@@ -640,8 +651,8 @@ const SearchFilter: React.FC<{
               type="text"
               value={localValue}
               onChange={e => setLocalValue(e.target.value)}
-              placeholder={placeholder}
+              placeholder={placeholder || t('searchTasks')}
-              className={`w-full pr-4 pl-8 py-1 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150 ${
+                                className={`w-full pr-4 pl-8 py-1 rounded border focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors duration-150 ${
                     isDarkMode
                       ? 'bg-gray-700 text-gray-100 placeholder-gray-400 border-gray-600'
                       : 'bg-white text-gray-900 placeholder-gray-400 border-gray-300'
@@ -659,16 +670,20 @@ const SearchFilter: React.FC<{
           </div>
           <button
             type="submit"
-            className="px-2.5 py-1.5 text-xs font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200"
+            className={`px-2.5 py-1.5 text-xs font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors duration-200 ${
+              isDarkMode
+                ? 'text-white bg-gray-600 hover:bg-gray-700'
+                : 'text-gray-800 bg-gray-200 hover:bg-gray-300'
+            }`}
                       >
-            Search
+              {t('search')}
             </button>
           <button
             type="button"
             onClick={() => setIsExpanded(false)}
             className={`px-2.5 py-1.5 text-xs font-medium transition-colors duration-200 ${themeClasses.secondaryText} hover:${themeClasses.optionText}`}
                       >
-            Cancel
+              {t('cancel')}
             </button>
         </form>
       )}
@@ -682,6 +697,7 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
   themeClasses,
   isDarkMode,
 }) => {
+  const { t } = useTranslation('task-list-filters');
   const dispatch = useDispatch();
   const fieldsRaw = useSelector((state: RootState) => state.taskManagementFields);
   const fields = Array.isArray(fieldsRaw) ? fieldsRaw : [];
@@ -734,17 +750,17 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
             visibleCount > 0
               ? isDarkMode
                 ? 'bg-gray-600 text-white border-gray-500'
-                : 'bg-blue-50 text-blue-800 border-blue-300 font-semibold'
+                : 'bg-gray-200 text-gray-800 border-gray-300 font-semibold'
               : `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
           }
-          hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
+          hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2
           ${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
         `}
         aria-expanded={open}
         aria-haspopup="true"
       >
         <EyeOutlined className="w-3.5 h-3.5" />
-        <span>Fields</span>
+        <span>{t('fieldsText')}</span>
         {visibleCount > 0 && (
           <span
             className={`inline-flex items-center justify-center w-4 h-4 text-xs font-bold ${isDarkMode ? 'text-white bg-gray-500' : 'text-gray-800 bg-gray-300'} rounded-full`}
@@ -766,7 +782,7 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
           <div className="max-h-48 overflow-y-auto">
             {sortedFields.length === 0 ? (
                           <div className={`p-2 text-xs text-center ${themeClasses.secondaryText}`}>
-                No fields available
+              {t('noOptionsFound')}
             </div>
             ) : (
               <div className="p-0.5">
@@ -881,7 +897,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
   const { projectView } = useTabSearchParam();
 
   // Theme-aware class names - memoize to prevent unnecessary re-renders
-  // Using task list row colors for consistency: --task-bg-primary: #1f1f1f, --task-bg-secondary: #141414
+  // Using greyish colors for both dark and light modes
   const themeClasses = useMemo(
     () => ({
       containerBg: isDarkMode ? 'bg-[#1f1f1f]' : 'bg-white',
@@ -897,8 +913,8 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
       dividerBorder: isDarkMode ? 'border-[#404040]' : 'border-gray-200',
       pillBg: isDarkMode ? 'bg-[#141414]' : 'bg-gray-100',
       pillText: isDarkMode ? 'text-[#d9d9d9]' : 'text-gray-700',
-      pillActiveBg: isDarkMode ? 'bg-blue-600' : 'bg-blue-100',
+      pillActiveBg: isDarkMode ? 'bg-gray-600' : 'bg-gray-200',
-      pillActiveText: isDarkMode ? 'text-white' : 'text-blue-800',
+      pillActiveText: isDarkMode ? 'text-white' : 'text-gray-800',
       searchBg: isDarkMode ? 'bg-[#141414]' : 'bg-gray-50',
       searchBorder: isDarkMode ? 'border-[#303030]' : 'border-gray-300',
       searchText: isDarkMode ? 'text-[#d9d9d9]' : 'text-gray-900',
@@ -1199,8 +1215,8 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
                           <div
                 className={`flex items-center gap-2 px-2.5 py-1.5 text-xs ${themeClasses.secondaryText}`}
               >
-              <div className="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-blue-500"></div>
+                <div className="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-gray-500"></div>
-              <span>Loading filters...</span>
+                <span>{t('loadingFilters')}</span>
               </div>
           )}
         </div>
@@ -1211,7 +1227,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
           {activeFiltersCount > 0 && (
             <div className="flex items-center gap-1.5">
               <span className={`text-xs ${themeClasses.secondaryText}`}>
-                {activeFiltersCount} filter{activeFiltersCount !== 1 ? 's' : ''} active
+                {activeFiltersCount} {activeFiltersCount !== 1 ? t('filtersActive') : t('filterActive')}
               </span>
               <button
                 onClick={clearAllFilters}
@@ -1220,11 +1236,11 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
                   clearingFilters
                     ?                   'text-gray-400 cursor-not-allowed'
                   : isDarkMode
-                      ? 'text-blue-400 hover:text-blue-300'
+                    ? 'text-gray-400 hover:text-gray-300'
-                      : 'text-blue-600 hover:text-blue-700'
+                    : 'text-gray-600 hover:text-gray-700'
                 }`}
               >
-                {clearingFilters ? 'Clearing...' : 'Clear all'}
+                {clearingFilters ? t('clearing') : t('clearAll')}
               </button>
             </div>
           )}
@@ -1236,13 +1252,13 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
                 type="checkbox"
                 checked={showArchived}
                 onChange={toggleArchived}
-                className={`w-3.5 h-3.5 text-blue-600 rounded focus:ring-blue-500 transition-colors duration-150 ${
+                className={`w-3.5 h-3.5 text-gray-600 rounded focus:ring-gray-500 transition-colors duration-150 ${
                   isDarkMode
                     ? 'border-[#303030] bg-[#141414] focus:ring-offset-gray-800'
                     : 'border-gray-300 bg-white focus:ring-offset-white'
                 }`}
               />
-              <span className={`text-xs ${themeClasses.optionText}`}>Show archived</span>
+              <span className={`text-xs ${themeClasses.optionText}`}>{t('showArchivedText')}</span>
               <InboxOutlined className={`w-3.5 h-3.5 ${themeClasses.secondaryText}`} />
             </label>
           )}
@@ -1285,7 +1301,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
                   }
                 }}
                                         className={`ml-1 rounded-full p-0.5 transition-colors duration-150 ${
-                  isDarkMode ? 'hover:bg-blue-800' : 'hover:bg-blue-200'
+                          isDarkMode ? 'hover:bg-gray-800' : 'hover:bg-gray-200'
                         }`}
               >
                 <CloseOutlined className="w-2.5 h-2.5" />