From 31a101e352ec48522f4ce0d8123a6059b6d6d311 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 15 Nov 2025 16:06:41 +0000
Subject: [PATCH] refactor: implement review feedback

- Change default clickable prop to false (simpler code)
- Update Labels.vue to explicitly set clickable=true
- Remove clickable=false from QuickActions and FilterCommandsList (now default)
- Add {label} placeholder to translation string
- Use i18n-t component to render label within translation
- Move router.push from ShowTasks to Home via event emission
- Add clearLabelFilter event handler in Home.vue

Co-authored-by: kolaente <13721712+kolaente@users.noreply.github.com>
---
 .../input/filter/FilterCommandsList.vue       |  1 -
 .../components/quick-actions/QuickActions.vue |  5 +---
 .../src/components/tasks/partials/Label.vue   |  2 +-
 .../src/components/tasks/partials/Labels.vue  |  1 +
 frontend/src/i18n/lang/en.json                |  2 +-
 frontend/src/views/Home.vue                   | 13 ++++++++-
 frontend/src/views/tasks/ShowTasks.vue        | 28 ++++++++++---------
 7 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/input/filter/FilterCommandsList.vue b/frontend/src/components/input/filter/FilterCommandsList.vue
index 0a30f93b7..fe1348bd4 100644
--- a/frontend/src/components/input/filter/FilterCommandsList.vue
+++ b/frontend/src/components/input/filter/FilterCommandsList.vue
@@ -12,7 +12,6 @@
 					<XLabel
 						v-if="item.fieldType === 'labels'"
 						:label="(item.item as unknown as ILabel)"
-						:clickable="false"
 						class="filter-autocomplete__label"
 					/>
 					<User
diff --git a/frontend/src/components/quick-actions/QuickActions.vue b/frontend/src/components/quick-actions/QuickActions.vue
index 50d2f6e56..8cec745c2 100644
--- a/frontend/src/components/quick-actions/QuickActions.vue
+++ b/frontend/src/components/quick-actions/QuickActions.vue
@@ -71,10 +71,7 @@
 							@keyup.prevent.esc="searchInput?.focus()"
 						>
 							<template v-if="r.type === ACTION_TYPE.LABELS">
-								<XLabel
-									:label="i"
-									:clickable="false"
-								/>
+								<XLabel :label="i" />
 							</template>
 							<template v-else-if="r.type === ACTION_TYPE.TASK">
 								<SingleTaskInlineReadonly
diff --git a/frontend/src/components/tasks/partials/Label.vue b/frontend/src/components/tasks/partials/Label.vue
index 75be536e7..71d4aaf5f 100644
--- a/frontend/src/components/tasks/partials/Label.vue
+++ b/frontend/src/components/tasks/partials/Label.vue
@@ -6,7 +6,7 @@ const props = withDefaults(defineProps<{
 	label: ILabel
 	clickable?: boolean
 }>(), {
-	clickable: true,
+	clickable: false,
 })
 
 const {getLabelStyles} = useLabelStyles()
diff --git a/frontend/src/components/tasks/partials/Labels.vue b/frontend/src/components/tasks/partials/Labels.vue
index 55332c233..86c3629d7 100644
--- a/frontend/src/components/tasks/partials/Labels.vue
+++ b/frontend/src/components/tasks/partials/Labels.vue
@@ -4,6 +4,7 @@
 			v-for="label in displayLabels"
 			:key="label.id"
 			:label="label"
+			:clickable="true"
 		/>
 	</div>
 </template>
diff --git a/frontend/src/i18n/lang/en.json b/frontend/src/i18n/lang/en.json
index 36f0829dd..32422963b 100644
--- a/frontend/src/i18n/lang/en.json
+++ b/frontend/src/i18n/lang/en.json
@@ -808,7 +808,7 @@
       "fromuntil": "Tasks from {from} until {until}",
       "select": "Select a date range",
       "noTasks": "Nothing to do — Have a nice day!",
-      "filterByLabel": "Filtering by label"
+      "filterByLabel": "Filtering by label: {label}"
     },
     "detail": {
       "chooseDueDate": "Click here to set a due date",
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 530e3dabe..98cd1a1ce 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -41,13 +41,14 @@
 			:label-ids="labelIds"
 			class="show-tasks"
 			@tasksLoaded="tasksLoaded = true"
+			@clearLabelFilter="handleClearLabelFilter"
 		/>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import {ref, computed} from 'vue'
-import {useRoute} from 'vue-router'
+import {useRoute, useRouter} from 'vue-router'
 
 import Message from '@/components/misc/Message.vue'
 import ShowTasks from '@/views/tasks/ShowTasks.vue'
@@ -68,6 +69,7 @@ const salutation = useDaytimeSalutation()
 const authStore = useAuthStore()
 const projectStore = useProjectStore()
 const route = useRoute()
+const router = useRouter()
 
 const projectHistory = computed(() => {
 	// If we don't check this, it tries to load the project background right after logging out	
@@ -100,6 +102,15 @@ const showTasksKey = ref(0)
 function updateTaskKey() {
 	showTasksKey.value++
 }
+
+function handleClearLabelFilter() {
+	const query = {...route.query}
+	delete query.labels
+	router.push({
+		name: route.name as string,
+		query,
+	})
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/frontend/src/views/tasks/ShowTasks.vue b/frontend/src/views/tasks/ShowTasks.vue
index 3ce2ec45e..64019bec1 100644
--- a/frontend/src/views/tasks/ShowTasks.vue
+++ b/frontend/src/views/tasks/ShowTasks.vue
@@ -10,13 +10,19 @@
 			v-if="filteredLabels.length > 0"
 			class="label-filter-info mbe-2"
 		>
-			<span class="filter-label-text">{{ $t('task.show.filterByLabel') }}:</span>
-			<XLabel
-				v-for="label in filteredLabels"
-				:key="label.id"
-				:label="label"
-				:clickable="false"
-			/>
+			<i18n-t
+				keypath="task.show.filterByLabel"
+				tag="span"
+				class="filter-label-text"
+			>
+				<template #label>
+					<XLabel
+						v-for="label in filteredLabels"
+						:key="label.id"
+						:label="label"
+					/>
+				</template>
+			</i18n-t>
 			<BaseButton
 				class="clear-filter-button"
 				@click="clearLabelFilter"
@@ -126,6 +132,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
 	'tasksLoaded': true,
+	'clearLabelFilter': void,
 }>()
 
 const authStore = useAuthStore()
@@ -212,12 +219,7 @@ function setShowNulls(show: boolean) {
 }
 
 function clearLabelFilter() {
-	const query = {...route.query}
-	delete query.labels
-	router.push({
-		name: route.name as string,
-		query,
-	})
+	emit('clearLabelFilter')
 }
 
 async function loadPendingTasks(from: Date|string, to: Date|string) {