fix: Enhance sort direction arrow visibility and positioning (#307)

- Increase arrow font size from var(--font-ui-small) to 16px
- Add bold font weight (700) for better prominence
- Change color from muted to accent for better contrast
- Move sort direction button to left of dropdown for logical grouping
- Add hover scale effect (1.1x) with smooth transitions
- Improve separation from group controls

The sort arrow is now much more noticeable and intuitively positioned
within the filter condition builder interface.

src/ui/FilterBar.ts

@@ -1088,6 +1088,15 @@ export class FilterBar extends EventEmitter {
         const sortContainer = controls.createDiv('filter-bar__sort-container');
         sortContainer.createSpan({ text: 'Sort by:', cls: 'filter-bar__label' });
 
+        new ButtonComponent(sortContainer)
+            .setClass('filter-bar__sort-direction')
+            .setTooltip('Toggle sort direction')
+            .onClick(() => {
+                this.currentQuery.sortDirection = this.currentQuery.sortDirection === 'asc' ? 'desc' : 'asc';
+                this.updateSortDirectionButton();
+                this.emitQueryChange();
+            });
+
         const sortDropdown = new DropdownComponent(sortContainer)
             .addOptions({
                 'due': 'Due Date',
@@ -1103,15 +1112,6 @@ export class FilterBar extends EventEmitter {
             });
         setTooltip(sortDropdown.selectEl, 'Choose how to sort tasks', { placement: 'top' });
 
-        new ButtonComponent(sortContainer)
-            .setClass('filter-bar__sort-direction')
-            .setTooltip('Toggle sort direction')
-            .onClick(() => {
-                this.currentQuery.sortDirection = this.currentQuery.sortDirection === 'asc' ? 'desc' : 'asc';
-                this.updateSortDirectionButton();
-                this.emitQueryChange();
-            });
-
         // Group control
         const groupContainer = controls.createDiv('filter-bar__group-container');
         groupContainer.createSpan({ text: 'Group by:', cls: 'filter-bar__label' });

styles/filter-bar-bem.css

@@ -807,10 +807,11 @@
     height: 28px;
     width: 30px;
     border-radius: var(--radius-s);
-    color: var(--text-muted);
+    color: var(--text-accent);
     cursor: pointer;
-    font-size: var(--font-ui-small);
-    transition: background-color 0.2s ease;
+    font-size: 16px;
+    font-weight: 700;
+    transition: all 0.2s ease;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -818,7 +819,8 @@
 
 .tasknotes-plugin .filter-bar__sort-direction:hover {
     background-color: var(--background-modifier-hover);
-    color: var(--text-normal);
+    color: var(--text-accent-hover);
+    transform: scale(1.1);
 }
 
 /* =================================================================