From b50adaf4b59557cb274a50c6d11fcf7057caeb84 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 7 Jun 2023 20:58:43 +0200
Subject: [PATCH] fix(navigation): highlight saved filters in project view and
 prevent them from being dragged around

---
 src/components/home/ProjectsNavigation.vue     |  4 +++-
 src/components/home/ProjectsNavigationItem.vue | 18 +++++++++++++++---
 src/components/home/navigation.vue             |  6 +++++-
 .../project/partials/ProjectCard.vue           | 12 +++++++++++-
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/components/home/ProjectsNavigation.vue b/src/components/home/ProjectsNavigation.vue
index 8c78bafdd..85e5c5a34 100644
--- a/src/components/home/ProjectsNavigation.vue
+++ b/src/components/home/ProjectsNavigation.vue
@@ -10,17 +10,19 @@
 		tag="menu"
 		item-key="id"
 		:disabled="!canEditOrder"
+		filter=".drag-disabled"
 		:component-data="{
 			type: 'transition-group',
 			name: !drag ? 'flip-list' : null,
 			class: [
 				'menu-list can-be-hidden',
 				{ 'dragging-disabled': !canEditOrder }
-			]
+			],
 		}"
 	>
 		<template #item="{element: project}">
 			<ProjectsNavigationItem
+				:class="{'drag-disabled': project.id < 0}"
 				:project="project"
 				:is-loading="projectUpdating[project.id]"
 				:can-collapse="canCollapse"
diff --git a/src/components/home/ProjectsNavigationItem.vue b/src/components/home/ProjectsNavigationItem.vue
index ec612dab3..fe0ae0b16 100644
--- a/src/components/home/ProjectsNavigationItem.vue
+++ b/src/components/home/ProjectsNavigationItem.vue
@@ -20,12 +20,16 @@
 					v-if="!canCollapse || childProjects?.length === 0"
 					class="collapse-project-button-placeholder"
 				></span>
-				<div class="color-bubble-handle-wrapper">
+				<div class="color-bubble-handle-wrapper" :class="{'is-draggable': project.id > 0}">
 					<ColorBubble
 						v-if="project.hexColor !== ''"
 						:color="project.hexColor"
 					/>
+					<span v-else-if="project.id < -1" class="saved-filter-icon icon menu-item-icon">
+						<icon icon="filter"/>
+					</span>
 					<span
+						v-if="project.id > 0"
 						class="icon menu-item-icon handle lines-handle"
 						:class="{'has-color-bubble': project.hexColor !== ''}"
 					>
@@ -133,8 +137,11 @@ const canNestDeeper = computed(() => canNestProjectDeeper(props.level))
 	opacity: 1;
 }
 
-.list-menu:hover > div > a > .color-bubble-handle-wrapper > .color-bubble {
-	opacity: 0;
+.list-menu:hover > div > a > .color-bubble-handle-wrapper.is-draggable > {
+	.saved-filter-icon,
+	.color-bubble {
+		opacity: 0;
+	}
 }
 
 .color-bubble-handle-wrapper {
@@ -160,4 +167,9 @@ const canNestDeeper = computed(() => canNestProjectDeeper(props.level))
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+
+.saved-filter-icon {
+	color: var(--grey-300) !important;
+	font-size: .75rem;
+}
 </style>
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index c49937c04..30d933e58 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -54,7 +54,11 @@
 		/>
 		<template v-else>
 			<nav class="menu" v-if="favoriteProjects">
-				<ProjectsNavigation :model-value="favoriteProjects" :can-edit-order="false" :can-collapse="false"/>
+				<ProjectsNavigation
+					:model-value="favoriteProjects" 
+					:can-edit-order="false"
+					:can-collapse="false"
+				/>
 			</nav>
 
 			<nav class="menu">
diff --git a/src/components/project/partials/ProjectCard.vue b/src/components/project/partials/ProjectCard.vue
index 8f4986386..f8ff108f9 100644
--- a/src/components/project/partials/ProjectCard.vue
+++ b/src/components/project/partials/ProjectCard.vue
@@ -17,7 +17,12 @@
 		/>
 		<span v-if="project.isArchived" class="is-archived" >{{ $t('project.archived') }}</span>
 
-		<div class="project-title" aria-hidden="true">{{ project.title }}</div>
+		<div class="project-title" aria-hidden="true">
+			<span v-if="project.id < -1" class="saved-filter-icon icon">
+				<icon icon="filter"/>
+			</span>
+			{{ project.title }}
+		</div>
 		<BaseButton
 			class="project-button"
 			:aria-label="project.title"
@@ -179,4 +184,9 @@ const projectStore = useProjectStore()
     opacity: 1;
   }
 }
+
+.saved-filter-icon {
+	color: var(--grey-300);
+	font-size: .75em;
+}
 </style>