From a6edf1d325c795362d6d2d816f62a898976c1461 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 13 Mar 2024 17:33:34 +0100
Subject: [PATCH] feat(filters): make clear filters button less obvious

---
 .../project/partials/filter-popup.vue         | 33 +++++++++++--------
 .../components/project/partials/filters.vue   |  1 +
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/project/partials/filter-popup.vue b/frontend/src/components/project/partials/filter-popup.vue
index f1f608e2e..8f037def4 100644
--- a/frontend/src/components/project/partials/filter-popup.vue
+++ b/frontend/src/components/project/partials/filter-popup.vue
@@ -30,7 +30,7 @@ import {computed, ref, watch} from 'vue'
 
 import Filters from '@/components/project/partials/filters.vue'
 
-import {getDefaultTaskFilterParams, type TaskFilterParams} from '@/services/taskCollection'
+import {type TaskFilterParams} from '@/services/taskCollection'
 
 const modelValue = defineModel<TaskFilterParams>({})
 
@@ -54,18 +54,8 @@ function emitChanges(newValue: TaskFilterParams) {
 }
 
 const hasFilters = computed(() => {
-	// this.value also contains the page parameter which we don't want to include in filters
-	// eslint-disable-next-line no-unused-vars
-	const {filter, s} = value.value
-	const def = {...getDefaultTaskFilterParams()}
-
-	const params = {filter, s}
-	const defaultParams = {
-		filter: def.filter,
-		s: s ? def.s : undefined,
-	}
-
-	return JSON.stringify(params) !== JSON.stringify(defaultParams)
+	return value.value.filter !== '' || 
+		value.value.s !== ''
 })
 
 const modalOpen = ref(false)
@@ -79,4 +69,21 @@ const modalOpen = ref(false)
 		margin: 2rem 0 1rem;
 	}
 }
+
+$filter-bubble-size: .75rem;
+.has-filters {
+	position: relative;
+	
+	&::after {
+		content: '';
+		position: absolute;
+		top: math.div($filter-bubble-size, -2);
+		right: math.div($filter-bubble-size, -2);
+		
+		width: $filter-bubble-size;
+		height: $filter-bubble-size;
+		border-radius: 100%;
+		background: var(--primary);
+	}
+}
 </style>
diff --git a/frontend/src/components/project/partials/filters.vue b/frontend/src/components/project/partials/filters.vue
index dab0efdbe..c614af99e 100644
--- a/frontend/src/components/project/partials/filters.vue
+++ b/frontend/src/components/project/partials/filters.vue
@@ -28,6 +28,7 @@
 			<x-button
 				variant="secondary"
 				class="mr-2"
+				:disabled="params.filter === ''"
 				@click.prevent.stop="clearFiltersAndEmit"
 			>
 				{{ $t('filters.clear') }}