filter on top

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>
 

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>

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>