Render global rules under globals rule in theme overrides interface (#20280)

* Render globals as collapsable section

Fixes #20279

* Add changeset

.changeset/quick-news-wash.md

@@ -0,0 +1,5 @@
+---
+'@directus/app': minor
+---
+
+Improved the theme rules overrides interface by rendering the global rules under a new "globals" key

app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-group.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { isPlainObject } from 'lodash';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import SystemThemeOverridesRule from './system-theme-overrides-rule.vue';
 import type { SetValueFn } from './types.js';
 
@@ -8,7 +8,7 @@ defineOptions({
 	name: 'SystemThemeOverridesGroup',
 });
 
-defineProps<{
+const props = defineProps<{
 	rules: Record<string, unknown>;
 	group?: string;
 	root?: boolean;
@@ -18,6 +18,15 @@ defineProps<{
 }>();
 
 const collapsed = ref(true);
+
+const rulesGrouped = computed(() => {
+	if (!props.root) return props.rules;
+
+	return {
+		$root: Object.fromEntries(Object.entries(props.rules).filter(([_key, value]) => isPlainObject(value) === false)),
+		...Object.fromEntries(Object.entries(props.rules).filter(([_key, value]) => isPlainObject(value))),
+	};
+});
 </script>
 
 <template>
@@ -28,20 +37,20 @@ const collapsed = ref(true);
 			:class="{ collapsed, 'has-value': !!value }"
 			@click="collapsed = !collapsed"
 		>
-			<span>{{ group }}</span>
+			<span>{{ group ?? 'globals' }}</span>
 			<v-icon class="icon" name="expand_more" small />
 		</button>
 
 		<transition-expand>
 			<div v-if="root || !collapsed" class="group-contents">
-				<template v-for="(ruleValue, ruleKey) in rules" :key="ruleKey">
+				<template v-for="(ruleValue, ruleKey) in rulesGrouped" :key="ruleKey">
 					<system-theme-overrides-group
 						v-if="isPlainObject(ruleValue)"
-						:group="ruleKey"
+						:group="ruleKey === '$root' ? undefined : ruleKey"
 						:rules="(ruleValue as Record<string, unknown>)"
-						:value="(value?.[ruleKey] as Record<string, unknown> | undefined)"
+						:value="ruleKey === '$root' ? value : (value?.[ruleKey] as Record<string, unknown> | undefined)"
 						:set="set"
-						:path="[...path, ruleKey]"
+						:path="ruleKey === '$root' ? path : [...path, ruleKey]"
 					/>
 
 					<system-theme-overrides-rule

app/src/interfaces/_system/system-theme-overrides/system-theme-overrides.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useThemeConfiguration } from '@/composables/use-theme-configuration';
 import { Theme, useTheme } from '@directus/themes';
-import { clone, setWith, unset, isEmpty, get } from 'lodash';
+import { clone, get, isEmpty, setWith, unset } from 'lodash';
 import SystemThemeOverridesGroup from './system-theme-overrides-group.vue';
 import type { SetValueFn } from './types.js';