Add new field flow (#9109)

* Add new grouping setup to interfaces

* [WIP] Start on new field flow

* Add preview svgs

* Update preview svg

* Add basic saving mechanism. Start on magic

* Add interface options to simple inputs

* Fix missing t

* Fix custom options not rendering

* Fix interface options overrides

* Sync m2o name key

* Setup m2o related collection input

* Add collections generation

* Add circular prevention & type syncing

* Small fixes in m2o context generation

* Move o2m options to fn structure

* Conclude o2m (i think)

* Start on toggle to advanced

* Style advanced toggle button

* Add localType File support, start documenting

* Add presentation/group localtypes

* Use function style interface options in m2m

* Don't require collection prop in field template component

* Implement most of m2m magic

* Restructure store updater

* Finish useFieldDetailStore restructure

* Only register root index in module folders

* Do the thing

* Finish m2m magic, tweak fallback styles

* Fix o2m display template setup

* Remove options comp for translations interface

* Show languages collection picker in translations

* Finish translations alterations

* Add magic for files type

* Officially wave goodbye to the old store setup

It served it's purpose, but what a nightmare to maintain. Welcome to the new version

* Update schema tab

* Add field pane

* Finish interface section

* Add display section

* Add conditions

* Update tabs to use localType from store

* Start on relationship tab

* Update m2m relational setup

* Start on m2o

* Finish m2o setup

* Finish o2m setup

* Add m2a magic

* Various tweaks

* Add m2a setup

* Add save button to advanced flow

* Load existing values on start

* Add upsert to stores, allow updating existing items

* Please the linter gods

* Remove seemingly redundant interface option

@Oreilles Seeing the geometry type is already configured in the schema configuration, this particular option on the interface feels redundant (?)

* Remove unnecessary option component overrides

* Track relationships in required fields for save state

* Fix relations previews on editing existing fields

* Use standard vs advanced for input options

* Remove note from simple field setup

* Add divider to field config

* Use background subdued

* Default required to false

* Add required icons to key/relationship

* Tweak colors

* Fix infinite loop in group creation

* Make setup responsive

* Allow switching interface at will

* Add m2a related collections picker

* Fix relations persisting on field deletion

* Add "Create in Advanced" shortcut

Just for you @joselcvarela

* Fix PK field staging on collection create

* Revert "Remove seemingly redundant interface option"

This reverts commit e5e09a051e.

* Fix map interface options

app/src/interfaces/input-code/index.ts

@@ -2,6 +2,7 @@ import { defineInterface } from '@directus/shared/utils';
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/meta';
 import InterfaceCode from './input-code.vue';
+import PreviewSVG from './preview.svg?raw';
 
 const choicesMap = CodeMirror.modeInfo.reduce((acc: Record<string, string>, choice) => {
 	if (['JSON', 'JSON-LD'].includes(choice.name)) {
@@ -34,6 +35,8 @@ export default defineInterface({
 	icon: 'code',
 	component: InterfaceCode,
 	types: ['string', 'json', 'text', 'geometry'],
+	group: 'standard',
+	preview: PreviewSVG,
 	options: [
 		{
 			field: 'language',

app/src/interfaces/input-code/preview.svg

@@ -0,0 +1,14 @@
+<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="18" y="15" width="120" height="66" rx="6" fill="var(--background-page)" class="glow" />
+	<rect x="19" y="16" width="118" height="64" rx="5" stroke="var(--primary)" stroke-width="2" />
+	<rect x="28" y="25" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="45.148" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="55.222" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="65.296" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="28" y="35.074" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="42" y="25" width="10" height="6" rx="2" fill="var(--primary)" />
+	<rect x="46" y="35" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="46" y="45" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="46" y="55" width="40" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
+	<rect x="42" y="65" width="10" height="6" rx="2" fill="var(--primary)" />
+</svg>