Refactor bookmark query navigation (#6170)

* Revert back to using query params for bookmarks

Aka "this hurts so much"

* Fix collection navigation active state

* Add active and query props to v-button

Also unify active and activated state.

* Remove not needed exact prop from collections navigation

app/src/components/v-button/v-button.vue

@@ -4,19 +4,17 @@
 		<component
 			v-focus="autofocus"
 			:is="component"
-			:active-class="!exact && to ? 'activated' : null"
-			:exact-active-class="exact && to ? 'activated' : null"
 			:download="download"
 			class="button"
 			:class="[
 				sizeClass,
 				`align-${align}`,
 				{
+					active: isActiveRoute,
 					rounded,
 					icon,
 					outlined,
 					loading,
-					active,
 					dashed,
 					tile,
 					'full-width': fullWidth,
@@ -45,10 +43,11 @@
 
 <script lang="ts">
 import { defineComponent, computed, PropType } from 'vue';
-import { RouteLocation } from 'vue-router';
+import { RouteLocation, useRoute, useLink } from 'vue-router';
 import useSizeClass, { sizeProps } from '@/composables/size-class';
 import { useGroupable } from '@/composables/groupable';
 import { notEmpty } from '@/utils/is-empty';
+import { isEqual } from 'lodash';
 
 export default defineComponent({
 	emits: ['click'],
@@ -93,10 +92,18 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		active: {
+			type: Boolean,
+			default: undefined,
+		},
 		exact: {
 			type: Boolean,
 			default: false,
 		},
+		query: {
+			type: Boolean,
+			default: false,
+		},
 		secondary: {
 			type: Boolean,
 			default: false,
@@ -125,6 +132,9 @@ export default defineComponent({
 		...sizeProps,
 	},
 	setup(props, { emit }) {
+		const route = useRoute();
+
+		const { route: linkRoute, isActive, isExactActive } = useLink(props);
 		const sizeClass = useSizeClass(props);
 
 		const component = computed<'a' | 'router-link' | 'button'>(() => {
@@ -139,7 +149,23 @@ export default defineComponent({
 			group: 'item-group',
 		});
 
-		return { sizeClass, onClick, component, active, toggle };
+		const isActiveRoute = computed(() => {
+			if (props.active !== undefined) return props.active;
+
+			if (props.to) {
+				const isQueryActive = !props.query || isEqual(route.query, linkRoute.value.query);
+
+				if (!props.exact) {
+					return (isActive.value && isQueryActive) || active.value;
+				} else {
+					return (isExactActive.value && isQueryActive) || active.value;
+				}
+			}
+
+			return false;
+		});
+
+		return { sizeClass, onClick, component, isActiveRoute, toggle };
 
 		function onClick(event: MouseEvent) {
 			if (props.loading === true) return;
@@ -157,11 +183,11 @@ export default defineComponent({
 	--v-button-height: 44px;
 	--v-button-color: var(--foreground-inverted);
 	--v-button-color-hover: var(--foreground-inverted);
-	--v-button-color-activated: var(--foreground-inverted);
+	--v-button-color-active: var(--foreground-inverted);
 	--v-button-color-disabled: var(--foreground-subdued);
 	--v-button-background-color: var(--primary);
 	--v-button-background-color-hover: var(--primary-125);
-	--v-button-background-color-activated: var(--primary);
+	--v-button-background-color-active: var(--primary);
 	--v-button-background-color-disabled: var(--background-normal);
 	--v-button-font-size: 16px;
 	--v-button-font-weight: 600;
@@ -177,10 +203,10 @@ export default defineComponent({
 .secondary {
 	--v-button-color: var(--foreground-normal);
 	--v-button-color-hover: var(--foreground-normal);
-	--v-button-color-activated: var(--foreground-normal);
+	--v-button-color-active: var(--foreground-normal);
 	--v-button-background-color: var(--border-subdued);
 	--v-button-background-color-hover: var(--background-normal-alt);
-	--v-button-background-color-activated: var(--background-normal-alt);
+	--v-button-background-color-active: var(--background-normal-alt);
 }
 
 .v-button.full-width {
@@ -248,7 +274,7 @@ export default defineComponent({
 	background-color: transparent;
 }
 
-.outlined:not(.activated):hover {
+.outlined:not(.active):hover {
 	color: var(--v-button-background-color-hover);
 	background-color: transparent;
 	border-color: var(--v-button-background-color-hover);
@@ -338,12 +364,11 @@ export default defineComponent({
 	--v-progress-circular-background-color: transparent;
 }
 
-.activated,
 .active {
-	--v-button-color: var(--v-button-color-activated) !important;
-	--v-button-color-hover: var(--v-button-color-activated) !important;
-	--v-button-background-color: var(--v-button-background-color-activated) !important;
-	--v-button-background-color-hover: var(--v-button-background-color-activated) !important;
+	--v-button-color: var(--v-button-color-active) !important;
+	--v-button-color-hover: var(--v-button-color-active) !important;
+	--v-button-background-color: var(--v-button-background-color-active) !important;
+	--v-button-background-color-hover: var(--v-button-background-color-active) !important;
 }
 
 .tile {

app/src/components/v-drawer/v-drawer.vue

@@ -149,7 +149,7 @@ body {
 
 	.header-icon {
 		--v-button-background-color: var(--background-normal);
-		--v-button-background-color-activated: var(--background-normal);
+		--v-button-background-color-active: var(--background-normal);
 		--v-button-background-color-hover: var(--background-normal-alt);
 		--v-button-color-disabled: var(--foreground-normal);
 	}

app/src/components/v-list/v-list-item.vue

@@ -2,12 +2,10 @@
 	<component
 		:is="component"
 		v-bind="disabled === false && $attrs"
-		:active-class="!exact && to ? 'active' : null"
-		:exact-active-class="exact && to ? 'active' : null"
 		class="v-list-item"
 		:to="to"
 		:class="{
-			active,
+			active: isActiveRoute,
 			dense,
 			link: isLink,
 			disabled,
@@ -24,9 +22,10 @@
 </template>
 
 <script lang="ts">
-import { RouteLocation } from 'vue-router';
+import { RouteLocation, useLink, useRoute } from 'vue-router';
 import { defineComponent, PropType, computed } from 'vue';
 import { useGroupable } from '@/composables/groupable';
+import { isEqual } from 'lodash';
 
 export default defineComponent({
 	props: {
@@ -56,7 +55,7 @@ export default defineComponent({
 		},
 		active: {
 			type: Boolean,
-			default: false,
+			default: undefined,
 		},
 		dashed: {
 			type: Boolean,
@@ -66,6 +65,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		query: {
+			type: Boolean,
+			default: false,
+		},
 		download: {
 			type: String,
 			default: null,
@@ -80,6 +83,10 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
+		const route = useRoute();
+
+		const { route: linkRoute, isActive, isExactActive } = useLink(props);
+
 		const component = computed<string>(() => {
 			if (props.to) return 'router-link';
 			if (props.href) return 'a';
@@ -92,7 +99,23 @@ export default defineComponent({
 
 		const isLink = computed(() => Boolean(props.to || props.href || props.clickable));
 
-		return { component, isLink };
+		const isActiveRoute = computed(() => {
+			if (props.active !== undefined) return props.active;
+
+			if (props.to) {
+				const isQueryActive = !props.query || isEqual(route.query, linkRoute.value.query);
+
+				if (!props.exact) {
+					return isActive.value && isQueryActive;
+				} else {
+					return isExactActive.value && isQueryActive;
+				}
+			}
+
+			return false;
+		});
+
+		return { component, isLink, isActiveRoute };
 	},
 });
 </script>