diff --git a/api/src/database/helpers/geometry.ts b/api/src/database/helpers/geometry.ts
index 489fd3166c..5175e05c2c 100644
--- a/api/src/database/helpers/geometry.ts
+++ b/api/src/database/helpers/geometry.ts
@@ -60,7 +60,7 @@ class KnexSpatial {
 	}
 	_intersects_bbox(key: string, geojson: GeoJSONGeometry): Knex.Raw {
 		const geometry = this.fromGeoJSON(geojson);
-		return this.knex.raw('intersects(??, ?)', [key, geometry]);
+		return this.knex.raw('st_intersects(??, ?)', [key, geometry]);
 	}
 	intersects_bbox(key: string, geojson: GeoJSONGeometry): Knex.Raw {
 		return this.isTrue(this._intersects_bbox(key, geojson));
diff --git a/api/src/database/migrations/20211007A-update-presets.ts b/api/src/database/migrations/20211007A-update-presets.ts
new file mode 100644
index 0000000000..2cd08a7d5b
--- /dev/null
+++ b/api/src/database/migrations/20211007A-update-presets.ts
@@ -0,0 +1,141 @@
+import { Filter, LogicalFilterAND } from '@directus/shared/types';
+import { Knex } from 'knex';
+import { nanoid } from 'nanoid';
+
+type OldFilter = {
+	key: string;
+	field: string;
+	value: any;
+	operator: string;
+};
+
+export async function up(knex: Knex): Promise<void> {
+	await knex.schema.alterTable('directus_presets', (table) => {
+		table.json('filter');
+	});
+
+	const presets = await knex
+		.select<{ id: number; filters: string | OldFilter[]; layout_query: string | Record<string, any> }[]>(
+			'id',
+			'filters',
+			'layout_query'
+		)
+		.from('directus_presets');
+
+	for (const preset of presets) {
+		if (preset.filters) {
+			const oldFilters: OldFilter[] =
+				(typeof preset.filters === 'string' ? JSON.parse(preset.filters) : preset.filters) ?? [];
+
+			if (oldFilters.length === 0) continue;
+
+			const newFilter: Filter = {
+				_and: [],
+			};
+
+			for (const oldFilter of oldFilters) {
+				if (oldFilter.key === 'hide-archived') continue;
+
+				newFilter._and.push({
+					[oldFilter.field]: {
+						['_' + oldFilter.operator]: oldFilter.value,
+					},
+				});
+			}
+
+			if (newFilter._and.length > 0) {
+				await knex('directus_presets')
+					.update({ filter: JSON.stringify(newFilter) })
+					.where('id', '=', preset.id);
+			}
+		}
+
+		if (preset.layout_query) {
+			const layoutQuery: Record<string, any> =
+				typeof preset.layout_query === 'string' ? JSON.parse(preset.layout_query) : preset.layout_query;
+
+			for (const [layout, query] of Object.entries(layoutQuery)) {
+				if (query.sort) {
+					query.sort = [query.sort];
+				}
+
+				layoutQuery[layout] = query;
+			}
+
+			await knex('directus_presets')
+				.update({ layout_query: JSON.stringify(layoutQuery) })
+				.where('id', '=', preset.id);
+		}
+	}
+
+	await knex.schema.alterTable('directus_presets', (table) => {
+		table.dropColumn('filters');
+	});
+}
+
+export async function down(knex: Knex): Promise<void> {
+	await knex.schema.alterTable('directus_presets', (table) => {
+		table.json('filters');
+	});
+
+	const presets = await knex
+		.select<{ id: number; filter: string | OldFilter[]; layout_query: string | Record<string, any> }[]>(
+			'id',
+			'filter',
+			'layout_query'
+		)
+		.from('directus_presets');
+
+	for (const preset of presets) {
+		if (preset.filter) {
+			const newFilter: LogicalFilterAND =
+				(typeof preset.filter === 'string' ? JSON.parse(preset.filter) : preset.filter) ?? {};
+
+			if (Object.keys(newFilter).length === 0) continue;
+
+			const oldFilters: OldFilter[] = [];
+
+			for (const filter of newFilter._and ?? []) {
+				const field = Object.keys(filter)?.[0];
+				const operator = Object.keys(Object.values(filter)?.[0] ?? {})?.[0];
+				const value = Object.values(Object.values(filter)?.[0] ?? {})?.[0];
+
+				if (!field || !operator || !value) continue;
+
+				oldFilters.push({
+					key: nanoid(),
+					field,
+					operator: operator.substring(1),
+					value,
+				});
+			}
+
+			if (oldFilters.length > 0) {
+				await knex('directus_presets')
+					.update({ filters: JSON.stringify(oldFilters) })
+					.where('id', '=', preset.id);
+			}
+		}
+
+		if (preset.layout_query) {
+			const layoutQuery: Record<string, any> =
+				typeof preset.layout_query === 'string' ? JSON.parse(preset.layout_query) : preset.layout_query;
+
+			for (const [layout, query] of Object.entries(layoutQuery)) {
+				if (query.sort && Array.isArray(query.sort)) {
+					query.sort = query.sort?.[0] ?? null;
+				}
+
+				layoutQuery[layout] = query;
+			}
+
+			await knex('directus_presets')
+				.update({ layout_query: JSON.stringify(layoutQuery) })
+				.where('id', '=', preset.id);
+		}
+	}
+
+	await knex.schema.alterTable('directus_presets', (table) => {
+		table.dropColumn('filter');
+	});
+}
diff --git a/api/src/database/run-ast.ts b/api/src/database/run-ast.ts
index 1b6fe41fe1..0b3f6e697f 100644
--- a/api/src/database/run-ast.ts
+++ b/api/src/database/run-ast.ts
@@ -1,13 +1,14 @@
 import { Knex } from 'knex';
 import { clone, cloneDeep, pick, uniq } from 'lodash';
 import { PayloadService } from '../services/payload';
-import { Item, Query, SchemaOverview } from '../types';
+import { Item, SchemaOverview } from '../types';
 import { AST, FieldNode, NestedCollectionNode, M2ONode } from '../types/ast';
 import { applyFunctionToColumnName } from '../utils/apply-function-to-column-name';
 import applyQuery from '../utils/apply-query';
 import { getColumn } from '../utils/get-column';
 import { stripFunction } from '../utils/strip-function';
 import { toArray } from '@directus/shared/utils';
+import { Query } from '@directus/shared/types';
 import getDatabase from './index';
 import { isNativeGeometry } from '../utils/geometry';
 import { getGeometryHelper } from '../database/helpers/geometry';
@@ -289,7 +290,7 @@ function applyParentFilters(
 					...nestedNode.query[relatedCollection],
 					filter: {
 						_and: [
-							nestedNode.query[relatedCollection].filter,
+							nestedNode.query[relatedCollection].filter ?? {},
 							{
 								[nestedNode.relatedKey[relatedCollection]]: {
 									_in: uniq(keysPerCollection[relatedCollection]),
@@ -343,7 +344,14 @@ function mergeWithParentItems(
 				})
 				.sort((a, b) => {
 					// This is pre-filled in get-ast-from-query
-					const { column, order } = nestedNode.query.sort![0]!;
+					const sortField = nestedNode.query.sort![0]!;
+					let column = sortField;
+					let order: 'asc' | 'desc' = 'asc';
+
+					if (sortField.startsWith('-')) {
+						column = sortField.substring(1);
+						order = 'desc';
+					}
 
 					if (a[column] === b[column]) return 0;
 					if (a[column] === null) return 1;
diff --git a/api/src/database/system-data/app-access-permissions/index.ts b/api/src/database/system-data/app-access-permissions/index.ts
index 498aa0ea3d..1533da5532 100644
--- a/api/src/database/system-data/app-access-permissions/index.ts
+++ b/api/src/database/system-data/app-access-permissions/index.ts
@@ -1,5 +1,5 @@
 import { merge } from 'lodash';
-import { Permission } from '../../../types';
+import { Permission } from '@directus/shared/types';
 import { requireYAML } from '../../../utils/require-yaml';
 
 const defaults: Partial<Permission> = {
diff --git a/api/src/database/system-data/fields/presets.yaml b/api/src/database/system-data/fields/presets.yaml
index c454de2974..06007abae8 100644
--- a/api/src/database/system-data/fields/presets.yaml
+++ b/api/src/database/system-data/fields/presets.yaml
@@ -1,7 +1,7 @@
 table: directus_presets
 
 fields:
-  - field: filters
+  - field: filter
     hidden: true
     special: json
 
diff --git a/api/src/services/authorization.ts b/api/src/services/authorization.ts
index 8e19e4c99d..2884aac776 100644
--- a/api/src/services/authorization.ts
+++ b/api/src/services/authorization.ts
@@ -11,13 +11,10 @@ import {
 	FieldNode,
 	Item,
 	NestedCollectionNode,
-	Permission,
-	PermissionsAction,
 	PrimaryKey,
-	Query,
 	SchemaOverview,
-	Aggregate,
 } from '../types';
+import { Query, Aggregate, Permission, PermissionsAction } from '@directus/shared/types';
 import { ItemsService } from './items';
 import { PayloadService } from './payload';
 
@@ -105,7 +102,11 @@ export class AuthorizationService {
 				}
 			}
 
-			function checkFields(collection: string, children: (NestedCollectionNode | FieldNode)[], aggregate?: Aggregate) {
+			function checkFields(
+				collection: string,
+				children: (NestedCollectionNode | FieldNode)[],
+				aggregate?: Aggregate | null
+			) {
 				// We check the availability of the permissions in the step before this is run
 				const permissions = permissionsForCollections.find((permission) => permission.collection === collection)!;
 				const allowedFields = permissions.fields || [];
@@ -185,7 +186,7 @@ export class AuthorizationService {
 					query.filter._and.push(parsedPermissions);
 				}
 
-				if (query.filter._and.length === 0) delete query.filter._and;
+				if (query.filter._and.length === 0) delete query.filter;
 			}
 		}
 	}
@@ -258,7 +259,7 @@ export class AuthorizationService {
 		}
 
 		if (requiredColumns.length > 0) {
-			permission.validation = hasValidationRules ? { _and: [permission.validation] } : { _and: [] };
+			permission.validation = hasValidationRules ? { _and: [permission.validation!] } : { _and: [] };
 
 			for (const field of requiredColumns) {
 				if (action === 'create' && field.defaultValue === null) {
diff --git a/api/src/services/graphql.ts b/api/src/services/graphql.ts
index 4e4e131961..28dfaec593 100644
--- a/api/src/services/graphql.ts
+++ b/api/src/services/graphql.ts
@@ -52,8 +52,8 @@ import env from '../env';
 import { BaseException } from '@directus/shared/exceptions';
 import { ForbiddenException, GraphQLValidationException, InvalidPayloadException } from '../exceptions';
 import { getExtensionManager } from '../extensions';
-import { Accountability } from '@directus/shared/types';
-import { AbstractServiceOptions, Action, Aggregate, GraphQLParams, Item, Query, SchemaOverview } from '../types';
+import { Accountability, Query, Aggregate } from '@directus/shared/types';
+import { AbstractServiceOptions, Action, GraphQLParams, Item, SchemaOverview } from '../types';
 import { getGraphQLType } from '../utils/get-graphql-type';
 import { reduceSchema } from '../utils/reduce-schema';
 import { sanitizeQuery } from '../utils/sanitize-query';
@@ -1413,7 +1413,7 @@ export class GraphQLService {
 			return uniq(fields);
 		};
 
-		const replaceFuncs = (filter?: Filter): undefined | Filter => {
+		const replaceFuncs = (filter?: Filter | null): null | undefined | Filter => {
 			if (!filter) return filter;
 
 			return replaceFuncDeep(filter);
diff --git a/api/src/services/items.ts b/api/src/services/items.ts
index 8811994b3a..11398819bd 100644
--- a/api/src/services/items.ts
+++ b/api/src/services/items.ts
@@ -9,17 +9,8 @@ import env from '../env';
 import { ForbiddenException, InvalidPayloadException } from '../exceptions';
 import { translateDatabaseError } from '../exceptions/database/translate';
 import logger from '../logger';
-import { Accountability } from '@directus/shared/types';
-import {
-	AbstractService,
-	AbstractServiceOptions,
-	Action,
-	Item as AnyItem,
-	PermissionsAction,
-	PrimaryKey,
-	Query,
-	SchemaOverview,
-} from '../types';
+import { Accountability, Query, PermissionsAction } from '@directus/shared/types';
+import { AbstractService, AbstractServiceOptions, Action, Item as AnyItem, PrimaryKey, SchemaOverview } from '../types';
 import getASTFromQuery from '../utils/get-ast-from-query';
 import { toArray } from '@directus/shared/utils';
 import { AuthorizationService } from './authorization';
diff --git a/api/src/services/meta.ts b/api/src/services/meta.ts
index d88a099246..298527189e 100644
--- a/api/src/services/meta.ts
+++ b/api/src/services/meta.ts
@@ -2,8 +2,7 @@ import { Knex } from 'knex';
 import getDatabase from '../database';
 import { ForbiddenException } from '../exceptions';
 import { AbstractServiceOptions, SchemaOverview } from '../types';
-import { Accountability } from '@directus/shared/types';
-import { Query } from '../types/query';
+import { Accountability, Query } from '@directus/shared/types';
 import { applyFilter, applySearch } from '../utils/apply-query';
 import { parseFilter } from '@directus/shared/utils';
 
@@ -18,11 +17,11 @@ export class MetaService {
 		this.schema = options.schema;
 	}
 
-	async getMetaForQuery(collection: string, query: Query): Promise<Record<string, any> | undefined> {
+	async getMetaForQuery(collection: string, query: any): Promise<Record<string, any> | undefined> {
 		if (!query || !query.meta) return;
 
 		const results = await Promise.all(
-			query.meta.map((metaVal) => {
+			query.meta.map((metaVal: string) => {
 				if (metaVal === 'total_count') return this.totalCount(collection);
 				if (metaVal === 'filter_count') return this.filterCount(collection, query);
 			})
diff --git a/api/src/services/payload.ts b/api/src/services/payload.ts
index ae0e59b4be..cda1d0b27d 100644
--- a/api/src/services/payload.ts
+++ b/api/src/services/payload.ts
@@ -5,8 +5,8 @@ import { clone, cloneDeep, isObject, isPlainObject, omit, isNil } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
 import getDatabase from '../database';
 import { ForbiddenException, InvalidPayloadException } from '../exceptions';
-import { AbstractServiceOptions, Item, PrimaryKey, Query, SchemaOverview, Alterations } from '../types';
-import { Accountability } from '@directus/shared/types';
+import { AbstractServiceOptions, Item, PrimaryKey, SchemaOverview, Alterations } from '../types';
+import { Accountability, Query } from '@directus/shared/types';
 import { toArray } from '@directus/shared/utils';
 import { ItemsService } from './items';
 import { unflatten } from 'flat';
diff --git a/api/src/services/permissions.ts b/api/src/services/permissions.ts
index 8ed4733b22..0dcf76c924 100644
--- a/api/src/services/permissions.ts
+++ b/api/src/services/permissions.ts
@@ -1,7 +1,8 @@
 import { appAccessMinimalPermissions } from '../database/system-data/app-access-permissions';
 import logger from '../logger';
 import { ItemsService, QueryOptions } from '../services/items';
-import { AbstractServiceOptions, Item, PermissionsAction, PrimaryKey, Query } from '../types';
+import { AbstractServiceOptions, Item, PrimaryKey } from '../types';
+import { Query, PermissionsAction } from '@directus/shared/types';
 import { filterItems } from '../utils/filter-items';
 
 export class PermissionsService extends ItemsService {
diff --git a/api/src/services/relations.ts b/api/src/services/relations.ts
index 636e5336da..b9b988d7a0 100644
--- a/api/src/services/relations.ts
+++ b/api/src/services/relations.ts
@@ -1,7 +1,8 @@
 import { Knex } from 'knex';
 import { systemRelationRows } from '../database/system-data/relations';
 import { ForbiddenException, InvalidPayloadException } from '../exceptions';
-import { AbstractServiceOptions, SchemaOverview, Query, Relation, RelationMeta } from '../types';
+import { AbstractServiceOptions, SchemaOverview, Relation, RelationMeta } from '../types';
+import { Query } from '@directus/shared/types';
 import { Accountability } from '@directus/shared/types';
 import { toArray } from '@directus/shared/utils';
 import { ItemsService, QueryOptions } from './items';
diff --git a/api/src/services/roles.ts b/api/src/services/roles.ts
index eff48f77b4..c28f716c5d 100644
--- a/api/src/services/roles.ts
+++ b/api/src/services/roles.ts
@@ -1,5 +1,6 @@
 import { ForbiddenException, UnprocessableEntityException } from '../exceptions';
-import { AbstractServiceOptions, PrimaryKey, Query, Alterations, Item } from '../types';
+import { AbstractServiceOptions, PrimaryKey, Alterations, Item } from '../types';
+import { Query } from '@directus/shared/types';
 import { ItemsService, MutationOptions } from './items';
 import { PermissionsService } from './permissions';
 import { PresetsService } from './presets';
diff --git a/api/src/services/specifications.ts b/api/src/services/specifications.ts
index d0c449f1e6..0830015626 100644
--- a/api/src/services/specifications.ts
+++ b/api/src/services/specifications.ts
@@ -15,8 +15,8 @@ import {
 import { version } from '../../package.json';
 import getDatabase from '../database';
 import env from '../env';
-import { AbstractServiceOptions, Collection, Permission, Relation, SchemaOverview } from '../types';
-import { Accountability, Field, Type } from '@directus/shared/types';
+import { AbstractServiceOptions, Collection, Relation, SchemaOverview } from '../types';
+import { Accountability, Field, Type, Permission } from '@directus/shared/types';
 import { getRelationType } from '../utils/get-relation-type';
 import { CollectionsService } from './collections';
 import { FieldsService } from './fields';
diff --git a/api/src/services/users.ts b/api/src/services/users.ts
index 19d8efe328..82d2c184a2 100644
--- a/api/src/services/users.ts
+++ b/api/src/services/users.ts
@@ -7,7 +7,8 @@ import { FailedValidationException } from '@directus/shared/exceptions';
 import { ForbiddenException, InvalidPayloadException, UnprocessableEntityException } from '../exceptions';
 import { RecordNotUniqueException } from '../exceptions/database/record-not-unique';
 import logger from '../logger';
-import { AbstractServiceOptions, Item, PrimaryKey, Query, SchemaOverview } from '../types';
+import { AbstractServiceOptions, Item, PrimaryKey, SchemaOverview } from '../types';
+import { Query } from '@directus/shared/types';
 import { Accountability } from '@directus/shared/types';
 import isUrlAllowed from '../utils/is-url-allowed';
 import { toArray } from '@directus/shared/utils';
diff --git a/api/src/types/ast.ts b/api/src/types/ast.ts
index 75b32e44dc..f52f972a84 100644
--- a/api/src/types/ast.ts
+++ b/api/src/types/ast.ts
@@ -1,4 +1,4 @@
-import { Query } from './query';
+import { Query } from '@directus/shared/types';
 import { Relation } from './relation';
 
 export type M2ONode = {
diff --git a/api/src/types/express.d.ts b/api/src/types/express.d.ts
index 1c65aa2e4e..f0c6b7b511 100644
--- a/api/src/types/express.d.ts
+++ b/api/src/types/express.d.ts
@@ -3,7 +3,7 @@
  */
 
 import { Accountability } from '@directus/shared/types';
-import { Query } from './query';
+import { Query } from '@directus/shared/types';
 import { SchemaOverview } from './schema';
 
 export {};
diff --git a/api/src/types/index.ts b/api/src/types/index.ts
index 9895ca47b0..109a370687 100644
--- a/api/src/types/index.ts
+++ b/api/src/types/index.ts
@@ -9,8 +9,6 @@ export * from './graphql';
 export * from './items';
 export * from './meta';
 export * from './migration';
-export * from './permissions';
-export * from './query';
 export * from './relation';
 export * from './revision';
 export * from './schema';
diff --git a/api/src/types/permissions.ts b/api/src/types/permissions.ts
deleted file mode 100644
index 76dddb6f41..0000000000
--- a/api/src/types/permissions.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Filter } from './query';
-
-export type PermissionsAction = 'create' | 'read' | 'update' | 'delete' | 'comment' | 'explain';
-
-export type Permission = {
-	id?: number;
-	role: string | null;
-	collection: string;
-	action: PermissionsAction;
-	permissions: Record<string, any>;
-	validation: Filter | null;
-	presets: Record<string, any> | null;
-	fields: string[] | null;
-	system?: true;
-};
diff --git a/api/src/types/query.ts b/api/src/types/query.ts
deleted file mode 100644
index b046afd5c7..0000000000
--- a/api/src/types/query.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Meta } from './meta';
-
-export type Query = {
-	fields?: string[];
-	sort?: Sort[];
-	filter?: Filter;
-	limit?: number;
-	offset?: number;
-	page?: number;
-	meta?: Meta[];
-	search?: string;
-	export?: 'json' | 'csv' | 'xml';
-	group?: string[];
-	aggregate?: Aggregate;
-	deep?: Record<string, Query>;
-	alias?: Record<string, string>;
-};
-
-export type Sort = {
-	column: string;
-	order: 'asc' | 'desc';
-};
-
-export type Filter = {
-	[keyOrOperator: string]: Filter | any;
-};
-
-/**
- * Aggregate operation. Contains column name, and the field alias it should be returned as
- */
-export type Aggregate = {
-	avg?: string[];
-	avgDistinct?: string[];
-	count?: string[];
-	countDistinct?: string[];
-	sum?: string[];
-	sumDistinct?: string[];
-	min?: string[];
-	max?: string[];
-};
diff --git a/api/src/types/schema.ts b/api/src/types/schema.ts
index c0c5eddf2b..614794f128 100644
--- a/api/src/types/schema.ts
+++ b/api/src/types/schema.ts
@@ -1,5 +1,4 @@
-import { Type } from '@directus/shared/types';
-import { Permission } from './permissions';
+import { Type, Permission } from '@directus/shared/types';
 import { Relation } from './relation';
 
 export type FieldOverview = {
diff --git a/api/src/types/services.ts b/api/src/types/services.ts
index 5794f75e8c..06179f7377 100644
--- a/api/src/types/services.ts
+++ b/api/src/types/services.ts
@@ -2,8 +2,7 @@ import { Knex } from 'knex';
 import { SchemaOverview } from '../types';
 import { Accountability } from '@directus/shared/types';
 import { Item, PrimaryKey } from './items';
-import { PermissionsAction } from './permissions';
-import { Query } from './query';
+import { Query, PermissionsAction } from '@directus/shared/types';
 
 export type AbstractServiceOptions = {
 	knex?: Knex;
diff --git a/api/src/utils/apply-query.ts b/api/src/utils/apply-query.ts
index afbbfb2391..e10a1b0554 100644
--- a/api/src/utils/apply-query.ts
+++ b/api/src/utils/apply-query.ts
@@ -3,7 +3,8 @@ import { clone, get, isPlainObject, set } from 'lodash';
 import { customAlphabet } from 'nanoid';
 import validate from 'uuid-validate';
 import { InvalidQueryException } from '../exceptions';
-import { Aggregate, Filter, Query, Relation, SchemaOverview } from '../types';
+import { Relation, SchemaOverview } from '../types';
+import { Aggregate, Filter, Query } from '@directus/shared/types';
 import { applyFunctionToColumnName } from './apply-function-to-column-name';
 import { getColumn } from './get-column';
 import { getRelationType } from './get-relation-type';
@@ -24,10 +25,20 @@ export default function applyQuery(
 ): void {
 	if (query.sort) {
 		dbQuery.orderBy(
-			query.sort.map((sort) => ({
-				...sort,
-				column: getColumn(knex, collection, sort.column, false) as any,
-			}))
+			query.sort.map((sortField) => {
+				let column = sortField;
+				let order: 'asc' | 'desc' = 'asc';
+
+				if (sortField.startsWith('-')) {
+					column = column.substring(1);
+					order = 'desc';
+				}
+
+				return {
+					order,
+					column: getColumn(knex, collection, column, false) as any,
+				};
+			})
 		);
 	}
 
diff --git a/api/src/utils/filter-items.ts b/api/src/utils/filter-items.ts
index 17538f16cb..475d597b39 100644
--- a/api/src/utils/filter-items.ts
+++ b/api/src/utils/filter-items.ts
@@ -1,4 +1,4 @@
-import { Query } from '../types';
+import { Query } from '@directus/shared/types';
 import generateJoi from './generate-joi';
 
 /*
diff --git a/api/src/utils/generate-joi.ts b/api/src/utils/generate-joi.ts
index 44ab075b2c..758b064b51 100644
--- a/api/src/utils/generate-joi.ts
+++ b/api/src/utils/generate-joi.ts
@@ -1,6 +1,6 @@
 import BaseJoi, { AnySchema } from 'joi';
-import { Filter } from '../types';
 import { escapeRegExp } from 'lodash';
+import { Filter } from '@directus/shared/types';
 
 const Joi: typeof BaseJoi = BaseJoi.extend({
 	type: 'string',
diff --git a/api/src/utils/get-ast-from-query.ts b/api/src/utils/get-ast-from-query.ts
index 91be1e5d3f..b9dd7a7d1b 100644
--- a/api/src/utils/get-ast-from-query.ts
+++ b/api/src/utils/get-ast-from-query.ts
@@ -5,7 +5,8 @@
 import { Knex } from 'knex';
 import { cloneDeep, mapKeys, omitBy, uniq } from 'lodash';
 import { Accountability } from '@directus/shared/types';
-import { AST, FieldNode, NestedCollectionNode, PermissionsAction, Query, SchemaOverview } from '../types';
+import { AST, FieldNode, NestedCollectionNode, SchemaOverview } from '../types';
+import { Query, PermissionsAction } from '@directus/shared/types';
 import { getRelationType } from '../utils/get-relation-type';
 
 type GetASTOptions = {
@@ -87,7 +88,7 @@ export default async function getASTFromQuery(
 			sortField = query.group[0];
 		}
 
-		query.sort = [{ column: sortField, order: 'asc' }];
+		query.sort = [sortField];
 	}
 
 	// When no group by is supplied, but an aggregate function is used, only a single row will be
@@ -235,9 +236,7 @@ export default async function getASTFromQuery(
 				};
 
 				if (relationType === 'o2m' && !child!.query.sort) {
-					child!.query.sort = [
-						{ column: relation.meta?.sort_field || schema.collections[relation.collection].primary, order: 'asc' },
-					];
+					child!.query.sort = [relation.meta?.sort_field || schema.collections[relation.collection].primary];
 				}
 			}
 
diff --git a/api/src/utils/get-schema.ts b/api/src/utils/get-schema.ts
index 85ce75dfae..aa1ee03f7c 100644
--- a/api/src/utils/get-schema.ts
+++ b/api/src/utils/get-schema.ts
@@ -6,8 +6,8 @@ import { systemCollectionRows } from '../database/system-data/collections';
 import { systemFieldRows } from '../database/system-data/fields';
 import logger from '../logger';
 import { RelationsService } from '../services';
-import { Permission, SchemaOverview } from '../types';
-import { Accountability } from '@directus/shared/types';
+import { SchemaOverview } from '../types';
+import { Accountability, Permission } from '@directus/shared/types';
 import { toArray } from '@directus/shared/utils';
 import getDefaultValue from './get-default-value';
 import getLocalType from './get-local-type';
diff --git a/api/src/utils/merge-permissions.ts b/api/src/utils/merge-permissions.ts
index 5b5f029898..48c82b6cc5 100644
--- a/api/src/utils/merge-permissions.ts
+++ b/api/src/utils/merge-permissions.ts
@@ -1,5 +1,5 @@
 import { flatten, merge, omit } from 'lodash';
-import { Permission } from '../types';
+import { Permission, LogicalFilterOR } from '@directus/shared/types';
 
 export function mergePermissions(...permissions: Permission[][]): Permission[] {
 	const allPermissions = flatten(permissions);
@@ -29,7 +29,7 @@ function mergePerm(currentPerm: Permission, newPerm: Permission) {
 	if (newPerm.permissions) {
 		if (currentPerm.permissions && Object.keys(currentPerm.permissions)[0] === '_or') {
 			permissions = {
-				_or: [...currentPerm.permissions._or, newPerm.permissions],
+				_or: [...(currentPerm.permissions as LogicalFilterOR)._or, newPerm.permissions],
 			};
 		} else if (currentPerm.permissions) {
 			permissions = {
@@ -45,7 +45,7 @@ function mergePerm(currentPerm: Permission, newPerm: Permission) {
 	if (newPerm.validation) {
 		if (currentPerm.validation && Object.keys(currentPerm.validation)[0] === '_or') {
 			validation = {
-				_or: [...currentPerm.validation._or, newPerm.validation],
+				_or: [...(currentPerm.validation as LogicalFilterOR)._or, newPerm.validation],
 			};
 		} else if (currentPerm.validation) {
 			validation = {
diff --git a/api/src/utils/reduce-schema.ts b/api/src/utils/reduce-schema.ts
index 6f53b08cb5..fd7a05b953 100644
--- a/api/src/utils/reduce-schema.ts
+++ b/api/src/utils/reduce-schema.ts
@@ -1,5 +1,6 @@
 import { uniq } from 'lodash';
-import { PermissionsAction, SchemaOverview } from '../types';
+import { SchemaOverview } from '../types';
+import { PermissionsAction } from '@directus/shared/types';
 
 /**
  * Reduces the schema based on the included permissions. The resulting object is the schema structure, but with only
diff --git a/api/src/utils/sanitize-query.ts b/api/src/utils/sanitize-query.ts
index c9c31b87a2..7b6c3ee1cf 100644
--- a/api/src/utils/sanitize-query.ts
+++ b/api/src/utils/sanitize-query.ts
@@ -1,6 +1,7 @@
 import { flatten, get, merge, set } from 'lodash';
 import logger from '../logger';
-import { Aggregate, Filter, Meta, Query, Sort } from '../types';
+import { Meta } from '../types';
+import { Query, Aggregate, Filter } from '@directus/shared/types';
 import { Accountability } from '@directus/shared/types';
 import { parseFilter, deepMap } from '@directus/shared/utils';
 
@@ -44,7 +45,7 @@ export function sanitizeQuery(rawQuery: Record<string, any>, accountability?: Ac
 	}
 
 	if (rawQuery.meta) {
-		query.meta = sanitizeMeta(rawQuery.meta);
+		(query as any).meta = sanitizeMeta(rawQuery.meta);
 	}
 
 	if (rawQuery.search && typeof rawQuery.search === 'string') {
@@ -90,11 +91,7 @@ function sanitizeSort(rawSort: any) {
 	if (typeof rawSort === 'string') fields = rawSort.split(',');
 	else if (Array.isArray(rawSort)) fields = rawSort as string[];
 
-	return fields.map((field) => {
-		const order = field.startsWith('-') ? 'desc' : 'asc';
-		const column = field.startsWith('-') ? field.substring(1) : field;
-		return { column, order } as Sort;
-	});
+	return fields;
 }
 
 function sanitizeAggregate(rawAggregate: any): Aggregate {
diff --git a/api/src/utils/validate-query.ts b/api/src/utils/validate-query.ts
index 5e33b456be..92f911b117 100644
--- a/api/src/utils/validate-query.ts
+++ b/api/src/utils/validate-query.ts
@@ -1,18 +1,13 @@
 import Joi from 'joi';
 import { isPlainObject } from 'lodash';
 import { InvalidQueryException } from '../exceptions';
-import { Query } from '../types';
+import { Query } from '@directus/shared/types';
 import { stringify } from 'wellknown';
 
 const querySchema = Joi.object({
 	fields: Joi.array().items(Joi.string()),
 	group: Joi.array().items(Joi.string()),
-	sort: Joi.array().items(
-		Joi.object({
-			column: Joi.string(),
-			order: Joi.string().valid('asc', 'desc'),
-		})
-	),
+	sort: Joi.array().items(Joi.string()),
 	filter: Joi.object({}).unknown(),
 	limit: Joi.number(),
 	offset: Joi.number(),
diff --git a/app/src/api.ts b/app/src/api.ts
index 5c380b1a01..1784982822 100644
--- a/app/src/api.ts
+++ b/app/src/api.ts
@@ -50,6 +50,8 @@ export const onResponse = (response: AxiosResponse | Response): AxiosResponse |
 
 export const onError = async (error: RequestError): Promise<RequestError> => {
 	const requestsStore = useRequestsStore();
+
+	// Note: Cancelled requests don't respond with the config
 	const id = (error.response?.config as RequestConfig)?.id;
 
 	if (id) requestsStore.endRequest(id);
diff --git a/app/src/components/register.ts b/app/src/components/register.ts
index 472a981c3e..ac5d5e0f0a 100644
--- a/app/src/components/register.ts
+++ b/app/src/components/register.ts
@@ -1,5 +1,4 @@
 import ExportSidebarDetail from '@/views/private/components/export-sidebar-detail';
-import FilterSidebarDetail from '@/views/private/components/filter-sidebar-detail';
 import RenderDisplay from '@/views/private/components/render-display';
 import RenderTemplate from '@/views/private/components/render-template';
 import SidebarDetail from '@/views/private/components/sidebar-detail/';
@@ -113,7 +112,6 @@ export function registerComponents(app: App): void {
 
 	app.component('RenderDisplay', RenderDisplay);
 	app.component('RenderTemplate', RenderTemplate);
-	app.component('FilterSidebarDetail', FilterSidebarDetail);
 	app.component('ExportSidebarDetail', ExportSidebarDetail);
 	app.component('SidebarDetail', SidebarDetail);
 	app.component('UserPopover', UserPopover);
diff --git a/app/src/components/transition/expand/transition-expand-methods.ts b/app/src/components/transition/expand/transition-expand-methods.ts
index 97048af1ba..2922283383 100644
--- a/app/src/components/transition/expand/transition-expand-methods.ts
+++ b/app/src/components/transition/expand/transition-expand-methods.ts
@@ -11,12 +11,21 @@ interface HTMLExpandElement extends HTMLElement {
 	};
 }
 
-export default function (expandedParentClass = '', xAxis = false): Record<string, any> {
+export default function (
+	expandedParentClass = '',
+	xAxis = false,
+	emit: (
+		event: 'beforeEnter' | 'enter' | 'afterEnter' | 'enterCancelled' | 'leave' | 'afterLeave' | 'leaveCancelled',
+		...args: any[]
+	) => void
+): Record<string, any> {
 	const sizeProperty = xAxis ? 'width' : ('height' as 'width' | 'height');
 	const offsetProperty = `offset${capitalizeFirst(sizeProperty)}` as 'offsetHeight' | 'offsetWidth';
 
 	return {
 		beforeEnter(el: HTMLExpandElement) {
+			emit('beforeEnter');
+
 			el._parent = el.parentNode as (Node & ParentNode & HTMLElement) | null;
 			el._initialStyle = {
 				transition: el.style.transition,
@@ -27,6 +36,8 @@ export default function (expandedParentClass = '', xAxis = false): Record<string
 		},
 
 		enter(el: HTMLExpandElement) {
+			emit('enter');
+
 			const initialStyle = el._initialStyle;
 			if (!initialStyle) return;
 			const offset = `${el[offsetProperty]}px`;
@@ -51,10 +62,19 @@ export default function (expandedParentClass = '', xAxis = false): Record<string
 			});
 		},
 
-		afterEnter: resetStyles,
-		enterCancelled: resetStyles,
+		afterEnter(el: HTMLExpandElement) {
+			emit('afterEnter');
+			resetStyles(el);
+		},
+
+		enterCancelled(el: HTMLExpandElement) {
+			emit('enterCancelled');
+			resetStyles(el);
+		},
 
 		leave(el: HTMLExpandElement) {
+			emit('leave');
+
 			el._initialStyle = {
 				transition: '',
 				visibility: '',
@@ -69,16 +89,25 @@ export default function (expandedParentClass = '', xAxis = false): Record<string
 			requestAnimationFrame(() => (el.style[sizeProperty] = '0'));
 		},
 
-		afterLeave,
-		leaveCancelled: afterLeave,
-	};
+		afterLeave(el: HTMLExpandElement) {
+			emit('afterLeave');
 
-	function afterLeave(el: HTMLExpandElement) {
-		if (expandedParentClass && el._parent) {
-			el._parent.classList.remove(expandedParentClass);
-		}
-		resetStyles(el);
-	}
+			if (expandedParentClass && el._parent) {
+				el._parent.classList.remove(expandedParentClass);
+			}
+
+			resetStyles(el);
+		},
+		leaveCancelled(el: HTMLExpandElement) {
+			emit('leaveCancelled');
+
+			if (expandedParentClass && el._parent) {
+				el._parent.classList.remove(expandedParentClass);
+			}
+
+			resetStyles(el);
+		},
+	};
 
 	function resetStyles(el: HTMLExpandElement) {
 		if (!el._initialStyle) return;
diff --git a/app/src/components/transition/expand/transition-expand.vue b/app/src/components/transition/expand/transition-expand.vue
index a05eaf5ee5..df55f30c3a 100644
--- a/app/src/components/transition/expand/transition-expand.vue
+++ b/app/src/components/transition/expand/transition-expand.vue
@@ -19,8 +19,9 @@ export default defineComponent({
 			default: '',
 		},
 	},
-	setup(props) {
-		const methods = ExpandMethods(props.expandedParentClass, props.xAxis);
+	emits: ['beforeEnter', 'enter', 'afterEnter', 'enterCancelled', 'leave', 'afterLeave', 'leaveCancelled'],
+	setup(props, { emit }) {
+		const methods = ExpandMethods(props.expandedParentClass, props.xAxis, emit);
 		return { methods };
 	},
 });
diff --git a/app/src/components/v-badge/v-badge.vue b/app/src/components/v-badge/v-badge.vue
index 4c0b4f544b..7810544a5b 100644
--- a/app/src/components/v-badge/v-badge.vue
+++ b/app/src/components/v-badge/v-badge.vue
@@ -46,8 +46,8 @@ export default defineComponent({
 });
 </script>
 
-<style>
-body {
+<style lang="scss" scoped>
+:global(body) {
 	--v-badge-color: var(--white);
 	--v-badge-background-color: var(--danger);
 	--v-badge-border-color: var(--background-page);
@@ -55,9 +55,7 @@ body {
 	--v-badge-offset-y: 0px;
 	--v-badge-size: 16px;
 }
-</style>
 
-<style lang="scss" scoped>
 .v-badge {
 	position: relative;
 	display: inline-block;
diff --git a/app/src/components/v-menu/use-popper.ts b/app/src/components/v-menu/use-popper.ts
index 6320897f58..fbfe4c83b5 100644
--- a/app/src/components/v-menu/use-popper.ts
+++ b/app/src/components/v-menu/use-popper.ts
@@ -12,7 +12,9 @@ import { onUnmounted, ref, Ref, watch } from 'vue';
 export function usePopper(
 	reference: Ref<HTMLElement | null>,
 	popper: Ref<HTMLElement | null>,
-	options: Readonly<Ref<Readonly<{ placement: Placement; attached: boolean; arrow: boolean }>>>
+	options: Readonly<
+		Ref<Readonly<{ placement: Placement; attached: boolean; arrow: boolean; offsetY: number; offsetX: number }>>
+	>
 ): Record<string, any> {
 	const popperInstance = ref<Instance | null>(null);
 	const styles = ref({});
@@ -72,7 +74,7 @@ export function usePopper(
 			{
 				...offset,
 				options: {
-					offset: options.value.attached ? [0, 0] : [0, 8],
+					offset: options.value.attached ? [0, 0] : [options.value.offsetX ?? 0, options.value.offsetY ?? 8],
 				},
 			},
 			{
diff --git a/app/src/components/v-menu/v-menu.vue b/app/src/components/v-menu/v-menu.vue
index d40b26a7a9..abc5aa6f17 100644
--- a/app/src/components/v-menu/v-menu.vue
+++ b/app/src/components/v-menu/v-menu.vue
@@ -103,6 +103,14 @@ export default defineComponent({
 			type: Number,
 			default: 0,
 		},
+		offsetY: {
+			type: Number,
+			default: 8,
+		},
+		offsetX: {
+			type: Number,
+			default: 0,
+		},
 	},
 	emits: ['update:modelValue'],
 	setup(props, { emit }) {
@@ -138,6 +146,8 @@ export default defineComponent({
 				placement: props.placement,
 				attached: props.attached,
 				arrow: props.showArrow,
+				offsetY: props.offsetY,
+				offsetX: props.offsetX,
 			}))
 		);
 
@@ -311,17 +321,16 @@ body {
 }
 
 .arrow,
-.arrow::before,
 .arrow::after {
 	position: absolute;
 	z-index: 1;
 	width: 10px;
 	height: 10px;
 	border-radius: 2px;
+	box-shadow: none;
 }
 
 .arrow {
-	&::before,
 	&::after {
 		background: var(--card-face-color);
 		transform: rotate(45deg) scale(0);
@@ -330,16 +339,10 @@ body {
 		content: '';
 	}
 
-	&.active::before,
 	&.active::after {
 		transform: rotate(45deg) scale(1);
 		transition: transform var(--medium) var(--transition-in);
 	}
-
-	&::after {
-		background: var(--card-face-color);
-		box-shadow: -2.5px -2.5px 4px 0px rgba(var(--card-shadow-color), 0.2);
-	}
 }
 
 [data-placement^='top'] .arrow {
@@ -347,7 +350,7 @@ body {
 
 	&::after {
 		bottom: 2px;
-		box-shadow: 2.5px 2.5px 4px 0px rgba(var(--card-shadow-color), 0.2);
+		// box-shadow: 2.5px 2.5px 4px 0px rgba(var(--card-shadow-color), 0.2);
 	}
 }
 
@@ -356,7 +359,7 @@ body {
 
 	&::after {
 		top: 2px;
-		box-shadow: -2.5px -2.5px 4px 0px rgba(var(--card-shadow-color), 0.2);
+		// box-shadow: -2.5px -2.5px 4px 0px rgba(var(--card-shadow-color), 0.2);
 	}
 }
 
@@ -365,7 +368,7 @@ body {
 
 	&::after {
 		left: 2px;
-		box-shadow: -2.5px 2.5px 4px 0px rgba(var(--card-shadow-color), 0.2);
+		// box-shadow: -2.5px 2.5px 4px 0px rgba(var(--card-shadow-color), 0.2);
 	}
 }
 
@@ -374,7 +377,7 @@ body {
 
 	&::after {
 		right: 2px;
-		box-shadow: 2.5px -2.5px 4px 0px rgba(var(--card-shadow-color), 0.2);
+		// box-shadow: 2.5px -2.5px 4px 0px rgba(var(--card-shadow-color), 0.2);
 	}
 }
 
diff --git a/app/src/composables/use-field-tree.ts b/app/src/composables/use-field-tree.ts
index 3b504d8cfa..5acd6d5ca5 100644
--- a/app/src/composables/use-field-tree.ts
+++ b/app/src/composables/use-field-tree.ts
@@ -2,7 +2,7 @@ import { useFieldsStore, useRelationsStore } from '@/stores/';
 import { Field, Relation } from '@directus/shared/types';
 import { getRelationType } from '@directus/shared/utils';
 import { get, set } from 'lodash';
-import { computed, Ref, ref, ComputedRef } from 'vue';
+import { computed, Ref, ref, ComputedRef, watch } from 'vue';
 
 export type FieldTree = Record<string, FieldInfo>;
 export type FieldInfo = { name: string; field: string; children: FieldTree; collection: string; type: string };
@@ -31,6 +31,12 @@ export function useFieldTree(
 		tree.value = getFieldTreeForCollection(collection.value, 'any');
 	}
 
+	watch(collection, () => {
+		if (collection.value) {
+			tree.value = getFieldTreeForCollection(collection.value, 'any');
+		}
+	});
+
 	const visitedRelations = ref<string[][]>([]);
 
 	Object.values(tree.value).forEach((value) => {
diff --git a/app/src/composables/use-layout.ts b/app/src/composables/use-layout.ts
index eb1ca36c0b..c25d6696ee 100644
--- a/app/src/composables/use-layout.ts
+++ b/app/src/composables/use-layout.ts
@@ -1,9 +1,9 @@
 import { getLayouts } from '@/layouts';
 import { computed, reactive, toRefs, defineComponent, Ref, PropType, Component, ComputedRef } from 'vue';
-import { AppFilter, Item, LayoutConfig } from '@directus/shared/types';
+import { Filter, Item, LayoutConfig } from '@directus/shared/types';
 
 const NAME_SUFFIX = 'wrapper';
-const WRITABLE_PROPS = ['selection', 'layoutOptions', 'layoutQuery', 'filters', 'searchQuery'] as const;
+const WRITABLE_PROPS = ['selection', 'layoutOptions', 'layoutQuery'] as const;
 
 type WritableProp = typeof WRITABLE_PROPS[number];
 
@@ -31,11 +31,19 @@ function createLayoutWrapper<Options, Query>(layout: LayoutConfig): Component {
 				type: Object as PropType<Query>,
 				default: () => ({}),
 			},
-			filters: {
-				type: Array as PropType<AppFilter[]>,
-				default: () => [],
+			filter: {
+				type: Object as PropType<Filter>,
+				default: null,
 			},
-			searchQuery: {
+			filterUser: {
+				type: Object as PropType<Filter>,
+				default: null,
+			},
+			filterSystem: {
+				type: Object as PropType<Filter>,
+				default: null,
+			},
+			search: {
 				type: String as PropType<string | null>,
 				default: null,
 			},
diff --git a/app/src/composables/use-preset/types.ts b/app/src/composables/use-preset/types.ts
index ae4b16f7be..a25965fcce 100644
--- a/app/src/composables/use-preset/types.ts
+++ b/app/src/composables/use-preset/types.ts
@@ -1,14 +1,9 @@
-export type Filter = {
-	locked?: boolean;
-	field: string;
-	operator: string;
-	value: string | number;
-};
+import { Filter } from '@directus/shared/types';
 
 export type Preset = {
 	id: number;
 	collection: string;
-	filters: null | Filter[];
+	filter: Filter | null;
 	role: number | null;
 	search: string | null;
 	title: string | null;
diff --git a/app/src/composables/use-preset/use-preset.ts b/app/src/composables/use-preset/use-preset.ts
index 82948e551e..2f271a8c55 100644
--- a/app/src/composables/use-preset/use-preset.ts
+++ b/app/src/composables/use-preset/use-preset.ts
@@ -1,4 +1,3 @@
-import { useCollection } from '@directus/shared/composables';
 import { usePresetsStore, useUserStore } from '@/stores';
 import { Filter, Preset } from '@directus/shared/types';
 import { debounce, isEqual } from 'lodash';
@@ -9,8 +8,8 @@ type UsablePreset = {
 	layout: Ref<string | null>;
 	layoutOptions: Ref<Record<string, any>>;
 	layoutQuery: Ref<Record<string, any>>;
-	filters: Ref<readonly Filter[]>;
-	searchQuery: Ref<string | null>;
+	filter: Ref<Filter | null>;
+	search: Ref<string | null>;
 	refreshInterval: Ref<number | null>;
 	savePreset: (preset?: Partial<Preset> | undefined) => Promise<any>;
 	saveCurrentAsBookmark: (overrides: Partial<Preset>) => Promise<any>;
@@ -33,7 +32,7 @@ export function usePreset(
 
 	const busy = ref(false);
 
-	const { info: collectionInfo } = useCollection(collection);
+	// const { info: collectionInfo } = useCollection(collection);
 
 	const bookmarkExists = computed(() => {
 		if (!bookmark.value) return false;
@@ -71,7 +70,7 @@ export function usePreset(
 
 	/**
 	 * If no bookmark is present, save periodically to the DB,
-	 * otherwhise update the saved status if changes where made.
+	 * otherwise update the saved status if changes where made.
 	 */
 	function handleChanges() {
 		if (bookmarkExists.value) {
@@ -139,14 +138,14 @@ export function usePreset(
 		},
 	});
 
-	const filters = computed({
+	const filter = computed<Filter | null>({
 		get() {
-			return localPreset.value.filters || [];
+			return localPreset.value.filter ?? null;
 		},
-		set(val: readonly Filter[]) {
+		set(val: Filter | null) {
 			localPreset.value = {
 				...localPreset.value,
-				filters: val,
+				filter: val,
 			};
 
 			handleChanges();
@@ -167,7 +166,7 @@ export function usePreset(
 		},
 	});
 
-	const searchQuery = computed<string | null>({
+	const search = computed<string | null>({
 		get() {
 			return localPreset.value.search || null;
 		},
@@ -201,8 +200,8 @@ export function usePreset(
 		layout,
 		layoutOptions,
 		layoutQuery,
-		filters,
-		searchQuery,
+		filter,
+		search,
 		refreshInterval,
 		savePreset,
 		saveCurrentAsBookmark,
@@ -230,7 +229,7 @@ export function usePreset(
 			layout_query: null,
 			layout_options: null,
 			layout: 'tabular',
-			filters: null,
+			filter: null,
 			search: null,
 			refresh_interval: null,
 		};
@@ -258,20 +257,20 @@ export function usePreset(
 			};
 		}
 
-		if (collectionInfo.value?.meta?.archive_field && collectionInfo.value?.meta?.archive_app_filter === true) {
-			localPreset.value = {
-				...localPreset.value,
-				filters: localPreset.value.filters || [
-					{
-						key: 'hide-archived',
-						field: collectionInfo.value.meta.archive_field,
-						operator: 'neq',
-						value: collectionInfo.value.meta.archive_value!,
-						locked: true,
-					},
-				],
-			};
-		}
+		// if (collectionInfo.value?.meta?.archive_field && collectionInfo.value?.meta?.archive_app_filter === true) {
+		// 	localPreset.value = {
+		// 		...localPreset.value,
+		// 		filter: localPreset.value.filter || [
+		// 			{
+		// 				key: 'hide-archived',
+		// 				field: collectionInfo.value.meta.archive_field,
+		// 				operator: 'neq',
+		// 				value: collectionInfo.value.meta.archive_value!,
+		// 				locked: true,
+		// 			},
+		// 		],
+		// 	};
+		// }
 	}
 
 	/**
diff --git a/app/src/interfaces/_system/system-filter/input-component.vue b/app/src/interfaces/_system/system-filter/input-component.vue
index 8535d28bbe..0621c43d61 100644
--- a/app/src/interfaces/_system/system-filter/input-component.vue
+++ b/app/src/interfaces/_system/system-filter/input-component.vue
@@ -9,12 +9,12 @@
 	/>
 	<input
 		v-else-if="is === 'interface-input'"
+		ref="inputEl"
 		:type="type"
 		:value="value"
 		:style="{ width }"
-		autofocus
 		placeholder="--"
-		@input="$emit('input', $event.target.value)"
+		@input="emitValue($event.target.value)"
 	/>
 	<v-menu v-else :close-on-content-click="false" :show-arrow="true" placement="bottom-start">
 		<template #activator="{ toggle }">
@@ -27,13 +27,13 @@
 			<div v-else class="preview" @click="toggle">{{ displayValue }}</div>
 		</template>
 		<div class="input" :class="type">
-			<component :is="is" class="input-component" small :type="type" :value="value" @input="$emit('input', $event)" />
+			<component :is="is" class="input-component" small :type="type" :value="value" @input="emitValue($event)" />
 		</div>
 	</v-menu>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { computed, defineComponent, PropType, ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
@@ -52,7 +52,8 @@ export default defineComponent({
 		},
 	},
 	emits: ['input'],
-	setup(props) {
+	setup(props, { emit }) {
+		const inputEl = ref<HTMLElement>();
 		const { t } = useI18n();
 
 		const displayValue = computed(() => {
@@ -70,10 +71,23 @@ export default defineComponent({
 			if (props.is === 'interface-input' && typeof props.value === 'string') {
 				return (props.value?.length >= 3 ? props.value.length + 1 : 3) + 'ch';
 			}
+
 			return 3 + 'ch';
 		});
 
-		return { displayValue, width, t };
+		onMounted(() => {
+			inputEl.value?.focus();
+		});
+
+		return { displayValue, width, t, emitValue, inputEl };
+
+		function emitValue(val: unknown) {
+			if (val === '') {
+				emit('input', null);
+			} else {
+				emit('input', val);
+			}
+		}
 	},
 });
 </script>
diff --git a/app/src/interfaces/_system/system-filter/nodes.vue b/app/src/interfaces/_system/system-filter/nodes.vue
index b351250def..dcd577b777 100644
--- a/app/src/interfaces/_system/system-filter/nodes.vue
+++ b/app/src/interfaces/_system/system-filter/nodes.vue
@@ -1,21 +1,22 @@
 <template>
 	<draggable
-		:group="{ name: 'g1' }"
-		:list="filter"
+		tag="ul"
 		draggable=".row"
 		handle=".drag-handle"
-		:item-key="getIndex"
-		tag="ul"
-		:swap-threshold="0.3"
 		class="group"
+		:list="filterSync"
+		:group="{ name: 'g1' }"
+		:item-key="getIndex"
+		:swap-threshold="0.3"
+		:force-fallback="true"
+		@change="$emit('change')"
 	>
 		<template #item="{ element, index }">
 			<li class="row">
 				<div v-if="filterInfo[index].isField" block class="node field">
-					<div class="header">
+					<div class="header" :class="{ inline }">
 						<v-icon name="drag_indicator" class="drag-handle" small></v-icon>
 						<v-select
-							v-tooltip.monospace="filterInfo[index].field"
 							inline
 							class="name"
 							item-text="name"
@@ -39,7 +40,7 @@
 							:items="getCompareOptions(filterInfo[index].field)"
 							@update:modelValue="updateComparator(index, $event)"
 						/>
-						<input-group :field="element" :collection="collection" @update:field="updateNode(index, $event)" />
+						<input-group :field="element" :collection="collection" @update:field="replaceNode(index, $event)" />
 						<span class="delete">
 							<v-icon
 								v-tooltip="t('delete_label')"
@@ -53,7 +54,7 @@
 				</div>
 
 				<div v-else class="node logic">
-					<div class="header">
+					<div class="header" :class="{ inline }">
 						<v-icon name="drag_indicator" class="drag-handle" small />
 						<div class="logic-type" :class="{ or: filterInfo[index].name === '_or' }">
 							<span class="key" @click="toggleLogic(index)">
@@ -75,8 +76,10 @@
 						:filter="element[filterInfo[index].name]"
 						:collection="collection"
 						:depth="depth + 1"
+						:inline="inline"
+						@change="$emit('change')"
 						@remove-node="$emit('remove-node', [`${index}.${filterInfo[index].name}`, ...$event])"
-						@update:filter="updateNode(index, { [filterInfo[index].name]: $event })"
+						@update:filter="replaceNode(index, { [filterInfo[index].name]: $event })"
 					/>
 				</div>
 			</li>
@@ -93,7 +96,7 @@ import { useFieldsStore } from '@/stores';
 import { useI18n } from 'vue-i18n';
 import { getFilterOperatorsForType } from '@directus/shared/utils';
 import { get } from 'lodash';
-import { FieldFilter, Filter, FilterOperator } from '@directus/shared/types';
+import { FieldFilter, Filter, FilterOperator, LogicalFilterAND, LogicalFilterOR } from '@directus/shared/types';
 import { useSync } from '@directus/shared/composables';
 import { fieldToFilter, getField, getNodeName, getComparator } from './utils';
 
@@ -132,8 +135,12 @@ export default defineComponent({
 			type: Number,
 			default: 1,
 		},
+		inline: {
+			type: Boolean,
+			default: false,
+		},
 	},
-	emits: ['remove-node', 'update:filter'],
+	emits: ['remove-node', 'update:filter', 'change'],
 	setup(props, { emit }) {
 		const { collection } = toRefs(props);
 		const filterSync = useSync(props, 'filter', emit);
@@ -173,7 +180,7 @@ export default defineComponent({
 			updateField,
 			updateComparator,
 			t,
-			updateNode,
+			replaceNode,
 			toggleLogic,
 			loadFieldRelations,
 			getNodeName,
@@ -182,6 +189,7 @@ export default defineComponent({
 			filterInfo,
 			getIndex,
 			getFieldPreview,
+			filterSync,
 		};
 
 		function getFieldPreview(node: Record<string, any>) {
@@ -204,12 +212,25 @@ export default defineComponent({
 
 		function toggleLogic(index: number) {
 			const nodeInfo = filterInfo.value[index];
-			if (nodeInfo.isField) return;
+
+			if (filterInfo.value[index].isField) return;
 
 			if ('_and' in nodeInfo.node) {
-				filterSync.value[index] = { _or: nodeInfo.node._and as FieldFilter[] };
+				filterSync.value = filterSync.value.map((filter, filterIndex) => {
+					if (filterIndex === index) {
+						return { _or: (nodeInfo.node as LogicalFilterAND)._and as FieldFilter[] };
+					}
+
+					return filter;
+				});
 			} else {
-				filterSync.value[index] = { _and: nodeInfo.node._or as FieldFilter[] };
+				filterSync.value = filterSync.value.map((filter, filterIndex) => {
+					if (filterIndex === index) {
+						return { _and: (nodeInfo.node as LogicalFilterOR)._or as FieldFilter[] };
+					}
+
+					return filter;
+				});
 			}
 		}
 
@@ -233,7 +254,11 @@ export default defineComponent({
 
 			function update(value: any) {
 				if (nodeInfo.isField === false) return;
-				filterSync.value[index] = fieldToFilter(nodeInfo.field, newVal, value);
+
+				filterSync.value = filterSync.value.map((filter, filterIndex) => {
+					if (filterIndex === index) return fieldToFilter(nodeInfo.field, newVal, value);
+					return filter;
+				});
 			}
 		}
 
@@ -253,16 +278,23 @@ export default defineComponent({
 				comparator = getCompareOptions(newField)[0].value;
 			}
 
-			filterSync.value[index] = fieldToFilter(newField, comparator, value);
+			filterSync.value = filterSync.value.map((filter, filterIndex) => {
+				if (filterIndex === index) return fieldToFilter(newField, comparator, value);
+				return filter;
+			});
 		}
 
-		function updateNode(index: number, field: Filter) {
-			filterSync.value = filterSync.value.map((val, i) => (i === index ? field : val));
+		function replaceNode(index: number, newFilter: Filter) {
+			filterSync.value = filterSync.value.map((val, filterIndex) => {
+				if (filterIndex === index) return newFilter;
+				return val;
+			});
 		}
 
 		function getCompareOptions(name: string) {
 			const fieldInfo = fieldsStore.getField(props.collection, name);
 			if (fieldInfo === null) return [];
+
 			return getFilterOperatorsForType(fieldInfo.type).map((type) => ({
 				text: t(`operators.${type}`),
 				value: `_${type}`,
@@ -278,6 +310,7 @@ export default defineComponent({
 	display: flex;
 	align-items: center;
 	width: fit-content;
+	margin-right: 12px;
 	margin-bottom: 8px;
 	padding: 2px 6px;
 	padding-right: 8px;
@@ -385,6 +418,18 @@ export default defineComponent({
 		margin-right: 4px;
 		cursor: grab;
 	}
+
+	&.inline {
+		width: auto;
+		margin-right: 0;
+		padding-right: 12px;
+
+		.delete {
+			right: 8px;
+			left: unset;
+			background-color: var(--background-page);
+		}
+	}
 }
 
 .group :deep(.sortable-ghost) {
diff --git a/app/src/interfaces/_system/system-filter/system-filter.vue b/app/src/interfaces/_system/system-filter/system-filter.vue
index 5e2ab3ee38..2dd5a86745 100644
--- a/app/src/interfaces/_system/system-filter/system-filter.vue
+++ b/app/src/interfaces/_system/system-filter/system-filter.vue
@@ -1,40 +1,52 @@
 <template>
-	<div class="system-filter">
-		<v-list :mandatory="true" :class="{ empty: innerValue.length === 0 }">
+	<v-notice v-if="!collectionField && !collection" type="warning">
+		{{ t('collection_field_not_setup') }}
+	</v-notice>
+	<v-notice v-else-if="!collection" type="warning">
+		{{ t('select_a_collection') }}
+	</v-notice>
+
+	<div v-else class="system-filter" :class="{ inline, empty: innerValue.length === 0 }">
+		<v-list :mandatory="true">
 			<div v-if="innerValue.length === 0" class="no-rules">
 				{{ t('interfaces.filter.no_rules') }}
 			</div>
 			<nodes
 				v-else
 				v-model:filter="innerValue"
-				:collection="collectionName"
+				:collection="collection"
 				:depth="1"
 				@remove-node="removeNode($event)"
+				@change="emitValue"
 			/>
 		</v-list>
 		<div class="buttons">
 			<v-select
-				inline
+				:inline="!inline"
 				item-text="name"
 				item-value="key"
 				placement="bottom-start"
 				class="add-filter"
 				:placeholder="t('interfaces.filter.add_filter')"
-				:full-width="false"
+				:full-width="inline"
 				:model-value="null"
 				:items="fieldOptions"
 				:mandatory="false"
 				:groups-clickable="true"
 				@group-toggle="loadFieldRelations($event.value, 1)"
 				@update:modelValue="addNode($event)"
-			/>
+			>
+				<template v-if="inline" #prepend>
+					<v-icon name="add" small />
+				</template>
+			</v-select>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import { get, set, isEmpty } from 'lodash';
-import { defineComponent, PropType, computed, toRefs } from 'vue';
+import { get, set, isEmpty, cloneDeep } from 'lodash';
+import { defineComponent, PropType, computed, inject, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Filter, FieldFilter } from '@directus/shared/types';
 import Nodes from './nodes.vue';
@@ -58,14 +70,29 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		collectionField: {
+			type: String,
+			default: null,
+		},
+		// Inline = stylistic rendering without borders. Used inside search-input
+		inline: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: ['input'],
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
-		const { collectionName } = toRefs(props);
+		const values = inject('values', ref<Record<string, any>>({}));
 
-		const { treeList, loadFieldRelations } = useFieldTree(collectionName);
+		const collection = computed(() => {
+			if (props.collectionName) return props.collectionName;
+
+			return values.value[props.collectionField] ?? null;
+		});
+
+		const { treeList, loadFieldRelations } = useFieldTree(collection);
 
 		const innerValue = computed<Filter[]>({
 			get() {
@@ -74,9 +101,9 @@ export default defineComponent({
 				const name = getNodeName(props.value);
 
 				if (name === '_and') {
-					return props.value['_and'];
+					return cloneDeep(props.value['_and']);
 				} else {
-					return [props.value];
+					return cloneDeep([props.value]);
 				}
 			},
 			set(newVal) {
@@ -92,7 +119,24 @@ export default defineComponent({
 			return [{ key: '$group', name: t('interfaces.filter.add_group') }, { divider: true }, ...treeList.value];
 		});
 
-		return { t, addNode, removeNode, innerValue, fieldOptions, loadFieldRelations };
+		return {
+			t,
+			addNode,
+			removeNode,
+			innerValue,
+			fieldOptions,
+			loadFieldRelations,
+			emitValue,
+			collection,
+		};
+
+		function emitValue() {
+			if (innerValue.value.length === 0) {
+				emit('input', null);
+			} else {
+				emit('input', { _and: innerValue.value });
+			}
+		}
 
 		function addNode(key: string) {
 			if (key === '$group') {
@@ -155,32 +199,70 @@ export default defineComponent({
 	}
 
 	.buttons {
-		display: flex;
-		gap: 10px;
 		padding: 0 10px;
-		color: var(--primary);
-		font-weight: 700;
-
-		.add {
-			cursor: pointer;
-		}
+		font-weight: 600;
 	}
 
-	.empty {
-		display: flex;
-		align-items: center;
-		height: var(--input-height);
-		padding-top: 0;
-		padding-bottom: 0;
+	&.empty {
+		.v-list {
+			display: flex;
+			align-items: center;
+			height: var(--input-height);
+			padding-top: 0;
+			padding-bottom: 0;
+		}
 
 		.no-rules {
 			color: var(--foreground-subdued);
 			font-family: var(--family-monospace);
 		}
 	}
-}
 
-.add-filter {
-	--v-select-placeholder-color: var(--primary);
+	.add-filter {
+		--v-select-placeholder-color: var(--primary);
+	}
+
+	&.inline {
+		.v-list {
+			margin: 0;
+			padding: 0;
+			border: 0;
+		}
+
+		&.empty .v-list {
+			display: none;
+		}
+
+		.buttons {
+			margin: 0;
+			padding: 0;
+		}
+
+		.add-filter {
+			width: 100%;
+
+			:deep(.v-input) {
+				position: relative;
+				width: 100%;
+				height: 30px;
+				padding: 0;
+				background-color: var(--background-page);
+				border: var(--border-width) solid var(--border-subdued);
+				border-radius: 100px;
+				transition: border-color var(--fast) var(--transition);
+
+				.input {
+					padding-right: 5px;
+					padding-left: 6px;
+					background: transparent;
+					border: 0;
+
+					.prepend {
+						margin-right: 4px;
+					}
+				}
+			}
+		}
+	}
 }
 </style>
diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index 480288a32d..152ff12eb1 100644
--- a/app/src/interfaces/files/files.vue
+++ b/app/src/interfaces/files/files.vue
@@ -83,7 +83,6 @@
 			v-model:active="selectModalActive"
 			:collection="relationCollection.collection"
 			:selection="[]"
-			:filters="selectionFilters"
 			multiple
 			@input="stageSelection"
 		/>
@@ -210,7 +209,7 @@ export default defineComponent({
 		const { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit, relatedPrimaryKey, editModalActive } =
 			useEdit(value, relationInfo, emitter);
 
-		const { stageSelection, selectModalActive, selectionFilters } = useSelection(value, items, relationInfo, emitter);
+		const { stageSelection, selectModalActive } = useSelection(items, relationInfo, emitter);
 		const { sort, sortItems, sortedItems } = useSort(relationInfo, fields, items, emitter);
 
 		const { createAllowed, selectAllowed } = usePermissions(junctionCollection, relationCollection);
@@ -238,7 +237,6 @@ export default defineComponent({
 			stageSelection,
 			selectModalActive,
 			deleteItem,
-			selectionFilters,
 			items,
 			relationInfo,
 			relatedPrimaryKey,
diff --git a/app/src/interfaces/list-o2m-tree-view/list-o2m-tree-view.vue b/app/src/interfaces/list-o2m-tree-view/list-o2m-tree-view.vue
index 48f538d570..f42fd88968 100644
--- a/app/src/interfaces/list-o2m-tree-view/list-o2m-tree-view.vue
+++ b/app/src/interfaces/list-o2m-tree-view/list-o2m-tree-view.vue
@@ -40,7 +40,6 @@
 			v-model:active="selectDrawer"
 			:collection="collection"
 			:selection="[]"
-			:filters="selectionFilters"
 			multiple
 			@input="stageSelection"
 		/>
@@ -56,7 +55,7 @@ import api from '@/api';
 import { getFieldsFromTemplate } from '@directus/shared/utils';
 import hideDragImage from '@/utils/hide-drag-image';
 import NestedDraggable from './nested-draggable.vue';
-import { Filter, Relation } from '@directus/shared/types';
+import { Relation } from '@directus/shared/types';
 import DrawerCollection from '@/views/private/components/drawer-collection';
 import DrawerItem from '@/views/private/components/drawer-item';
 
@@ -107,7 +106,7 @@ export default defineComponent({
 		const { info, primaryKeyField } = useCollection(relation.value.related_collection!);
 		const { loading, error, stagedValues, fetchValues, emitValue } = useValues();
 
-		const { stageSelection, selectDrawer, selectionFilters } = useSelection();
+		const { stageSelection, selectDrawer } = useSelection();
 		const { addNewActive, addNew } = useAddNew();
 
 		const template = computed(() => {
@@ -253,30 +252,7 @@ export default defineComponent({
 				}
 			});
 
-			const selectionFilters = computed<Filter[]>(() => {
-				const pkField = primaryKeyField.value?.field;
-
-				if (selectedPrimaryKeys.value.length === 0) return [];
-
-				return [
-					{
-						key: 'selection',
-						field: pkField,
-						operator: 'nin',
-						value: selectedPrimaryKeys.value.join(','),
-						locked: true,
-					},
-					{
-						key: 'parent',
-						field: relation.value.field,
-						operator: 'null',
-						value: true,
-						locked: true,
-					},
-				] as Filter[];
-			});
-
-			return { stageSelection, selectDrawer, selectionFilters };
+			return { stageSelection, selectDrawer };
 
 			async function stageSelection(newSelection: (number | string)[]) {
 				loading.value = true;
diff --git a/app/src/layouts/calendar/index.ts b/app/src/layouts/calendar/index.ts
index c167388124..1b040b0585 100644
--- a/app/src/layouts/calendar/index.ts
+++ b/app/src/layouts/calendar/index.ts
@@ -8,7 +8,7 @@ import { getFieldsFromTemplate } from '@directus/shared/utils';
 import getFullcalendarLocale from '@/utils/get-fullcalendar-locale';
 import { renderPlainStringTemplate } from '@/utils/render-string-template';
 import { unexpectedError } from '@/utils/unexpected-error';
-import { Field, Item } from '@directus/shared/types';
+import { Field, Item, Filter } from '@directus/shared/types';
 import { defineLayout } from '@directus/shared/utils';
 import { Calendar, CalendarOptions as FullCalendarOptions, EventInput } from '@fullcalendar/core';
 import dayGridPlugin from '@fullcalendar/daygrid';
@@ -20,7 +20,6 @@ import { useI18n } from 'vue-i18n';
 import CalendarActions from './actions.vue';
 import CalendarLayout from './calendar.vue';
 import CalendarOptions from './options.vue';
-import CalendarSidebar from './sidebar.vue';
 import { useSync } from '@directus/shared/composables';
 import { LayoutOptions } from './types';
 
@@ -31,7 +30,8 @@ export default defineLayout<LayoutOptions>({
 	component: CalendarLayout,
 	slots: {
 		options: CalendarOptions,
-		sidebar: CalendarSidebar,
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		sidebar: () => {},
 		actions: CalendarActions,
 	},
 	setup(props, { emit }) {
@@ -42,8 +42,8 @@ export default defineLayout<LayoutOptions>({
 		const appStore = useAppStore();
 
 		const layoutOptions = useSync(props, 'layoutOptions', emit);
-		const filters = useSync(props, 'filters', emit);
-		const searchQuery = useSync(props, 'searchQuery', emit);
+		const filter = useSync(props, 'filter', emit);
+		const search = useSync(props, 'search', emit);
 
 		const { selection, collection } = toRefs(props);
 
@@ -55,26 +55,24 @@ export default defineLayout<LayoutOptions>({
 			})
 		);
 
-		const filtersWithCalendarView = computed(() => {
-			if (!calendar.value || !startDateField.value) return filters.value;
+		const filterWithCalendarView = computed(() => {
+			if (!calendar.value || !startDateField.value) return filter.value;
 
-			return [
-				...filters.value,
-				{
-					key: 'start_date',
-					field: startDateField.value,
-					operator: 'gte',
-					value: formatISO(calendar.value.view.currentStart),
-					hidden: true,
-				},
-				{
-					key: 'end_date',
-					field: startDateField.value,
-					operator: 'lte',
-					value: formatISO(calendar.value.view.currentEnd),
-					hidden: true,
-				},
-			];
+			return {
+				_and: [
+					filter.value,
+					{
+						[startDateField.value]: {
+							_gte: formatISO(calendar.value.view.currentStart),
+						},
+					},
+					{
+						[startDateField.value]: {
+							_lte: formatISO(calendar.value.view.currentEnd),
+						},
+					},
+				],
+			} as Filter;
 		});
 
 		const template = computed({
@@ -136,7 +134,7 @@ export default defineLayout<LayoutOptions>({
 		const { items, loading, error, totalPages, itemCount, totalCount, changeManualSort, getItems } = useItems(
 			collection,
 			{
-				sort: computed(() => primaryKeyField.value?.field || ''),
+				sort: computed(() => [primaryKeyField.value?.field || '']),
 				page: ref(1),
 				limit: ref(-1),
 				fields: computed(() => {
@@ -148,8 +146,8 @@ export default defineLayout<LayoutOptions>({
 					if (endDateField.value) fields.push(endDateField.value);
 					return fields;
 				}),
-				filters: filtersWithCalendarView,
-				searchQuery: searchQuery,
+				filter: filterWithCalendarView,
+				search: search,
 			},
 			false
 		);
@@ -269,7 +267,7 @@ export default defineLayout<LayoutOptions>({
 			totalCount,
 			changeManualSort,
 			getItems,
-			filtersWithCalendarView,
+			filterWithCalendarView,
 			template,
 			dateFields,
 			startDateField,
diff --git a/app/src/layouts/calendar/sidebar.vue b/app/src/layouts/calendar/sidebar.vue
deleted file mode 100644
index dc19afd884..0000000000
--- a/app/src/layouts/calendar/sidebar.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-	<filter-sidebar-detail v-model="filtersWritable" :collection="collection" :loading="loading" />
-	<export-sidebar-detail :filters="filtersWithCalendarView" :search-query="searchQuery" :collection="collection" />
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
-import { AppFilter } from '@directus/shared/types';
-import { useSync } from '@directus/shared/composables';
-
-export default defineComponent({
-	inheritAttrs: false,
-	props: {
-		collection: {
-			type: String,
-			required: true,
-		},
-		filters: {
-			type: Array as PropType<AppFilter[]>,
-			default: () => [],
-		},
-		searchQuery: {
-			type: String as PropType<string | null>,
-			default: null,
-		},
-		loading: {
-			type: Boolean,
-			required: true,
-		},
-		filtersWithCalendarView: {
-			type: Array as PropType<AppFilter[]>,
-			required: true,
-		},
-	},
-	emits: ['update:filters'],
-	setup(props, { emit }) {
-		const filtersWritable = useSync(props, 'filters', emit);
-
-		return { filtersWritable };
-	},
-});
-</script>
diff --git a/app/src/layouts/cards/cards.vue b/app/src/layouts/cards/cards.vue
index 5e723dee1f..7e0fae88e0 100644
--- a/app/src/layouts/cards/cards.vue
+++ b/app/src/layouts/cards/cards.vue
@@ -10,13 +10,8 @@
 			/>
 
 			<div class="grid" :class="{ 'single-row': isSingleRow }">
-				<template v-if="loading">
-					<card v-for="n in 6" :key="`loader-${n}`" item-key="loading" loading />
-				</template>
-
 				<card
 					v-for="item in items"
-					v-else
 					:key="item[primaryKeyField.field]"
 					v-model="selectionWritable"
 					:item-key="primaryKeyField.field"
@@ -73,7 +68,7 @@
 			</template>
 		</v-info>
 
-		<slot v-else-if="itemCount === 0 && activeFilterCount > 0" name="no-results" />
+		<slot v-else-if="itemCount === 0 && (filter || search)" name="no-results" />
 		<slot v-else-if="itemCount === 0" name="no-items" />
 	</div>
 </template>
@@ -87,7 +82,7 @@ import CardsHeader from './components/header.vue';
 import useElementSize from '@/composables/use-element-size';
 import { Field, Item } from '@directus/shared/types';
 import { useSync } from '@directus/shared/composables';
-import { Collection } from '@directus/shared/types';
+import { Collection, Filter } from '@directus/shared/types';
 
 export default defineComponent({
 	components: { Card, CardsHeader },
@@ -178,7 +173,7 @@ export default defineComponent({
 			required: true,
 		},
 		sort: {
-			type: String,
+			type: Array as PropType<string[]>,
 			required: true,
 		},
 		info: {
@@ -193,10 +188,6 @@ export default defineComponent({
 			type: Number,
 			required: true,
 		},
-		activeFilterCount: {
-			type: Number,
-			required: true,
-		},
 		selectAll: {
 			type: Function as PropType<() => void>,
 			required: true,
@@ -205,6 +196,14 @@ export default defineComponent({
 			type: Function as PropType<() => Promise<void>>,
 			required: true,
 		},
+		filter: {
+			type: Object as PropType<Filter>,
+			default: null,
+		},
+		search: {
+			type: String,
+			default: null,
+		},
 	},
 	emits: ['update:selection', 'update:limit', 'update:size', 'update:sort', 'update:width'],
 	setup(props, { emit }) {
diff --git a/app/src/layouts/cards/components/header.vue b/app/src/layouts/cards/components/header.vue
index 6c2125a374..a823a8cd24 100644
--- a/app/src/layouts/cards/components/header.vue
+++ b/app/src/layouts/cards/components/header.vue
@@ -1,9 +1,9 @@
 <template>
 	<div class="cards-header">
 		<div class="start">
-			<div v-if="internalSelection.length > 0" class="selected" @click="internalSelection = []">
+			<div v-if="selectionSync.length > 0" class="selected" @click="selectionSync = []">
 				<v-icon name="cancel" outline />
-				<span class="label">{{ t('n_items_selected', internalSelection.length) }}</span>
+				<span class="label">{{ t('n_items_selected', selectionSync.length) }}</span>
 			</div>
 			<button v-else class="select-all" @click="$emit('select-all')">
 				<v-icon name="check_circle" outline />
@@ -33,7 +33,7 @@
 						:disabled="field.disabled"
 						:active="field.field === sortKey"
 						clickable
-						@click="internalSort = field.field"
+						@click="sortSync = [field.field]"
 					>
 						<v-list-item-content>{{ field.name }}</v-list-item-content>
 					</v-list-item>
@@ -68,7 +68,7 @@ export default defineComponent({
 			required: true,
 		},
 		sort: {
-			type: String,
+			type: Array as PropType<string[]>,
 			required: true,
 		},
 		selection: {
@@ -80,12 +80,13 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
-		const internalSize = useSync(props, 'size', emit);
-		const internalSort = useSync(props, 'sort', emit);
-		const internalSelection = useSync(props, 'selection', emit);
-		const descending = computed(() => props.sort.startsWith('-'));
+		const sizeSync = useSync(props, 'size', emit);
+		const sortSync = useSync(props, 'sort', emit);
+		const selectionSync = useSync(props, 'selection', emit);
 
-		const sortKey = computed(() => (props.sort.startsWith('-') ? props.sort.substring(1) : props.sort));
+		const descending = computed(() => props.sort[0].startsWith('-'));
+
+		const sortKey = computed(() => (props.sort[0].startsWith('-') ? props.sort[0].substring(1) : props.sort[0]));
 
 		const sortField = computed(() => {
 			return props.fields.find((field) => field.field === sortKey.value);
@@ -107,26 +108,26 @@ export default defineComponent({
 			descending,
 			toggleDescending,
 			sortField,
-			internalSize,
-			internalSort,
-			internalSelection,
+			sizeSync,
+			sortSync,
+			selectionSync,
 			sortKey,
 			fieldsWithoutFake,
 		};
 
 		function toggleSize() {
 			if (props.size >= 2 && props.size < 5) {
-				internalSize.value++;
+				sizeSync.value++;
 			} else {
-				internalSize.value = 2;
+				sizeSync.value = 2;
 			}
 		}
 
 		function toggleDescending() {
 			if (descending.value === true) {
-				internalSort.value = internalSort.value.substring(1);
+				sortSync.value = [sortSync.value[0].substring(1)];
 			} else {
-				internalSort.value = '-' + internalSort.value;
+				sortSync.value = ['-' + sortSync.value];
 			}
 		}
 	},
diff --git a/app/src/layouts/cards/index.ts b/app/src/layouts/cards/index.ts
index df4aa063f9..a0ef384dc6 100644
--- a/app/src/layouts/cards/index.ts
+++ b/app/src/layouts/cards/index.ts
@@ -1,7 +1,6 @@
 import { defineLayout } from '@directus/shared/utils';
 import CardsLayout from './cards.vue';
 import CardsOptions from './options.vue';
-import CardsSidebar from './sidebar.vue';
 import CardsActions from './actions.vue';
 
 import { useI18n } from 'vue-i18n';
@@ -23,7 +22,8 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 	component: CardsLayout,
 	slots: {
 		options: CardsOptions,
-		sidebar: CardsSidebar,
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		sidebar: () => {},
 		actions: CardsActions,
 	},
 	setup(props, { emit }) {
@@ -36,10 +36,8 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		const selection = useSync(props, 'selection', emit);
 		const layoutOptions = useSync(props, 'layoutOptions', emit);
 		const layoutQuery = useSync(props, 'layoutQuery', emit);
-		const filters = useSync(props, 'filters', emit);
-		const searchQuery = useSync(props, 'searchQuery', emit);
 
-		const { collection } = toRefs(props);
+		const { collection, filter, search, filterUser } = toRefs(props);
 
 		const { info, primaryKeyField, fields: fieldsInCollection } = useCollection(collection);
 
@@ -66,13 +64,13 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			sort,
 			limit,
 			page,
-			fields: fields,
-			filters: filters,
-			searchQuery: searchQuery,
+			fields,
+			filter,
+			search,
 		});
 
 		const showingCount = computed(() => {
-			if ((itemCount.value || 0) < (totalCount.value || 0)) {
+			if ((itemCount.value || 0) < (totalCount.value || 0) && filterUser.value) {
 				if (itemCount.value === 1) {
 					return t('one_filtered_item');
 				}
@@ -82,9 +80,11 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 					count: n(itemCount.value || 0),
 				});
 			}
+
 			if (itemCount.value === 1) {
 				return t('one_item');
 			}
+
 			return t('start_end_of_count_items', {
 				start: n((+page.value - 1) * limit.value + 1),
 				end: n(Math.min(page.value * limit.value, itemCount.value || 0)),
@@ -99,10 +99,6 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			return cardsWidth <= width.value;
 		});
 
-		const activeFilterCount = computed(() => {
-			return filters.value.filter((filter) => !filter.locked).length;
-		});
-
 		return {
 			items,
 			loading,
@@ -128,10 +124,11 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			showingCount,
 			isSingleRow,
 			width,
-			activeFilterCount,
 			refresh,
 			selectAll,
 			resetPresetAndRefresh,
+			filter,
+			search,
 		};
 
 		async function resetPresetAndRefresh() {
@@ -189,11 +186,11 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 				},
 			});
 
-			const sort = computed({
+			const sort = computed<string[]>({
 				get() {
-					return layoutQuery.value?.sort || primaryKeyField.value?.field || '';
+					return layoutQuery.value?.sort || [primaryKeyField.value!.field] || [];
 				},
-				set(newSort: string) {
+				set(newSort: string[]) {
 					layoutQuery.value = {
 						...(layoutQuery.value || {}),
 						page: 1,
@@ -232,14 +229,6 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 					fields.push('type');
 				}
 
-				if (sort.value) {
-					const sortField = sort.value.startsWith('-') ? sort.value.substring(1) : sort.value;
-
-					if (fields.includes(sortField) === false) {
-						fields.push(sortField);
-					}
-				}
-
 				const titleSubtitleFields: string[] = [];
 
 				if (title.value) {
diff --git a/app/src/layouts/cards/sidebar.vue b/app/src/layouts/cards/sidebar.vue
deleted file mode 100644
index 99e4cc9da4..0000000000
--- a/app/src/layouts/cards/sidebar.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-	<filter-sidebar-detail v-model="filtersWritable" :collection="collection" :loading="loading" />
-	<export-sidebar-detail
-		:layout-query="layoutQuery"
-		:filters="filters"
-		:search-query="searchQuery"
-		:collection="collection"
-	/>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
-import { LayoutQuery } from './types';
-import { AppFilter } from '@directus/shared/types';
-import { useSync } from '@directus/shared/composables';
-
-export default defineComponent({
-	inheritAttrs: false,
-	props: {
-		collection: {
-			type: String,
-			required: true,
-		},
-		layoutQuery: {
-			type: Object as PropType<LayoutQuery>,
-			default: () => ({}),
-		},
-		filters: {
-			type: Array as PropType<AppFilter[]>,
-			default: () => [],
-		},
-		searchQuery: {
-			type: String as PropType<string | null>,
-			default: null,
-		},
-		loading: {
-			type: Boolean,
-			required: true,
-		},
-	},
-	emits: ['update:filters'],
-	setup(props, { emit }) {
-		const filtersWritable = useSync(props, 'filters', emit);
-
-		return { filtersWritable };
-	},
-});
-</script>
diff --git a/app/src/layouts/cards/types.ts b/app/src/layouts/cards/types.ts
index 5aa112e958..1bd9f5cd58 100644
--- a/app/src/layouts/cards/types.ts
+++ b/app/src/layouts/cards/types.ts
@@ -9,7 +9,7 @@ export type LayoutOptions = {
 
 export type LayoutQuery = {
 	fields?: string[];
-	sort?: string;
+	sort?: string[];
 	limit?: number;
 	page?: number;
 };
diff --git a/app/src/layouts/map/index.ts b/app/src/layouts/map/index.ts
index b6441e2f20..99ab100fe8 100644
--- a/app/src/layouts/map/index.ts
+++ b/app/src/layouts/map/index.ts
@@ -1,7 +1,6 @@
 import { defineLayout } from '@directus/shared/utils';
 import MapLayout from './map.vue';
 import MapOptions from './options.vue';
-import MapSidebar from './sidebar.vue';
 import MapActions from './actions.vue';
 
 import { useI18n } from 'vue-i18n';
@@ -28,7 +27,8 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 	component: MapLayout,
 	slots: {
 		options: MapOptions,
-		sidebar: MapSidebar,
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		sidebar: () => {},
 		actions: MapActions,
 	},
 	setup(props, { emit }) {
@@ -39,15 +39,25 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		const selection = useSync(props, 'selection', emit);
 		const layoutOptions = useSync(props, 'layoutOptions', emit);
 		const layoutQuery = useSync(props, 'layoutQuery', emit);
-		const filters = useSync(props, 'filters', emit);
-		const searchQuery = useSync(props, 'searchQuery', emit);
 
-		const { collection } = toRefs(props);
+		const { collection, filter, filterUser, search } = toRefs(props);
+
 		const { info, primaryKeyField, fields: fieldsInCollection } = useCollection(collection);
 
 		const page = syncOption(layoutQuery, 'page', 1);
 		const limit = syncOption(layoutQuery, 'limit', 1000);
-		const sort = syncOption(layoutQuery, 'sort', fieldsInCollection.value?.[0]?.field);
+		const sort = syncOption(layoutQuery, 'sort', [fieldsInCollection.value?.[0]?.field]);
+
+		const locationFilter = ref<Filter>();
+
+		const filterWithLocation = computed<Filter | null>(() => {
+			if (!locationFilter.value) return filter.value;
+			if (!filter.value) return locationFilter.value;
+
+			return {
+				_and: [filter.value, locationFilter.value],
+			};
+		});
 
 		const customLayerDrawerOpen = ref(false);
 
@@ -123,10 +133,12 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		const locationFilterOutdated = ref(false);
 
 		function getLocationFilter(): Filter | undefined {
-			if (!isGeometryFieldNative.value || !cameraOptions.value) {
+			if (!isGeometryFieldNative.value || !cameraOptions.value || !geometryField.value) {
 				return;
 			}
+
 			const bbox = cameraOptions.value.bbox;
+
 			const bboxPolygon = [
 				[bbox[0], bbox[1]],
 				[bbox[2], bbox[1]],
@@ -134,35 +146,36 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 				[bbox[0], bbox[3]],
 				[bbox[0], bbox[1]],
 			];
+
 			return {
-				key: 'location-filter',
-				field: geometryField.value,
-				operator: 'intersects_bbox',
-				value: {
-					type: 'Polygon',
-					coordinates: [bboxPolygon],
-				} as any,
+				[geometryField.value]: {
+					_intersects_bbox: {
+						type: 'Polygon',
+						coordinates: [bboxPolygon],
+					},
+				},
 			} as Filter;
 		}
 
 		function updateLocationFilter() {
-			const locationFilter = getLocationFilter();
 			locationFilterOutdated.value = false;
-			filters.value = filters.value.filter((filter) => filter.key !== 'location-filter').concat(locationFilter ?? []);
+			locationFilter.value = getLocationFilter();
 		}
 
 		function clearLocationFilter() {
 			shouldUpdateCamera.value = true;
 			locationFilterOutdated.value = false;
-			filters.value = filters.value.filter((filter) => filter.key !== 'location-filter');
+
+			locationFilter.value = undefined;
+
 			if (geojson.value) {
 				geojsonBounds.value = geojson.value.bbox;
 			}
 		}
 
 		function clearDataFilters() {
-			filters.value = filters.value.filter((filter) => filter.key === 'location-filter');
-			searchQuery.value = null;
+			locationFilter.value = undefined;
+			search.value = null;
 		}
 
 		const shouldUpdateCamera = ref(false);
@@ -189,8 +202,8 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			sort,
 			limit,
 			page,
-			filters,
-			searchQuery,
+			search,
+			filter: filterWithLocation,
 			fields: queryFields,
 		});
 
@@ -199,11 +212,8 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		const geojsonError = ref<string | null>(null);
 		const geojsonLoading = ref(false);
 
-		watch(() => searchQuery.value, onQueryChange);
-		watch(() => collection.value, onQueryChange);
-		watch(() => limit.value, onQueryChange);
-		watch(() => sort.value, onQueryChange);
-		watch(() => items.value, updateGeojson);
+		watch([search, collection, limit, sort], onQueryChange);
+		watch(items, updateGeojson);
 
 		watch(
 			() => geometryField.value,
@@ -291,7 +301,7 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		});
 
 		const showingCount = computed(() => {
-			if ((itemCount.value || 0) < (totalCount.value || 0)) {
+			if ((itemCount.value || 0) < (totalCount.value || 0) && filterUser.value) {
 				if (itemCount.value === 1) {
 					return t('one_filtered_item');
 				}
@@ -311,10 +321,6 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			});
 		});
 
-		const activeFilterCount = computed(() => {
-			return filters.value.filter((filter) => !filter.locked).length;
-		});
-
 		return {
 			template,
 			geojson,
@@ -345,12 +351,11 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			itemCount,
 			fieldsInCollection,
 			limit,
-			filters,
+			filter,
 			primaryKeyField,
 			sort,
 			info,
 			showingCount,
-			activeFilterCount,
 			refresh,
 			resetPresetAndRefresh,
 			geometryFields,
@@ -359,6 +364,7 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			updateLocationFilter,
 			clearLocationFilter,
 			clearDataFilters,
+			locationFilter,
 		};
 
 		async function resetPresetAndRefresh() {
diff --git a/app/src/layouts/map/map.vue b/app/src/layouts/map/map.vue
index 1bf4bef32c..2a90df0df6 100644
--- a/app/src/layouts/map/map.vue
+++ b/app/src/layouts/map/map.vue
@@ -47,18 +47,15 @@
 			</v-info>
 			<v-progress-circular v-else-if="loading || geojsonLoading" indeterminate x-large class="center" />
 			<v-info
-				v-else-if="itemCount === 0 && (searchQuery || activeFilterCount > 0 || !locationFilterOutdated)"
+				v-else-if="itemCount === 0 && (search || filter || !locationFilterOutdated)"
 				icon="search"
 				center
-				:title="t('no_results_here')"
+				:title="t('no_results')"
 			>
 				<template #append>
 					<v-card-actions>
-						<v-button
-							:disabled="!searchQuery && !filters.filter((f) => f.key !== 'location-filter').length"
-							@click="clearDataFilters"
-						>
-							{{ t('clear_data_filters') }}
+						<v-button :disabled="!search && !locationFilter" @click="clearDataFilters">
+							{{ t('layouts.map.clear_data_filter') }}
 						</v-button>
 						<v-button :disabled="locationFilterOutdated" @click="clearLocationFilter">
 							{{ t('layouts.map.clear_location_filter') }}
@@ -128,7 +125,7 @@ export default defineComponent({
 			type: Array as PropType<Item[]>,
 			default: () => [],
 		},
-		searchQuery: {
+		search: {
 			type: String as PropType<string | null>,
 			default: null,
 		},
@@ -192,10 +189,6 @@ export default defineComponent({
 			type: Number,
 			default: null,
 		},
-		activeFilterCount: {
-			type: Number,
-			required: true,
-		},
 		totalPages: {
 			type: Number,
 			required: true,
@@ -212,10 +205,6 @@ export default defineComponent({
 			type: Number,
 			required: true,
 		},
-		filters: {
-			type: Array as PropType<Filter[]>,
-			required: true,
-		},
 		autoLocationFilter: {
 			type: Boolean,
 			default: undefined,
@@ -240,8 +229,16 @@ export default defineComponent({
 			type: Boolean,
 			required: true,
 		},
+		filter: {
+			type: Object as PropType<Filter>,
+			default: null,
+		},
+		locationFilter: {
+			type: Object as PropType<Filter>,
+			default: null,
+		},
 	},
-	emits: ['update:cameraOptions', 'update:limit'],
+	emits: ['update:cameraOptions', 'update:limit', 'update:locationFilterOutdated'],
 	setup(props, { emit }) {
 		const { t, n } = useI18n();
 
diff --git a/app/src/layouts/map/sidebar.vue b/app/src/layouts/map/sidebar.vue
deleted file mode 100644
index 99e4cc9da4..0000000000
--- a/app/src/layouts/map/sidebar.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-	<filter-sidebar-detail v-model="filtersWritable" :collection="collection" :loading="loading" />
-	<export-sidebar-detail
-		:layout-query="layoutQuery"
-		:filters="filters"
-		:search-query="searchQuery"
-		:collection="collection"
-	/>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
-import { LayoutQuery } from './types';
-import { AppFilter } from '@directus/shared/types';
-import { useSync } from '@directus/shared/composables';
-
-export default defineComponent({
-	inheritAttrs: false,
-	props: {
-		collection: {
-			type: String,
-			required: true,
-		},
-		layoutQuery: {
-			type: Object as PropType<LayoutQuery>,
-			default: () => ({}),
-		},
-		filters: {
-			type: Array as PropType<AppFilter[]>,
-			default: () => [],
-		},
-		searchQuery: {
-			type: String as PropType<string | null>,
-			default: null,
-		},
-		loading: {
-			type: Boolean,
-			required: true,
-		},
-	},
-	emits: ['update:filters'],
-	setup(props, { emit }) {
-		const filtersWritable = useSync(props, 'filters', emit);
-
-		return { filtersWritable };
-	},
-});
-</script>
diff --git a/app/src/layouts/map/types.ts b/app/src/layouts/map/types.ts
index 28611c560e..1bd1e05d86 100644
--- a/app/src/layouts/map/types.ts
+++ b/app/src/layouts/map/types.ts
@@ -3,7 +3,7 @@ import { GeometryFormat } from '@directus/shared/types';
 
 export type LayoutQuery = {
 	fields: string[];
-	sort: string;
+	sort: string[];
 	limit: number;
 	page: number;
 };
diff --git a/app/src/layouts/tabular/index.ts b/app/src/layouts/tabular/index.ts
index 614e738a5c..379e5719d9 100644
--- a/app/src/layouts/tabular/index.ts
+++ b/app/src/layouts/tabular/index.ts
@@ -1,7 +1,6 @@
 import { defineLayout } from '@directus/shared/utils';
 import TabularLayout from './tabular.vue';
 import TabularOptions from './options.vue';
-import TabularSidebar from './sidebar.vue';
 import TabularActions from './actions.vue';
 
 import { useI18n } from 'vue-i18n';
@@ -26,7 +25,8 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 	component: TabularLayout,
 	slots: {
 		options: TabularOptions,
-		sidebar: TabularSidebar,
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		sidebar: () => {},
 		actions: TabularActions,
 	},
 	setup(props, { emit }) {
@@ -39,10 +39,8 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		const selection = useSync(props, 'selection', emit);
 		const layoutOptions = useSync(props, 'layoutOptions', emit);
 		const layoutQuery = useSync(props, 'layoutQuery', emit);
-		const filters = useSync(props, 'filters', emit);
-		const searchQuery = useSync(props, 'searchQuery', emit);
 
-		const { collection } = toRefs(props);
+		const { collection, filter, filterUser, search } = toRefs(props);
 
 		const { info, primaryKeyField, fields: fieldsInCollection, sortField } = useCollection(collection);
 
@@ -55,8 +53,8 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 				limit,
 				page,
 				fields: fieldsWithRelational,
-				filters: filters,
-				searchQuery: searchQuery,
+				filter,
+				search,
 			}
 		);
 
@@ -64,19 +62,22 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			useTable();
 
 		const showingCount = computed(() => {
-			if ((itemCount.value || 0) < (totalCount.value || 0)) {
+			if ((itemCount.value || 0) < (totalCount.value || 0) && filterUser.value) {
 				if (itemCount.value === 1) {
 					return t('one_filtered_item');
 				}
+
 				return t('start_end_of_count_filtered_items', {
 					start: n((+page.value - 1) * limit.value + 1),
 					end: n(Math.min(page.value * limit.value, itemCount.value || 0)),
 					count: n(itemCount.value || 0),
 				});
 			}
+
 			if (itemCount.value === 1) {
 				return t('one_item');
 			}
+
 			return t('start_end_of_count_items', {
 				start: n((+page.value - 1) * limit.value + 1),
 				end: n(Math.min(page.value * limit.value, itemCount.value || 0)),
@@ -84,14 +85,6 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			});
 		});
 
-		const activeFilterCount = computed(() => {
-			let count = filters.value.filter((filter) => !filter.locked).length;
-
-			if (searchQuery.value && searchQuery.value.length > 0) count++;
-
-			return count;
-		});
-
 		const availableFields = computed(() => {
 			return fieldsInCollection.value.filter((field: Field) => field.meta?.special?.includes('no-data') !== true);
 		});
@@ -121,11 +114,12 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			sortField,
 			changeManualSort,
 			hideDragImage,
-			activeFilterCount,
 			refresh,
 			resetPresetAndRefresh,
 			selectAll,
 			availableFields,
+			filter,
+			search,
 		};
 
 		async function resetPresetAndRefresh() {
@@ -164,11 +158,11 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 				},
 			});
 
-			const sort = computed({
+			const sort = computed<string[]>({
 				get() {
-					return layoutQuery.value?.sort || primaryKeyField.value?.field || '';
+					return layoutQuery.value?.sort || [primaryKeyField.value!.field] || [];
 				},
-				set(newSort: string) {
+				set(newSort: string[]) {
 					layoutQuery.value = {
 						...(layoutQuery.value || {}),
 						page: 1,
@@ -234,10 +228,10 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 
 		function useTable() {
 			const tableSort = computed(() => {
-				if (sort.value?.startsWith('-')) {
-					return { by: sort.value.substring(1), desc: true };
+				if (sort.value?.[0].startsWith('-')) {
+					return { by: sort.value[0].substring(1), desc: true };
 				} else {
-					return { by: sort.value, desc: false };
+					return { by: sort.value[0], desc: false };
 				}
 			});
 
@@ -358,7 +352,7 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 				let sortString = newSort.by;
 				if (newSort.desc === true) sortString = '-' + sortString;
 
-				sort.value = sortString;
+				sort.value = [sortString];
 			}
 
 			function getFieldDisplay(fieldKey: string) {
diff --git a/app/src/layouts/tabular/sidebar.vue b/app/src/layouts/tabular/sidebar.vue
deleted file mode 100644
index 5f885bea9e..0000000000
--- a/app/src/layouts/tabular/sidebar.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-	<filter-sidebar-detail v-model="filtersWritable" :collection="collection" :loading="loading" />
-	<export-sidebar-detail
-		:layout-query="layoutQuery"
-		:filters="filters"
-		:search-query="searchQuery"
-		:collection="collection"
-	/>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
-import { useSync } from '@directus/shared/composables';
-import { AppFilter } from '@directus/shared/types';
-import { LayoutQuery } from './types';
-
-export default defineComponent({
-	inheritAttrs: false,
-	props: {
-		collection: {
-			type: String,
-			required: true,
-		},
-		layoutQuery: {
-			type: Object as PropType<LayoutQuery>,
-			default: () => ({}),
-		},
-		filters: {
-			type: Array as PropType<AppFilter[]>,
-			default: () => [],
-		},
-		searchQuery: {
-			type: String as PropType<string | null>,
-			default: null,
-		},
-		loading: {
-			type: Boolean,
-			required: true,
-		},
-	},
-	emits: ['update:filters'],
-	setup(props, { emit }) {
-		const filtersWritable = useSync(props, 'filters', emit);
-
-		return { filtersWritable };
-	},
-});
-</script>
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index a613deef77..4de390d128 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -74,7 +74,7 @@
 			</template>
 		</v-info>
 
-		<slot v-else-if="itemCount === 0 && activeFilterCount > 0" name="no-results" />
+		<slot v-else-if="itemCount === 0 && (filterUser || search)" name="no-results" />
 		<slot v-else-if="itemCount === 0" name="no-items" />
 	</div>
 </template>
@@ -84,7 +84,7 @@ import { useI18n } from 'vue-i18n';
 import { ComponentPublicInstance, defineComponent, PropType, ref } from 'vue';
 import { useSync } from '@directus/shared/composables';
 import useShortcut from '@/composables/use-shortcut';
-import { Field, Item, Collection } from '@directus/shared/types';
+import { Field, Item, Collection, Filter } from '@directus/shared/types';
 import { HeaderRaw } from '@/components/v-table/types';
 
 export default defineComponent({
@@ -174,10 +174,6 @@ export default defineComponent({
 			type: Function as PropType<(data: any) => Promise<void>>,
 			required: true,
 		},
-		activeFilterCount: {
-			type: Number,
-			required: true,
-		},
 		resetPresetAndRefresh: {
 			type: Function as PropType<() => Promise<void>>,
 			required: true,
@@ -186,6 +182,14 @@ export default defineComponent({
 			type: Function as PropType<() => void>,
 			required: true,
 		},
+		filterUser: {
+			type: Object as PropType<Filter>,
+			default: null,
+		},
+		search: {
+			type: String,
+			default: null,
+		},
 	},
 	emits: ['update:selection', 'update:tableHeaders', 'update:limit'],
 	setup(props, { emit }) {
diff --git a/app/src/layouts/tabular/types.ts b/app/src/layouts/tabular/types.ts
index efeb30c7fd..a33e26333c 100644
--- a/app/src/layouts/tabular/types.ts
+++ b/app/src/layouts/tabular/types.ts
@@ -8,7 +8,7 @@ export type LayoutOptions = {
 
 export type LayoutQuery = {
 	fields?: string[];
-	sort?: string;
+	sort?: string[];
 	page?: number;
 	limit?: number;
 };
diff --git a/app/src/modules/activity/components/navigation.vue b/app/src/modules/activity/components/navigation.vue
index eaab2ef7c9..21c7a219a9 100644
--- a/app/src/modules/activity/components/navigation.vue
+++ b/app/src/modules/activity/components/navigation.vue
@@ -1,6 +1,6 @@
 <template>
 	<v-list large>
-		<v-list-item clickable :active="!activeFilter" @click="clearNavFilter">
+		<v-list-item clickable :active="!filterField" @click="clearNavFilter">
 			<v-list-item-icon>
 				<v-icon name="access_time" />
 			</v-list-item-icon>
@@ -11,7 +11,7 @@
 
 		<v-list-item
 			clickable
-			:active="activeFilter && activeFilter.field === 'user' && activeFilter.value === currentUserID"
+			:active="filterField === 'user' && filterValue === currentUserID"
 			@click="setNavFilter('user', currentUserID)"
 		>
 			<v-list-item-icon>
@@ -26,7 +26,7 @@
 
 		<v-list-item
 			clickable
-			:active="activeFilter && activeFilter.field === 'action' && activeFilter.value === 'create'"
+			:active="filterField === 'action' && filterValue === 'create'"
 			@click="setNavFilter('action', 'create')"
 		>
 			<v-list-item-icon>
@@ -39,7 +39,7 @@
 
 		<v-list-item
 			clickable
-			:active="activeFilter && activeFilter.field === 'action' && activeFilter.value === 'update'"
+			:active="filterField === 'action' && filterValue === 'update'"
 			@click="setNavFilter('action', 'update')"
 		>
 			<v-list-item-icon>
@@ -52,7 +52,7 @@
 
 		<v-list-item
 			clickable
-			:active="activeFilter && activeFilter.field === 'action' && activeFilter.value === 'delete'"
+			:active="filterField === 'action' && filterValue === 'delete'"
 			@click="setNavFilter('action', 'delete')"
 		>
 			<v-list-item-icon>
@@ -65,7 +65,7 @@
 
 		<v-list-item
 			clickable
-			:active="activeFilter && activeFilter.field === 'action' && activeFilter.value === 'comment'"
+			:active="filterField === 'action' && filterValue === 'comment'"
 			@click="setNavFilter('action', 'comment')"
 		>
 			<v-list-item-icon>
@@ -78,7 +78,7 @@
 
 		<v-list-item
 			clickable
-			:active="activeFilter && activeFilter.field === 'action' && activeFilter.value === 'login'"
+			:active="filterField === 'action' && filterValue === 'login'"
 			@click="setNavFilter('action', 'login')"
 		>
 			<v-list-item-icon>
@@ -95,51 +95,37 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, PropType } from 'vue';
 import { useUserStore } from '@/stores/user';
-import { nanoid } from 'nanoid';
 import { Filter } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {
-		filters: {
-			type: Array as PropType<Filter[]>,
-			required: true,
+		filter: {
+			type: Object as PropType<Filter>,
+			default: null,
 		},
 	},
-	emits: ['update:filters'],
+	emits: ['update:filter'],
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
 		const userStore = useUserStore();
 		const currentUserID = computed(() => userStore.currentUser?.id);
 
-		const activeFilter = computed(() => {
-			return props.filters.find((filter) => filter.locked === true);
-		});
+		const filterField = computed(() => Object.keys(props.filter ?? {})[0] ?? null);
+		const filterValue = computed(() => Object.values(props.filter ?? {})[0]?._eq ?? null);
 
-		return { t, currentUserID, setNavFilter, clearNavFilter, activeFilter };
+		return { t, currentUserID, setNavFilter, clearNavFilter, filterField, filterValue };
 
 		function setNavFilter(key: string, value: any) {
-			emit('update:filters', [
-				...props.filters.filter((filter) => {
-					return filter.locked === false;
-				}),
-				{
-					key: nanoid(),
-					locked: true,
-					field: key,
-					operator: 'eq',
-					value: value,
+			emit('update:filter', {
+				[key]: {
+					_eq: value,
 				},
-			]);
+			});
 		}
 
 		function clearNavFilter() {
-			emit(
-				'update:filters',
-				props.filters.filter((filter) => {
-					return filter.locked === false;
-				})
-			);
+			emit('update:filter', null);
 		}
 	},
 });
diff --git a/app/src/modules/activity/routes/collection.vue b/app/src/modules/activity/routes/collection.vue
index 23b35a0e78..3ebabc7136 100644
--- a/app/src/modules/activity/routes/collection.vue
+++ b/app/src/modules/activity/routes/collection.vue
@@ -4,8 +4,10 @@
 		v-slot="{ layoutState }"
 		v-model:layout-options="layoutOptions"
 		v-model:layout-query="layoutQuery"
-		v-model:filters="filters"
-		v-model:search-query="searchQuery"
+		:filter="mergeFilters"
+		:filter-user="filter"
+		:filter-system="roleFilter"
+		:search="search"
 		collection="directus_activity"
 	>
 		<private-view :title="t('activity_feed')">
@@ -20,14 +22,26 @@
 			</template>
 
 			<template #actions>
-				<search-input v-model="searchQuery" />
+				<search-input v-model="search" v-model:filter="filter" collection="directus_activity" />
 			</template>
 
 			<template #navigation>
-				<activity-navigation v-model:filters="filters" />
+				<activity-navigation v-model:filter="roleFilter" />
 			</template>
 
-			<component :is="`layout-${layout}`" v-bind="layoutState" class="layout" />
+			<component :is="`layout-${layout}`" v-bind="layoutState" class="layout">
+				<template #no-results>
+					<v-info :title="t('no_results')" icon="search" center>
+						{{ t('no_results_copy') }}
+					</v-info>
+				</template>
+
+				<template #no-items>
+					<v-info :title="t('item_count', 0)" icon="access_time" center>
+						{{ t('no_items_copy') }}
+					</v-info>
+				</template>
+			</component>
 
 			<router-view name="detail" :primary-key="primaryKey" />
 
@@ -50,13 +64,14 @@ import { defineComponent, computed, ref } from 'vue';
 import ActivityNavigation from '../components/navigation.vue';
 import usePreset from '@/composables/use-preset';
 import { useLayout } from '@/composables/use-layout';
-import FilterSidebarDetail from '@/views/private/components/filter-sidebar-detail';
 import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
 import SearchInput from '@/views/private/components/search-input';
+import { Filter } from '@directus/shared/types';
+import { mergeFilters } from '@directus/shared/utils';
 
 export default defineComponent({
 	name: 'ActivityCollection',
-	components: { ActivityNavigation, FilterSidebarDetail, LayoutSidebarDetail, SearchInput },
+	components: { ActivityNavigation, LayoutSidebarDetail, SearchInput },
 	props: {
 		primaryKey: {
 			type: String,
@@ -66,12 +81,25 @@ export default defineComponent({
 	setup() {
 		const { t } = useI18n();
 
-		const { layout, layoutOptions, layoutQuery, filters, searchQuery } = usePreset(ref('directus_activity'));
+		const { layout, layoutOptions, layoutQuery, filter, search } = usePreset(ref('directus_activity'));
 		const { breadcrumb } = useBreadcrumb();
 
 		const { layoutWrapper } = useLayout(layout);
 
-		return { t, breadcrumb, layout, layoutWrapper, layoutOptions, layoutQuery, searchQuery, filters };
+		const roleFilter = ref<Filter | null>(null);
+
+		return {
+			t,
+			breadcrumb,
+			layout,
+			layoutWrapper,
+			layoutOptions,
+			layoutQuery,
+			search,
+			filter,
+			roleFilter,
+			mergeFilters,
+		};
 
 		function useBreadcrumb() {
 			const breadcrumb = computed(() => {
diff --git a/app/src/modules/collections/routes/collection.vue b/app/src/modules/collections/routes/collection.vue
index 7069f4c9d3..abb04e4a2b 100644
--- a/app/src/modules/collections/routes/collection.vue
+++ b/app/src/modules/collections/routes/collection.vue
@@ -6,8 +6,10 @@
 		v-model:selection="selection"
 		v-model:layout-options="layoutOptions"
 		v-model:layout-query="layoutQuery"
-		v-model:filters="filters"
-		v-model:search-query="searchQuery"
+		:filter-user="filter"
+		:filter-system="archiveFilter"
+		:filter="mergeFilters(filter, archiveFilter)"
+		:search="search"
 		:collection="collection"
 		:reset-preset="resetPreset"
 	>
@@ -88,7 +90,7 @@
 			</template>
 
 			<template #actions>
-				<search-input v-model="searchQuery" />
+				<search-input v-model="search" v-model:filter="filter" :collection="collection" />
 
 				<v-dialog v-if="selection.length > 0" v-model="confirmDelete" @esc="confirmDelete = false">
 					<template #activator="{ on }">
@@ -235,6 +237,11 @@
 				</layout-sidebar-detail>
 				<component :is="`layout-sidebar-${layout || 'tabular'}`" v-bind="layoutState" />
 				<refresh-sidebar-detail v-model="refreshInterval" @refresh="refresh" />
+				<export-sidebar-detail
+					:collection="collection"
+					:filter="mergeFilters(filter, archiveFilter)"
+					:search="search"
+				/>
 			</template>
 
 			<v-dialog :model-value="deleteError !== null">
@@ -272,6 +279,7 @@ import { usePermissionsStore, useUserStore } from '@/stores';
 import DrawerBatch from '@/views/private/components/drawer-batch';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { getLayouts } from '@/layouts';
+import { mergeFilters } from '@directus/shared/utils';
 
 type Item = {
 	[field: string]: any;
@@ -299,6 +307,10 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		showArchive: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const { t } = useI18n();
@@ -322,8 +334,8 @@ export default defineComponent({
 			layout,
 			layoutOptions,
 			layoutQuery,
-			filters,
-			searchQuery,
+			filter,
+			search,
 			savePreset,
 			bookmarkExists,
 			saveCurrentAsBookmark,
@@ -365,6 +377,32 @@ export default defineComponent({
 
 		const { batchEditAllowed, batchArchiveAllowed, batchDeleteAllowed, createAllowed } = usePermissions();
 
+		const archiveFilter = computed(() => {
+			if (!currentCollection.value?.meta) return null;
+
+			const field = currentCollection.value.meta.archive_field;
+
+			if (!field) return filter.value;
+
+			let archiveValue: any = currentCollection.value.meta.archive_value;
+			if (archiveValue === 'true') archiveValue = true;
+			if (archiveValue === 'false') archiveValue = false;
+
+			if (props.showArchive) {
+				return {
+					[field]: {
+						_eq: archiveValue,
+					},
+				};
+			} else {
+				return {
+					[field]: {
+						_neq: archiveValue,
+					},
+				};
+			}
+		});
+
 		return {
 			t,
 			addNewLink,
@@ -373,14 +411,14 @@ export default defineComponent({
 			confirmDelete,
 			currentCollection,
 			deleting,
-			filters,
+			filter,
 			layoutRef,
 			layoutWrapper,
 			selection,
 			layoutOptions,
 			layoutQuery,
 			layout,
-			searchQuery,
+			search,
 			savePreset,
 			bookmarkExists,
 			currentCollectionLink,
@@ -408,6 +446,8 @@ export default defineComponent({
 			refresh,
 			refreshInterval,
 			currentLayout,
+			archiveFilter,
+			mergeFilters,
 		};
 
 		async function refresh() {
@@ -476,11 +516,15 @@ export default defineComponent({
 
 				archiving.value = true;
 
+				let archiveValue: any = currentCollection.value.meta.archive_value;
+				if (archiveValue === 'true') archiveValue = true;
+				if (archiveValue === 'false') archiveValue = false;
+
 				try {
 					await api.patch(`/items/${props.collection}`, {
 						keys: selection.value,
 						data: {
-							[currentCollection.value.meta.archive_field]: currentCollection.value.meta.archive_value,
+							[currentCollection.value.meta.archive_field]: archiveValue,
 						},
 					});
 
@@ -543,8 +587,8 @@ export default defineComponent({
 		}
 
 		function clearFilters() {
-			filters.value = [];
-			searchQuery.value = null;
+			filter.value = null;
+			search.value = null;
 		}
 
 		function usePermissions() {
diff --git a/app/src/modules/files/components/navigation.vue b/app/src/modules/files/components/navigation.vue
index 9e42f905e2..1155dc874c 100644
--- a/app/src/modules/files/components/navigation.vue
+++ b/app/src/modules/files/components/navigation.vue
@@ -8,7 +8,14 @@
 
 		<div class="folders">
 			<v-item-group v-model="openFolders" scope="files-navigation" multiple>
-				<v-list-group to="/files" value="root" scope="files-navigation" exact disable-groupable-parent>
+				<v-list-group
+					to="/files"
+					:active="currentFolder === null"
+					value="root"
+					scope="files-navigation"
+					exact
+					disable-groupable-parent
+				>
 					<template #activator>
 						<v-list-item-icon>
 							<v-icon name="folder_special" outline />
diff --git a/app/src/modules/files/routes/collection.vue b/app/src/modules/files/routes/collection.vue
index e743b576c0..d96f9e31fa 100644
--- a/app/src/modules/files/routes/collection.vue
+++ b/app/src/modules/files/routes/collection.vue
@@ -6,8 +6,10 @@
 		v-model:selection="selection"
 		v-model:layout-options="layoutOptions"
 		v-model:layout-query="layoutQuery"
-		v-model:filters="layoutFilters"
-		v-model:search-query="searchQuery"
+		:filter="mergeFilters(filter, folderTypeFilter)"
+		:filter-user="filter"
+		:filter-system="folderTypeFilter"
+		:search="search"
 		collection="directus_files"
 		:reset-preset="resetPreset"
 	>
@@ -27,7 +29,7 @@
 			</template>
 
 			<template #actions>
-				<search-input v-model="searchQuery" />
+				<search-input v-model="search" v-model:filter="filter" collection="directus_files" />
 
 				<add-folder :parent="folder" :disabled="createFolderAllowed !== true" />
 
@@ -114,7 +116,17 @@
 
 			<component :is="`layout-${layout}`" class="layout" v-bind="layoutState">
 				<template #no-results>
-					<v-info :title="t('no_results')" icon="search" center>
+					<v-info v-if="!filter && !search" :title="t('file_count', 0)" icon="folder" center>
+						{{ t('no_files_copy') }}
+
+						<template #append>
+							<v-button :to="folder ? { path: `/files/folders/${folder}/+` } : { path: '/files/+' }">
+								{{ t('add_file') }}
+							</v-button>
+						</template>
+					</v-info>
+
+					<v-info v-else :title="t('no_results')" icon="search" center>
 						{{ t('no_results_copy') }}
 
 						<template #append>
@@ -153,6 +165,11 @@
 					<component :is="`layout-options-${layout}`" v-bind="layoutState" />
 				</layout-sidebar-detail>
 				<component :is="`layout-sidebar-${layout}`" v-bind="layoutState" />
+				<export-sidebar-detail
+					collection="directus_files"
+					:filter="mergeFilters(filter, folderTypeFilter)"
+					:search="search"
+				/>
 			</template>
 
 			<template v-if="showDropEffect">
@@ -171,7 +188,6 @@ import { defineComponent, computed, ref, PropType, onMounted, onUnmounted, nextT
 import FilesNavigation from '../components/navigation.vue';
 import api from '@/api';
 import usePreset from '@/composables/use-preset';
-import FilterSidebarDetail from '@/views/private/components/filter-sidebar-detail';
 import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
 import AddFolder from '../components/add-folder.vue';
 import SearchInput from '@/views/private/components/search-input';
@@ -186,6 +202,8 @@ import { useLayout } from '@/composables/use-layout';
 import uploadFiles from '@/utils/upload-files';
 import { unexpectedError } from '@/utils/unexpected-error';
 import DrawerBatch from '@/views/private/components/drawer-batch';
+import { Filter } from '@directus/shared/types';
+import { mergeFilters } from '@directus/shared/utils';
 
 type Item = {
 	[field: string]: any;
@@ -195,7 +213,6 @@ export default defineComponent({
 	name: 'FilesCollection',
 	components: {
 		FilesNavigation,
-		FilterSidebarDetail,
 		LayoutSidebarDetail,
 		AddFolder,
 		SearchInput,
@@ -226,68 +243,56 @@ export default defineComponent({
 
 		const userStore = useUserStore();
 
-		const { layout, layoutOptions, layoutQuery, filters, searchQuery, resetPreset } = usePreset(ref('directus_files'));
+		const { layout, layoutOptions, layoutQuery, filter, search, resetPreset } = usePreset(ref('directus_files'));
 
 		const { confirmDelete, deleting, batchDelete, error: deleteError, batchEditActive } = useBatch();
 
 		const { breadcrumb, title } = useBreadcrumb();
 
-		const filtersWithFolderAndType = computed(() => {
-			const filtersParsed: any[] = [
-				{
-					locked: true,
-					field: 'type',
-					operator: 'nnull',
-					value: 1,
-				},
-			];
+		const folderTypeFilter = computed(() => {
+			const filterParsed: Filter = {
+				_and: [
+					{
+						type: {
+							_nnull: true,
+						},
+					},
+				],
+			};
 
 			if (props.special === null) {
 				if (props.folder !== null) {
-					filtersParsed.push({
-						locked: true,
-						operator: 'eq',
-						field: 'folder',
-						value: props.folder,
+					filterParsed._and.push({
+						folder: {
+							_eq: props.folder,
+						},
 					});
 				} else {
-					filtersParsed.push({
-						locked: true,
-						operator: 'null',
-						field: 'folder',
-						value: true,
+					filterParsed._and.push({
+						folder: {
+							_null: true,
+						},
 					});
 				}
 			}
 
 			if (props.special === 'mine' && userStore.currentUser) {
-				filtersParsed.push({
-					locked: true,
-					operator: 'eq',
-					field: 'uploaded_by',
-					value: userStore.currentUser.id,
+				filterParsed._and.push({
+					uploaded_by: {
+						_eq: userStore.currentUser.id,
+					},
 				});
 			}
 
 			if (props.special === 'recent') {
-				filtersParsed.push({
-					locked: true,
-					operator: 'gt',
-					field: 'uploaded_on',
-					value: subDays(new Date(), 5).toISOString(),
+				filterParsed._and.push({
+					uploaded_on: {
+						_gt: subDays(new Date(), 5).toISOString(),
+					},
 				});
 			}
 
-			return filtersParsed;
-		});
-
-		const layoutFilters = computed<any[]>({
-			get() {
-				return [...filters.value, ...filtersWithFolderAndType.value];
-			},
-			set(newFilters) {
-				filters.value = newFilters;
-			},
+			return filterParsed;
 		});
 
 		const { layoutWrapper } = useLayout(layout);
@@ -312,13 +317,12 @@ export default defineComponent({
 			title,
 			layoutRef,
 			layoutWrapper,
-			layoutFilters,
 			selection,
 			layoutOptions,
 			layoutQuery,
 			layout,
-			filtersWithFolderAndType,
-			searchQuery,
+			folderTypeFilter,
+			search,
 			moveToDialogActive,
 			moveToFolder,
 			moving,
@@ -340,6 +344,8 @@ export default defineComponent({
 			batchDelete,
 			deleteError,
 			batchEditActive,
+			filter,
+			mergeFilters,
 		};
 
 		function useBatch() {
@@ -455,8 +461,8 @@ export default defineComponent({
 		}
 
 		function clearFilters() {
-			filters.value = [];
-			searchQuery.value = null;
+			filter.value = null;
+			search.value = null;
 		}
 
 		function usePermissions() {
diff --git a/app/src/modules/settings/routes/presets/item.vue b/app/src/modules/settings/routes/presets/item.vue
index 10f6f9f2d6..13e4961027 100644
--- a/app/src/modules/settings/routes/presets/item.vue
+++ b/app/src/modules/settings/routes/presets/item.vue
@@ -4,8 +4,8 @@
 		v-slot="{ layoutState }"
 		v-model:layout-options="layoutOptions"
 		v-model:layout-query="layoutQuery"
-		v-model:filters="layoutFilters"
-		v-model:search-query="searchQuery"
+		:filter="layoutFilter"
+		:search="search"
 		:collection="values.collection"
 		readonly
 	>
@@ -66,7 +66,12 @@
 				<v-form v-model="edits" :fields="fields" :loading="loading" :initial-values="initialValues" :primary-key="id" />
 
 				<div class="layout">
-					<component :is="`layout-${values.layout}`" v-if="values.layout && values.collection" v-bind="layoutState">
+					<component
+						:is="`layout-${values.layout}`"
+						v-if="values.layout && values.collection"
+						v-bind="layoutState"
+						:collection="values.collection"
+					>
 						<template #no-results>
 							<v-info :title="t('no_results')" icon="search" center>
 								{{ t('no_results_copy') }}
@@ -93,7 +98,7 @@
 
 				<div class="layout-sidebar">
 					<sidebar-detail icon="search" :title="t('search')">
-						<v-input v-model="searchQuery" :placeholder="t('preset_search_placeholder')"></v-input>
+						<v-input v-model="search" :placeholder="t('preset_search_placeholder')"></v-input>
 					</sidebar-detail>
 
 					<component
@@ -156,7 +161,7 @@ type FormattedPreset = {
 	layout_query: Record<string, any> | null;
 
 	layout_options: Record<string, any> | null;
-	filters: readonly Filter[] | null;
+	filter: Filter | null;
 };
 
 export default defineComponent({
@@ -181,14 +186,13 @@ export default defineComponent({
 
 		const { loading, preset } = usePreset();
 		const { fields } = useForm();
-		const { edits, hasEdits, initialValues, values, layoutQuery, layoutOptions, updateFilters, searchQuery } =
-			useValues();
+		const { edits, hasEdits, initialValues, values, layoutQuery, layoutOptions, updateFilters, search } = useValues();
 		const { save, saving } = useSave();
 		const { deleting, deleteAndQuit, confirmDelete } = useDelete();
 
-		const layoutFilters = computed<any>({
+		const layoutFilter = computed<any>({
 			get() {
-				return values.value.filters || [];
+				return values.value.filter ?? null;
 			},
 			set(newFilters) {
 				updateFilters(newFilters);
@@ -237,13 +241,13 @@ export default defineComponent({
 			layoutWrapper,
 			layoutQuery,
 			layoutOptions,
-			layoutFilters,
+			layoutFilter,
 			hasEdits,
 			deleting,
 			deleteAndQuit,
 			confirmDelete,
 			updateFilters,
-			searchQuery,
+			search,
 			isSavable,
 			confirmLeave,
 			leaveTo,
@@ -266,7 +270,7 @@ export default defineComponent({
 				if (edits.value.layout) editsParsed.layout = edits.value.layout;
 				if (edits.value.layout_query) editsParsed.layout_query = edits.value.layout_query;
 				if (edits.value.layout_options) editsParsed.layout_options = edits.value.layout_options;
-				if (edits.value.filters) editsParsed.filters = edits.value.filters;
+				if (edits.value.filter) editsParsed.filter = edits.value.filter;
 				editsParsed.search = edits.value.search;
 
 				if (edits.value.scope) {
@@ -334,7 +338,7 @@ export default defineComponent({
 					scope: 'all',
 					layout_query: null,
 					layout_options: null,
-					filters: null,
+					filter: null,
 				};
 				if (isNew.value === true) return defaultValues;
 				if (preset.value === null) return defaultValues;
@@ -357,7 +361,7 @@ export default defineComponent({
 					scope: scope,
 					layout_query: preset.value.layout_query,
 					layout_options: preset.value.layout_options,
-					filters: preset.value.filters,
+					filter: preset.value.filter,
 				};
 
 				return value;
@@ -406,7 +410,7 @@ export default defineComponent({
 				},
 			});
 
-			const searchQuery = computed<string | null>({
+			const search = computed<string | null>({
 				get() {
 					return values.value.search;
 				},
@@ -418,12 +422,12 @@ export default defineComponent({
 				},
 			});
 
-			return { edits, initialValues, values, layoutQuery, layoutOptions, hasEdits, updateFilters, searchQuery };
+			return { edits, initialValues, values, layoutQuery, layoutOptions, hasEdits, updateFilters, search };
 
-			function updateFilters(newFilters: Filter) {
+			function updateFilters(newFilter: Filter) {
 				edits.value = {
 					...edits.value,
-					filters: newFilters,
+					filter: newFilter,
 				};
 			}
 		}
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
index 4889d9ab9f..8384e23408 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
@@ -9,11 +9,7 @@
 			}}
 		</v-notice>
 
-		<interface-system-filter
-			:value="permissions"
-			:collection-name="permission.collection"
-			@input="permissions = $event"
-		/>
+		<v-form v-model="permissionSync" :fields="fields" />
 
 		<div v-if="appMinimal" class="app-minimal">
 			<v-divider />
@@ -48,21 +44,23 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
-		const internalPermission = useSync(props, 'permission', emit);
+		const permissionSync = useSync(props, 'permission', emit);
 
-		const permissions = computed({
-			get() {
-				return internalPermission.value.permissions;
+		const fields = computed(() => [
+			{
+				field: 'permissions',
+				name: t('rule'),
+				type: 'json',
+				meta: {
+					interface: 'system-filter',
+					options: {
+						collectionName: permissionSync.value.collection,
+					},
+				},
 			},
-			set(newPermissions: Record<string, any> | null) {
-				internalPermission.value = {
-					...internalPermission.value,
-					permissions: newPermissions,
-				};
-			},
-		});
+		]);
 
-		return { t, permissions };
+		return { t, fields, permissionSync };
 	},
 });
 </script>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
index cb94ed3e22..60bf7089dd 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
@@ -9,11 +9,7 @@
 			}}
 		</v-notice>
 
-		<interface-system-filter
-			:value="validation"
-			:collection-name="permission.collection"
-			@input="validation = $event"
-		/>
+		<v-form v-model="permissionSync" :fields="fields" />
 	</div>
 </template>
 
@@ -38,21 +34,23 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
-		const internalPermission = useSync(props, 'permission', emit);
+		const permissionSync = useSync(props, 'permission', emit);
 
-		const validation = computed({
-			get() {
-				return internalPermission.value.validation;
+		const fields = computed(() => [
+			{
+				field: 'permissions',
+				name: t('rule'),
+				type: 'json',
+				meta: {
+					interface: 'system-filter',
+					options: {
+						collectionName: permissionSync.value.collection,
+					},
+				},
 			},
-			set(newValidation: Record<string, any> | null) {
-				internalPermission.value = {
-					...internalPermission.value,
-					validation: newValidation,
-				};
-			},
-		});
+		]);
 
-		return { t, validation };
+		return { t, permissionSync, fields };
 	},
 });
 </script>
diff --git a/app/src/modules/settings/routes/webhooks/collection.vue b/app/src/modules/settings/routes/webhooks/collection.vue
index 010fc613fd..dd92664b27 100644
--- a/app/src/modules/settings/routes/webhooks/collection.vue
+++ b/app/src/modules/settings/routes/webhooks/collection.vue
@@ -6,8 +6,8 @@
 		v-model:selection="selection"
 		v-model:layout-options="layoutOptions"
 		v-model:layout-query="layoutQuery"
-		v-model:filters="filters"
-		v-model:search-query="searchQuery"
+		:filter="filter"
+		:search="search"
 		collection="directus_webhooks"
 	>
 		<private-view :title="t('webhooks')">
@@ -24,7 +24,7 @@
 			</template>
 
 			<template #actions>
-				<search-input v-model="searchQuery" />
+				<search-input v-model="search" collection="directus_webhooks" />
 
 				<v-dialog v-if="selection.length > 0" v-model="confirmDelete" @esc="confirmDelete = false">
 					<template #activator="{ on }">
@@ -121,7 +121,7 @@ export default defineComponent({
 		const layoutRef = ref();
 		const selection = ref<Item[]>([]);
 
-		const { layout, layoutOptions, layoutQuery, filters, searchQuery } = usePreset(ref('directus_webhooks'));
+		const { layout, layoutOptions, layoutQuery, filter, search } = usePreset(ref('directus_webhooks'));
 		const { addNewLink, batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 
@@ -136,12 +136,12 @@ export default defineComponent({
 			deleting,
 			layoutRef,
 			layoutWrapper,
-			filters,
+			filter,
 			selection,
 			layoutOptions,
 			layoutQuery,
 			layout,
-			searchQuery,
+			search,
 			clearFilters,
 		};
 
@@ -186,8 +186,8 @@ export default defineComponent({
 		}
 
 		function clearFilters() {
-			filters.value = [];
-			searchQuery.value = null;
+			filter.value = null;
+			search.value = null;
 		}
 	},
 });
diff --git a/app/src/modules/users/routes/collection.vue b/app/src/modules/users/routes/collection.vue
index 0d81dd43cd..582d2253a3 100644
--- a/app/src/modules/users/routes/collection.vue
+++ b/app/src/modules/users/routes/collection.vue
@@ -6,8 +6,10 @@
 		v-model:selection="selection"
 		v-model:layout-options="layoutOptions"
 		v-model:layout-query="layoutQuery"
-		v-model:filters="layoutFilters"
-		v-model:search-query="searchQuery"
+		:filter="mergeFilters(filter, roleFilter)"
+		:filter-user="filter"
+		:filter-system="roleFilter"
+		:search="search"
 		collection="directus_users"
 		:reset-preset="resetPreset"
 	>
@@ -27,7 +29,7 @@
 			</template>
 
 			<template #actions>
-				<search-input v-model="searchQuery" />
+				<search-input v-model="search" v-model:filter="filter" collection="directus_users" />
 
 				<v-dialog v-if="selection.length > 0" v-model="confirmDelete" @esc="confirmDelete = false">
 					<template #activator="{ on }">
@@ -99,7 +101,17 @@
 
 			<component :is="`layout-${layout}`" class="layout" v-bind="layoutState">
 				<template #no-results>
-					<v-info :title="t('no_results')" icon="search" center>
+					<v-info v-if="!filter && !search" :title="t('user_count', 0)" icon="people_alt" center>
+						{{ t('no_users_copy') }}
+
+						<template v-if="canInviteUsers" #append>
+							<v-button :to="role ? { path: `/users/roles/${role}/+` } : { path: '/users/+' }">
+								{{ t('create_user') }}
+							</v-button>
+						</template>
+					</v-info>
+
+					<v-info v-else :title="t('no_results')" icon="search" center>
 						{{ t('no_results_copy') }}
 
 						<template #append>
@@ -136,6 +148,11 @@
 					<component :is="`layout-options-${layout}`" v-bind="layoutState" />
 				</layout-sidebar-detail>
 				<component :is="`layout-sidebar-${layout}`" v-bind="layoutState" />
+				<export-sidebar-detail
+					collection="directus_users"
+					:filter="mergeFilters(filter, roleFilter)"
+					:search="search"
+				/>
 			</template>
 		</private-view>
 	</component>
@@ -156,6 +173,7 @@ import useNavigation from '../composables/use-navigation';
 import { useLayout } from '@/composables/use-layout';
 import DrawerBatch from '@/views/private/components/drawer-batch';
 import { Role } from '@directus/shared/types';
+import { mergeFilters } from '@directus/shared/utils';
 
 type Item = {
 	[field: string]: any;
@@ -181,31 +199,27 @@ export default defineComponent({
 		const layoutRef = ref();
 		const selection = ref<Item[]>([]);
 
-		const { layout, layoutOptions, layoutQuery, filters, searchQuery, resetPreset } = usePreset(ref('directus_users'));
+		const { layout, layoutOptions, layoutQuery, filter, search, resetPreset } = usePreset(ref('directus_users'));
 		const { addNewLink } = useLinks();
 
 		const { confirmDelete, deleting, batchDelete, error: deleteError, batchEditActive } = useBatch();
 
 		const { breadcrumb, title } = useBreadcrumb();
 
-		const layoutFilters = computed({
-			get() {
-				if (props.role !== null) {
-					const roleFilter = {
-						locked: true,
-						operator: 'eq',
-						field: 'role',
-						value: props.role,
-					};
+		const roleFilter = computed(() => {
+			if (props.role !== null) {
+				return {
+					_and: [
+						{
+							role: {
+								_eq: props.role,
+							},
+						},
+					],
+				};
+			}
 
-					return [roleFilter, ...filters.value];
-				}
-
-				return filters.value;
-			},
-			set(newFilters) {
-				filters.value = newFilters;
-			},
+			return null;
 		});
 
 		const canInviteUsers = computed(() => {
@@ -236,11 +250,10 @@ export default defineComponent({
 			layoutRef,
 			layoutWrapper,
 			selection,
-			layoutFilters,
 			layoutOptions,
 			layoutQuery,
 			layout,
-			searchQuery,
+			search,
 			clearFilters,
 			userInviteModalActive,
 			refresh,
@@ -253,6 +266,9 @@ export default defineComponent({
 			batchDelete,
 			deleteError,
 			batchEditActive,
+			filter,
+			roleFilter,
+			mergeFilters,
 		};
 
 		async function refresh() {
@@ -320,8 +336,8 @@ export default defineComponent({
 		}
 
 		function clearFilters() {
-			filters.value = [];
-			searchQuery.value = null;
+			filter.value = null;
+			search.value = null;
 		}
 
 		function usePermissions() {
diff --git a/app/src/panels/list/index.ts b/app/src/panels/list/index.ts
index 857dc9fab6..f87e4fd0ea 100644
--- a/app/src/panels/list/index.ts
+++ b/app/src/panels/list/index.ts
@@ -88,11 +88,9 @@ export default definePanel({
 			type: 'json',
 			name: '$t:filter',
 			meta: {
-				interface: 'code',
-				note: '[Learn More: Filter Rules](/admin/docs/reference/filter-rules)',
+				interface: 'system-filter',
 				options: {
-					language: 'json',
-					placeholder: '{\n\t<field>: {\n\t\t<operator>: <value>\n\t}\n}',
+					collectionField: 'collection',
 				},
 			},
 		},
diff --git a/app/src/panels/metric/index.ts b/app/src/panels/metric/index.ts
index 506869f18e..d5bc1810a2 100644
--- a/app/src/panels/metric/index.ts
+++ b/app/src/panels/metric/index.ts
@@ -107,11 +107,9 @@ export default definePanel({
 			type: 'json',
 			name: '$t:filter',
 			meta: {
-				interface: 'code',
-				note: '[Learn More: Filter Rules](/admin/docs/reference/filter-rules)',
+				interface: 'system-filter',
 				options: {
-					language: 'json',
-					placeholder: '{\n\t<field>: {\n\t\t<operator>: <value>\n\t}\n}',
+					collectionField: 'collection',
 				},
 			},
 		},
diff --git a/app/src/panels/time-series/index.ts b/app/src/panels/time-series/index.ts
index 3d734c4499..3c3db2e618 100644
--- a/app/src/panels/time-series/index.ts
+++ b/app/src/panels/time-series/index.ts
@@ -248,11 +248,9 @@ export default definePanel({
 			type: 'json',
 			name: '$t:filter',
 			meta: {
-				interface: 'code',
-				note: '[Learn More: Filter Rules](/admin/docs/reference/filter-rules)',
+				interface: 'system-filter',
 				options: {
-					language: 'json',
-					placeholder: '{\n\t<field>: {\n\t\t<operator>: <value>\n\t}\n}',
+					collectionField: 'collection',
 				},
 			},
 		},
diff --git a/app/src/stores/presets.ts b/app/src/stores/presets.ts
index 7844df2ce0..11c667ff6e 100644
--- a/app/src/stores/presets.ts
+++ b/app/src/stores/presets.ts
@@ -10,7 +10,7 @@ const defaultPreset: Omit<Preset, 'collection'> = {
 	role: null,
 	user: null,
 	search: null,
-	filters: null,
+	filter: null,
 	layout: null,
 	layout_query: null,
 	layout_options: null,
@@ -23,7 +23,7 @@ const systemDefaults: Record<string, Partial<Preset>> = {
 		layout: 'cards',
 		layout_query: {
 			cards: {
-				sort: '-uploaded_on',
+				sort: ['-uploaded_on'],
 			},
 		},
 		layout_options: {
@@ -41,7 +41,7 @@ const systemDefaults: Record<string, Partial<Preset>> = {
 		layout: 'cards',
 		layout_query: {
 			cards: {
-				sort: 'email',
+				sort: ['email'],
 			},
 		},
 		layout_options: {
@@ -58,7 +58,7 @@ const systemDefaults: Record<string, Partial<Preset>> = {
 		layout: 'tabular',
 		layout_query: {
 			tabular: {
-				sort: '-timestamp',
+				sort: ['-timestamp'],
 				fields: ['action', 'collection', 'timestamp', 'user'],
 			},
 		},
diff --git a/app/src/stores/requests.ts b/app/src/stores/requests.ts
index 8658fd59f0..e16b61ad1f 100644
--- a/app/src/stores/requests.ts
+++ b/app/src/stores/requests.ts
@@ -15,6 +15,11 @@ export const useRequestsStore = defineStore({
 		startRequest() {
 			const id = nanoid();
 			this.queue = [...this.queue, id];
+
+			// If requests take more than 3.5 seconds, we'll have to assume they'll either never
+			// happen, or already crashed
+			setTimeout(() => this.endRequest(id), 3500);
+
 			return id;
 		},
 		endRequest(id: string) {
diff --git a/app/src/views/private/components/drawer-collection/drawer-collection.vue b/app/src/views/private/components/drawer-collection/drawer-collection.vue
index 878f77bcc3..aa1b9b5c6d 100644
--- a/app/src/views/private/components/drawer-collection/drawer-collection.vue
+++ b/app/src/views/private/components/drawer-collection/drawer-collection.vue
@@ -5,8 +5,8 @@
 		v-model:selection="layoutSelection"
 		v-model:layout-options="localOptions"
 		v-model:layout-query="localQuery"
-		v-model:filters="layoutFilters"
-		v-model:search-query="searchQuery"
+		:filter="layoutFilter"
+		:search="search"
 		:collection="collection"
 		select-mode
 	>
@@ -24,7 +24,7 @@
 			<template #actions:prepend><component :is="`layout-actions-${localLayout}`" v-bind="layoutState" /></template>
 
 			<template #actions>
-				<search-input v-model="searchQuery" />
+				<search-input v-model="search" v-model:filter="presetFilter" :collection="collection" />
 
 				<v-button v-tooltip.bottom="t('save')" icon rounded @click="save">
 					<v-icon name="check" />
@@ -72,12 +72,12 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		filters: {
-			type: Array as PropType<Filter[]>,
-			default: () => [],
+		filter: {
+			type: Object as PropType<Filter>,
+			default: null,
 		},
 	},
-	emits: ['update:filters', 'update:active', 'input'],
+	emits: ['update:active', 'input'],
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
@@ -88,7 +88,7 @@ export default defineComponent({
 		const { collection } = toRefs(props);
 
 		const { info: collectionInfo } = useCollection(collection);
-		const { layout, layoutOptions, layoutQuery, searchQuery } = usePreset(collection, ref(null), true);
+		const { layout, layoutOptions, layoutQuery, search, filter: presetFilter } = usePreset(collection, ref(null), true);
 
 		// This is a local copy of the layout. This means that we can sync it the layout without
 		// having use-preset auto-save the values
@@ -105,17 +105,22 @@ export default defineComponent({
 			},
 		});
 
-		const layoutFilters = computed<Filter[]>({
+		const { layoutWrapper } = useLayout(layout);
+
+		const layoutFilter = computed({
 			get() {
-				return props.filters;
+				if (!props.filter) return presetFilter.value;
+				if (!presetFilter.value) return props.filter;
+
+				return {
+					_and: [props.filter, presetFilter.value],
+				};
 			},
-			set(newFilters) {
-				emit('update:filters', newFilters);
+			set(newFilter: Filter | null) {
+				presetFilter.value = newFilter;
 			},
 		});
 
-		const { layoutWrapper } = useLayout(layout);
-
 		return {
 			t,
 			save,
@@ -123,12 +128,13 @@ export default defineComponent({
 			internalActive,
 			layoutWrapper,
 			layoutSelection,
-			layoutFilters,
+			layoutFilter,
 			localLayout,
 			localOptions,
 			localQuery,
 			collectionInfo,
-			searchQuery,
+			search,
+			presetFilter,
 		};
 
 		function useActiveState() {
diff --git a/app/src/views/private/components/export-sidebar-detail/export-sidebar-detail.vue b/app/src/views/private/components/export-sidebar-detail/export-sidebar-detail.vue
index ec93e6347a..bb7230bccb 100644
--- a/app/src/views/private/components/export-sidebar-detail/export-sidebar-detail.vue
+++ b/app/src/views/private/components/export-sidebar-detail/export-sidebar-detail.vue
@@ -38,7 +38,6 @@ import { defineComponent, ref, PropType, computed } from 'vue';
 import { Filter } from '@directus/shared/types';
 import api from '@/api';
 import { getRootPath } from '@/utils/get-root-path';
-import { filtersToQuery } from '@directus/shared/utils';
 import { useCollectionsStore } from '@/stores/';
 
 type LayoutQuery = {
@@ -53,11 +52,11 @@ export default defineComponent({
 			type: Object as PropType<LayoutQuery>,
 			default: (): LayoutQuery => ({}),
 		},
-		filters: {
-			type: Array as PropType<Filter[]>,
-			default: () => [],
+		filter: {
+			type: Object as PropType<Filter>,
+			default: null,
 		},
-		searchQuery: {
+		search: {
 			type: String as PropType<string | null>,
 			default: null,
 		},
@@ -84,7 +83,7 @@ export default defineComponent({
 			const url = getRootPath() + endpoint;
 
 			let params: Record<string, unknown> = {
-				access_token: api.defaults.headers.Authorization.substring(7),
+				access_token: api.defaults.headers?.Authorization.substring(7),
 				export: format.value || 'json',
 			};
 
@@ -93,17 +92,14 @@ export default defineComponent({
 				if (props.layoutQuery?.fields) params.fields = props.layoutQuery.fields;
 				if (props.layoutQuery?.limit) params.limit = props.layoutQuery.limit;
 
-				if (props.searchQuery) params.search = props.searchQuery;
+				if (props.search) params.search = props.search;
 
-				if (props.filters?.length) {
-					params = {
-						...params,
-						...filtersToQuery(props.filters),
-					};
+				if (props.filter) {
+					params.filter = props.filter;
 				}
 
-				if (props.searchQuery) {
-					params.search = props.searchQuery;
+				if (props.search) {
+					params.search = props.search;
 				}
 			}
 
diff --git a/app/src/views/private/components/filter-sidebar-detail/field-filter.vue b/app/src/views/private/components/filter-sidebar-detail/field-filter.vue
deleted file mode 100644
index 1bfbf9837a..0000000000
--- a/app/src/views/private/components/filter-sidebar-detail/field-filter.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<template>
-	<div class="field-filter">
-		<div class="header">
-			<div v-tooltip="filter.field.split('.').join(' → ')" class="name">
-				<span v-if="filter.field.includes('.')" class="relational-indicator">•</span>
-				{{ name }}
-			</div>
-			<v-menu show-arrow :disabled="disabled">
-				<template #activator="{ toggle }">
-					<div v-tooltip.top="t('change_advanced_filter_operator')" class="operator" @click="toggle">
-						<span>{{ t(`operators.${activeOperator}`) }}</span>
-						<v-icon name="expand_more" />
-					</div>
-				</template>
-
-				<v-list>
-					<v-list-item
-						v-for="operator in filterOperators"
-						:key="operator"
-						:active="operator === activeOperator"
-						clickable
-						@click="activeOperator = operator"
-					>
-						<v-list-item-content>{{ t(`operators.${operator}`) }}</v-list-item-content>
-					</v-list-item>
-				</v-list>
-			</v-menu>
-			<div class="spacer" />
-			<v-icon
-				v-tooltip.left="t('delete_advanced_filter')"
-				class="remove"
-				name="close"
-				clickable
-				@click="$emit('remove')"
-			/>
-		</div>
-		<div class="field">
-			<filter-input v-model="value" :field="field" :type="field.type" :operator="activeOperator" :disabled="disabled" />
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, PropType, computed } from 'vue';
-import { Filter } from '@directus/shared/types';
-import { useFieldsStore } from '@/stores';
-import { getFilterOperatorsForType } from '@directus/shared/utils';
-import FilterInput from './filter-input.vue';
-
-export default defineComponent({
-	components: { FilterInput },
-	props: {
-		filter: {
-			type: Object as PropType<Filter>,
-			required: true,
-		},
-		collection: {
-			type: String,
-			required: true,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['remove', 'update'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
-
-		const fieldsStore = useFieldsStore();
-
-		const activeOperator = computed({
-			get() {
-				return props.filter.operator;
-			},
-			set(newOperator) {
-				emit('update', { operator: newOperator });
-			},
-		});
-
-		const value = computed({
-			get() {
-				return props.filter.value;
-			},
-			set(newValue) {
-				emit('update', { value: newValue });
-			},
-		});
-
-		const name = computed<string>(() => {
-			return getNameForFieldKey(props.filter.field);
-		});
-
-		const field = computed(() => getFieldForKey(props.filter.field));
-
-		const filterOperators = computed(() => {
-			return getFilterOperatorsForType(field.value.type);
-		});
-
-		return { t, activeOperator, value, name, field, filterOperators };
-
-		function getFieldForKey(fieldKey: string) {
-			return fieldsStore.getField(props.collection, fieldKey);
-		}
-
-		function getNameForFieldKey(fieldKey: string) {
-			return getFieldForKey(fieldKey)?.name;
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.field-filter {
-	.header {
-		display: flex;
-		align-items: center;
-		margin-bottom: 4px;
-	}
-
-	.name,
-	.operator {
-		overflow: hidden;
-		white-space: nowrap;
-	}
-
-	.name {
-		position: relative;
-		margin-right: 8px;
-		overflow: visible;
-		text-overflow: ellipsis;
-
-		.relational-indicator {
-			position: absolute;
-			top: -1px;
-			left: -10px;
-			color: var(--foreground-subdued);
-		}
-	}
-
-	.operator {
-		display: flex;
-		align-items: center;
-		color: var(--primary);
-		cursor: pointer;
-
-		span {
-			flex-grow: 1;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-	}
-
-	.spacer {
-		flex-grow: 1;
-	}
-
-	.remove {
-		--v-icon-color: var(--foreground-subdued);
-
-		flex-grow: 0;
-		flex-shrink: 0;
-		opacity: 0;
-
-		&:hover {
-			--v-icon-color: var(--danger);
-		}
-	}
-
-	&:hover {
-		.header .remove {
-			opacity: 1;
-		}
-	}
-}
-</style>
diff --git a/app/src/views/private/components/filter-sidebar-detail/field-list-item.vue b/app/src/views/private/components/filter-sidebar-detail/field-list-item.vue
deleted file mode 100644
index e317095763..0000000000
--- a/app/src/views/private/components/filter-sidebar-detail/field-list-item.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-	<v-list-item v-if="field.children === undefined" clickable @click="$emit('add', field.key)">
-		<v-list-item-content>{{ field.name }}</v-list-item-content>
-	</v-list-item>
-	<v-list-group v-else :value="field.key" clickable @click="$emit('add', field.key)">
-		<template #activator>{{ field.name }}</template>
-		<field-list-item
-			v-for="childField in field.children"
-			:key="childField.field"
-			:field="childField"
-			@add="$emit('add', $event)"
-		/>
-	</v-list-group>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { FieldTree } from './types';
-
-export default defineComponent({
-	name: 'FieldListItem',
-	props: {
-		field: {
-			type: Object as PropType<FieldTree>,
-			required: true,
-		},
-	},
-	emits: ['add'],
-});
-</script>
diff --git a/app/src/views/private/components/filter-sidebar-detail/filter-input.vue b/app/src/views/private/components/filter-sidebar-detail/filter-input.vue
deleted file mode 100644
index 19751a6f26..0000000000
--- a/app/src/views/private/components/filter-sidebar-detail/filter-input.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-	<div class="filter-input">
-		<div v-if="['between', 'nbetween'].includes(operator)" class="between">
-			<div class="field">
-				<component
-					:is="interfaceComponent"
-					:type="type"
-					:value="csvValue[0]"
-					:placeholder="t('lower_limit')"
-					:allow-other="true"
-					:choices="choices"
-					autofocus
-					@input="setCSV(0, $event)"
-				/>
-			</div>
-			<div class="field">
-				<component
-					:is="interfaceComponent"
-					:type="type"
-					:value="csvValue[1]"
-					:placeholder="t('upper_limit')"
-					:allow-other="true"
-					:choices="choices"
-					autofocus
-					@input="setCSV(1, $event)"
-				/>
-			</div>
-		</div>
-		<div v-else-if="['in', 'nin'].includes(operator)" class="list">
-			<div v-for="(val, index) in csvValue" :key="index" class="field">
-				<component
-					:is="interfaceComponent"
-					:type="type"
-					:value="val"
-					:placeholder="t('enter_a_value')"
-					:disabled="disabled"
-					:allow-other="true"
-					:choices="choices"
-					autofocus
-					@input="setCSV(index, $event)"
-				/>
-				<small class="remove" @click="removeCSV(val)">
-					{{ t('remove') }}
-				</small>
-			</div>
-
-			<v-button outlined full-width dashed :disabled="disabled" @click="addCSV">
-				<v-icon name="add" />
-				{{ t('add_new') }}
-			</v-button>
-		</div>
-		<template v-else-if="['empty', 'nempty', 'null', 'nnull'].includes(operator) === false">
-			<component
-				:is="interfaceComponent"
-				:type="type"
-				:value="internalValue"
-				:placeholder="t('enter_a_value')"
-				:disabled="disabled"
-				:choices="choices"
-				:allow-other="true"
-				autofocus
-				@input="internalValue = $event"
-			/>
-		</template>
-	</div>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, PropType, computed } from 'vue';
-import { FilterOperator, Type, Field } from '@directus/shared/types';
-import { getDefaultInterfaceForType } from '@/utils/get-default-interface-for-type';
-
-export default defineComponent({
-	props: {
-		modelValue: {
-			type: [String, Number, Boolean],
-			required: true,
-		},
-		type: {
-			type: String as PropType<Type>,
-			required: true,
-		},
-		operator: {
-			type: String as PropType<FilterOperator>,
-			required: true,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		field: {
-			type: Object as PropType<Field>,
-			default: null,
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
-
-		const internalValue = computed<string | string[] | boolean | number>({
-			get() {
-				return props.modelValue;
-			},
-			set(newValue) {
-				emit('update:modelValue', newValue);
-			},
-		});
-
-		const csvValue = computed({
-			get() {
-				return typeof props.modelValue === 'string' ? props.modelValue.split(',') : [];
-			},
-			set(newVal: string[]) {
-				internalValue.value = newVal.join(',');
-			},
-		});
-
-		const choices = computed(() => {
-			if (!props.field) return null;
-			return props.field?.meta?.options?.choices || null;
-		});
-
-		const interfaceComponent = computed(() => {
-			if (choices.value) {
-				return 'interface-select-dropdown';
-			}
-
-			if (props.field.type === 'csv') {
-				return 'interface-input';
-			}
-
-			return `interface-${getDefaultInterfaceForType(props.type)}`;
-		});
-
-		return { t, internalValue, csvValue, setCSV, removeCSV, addCSV, interfaceComponent, choices };
-
-		function setCSV(index: number, value: string) {
-			const newValue = Object.assign([], csvValue.value, { [index]: value });
-			csvValue.value = newValue;
-		}
-
-		function removeCSV(val: string) {
-			csvValue.value = csvValue.value.filter((value) => value !== val);
-		}
-
-		function addCSV() {
-			csvValue.value = [...csvValue.value, ''];
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.v-input + .v-input,
-.v-input + .v-button {
-	margin-top: 8px;
-}
-
-.v-input .v-icon {
-	--v-icon-color: var(--foreground-subdued);
-}
-
-.list .field {
-	margin-bottom: 12px;
-}
-
-.list .field .remove {
-	display: flex;
-	align-items: center;
-	float: right;
-	width: max-content;
-	margin-bottom: 12px;
-	color: var(--foreground-subdued);
-	cursor: pointer;
-}
-
-.list .field .remove:hover {
-	color: var(--danger);
-}
-
-.between .field:first-child {
-	margin-bottom: 12px;
-}
-</style>
diff --git a/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue b/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue
deleted file mode 100644
index cfea8b1aac..0000000000
--- a/app/src/views/private/components/filter-sidebar-detail/filter-sidebar-detail.vue
+++ /dev/null
@@ -1,194 +0,0 @@
-<template>
-	<sidebar-detail :badge="filters.length > 0 ? filters.length : null" icon="filter_list" :title="t('advanced_filter')">
-		<field-filter
-			v-for="filter in filters"
-			:key="filter.key"
-			:filter="filter"
-			:collection="collection"
-			:disabled="loading"
-			@update="updateFilter(filter.key, $event)"
-			@remove="removeFilter(filter.key)"
-		/>
-
-		<v-divider v-if="filters.length" />
-
-		<v-menu attached :disabled="loading">
-			<template #activator="{ toggle, active }">
-				<v-input
-					clickable
-					:class="{ active }"
-					readonly
-					:model-value="t('add_filter')"
-					:disabled="loading"
-					@click="toggle"
-				>
-					<template #prepend><v-icon name="add" /></template>
-					<template #append><v-icon name="expand_more" /></template>
-				</v-input>
-			</template>
-
-			<v-list @toggle="loadFieldRelations($event.value, 1)">
-				<field-list-item v-for="field in treeList" :key="field.field" :field="field" @add="addFilterForField" />
-			</v-list>
-		</v-menu>
-
-		<template v-if="showArchiveToggle">
-			<v-divider />
-
-			<v-checkbox v-model="archived" :label="t('show_archived_items')" />
-		</template>
-	</sidebar-detail>
-</template>
-
-<script lang="ts">
-import { useI18n } from 'vue-i18n';
-import { defineComponent, PropType, computed, ref, watch, toRefs } from 'vue';
-import { Field, Filter } from '@directus/shared/types';
-import { useFieldsStore } from '@/stores';
-import FieldFilter from './field-filter.vue';
-import { nanoid } from 'nanoid';
-import { debounce } from 'lodash';
-import FieldListItem from './field-list-item.vue';
-import { useCollection } from '@directus/shared/composables';
-import { getFilterOperatorsForType } from '@directus/shared/utils';
-import { useFieldTree } from '@/composables/use-field-tree';
-
-export default defineComponent({
-	components: { FieldFilter, FieldListItem },
-	props: {
-		modelValue: {
-			type: Array as PropType<Filter[]>,
-			required: true,
-		},
-		collection: {
-			type: String,
-			required: true,
-		},
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['update:modelValue'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
-
-		const fieldsStore = useFieldsStore();
-
-		const { collection } = toRefs(props);
-		const { info: collectionInfo } = useCollection(collection);
-
-		const { treeList, loadFieldRelations } = useFieldTree(collection);
-
-		const localFilters = ref<Filter[]>([]);
-
-		watch(
-			() => props.modelValue,
-			() => {
-				localFilters.value = props.modelValue;
-			},
-			{ immediate: true }
-		);
-
-		const syncWithProp = debounce(() => {
-			emit('update:modelValue', localFilters.value);
-		}, 850);
-
-		const filters = computed<Filter[]>({
-			get() {
-				return localFilters.value.filter((filter) => {
-					return filter.locked !== true;
-				});
-			},
-			set(newFilters) {
-				localFilters.value = newFilters;
-				syncWithProp();
-			},
-		});
-
-		const showArchiveToggle = computed(
-			() => !!collectionInfo.value?.meta?.archive_field && !!collectionInfo.value?.meta?.archive_app_filter
-		);
-
-		const archived = computed({
-			get() {
-				return (
-					props.modelValue.find((filter) => filter.locked === true && filter.key === 'hide-archived') === undefined
-				);
-			},
-			set(showArchived: boolean) {
-				if (!collectionInfo.value?.meta?.archive_field) return;
-
-				if (showArchived === false) {
-					emit('update:modelValue', [
-						...filters.value,
-						{
-							key: 'hide-archived',
-							field: collectionInfo.value.meta.archive_field,
-							operator: 'neq',
-							value: collectionInfo.value.meta.archive_value!,
-							locked: true,
-						},
-					]);
-				} else {
-					emit(
-						'update:modelValue',
-						filters.value.filter((filter) => filter.key !== 'hide-archived')
-					);
-				}
-			},
-		});
-
-		return {
-			t,
-			treeList,
-			addFilterForField,
-			filters,
-			removeFilter,
-			updateFilter,
-			showArchiveToggle,
-			archived,
-			loadFieldRelations,
-		};
-
-		function addFilterForField(fieldKey: string) {
-			const field = fieldsStore.getField(props.collection, fieldKey) as Field;
-			const defaultOperator = getFilterOperatorsForType(field.type)[0];
-
-			emit('update:modelValue', [
-				...props.modelValue,
-				{
-					key: nanoid(),
-					field: fieldKey,
-					operator: defaultOperator || 'contains',
-					value: field.type === 'boolean' ? true : '',
-				},
-			]);
-		}
-
-		function updateFilter(key: string, updates: Filter) {
-			filters.value = filters.value.map((filter) => {
-				if (filter.key === key) {
-					return { ...filter, ...updates };
-				}
-
-				return filter;
-			});
-		}
-
-		function removeFilter(key: string) {
-			filters.value = filters.value.filter((filter) => filter.key !== key);
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.v-divider {
-	margin: 16px 0;
-}
-
-.field-filter {
-	margin-bottom: 16px;
-}
-</style>
diff --git a/app/src/views/private/components/filter-sidebar-detail/index.ts b/app/src/views/private/components/filter-sidebar-detail/index.ts
deleted file mode 100644
index 5d49ccb85b..0000000000
--- a/app/src/views/private/components/filter-sidebar-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import FilterSidebarDetail from './filter-sidebar-detail.vue';
-
-export { FilterSidebarDetail };
-export default FilterSidebarDetail;
diff --git a/app/src/views/private/components/filter-sidebar-detail/types.ts b/app/src/views/private/components/filter-sidebar-detail/types.ts
deleted file mode 100644
index 45de5d059b..0000000000
--- a/app/src/views/private/components/filter-sidebar-detail/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type FieldTree = {
-	field: string;
-	name: string;
-	children?: FieldTree[];
-};
diff --git a/app/src/views/private/components/search-input/search-input.vue b/app/src/views/private/components/search-input/search-input.vue
index f276320e40..f52f327279 100644
--- a/app/src/views/private/components/search-input/search-input.vue
+++ b/app/src/views/private/components/search-input/search-input.vue
@@ -1,20 +1,52 @@
 <template>
-	<div
-		v-click-outside="disable"
-		v-tooltip.bottom="active ? null : t('search')"
-		class="search-input"
-		:class="{ active, 'has-content': !!modelValue }"
-		@click="active = true"
-	>
-		<v-icon name="search" />
-		<input ref="input" :value="modelValue" :placeholder="t('search_items')" @input="emitValue" @paste="emitValue" />
-		<v-icon v-if="modelValue" class="empty" name="close" @click.stop="emptyAndClose" />
-	</div>
+	<v-badge bottom right class="search-badge" :value="activeFilterCount" :disabled="!activeFilterCount || filterActive">
+		<div
+			v-click-outside="{
+				handler: disable,
+				middleware: onClickOutside,
+			}"
+			class="search-input"
+			:class="{ active, 'filter-active': filterActive, 'has-content': !!modelValue, 'filter-border': filterBorder }"
+			@click="active = true"
+		>
+			<v-icon v-tooltip.bottom="active ? null : t('search')" name="search" class="icon-search" :clickable="!active" />
+			<input ref="input" :value="modelValue" :placeholder="t('search_items')" @input="emitValue" @paste="emitValue" />
+			<v-icon
+				v-if="modelValue"
+				clickable
+				class="icon-empty"
+				name="close"
+				@click.stop="$emit('update:modelValue', null)"
+			/>
+
+			<v-icon
+				v-tooltip.bottom="t('filter')"
+				clickable
+				class="icon-filter"
+				name="filter_list"
+				@click="filterActive = !filterActive"
+			/>
+
+			<transition-expand @beforeEnter="filterBorder = true" @afterLeave="filterBorder = false">
+				<div v-show="filterActive" class="filter">
+					<interface-system-filter
+						class="filter-input"
+						inline
+						:value="filter"
+						:collection-name="collection"
+						@input="$emit('update:filter', $event)"
+					/>
+				</div>
+			</transition-expand>
+		</div>
+	</v-badge>
 </template>
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, ref, watch } from 'vue';
+import { defineComponent, ref, watch, PropType, computed } from 'vue';
+import { Filter } from '@directus/shared/types';
+import { isObject } from 'lodash';
 
 export default defineComponent({
 	props: {
@@ -22,14 +54,24 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		collection: {
+			type: String,
+			required: true,
+		},
+		filter: {
+			type: Object as PropType<Filter>,
+			default: null,
+		},
 	},
-	emits: ['update:modelValue'],
+	emits: ['update:modelValue', 'update:filter'],
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
 		const input = ref<HTMLInputElement | null>(null);
 
 		const active = ref(props.modelValue !== null);
+		const filterActive = ref(false);
+		const filterBorder = ref(false);
 
 		watch(active, (newActive: boolean) => {
 			if (newActive === true && input.value !== null) {
@@ -37,15 +79,41 @@ export default defineComponent({
 			}
 		});
 
-		return { t, active, disable, input, emptyAndClose, emitValue };
+		const activeFilterCount = computed(() => {
+			if (!props.filter) return 0;
+
+			let filterOperators: string[] = [];
+
+			parseLevel(props.filter);
+
+			return filterOperators.length;
+
+			function parseLevel(level: Record<string, any>) {
+				for (const [key, value] of Object.entries(level)) {
+					if (key === '_and' || key === '_or') {
+						value.forEach(parseLevel);
+					} else if (key.startsWith('_')) {
+						filterOperators.push(key);
+					} else {
+						if (isObject(value)) {
+							parseLevel(value);
+						}
+					}
+				}
+			}
+		});
+
+		return { t, active, disable, input, emitValue, activeFilterCount, filterActive, onClickOutside, filterBorder };
+
+		function onClickOutside(e: { path: HTMLElement[] }) {
+			if (e.path.some((el) => el?.classList?.contains('v-menu-content'))) return false;
+
+			return true;
+		}
 
 		function disable() {
 			active.value = false;
-		}
-
-		function emptyAndClose() {
-			emit('update:modelValue', null);
-			active.value = false;
+			filterActive.value = false;
 		}
 
 		function emitValue() {
@@ -58,71 +126,119 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.search-badge {
+	--v-badge-background-color: var(--primary);
+	--v-badge-offset-y: 8px;
+	--v-badge-offset-x: 8px;
+}
+
 .search-input {
 	display: flex;
 	align-items: center;
-	width: 44px;
+	width: 72px;
+	max-width: 100%;
 	height: 44px;
 	overflow: hidden;
 	border: 2px solid var(--border-normal);
 	border-radius: calc(44px / 2);
-	cursor: pointer;
-	transition: width var(--slow) var(--transition);
+	transition: width var(--slow) var(--transition), border-bottom-left-radius var(--fast) var(--transition),
+		border-bottom-right-radius var(--fast) var(--transition);
 
-	.empty {
+	.icon-empty {
 		--v-icon-color: var(--foreground-subdued);
 
 		display: none;
+		margin-left: 8px;
 
 		&:hover {
 			--v-icon-color: var(--danger);
 		}
 	}
 
+	.icon-search,
+	.icon-filter {
+		--v-icon-color-hover: var(--primary);
+	}
+
+	.icon-search {
+		margin: 0 8px;
+		margin-right: 4px;
+	}
+
+	.icon-filter {
+		margin: 0 8px;
+		margin-left: 0;
+	}
+
 	&:hover {
 		border-color: var(--border-normal-alt);
 	}
 
-	&:focus,
-	&:focus-within {
-		border-color: var(--primary);
+	&.has-content {
+		width: 200px;
+
+		.icon-empty {
+			display: block;
+		}
+
+		.icon-filter {
+			margin-left: 0;
+		}
 	}
 
 	&.active {
 		width: 300px;
+		border-color: var(--border-normal);
 
-		.empty {
+		.icon-empty {
 			display: block;
 		}
 	}
 
-	&.has-content {
-		width: 140px;
+	&.filter-active {
+		width: 420px; // blaze it
 
-		&:focus,
-		&:focus-within {
-			width: 300px;
-		}
-
-		.empty {
-			display: block;
+		.icon-filter {
+			--v-icon-color: var(--primary);
 		}
 	}
-}
 
-input {
-	flex-grow: 1;
-	width: 0px;
-	height: 100%;
-	margin: 0;
-	padding: 0;
-	color: var(--foreground-normal);
-	background-color: var(--background-page);
-	border: none;
-	border-radius: 0;
+	&.filter-border {
+		padding-bottom: 2px;
+		border-bottom: none;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+		transition: border-bottom-left-radius none, border-bottom-right-radius none;
 
-	&::placeholder {
-		color: var(--foreground-subdued);
+		&::after {
+			position: absolute;
+			bottom: 0px;
+			left: 0;
+			z-index: -1;
+			width: 100%;
+			height: 2px;
+			background-color: var(--border-subdued);
+			content: '';
+			pointer-events: none;
+		}
+	}
+
+	input {
+		flex-grow: 1;
+		width: 0px;
+		height: 100%;
+		margin: 0;
+		padding: 0;
+		overflow: hidden;
+		color: var(--foreground-normal);
+		text-overflow: ellipsis;
+		background-color: var(--background-page);
+		border: none;
+		border-radius: 0;
+
+		&::placeholder {
+			color: var(--foreground-subdued);
+		}
 	}
 }
 
@@ -132,8 +248,21 @@ input {
 	text-overflow: ellipsis;
 }
 
-.v-icon {
-	margin: 0 8px;
-	cursor: pointer;
+.filter {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	width: 100%;
+	padding: 0;
+	background-color: var(--background-subdued);
+	border: 2px solid var(--border-normal);
+	border-top: 0;
+	border-bottom-right-radius: 22px;
+	border-bottom-left-radius: 22px;
+}
+
+.filter-input {
+	// Use margin instead of padding to make sure transition expand takes it into account
+	margin: 10px 8px;
 }
 </style>
diff --git a/packages/shared/src/composables/use-items.ts b/packages/shared/src/composables/use-items.ts
index 162d7b47ac..f79bb09398 100644
--- a/packages/shared/src/composables/use-items.ts
+++ b/packages/shared/src/composables/use-items.ts
@@ -1,18 +1,11 @@
 import { useApi } from './use-system';
+import axios, { CancelTokenSource } from 'axios';
 import { useCollection } from './use-collection';
-import { Filter, Item } from '../types';
-import { moveInArray, filtersToQuery } from '../utils';
-import { isEqual, orderBy, throttle } from 'lodash';
-import { computed, ComputedRef, nextTick, ref, Ref, watch } from 'vue';
-
-type Query = {
-	limit: Ref<number>;
-	fields: Ref<readonly string[]>;
-	sort: Ref<string>;
-	page: Ref<number>;
-	filters: Ref<readonly Filter[]>;
-	searchQuery: Ref<string | null>;
-};
+import { Item } from '../types';
+import { moveInArray } from '../utils';
+import { isEqual, throttle } from 'lodash';
+import { computed, ComputedRef, ref, Ref, watch, WritableComputedRef, unref } from 'vue';
+import { Query } from '../types/query';
 
 type ManualSortData = {
 	item: string | number;
@@ -30,13 +23,20 @@ type UsableItems = {
 	getItems: () => Promise<void>;
 };
 
-export function useItems(collection: Ref<string | null>, query: Query, fetchOnInit = true): UsableItems {
+type ComputedQuery = {
+	fields: Ref<Query['fields']> | ComputedRef<Query['fields']> | WritableComputedRef<Query['fields']>;
+	limit: Ref<Query['limit']> | ComputedRef<Query['limit']> | WritableComputedRef<Query['limit']>;
+	sort: Ref<Query['sort']> | ComputedRef<Query['sort']> | WritableComputedRef<Query['sort']>;
+	search: Ref<Query['search']> | ComputedRef<Query['search']> | WritableComputedRef<Query['search']>;
+	filter: Ref<Query['filter']> | ComputedRef<Query['filter']> | WritableComputedRef<Query['filter']>;
+	page: Ref<Query['page']> | WritableComputedRef<Query['page']>;
+};
+
+export function useItems(collection: Ref<string | null>, query: ComputedQuery, fetchOnInit = true): UsableItems {
 	const api = useApi();
-	const { primaryKeyField, sortField } = useCollection(collection);
+	const { primaryKeyField } = useCollection(collection);
 
-	let loadingTimeout: number | null = null;
-
-	const { limit, fields, sort, page, filters, searchQuery } = query;
+	const { fields, limit, sort, search, filter, page } = query;
 
 	const endpoint = computed(() => {
 		if (!collection.value) return null;
@@ -54,142 +54,89 @@ export function useItems(collection: Ref<string | null>, query: Query, fetchOnIn
 
 	const totalPages = computed(() => {
 		if (itemCount.value === null) return 1;
-		if (itemCount.value < limit.value) return 1;
-		return Math.ceil(itemCount.value / limit.value);
+		if (itemCount.value < (unref(limit) ?? 100)) return 1;
+		return Math.ceil(itemCount.value / (unref(limit) ?? 100));
 	});
 
+	let currentRequest: CancelTokenSource | null = null;
+	let loadingTimeout: NodeJS.Timeout | null = null;
+
+	const fetchItems = throttle(getItems, 350);
+
 	if (fetchOnInit) {
-		getItems();
+		fetchItems();
 	}
 
 	watch(
-		collection,
+		[collection, limit, sort, search, filter, fields, page],
 		async (after, before) => {
-			if (!before || isEqual(after, before)) {
-				return;
+			if (isEqual(after, before)) return;
+
+			const [newCollection, newLimit, newSort, newSearch, newFilter, _newFields, _newPage] = after;
+			const [oldCollection, oldLimit, oldSort, oldSearch, oldFilter, _oldFields, _oldPage] = before;
+
+			if (!newCollection || !query) return;
+
+			if (newFilter !== oldFilter || newLimit !== oldLimit || newSort !== oldSort || newSearch !== oldSearch) {
+				page.value = 1;
 			}
 
-			// Waiting for the tick here makes sure the query have been adjusted for the new
-			// collection
-			await nextTick();
-			reset();
-			getItems();
+			if (isEqual(newCollection, oldCollection) === false) {
+				reset();
+			}
+
+			fetchItems();
 		},
-		{ immediate: fetchOnInit }
-	);
-
-	watch([page, fields], async (after, before) => {
-		if (!before || isEqual(after, before)) {
-			return;
-		}
-
-		await nextTick();
-		if (loading.value === false) {
-			getItems();
-		}
-	});
-
-	watch(sort, async (after, before) => {
-		if (!before || isEqual(after, before)) {
-			return;
-		}
-
-		// When all items are on page, we only sort locally
-		const hasAllItems = limit.value > (itemCount.value || 0);
-
-		if (hasAllItems) {
-			sortItems(after);
-			return;
-		}
-
-		await nextTick();
-		if (loading.value === false) {
-			getItems();
-		}
-	});
-
-	watch([filters, limit], async (after, before) => {
-		if (!before || isEqual(after, before)) {
-			return;
-		}
-		page.value = 1;
-		await nextTick();
-		if (loading.value === false) {
-			getItems();
-		}
-	});
-
-	watch(
-		searchQuery,
-		throttle(
-			async (after, before) => {
-				if (isEqual(after, before)) {
-					return;
-				}
-				page.value = 1;
-				await nextTick();
-				if (loading.value === false) {
-					getItems();
-				}
-			},
-			500,
-			{ trailing: true }
-		)
+		{ deep: true, immediate: true }
 	);
 
 	return { itemCount, totalCount, items, totalPages, loading, error, changeManualSort, getItems };
 
 	async function getItems() {
-		if (loadingTimeout || !endpoint.value) return;
+		if (!endpoint.value) return;
+
+		currentRequest?.cancel();
+		currentRequest = null;
 
 		error.value = null;
 
-		loadingTimeout = window.setTimeout(() => {
-			loading.value = true;
-		}, 250);
+		if (loadingTimeout) {
+			clearTimeout(loadingTimeout);
+		}
 
-		let fieldsToFetch = [...fields.value];
+		loadingTimeout = setTimeout(() => {
+			loading.value = true;
+		}, 150);
+
+		let fieldsToFetch = [...(unref(fields) ?? [])];
 
 		// Make sure the primary key is always fetched
 		if (
-			fields.value.includes('*') === false &&
+			!unref(fields)?.includes('*') &&
 			primaryKeyField.value &&
 			fieldsToFetch.includes(primaryKeyField.value.field) === false
 		) {
 			fieldsToFetch.push(primaryKeyField.value.field);
 		}
 
-		// Make sure all fields that are used to filter are fetched
-		if (fields.value.includes('*') === false) {
-			filters.value.forEach((filter) => {
-				if (fieldsToFetch.includes((filter as any).field as string) === false) {
-					fieldsToFetch.push((filter as any).field as string);
-				}
-			});
-		}
-
-		// Make sure that the field we're sorting on is fetched
-		if (fields.value.includes('*') === false && sortField.value && sort.value) {
-			const sortFieldKey = sort.value.startsWith('-') ? sort.value.substring(1) : sort.value;
-			if (fieldsToFetch.includes(sortFieldKey) === false) {
-				fieldsToFetch.push(sortFieldKey);
-			}
-		}
-
 		// Filter out fake internal columns. This is (among other things) for a fake $thumbnail m2o field
 		// on directus_files
 		fieldsToFetch = fieldsToFetch.filter((field) => field.startsWith('$') === false);
 
 		try {
+			currentRequest = axios.CancelToken.source();
+
 			const response = await api.get<any>(endpoint.value, {
 				params: {
-					limit: limit.value,
+					limit: unref(limit),
 					fields: fieldsToFetch,
-					sort: sort.value,
-					page: page.value,
-					search: searchQuery.value,
-					...filtersToQuery(filters.value),
+					sort: unref(sort),
+					page: unref(page),
+					search: unref(search),
+					filter: unref(filter),
+					meta: ['filter_count', 'total_count'],
 				},
+				cancelToken: currentRequest.token,
 			});
 
 			let fetchedItems = response.data.data;
@@ -212,51 +159,32 @@ export function useItems(collection: Ref<string | null>, query: Query, fetchOnIn
 			}
 
 			items.value = fetchedItems;
-			itemCount.value = response.data.data.length;
+			totalCount.value = response.data.meta!.total_count!;
+			itemCount.value = response.data.meta!.filter_count!;
 
-			if (fetchedItems.length === 0 && page.value !== 1) {
+			if (page && fetchedItems.length === 0 && page?.value !== 1) {
 				page.value = 1;
 			}
-
-			getItemCount();
 		} catch (err: any) {
-			error.value = err;
+			if (!axios.isCancel(err)) {
+				error.value = err;
+			}
 		} finally {
-			clearTimeout(loadingTimeout);
-			loadingTimeout = null;
+			if (loadingTimeout) {
+				clearTimeout(loadingTimeout);
+				loadingTimeout = null;
+			}
+
 			loading.value = false;
 		}
 	}
 
-	async function getItemCount() {
-		if (!primaryKeyField.value || !endpoint.value) return;
-
-		const response = await api.get<any>(endpoint.value, {
-			params: {
-				limit: 0,
-				fields: primaryKeyField.value.field,
-				meta: ['filter_count', 'total_count'],
-				search: searchQuery.value,
-				...filtersToQuery(filters.value),
-			},
-		});
-
-		totalCount.value = response.data.meta!.total_count!;
-		itemCount.value = response.data.meta!.filter_count!;
-	}
-
 	function reset() {
 		items.value = [];
 		totalCount.value = null;
 		itemCount.value = null;
 	}
 
-	function sortItems(sortBy: string) {
-		const field = sortBy.startsWith('-') ? sortBy.substring(1) : sortBy;
-		const descending = sortBy.startsWith('-');
-		items.value = orderBy(items.value, [field], [descending ? 'desc' : 'asc']);
-	}
-
 	async function changeManualSort({ item, to }: ManualSortData) {
 		const pk = primaryKeyField.value?.field;
 		if (!pk) return;
diff --git a/packages/shared/src/types/filter.ts b/packages/shared/src/types/filter.ts
index d5087692cd..56520bd16e 100644
--- a/packages/shared/src/types/filter.ts
+++ b/packages/shared/src/types/filter.ts
@@ -22,14 +22,15 @@ export type FilterOperator =
 
 export type ClientFilterOperator = FilterOperator | 'starts_with' | 'nstarts_with' | 'ends_with' | 'nends_with';
 
-export type Filter =
-	| {
-			_or: FieldFilter[];
-	  }
-	| {
-			_and: FieldFilter[];
-	  }
-	| FieldFilter;
+export type LogicalFilterOR = {
+	_or: (Filter | FieldFilter)[];
+};
+
+export type LogicalFilterAND = {
+	_and: (Filter | FieldFilter)[];
+};
+
+export type Filter = LogicalFilterOR | LogicalFilterAND | FieldFilter;
 
 export type FieldFilter = {
 	[field: string]: FieldFilterOperator | FieldValidationOperator | FieldFilter;
diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
index 126e5310f6..ac813c6745 100644
--- a/packages/shared/src/types/index.ts
+++ b/packages/shared/src/types/index.ts
@@ -15,6 +15,7 @@ export * from './modules';
 export * from './panels';
 export * from './permissions';
 export * from './presets';
+export * from './query';
 export * from './relations';
 export * from './settings';
 export * from './users';
diff --git a/packages/shared/src/types/layouts.ts b/packages/shared/src/types/layouts.ts
index 4bf36abde8..5e2ab3ff3d 100644
--- a/packages/shared/src/types/layouts.ts
+++ b/packages/shared/src/types/layouts.ts
@@ -1,6 +1,6 @@
 import { Component } from 'vue';
 import { Item } from './items';
-import { AppFilter } from './presets';
+import { Filter } from './filter';
 
 export interface LayoutConfig<Options = any, Query = any> {
 	id: string;
@@ -22,18 +22,17 @@ export interface LayoutProps<Options = any, Query = any> {
 	selection: Item[];
 	layoutOptions: Options;
 	layoutQuery: Query;
-	filters: AppFilter[];
-	searchQuery: string | null;
+	filterUser: Filter | null;
+	filterSystem: Filter | null;
+	filter: Filter | null;
+	search: string | null;
 	selectMode: boolean;
 	readonly: boolean;
 	resetPreset?: () => Promise<void>;
 }
 
 interface LayoutContext {
-	emit: (
-		event: 'update:selection' | 'update:layoutOptions' | 'update:layoutQuery' | 'update:filters' | 'update:searchQuery',
-		...args: any[]
-	) => void;
+	emit: (event: 'update:selection' | 'update:layoutOptions' | 'update:layoutQuery', ...args: any[]) => void;
 }
 
 export type LayoutState<T, Options, Query> = {
diff --git a/packages/shared/src/types/permissions.ts b/packages/shared/src/types/permissions.ts
index 6e2fa8750f..d3db7e91bc 100644
--- a/packages/shared/src/types/permissions.ts
+++ b/packages/shared/src/types/permissions.ts
@@ -1,10 +1,15 @@
+import { Filter } from './filter';
+
+export type PermissionsAction = 'create' | 'read' | 'update' | 'delete' | 'comment' | 'explain';
+
 export type Permission = {
-	id: number;
+	id?: number;
 	role: string | null;
 	collection: string;
-	action: 'create' | 'read' | 'update' | 'delete';
-	permissions: Record<string, any> | null;
-	validation: Record<string, any> | null;
+	action: PermissionsAction;
+	permissions: Filter | null;
+	validation: Filter | null;
 	presets: Record<string, any> | null;
 	fields: string[] | null;
+	system?: true;
 };
diff --git a/packages/shared/src/types/presets.ts b/packages/shared/src/types/presets.ts
index 165312bdbd..0954fe691c 100644
--- a/packages/shared/src/types/presets.ts
+++ b/packages/shared/src/types/presets.ts
@@ -1,12 +1,4 @@
-import { FilterOperator } from './filter';
-
-export type AppFilter = {
-	key: string;
-	field: string;
-	operator: FilterOperator;
-	value: string;
-	locked?: boolean;
-};
+import { Filter } from './filter';
 
 export type Preset = {
 	id?: number;
@@ -15,7 +7,7 @@ export type Preset = {
 	role: string | null;
 	collection: string;
 	search: string | null;
-	filters: readonly AppFilter[] | null;
+	filter: Filter | null;
 	layout: string | null;
 	layout_query: { [layout: string]: any } | null;
 	layout_options: { [layout: string]: any } | null;
diff --git a/packages/shared/src/types/query.ts b/packages/shared/src/types/query.ts
new file mode 100644
index 0000000000..506ae82d24
--- /dev/null
+++ b/packages/shared/src/types/query.ts
@@ -0,0 +1,30 @@
+import { Filter } from './filter';
+
+export type Query = {
+	fields?: string[] | null;
+	sort?: string[] | null;
+	filter?: Filter | null;
+	limit?: number | null;
+	offset?: number | null;
+	page?: number | null;
+	search?: string | null;
+	export?: 'json' | 'csv' | 'xml' | null;
+	group?: string[] | null;
+	aggregate?: Aggregate | null;
+	deep?: Record<string, Query> | null;
+	alias?: Record<string, string> | null;
+};
+
+/**
+ * Aggregate operation. Contains column name, and the field alias it should be returned as
+ */
+export type Aggregate = {
+	avg?: string[];
+	avgDistinct?: string[];
+	count?: string[];
+	countDistinct?: string[];
+	sum?: string[];
+	sumDistinct?: string[];
+	min?: string[];
+	max?: string[];
+};
diff --git a/packages/shared/src/utils/filters-to-query.test.ts b/packages/shared/src/utils/filters-to-query.test.ts
deleted file mode 100644
index 40b0402df3..0000000000
--- a/packages/shared/src/utils/filters-to-query.test.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { filtersToQuery } from './filters-to-query';
-import { Filter } from '../types/filter';
-
-describe('filtersToQuery', () => {
-	it('converts an array of filter fields to a filter object ', () => {
-		const mockFilters = [{ _and: [{ field: 'field' }], _or: [{ filter: 'field' }] }] as readonly Filter[];
-		expect(filtersToQuery(mockFilters)).toStrictEqual({ filter: {} });
-	});
-});
diff --git a/packages/shared/src/utils/filters-to-query.ts b/packages/shared/src/utils/filters-to-query.ts
deleted file mode 100644
index 3d2024fb06..0000000000
--- a/packages/shared/src/utils/filters-to-query.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Filter } from '../types';
-import { clone } from 'lodash';
-
-export function filtersToQuery(filters: readonly Filter[]): { filter: Record<string, any> } {
-	const filterList: Record<string, any>[] = [];
-
-	for (const filter of filters) {
-		const { field, operator } = clone(filter) as any;
-		let { value } = clone(filter) as any;
-
-		if (['empty', 'nempty', 'null', 'nnull'].includes(operator)) {
-			value = true;
-		}
-
-		if (value === undefined) continue;
-
-		if (field.includes('.')) {
-			let filter: Record<string, any> = { [`_${operator}`]: value };
-			const path = field.split('.');
-
-			for (const field of path.reverse()) {
-				filter = { [field]: filter };
-			}
-
-			filterList.push(filter);
-		} else {
-			filterList.push({ [field]: { [`_${operator}`]: value } });
-		}
-	}
-
-	let filterQuery: Record<string, any> = {};
-
-	if (filterList.length === 1 && filterList[0] !== undefined) {
-		filterQuery = filterList[0];
-	} else if (filterList.length > 1) {
-		filterQuery = { _and: filterList };
-	}
-
-	return { filter: filterQuery };
-}
diff --git a/packages/shared/src/utils/index.ts b/packages/shared/src/utils/index.ts
index 26617fc77a..71464f11b6 100644
--- a/packages/shared/src/utils/index.ts
+++ b/packages/shared/src/utils/index.ts
@@ -1,12 +1,12 @@
 export * from './adjust-date';
 export * from './deep-map';
 export * from './define-extension';
-export * from './filters-to-query';
 export * from './generate-joi';
 export * from './get-fields-from-template';
 export * from './get-filter-operators-for-type';
 export * from './get-relation-type';
 export * from './is-extension';
+export * from './merge-filters';
 export * from './move-in-array';
 export * from './parse-filter';
 export * from './pluralize';
diff --git a/packages/shared/src/utils/merge-filters.test.ts b/packages/shared/src/utils/merge-filters.test.ts
new file mode 100644
index 0000000000..200e28a0fd
--- /dev/null
+++ b/packages/shared/src/utils/merge-filters.test.ts
@@ -0,0 +1,29 @@
+import { mergeFilters } from './merge-filters';
+
+describe('merge filters', () => {
+	it('defaults to A when B is null', () => {
+		const A = {};
+		const B = null;
+		expect(mergeFilters(A, B)).toEqual(A);
+	});
+
+	it('defaults to B when A is null', () => {
+		const A = null;
+		const B = {};
+		expect(mergeFilters(A, B)).toEqual(B);
+	});
+
+	it('merges with an _and by default', () => {
+		const A = { a: { _eq: 1 } };
+		const B = { b: { _eq: 2 } };
+
+		expect(mergeFilters(A, B)).toStrictEqual({ _and: [A, B] });
+	});
+
+	it('allows merging on _or with a parameter', () => {
+		const A = { a: { _eq: 1 } };
+		const B = { b: { _eq: 2 } };
+
+		expect(mergeFilters(A, B, 'or')).toStrictEqual({ _or: [A, B] });
+	});
+});
diff --git a/packages/shared/src/utils/merge-filters.ts b/packages/shared/src/utils/merge-filters.ts
new file mode 100644
index 0000000000..9e36d54f31
--- /dev/null
+++ b/packages/shared/src/utils/merge-filters.ts
@@ -0,0 +1,14 @@
+import { Filter, LogicalFilterOR, LogicalFilterAND } from '../types/filter';
+
+export function mergeFilters(
+	filterA: Filter | null,
+	filterB: Filter | null,
+	strategy: 'and' | 'or' = 'and'
+): Filter | null {
+	if (!filterA) return filterB;
+	if (!filterB) return filterA;
+
+	return {
+		[`_${strategy}`]: [filterA, filterB],
+	} as LogicalFilterAND | LogicalFilterOR;
+}
diff --git a/packages/shared/src/utils/parse-filter.ts b/packages/shared/src/utils/parse-filter.ts
index afb9fcac2f..5d8b4f88c6 100644
--- a/packages/shared/src/utils/parse-filter.ts
+++ b/packages/shared/src/utils/parse-filter.ts
@@ -4,7 +4,9 @@ import { toArray } from './to-array';
 import { adjustDate } from './adjust-date';
 import { deepMap } from './deep-map';
 
-export function parseFilter(filter: Filter, accountability: Accountability | null): any {
+export function parseFilter(filter: Filter | null, accountability: Accountability | null): any {
+	if (!filter) return filter;
+
 	return deepMap(filter, applyFilter);
 
 	function applyFilter(val: any, key: string | number) {