From fff4e793240c44218f4de604cb11de7315faddb5 Mon Sep 17 00:00:00 2001
From: Vadim <vadim.olonin@gmail.com>
Date: Tue, 6 Oct 2026 17:33:19 +0300
Subject: [PATCH] filter on top

---
 src/components/IssueFilter.vue      |  4 ++--
 src/components/StatusFilter.vue     | 16 +++++++++++++---
 src/views/Issues/IssuesListView.vue | 19 +++++++++----------
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/IssueFilter.vue b/src/components/IssueFilter.vue
index b05d930..e6603cd 100644
--- a/src/components/IssueFilter.vue
+++ b/src/components/IssueFilter.vue
@@ -30,11 +30,11 @@ function onStatusChanged(alias: string) {
 </script>
 
 <template>
-  <div class="filter-grid ga-4 align-center">
+  <div class="filter-grid ga-2 align-center">
     <text-filter :model-value="text" @update:model-value="emit('update:text', $event)" />
     <status-filter :status="status" @changed="onStatusChanged" />
     <assignee-filter :selected="selectedAssignees" @changed="onAssigneeChanged" />
-    <v-btn prepend-icon="mdi-close" variant="tonal" @click="emit('update:clear')">Clear Filters</v-btn>
+    <v-btn density="compact" variant="text" @click="emit('update:clear')">Clear Filters</v-btn>
   </div>
 </template>
 
diff --git a/src/components/StatusFilter.vue b/src/components/StatusFilter.vue
index 6a74070..74f5393 100644
--- a/src/components/StatusFilter.vue
+++ b/src/components/StatusFilter.vue
@@ -11,6 +11,7 @@ const emit = defineEmits<{ changed: [value: string] }>()
 const statusStore = useStatusStore()
 const selected = ref(status)
 const onUpdate = (val: unknown) => emit('changed', val as string)
+
 watch(
   () => status,
   (val) => {
@@ -24,11 +25,20 @@ watch(
     v-model="selected"
     divided
     size="default"
-    density="compact"
-    variant="text"
+    density="comfortable"
+    variant="flat"
     @update:model-value="onUpdate"
   >
-    <v-btn slim v-for="el in statusStore.statuses" :color="el.color" :value="el.alias" :key="el.alias" rounded="0">
+    <v-btn
+      border
+      slim
+      v-for="el in statusStore.statuses"
+      :color="el.color"
+      :value="el.alias"
+      :key="el.alias"
+      rounded="0"
+    >
+      <!--      <v-icon :icon="icons.get(el.alias)" class="mr-1" />-->
       <div class="text-default">{{ el.name }}</div>
     </v-btn>
   </v-btn-toggle>
diff --git a/src/views/Issues/IssuesListView.vue b/src/views/Issues/IssuesListView.vue
index e5cc08b..7549c47 100644
--- a/src/views/Issues/IssuesListView.vue
+++ b/src/views/Issues/IssuesListView.vue
@@ -188,18 +188,17 @@ async function onDeleteBatch() {
 
 <template>
   <div class="d-flex flex-column ga-2 h-100">
+    <issue-filter
+      :text="text"
+      :assignee-id="assigneeId"
+      :status="status"
+      @update:text="onTextChanged"
+      @update:assignee-id="onAssigneeChanged"
+      @update:status="onStatusChanged"
+      @update:clear="onClear"
+    />
     <div ref="splitContainer" class="u-grid">
       <div class="u-height">
-        <issue-filter
-          class="mb-2"
-          :text="text"
-          :assignee-id="assigneeId"
-          :status="status"
-          @update:text="onTextChanged"
-          @update:assignee-id="onAssigneeChanged"
-          @update:status="onStatusChanged"
-          @update:clear="onClear"
-        />
         <v-list class="pa-0" density="compact" v-model:selected="selected" mandatory>
           <v-list-item>
             <template #prepend>