fix : replace native select with MalioSelect for sort filter on my-tasks

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/pages/my-tasks.vue

@@ -51,8 +51,9 @@ const selectedEffortId = ref<number | null>(null)
 const selectedAssigneeId = ref<number | null>(auth.user?.id ?? null)
 
 // Sort
-type SortOption = 'default' | 'deadline' | 'scheduledStart'
-const sortBy = ref<SortOption>('default')
+const SORT_DEADLINE = 1
+const SORT_SCHEDULED = 2
+const sortById = ref<number | null>(null)
 
 // View toggle
 const viewMode = ref<'kanban' | 'list'>('kanban')
@@ -106,6 +107,11 @@ const assigneeOptions = computed(() =>
     users.value.map(u => ({ label: u.username, value: u.id }))
 )
 
+const sortOptions = computed(() => [
+    { label: t('myTasks.sortDeadline'), value: SORT_DEADLINE },
+    { label: t('myTasks.sortScheduledStart'), value: SORT_SCHEDULED },
+])
+
 // Kanban helpers
 const sortedStatuses = computed(() =>
     [...statuses.value].sort((a, b) => a.position - b.position)
@@ -158,9 +164,9 @@ async function loadTasks() {
     if (selectedTagId.value) {
         baseParams['tags[]'] = `/api/task_tags/${selectedTagId.value}`
     }
-    if (sortBy.value === 'deadline') {
+    if (sortById.value === SORT_DEADLINE) {
         baseParams['order[deadline]'] = 'asc'
-    } else if (sortBy.value === 'scheduledStart') {
+    } else if (sortById.value === SORT_SCHEDULED) {
         baseParams['order[scheduledStart]'] = 'asc'
     }
 
@@ -190,7 +196,7 @@ async function loadAll() {
 
 // Watch filters and sort to reload tasks
 watch(
-    [selectedProjectId, selectedGroupId, selectedTagId, selectedPriorityId, selectedEffortId, selectedAssigneeId, sortBy],
+    [selectedProjectId, selectedGroupId, selectedTagId, selectedPriorityId, selectedEffortId, selectedAssigneeId, sortById],
     () => { loadTasks() },
 )
 
@@ -410,17 +416,15 @@ onMounted(async () => {
                     text-field="text-sm"
                     text-value="text-sm"
                 />
-                <div class="flex flex-col gap-0.5">
-                    <span class="text-xs font-semibold text-neutral-500">{{ $t('myTasks.sortBy') }}</span>
-                    <select
-                        v-model="sortBy"
-                        class="rounded-lg border border-neutral-300 bg-white px-2 py-1.5 text-sm text-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary-500"
-                    >
-                        <option value="default">{{ $t('myTasks.sortDefault') }}</option>
-                        <option value="deadline">{{ $t('myTasks.sortDeadline') }}</option>
-                        <option value="scheduledStart">{{ $t('myTasks.sortScheduledStart') }}</option>
-                    </select>
-                </div>
+                <MalioSelect
+                    v-model="sortById"
+                    :options="sortOptions"
+                    :label="$t('myTasks.sortBy')"
+                    :empty-option-label="$t('myTasks.sortDefault')"
+                    min-width="!w-40"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
             </div>
         </div>