From ff4f7fde60f444a8717bbaea647de23bcbd22542 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Tue, 31 Oct 2023 15:42:17 -0400
Subject: [PATCH] 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                 |  5 ++++
 .../system-theme-overrides-group.vue          | 23 +++++++++++++------
 .../system-theme-overrides.vue                |  2 +-
 3 files changed, 22 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/quick-news-wash.md

diff --git a/.changeset/quick-news-wash.md b/.changeset/quick-news-wash.md
new file mode 100644
index 0000000000..f681423b08
--- /dev/null
+++ b/.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
diff --git a/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-group.vue b/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-group.vue
index e1f9982ea0..35d5440277 100644
--- a/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides-group.vue
+++ b/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
diff --git a/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides.vue b/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides.vue
index 0c871d631c..e7b885b281 100644
--- a/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides.vue
+++ b/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';