diff --git a/api/package.json b/api/package.json
index dee8d28a46..4773f11fef 100644
--- a/api/package.json
+++ b/api/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "directus",
-	"version": "9.14.3",
+	"version": "9.14.5",
 	"license": "GPL-3.0-only",
 	"homepage": "https://github.com/directus/directus#readme",
 	"description": "Directus is a real-time API and App dashboard for managing SQL database content.",
diff --git a/api/src/services/graphql/index.ts b/api/src/services/graphql/index.ts
index 77b9322ca5..bce34f6d4b 100644
--- a/api/src/services/graphql/index.ts
+++ b/api/src/services/graphql/index.ts
@@ -1250,7 +1250,7 @@ export class GraphQLService {
 		if (!selections) return null;
 		const args: Record<string, any> = this.parseArgs(info.fieldNodes[0].arguments || [], info.variableValues);
 
-		let query: Record<string, any>;
+		let query: Query;
 
 		const isAggregate = collection.endsWith('_aggregated') && collection in this.schema.collections === false;
 
@@ -1280,13 +1280,15 @@ export class GraphQLService {
 		}
 
 		// Transform count(a.b.c) into a.b.count(c)
-		for (let fieldIndex = 0; fieldIndex < query.fields.length; fieldIndex++) {
-			if (query.fields[fieldIndex].includes('(') && query.fields[fieldIndex].includes(')')) {
-				const functionName = query.fields[fieldIndex].split('(')[0];
-				const columnNames = query.fields[fieldIndex].match(REGEX_BETWEEN_PARENS)![1].split('.');
-				if (columnNames.length > 1) {
-					const column = columnNames.pop();
-					query.fields[fieldIndex] = columnNames.join('.') + '.' + functionName + '(' + column + ')';
+		if (query.fields?.length) {
+			for (let fieldIndex = 0; fieldIndex < query.fields.length; fieldIndex++) {
+				if (query.fields[fieldIndex].includes('(') && query.fields[fieldIndex].includes(')')) {
+					const functionName = query.fields[fieldIndex].split('(')[0];
+					const columnNames = query.fields[fieldIndex].match(REGEX_BETWEEN_PARENS)![1].split('.');
+					if (columnNames.length > 1) {
+						const column = columnNames.pop();
+						query.fields[fieldIndex] = columnNames.join('.') + '.' + functionName + '(' + column + ')';
+					}
 				}
 			}
 		}
diff --git a/app/package.json b/app/package.json
index 8ea5761992..862bc8b517 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@directus/app",
-	"version": "9.14.3",
+	"version": "9.14.5",
 	"private": false,
 	"description": "Directus is an Open-Source Headless CMS & API for Managing Custom Databases",
 	"author": "Rijk van Zanten <rijkvanzanten@me.com>",
diff --git a/app/src/api.ts b/app/src/api.ts
index 174e75ca1c..23c9a46ee6 100644
--- a/app/src/api.ts
+++ b/app/src/api.ts
@@ -1,5 +1,5 @@
 import { logout, LogoutReason, refresh } from '@/auth';
-import { useRequestsStore } from '@/stores/';
+import { useRequestsStore } from '@/stores/requests';
 import { getRootPath } from '@/utils/get-root-path';
 import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
 import { addQueryToPath } from './utils/add-query-to-path';
diff --git a/app/src/app.vue b/app/src/app.vue
index b20d92cad5..b0836d0e1a 100644
--- a/app/src/app.vue
+++ b/app/src/app.vue
@@ -23,11 +23,13 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, toRefs, watch, computed, onMounted, onUnmounted, StyleValue } from 'vue';
-import { useAppStore, useUserStore, useServerStore } from '@/stores';
+import { useAppStore } from '@/stores/app';
+import { useUserStore } from '@/stores/user';
+import { useServerStore } from '@/stores/server';
 import { startIdleTracking, stopIdleTracking } from './idle';
-import useSystem from '@/composables/use-system';
+import { useSystem } from '@/composables/use-system';
 
-import setFavicon from '@/utils/set-favicon';
+import { setFavicon } from '@/utils/set-favicon';
 import { User } from '@directus/shared/types';
 
 export default defineComponent({
diff --git a/app/src/views/private/components/module-bar-logo/sprite.svg b/app/src/assets/sprite.svg
similarity index 100%
rename from app/src/views/private/components/module-bar-logo/sprite.svg
rename to app/src/assets/sprite.svg
diff --git a/app/src/auth.ts b/app/src/auth.ts
index 598079db39..289340b62f 100644
--- a/app/src/auth.ts
+++ b/app/src/auth.ts
@@ -1,7 +1,7 @@
 import api from '@/api';
 import { dehydrate, hydrate } from '@/hydrate';
 import { router } from '@/router';
-import { useAppStore } from '@/stores';
+import { useAppStore } from '@/stores/app';
 import { RouteLocationRaw } from 'vue-router';
 import { idleTracker } from './idle';
 import { DEFAULT_AUTH_PROVIDER } from '@/constants';
diff --git a/app/src/components/register.ts b/app/src/components/register.ts
index 472436dfde..d7820574a2 100644
--- a/app/src/components/register.ts
+++ b/app/src/components/register.ts
@@ -1,59 +1,72 @@
 import ExportSidebarDetail from '@/views/private/components/export-sidebar-detail.vue';
-import RenderDisplay from '@/views/private/components/render-display';
-import RenderTemplate from '@/views/private/components/render-template';
-import SidebarDetail from '@/views/private/components/sidebar-detail/';
-import UserPopover from '@/views/private/components/user-popover';
-import ValueNull from '@/views/private/components/value-null';
-import DocsWrapper from '@/views/private/components/docs-wrapper';
+import RenderDisplay from '@/views/private/components/render-display.vue';
+import RenderTemplate from '@/views/private/components/render-template.vue';
+import SidebarDetail from '@/views/private/components/sidebar-detail.vue';
+import UserPopover from '@/views/private/components/user-popover.vue';
+import ValueNull from '@/views/private/components/value-null.vue';
+import DocsWrapper from '@/views/private/components/docs-wrapper.vue';
 import { App } from 'vue';
 import TransitionBounce from './transition/bounce';
 import TransitionDialog from './transition/dialog';
 import TransitionExpand from './transition/expand';
-import VAvatar from './v-avatar/';
-import VBadge from './v-badge/';
-import VBreadcrumb from './v-breadcrumb';
-import VButton from './v-button/';
-import VCard, { VCardActions, VCardSubtitle, VCardText, VCardTitle } from './v-card';
-import VCheckbox from './v-checkbox/';
-import VCheckboxTree from './v-checkbox-tree/';
-import VChip from './v-chip/';
-import VDetail from './v-detail';
-import VDialog from './v-dialog';
-import VDivider from './v-divider';
-import VDrawer from './v-drawer/';
-import VError from './v-error';
-import VFancySelect from './v-fancy-select';
-import VFieldTemplate from './v-field-template';
+import VAvatar from './v-avatar.vue';
+import VBadge from './v-badge.vue';
+import VBreadcrumb from './v-breadcrumb.vue';
+import VButton from './v-button.vue';
+import VCard from './v-card.vue';
+import VCardActions from './v-card-actions.vue';
+import VCardSubtitle from './v-card-subtitle.vue';
+import VCardText from './v-card-text.vue';
+import VCardTitle from './v-card-title.vue';
+import VCheckbox from './v-checkbox.vue';
+import VCheckboxTree from './v-checkbox-tree/v-checkbox-tree.vue';
+import VChip from './v-chip.vue';
+import VDetail from './v-detail.vue';
+import VDialog from './v-dialog.vue';
+import VDivider from './v-divider.vue';
+import VDrawer from './v-drawer.vue';
+import VError from './v-error.vue';
+import VFancySelect from './v-fancy-select.vue';
+import VFieldTemplate from './v-field-template/v-field-template.vue';
 import VFieldList from './v-field-list/v-field-list.vue';
-import VForm from './v-form';
-import VHover from './v-hover/';
+import VForm from './v-form/v-form.vue';
+import VHover from './v-hover.vue';
 import VHighlight from './v-highlight.vue';
-import VIcon from './v-icon/';
+import VIcon from './v-icon/v-icon.vue';
 import VImage from './v-image.vue';
 import VIconFile from './v-icon-file.vue';
-import VInfo from './v-info/';
-import VInput from './v-input/';
-import VItemGroup, { VItem } from './v-item-group';
-import VList, { VListGroup, VListItem, VListItemContent, VListItemHint, VListItemIcon } from './v-list/';
-import VMenu from './v-menu/';
-import VNotice from './v-notice/';
-import VOverlay from './v-overlay/';
-import VPagination from './v-pagination/';
-import VProgressCircular from './v-progress/circular/';
-import VProgressLinear from './v-progress/linear/';
-import VRadio from './v-radio/';
-import VSelect from './v-select/';
-import VSheet from './v-sheet/';
-import VSkeletonLoader from './v-skeleton-loader/';
-import VSlider from './v-slider/';
-import VSwitch from './v-switch/';
-import VTable from './v-table/';
-import VTabs, { VTab, VTabItem, VTabsItems } from './v-tabs/';
+import VInfo from './v-info.vue';
+import VInput from './v-input.vue';
+import VItemGroup from './v-item-group.vue';
+import VItem from './v-item.vue';
+import VList from './v-list.vue';
+import VListGroup from './v-list-group.vue';
+import VListItem from './v-list-item.vue';
+import VListItemContent from './v-list-item-content.vue';
+import VListItemHint from './v-list-item-hint.vue';
+import VListItemIcon from './v-list-item-icon.vue';
+import VMenu from './v-menu.vue';
+import VNotice from './v-notice.vue';
+import VOverlay from './v-overlay.vue';
+import VPagination from './v-pagination.vue';
+import VProgressCircular from './v-progress-circular.vue';
+import VProgressLinear from './v-progress-linear.vue';
+import VRadio from './v-radio.vue';
+import VSelect from './v-select/v-select.vue';
+import VSheet from './v-sheet.vue';
+import VSkeletonLoader from './v-skeleton-loader.vue';
+import VSlider from './v-slider.vue';
+import VSwitch from './v-switch.vue';
+import VTable from './v-table/v-table.vue';
+import VTabs from './v-tabs.vue';
+import VTab from './v-tab.vue';
+import VTabItem from './v-tab-item.vue';
+import VTabsItems from './v-tabs-items.vue';
 import VTemplateInput from './v-template-input.vue';
 import VTextOverflow from './v-text-overflow.vue';
-import VTextarea from './v-textarea';
-import VUpload from './v-upload';
-import VDatePicker from './v-date-picker';
+import VTextarea from './v-textarea.vue';
+import VUpload from './v-upload.vue';
+import VDatePicker from './v-date-picker.vue';
 import VEmojiPicker from './v-emoji-picker.vue';
 import VWorkspace from './v-workspace.vue';
 import VWorkspaceTile from './v-workspace-tile.vue';
diff --git a/app/src/components/transition/expand/transition-expand-methods.ts b/app/src/components/transition/expand/transition-expand-methods.ts
index 2922283383..c028b67614 100644
--- a/app/src/components/transition/expand/transition-expand-methods.ts
+++ b/app/src/components/transition/expand/transition-expand-methods.ts
@@ -1,4 +1,4 @@
-import capitalizeFirst from '@/utils/capitalize-first';
+import { capitalizeFirst } from '@/utils/capitalize-first';
 
 interface HTMLExpandElement extends HTMLElement {
 	_parent?: (Node & ParentNode & HTMLElement) | null;
diff --git a/app/src/components/v-avatar/v-avatar.vue b/app/src/components/v-avatar.vue
similarity index 94%
rename from app/src/components/v-avatar/v-avatar.vue
rename to app/src/components/v-avatar.vue
index b4a801c653..d467cfb46f 100644
--- a/app/src/components/v-avatar/v-avatar.vue
+++ b/app/src/components/v-avatar.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import useSizeClass, { sizeProps } from '@/composables/size-class';
+import { useSizeClass, sizeProps } from '@/composables/use-size-class';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-avatar/index.ts b/app/src/components/v-avatar/index.ts
deleted file mode 100644
index 573eafcb91..0000000000
--- a/app/src/components/v-avatar/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VAvatar from './v-avatar.vue';
-
-export { VAvatar };
-export default VAvatar;
diff --git a/app/src/components/v-badge/v-badge.vue b/app/src/components/v-badge.vue
similarity index 100%
rename from app/src/components/v-badge/v-badge.vue
rename to app/src/components/v-badge.vue
diff --git a/app/src/components/v-badge/index.ts b/app/src/components/v-badge/index.ts
deleted file mode 100644
index 3911de41db..0000000000
--- a/app/src/components/v-badge/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VBadge from './v-badge.vue';
-
-export { VBadge };
-export default VBadge;
diff --git a/app/src/components/v-breadcrumb/v-breadcrumb.vue b/app/src/components/v-breadcrumb.vue
similarity index 100%
rename from app/src/components/v-breadcrumb/v-breadcrumb.vue
rename to app/src/components/v-breadcrumb.vue
diff --git a/app/src/components/v-breadcrumb/index.ts b/app/src/components/v-breadcrumb/index.ts
deleted file mode 100644
index 17d6908fb2..0000000000
--- a/app/src/components/v-breadcrumb/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VBreadcrumb from './v-breadcrumb.vue';
-
-export { VBreadcrumb };
-export default VBreadcrumb;
diff --git a/app/src/components/v-button/v-button.vue b/app/src/components/v-button.vue
similarity index 98%
rename from app/src/components/v-button/v-button.vue
rename to app/src/components/v-button.vue
index eea09280e6..6d02b1f0a3 100644
--- a/app/src/components/v-button/v-button.vue
+++ b/app/src/components/v-button.vue
@@ -41,8 +41,8 @@
 <script lang="ts">
 import { defineComponent, computed, PropType } from 'vue';
 import { RouteLocation, useRoute, useLink } from 'vue-router';
-import useSizeClass, { sizeProps } from '@/composables/size-class';
-import { useGroupable } from '@/composables/groupable';
+import { useSizeClass, sizeProps } from '@/composables/use-size-class';
+import { useGroupable } from '@/composables/use-groupable';
 import { notEmpty } from '@/utils/is-empty';
 import { isEqual } from 'lodash';
 
diff --git a/app/src/components/v-button/index.ts b/app/src/components/v-button/index.ts
deleted file mode 100644
index c649b63005..0000000000
--- a/app/src/components/v-button/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VButton from './v-button.vue';
-
-export { VButton };
-export default VButton;
diff --git a/app/src/components/v-card/v-card-actions.vue b/app/src/components/v-card-actions.vue
similarity index 100%
rename from app/src/components/v-card/v-card-actions.vue
rename to app/src/components/v-card-actions.vue
diff --git a/app/src/components/v-card/v-card-subtitle.vue b/app/src/components/v-card-subtitle.vue
similarity index 100%
rename from app/src/components/v-card/v-card-subtitle.vue
rename to app/src/components/v-card-subtitle.vue
diff --git a/app/src/components/v-card/v-card-text.vue b/app/src/components/v-card-text.vue
similarity index 100%
rename from app/src/components/v-card/v-card-text.vue
rename to app/src/components/v-card-text.vue
diff --git a/app/src/components/v-card/v-card-title.vue b/app/src/components/v-card-title.vue
similarity index 100%
rename from app/src/components/v-card/v-card-title.vue
rename to app/src/components/v-card-title.vue
diff --git a/app/src/components/v-card/v-card.vue b/app/src/components/v-card.vue
similarity index 100%
rename from app/src/components/v-card/v-card.vue
rename to app/src/components/v-card.vue
diff --git a/app/src/components/v-card/index.ts b/app/src/components/v-card/index.ts
deleted file mode 100644
index 63f0acc7e1..0000000000
--- a/app/src/components/v-card/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import VCardActions from './v-card-actions.vue';
-import VCardSubtitle from './v-card-subtitle.vue';
-import VCardText from './v-card-text.vue';
-import VCardTitle from './v-card-title.vue';
-import VCard from './v-card.vue';
-
-export { VCard, VCardTitle, VCardSubtitle, VCardActions, VCardText };
-export default VCard;
diff --git a/app/src/components/v-checkbox-tree/index.ts b/app/src/components/v-checkbox-tree/index.ts
deleted file mode 100644
index e6d2642ec6..0000000000
--- a/app/src/components/v-checkbox-tree/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VCheckboxTree from './v-checkbox-tree.vue';
-
-export { VCheckboxTree };
-export default VCheckboxTree;
diff --git a/app/src/components/v-checkbox/v-checkbox.vue b/app/src/components/v-checkbox.vue
similarity index 100%
rename from app/src/components/v-checkbox/v-checkbox.vue
rename to app/src/components/v-checkbox.vue
diff --git a/app/src/components/v-checkbox/index.ts b/app/src/components/v-checkbox/index.ts
deleted file mode 100644
index b6c9fbb95c..0000000000
--- a/app/src/components/v-checkbox/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VCheckbox from './v-checkbox.vue';
-
-export { VCheckbox };
-export default VCheckbox;
diff --git a/app/src/components/v-chip/v-chip.vue b/app/src/components/v-chip.vue
similarity index 98%
rename from app/src/components/v-chip/v-chip.vue
rename to app/src/components/v-chip.vue
index 7494a364dd..5c08923d75 100644
--- a/app/src/components/v-chip/v-chip.vue
+++ b/app/src/components/v-chip.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed } from 'vue';
-import useSizeClass, { sizeProps } from '@/composables/size-class';
+import { useSizeClass, sizeProps } from '@/composables/use-size-class';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-chip/index.ts b/app/src/components/v-chip/index.ts
deleted file mode 100644
index 587e4a84a2..0000000000
--- a/app/src/components/v-chip/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VChip from './v-chip.vue';
-
-export { VChip };
-export default VChip;
diff --git a/app/src/components/v-date-picker/v-date-picker.vue b/app/src/components/v-date-picker.vue
similarity index 97%
rename from app/src/components/v-date-picker/v-date-picker.vue
rename to app/src/components/v-date-picker.vue
index 72d4661245..cfa5453655 100644
--- a/app/src/components/v-date-picker/v-date-picker.vue
+++ b/app/src/components/v-date-picker.vue
@@ -151,11 +151,6 @@ export default defineComponent({
 });
 </script>
 
-<style>
-@import 'flatpickr/dist/flatpickr.css';
-@import './flatpickr-overrides.css';
-</style>
-
 <style lang="scss" scoped>
 .v-date-picker {
 	.input {
diff --git a/app/src/components/v-date-picker/index.ts b/app/src/components/v-date-picker/index.ts
deleted file mode 100644
index c1e55d991f..0000000000
--- a/app/src/components/v-date-picker/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VDatePicker from './v-date-picker.vue';
-
-export { VDatePicker };
-export default VDatePicker;
diff --git a/app/src/components/v-detail/v-detail.vue b/app/src/components/v-detail.vue
similarity index 100%
rename from app/src/components/v-detail/v-detail.vue
rename to app/src/components/v-detail.vue
diff --git a/app/src/components/v-detail/index.ts b/app/src/components/v-detail/index.ts
deleted file mode 100644
index 151eae0a6a..0000000000
--- a/app/src/components/v-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VDetail from './v-detail.vue';
-
-export { VDetail };
-export default VDetail;
diff --git a/app/src/components/v-dialog/v-dialog.vue b/app/src/components/v-dialog.vue
similarity index 98%
rename from app/src/components/v-dialog/v-dialog.vue
rename to app/src/components/v-dialog.vue
index 9b29841346..e336f04bc7 100644
--- a/app/src/components/v-dialog/v-dialog.vue
+++ b/app/src/components/v-dialog.vue
@@ -21,7 +21,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed } from 'vue';
 import { nanoid } from 'nanoid';
-import useShortcut from '@/composables/use-shortcut';
+import { useShortcut } from '@/composables/use-shortcut';
 import { useDialogRouteLeave } from '@/composables/use-dialog-route';
 
 export default defineComponent({
diff --git a/app/src/components/v-dialog/index.ts b/app/src/components/v-dialog/index.ts
deleted file mode 100644
index 152b352590..0000000000
--- a/app/src/components/v-dialog/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VDialog from './v-dialog.vue';
-
-export { VDialog };
-export default VDialog;
diff --git a/app/src/components/v-divider/v-divider.vue b/app/src/components/v-divider.vue
similarity index 100%
rename from app/src/components/v-divider/v-divider.vue
rename to app/src/components/v-divider.vue
diff --git a/app/src/components/v-divider/index.ts b/app/src/components/v-divider/index.ts
deleted file mode 100644
index b462504cae..0000000000
--- a/app/src/components/v-divider/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VDivider from './v-divider.vue';
-
-export { VDivider };
-export default VDivider;
diff --git a/app/src/components/v-drawer/v-drawer.vue b/app/src/components/v-drawer.vue
similarity index 98%
rename from app/src/components/v-drawer/v-drawer.vue
rename to app/src/components/v-drawer.vue
index 6414b2b1ec..1cfd8bccb6 100644
--- a/app/src/components/v-drawer/v-drawer.vue
+++ b/app/src/components/v-drawer.vue
@@ -63,7 +63,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, computed, provide } from 'vue';
-import HeaderBar from '@/views/private/components/header-bar/header-bar.vue';
+import HeaderBar from '@/views/private/components/header-bar.vue';
 import { i18n } from '@/lang';
 
 export default defineComponent({
diff --git a/app/src/components/v-drawer/index.ts b/app/src/components/v-drawer/index.ts
deleted file mode 100644
index 789569bf51..0000000000
--- a/app/src/components/v-drawer/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VDrawer from './v-drawer.vue';
-
-export { VDrawer };
-export default VDrawer;
diff --git a/app/src/components/v-error/v-error.vue b/app/src/components/v-error.vue
similarity index 96%
rename from app/src/components/v-error/v-error.vue
rename to app/src/components/v-error.vue
index e16d1dd159..4fce9374e7 100644
--- a/app/src/components/v-error/v-error.vue
+++ b/app/src/components/v-error.vue
@@ -17,7 +17,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, PropType, ref } from 'vue';
 import { isPlainObject } from 'lodash';
-import useClipboard from '@/composables/use-clipboard';
+import { useClipboard } from '@/composables/use-clipboard';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-error/index.ts b/app/src/components/v-error/index.ts
deleted file mode 100644
index 905d74709c..0000000000
--- a/app/src/components/v-error/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VError from './v-error.vue';
-
-export default VError;
-export { VError };
diff --git a/app/src/components/v-fancy-select/v-fancy-select.vue b/app/src/components/v-fancy-select.vue
similarity index 94%
rename from app/src/components/v-fancy-select/v-fancy-select.vue
rename to app/src/components/v-fancy-select.vue
index ffbce60425..8c578d49b6 100644
--- a/app/src/components/v-fancy-select/v-fancy-select.vue
+++ b/app/src/components/v-fancy-select.vue
@@ -36,8 +36,17 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
+export type FancySelectItem = {
+	icon: string;
+	value?: string | number;
+	text: string;
+	description?: string;
+	divider?: boolean;
+	iconRight?: string;
+};
+
 interface Props {
-	items: Record<string, any>[];
+	items: FancySelectItem[];
 	modelValue?: string | number | null;
 	disabled?: boolean;
 	itemText?: string;
diff --git a/app/src/components/v-fancy-select/index.ts b/app/src/components/v-fancy-select/index.ts
deleted file mode 100644
index 0e12dacc49..0000000000
--- a/app/src/components/v-fancy-select/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VFancySelect from './v-fancy-select.vue';
-
-export { VFancySelect };
-export default VFancySelect;
diff --git a/app/src/components/v-fancy-select/types.ts b/app/src/components/v-fancy-select/types.ts
deleted file mode 100644
index 552bd688ce..0000000000
--- a/app/src/components/v-fancy-select/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type FancySelectItem = {
-	icon: string;
-	value?: string | number;
-	text: string;
-	description?: string;
-	divider?: boolean;
-	iconRight?: string;
-};
diff --git a/app/src/components/v-field-list/v-field-list.vue b/app/src/components/v-field-list/v-field-list.vue
index 45accd266f..f43eab1f27 100644
--- a/app/src/components/v-field-list/v-field-list.vue
+++ b/app/src/components/v-field-list/v-field-list.vue
@@ -29,7 +29,7 @@ import { computed, ref, toRefs, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VFieldListItem from './v-field-list-item.vue';
 import { debounce } from 'lodash';
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 
 interface Props {
 	collection: string;
diff --git a/app/src/components/v-field-template/index.ts b/app/src/components/v-field-template/index.ts
deleted file mode 100644
index 4549d35449..0000000000
--- a/app/src/components/v-field-template/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VFieldTemplate from './v-field-template.vue';
-
-export default VFieldTemplate;
-export { VFieldTemplate };
diff --git a/app/src/components/v-form/form-field-menu.vue b/app/src/components/v-form/form-field-menu.vue
index 309d992cd5..91e2a579ea 100644
--- a/app/src/components/v-form/form-field-menu.vue
+++ b/app/src/components/v-form/form-field-menu.vue
@@ -51,7 +51,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
 import { Field } from '@directus/shared/types';
-import useClipboard from '@/composables/use-clipboard';
+import { useClipboard } from '@/composables/use-clipboard';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-form/form-field.vue b/app/src/components/v-form/form-field.vue
index 94b1f7ffcf..4e7e36acc0 100644
--- a/app/src/components/v-form/form-field.vue
+++ b/app/src/components/v-form/form-field.vue
@@ -82,7 +82,7 @@ import FormFieldInterface from './form-field-interface.vue';
 import FormFieldLabel from './form-field-label.vue';
 import FormFieldMenu from './form-field-menu.vue';
 import { formatFieldFunction } from '@/utils/format-field-function';
-import useClipboard from '@/composables/use-clipboard';
+import { useClipboard } from '@/composables/use-clipboard';
 
 interface Props {
 	field: Field;
diff --git a/app/src/components/v-form/index.ts b/app/src/components/v-form/index.ts
deleted file mode 100644
index 6a65537a4b..0000000000
--- a/app/src/components/v-form/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VForm from './v-form.vue';
-
-export { VForm };
-export default VForm;
diff --git a/app/src/components/v-form/v-form.vue b/app/src/components/v-form/v-form.vue
index ba94716a1c..46f93e0ec8 100644
--- a/app/src/components/v-form/v-form.vue
+++ b/app/src/components/v-form/v-form.vue
@@ -77,8 +77,8 @@
 
 <script lang="ts">
 import { useElementSize } from '@/composables/use-element-size';
-import useFormFields from '@/composables/use-form-fields';
-import { useFieldsStore } from '@/stores/';
+import { useFormFields } from '@/composables/use-form-fields';
+import { useFieldsStore } from '@/stores/fields';
 import { applyConditions } from '@/utils/apply-conditions';
 import { extractFieldFromFunction } from '@/utils/extract-field-from-function';
 import { Field, ValidationError } from '@directus/shared/types';
@@ -285,7 +285,7 @@ export default defineComponent({
 			});
 
 			const fieldsInGroup = computed(() =>
-				fields.value.filter(
+				formFields.value.filter(
 					(field: Field) => field.meta?.group === props.group || (props.group === null && isNil(field.meta?.group))
 				)
 			);
diff --git a/app/src/components/v-hover/v-hover.vue b/app/src/components/v-hover.vue
similarity index 100%
rename from app/src/components/v-hover/v-hover.vue
rename to app/src/components/v-hover.vue
diff --git a/app/src/components/v-hover/index.ts b/app/src/components/v-hover/index.ts
deleted file mode 100644
index aca02b1e16..0000000000
--- a/app/src/components/v-hover/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VHover from './v-hover.vue';
-
-export { VHover };
-export default VHover;
diff --git a/app/src/components/v-icon/index.ts b/app/src/components/v-icon/index.ts
deleted file mode 100644
index 8fbaaead0e..0000000000
--- a/app/src/components/v-icon/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VIcon from './v-icon.vue';
-
-export { VIcon };
-export default VIcon;
diff --git a/app/src/components/v-icon/v-icon.vue b/app/src/components/v-icon/v-icon.vue
index cdc9eca9f0..ab812eb0d3 100644
--- a/app/src/components/v-icon/v-icon.vue
+++ b/app/src/components/v-icon/v-icon.vue
@@ -17,7 +17,7 @@
 import { defineComponent, computed } from 'vue';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab } from '@fortawesome/free-brands-svg-icons';
-import useSizeClass, { sizeProps } from '@/composables/size-class';
+import { useSizeClass, sizeProps } from '@/composables/use-size-class';
 
 import CustomIconDirectus from './custom-icons/directus.vue';
 import CustomIconBookmarkSave from './custom-icons/bookmark_save.vue';
diff --git a/app/src/components/v-info/v-info.vue b/app/src/components/v-info.vue
similarity index 100%
rename from app/src/components/v-info/v-info.vue
rename to app/src/components/v-info.vue
diff --git a/app/src/components/v-info/index.ts b/app/src/components/v-info/index.ts
deleted file mode 100644
index 2e90d38579..0000000000
--- a/app/src/components/v-info/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VInfo from './v-info.vue';
-
-export { VInfo };
-export default VInfo;
diff --git a/app/src/components/v-input/v-input.vue b/app/src/components/v-input.vue
similarity index 100%
rename from app/src/components/v-input/v-input.vue
rename to app/src/components/v-input.vue
diff --git a/app/src/components/v-input/index.ts b/app/src/components/v-input/index.ts
deleted file mode 100644
index 959cd6417e..0000000000
--- a/app/src/components/v-input/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VInput from './v-input.vue';
-
-export { VInput };
-export default VInput;
diff --git a/app/src/components/v-item-group/v-item-group.vue b/app/src/components/v-item-group.vue
similarity index 93%
rename from app/src/components/v-item-group/v-item-group.vue
rename to app/src/components/v-item-group.vue
index 127997eb05..99ba549dc0 100644
--- a/app/src/components/v-item-group/v-item-group.vue
+++ b/app/src/components/v-item-group.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, toRefs } from 'vue';
-import { useGroupableParent } from '@/composables/groupable';
+import { useGroupableParent } from '@/composables/use-groupable';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-item-group/index.ts b/app/src/components/v-item-group/index.ts
deleted file mode 100644
index d76f93f7c1..0000000000
--- a/app/src/components/v-item-group/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import VItemGroup from './v-item-group.vue';
-import VItem from './v-item.vue';
-
-export { VItemGroup, VItem };
-export default VItemGroup;
diff --git a/app/src/components/v-item-group/v-item.vue b/app/src/components/v-item.vue
similarity index 91%
rename from app/src/components/v-item-group/v-item.vue
rename to app/src/components/v-item.vue
index 39421aab57..ccb0d2c6dc 100644
--- a/app/src/components/v-item-group/v-item.vue
+++ b/app/src/components/v-item.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { defineComponent, toRefs } from 'vue';
-import { useGroupable } from '@/composables/groupable';
+import { useGroupable } from '@/composables/use-groupable';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-list/v-list-group.vue b/app/src/components/v-list-group.vue
similarity index 97%
rename from app/src/components/v-list/v-list-group.vue
rename to app/src/components/v-list-group.vue
index f7a1bc1da5..29d583a2aa 100644
--- a/app/src/components/v-list/v-list-group.vue
+++ b/app/src/components/v-list-group.vue
@@ -38,7 +38,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
-import { useGroupable } from '@/composables/groupable';
+import { useGroupable } from '@/composables/use-groupable';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-list/v-list-item-content.vue b/app/src/components/v-list-item-content.vue
similarity index 100%
rename from app/src/components/v-list/v-list-item-content.vue
rename to app/src/components/v-list-item-content.vue
diff --git a/app/src/components/v-list/v-list-item-hint.vue b/app/src/components/v-list-item-hint.vue
similarity index 100%
rename from app/src/components/v-list/v-list-item-hint.vue
rename to app/src/components/v-list-item-hint.vue
diff --git a/app/src/components/v-list/v-list-item-icon.vue b/app/src/components/v-list-item-icon.vue
similarity index 100%
rename from app/src/components/v-list/v-list-item-icon.vue
rename to app/src/components/v-list-item-icon.vue
diff --git a/app/src/components/v-list/v-list-item.vue b/app/src/components/v-list-item.vue
similarity index 99%
rename from app/src/components/v-list/v-list-item.vue
rename to app/src/components/v-list-item.vue
index d5faf5d865..75fd80055b 100644
--- a/app/src/components/v-list/v-list-item.vue
+++ b/app/src/components/v-list-item.vue
@@ -23,7 +23,7 @@
 <script lang="ts">
 import { RouteLocation, useLink, useRoute } from 'vue-router';
 import { defineComponent, PropType, computed } from 'vue';
-import { useGroupable } from '@/composables/groupable';
+import { useGroupable } from '@/composables/use-groupable';
 import { isEqual } from 'lodash';
 
 export default defineComponent({
diff --git a/app/src/components/v-list/v-list.vue b/app/src/components/v-list.vue
similarity index 96%
rename from app/src/components/v-list/v-list.vue
rename to app/src/components/v-list.vue
index b80aed19b9..d62d6ac6df 100644
--- a/app/src/components/v-list/v-list.vue
+++ b/app/src/components/v-list.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, toRefs } from 'vue';
-import { useGroupableParent } from '@/composables/groupable';
+import { useGroupableParent } from '@/composables/use-groupable';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-list/index.ts b/app/src/components/v-list/index.ts
deleted file mode 100644
index 2992a9f29a..0000000000
--- a/app/src/components/v-list/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import VListGroup from './v-list-group.vue';
-import VListItemContent from './v-list-item-content.vue';
-import VListItemHint from './v-list-item-hint.vue';
-import VListItemIcon from './v-list-item-icon.vue';
-import VListItem from './v-list-item.vue';
-import VList from './v-list.vue';
-
-export { VList, VListItem, VListItemContent, VListItemIcon, VListItemHint, VListGroup };
-
-export default VList;
diff --git a/app/src/components/v-menu/v-menu.vue b/app/src/components/v-menu.vue
similarity index 71%
rename from app/src/components/v-menu/v-menu.vue
rename to app/src/components/v-menu.vue
index 3ec333442f..b2e5932a8b 100644
--- a/app/src/components/v-menu/v-menu.vue
+++ b/app/src/components/v-menu.vue
@@ -59,11 +59,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, PropType, computed, watch, nextTick } from 'vue';
-import { usePopper } from './use-popper';
-import { Placement } from '@popperjs/core';
-import { nanoid } from 'nanoid';
+import { Instance, Modifier, Placement } from '@popperjs/core';
+import arrow from '@popperjs/core/lib/modifiers/arrow';
+import computeStyles from '@popperjs/core/lib/modifiers/computeStyles';
+import eventListeners from '@popperjs/core/lib/modifiers/eventListeners';
+import flip from '@popperjs/core/lib/modifiers/flip';
+import offset from '@popperjs/core/lib/modifiers/offset';
+import popperOffsets from '@popperjs/core/lib/modifiers/popperOffsets';
+import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
+import { createPopper } from '@popperjs/core/lib/popper-lite';
 import { debounce } from 'lodash';
+import { nanoid } from 'nanoid';
+import { computed, defineComponent, nextTick, onUnmounted, PropType, ref, Ref, watch } from 'vue';
 
 export default defineComponent({
 	props: {
@@ -297,6 +304,126 @@ export default defineComponent({
 				isHovered.value = false;
 			}
 		}
+
+		function usePopper(
+			reference: Ref<HTMLElement | null>,
+			popper: Ref<HTMLElement | null>,
+			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({});
+			const arrowStyles = ref({});
+
+			// The internal placement can change based on the flip / overflow modifiers
+			const placement = ref(options.value.placement);
+
+			onUnmounted(() => {
+				stop();
+			});
+
+			watch(
+				options,
+				() => {
+					popperInstance.value?.setOptions({
+						placement: options.value.attached ? 'bottom-start' : options.value.placement,
+						modifiers: getModifiers(),
+					});
+				},
+				{ immediate: true }
+			);
+
+			const observer = new MutationObserver(() => {
+				popperInstance.value?.forceUpdate();
+			});
+
+			return { popperInstance, placement, start, stop, styles, arrowStyles };
+
+			function start() {
+				return new Promise((resolve) => {
+					popperInstance.value = createPopper(reference.value!, popper.value!, {
+						placement: options.value.attached ? 'bottom-start' : options.value.placement,
+						modifiers: getModifiers(resolve),
+						strategy: 'fixed',
+					});
+					popperInstance.value.forceUpdate();
+					observer.observe(popper.value!, {
+						attributes: false,
+						childList: true,
+						characterData: true,
+						subtree: true,
+					});
+				});
+			}
+
+			function stop() {
+				popperInstance.value?.destroy();
+				observer.disconnect();
+			}
+
+			function getModifiers(callback: (value?: unknown) => void = () => undefined) {
+				const modifiers: Modifier<string, any>[] = [
+					popperOffsets,
+					{
+						...offset,
+						options: {
+							offset: options.value.attached ? [0, 0] : [options.value.offsetX ?? 0, options.value.offsetY ?? 8],
+						},
+					},
+					{
+						...preventOverflow,
+						options: {
+							padding: 8,
+						},
+					},
+					computeStyles,
+					flip,
+					eventListeners,
+					{
+						name: 'placementUpdater',
+						enabled: true,
+						phase: 'afterWrite',
+						fn({ state }) {
+							placement.value = state.placement;
+						},
+					},
+					{
+						name: 'applyStyles',
+						enabled: true,
+						phase: 'write',
+						fn({ state }) {
+							styles.value = state.styles.popper;
+							arrowStyles.value = state.styles.arrow;
+							callback();
+						},
+					},
+				];
+
+				if (options.value.arrow === true) {
+					modifiers.push({
+						...arrow,
+						options: {
+							padding: 6,
+						},
+					});
+				}
+
+				if (options.value.attached === true) {
+					modifiers.push({
+						name: 'sameWidth',
+						enabled: true,
+						fn: ({ state }) => {
+							state.styles.popper.width = `${state.rects.reference.width}px`;
+						},
+						phase: 'beforeWrite',
+						requires: ['computeStyles'],
+					});
+				}
+
+				return modifiers;
+			}
+		}
 	},
 });
 </script>
diff --git a/app/src/components/v-menu/index.ts b/app/src/components/v-menu/index.ts
deleted file mode 100644
index 5a7a8d9615..0000000000
--- a/app/src/components/v-menu/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VMenu from './v-menu.vue';
-
-export { VMenu };
-export default VMenu;
diff --git a/app/src/components/v-menu/use-popper.ts b/app/src/components/v-menu/use-popper.ts
deleted file mode 100644
index 5dac371519..0000000000
--- a/app/src/components/v-menu/use-popper.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import { createPopper } from '@popperjs/core/lib/popper-lite';
-import { Instance, Modifier, Placement } from '@popperjs/core';
-import arrow from '@popperjs/core/lib/modifiers/arrow';
-import computeStyles from '@popperjs/core/lib/modifiers/computeStyles';
-import eventListeners from '@popperjs/core/lib/modifiers/eventListeners';
-import flip from '@popperjs/core/lib/modifiers/flip';
-import offset from '@popperjs/core/lib/modifiers/offset';
-import popperOffsets from '@popperjs/core/lib/modifiers/popperOffsets';
-import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
-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; offsetY: number; offsetX: number }>>
-	>
-): Record<string, any> {
-	const popperInstance = ref<Instance | null>(null);
-	const styles = ref({});
-	const arrowStyles = ref({});
-
-	// The internal placement can change based on the flip / overflow modifiers
-	const placement = ref(options.value.placement);
-
-	onUnmounted(() => {
-		stop();
-	});
-
-	watch(
-		options,
-		() => {
-			popperInstance.value?.setOptions({
-				placement: options.value.attached ? 'bottom-start' : options.value.placement,
-				modifiers: getModifiers(),
-			});
-		},
-		{ immediate: true }
-	);
-
-	const observer = new MutationObserver(() => {
-		popperInstance.value?.forceUpdate();
-	});
-
-	return { popperInstance, placement, start, stop, styles, arrowStyles };
-
-	function start() {
-		return new Promise((resolve) => {
-			popperInstance.value = createPopper(reference.value!, popper.value!, {
-				placement: options.value.attached ? 'bottom-start' : options.value.placement,
-				modifiers: getModifiers(resolve),
-				strategy: 'fixed',
-			});
-			popperInstance.value.forceUpdate();
-			observer.observe(popper.value!, {
-				attributes: false,
-				childList: true,
-				characterData: true,
-				subtree: true,
-			});
-		});
-	}
-
-	function stop() {
-		popperInstance.value?.destroy();
-		observer.disconnect();
-	}
-
-	function getModifiers(callback: (value?: unknown) => void = () => undefined) {
-		const modifiers: Modifier<string, any>[] = [
-			popperOffsets,
-			{
-				...offset,
-				options: {
-					offset: options.value.attached ? [0, 0] : [options.value.offsetX ?? 0, options.value.offsetY ?? 8],
-				},
-			},
-			{
-				...preventOverflow,
-				options: {
-					padding: 8,
-				},
-			},
-			computeStyles,
-			flip,
-			eventListeners,
-			{
-				name: 'placementUpdater',
-				enabled: true,
-				phase: 'afterWrite',
-				fn({ state }) {
-					placement.value = state.placement;
-				},
-			},
-			{
-				name: 'applyStyles',
-				enabled: true,
-				phase: 'write',
-				fn({ state }) {
-					styles.value = state.styles.popper;
-					arrowStyles.value = state.styles.arrow;
-					callback();
-				},
-			},
-		];
-
-		if (options.value.arrow === true) {
-			modifiers.push({
-				...arrow,
-				options: {
-					padding: 6,
-				},
-			});
-		}
-
-		if (options.value.attached === true) {
-			modifiers.push({
-				name: 'sameWidth',
-				enabled: true,
-				fn: ({ state }) => {
-					state.styles.popper.width = `${state.rects.reference.width}px`;
-				},
-				phase: 'beforeWrite',
-				requires: ['computeStyles'],
-			});
-		}
-
-		return modifiers;
-	}
-}
diff --git a/app/src/components/v-notice/v-notice.vue b/app/src/components/v-notice.vue
similarity index 100%
rename from app/src/components/v-notice/v-notice.vue
rename to app/src/components/v-notice.vue
diff --git a/app/src/components/v-notice/index.ts b/app/src/components/v-notice/index.ts
deleted file mode 100644
index 05b7fcbbf0..0000000000
--- a/app/src/components/v-notice/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VNotice from './v-notice.vue';
-
-export { VNotice };
-export default VNotice;
diff --git a/app/src/components/v-overlay/v-overlay.vue b/app/src/components/v-overlay.vue
similarity index 100%
rename from app/src/components/v-overlay/v-overlay.vue
rename to app/src/components/v-overlay.vue
diff --git a/app/src/components/v-overlay/index.ts b/app/src/components/v-overlay/index.ts
deleted file mode 100644
index 489e1aa2e4..0000000000
--- a/app/src/components/v-overlay/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VOverlay from './v-overlay.vue';
-
-export { VOverlay };
-export default VOverlay;
diff --git a/app/src/components/v-pagination/v-pagination.vue b/app/src/components/v-pagination.vue
similarity index 100%
rename from app/src/components/v-pagination/v-pagination.vue
rename to app/src/components/v-pagination.vue
diff --git a/app/src/components/v-pagination/index.ts b/app/src/components/v-pagination/index.ts
deleted file mode 100644
index 7fb8e01834..0000000000
--- a/app/src/components/v-pagination/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VPagination from './v-pagination.vue';
-
-export { VPagination };
-export default VPagination;
diff --git a/app/src/components/v-progress/circular/v-progress-circular.vue b/app/src/components/v-progress-circular.vue
similarity index 97%
rename from app/src/components/v-progress/circular/v-progress-circular.vue
rename to app/src/components/v-progress-circular.vue
index 55081b1b6f..dfeb21dc7f 100644
--- a/app/src/components/v-progress/circular/v-progress-circular.vue
+++ b/app/src/components/v-progress-circular.vue
@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
-import useSizeClass, { sizeProps } from '@/composables/size-class';
+import { useSizeClass, sizeProps } from '@/composables/use-size-class';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-progress/linear/v-progress-linear.vue b/app/src/components/v-progress-linear.vue
similarity index 100%
rename from app/src/components/v-progress/linear/v-progress-linear.vue
rename to app/src/components/v-progress-linear.vue
diff --git a/app/src/components/v-progress/circular/index.ts b/app/src/components/v-progress/circular/index.ts
deleted file mode 100644
index 05cdb5a79e..0000000000
--- a/app/src/components/v-progress/circular/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VProgressCircular from './v-progress-circular.vue';
-
-export { VProgressCircular };
-export default VProgressCircular;
diff --git a/app/src/components/v-progress/circular/readme.md b/app/src/components/v-progress/circular/readme.md
deleted file mode 100644
index 1df7a51a0e..0000000000
--- a/app/src/components/v-progress/circular/readme.md
+++ /dev/null
@@ -1,70 +0,0 @@
-# Progress (circular)
-
-```html
-<v-progress-circular />
-```
-
-## Colors
-
-The color of the circular progressbar can be changed through the `--v-progress-circular-color` and
-`--v-progress-circular-background-color` css variable.
-
-```html
-<v-progress-circular />
-<style>
-	.v-progress-circular {
-		--v-progress-circular-color: var(--red-100);
-		--v-progress-circular-background-color: var(--red-600);
-	}
-</style>
-```
-
-## Sizes
-
-The circular progress component supports the following sizes through the use of props:
-
-- x-small
-- small
-- (default)
-- large
-- x-large
-
-```html
-<v-progress-circular x-small />
-<v-progress-circular small />
-<v-progress-circular />
-<v-progress-circular large />
-<v-progress-circular x-large />
-```
-
-## Props
-
-| Prop            | Description                    | Default |
-| --------------- | ------------------------------ | ------- |
-| `value`         | The percentage value           | `0`     |
-| `indeterminate` | Displays the loading animation | `false` |
-| `x-small`       | Render extra small             | `false` |
-| `small`         | Render small                   | `false` |
-| `large`         | Render large                   | `false` |
-| `x-large`       | Render extra large             | `false` |
-
-## Slots
-
-| Slot      | Description                          | Data |
-| --------- | ------------------------------------ | ---- |
-| _default_ | Rendered in the center of the circle | --   |
-
-## Events
-
-n/a
-
-## CSS Variables
-
-| Variable                                 | Default                                  |
-| ---------------------------------------- | ---------------------------------------- |
-| `--v-progress-circular-color`            | `var(--loading-background-color-accent)` |
-| `--v-progress-circular-background-color` | `var(--loading-background-color)`        |
-| `--v-progress-circular-transition`       | `400ms`                                  |
-| `--v-progress-circular-speed`            | `1s`                                     |
-| `--v-progress-circular-size`             | `28px`                                   |
-| `--v-progress-circular-line-size`        | `3px`                                    |
diff --git a/app/src/components/v-progress/linear/index.ts b/app/src/components/v-progress/linear/index.ts
deleted file mode 100644
index 348de049d4..0000000000
--- a/app/src/components/v-progress/linear/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VProgressLinear from './v-progress-linear.vue';
-
-export { VProgressLinear };
-export default VProgressLinear;
diff --git a/app/src/components/v-progress/linear/readme.md b/app/src/components/v-progress/linear/readme.md
deleted file mode 100644
index bdba50edf3..0000000000
--- a/app/src/components/v-progress/linear/readme.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# Progress (Linear)
-
-```html
-<v-progress-linear :value="75" />
-```
-
-## Colors
-
-The linear progress component supports colors. Colors can be changed via the css variables `--v-progress-linear-color`
-and `--v-progress-linear-background-color`
-
-```html
-<v-progress-linear />
-<style>
-	.v-overlay {
-		--v-progress-linear-color: red;
-		--v-progress-linear-background-color: var(--black);
-	}
-</style>
-```
-
-## Indeterminate
-
-The progress indicator can be rendered in indeterminate mode by passing the `indeterminate` prop. Use this when it's
-unclear when the progress will be done.
-
-## Props
-
-| Prop            | Description                                            | Default |
-| --------------- | ------------------------------------------------------ | ------- |
-| `absolute`      | Applies `position: absolute`                           | `false` |
-| `bottom`        | Align the progress bar to the bottom                   | `false` |
-| `fixed`         | Applies `position: fixed;` to the element              | `false` |
-| `indeterminate` | Animates the bar, use when loading progress is unknown | `false` |
-| `rounded`       | Add a border radius to the bar                         | `false` |
-| `top`           | Align progress bar to the top of the parent container  | `false` |
-| `value`         | Percentage value for current progress                  | `0`     |
-
-## Events
-
-n/a
-
-## Slots
-
-| Slots     | Description | Value |
-| --------- | ----------- | ----- |
-| _default_ |             | --    |
-
-## CSS Variables
-
-| Variable                               | Default                    |
-| -------------------------------------- | -------------------------- |
-| `--v-progress-linear-height`           | `4px`                      |
-| `--v-progress-linear-color`            | `var(--foreground-normal)` |
-| `--v-progress-linear-background-color` | `var(--border-normal)`     |
diff --git a/app/src/components/v-radio/v-radio.vue b/app/src/components/v-radio.vue
similarity index 100%
rename from app/src/components/v-radio/v-radio.vue
rename to app/src/components/v-radio.vue
diff --git a/app/src/components/v-radio/index.ts b/app/src/components/v-radio/index.ts
deleted file mode 100644
index 755279ee90..0000000000
--- a/app/src/components/v-radio/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VRadio from './v-radio.vue';
-
-export { VRadio };
-export default VRadio;
diff --git a/app/src/components/v-select/index.ts b/app/src/components/v-select/index.ts
deleted file mode 100644
index e4cef8f144..0000000000
--- a/app/src/components/v-select/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VSelect from './v-select.vue';
-
-export { VSelect };
-export default VSelect;
diff --git a/app/src/components/v-sheet/v-sheet.vue b/app/src/components/v-sheet.vue
similarity index 100%
rename from app/src/components/v-sheet/v-sheet.vue
rename to app/src/components/v-sheet.vue
diff --git a/app/src/components/v-sheet/index.ts b/app/src/components/v-sheet/index.ts
deleted file mode 100644
index d8f1b19758..0000000000
--- a/app/src/components/v-sheet/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VSheet from './v-sheet.vue';
-
-export { VSheet };
-export default VSheet;
diff --git a/app/src/components/v-skeleton-loader/v-skeleton-loader.vue b/app/src/components/v-skeleton-loader.vue
similarity index 100%
rename from app/src/components/v-skeleton-loader/v-skeleton-loader.vue
rename to app/src/components/v-skeleton-loader.vue
diff --git a/app/src/components/v-skeleton-loader/index.ts b/app/src/components/v-skeleton-loader/index.ts
deleted file mode 100644
index 7f97a751d0..0000000000
--- a/app/src/components/v-skeleton-loader/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VSkeletonLoader from './v-skeleton-loader.vue';
-
-export { VSkeletonLoader };
-export default VSkeletonLoader;
diff --git a/app/src/components/v-slider/v-slider.vue b/app/src/components/v-slider.vue
similarity index 100%
rename from app/src/components/v-slider/v-slider.vue
rename to app/src/components/v-slider.vue
diff --git a/app/src/components/v-slider/index.ts b/app/src/components/v-slider/index.ts
deleted file mode 100644
index 2aba9554cd..0000000000
--- a/app/src/components/v-slider/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VSlider from './v-slider.vue';
-
-export { VSlider };
-export default VSlider;
diff --git a/app/src/components/v-switch/v-switch.vue b/app/src/components/v-switch.vue
similarity index 100%
rename from app/src/components/v-switch/v-switch.vue
rename to app/src/components/v-switch.vue
diff --git a/app/src/components/v-switch/index.ts b/app/src/components/v-switch/index.ts
deleted file mode 100644
index 69b3a8107d..0000000000
--- a/app/src/components/v-switch/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VSwitch from './v-switch.vue';
-
-export { VSwitch };
-export default VSwitch;
diff --git a/app/src/components/v-tabs/v-tab-item/v-tab-item.vue b/app/src/components/v-tab-item.vue
similarity index 87%
rename from app/src/components/v-tabs/v-tab-item/v-tab-item.vue
rename to app/src/components/v-tab-item.vue
index bab1f82666..00e3f8cf56 100644
--- a/app/src/components/v-tabs/v-tab-item/v-tab-item.vue
+++ b/app/src/components/v-tab-item.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useGroupable } from '@/composables/groupable';
+import { useGroupable } from '@/composables/use-groupable';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-tabs/v-tab/v-tab.vue b/app/src/components/v-tab.vue
similarity index 96%
rename from app/src/components/v-tabs/v-tab/v-tab.vue
rename to app/src/components/v-tab.vue
index 0d75791cb0..08e7b417d8 100644
--- a/app/src/components/v-tabs/v-tab/v-tab.vue
+++ b/app/src/components/v-tab.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import { defineComponent, inject, ref } from 'vue';
-import { useGroupable } from '@/composables/groupable';
+import { useGroupable } from '@/composables/use-groupable';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-table/index.ts b/app/src/components/v-table/index.ts
deleted file mode 100644
index eb694b975a..0000000000
--- a/app/src/components/v-table/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VTable from './v-table.vue';
-
-export { VTable };
-export default VTable;
diff --git a/app/src/components/v-table/table-header.vue b/app/src/components/v-table/table-header.vue
index 9b3c4df975..98da0077a7 100644
--- a/app/src/components/v-table/table-header.vue
+++ b/app/src/components/v-table/table-header.vue
@@ -101,11 +101,11 @@
 import { useI18n } from 'vue-i18n';
 import { computed, ref, useSlots } from 'vue';
 import { ShowSelect } from '@directus/shared/types';
-import useEventListener from '@/composables/use-event-listener';
+import { useEventListener } from '@/composables/use-event-listener';
 import { Header, Sort } from './types';
 import { throttle, clone } from 'lodash';
 import Draggable from 'vuedraggable';
-import hideDragImage from '@/utils/hide-drag-image';
+import { hideDragImage } from '@/utils/hide-drag-image';
 import { useSync } from '@directus/shared/composables';
 
 interface Props {
diff --git a/app/src/components/v-table/v-table.vue b/app/src/components/v-table/v-table.vue
index 11b1570084..4b192837b3 100644
--- a/app/src/components/v-table/v-table.vue
+++ b/app/src/components/v-table/v-table.vue
@@ -98,7 +98,7 @@ import TableRow from './table-row.vue';
 import { sortBy, clone, forEach, pick } from 'lodash';
 import { i18n } from '@/lang/';
 import Draggable from 'vuedraggable';
-import hideDragImage from '@/utils/hide-drag-image';
+import { hideDragImage } from '@/utils/hide-drag-image';
 
 const HeaderDefaults: Header = {
 	text: '',
diff --git a/app/src/components/v-tabs/v-tabs-items/v-tabs-items.vue b/app/src/components/v-tabs-items.vue
similarity index 100%
rename from app/src/components/v-tabs/v-tabs-items/v-tabs-items.vue
rename to app/src/components/v-tabs-items.vue
diff --git a/app/src/components/v-tabs/v-tabs.vue b/app/src/components/v-tabs.vue
similarity index 95%
rename from app/src/components/v-tabs/v-tabs.vue
rename to app/src/components/v-tabs.vue
index ea2b597421..ef0e251ba3 100644
--- a/app/src/components/v-tabs/v-tabs.vue
+++ b/app/src/components/v-tabs.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, toRefs, provide, ref } from 'vue';
-import { useGroupableParent } from '@/composables/groupable';
+import { useGroupableParent } from '@/composables/use-groupable';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/components/v-tabs/index.ts b/app/src/components/v-tabs/index.ts
deleted file mode 100644
index e601d2b68a..0000000000
--- a/app/src/components/v-tabs/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import VTabItem from './v-tab-item/';
-import VTab from './v-tab/';
-import VTabsItems from './v-tabs-items/';
-import VTabs from './v-tabs.vue';
-
-export { VTabs, VTab, VTabsItems, VTabItem };
-export default VTabs;
diff --git a/app/src/components/v-tabs/v-tab-item/index.ts b/app/src/components/v-tabs/v-tab-item/index.ts
deleted file mode 100644
index 504fcf8d5e..0000000000
--- a/app/src/components/v-tabs/v-tab-item/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VTabItem from './v-tab-item.vue';
-
-export { VTabItem };
-export default VTabItem;
diff --git a/app/src/components/v-tabs/v-tab/index.ts b/app/src/components/v-tabs/v-tab/index.ts
deleted file mode 100644
index a9deffa4f9..0000000000
--- a/app/src/components/v-tabs/v-tab/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VTab from './v-tab.vue';
-
-export { VTab };
-export default VTab;
diff --git a/app/src/components/v-tabs/v-tabs-items/index.ts b/app/src/components/v-tabs/v-tabs-items/index.ts
deleted file mode 100644
index 97d5417f83..0000000000
--- a/app/src/components/v-tabs/v-tabs-items/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VTabsItems from './v-tabs-items.vue';
-
-export { VTabsItems };
-export default VTabsItems;
diff --git a/app/src/components/v-textarea/v-textarea.vue b/app/src/components/v-textarea.vue
similarity index 100%
rename from app/src/components/v-textarea/v-textarea.vue
rename to app/src/components/v-textarea.vue
diff --git a/app/src/components/v-textarea/index.ts b/app/src/components/v-textarea/index.ts
deleted file mode 100644
index b1f2ff8c60..0000000000
--- a/app/src/components/v-textarea/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VTextarea from './v-textarea.vue';
-
-export { VTextarea };
-export default VTextarea;
diff --git a/app/src/components/v-upload/v-upload.vue b/app/src/components/v-upload.vue
similarity index 98%
rename from app/src/components/v-upload/v-upload.vue
rename to app/src/components/v-upload.vue
index c81948e56b..0022262e82 100644
--- a/app/src/components/v-upload/v-upload.vue
+++ b/app/src/components/v-upload.vue
@@ -90,9 +90,9 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, computed } from 'vue';
-import uploadFiles from '@/utils/upload-files';
-import uploadFile from '@/utils/upload-file';
-import DrawerCollection from '@/views/private/components/drawer-collection';
+import { uploadFiles } from '@/utils/upload-files';
+import { uploadFile } from '@/utils/upload-file';
+import DrawerCollection from '@/views/private/components/drawer-collection.vue';
 import api from '@/api';
 import emitter, { Events } from '@/events';
 import { unexpectedError } from '@/utils/unexpected-error';
diff --git a/app/src/components/v-upload/index.ts b/app/src/components/v-upload/index.ts
deleted file mode 100644
index 5fb721577e..0000000000
--- a/app/src/components/v-upload/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import VUpload from './v-upload.vue';
-
-export { VUpload };
-export default VUpload;
diff --git a/app/src/composables/groupable/index.ts b/app/src/composables/groupable/index.ts
deleted file mode 100644
index 802023c2ae..0000000000
--- a/app/src/composables/groupable/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { useGroupable, useGroupableParent } from './groupable';
-
-export { useGroupable, useGroupableParent };
-export default { useGroupable, useGroupableParent };
diff --git a/app/src/composables/groupable/readme.md b/app/src/composables/groupable/readme.md
deleted file mode 100644
index ff9ff0af96..0000000000
--- a/app/src/composables/groupable/readme.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# `useGroupable` / `useGroupableParent`
-
-Can be used to make a selectable group of items within a parent container. This is used to facilitate the functionality
-of the `v-item-group` base component, and other groupable components like `detail-group`, `button-group`.
-
-## Usage
-
-Use the `useGroupableParent` function in a parent component that will contain one or more components in it's slots
-(deeply nested or not) that use the `useGroupable` composables.
-
-### `useGroupableParent(state: GroupableParentState, options: GroupableParentOptions, group: string): void`
-
-The `useGroupableParent` composition accepts two parameters: state and options. State includes a `selection` key that
-can be used to pass an array of selected items, so you can manage this active state from the parent context. The
-`onSelectionChange` property of state is a callback function that fires whenever the selection changes from a child
-groupable item.
-
-The `options` parameter can be used to set some behavioral options for the selection logic. These options include
-`multiple: boolean`, `max: number`, `mandatory: boolean`.
-
-```js
-import { defineComponent } from 'vue';
-import { useGroupableParent } from '@/composables/size-class/';
-
-export default defineComponent({
-	props: {
-		...sizeProps,
-	},
-	setup(props) {
-		useGroupableParent(
-			{
-				selection: selection,
-				onSelectionChange: (newSelectionValues) => emit('input', newSelectionValues),
-			},
-			{
-				multiple: multiple,
-				max: max,
-				mandatory: mandatory,
-			}
-		);
-	},
-});
-```
-
-The optional group parameter allows you to control to what group this parent is registered. This can be useful when you
-have complexly nested groups.
-
-### `useGroupable(value: string | number | undefined, group: string): { active: Ref<boolean>; toggle: () => void; }`
-
-Registers this component as a child of the first parent component that uses the `useGroupableParent` component.
-
-The `useGroupable` composition accepts a single parameter (`value`) that will be used in the selection state of the
-groupable parent. The composition returns an object with the active state, and a function that will toggle this
-component's active state in the parent's selection.
-
-```js
-import { defineComponent } from 'vue';
-import { useGroupable } from '@/composables/groupable';
-
-export default defineComponent({
-	setup(props) {
-		const { active, toggle } = useGroupable('unique-value-for-this-item');
-		return { active, toggle };
-	},
-});
-```
-
-The optional group parameter allows you to control to what group this child is registered. This can be useful when you
-have complexly nested groups.
diff --git a/app/src/composables/readme.md b/app/src/composables/readme.md
deleted file mode 100644
index b416408386..0000000000
--- a/app/src/composables/readme.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Composables
-
-Composables are reusable pieces of logic that can be used inside Vue components (Composition API required).
-
-## Table of Contents
-
-- [`useGroupable` / `useGroupableParent`](./groupable)
-- [`useSizeClass`](./size-class)
-- [`useElementSize`](./use-element-size)
-- [`useEventListener`](./use-event-listener)
-- [`useScrollDistance`](./use-scroll-distance)
-- [`useSync`](./use-sync)
-- [`useTimeFromNow`](./use-time-from-now)
-- [`useWindowSize`](./use-window-size)
diff --git a/app/src/composables/size-class/index.ts b/app/src/composables/size-class/index.ts
deleted file mode 100644
index 2b94ee6be5..0000000000
--- a/app/src/composables/size-class/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import useSizeClass, { sizeProps } from './size-class';
-
-export { sizeProps, useSizeClass };
-export default useSizeClass;
diff --git a/app/src/composables/size-class/readme.md b/app/src/composables/size-class/readme.md
deleted file mode 100644
index 49dee99eb6..0000000000
--- a/app/src/composables/size-class/readme.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# `useSizeClass`
-
-```ts
-function useSizeClass(props: { xSmall: boolean; small: boolean; large: boolean; xLarge: boolean }): string;
-```
-
-Set of props and a composition that can inject a standardized sizing prop for components.
-
-A component that uses this composition and the corresponding props will accept the `x-small` through `x-large` props:
-
-```html
-<v-button x-small />
-<v-button small />
-<v-button large />
-<v-button x-large />
-```
-
-## Usage
-
-```js
-import { defineComponent } from 'vue';
-import useSizeClass, { sizeProps } from '@/composables/size-class/';
-
-export default defineComponent({
-	props: {
-		...sizeProps,
-	},
-	setup(props) {
-		const sizeClass = useSizeClass(props);
-		return { sizeClass }; // one of x-small, small, large, x-large
-	},
-});
-```
diff --git a/app/src/composables/use-alias-fields.ts b/app/src/composables/use-alias-fields.ts
index 648fd56ade..a244cc3349 100644
--- a/app/src/composables/use-alias-fields.ts
+++ b/app/src/composables/use-alias-fields.ts
@@ -19,7 +19,7 @@ type UsableAliasFields = {
 	};
 };
 
-export default function useAliasFields(fields: Ref<string[]>): UsableAliasFields {
+export function useAliasFields(fields: Ref<string[]>): UsableAliasFields {
 	const aliasFields = computed(() => {
 		if (!fields.value || fields.value.length === 0) return null;
 
diff --git a/app/src/composables/use-clipboard.ts b/app/src/composables/use-clipboard.ts
index 029f2c35a7..77c2e17aa5 100644
--- a/app/src/composables/use-clipboard.ts
+++ b/app/src/composables/use-clipboard.ts
@@ -7,7 +7,7 @@ type Message = {
 	fail?: string;
 };
 
-export default function useClipboard() {
+export function useClipboard() {
 	const { t } = useI18n();
 
 	const isCopySupported = computed(() => {
diff --git a/app/src/composables/use-custom-selection/use-custom-selection.ts b/app/src/composables/use-custom-selection.ts
similarity index 100%
rename from app/src/composables/use-custom-selection/use-custom-selection.ts
rename to app/src/composables/use-custom-selection.ts
diff --git a/app/src/composables/use-custom-selection/index.ts b/app/src/composables/use-custom-selection/index.ts
deleted file mode 100644
index d4c50dc541..0000000000
--- a/app/src/composables/use-custom-selection/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { useCustomSelection, useCustomSelectionMultiple } from './use-custom-selection';
-
-export { useCustomSelection, useCustomSelectionMultiple };
-export default { useCustomSelection, useCustomSelectionMultiple };
diff --git a/app/src/composables/use-custom-selection/readme.md b/app/src/composables/use-custom-selection/readme.md
deleted file mode 100644
index 4575fab505..0000000000
--- a/app/src/composables/use-custom-selection/readme.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# useCustomSelection
-
-This is a very specific composition meant to be used in v-select and the radios / checkboxes interfaces.
-
-It's the logic that keeps track of custom options in a selection module, like the custom values in a multi-select
-dropdown.
-
-```ts
-useCustomSelection();
-```
diff --git a/app/src/composables/use-edits-guard/use-edits-guard.ts b/app/src/composables/use-edits-guard.ts
similarity index 100%
rename from app/src/composables/use-edits-guard/use-edits-guard.ts
rename to app/src/composables/use-edits-guard.ts
diff --git a/app/src/composables/use-edits-guard/index.ts b/app/src/composables/use-edits-guard/index.ts
deleted file mode 100644
index df1fe99c90..0000000000
--- a/app/src/composables/use-edits-guard/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { useEditsGuard } from './use-edits-guard';
-
-export { useEditsGuard };
-export default useEditsGuard;
diff --git a/app/src/composables/use-element-size/use-element-size.ts b/app/src/composables/use-element-size.ts
similarity index 92%
rename from app/src/composables/use-element-size/use-element-size.ts
rename to app/src/composables/use-element-size.ts
index 6a8bb75a5f..316ecb58fe 100644
--- a/app/src/composables/use-element-size/use-element-size.ts
+++ b/app/src/composables/use-element-size.ts
@@ -7,7 +7,7 @@ declare global {
 	}
 }
 
-export default function useElementSize<T extends Element>(
+export function useElementSize<T extends Element>(
 	target: T | Ref<T> | Ref<undefined>
 ): {
 	width: Ref<number>;
diff --git a/app/src/composables/use-element-size/index.ts b/app/src/composables/use-element-size/index.ts
deleted file mode 100644
index e4e42428b8..0000000000
--- a/app/src/composables/use-element-size/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import useElementSize from './use-element-size';
-
-export { useElementSize };
-export default useElementSize;
diff --git a/app/src/composables/use-element-size/readme.md b/app/src/composables/use-element-size/readme.md
deleted file mode 100644
index 363e44e61f..0000000000
--- a/app/src/composables/use-element-size/readme.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# `useElementSize`
-
-```ts
-function useElementSize(element: Element): { width: Ref<number>; height: Ref<number> };
-```
-
-Allows you to reactively watch an elements width and height.
-
-## Usage
-
-```vue
-<template>
-	<div ref="el">My size is: {{ width }} x {{ height }}</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useElementSize } from '@/composables/use-element-size';
-
-export default defineComponent({
-	setup(props) {
-		const el = ref<Element>(null);
-		const { width, height } = useElementSize(el);
-		return { el, width, height };
-	},
-});
-</script>
-```
diff --git a/app/src/composables/use-event-listener/use-event-listener.ts b/app/src/composables/use-event-listener.ts
similarity index 85%
rename from app/src/composables/use-event-listener/use-event-listener.ts
rename to app/src/composables/use-event-listener.ts
index 386516c8ea..dae7bf3e78 100644
--- a/app/src/composables/use-event-listener/use-event-listener.ts
+++ b/app/src/composables/use-event-listener.ts
@@ -1,6 +1,6 @@
 import { onMounted, onBeforeUnmount, Ref, isRef } from 'vue';
 
-export default function useEventListener<T extends EventTarget, E extends Event>(
+export function useEventListener<T extends EventTarget, E extends Event>(
 	target: T | Ref<T>,
 	type: string,
 	handler: (this: T, evt: E) => void,
diff --git a/app/src/composables/use-event-listener/index.ts b/app/src/composables/use-event-listener/index.ts
deleted file mode 100644
index d753738fd3..0000000000
--- a/app/src/composables/use-event-listener/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import useEventListener from './use-event-listener';
-
-export { useEventListener };
-export default useEventListener;
diff --git a/app/src/composables/use-event-listener/readme.md b/app/src/composables/use-event-listener/readme.md
deleted file mode 100644
index ee4db4f539..0000000000
--- a/app/src/composables/use-event-listener/readme.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# `useEventListener`
-
-```ts
-function useEventListener(
-	target: HTMLElement,
-	type: string,
-	handler: (event: Event) => void,
-	options: AddEventListenerOptions
-): void;
-```
-
-Can be used to attach an event listener to any DOM element that will automatically be attached / cleaned up whenever the
-component mounts / unmounts.
-
-## Usage
-
-```js
-import { defineComponent } from 'vue';
-import { useEventListener } from '@/composables/use-event-listener';
-
-export default defineComponent({
-	setup(props) {
-		useEventListener(document.querySelector('#example'), 'click', onExampleClick);
-
-		function onExampleClick(event) {
-			// ...
-		}
-	},
-});
-```
diff --git a/app/src/composables/use-field-tree.ts b/app/src/composables/use-field-tree.ts
index 54c8b956ec..080ce6b0e0 100644
--- a/app/src/composables/use-field-tree.ts
+++ b/app/src/composables/use-field-tree.ts
@@ -1,4 +1,5 @@
-import { useFieldsStore, useRelationsStore } from '@/stores/';
+import { useFieldsStore } from '@/stores/fields';
+import { useRelationsStore } from '@/stores/relations';
 import { Field, Relation, Type } from '@directus/shared/types';
 import { getRelationType } from '@directus/shared/utils';
 import { isNil } from 'lodash';
diff --git a/app/src/composables/use-folders.ts b/app/src/composables/use-folders.ts
index e52fb88fc1..56073f87ab 100644
--- a/app/src/composables/use-folders.ts
+++ b/app/src/composables/use-folders.ts
@@ -30,7 +30,7 @@ let openFolders: Ref<string[] | null> | null = null;
 
 let error: Ref<any> | null = null;
 
-export default function useFolders(): UsableFolders {
+export function useFolders(): UsableFolders {
 	if (loading === null) loading = ref(false);
 	if (folders === null) folders = ref<Folder[] | null>(null);
 	if (nestedFolders === null) nestedFolders = ref<Folder[] | null>(null);
diff --git a/app/src/composables/use-form-fields/use-form-fields.ts b/app/src/composables/use-form-fields.ts
similarity index 94%
rename from app/src/composables/use-form-fields/use-form-fields.ts
rename to app/src/composables/use-form-fields.ts
index a29fe38673..afe5d1d872 100644
--- a/app/src/composables/use-form-fields/use-form-fields.ts
+++ b/app/src/composables/use-form-fields.ts
@@ -6,7 +6,7 @@ import { cloneDeep, orderBy } from 'lodash';
 import { computed, ComputedRef, Ref } from 'vue';
 import { translate } from '@/utils/translate-object-values';
 
-export default function useFormFields(fields: Ref<Field[]>): { formFields: ComputedRef<Field[]> } {
+export function useFormFields(fields: Ref<Field[]>): { formFields: ComputedRef<Field[]> } {
 	const formFields = computed(() => {
 		let formFields = cloneDeep(fields.value);
 
diff --git a/app/src/composables/use-form-fields/index.ts b/app/src/composables/use-form-fields/index.ts
deleted file mode 100644
index ede96c2125..0000000000
--- a/app/src/composables/use-form-fields/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import useFormFields from './use-form-fields';
-
-export { useFormFields };
-export default useFormFields;
diff --git a/app/src/composables/groupable/groupable.ts b/app/src/composables/use-groupable.ts
similarity index 99%
rename from app/src/composables/groupable/groupable.ts
rename to app/src/composables/use-groupable.ts
index 413c310784..4a7235cc44 100644
--- a/app/src/composables/groupable/groupable.ts
+++ b/app/src/composables/use-groupable.ts
@@ -1,4 +1,4 @@
-import { isEmpty, notEmpty } from '@/utils/is-empty/';
+import { isEmpty, notEmpty } from '@/utils/is-empty';
 import { isEqual } from 'lodash';
 import { computed, inject, nextTick, onBeforeUnmount, provide, ref, shallowRef, Ref, watch } from 'vue';
 
diff --git a/app/src/composables/use-item/use-item.ts b/app/src/composables/use-item.ts
similarity index 98%
rename from app/src/composables/use-item/use-item.ts
rename to app/src/composables/use-item.ts
index fd0964b562..6f6e214e56 100644
--- a/app/src/composables/use-item/use-item.ts
+++ b/app/src/composables/use-item.ts
@@ -1,8 +1,9 @@
 import api from '@/api';
 import { VALIDATION_TYPES } from '@/constants';
 import { i18n } from '@/lang';
-import { useFieldsStore, useRelationsStore } from '@/stores/';
-import { APIError } from '@/types';
+import { useFieldsStore } from '@/stores/fields';
+import { useRelationsStore } from '@/stores/relations';
+import { APIError } from '@/types/error';
 import { notify } from '@/utils/notify';
 import { translate } from '@/utils/translate-object-values';
 import { unexpectedError } from '@/utils/unexpected-error';
@@ -12,7 +13,7 @@ import { getEndpoint } from '@directus/shared/utils';
 import { AxiosResponse } from 'axios';
 import { merge } from 'lodash';
 import { computed, ComputedRef, Ref, ref, watch } from 'vue';
-import { usePermissions } from '../use-permissions';
+import { usePermissions } from './use-permissions';
 import { Field, Relation } from '@directus/shared/types';
 
 type UsableItem = {
diff --git a/app/src/composables/use-item/index.ts b/app/src/composables/use-item/index.ts
deleted file mode 100644
index b17d753256..0000000000
--- a/app/src/composables/use-item/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { useItem } from './use-item';
-
-export { useItem };
-export default useItem;
diff --git a/app/src/composables/use-item/readme.md b/app/src/composables/use-item/readme.md
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/app/src/composables/use-local-storage.ts b/app/src/composables/use-local-storage.ts
index e73acee620..6f7c33d7e4 100644
--- a/app/src/composables/use-local-storage.ts
+++ b/app/src/composables/use-local-storage.ts
@@ -1,6 +1,6 @@
 import { ref, watch } from 'vue';
 
-export default function useLocalStorage(key: string) {
+export function useLocalStorage(key: string) {
 	const internalKey = `directus-${key}`;
 	const data = ref<string | number | boolean | object | null>(null);
 
diff --git a/app/src/composables/use-m2m.ts b/app/src/composables/use-m2m.ts
index 6ef2ca869e..eea1898e7f 100644
--- a/app/src/composables/use-m2m.ts
+++ b/app/src/composables/use-m2m.ts
@@ -1,7 +1,8 @@
 import { useCollection } from '@directus/shared/composables';
-import { useCollectionsStore, useRelationsStore } from '@/stores/';
+import { useCollectionsStore } from '@/stores/collections';
+import { useRelationsStore } from '@/stores/relations';
 import { Field, Relation } from '@directus/shared/types';
-import { Collection } from '@/types';
+import { Collection } from '@/types/collections';
 import { computed, ComputedRef, Ref } from 'vue';
 
 export type RelationInfo = {
@@ -25,7 +26,7 @@ type UsableRelation = {
 	relationFields: ComputedRef<Field[]>;
 };
 
-export default function useRelation(collection: Ref<string>, field: Ref<string>): UsableRelation {
+export function useRelation(collection: Ref<string>, field: Ref<string>): UsableRelation {
 	const relationsStore = useRelationsStore();
 	const collectionsStore = useCollectionsStore();
 
diff --git a/app/src/composables/use-permissions.ts b/app/src/composables/use-permissions.ts
index 2f33b22e97..8f9b5fa885 100644
--- a/app/src/composables/use-permissions.ts
+++ b/app/src/composables/use-permissions.ts
@@ -1,4 +1,5 @@
-import { usePermissionsStore, useUserStore } from '@/stores';
+import { usePermissionsStore } from '@/stores/permissions';
+import { useUserStore } from '@/stores/user';
 import { Field } from '@directus/shared/types';
 import { computed, ComputedRef, Ref } from 'vue';
 import { cloneDeep } from 'lodash';
diff --git a/app/src/composables/use-preset/use-preset.ts b/app/src/composables/use-preset.ts
similarity index 98%
rename from app/src/composables/use-preset/use-preset.ts
rename to app/src/composables/use-preset.ts
index 1a77bb9b08..db85fd8cb8 100644
--- a/app/src/composables/use-preset/use-preset.ts
+++ b/app/src/composables/use-preset.ts
@@ -1,4 +1,5 @@
-import { usePresetsStore, useUserStore } from '@/stores';
+import { usePresetsStore } from '@/stores/presets';
+import { useUserStore } from '@/stores/user';
 import { translate } from '@/utils/translate-literal';
 import { Filter, Preset } from '@directus/shared/types';
 import { assign, debounce, isEqual } from 'lodash';
diff --git a/app/src/composables/use-preset/index.ts b/app/src/composables/use-preset/index.ts
deleted file mode 100644
index 9596abf57b..0000000000
--- a/app/src/composables/use-preset/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { usePreset } from './use-preset';
-
-export { usePreset };
-export default usePreset;
diff --git a/app/src/composables/use-preset/types.ts b/app/src/composables/use-preset/types.ts
deleted file mode 100644
index a25965fcce..0000000000
--- a/app/src/composables/use-preset/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Filter } from '@directus/shared/types';
-
-export type Preset = {
-	id: number;
-	collection: string;
-	filter: Filter | null;
-	role: number | null;
-	search: string | null;
-	title: string | null;
-	user: number | null;
-
-	layout_options: Record<string, any>;
-
-	layout_query: Record<string, any>;
-	layout: string | null;
-};
diff --git a/app/src/composables/use-relation/use-relation-m2a.ts b/app/src/composables/use-relation-m2a.ts
similarity index 94%
rename from app/src/composables/use-relation/use-relation-m2a.ts
rename to app/src/composables/use-relation-m2a.ts
index 346b7a5a02..822cd3d442 100644
--- a/app/src/composables/use-relation/use-relation-m2a.ts
+++ b/app/src/composables/use-relation-m2a.ts
@@ -1,5 +1,7 @@
-import { useCollectionsStore, useFieldsStore, useRelationsStore } from '@/stores';
-import { Collection } from '@/types';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
+import { useRelationsStore } from '@/stores/relations';
+import { Collection } from '@/types/collections';
 import { Field, Relation } from '@directus/shared/types';
 import { computed, Ref } from 'vue';
 
diff --git a/app/src/composables/use-relation/use-relation-m2m.ts b/app/src/composables/use-relation-m2m.ts
similarity index 92%
rename from app/src/composables/use-relation/use-relation-m2m.ts
rename to app/src/composables/use-relation-m2m.ts
index 57d4da690e..adf6fbf966 100644
--- a/app/src/composables/use-relation/use-relation-m2m.ts
+++ b/app/src/composables/use-relation-m2m.ts
@@ -1,6 +1,8 @@
-import { useCollectionsStore, useFieldsStore, useRelationsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
+import { useRelationsStore } from '@/stores/relations';
 import { Field, Relation } from '@directus/shared/types';
-import { Collection } from '@/types';
+import { Collection } from '@/types/collections';
 import { computed, Ref } from 'vue';
 
 export type RelationM2M = {
diff --git a/app/src/composables/use-relation/use-relation-m2o.ts b/app/src/composables/use-relation-m2o.ts
similarity index 86%
rename from app/src/composables/use-relation/use-relation-m2o.ts
rename to app/src/composables/use-relation-m2o.ts
index 7189668192..c06583903a 100644
--- a/app/src/composables/use-relation/use-relation-m2o.ts
+++ b/app/src/composables/use-relation-m2o.ts
@@ -1,6 +1,8 @@
-import { useCollectionsStore, useFieldsStore, useRelationsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
+import { useRelationsStore } from '@/stores/relations';
 import { Field, Relation } from '@directus/shared/types';
-import { Collection } from '@/types';
+import { Collection } from '@/types/collections';
 import { computed, Ref } from 'vue';
 
 export type RelationM2O = {
diff --git a/app/src/composables/use-relation/use-relation-multiple.ts b/app/src/composables/use-relation-multiple.ts
similarity index 98%
rename from app/src/composables/use-relation/use-relation-multiple.ts
rename to app/src/composables/use-relation-multiple.ts
index 1c5480ccf6..af5a6b1f86 100644
--- a/app/src/composables/use-relation/use-relation-multiple.ts
+++ b/app/src/composables/use-relation-multiple.ts
@@ -3,7 +3,9 @@ import { getEndpoint } from '@directus/shared/utils';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { clamp, cloneDeep, isEqual, merge, isPlainObject } from 'lodash';
 import { computed, ref, Ref, watch } from 'vue';
-import { RelationM2A, RelationM2M, RelationO2M } from '@/composables/use-relation';
+import { RelationM2A } from '@/composables/use-relation-m2a';
+import { RelationM2M } from '@/composables/use-relation-m2m';
+import { RelationO2M } from '@/composables/use-relation-o2m';
 
 export type RelationQueryMultiple = {
 	page: number;
@@ -18,7 +20,7 @@ export type DisplayItem = {
 	$edits?: number;
 };
 
-export type Item = {
+export type ChangesItem = {
 	create: Record<string, any>[];
 	update: Record<string, any>[];
 	delete: (string | number)[];
@@ -36,7 +38,7 @@ export function useRelationMultiple(
 
 	const { cleanItem, getPage, localDelete } = useUtil();
 
-	const _value = computed<Item>({
+	const _value = computed<ChangesItem>({
 		get() {
 			if (!value.value || Array.isArray(value.value))
 				return {
@@ -44,7 +46,7 @@ export function useRelationMultiple(
 					update: [],
 					delete: [],
 				};
-			return value.value as Item;
+			return value.value as ChangesItem;
 		},
 		set(newValue) {
 			value.value = newValue;
diff --git a/app/src/composables/use-relation/use-relation-o2m.ts b/app/src/composables/use-relation-o2m.ts
similarity index 88%
rename from app/src/composables/use-relation/use-relation-o2m.ts
rename to app/src/composables/use-relation-o2m.ts
index 6ec95c63a1..67d394a839 100644
--- a/app/src/composables/use-relation/use-relation-o2m.ts
+++ b/app/src/composables/use-relation-o2m.ts
@@ -1,6 +1,8 @@
-import { useCollectionsStore, useFieldsStore, useRelationsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
+import { useRelationsStore } from '@/stores/relations';
 import { Field, Relation } from '@directus/shared/types';
-import { Collection } from '@/types';
+import { Collection } from '@/types/collections';
 import { computed, Ref } from 'vue';
 
 export type RelationO2M = {
diff --git a/app/src/composables/use-relation/use-relation-single.ts b/app/src/composables/use-relation-single.ts
similarity index 97%
rename from app/src/composables/use-relation/use-relation-single.ts
rename to app/src/composables/use-relation-single.ts
index a1be2c35f9..7653351be4 100644
--- a/app/src/composables/use-relation/use-relation-single.ts
+++ b/app/src/composables/use-relation-single.ts
@@ -3,7 +3,7 @@ import { getEndpoint } from '@directus/shared/utils';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { merge } from 'lodash';
 import { ref, Ref, watch } from 'vue';
-import { RelationM2O } from '@/composables/use-relation';
+import { RelationM2O } from '@/composables/use-relation-m2o';
 
 export type RelationQuerySingle = {
 	fields: string[];
diff --git a/app/src/composables/use-relation/index.ts b/app/src/composables/use-relation/index.ts
deleted file mode 100644
index c0787c56a7..0000000000
--- a/app/src/composables/use-relation/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useRelationM2A } from './use-relation-m2a';
-import { useRelationM2M } from './use-relation-m2m';
-import { useRelationM2O } from './use-relation-m2o';
-import { useRelationO2M } from './use-relation-o2m';
-import { useRelationSingle } from './use-relation-single';
-import { useRelationMultiple } from './use-relation-multiple';
-
-import type { RelationM2A } from './use-relation-m2a';
-import type { RelationM2M } from './use-relation-m2m';
-import type { RelationM2O } from './use-relation-m2o';
-import type { RelationO2M } from './use-relation-o2m';
-import type { RelationQuerySingle } from './use-relation-single';
-import type { RelationQueryMultiple, DisplayItem, Item as ChangesItem } from './use-relation-multiple';
-
-export {
-	useRelationM2A,
-	RelationM2A,
-	RelationM2M,
-	RelationM2O,
-	RelationO2M,
-	DisplayItem,
-	ChangesItem,
-	useRelationM2M,
-	RelationQueryMultiple,
-	RelationQuerySingle,
-	useRelationM2O,
-	useRelationMultiple,
-	useRelationO2M,
-	useRelationSingle,
-};
diff --git a/app/src/composables/use-scroll-distance/index.ts b/app/src/composables/use-scroll-distance/index.ts
deleted file mode 100644
index 435be47f43..0000000000
--- a/app/src/composables/use-scroll-distance/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import useScrollDistance from './use-scroll-distance';
-
-export { useScrollDistance };
-export default useScrollDistance;
diff --git a/app/src/composables/use-scroll-distance/readme.md b/app/src/composables/use-scroll-distance/readme.md
deleted file mode 100644
index baecbd6a41..0000000000
--- a/app/src/composables/use-scroll-distance/readme.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# `useScrollDistance`
-
-```ts
-function useScrollDistance<T extends Element>(
-	t: T | Ref<T | null | ComponentPublicInstance>
-): { top: Ref<number>; left: Ref<number>; target: Element };
-```
-
-Returns a ref for the top and left scroll positions of the given element. Parameter supports Element, Ref<Element>,
-Ref<ComponentPublicInstance>, and Ref<null>.
-
-## Usage
-
-```html
-<template>
-	<v-sheet
-		ref="el"
-		style="
-			--v-sheet-max-width: 150px;
-			--v-sheet-max-height: 150px;
-			overflow: auto;
-		"
-	>
-		<div style="width: 600px; height: 600px;" />
-	</v-sheet>
-</template>
-
-<script lang="ts">
-	import { defineComponent, ComponentPublicInstance } from 'vue';
-
-	export default defineComponent({
-		setup() {
-			const el = ref<ComponentPublicInstance>(null);
-
-			const { top, left } = useScrollDistance(el);
-
-			return { el };
-		},
-	});
-</script>
-```
diff --git a/app/src/composables/use-scroll-distance/use-scroll-distance.ts b/app/src/composables/use-scroll-distance/use-scroll-distance.ts
deleted file mode 100644
index efeeb81215..0000000000
--- a/app/src/composables/use-scroll-distance/use-scroll-distance.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { throttle } from 'lodash';
-import { ComponentPublicInstance, computed, isRef, onMounted, onUnmounted, ref, Ref, ComputedRef } from 'vue';
-
-type UsableScrollDistance = {
-	top: Ref<number | undefined>;
-	left: Ref<number | undefined>;
-	target: ComputedRef<Element | null>;
-};
-
-export default function useScrollDistance<T extends Element>(
-	t: T | Ref<T | null | ComponentPublicInstance>
-): UsableScrollDistance {
-	const top = ref<number>();
-	const left = ref<number>();
-
-	const onScroll = throttle((event: Event) => {
-		const target = event.target as Element;
-		top.value = target.scrollTop;
-		left.value = target.scrollLeft;
-	}, 20);
-
-	const target = computed<Element | null>(() => {
-		const target = isRef(t) ? t.value : t;
-
-		if (target === null) {
-			return null;
-		}
-
-		if ('$el' in target) {
-			return (target as ComponentPublicInstance).$el as Element;
-		}
-
-		return target as Element;
-	});
-
-	onMounted(() => {
-		target.value?.addEventListener('scroll', onScroll, { passive: true });
-	});
-
-	onUnmounted(() => {
-		target.value?.removeEventListener('scroll', onScroll);
-	});
-
-	return { top, left, target };
-}
diff --git a/app/src/composables/use-shortcut/use-shortcut.ts b/app/src/composables/use-shortcut.ts
similarity index 98%
rename from app/src/composables/use-shortcut/use-shortcut.ts
rename to app/src/composables/use-shortcut.ts
index 620204fef0..0efc5a8f9d 100644
--- a/app/src/composables/use-shortcut/use-shortcut.ts
+++ b/app/src/composables/use-shortcut.ts
@@ -17,7 +17,7 @@ document.body.addEventListener('keyup', (event: KeyboardEvent) => {
 	keysdown.clear();
 });
 
-export default function useShortcut(
+export function useShortcut(
 	shortcuts: string | string[],
 	handler: ShortcutHandler,
 	reference: Ref<HTMLElement | undefined> | Ref<ComponentPublicInstance | undefined> = ref(document.body)
diff --git a/app/src/composables/use-shortcut/index.ts b/app/src/composables/use-shortcut/index.ts
deleted file mode 100644
index 88ab7e094f..0000000000
--- a/app/src/composables/use-shortcut/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import useShortcut from './use-shortcut';
-
-export { useShortcut };
-export default useShortcut;
diff --git a/app/src/composables/use-shortcut/readme.md b/app/src/composables/use-shortcut/readme.md
deleted file mode 100644
index 3c91912d30..0000000000
--- a/app/src/composables/use-shortcut/readme.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# `useShortcut`
-
-```ts
-function useShortcut(
-	shortcut: string | string[],
-	handler: handler: (evt?: ExtendedKeyboardEvent, combo?: string) => void
-): void
-```
-
-Can be used to attach a global keyboard shortcut to a function. Removes the shortcut once the current component unmounts
-
-## Usage
-
-```js
-import { defineComponent } from 'vue';
-import { useShortcut } from '@/composables/use-shortcut';
-
-export default defineComponent({
-	setup(props) {
-		useShortcut('meta+s', save);
-
-		function save() {
-			// ...
-		}
-	},
-});
-```
diff --git a/app/src/composables/size-class/size-class.ts b/app/src/composables/use-size-class.ts
similarity index 86%
rename from app/src/composables/size-class/size-class.ts
rename to app/src/composables/use-size-class.ts
index cb6468c4c3..228ae45983 100644
--- a/app/src/composables/size-class/size-class.ts
+++ b/app/src/composables/use-size-class.ts
@@ -26,7 +26,7 @@ interface RequiredProps {
 	xLarge: boolean;
 }
 
-export default function useSizeClass<T>(props: T & RequiredProps): ComputedRef<string | null> {
+export function useSizeClass<T>(props: T & RequiredProps): ComputedRef<string | null> {
 	const sizeClass = computed<string | null>(() => {
 		if (props.xSmall) return 'x-small';
 		if (props.small) return 'small';
diff --git a/app/src/composables/use-system.ts b/app/src/composables/use-system.ts
index 2133d2c50e..3a6c862c10 100644
--- a/app/src/composables/use-system.ts
+++ b/app/src/composables/use-system.ts
@@ -1,6 +1,5 @@
 import { provide } from 'vue';
 import api from '@/api';
-import * as stores from '@/stores';
 import { API_INJECT, EXTENSIONS_INJECT, STORES_INJECT } from '@directus/shared/constants';
 import { getInterfaces } from '@/interfaces';
 import { getDisplays } from '@/displays';
@@ -8,9 +7,38 @@ import { getLayouts } from '@/layouts';
 import { getModules } from '@/modules';
 import { getPanels } from '@/panels';
 import { getOperations } from '@/operations';
+import { useAppStore } from '@/stores/app';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
+import { useInsightsStore } from '@/stores/insights';
+import { useLatencyStore } from '@/stores/latency';
+import { useNotificationsStore } from '@/stores/notifications';
+import { usePermissionsStore } from '@/stores/permissions';
+import { usePresetsStore } from '@/stores/presets';
+import { useRelationsStore } from '@/stores/relations';
+import { useRequestsStore } from '@/stores/requests';
+import { useServerStore } from '@/stores/server';
+import { useSettingsStore } from '@/stores/settings';
+import { useUserStore } from '@/stores/user';
+import { useFlowsStore } from '@/stores/flows';
 
-export default function useSystem(): void {
-	provide(STORES_INJECT, stores);
+export function useSystem(): void {
+	provide(STORES_INJECT, {
+		useAppStore,
+		useCollectionsStore,
+		useFieldsStore,
+		useInsightsStore,
+		useLatencyStore,
+		useNotificationsStore,
+		usePermissionsStore,
+		usePresetsStore,
+		useRelationsStore,
+		useRequestsStore,
+		useServerStore,
+		useSettingsStore,
+		useUserStore,
+		useFlowsStore,
+	});
 
 	provide(API_INJECT, api);
 
diff --git a/app/src/composables/use-template-data.ts b/app/src/composables/use-template-data.ts
index 34f95a8ada..4914dd4a14 100644
--- a/app/src/composables/use-template-data.ts
+++ b/app/src/composables/use-template-data.ts
@@ -1,5 +1,5 @@
 import api from '@/api';
-import { Collection } from '@/types';
+import { Collection } from '@/types/collections';
 import { getFieldsFromTemplate } from '@directus/shared/utils';
 import { computed, Ref, ref, watch } from 'vue';
 
@@ -9,10 +9,7 @@ type UsableTemplateData = {
 	error: Ref<any>;
 };
 
-export default function useTemplateData(
-	collection: Ref<Collection | null>,
-	primaryKey: Ref<string>
-): UsableTemplateData {
+export function useTemplateData(collection: Ref<Collection | null>, primaryKey: Ref<string>): UsableTemplateData {
 	const templateData = ref<Record<string, any>>();
 	const loading = ref(false);
 	const error = ref<any>(null);
diff --git a/app/src/composables/use-tfa-setup.ts b/app/src/composables/use-tfa-setup.ts
index 89a3ebd844..a215995117 100644
--- a/app/src/composables/use-tfa-setup.ts
+++ b/app/src/composables/use-tfa-setup.ts
@@ -2,7 +2,7 @@ import api from '@/api';
 import { nanoid } from 'nanoid';
 import { onMounted, ref } from 'vue';
 import qrcode from 'qrcode';
-import { useUserStore } from '@/stores';
+import { useUserStore } from '@/stores/user';
 
 export function useTFASetup(initialEnabled: boolean) {
 	const loading = ref(false);
diff --git a/app/src/composables/use-time-from-now/use-time-from-now.ts b/app/src/composables/use-time-from-now.ts
similarity index 67%
rename from app/src/composables/use-time-from-now/use-time-from-now.ts
rename to app/src/composables/use-time-from-now.ts
index 40c124d6a6..47d0606988 100644
--- a/app/src/composables/use-time-from-now/use-time-from-now.ts
+++ b/app/src/composables/use-time-from-now.ts
@@ -1,7 +1,7 @@
-import localizedFormatDistance from '@/utils/localized-format-distance/';
+import { localizedFormatDistance } from '@/utils/localized-format-distance/';
 import { onMounted, onUnmounted, Ref, ref } from 'vue';
 
-export async function useTimeFromNow(date: Date | number, autoUpdate = 60000): Promise<Ref<string>> {
+export function useTimeFromNow(date: Date | number, autoUpdate = 60000): Ref<string> {
 	let interval: number;
 
 	const formatOptions = {
@@ -12,7 +12,7 @@ export async function useTimeFromNow(date: Date | number, autoUpdate = 60000): P
 
 	if (autoUpdate !== 0) {
 		onMounted(() => {
-			interval = window.setInterval(async () => {
+			interval = window.setInterval(() => {
 				formattedDate.value = localizedFormatDistance(date, new Date(), formatOptions);
 			}, autoUpdate);
 		});
diff --git a/app/src/composables/use-time-from-now/index.ts b/app/src/composables/use-time-from-now/index.ts
deleted file mode 100644
index 1e5c898b5c..0000000000
--- a/app/src/composables/use-time-from-now/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { useTimeFromNow } from './use-time-from-now';
-
-export { useTimeFromNow };
-export default useTimeFromNow;
diff --git a/app/src/composables/use-time-from-now/readme.md b/app/src/composables/use-time-from-now/readme.md
deleted file mode 100644
index 75ea19efb1..0000000000
--- a/app/src/composables/use-time-from-now/readme.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# `useTimeFromNow`
-
-```ts
-function useTimeFromNow(date: Date | number, autoUpdate: number = 60000): Ref<string>;
-```
-
-Composable that can be used to create a relative time format that is auto updated every `autoUpdate` milliseconds.
-
-## Usage
-
-```js
-import { defineComponent } from 'vue';
-import { useTimeFromNow } from '@/composables/use-time-from-now';
-
-export default defineComponent({
-	setup(props) {
-		const timeFromNow = useTimeFromNow(Date.now());
-		return { timeFromNow };
-	},
-});
-```
diff --git a/app/src/composables/use-title/use-title.ts b/app/src/composables/use-title.ts
similarity index 100%
rename from app/src/composables/use-title/use-title.ts
rename to app/src/composables/use-title.ts
diff --git a/app/src/composables/use-title/index.ts b/app/src/composables/use-title/index.ts
deleted file mode 100644
index 122f3049bb..0000000000
--- a/app/src/composables/use-title/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { useTitle } from './use-title';
-
-export { useTitle };
-export default useTitle;
diff --git a/app/src/composables/use-translation-strings.ts b/app/src/composables/use-translation-strings.ts
index 3704c6f8bd..d61250bbef 100644
--- a/app/src/composables/use-translation-strings.ts
+++ b/app/src/composables/use-translation-strings.ts
@@ -2,7 +2,7 @@ import { ref, Ref } from 'vue';
 import api from '@/api';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { Language, i18n } from '@/lang';
-import { useUserStore } from '@/stores';
+import { useUserStore } from '@/stores/user';
 
 export type Translation = {
 	language: string;
diff --git a/app/src/composables/use-window-size/use-window-size.ts b/app/src/composables/use-window-size.ts
similarity index 87%
rename from app/src/composables/use-window-size/use-window-size.ts
rename to app/src/composables/use-window-size.ts
index 5193eb6144..33c3d09281 100644
--- a/app/src/composables/use-window-size/use-window-size.ts
+++ b/app/src/composables/use-window-size.ts
@@ -5,7 +5,7 @@ type WindowSizeOptions = {
 	throttle: number;
 };
 
-export default function useWindowSize(options: WindowSizeOptions = { throttle: 100 }): {
+export function useWindowSize(options: WindowSizeOptions = { throttle: 100 }): {
 	width: Ref<number>;
 	height: Ref<number>;
 } {
diff --git a/app/src/composables/use-window-size/index.ts b/app/src/composables/use-window-size/index.ts
deleted file mode 100644
index b6fdd674f2..0000000000
--- a/app/src/composables/use-window-size/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import useWindowSize from './use-window-size';
-
-export { useWindowSize };
-export default useWindowSize;
diff --git a/app/src/composables/use-window-size/readme.md b/app/src/composables/use-window-size/readme.md
deleted file mode 100644
index 67a9231b97..0000000000
--- a/app/src/composables/use-window-size/readme.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# `useWindowSize`
-
-```ts
-function useWindowSize(options: WindowSizeOptions = { throttle: 100 }): { width: Ref<number>; height: Ref<number> };
-```
-
-Returns the window's width and height in an object. These values are reactive.
-
-The optional `options` parameter allows you to set the throttling speed.
-
-## Usage
-
-```js
-import { defineComponent } from 'vue';
-import { useWindowSize } from '@/composables/use-window-size/';
-
-export default defineComponent({
-	setup(props) {
-		const { width, height } = useWindowSize();
-	},
-});
-```
diff --git a/app/src/directives/click-outside/click-outside.ts b/app/src/directives/click-outside.ts
similarity index 100%
rename from app/src/directives/click-outside/click-outside.ts
rename to app/src/directives/click-outside.ts
diff --git a/app/src/directives/click-outside/index.ts b/app/src/directives/click-outside/index.ts
deleted file mode 100644
index d8a51ac39c..0000000000
--- a/app/src/directives/click-outside/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ClickOutside from './click-outside';
-
-export { ClickOutside };
-export default ClickOutside;
diff --git a/app/src/directives/click-outside/readme.md b/app/src/directives/click-outside/readme.md
deleted file mode 100644
index 2621dc96af..0000000000
--- a/app/src/directives/click-outside/readme.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# Click Outside
-
-Adds a handler when clicking outside the element.
-
-## Usage:
-
-```html
-<template>
-	<div v-click-outside="() => (count = count + 1)">You have clicked outside this div {{ count }} times.</div>
-</template>
-```
-
-For more control, you can pass an option with the following properties:
-
-```html
-<template>
-	<div
-		v-click-outside="{
-			handler: () => (count = count + 1),
-			middleware: () => true,
-			events: ['pointerdown'],
-			disabled: false
-		}"
-	>
-		You have clicked outside this div {{ count }} times.
-	</div>
-</template>
-```
-
-### Options
-
-| Name         | Description                                               | Type                        | Default           |
-| ------------ | --------------------------------------------------------- | --------------------------- | ----------------- |
-| `handler`    | Function that is fired when the event is triggered        | `(event: Event) => void`    | `() => undefined` |
-| `middleware` | Function that allows you to dynamically fire the handler. | `(event: Event) => boolean` | `() => true`      |
-| `events`     | Array of individual events that the directive triggers on | `string[]`                  | `['pointerdown']` |
-| `disabled`   | Disable the directive completely                          | `boolean`                   | `false`           |
diff --git a/app/src/directives/context-menu/context-menu.ts b/app/src/directives/context-menu.ts
similarity index 100%
rename from app/src/directives/context-menu/context-menu.ts
rename to app/src/directives/context-menu.ts
diff --git a/app/src/directives/context-menu/index.ts b/app/src/directives/context-menu/index.ts
deleted file mode 100644
index e291c8b125..0000000000
--- a/app/src/directives/context-menu/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ContextMenu from './context-menu';
-
-export { ContextMenu };
-export default ContextMenu;
diff --git a/app/src/directives/context-menu/readme.md b/app/src/directives/context-menu/readme.md
deleted file mode 100644
index 7170ec7582..0000000000
--- a/app/src/directives/context-menu/readme.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Context Menu
-
-## Usage
-
-This allows the element to open a context menu with the specified ref. It adds `contextmenu` event (right click) to
-activate/open the context menu, and `pointerdown` event on document to deactivate/close when it's not the event target.
-
-```html
-<element v-context-menu="'contextMenu'"></element>
-```
-
-Somewhere in the same component:
-
-```html
-<v-menu ref="contextMenu">
-	<!-- menu items here -->
-</v-menu>
-```
diff --git a/app/src/directives/focus/focus.ts b/app/src/directives/focus.ts
similarity index 100%
rename from app/src/directives/focus/focus.ts
rename to app/src/directives/focus.ts
diff --git a/app/src/directives/focus/readme.md b/app/src/directives/focus/readme.md
deleted file mode 100644
index 0c5a2158ca..0000000000
--- a/app/src/directives/focus/readme.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Focus
-
-The focus directive is basically `autofocus`, but works in Vue. Because of the way HTML works, `autofocus` isn't
-triggered for DOM elements that are added after first load, which means that `autofocus` basically never works in the
-context of the Directus app. That's where you can use `v-focus` instead:
-
-```html
-<v-input v-focus />
-```
-
-## Value
-
-You can pass it a boolean value if you need more fine grained control over when focus is set:
-
-```html
-<v-input v-focus="active" />
-```
diff --git a/app/src/directives/readme.md b/app/src/directives/readme.md
deleted file mode 100644
index 92147936f9..0000000000
--- a/app/src/directives/readme.md
+++ /dev/null
@@ -1,4 +0,0 @@
-# Directives
-
-Directives are functions that are available on Vue components in templates. For example `v-focus` or
-`v-tooltip="'Hello world!'`
diff --git a/app/src/directives/register.ts b/app/src/directives/register.ts
index 745d143cb8..61e9049703 100644
--- a/app/src/directives/register.ts
+++ b/app/src/directives/register.ts
@@ -1,8 +1,8 @@
 import { App } from 'vue';
-import ClickOutside from './click-outside/click-outside';
-import ContextMenu from './context-menu/context-menu';
-import Focus from './focus/focus';
-import Tooltip from './tooltip/tooltip';
+import ClickOutside from './click-outside';
+import ContextMenu from './context-menu';
+import Focus from './focus';
+import Tooltip from './tooltip';
 import Markdown from './markdown';
 
 export function registerDirectives(app: App): void {
diff --git a/app/src/directives/tooltip/tooltip.ts b/app/src/directives/tooltip.ts
similarity index 100%
rename from app/src/directives/tooltip/tooltip.ts
rename to app/src/directives/tooltip.ts
diff --git a/app/src/directives/tooltip/index.ts b/app/src/directives/tooltip/index.ts
deleted file mode 100644
index bba5e6fcfa..0000000000
--- a/app/src/directives/tooltip/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import Tooltip from './tooltip';
-
-export { Tooltip };
-export default Tooltip;
diff --git a/app/src/directives/tooltip/readme.md b/app/src/directives/tooltip/readme.md
deleted file mode 100644
index 107fb2e931..0000000000
--- a/app/src/directives/tooltip/readme.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Tooltip
-
-The tooltip can display more detailed information about an element to clarify its use.
-
-```html
-<v-button v-tooltip="it does absolutely nothing">This is a button</v-button>
-```
-
-## Options
-
-The tooltip is displayed at the bottom of an element by default.
-
-| Option     | Description                                     |
-| ---------- | ----------------------------------------------- |
-| `left`     | Display the tooltip to the left of the element  |
-| `right`    | Display the tooltip to the right of the element |
-| `top`      | Display the tooltip on top of the element       |
-| `bottom`   | Display the tooltip on bottom of the element    |
-| `start`    | Places the tooltip at the start of the element  |
-| `end`      | Places the tooltip at the end of the element    |
-| `instant`  | Shows the tooltip instantly on hover            |
-| `inverted` | Inverts all colors                              |
diff --git a/app/src/displays/collection/index.ts b/app/src/displays/collection/index.ts
index 54baa9c1ca..4b7ca895fe 100644
--- a/app/src/displays/collection/index.ts
+++ b/app/src/displays/collection/index.ts
@@ -1,6 +1,6 @@
 import { defineDisplay } from '@directus/shared/utils';
 import DisplayCollection from './collection.vue';
-import { useCollectionsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
 
 export default defineDisplay({
 	id: 'collection',
diff --git a/app/src/displays/color/color.vue b/app/src/displays/color/color.vue
index 809a11ad22..beb3e12a7c 100644
--- a/app/src/displays/color/color.vue
+++ b/app/src/displays/color/color.vue
@@ -8,7 +8,7 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
 import Color from 'color';
-import { isHex } from '@/utils/color';
+import { isHex } from '@/utils/is-hex';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/displays/datetime/datetime.vue b/app/src/displays/datetime/datetime.vue
index 1fe4aaee39..23febcae03 100644
--- a/app/src/displays/datetime/datetime.vue
+++ b/app/src/displays/datetime/datetime.vue
@@ -5,9 +5,9 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
 import { ref, watch, computed, onMounted, onUnmounted } from 'vue';
-import localizedFormat from '@/utils/localized-format';
-import localizedFormatDistance from '@/utils/localized-format-distance';
-import localizedFormatDistanceStrict from '@/utils/localized-format-distance-strict';
+import { localizedFormat } from '@/utils/localized-format';
+import { localizedFormatDistance } from '@/utils/localized-format-distance';
+import { localizedFormatDistanceStrict } from '@/utils/localized-format-distance-strict';
 import { parseISO, parse } from 'date-fns';
 
 interface Props {
diff --git a/app/src/displays/datetime/index.ts b/app/src/displays/datetime/index.ts
index bde41584d7..8a8ebd4cf3 100644
--- a/app/src/displays/datetime/index.ts
+++ b/app/src/displays/datetime/index.ts
@@ -1,5 +1,5 @@
-import localizedFormat from '@/utils/localized-format';
-import localizedFormatDistance from '@/utils/localized-format-distance';
+import { localizedFormat } from '@/utils/localized-format';
+import { localizedFormatDistance } from '@/utils/localized-format-distance';
 import { defineDisplay } from '@directus/shared/utils';
 import { parse, parseISO } from 'date-fns';
 import { i18n } from '@/lang';
diff --git a/app/src/displays/file/file.vue b/app/src/displays/file/file.vue
index 4a5dee0617..e83795ac33 100644
--- a/app/src/displays/file/file.vue
+++ b/app/src/displays/file/file.vue
@@ -17,8 +17,8 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed, ref } from 'vue';
-import readableMimeType from '@/utils/readable-mime-type';
-import useElementSize from '@/composables/use-element-size';
+import { readableMimeType } from '@/utils/readable-mime-type';
+import { useElementSize } from '@/composables/use-element-size';
 import { getRootPath } from '@/utils/get-root-path';
 
 type File = {
diff --git a/app/src/displays/filesize/index.ts b/app/src/displays/filesize/index.ts
index 9d423a50a4..22b8b9c342 100644
--- a/app/src/displays/filesize/index.ts
+++ b/app/src/displays/filesize/index.ts
@@ -1,5 +1,5 @@
 import { defineDisplay } from '@directus/shared/utils';
-import formatFilesize from '@/utils/format-filesize';
+import { formatFilesize } from '@/utils/format-filesize';
 
 export default defineDisplay({
 	id: 'filesize',
diff --git a/app/src/displays/icon/icon.vue b/app/src/displays/icon/icon.vue
index 59fef02f6f..7bf2b58357 100644
--- a/app/src/displays/icon/icon.vue
+++ b/app/src/displays/icon/icon.vue
@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { isHex } from '@/utils/color';
+import { isHex } from '@/utils/is-hex';
 
 export default defineComponent({
 	name: 'DisplayIcon',
diff --git a/app/src/displays/image/image.vue b/app/src/displays/image/image.vue
index bac953ff5d..cb8c7affce 100644
--- a/app/src/displays/image/image.vue
+++ b/app/src/displays/image/image.vue
@@ -13,7 +13,6 @@
 
 <script lang="ts">
 import { getRootPath } from '@/utils/get-root-path';
-import ValueNull from '@/views/private/components/value-null';
 import { computed, defineComponent, PropType, ref } from 'vue';
 
 type Image = {
@@ -23,7 +22,6 @@ type Image = {
 };
 
 export default defineComponent({
-	components: { ValueNull },
 	props: {
 		value: {
 			type: Object as PropType<Image>,
diff --git a/app/src/displays/mime-type/index.ts b/app/src/displays/mime-type/index.ts
index f8058dcad2..76ac9ce051 100644
--- a/app/src/displays/mime-type/index.ts
+++ b/app/src/displays/mime-type/index.ts
@@ -1,5 +1,5 @@
 import { defineDisplay } from '@directus/shared/utils';
-import readableMimeType from '@/utils/readable-mime-type';
+import { readableMimeType } from '@/utils/readable-mime-type';
 import mime from 'mime/lite';
 
 export default defineDisplay({
diff --git a/app/src/displays/readme.md b/app/src/displays/readme.md
deleted file mode 100644
index 51eae108f3..0000000000
--- a/app/src/displays/readme.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Displays
-
-Displays are functions / components that are used in the system to display data. They are small wrappers that help
-display values in a matter that makes sense for the saved value, for example rendering a color swatch for a saved color
-value.
-
-## Functions vs Components
-
-A _Display_ can either be a function, or a component. The function gets the value, and returns a string of how to
-display this value. A Vue component similarly gets the value through the `value` prop, and can render whatever makes
-sense for the value.
diff --git a/app/src/displays/related-values/index.ts b/app/src/displays/related-values/index.ts
index 41a1964970..98ecee0f5d 100644
--- a/app/src/displays/related-values/index.ts
+++ b/app/src/displays/related-values/index.ts
@@ -1,9 +1,9 @@
 import { defineDisplay } from '@directus/shared/utils';
-import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
+import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { getFieldsFromTemplate } from '@directus/shared/utils';
-import getRelatedCollection from '@/utils/get-related-collection';
+import { getRelatedCollection } from '@/utils/get-related-collection';
 import DisplayRelatedValues from './related-values.vue';
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { getDisplay } from '@/displays';
 import { get, set } from 'lodash';
 import { renderPlainStringTemplate } from '@/utils/render-string-template';
diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index d665d1677b..d972e118fb 100644
--- a/app/src/displays/related-values/related-values.vue
+++ b/app/src/displays/related-values/related-values.vue
@@ -36,14 +36,12 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, PropType } from 'vue';
-import getRelatedCollection from '@/utils/get-related-collection';
+import { getRelatedCollection } from '@/utils/get-related-collection';
 import { useCollection } from '@directus/shared/composables';
-import ValueNull from '@/views/private/components/value-null';
 import { getLocalTypeForField } from '../../modules/settings/routes/data-model/get-local-type';
 import { get } from 'lodash';
 
 export default defineComponent({
-	components: { ValueNull },
 	props: {
 		collection: {
 			type: String,
diff --git a/app/src/displays/translations/index.ts b/app/src/displays/translations/index.ts
index b25f7a2e5b..b28c9c5c08 100644
--- a/app/src/displays/translations/index.ts
+++ b/app/src/displays/translations/index.ts
@@ -1,6 +1,7 @@
 import { getDisplay } from '@/displays';
-import { useFieldsStore, useRelationsStore } from '@/stores';
-import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
+import { useFieldsStore } from '@/stores/fields';
+import { useRelationsStore } from '@/stores/relations';
+import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { getRelatedCollection } from '@/utils/get-related-collection';
 import { renderPlainStringTemplate } from '@/utils/render-string-template';
 import { defineDisplay, getFieldsFromTemplate } from '@directus/shared/utils';
diff --git a/app/src/displays/translations/translations.vue b/app/src/displays/translations/translations.vue
index 67573a6f91..37fe40086b 100644
--- a/app/src/displays/translations/translations.vue
+++ b/app/src/displays/translations/translations.vue
@@ -31,13 +31,11 @@
 
 <script lang="ts">
 import { defineComponent, computed, PropType, toRefs } from 'vue';
-import ValueNull from '@/views/private/components/value-null';
-import useRelation from '@/composables/use-m2m';
-import { useUserStore } from '@/stores';
+import { useRelation } from '@/composables/use-m2m';
+import { useUserStore } from '@/stores/user';
 import { notEmpty } from '@/utils/is-empty';
 
 export default defineComponent({
-	components: { ValueNull },
 	props: {
 		collection: {
 			type: String,
diff --git a/app/src/hydrate.ts b/app/src/hydrate.ts
index ff56eb7e72..ab672b358c 100644
--- a/app/src/hydrate.ts
+++ b/app/src/hydrate.ts
@@ -1,22 +1,20 @@
 import { setLanguage } from '@/lang/set-language';
 import { register as registerModules, unregister as unregisterModules } from '@/modules/register';
 import { getBasemapSources } from '@/utils/geometry/basemap';
-import {
-	useAppStore,
-	useCollectionsStore,
-	useFieldsStore,
-	useLatencyStore,
-	useInsightsStore,
-	useFlowsStore,
-	usePermissionsStore,
-	usePresetsStore,
-	useRelationsStore,
-	useRequestsStore,
-	useServerStore,
-	useSettingsStore,
-	useUserStore,
-	useNotificationsStore,
-} from '@/stores';
+import { useAppStore } from '@/stores/app';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
+import { useLatencyStore } from '@/stores/latency';
+import { useInsightsStore } from '@/stores/insights';
+import { useFlowsStore } from '@/stores/flows';
+import { usePermissionsStore } from '@/stores/permissions';
+import { usePresetsStore } from '@/stores/presets';
+import { useRelationsStore } from '@/stores/relations';
+import { useRequestsStore } from '@/stores/requests';
+import { useServerStore } from '@/stores/server';
+import { useSettingsStore } from '@/stores/settings';
+import { useUserStore } from '@/stores/user';
+import { useNotificationsStore } from '@/stores/notifications';
 import { useTranslationStrings } from '@/composables/use-translation-strings';
 
 type GenericStore = {
diff --git a/app/src/interfaces/_system/system-collection/system-collection.vue b/app/src/interfaces/_system/system-collection/system-collection.vue
index 2d7f8bb6af..76096b80f3 100644
--- a/app/src/interfaces/_system/system-collection/system-collection.vue
+++ b/app/src/interfaces/_system/system-collection/system-collection.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
-import { useCollectionsStore } from '@/stores/';
+import { useCollectionsStore } from '@/stores/collections';
 import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
diff --git a/app/src/interfaces/_system/system-collections/system-collections.vue b/app/src/interfaces/_system/system-collections/system-collections.vue
index f227fd8064..c518cc30ce 100644
--- a/app/src/interfaces/_system/system-collections/system-collections.vue
+++ b/app/src/interfaces/_system/system-collections/system-collections.vue
@@ -14,7 +14,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
-import { useCollectionsStore } from '@/stores/';
+import { useCollectionsStore } from '@/stores/collections';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/interfaces/_system/system-field/system-field.vue b/app/src/interfaces/_system/system-field/system-field.vue
index 9f7881cd39..69c401b09c 100644
--- a/app/src/interfaces/_system/system-field/system-field.vue
+++ b/app/src/interfaces/_system/system-field/system-field.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, inject, ref, PropType, watch } from 'vue';
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { Field } from '@directus/shared/types';
 
 export default defineComponent({
diff --git a/app/src/interfaces/_system/system-filter/input-group.vue b/app/src/interfaces/_system/system-filter/input-group.vue
index 553db819c8..7c677bb32c 100644
--- a/app/src/interfaces/_system/system-filter/input-group.vue
+++ b/app/src/interfaces/_system/system-filter/input-group.vue
@@ -69,7 +69,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { useI18n } from 'vue-i18n';
 import { clone, get } from 'lodash';
 import InputComponent from './input-component.vue';
diff --git a/app/src/interfaces/_system/system-filter/nodes.vue b/app/src/interfaces/_system/system-filter/nodes.vue
index d343cc17fa..6647bcb4f3 100644
--- a/app/src/interfaces/_system/system-filter/nodes.vue
+++ b/app/src/interfaces/_system/system-filter/nodes.vue
@@ -97,7 +97,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { extractFieldFromFunction } from '@/utils/extract-field-from-function';
 import { useSync } from '@directus/shared/composables';
 import {
diff --git a/app/src/interfaces/_system/system-filter/system-filter.vue b/app/src/interfaces/_system/system-filter/system-filter.vue
index e16d08dd11..4ec0b7caf4 100644
--- a/app/src/interfaces/_system/system-filter/system-filter.vue
+++ b/app/src/interfaces/_system/system-filter/system-filter.vue
@@ -78,7 +78,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { Filter, Type, FieldFunction } from '@directus/shared/types';
 import { getFilterOperatorsForType, getOutputTypeForFunction } from '@directus/shared/utils';
 import { cloneDeep, get, isEmpty, set } from 'lodash';
diff --git a/app/src/interfaces/_system/system-folder/folder.vue b/app/src/interfaces/_system/system-folder/folder.vue
index 56e82f6af0..c36aace31f 100644
--- a/app/src/interfaces/_system/system-folder/folder.vue
+++ b/app/src/interfaces/_system/system-folder/folder.vue
@@ -46,7 +46,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
 import FolderListItem from './folder-list-item.vue';
-import useFolders, { Folder } from '@/composables/use-folders';
+import { useFolders, Folder } from '@/composables/use-folders';
 import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
diff --git a/app/src/interfaces/_system/system-mfa-setup/system-mfa-setup.vue b/app/src/interfaces/_system/system-mfa-setup/system-mfa-setup.vue
index 95fb39c1bb..7a6a2d35e5 100644
--- a/app/src/interfaces/_system/system-mfa-setup/system-mfa-setup.vue
+++ b/app/src/interfaces/_system/system-mfa-setup/system-mfa-setup.vue
@@ -87,7 +87,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, watch, computed, nextTick } from 'vue';
-import { useUserStore } from '@/stores';
+import { useUserStore } from '@/stores/user';
 import { useTFASetup } from '@/composables/use-tfa-setup';
 import { User } from '@directus/shared/types';
 
diff --git a/app/src/interfaces/_system/system-scope/system-scope.vue b/app/src/interfaces/_system/system-scope/system-scope.vue
index 310d3c6d21..c24576b55c 100644
--- a/app/src/interfaces/_system/system-scope/system-scope.vue
+++ b/app/src/interfaces/_system/system-scope/system-scope.vue
@@ -15,7 +15,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { computed, defineComponent, ref, watch } from 'vue';
-import DrawerCollection from '@/views/private/components/drawer-collection';
+import DrawerCollection from '@/views/private/components/drawer-collection.vue';
 import api from '@/api';
 import { userName } from '@/utils/user-name';
 
diff --git a/app/src/interfaces/datetime/datetime.vue b/app/src/interfaces/datetime/datetime.vue
index 376c64d41c..c36cdadac1 100644
--- a/app/src/interfaces/datetime/datetime.vue
+++ b/app/src/interfaces/datetime/datetime.vue
@@ -35,7 +35,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { computed, defineComponent, PropType, ref, watch } from 'vue';
-import formatLocalized from '@/utils/localized-format';
+import { localizedFormat } from '@/utils/localized-format';
 import { isValid, parse, parseISO } from 'date-fns';
 
 export default defineComponent({
@@ -90,7 +90,7 @@ export default defineComponent({
 				if (props.type === 'date') format = String(t('date-fns_date'));
 				if (props.type === 'time') format = String(t(timeFormat));
 
-				displayValue.value = await formatLocalized(parseValue(props.value), format);
+				displayValue.value = localizedFormat(parseValue(props.value), format);
 			}
 
 			function parseValue(value: string): Date {
diff --git a/app/src/interfaces/file-image/file-image.vue b/app/src/interfaces/file-image/file-image.vue
index f042b326bc..3581999578 100644
--- a/app/src/interfaces/file-image/file-image.vue
+++ b/app/src/interfaces/file-image/file-image.vue
@@ -73,13 +73,14 @@
 
 <script setup lang="ts">
 import api, { addTokenToURL } from '@/api';
-import { RelationQuerySingle, useRelationM2O, useRelationSingle } from '@/composables/use-relation';
-import formatFilesize from '@/utils/format-filesize';
+import { useRelationM2O } from '@/composables/use-relation-m2o';
+import { RelationQuerySingle, useRelationSingle } from '@/composables/use-relation-single';
+import { formatFilesize } from '@/utils/format-filesize';
 import { getRootPath } from '@/utils/get-root-path';
 import { readableMimeType } from '@/utils/readable-mime-type';
-import DrawerItem from '@/views/private/components/drawer-item';
-import FileLightbox from '@/views/private/components/file-lightbox';
-import ImageEditor from '@/views/private/components/image-editor';
+import DrawerItem from '@/views/private/components/drawer-item.vue';
+import FileLightbox from '@/views/private/components/file-lightbox.vue';
+import ImageEditor from '@/views/private/components/image-editor.vue';
 import { computed, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 
diff --git a/app/src/interfaces/file/file.vue b/app/src/interfaces/file/file.vue
index 360e5ab633..beb3c262bb 100644
--- a/app/src/interfaces/file/file.vue
+++ b/app/src/interfaces/file/file.vue
@@ -139,14 +139,15 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { ref, computed, toRefs } from 'vue';
-import DrawerCollection from '@/views/private/components/drawer-collection';
+import DrawerCollection from '@/views/private/components/drawer-collection.vue';
 import api from '@/api';
-import readableMimeType from '@/utils/readable-mime-type';
+import { readableMimeType } from '@/utils/readable-mime-type';
 import { getRootPath } from '@/utils/get-root-path';
 import { unexpectedError } from '@/utils/unexpected-error';
-import DrawerItem from '@/views/private/components/drawer-item';
+import DrawerItem from '@/views/private/components/drawer-item.vue';
 import { addQueryToPath } from '@/utils/add-query-to-path';
-import { useRelationM2O, useRelationSingle, RelationQuerySingle } from '@/composables/use-relation';
+import { useRelationM2O } from '@/composables/use-relation-m2o';
+import { useRelationSingle, RelationQuerySingle } from '@/composables/use-relation-single';
 
 type FileInfo = {
 	id: string;
diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index ce98fc662e..387a4ca09d 100644
--- a/app/src/interfaces/files/files.vue
+++ b/app/src/interfaces/files/files.vue
@@ -123,15 +123,17 @@
 </template>
 
 <script setup lang="ts">
-import { useRelationM2M, useRelationMultiple, RelationQueryMultiple, DisplayItem } from '@/composables/use-relation';
+import { useRelationM2M } from '@/composables/use-relation-m2m';
+import { useRelationMultiple, RelationQueryMultiple, DisplayItem } from '@/composables/use-relation-multiple';
 import { computed, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
-import DrawerItem from '@/views/private/components/drawer-item';
-import DrawerCollection from '@/views/private/components/drawer-collection';
+import DrawerItem from '@/views/private/components/drawer-item.vue';
+import DrawerCollection from '@/views/private/components/drawer-collection.vue';
 import Draggable from 'vuedraggable';
-import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
+import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { get, clamp } from 'lodash';
-import { usePermissionsStore, useUserStore } from '@/stores';
+import { usePermissionsStore } from '@/stores/permissions';
+import { useUserStore } from '@/stores/user';
 import { addTokenToURL } from '@/api';
 import { getRootPath } from '@/utils/get-root-path';
 import { getFieldsFromTemplate } from '@directus/shared/utils';
diff --git a/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue b/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
index b8bc20c507..dc6f4ca474 100644
--- a/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
+++ b/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
@@ -183,7 +183,7 @@ import useImage from './useImage';
 import useLink from './useLink';
 import useMedia from './useMedia';
 import useSourceCode from './useSourceCode';
-import { useSettingsStore } from '@/stores';
+import { useSettingsStore } from '@/stores/settings';
 import { SettingsStorageAssetPreset } from '@directus/shared/types';
 
 import 'tinymce/tinymce';
diff --git a/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue b/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue
index df01cb78e7..1cb44d71ae 100644
--- a/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue
+++ b/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue
@@ -218,8 +218,8 @@ import 'codemirror/addon/display/placeholder.js';
 
 import { applyEdit, CustomSyntax, Alteration } from './edits';
 import { getPublicURL } from '@/utils/get-root-path';
-import useShortcut from '@/composables/use-shortcut';
-import translateShortcut from '@/utils/translate-shortcut';
+import { useShortcut } from '@/composables/use-shortcut';
+import { translateShortcut } from '@/utils/translate-shortcut';
 import { percentage } from '@/utils/percentage';
 import { useWindowSize } from '@/composables/use-window-size';
 
diff --git a/app/src/interfaces/list-m2a/list-m2a.vue b/app/src/interfaces/list-m2a/list-m2a.vue
index 6518605edd..5af2236698 100644
--- a/app/src/interfaces/list-m2a/list-m2a.vue
+++ b/app/src/interfaces/list-m2a/list-m2a.vue
@@ -136,12 +136,13 @@
 </template>
 
 <script setup lang="ts">
-import { DisplayItem, RelationQueryMultiple, useRelationM2A, useRelationMultiple } from '@/composables/use-relation';
+import { useRelationM2A } from '@/composables/use-relation-m2a';
+import { DisplayItem, RelationQueryMultiple, useRelationMultiple } from '@/composables/use-relation-multiple';
 import { addRelatedPrimaryKeyToFields } from '@/utils/add-related-primary-key-to-fields';
-import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
+import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { hideDragImage } from '@/utils/hide-drag-image';
-import DrawerCollection from '@/views/private/components/drawer-collection';
-import DrawerItem from '@/views/private/components/drawer-item';
+import DrawerCollection from '@/views/private/components/drawer-collection.vue';
+import DrawerItem from '@/views/private/components/drawer-item.vue';
 import { Filter } from '@directus/shared/types';
 import { getFieldsFromTemplate } from '@directus/shared/utils';
 import { clamp, get } from 'lodash';
diff --git a/app/src/interfaces/list-m2m/list-m2m.vue b/app/src/interfaces/list-m2m/list-m2m.vue
index f9ccab095c..6f4ce1ddd6 100644
--- a/app/src/interfaces/list-m2m/list-m2m.vue
+++ b/app/src/interfaces/list-m2m/list-m2m.vue
@@ -81,19 +81,21 @@
 </template>
 
 <script setup lang="ts">
-import { useRelationM2M, useRelationMultiple, RelationQueryMultiple, DisplayItem } from '@/composables/use-relation';
+import { useRelationM2M } from '@/composables/use-relation-m2m';
+import { useRelationMultiple, RelationQueryMultiple, DisplayItem } from '@/composables/use-relation-multiple';
 import { parseFilter } from '@/utils/parse-filter';
 import { Filter } from '@directus/shared/types';
 import { deepMap, getFieldsFromTemplate } from '@directus/shared/utils';
 import { render } from 'micromustache';
 import { computed, inject, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
-import DrawerItem from '@/views/private/components/drawer-item';
-import DrawerCollection from '@/views/private/components/drawer-collection';
+import DrawerItem from '@/views/private/components/drawer-item.vue';
+import DrawerCollection from '@/views/private/components/drawer-collection.vue';
 import Draggable from 'vuedraggable';
-import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
+import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { isEmpty, get, clamp } from 'lodash';
-import { usePermissionsStore, useUserStore } from '@/stores';
+import { usePermissionsStore } from '@/stores/permissions';
+import { useUserStore } from '@/stores/user';
 import { addRelatedPrimaryKeyToFields } from '@/utils/add-related-primary-key-to-fields';
 
 const props = withDefaults(
diff --git a/app/src/interfaces/list-o2m-tree-view/item-preview.vue b/app/src/interfaces/list-o2m-tree-view/item-preview.vue
index 81de3eb562..6e26c10f76 100644
--- a/app/src/interfaces/list-o2m-tree-view/item-preview.vue
+++ b/app/src/interfaces/list-o2m-tree-view/item-preview.vue
@@ -26,8 +26,8 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import DrawerItem from '@/views/private/components/drawer-item';
-import { RelationO2M } from '@/composables/use-relation';
+import DrawerItem from '@/views/private/components/drawer-item.vue';
+import { RelationO2M } from '@/composables/use-relation-o2m';
 import { ref } from 'vue';
 
 const props = withDefaults(
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 b19d1df7fb..042a194d34 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
@@ -31,7 +31,8 @@ import { Filter } from '@directus/shared/types';
 import { parseFilter } from '@/utils/parse-filter';
 import { render } from 'micromustache';
 import { deepMap } from '@directus/shared/utils';
-import { ChangesItem, useRelationO2M } from '@/composables/use-relation';
+import { useRelationO2M } from '@/composables/use-relation-o2m';
+import { ChangesItem } from '@/composables/use-relation-multiple';
 import { addRelatedPrimaryKeyToFields } from '@/utils/add-related-primary-key-to-fields';
 
 const props = withDefaults(
diff --git a/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue b/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue
index d548e2fdb7..dc4283f281 100644
--- a/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue
+++ b/app/src/interfaces/list-o2m-tree-view/nested-draggable.vue
@@ -88,18 +88,18 @@ export default {
 <script setup lang="ts">
 import Draggable from 'vuedraggable';
 import { computed, ref, toRefs } from 'vue';
-import hideDragImage from '@/utils/hide-drag-image';
+import { hideDragImage } from '@/utils/hide-drag-image';
 import ItemPreview from './item-preview.vue';
 import { Filter } from '@directus/shared/types';
+import { RelationO2M } from '@/composables/use-relation-o2m';
 import {
 	DisplayItem,
-	RelationO2M,
 	RelationQueryMultiple,
 	useRelationMultiple,
 	ChangesItem,
-} from '@/composables/use-relation';
-import DrawerCollection from '@/views/private/components/drawer-collection';
-import DrawerItem from '@/views/private/components/drawer-item';
+} from '@/composables/use-relation-multiple';
+import DrawerCollection from '@/views/private/components/drawer-collection.vue';
+import DrawerItem from '@/views/private/components/drawer-item.vue';
 import { useI18n } from 'vue-i18n';
 import { moveInArray } from '@directus/shared/utils';
 import { cloneDeep } from 'lodash';
diff --git a/app/src/interfaces/list-o2m/list-o2m.vue b/app/src/interfaces/list-o2m/list-o2m.vue
index ee52882f9d..d40e31fe8a 100644
--- a/app/src/interfaces/list-o2m/list-o2m.vue
+++ b/app/src/interfaces/list-o2m/list-o2m.vue
@@ -85,19 +85,21 @@
 </template>
 
 <script setup lang="ts">
-import { useRelationO2M, useRelationMultiple, RelationQueryMultiple, DisplayItem } from '@/composables/use-relation';
+import { useRelationO2M } from '@/composables/use-relation-o2m';
+import { useRelationMultiple, RelationQueryMultiple, DisplayItem } from '@/composables/use-relation-multiple';
 import { parseFilter } from '@/utils/parse-filter';
 import { Filter } from '@directus/shared/types';
 import { deepMap, getFieldsFromTemplate } from '@directus/shared/utils';
 import { render } from 'micromustache';
 import { computed, inject, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
-import DrawerItem from '@/views/private/components/drawer-item';
-import DrawerCollection from '@/views/private/components/drawer-collection';
+import DrawerItem from '@/views/private/components/drawer-item.vue';
+import DrawerCollection from '@/views/private/components/drawer-collection.vue';
 import Draggable from 'vuedraggable';
-import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
+import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { isEmpty, clamp } from 'lodash';
-import { usePermissionsStore, useUserStore } from '@/stores';
+import { usePermissionsStore } from '@/stores/permissions';
+import { useUserStore } from '@/stores/user';
 import { addRelatedPrimaryKeyToFields } from '@/utils/add-related-primary-key-to-fields';
 
 const props = withDefaults(
diff --git a/app/src/interfaces/list/list.vue b/app/src/interfaces/list/list.vue
index ac85dcb591..ee81730eb7 100644
--- a/app/src/interfaces/list/list.vue
+++ b/app/src/interfaces/list/list.vue
@@ -83,7 +83,7 @@ import { Field } from '@directus/shared/types';
 import Draggable from 'vuedraggable';
 import { i18n } from '@/lang';
 import { renderStringTemplate } from '@/utils/render-string-template';
-import hideDragImage from '@/utils/hide-drag-image';
+import { hideDragImage } from '@/utils/hide-drag-image';
 import formatTitle from '@directus/format-title';
 import { isEqual, sortBy } from 'lodash';
 
diff --git a/app/src/interfaces/map/map.vue b/app/src/interfaces/map/map.vue
index 4e147c64d3..76d9e327e6 100644
--- a/app/src/interfaces/map/map.vue
+++ b/app/src/interfaces/map/map.vue
@@ -91,7 +91,7 @@ import {
 	SimpleGeometry,
 	MultiGeometry,
 } from '@directus/shared/types';
-import getSetting from '@/utils/get-setting';
+import { getSetting } from '@/utils/get-setting';
 import { snakeCase, isEqual, debounce } from 'lodash';
 import { getMapStyle } from './style';
 const activeLayers = [
@@ -105,7 +105,7 @@ const activeLayers = [
 
 import { useI18n } from 'vue-i18n';
 import { TranslateResult } from 'vue-i18n';
-import { useAppStore } from '@/stores';
+import { useAppStore } from '@/stores/app';
 
 import { getBasemapSources, getStyleFromBasemapSource } from '@/utils/geometry/basemap';
 
diff --git a/app/src/interfaces/map/options.vue b/app/src/interfaces/map/options.vue
index 5f1ef4dcd9..288d7e6d40 100644
--- a/app/src/interfaces/map/options.vue
+++ b/app/src/interfaces/map/options.vue
@@ -24,8 +24,8 @@ import { Field, GeometryType, GeometryOptions } from '@directus/shared/types';
 import { getBasemapSources, getStyleFromBasemapSource } from '@/utils/geometry/basemap';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { Map, CameraOptions } from 'maplibre-gl';
-import { useAppStore } from '@/stores';
-import getSetting from '@/utils/get-setting';
+import { useAppStore } from '@/stores/app';
+import { getSetting } from '@/utils/get-setting';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/interfaces/select-color/select-color.vue b/app/src/interfaces/select-color/select-color.vue
index a2c863048c..3401b6abe4 100644
--- a/app/src/interfaces/select-color/select-color.vue
+++ b/app/src/interfaces/select-color/select-color.vue
@@ -158,7 +158,7 @@
 
 <script lang="ts" setup>
 import Color from 'color';
-import { isHex } from '@/utils/color';
+import { isHex } from '@/utils/is-hex';
 import { cssVar } from '@directus/shared/utils/browser';
 import { ComponentPublicInstance, computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
diff --git a/app/src/interfaces/select-dropdown-m2o/select-dropdown-m2o.vue b/app/src/interfaces/select-dropdown-m2o/select-dropdown-m2o.vue
index 851ea33c63..e185ae5e9f 100644
--- a/app/src/interfaces/select-dropdown-m2o/select-dropdown-m2o.vue
+++ b/app/src/interfaces/select-dropdown-m2o/select-dropdown-m2o.vue
@@ -64,12 +64,14 @@
 </template>
 
 <script setup lang="ts">
-import { RelationQuerySingle, useRelationM2O, useRelationSingle } from '@/composables/use-relation';
-import { usePermissionsStore, useCollectionsStore } from '@/stores';
-import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
+import { RelationQuerySingle, useRelationSingle } from '@/composables/use-relation-single';
+import { useRelationM2O } from '@/composables/use-relation-m2o';
+import { usePermissionsStore } from '@/stores/permissions';
+import { useCollectionsStore } from '@/stores/collections';
+import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { parseFilter } from '@/utils/parse-filter';
-import DrawerCollection from '@/views/private/components/drawer-collection';
-import DrawerItem from '@/views/private/components/drawer-item';
+import DrawerCollection from '@/views/private/components/drawer-collection.vue';
+import DrawerItem from '@/views/private/components/drawer-item.vue';
 import { Filter } from '@directus/shared/types';
 import { deepMap, getFieldsFromTemplate } from '@directus/shared/utils';
 import { get } from 'lodash';
diff --git a/app/src/interfaces/translations/index.ts b/app/src/interfaces/translations/index.ts
index c830f17042..8d2af3c1cc 100644
--- a/app/src/interfaces/translations/index.ts
+++ b/app/src/interfaces/translations/index.ts
@@ -1,6 +1,6 @@
 import { defineInterface } from '@directus/shared/utils';
 import InterfaceTranslations from './translations.vue';
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import PreviewSVG from './preview.svg?raw';
 
 export default defineInterface({
diff --git a/app/src/interfaces/translations/translations.vue b/app/src/interfaces/translations/translations.vue
index a1128fb2ec..c983c3d47f 100644
--- a/app/src/interfaces/translations/translations.vue
+++ b/app/src/interfaces/translations/translations.vue
@@ -61,9 +61,10 @@
 
 <script setup lang="ts">
 import api from '@/api';
-import { DisplayItem, RelationQueryMultiple, useRelationM2M, useRelationMultiple } from '@/composables/use-relation';
+import { DisplayItem, RelationQueryMultiple, useRelationMultiple } from '@/composables/use-relation-multiple';
+import { useRelationM2M } from '@/composables/use-relation-m2m';
 import { useWindowSize } from '@/composables/use-window-size';
-import { useFieldsStore } from '@/stores/';
+import { useFieldsStore } from '@/stores/fields';
 import { notEmpty } from '@/utils/is-empty';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { toArray } from '@directus/shared/utils';
diff --git a/app/src/lang/readme.md b/app/src/lang/readme.md
deleted file mode 100644
index b9b3aa511f..0000000000
--- a/app/src/lang/readme.md
+++ /dev/null
@@ -1,4 +0,0 @@
-# Lang (i18n)
-
-Contains the vue-i18n configuration and constructor, and the actual translation files for each language. The language
-translations themselves are managed by [Crowdin](https://locales.directus.io).
diff --git a/app/src/lang/set-language.ts b/app/src/lang/set-language.ts
index a033d77a30..c331600d37 100644
--- a/app/src/lang/set-language.ts
+++ b/app/src/lang/set-language.ts
@@ -3,7 +3,8 @@ import { getInterfaces } from '@/interfaces';
 import { getPanels } from '@/panels';
 import { getLayouts } from '@/layouts';
 import { getModules } from '@/modules';
-import { useCollectionsStore, useFieldsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
 import { translate } from '@/utils/translate-object-values';
 import availableLanguages from './available-languages.yaml';
 import { i18n, Language, loadedLanguages } from './index';
diff --git a/app/src/lang/translations/fr-FR.yaml b/app/src/lang/translations/fr-FR.yaml
index e0306c9dd8..b0b5afa463 100644
--- a/app/src/lang/translations/fr-FR.yaml
+++ b/app/src/lang/translations/fr-FR.yaml
@@ -309,6 +309,7 @@ primary_key: Clef primaire
 foreign_key: Clé étrangère
 finish_setup: Terminer la configuration
 dismiss: Ignorer
+toggle_raw_editor: Activer/désactiver l'éditeur de texte brut
 raw_value: Valeur brute
 copy_raw_value: Copier la valeur brute
 copy_raw_value_success: Copié
@@ -614,6 +615,7 @@ password_reset_sent: Si vous avez un compte, nous vous avons envoyé un lien sé
 password_reset_successful: Mot de passe réinitialisé avec succès
 back: Retour
 filter: Filtre
+edit_image: Éditer l'image
 editing_image: Modification de l'image
 square: Carré
 free: Libre
@@ -1501,6 +1503,7 @@ interfaces:
     allow_none_label: Autoriser aucune sélection
     choices_name_placeholder: Entrez un nom...
     choices_value_placeholder: Saisissez une valeur...
+    preview_threshold: Seuil d'aperçu
   select-multiple-dropdown:
     select-multiple-dropdown: Liste déroulante (choix multiple)
     description: Sélectionner plusieurs valeurs à partir d'une liste déroulante
@@ -1699,6 +1702,9 @@ interfaces:
     regenerate: Régénérer le jeton
     generate_success_copy: Assurez-vous de sauvegarder et de copier le jeton ci-dessus. Pour des raisons de sécurité, vous ne pourrez plus voir le jeton après avoir enregistré et quitté cette page.
     remove_token: Supprimer le jeton
+  system-raw-editor:
+    system-raw-editor: Éditeur brut
+    description: Permettre la saisie de valeurs brutes ou de modèles en moustache
 displays:
   translations:
     translations: Traductions
@@ -1742,6 +1748,10 @@ displays:
     strict: Stricte
     strict_label: Utilisez des unités strictes
     strict_note: Retire les mots comme 'environ', 'plus de', 'moins de'
+    round_note: Choisissez une fonction d'arrondi à utiliser
+    down: Bas
+    nearest: Le plus proche
+    up: Haut
   file:
     file: Fichier
     description: Afficher les fichiers
diff --git a/app/src/lang/translations/pt-BR.yaml b/app/src/lang/translations/pt-BR.yaml
index ab0b5701ba..fada448067 100644
--- a/app/src/lang/translations/pt-BR.yaml
+++ b/app/src/lang/translations/pt-BR.yaml
@@ -440,7 +440,7 @@ generated_uuid: UUID gerado
 manual_string: String inserida manualmente
 save_and_create_new: Salvar e criar novo
 save_and_stay: Salvar e manter aqui
-save_as_copy: Salvar e Copiar
+save_as_copy: Salvar como cópia
 add_existing: Adicionar existente
 creating_items: Criando Itens
 enable_create_button: Habilitar botão de criação
diff --git a/app/src/layouts/calendar/index.ts b/app/src/layouts/calendar/index.ts
index 81644eec54..31a141a140 100644
--- a/app/src/layouts/calendar/index.ts
+++ b/app/src/layouts/calendar/index.ts
@@ -1,7 +1,7 @@
 import api from '@/api';
 import { router } from '@/router';
 import { useAppStore } from '@/stores/app';
-import getFullcalendarLocale from '@/utils/get-fullcalendar-locale';
+import { getFullcalendarLocale } from '@/utils/get-fullcalendar-locale';
 import { renderDisplayStringTemplate } from '@/utils/render-string-template';
 import { saveAsCSV } from '@/utils/save-as-csv';
 import { syncRefProperty } from '@/utils/sync-ref-property';
diff --git a/app/src/layouts/calendar/options.vue b/app/src/layouts/calendar/options.vue
index 2e8e7356c7..e2119ab69b 100644
--- a/app/src/layouts/calendar/options.vue
+++ b/app/src/layouts/calendar/options.vue
@@ -32,7 +32,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, ref, onMounted } from 'vue';
 import { Field } from '@directus/shared/types';
 import { useSync } from '@directus/shared/composables';
-import localizedFormat from '@/utils/localized-format';
+import { localizedFormat } from '@/utils/localized-format';
 import { add, startOfWeek } from 'date-fns';
 
 export default defineComponent({
diff --git a/app/src/layouts/cards/cards.vue b/app/src/layouts/cards/cards.vue
index 2f8e4dda20..d9a289412e 100644
--- a/app/src/layouts/cards/cards.vue
+++ b/app/src/layouts/cards/cards.vue
@@ -80,10 +80,10 @@ import { defineComponent, watch, PropType, ref, inject, Ref } from 'vue';
 
 import Card from './components/card.vue';
 import CardsHeader from './components/header.vue';
-import useElementSize from '@/composables/use-element-size';
+import { useElementSize } from '@/composables/use-element-size';
 import { Field, Item } from '@directus/shared/types';
 import { useSync } from '@directus/shared/composables';
-import { Collection } from '@/types';
+import { Collection } from '@/types/collections';
 import { Filter, ShowSelect } from '@directus/shared/types';
 
 export default defineComponent({
diff --git a/app/src/layouts/cards/index.ts b/app/src/layouts/cards/index.ts
index be96bcac7d..0433dd8232 100644
--- a/app/src/layouts/cards/index.ts
+++ b/app/src/layouts/cards/index.ts
@@ -1,5 +1,5 @@
-import { useRelationsStore } from '@/stores/';
-import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
+import { useRelationsStore } from '@/stores/relations';
+import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { saveAsCSV } from '@/utils/save-as-csv';
 import { syncRefProperty } from '@/utils/sync-ref-property';
 import { useCollection, useItems, useSync } from '@directus/shared/composables';
diff --git a/app/src/layouts/map/components/map.vue b/app/src/layouts/map/components/map.vue
index b57d393c95..9acc6b3830 100644
--- a/app/src/layouts/map/components/map.vue
+++ b/app/src/layouts/map/components/map.vue
@@ -27,8 +27,8 @@ import { ref, watch, PropType, onMounted, onUnmounted, defineComponent, toRefs,
 import { useI18n } from 'vue-i18n';
 
 import { ShowSelect } from '@directus/shared/types';
-import getSetting from '@/utils/get-setting';
-import { useAppStore } from '@/stores';
+import { getSetting } from '@/utils/get-setting';
+import { useAppStore } from '@/stores/app';
 import { BoxSelectControl, ButtonControl } from '@/utils/geometry/controls';
 import { getBasemapSources, getStyleFromBasemapSource } from '@/utils/geometry/basemap';
 
diff --git a/app/src/layouts/map/options.vue b/app/src/layouts/map/options.vue
index fad52637a4..5e8ec17ef4 100644
--- a/app/src/layouts/map/options.vue
+++ b/app/src/layouts/map/options.vue
@@ -41,7 +41,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, toRefs } from 'vue';
 
-import { useAppStore } from '@/stores';
+import { useAppStore } from '@/stores/app';
 import { getBasemapSources } from '@/utils/geometry/basemap';
 import { GeometryOptions, Item } from '@directus/shared/types';
 import { useSync } from '@directus/shared/composables';
diff --git a/app/src/layouts/tabular/index.ts b/app/src/layouts/tabular/index.ts
index 483b4b303a..df50122547 100644
--- a/app/src/layouts/tabular/index.ts
+++ b/app/src/layouts/tabular/index.ts
@@ -1,9 +1,9 @@
 import { HeaderRaw, Item } from '@/components/v-table/types';
-import { useFieldsStore } from '@/stores';
-import useAliasFields from '@/composables/use-alias-fields';
-import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
+import { useFieldsStore } from '@/stores/fields';
+import { useAliasFields } from '@/composables/use-alias-fields';
+import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { getDefaultDisplayForType } from '@/utils/get-default-display-for-type';
-import hideDragImage from '@/utils/hide-drag-image';
+import { hideDragImage } from '@/utils/hide-drag-image';
 import { saveAsCSV } from '@/utils/save-as-csv';
 import { syncRefProperty } from '@/utils/sync-ref-property';
 import { useCollection, useItems, useSync } from '@directus/shared/composables';
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index 084ee283f7..6843c6f36e 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -179,15 +179,15 @@ export default {
 
 <script lang="ts" setup>
 import { HeaderRaw } from '@/components/v-table/types';
-import useShortcut from '@/composables/use-shortcut';
-import { Collection } from '@/types';
+import { useShortcut } from '@/composables/use-shortcut';
+import { Collection } from '@/types/collections';
 import { useSync } from '@directus/shared/composables';
 import { Field, Filter, Item, ShowSelect } from '@directus/shared/types';
 import { ComponentPublicInstance, inject, ref, Ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { get } from '@/utils/get-with-arrays';
-import useAliasFields, { AliasField } from '@/composables/use-alias-fields';
-import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
+import { useAliasFields, AliasField } from '@/composables/use-alias-fields';
+import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { isEmpty, merge } from 'lodash';
 
 interface Props {
diff --git a/app/src/modules/activity/routes/collection.vue b/app/src/modules/activity/routes/collection.vue
index 01380c3db1..cd5265539d 100644
--- a/app/src/modules/activity/routes/collection.vue
+++ b/app/src/modules/activity/routes/collection.vue
@@ -63,10 +63,10 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, ref } from 'vue';
 import ActivityNavigation from '../components/navigation.vue';
-import usePreset from '@/composables/use-preset';
+import { usePreset } from '@/composables/use-preset';
 import { useLayout } from '@directus/shared/composables';
-import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
-import SearchInput from '@/views/private/components/search-input';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail.vue';
+import SearchInput from '@/views/private/components/search-input.vue';
 import { Filter } from '@directus/shared/types';
 import { mergeFilters } from '@directus/shared/utils';
 
diff --git a/app/src/modules/content/components/navigation-bookmark.vue b/app/src/modules/content/components/navigation-bookmark.vue
index 7b315f44ff..de1888ff91 100644
--- a/app/src/modules/content/components/navigation-bookmark.vue
+++ b/app/src/modules/content/components/navigation-bookmark.vue
@@ -86,7 +86,8 @@
 </template>
 
 <script lang="ts" setup>
-import { usePresetsStore, useUserStore } from '@/stores';
+import { usePresetsStore } from '@/stores/presets';
+import { useUserStore } from '@/stores/user';
 import { translate } from '@/utils/translate-literal';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { Preset } from '@directus/shared/types';
diff --git a/app/src/modules/content/components/navigation-item.vue b/app/src/modules/content/components/navigation-item.vue
index 1605a5c349..cba72b4799 100644
--- a/app/src/modules/content/components/navigation-item.vue
+++ b/app/src/modules/content/components/navigation-item.vue
@@ -58,9 +58,11 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed } from 'vue';
-import { Collection } from '@/types';
+import { Collection } from '@/types/collections';
 import { Preset } from '@directus/shared/types';
-import { useUserStore, useCollectionsStore, usePresetsStore } from '@/stores';
+import { useUserStore } from '@/stores/user';
+import { useCollectionsStore } from '@/stores/collections';
+import { usePresetsStore } from '@/stores/presets';
 import NavigationItemContent from './navigation-item-content.vue';
 import NavigationBookmark from './navigation-bookmark.vue';
 import { useI18n } from 'vue-i18n';
diff --git a/app/src/modules/content/composables/use-navigation.ts b/app/src/modules/content/composables/use-navigation.ts
index 9f46eab20d..983eae30c9 100644
--- a/app/src/modules/content/composables/use-navigation.ts
+++ b/app/src/modules/content/composables/use-navigation.ts
@@ -1,4 +1,4 @@
-import { useCollectionsStore } from '@/stores/';
+import { useCollectionsStore } from '@/stores/collections';
 import { Ref, ref, watch } from 'vue';
 
 let showHidden: Ref<boolean>;
diff --git a/app/src/modules/content/index.ts b/app/src/modules/content/index.ts
index 2cc251163c..0ac530f8b2 100644
--- a/app/src/modules/content/index.ts
+++ b/app/src/modules/content/index.ts
@@ -6,11 +6,11 @@ import CollectionOrItem from './routes/collection-or-item.vue';
 import Item from './routes/item.vue';
 import ItemNotFound from './routes/not-found.vue';
 import NoCollections from './routes/no-collections.vue';
-import { useCollectionsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
 import { Collection } from '@directus/shared/types';
 import { orderBy, isNil } from 'lodash';
 import { useNavigation } from './composables/use-navigation';
-import useLocalStorage from '@/composables/use-local-storage';
+import { useLocalStorage } from '@/composables/use-local-storage';
 import { ref } from 'vue';
 
 const checkForSystem: NavigationGuard = (to, from) => {
diff --git a/app/src/modules/content/routes/collection-or-item.vue b/app/src/modules/content/routes/collection-or-item.vue
index be1d63bf0c..5077625f92 100644
--- a/app/src/modules/content/routes/collection-or-item.vue
+++ b/app/src/modules/content/routes/collection-or-item.vue
@@ -12,9 +12,9 @@
 import { defineComponent, computed, watch } from 'vue';
 import CollectionRoute from './collection.vue';
 import ItemRoute from './item.vue';
-import { useCollectionsStore } from '@/stores/';
+import { useCollectionsStore } from '@/stores/collections';
 import { useRoute } from 'vue-router';
-import useLocalStorage from '@/composables/use-local-storage';
+import { useLocalStorage } from '@/composables/use-local-storage';
 
 export default defineComponent({
 	components: {
diff --git a/app/src/modules/content/routes/collection.vue b/app/src/modules/content/routes/collection.vue
index 60602c77ae..528afaf8ee 100644
--- a/app/src/modules/content/routes/collection.vue
+++ b/app/src/modules/content/routes/collection.vue
@@ -277,17 +277,18 @@ import ContentNavigation from '../components/navigation.vue';
 import api from '@/api';
 import ContentNotFound from './not-found.vue';
 import { useCollection, useLayout } from '@directus/shared/composables';
-import usePreset from '@/composables/use-preset';
-import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
-import ArchiveSidebarDetail from '@/views/private/components/archive-sidebar-detail';
-import RefreshSidebarDetail from '@/views/private/components/refresh-sidebar-detail';
+import { usePreset } from '@/composables/use-preset';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail.vue';
+import ArchiveSidebarDetail from '@/views/private/components/archive-sidebar-detail.vue';
+import RefreshSidebarDetail from '@/views/private/components/refresh-sidebar-detail.vue';
 import ExportSidebarDetail from '@/views/private/components/export-sidebar-detail.vue';
 import FlowSidebarDetail from '@/views/private/components/flow-sidebar-detail.vue';
-import SearchInput from '@/views/private/components/search-input';
-import BookmarkAdd from '@/views/private/components/bookmark-add';
+import SearchInput from '@/views/private/components/search-input.vue';
+import BookmarkAdd from '@/views/private/components/bookmark-add.vue';
 import { useRouter } from 'vue-router';
-import { usePermissionsStore, useUserStore } from '@/stores';
-import DrawerBatch from '@/views/private/components/drawer-batch';
+import { usePermissionsStore } from '@/stores/permissions';
+import { useUserStore } from '@/stores/user';
+import DrawerBatch from '@/views/private/components/drawer-batch.vue';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { getLayouts } from '@/layouts';
 import { mergeFilters } from '@directus/shared/utils';
diff --git a/app/src/modules/content/routes/item.vue b/app/src/modules/content/routes/item.vue
index 494fd1f692..3ae4a378de 100644
--- a/app/src/modules/content/routes/item.vue
+++ b/app/src/modules/content/routes/item.vue
@@ -211,18 +211,18 @@
 import { ComponentPublicInstance, computed, ref, unref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import useEditsGuard from '@/composables/use-edits-guard';
-import useItem from '@/composables/use-item';
+import { useEditsGuard } from '@/composables/use-edits-guard';
+import { useItem } from '@/composables/use-item';
 import { usePermissions } from '@/composables/use-permissions';
-import useShortcut from '@/composables/use-shortcut';
-import useTemplateData from '@/composables/use-template-data';
+import { useShortcut } from '@/composables/use-shortcut';
+import { useTemplateData } from '@/composables/use-template-data';
 import { useTitle } from '@/composables/use-title';
 import { renderStringTemplate } from '@/utils/render-string-template';
-import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
+import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail.vue';
 import FlowSidebarDetail from '@/views/private/components/flow-sidebar-detail.vue';
-import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
-import SaveOptions from '@/views/private/components/save-options';
-import SharesSidebarDetail from '@/views/private/components/shares-sidebar-detail';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail.vue';
+import SaveOptions from '@/views/private/components/save-options.vue';
+import SharesSidebarDetail from '@/views/private/components/shares-sidebar-detail.vue';
 import { useCollection } from '@directus/shared/composables';
 import { useRouter } from 'vue-router';
 import ContentNavigation from '../components/navigation.vue';
diff --git a/app/src/modules/content/routes/no-collections.vue b/app/src/modules/content/routes/no-collections.vue
index 5f54d7105e..f35611d0ea 100644
--- a/app/src/modules/content/routes/no-collections.vue
+++ b/app/src/modules/content/routes/no-collections.vue
@@ -36,7 +36,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
 import ContentNavigation from '../components/navigation.vue';
-import { useUserStore } from '@/stores';
+import { useUserStore } from '@/stores/user';
 
 export default defineComponent({
 	name: 'ContentOverview',
diff --git a/app/src/modules/files/components/add-folder.vue b/app/src/modules/files/components/add-folder.vue
index 61f94ef33f..7a20494e20 100644
--- a/app/src/modules/files/components/add-folder.vue
+++ b/app/src/modules/files/components/add-folder.vue
@@ -31,7 +31,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, ref } from 'vue';
-import useFolders from '@/composables/use-folders';
+import { useFolders } from '@/composables/use-folders';
 import api from '@/api';
 import { useRouter } from 'vue-router';
 import { unexpectedError } from '@/utils/unexpected-error';
diff --git a/app/src/modules/files/components/file-info-sidebar-detail.vue b/app/src/modules/files/components/file-info-sidebar-detail.vue
index dc6741f06f..876cf906ff 100644
--- a/app/src/modules/files/components/file-info-sidebar-detail.vue
+++ b/app/src/modules/files/components/file-info-sidebar-detail.vue
@@ -128,9 +128,9 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, ref, watch } from 'vue';
-import readableMimeType from '@/utils/readable-mime-type';
-import formatFilesize from '@/utils/format-filesize';
-import localizedFormat from '@/utils/localized-format';
+import { readableMimeType } from '@/utils/readable-mime-type';
+import { formatFilesize } from '@/utils/format-filesize';
+import { localizedFormat } from '@/utils/localized-format';
 import api, { addTokenToURL } from '@/api';
 import { getRootPath } from '@/utils/get-root-path';
 import { userName } from '@/utils/user-name';
diff --git a/app/src/modules/files/components/navigation-folder.vue b/app/src/modules/files/components/navigation-folder.vue
index 561ba68e0c..ee792a9fe4 100644
--- a/app/src/modules/files/components/navigation-folder.vue
+++ b/app/src/modules/files/components/navigation-folder.vue
@@ -116,9 +116,9 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, ref } from 'vue';
-import useFolders, { Folder } from '@/composables/use-folders';
+import { useFolders, Folder } from '@/composables/use-folders';
 import api from '@/api';
-import FolderPicker from '@/views/private/components/folder-picker/folder-picker.vue';
+import FolderPicker from '@/views/private/components/folder-picker.vue';
 import { useRouter } from 'vue-router';
 import { unexpectedError } from '@/utils/unexpected-error';
 
diff --git a/app/src/modules/files/components/navigation.vue b/app/src/modules/files/components/navigation.vue
index 982889ada9..2e6b9d70fd 100644
--- a/app/src/modules/files/components/navigation.vue
+++ b/app/src/modules/files/components/navigation.vue
@@ -63,9 +63,9 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, watch } from 'vue';
-import useFolders, { Folder } from '@/composables/use-folders';
+import { useFolders, Folder } from '@/composables/use-folders';
 import NavigationFolder from './navigation-folder.vue';
-import arraysAreEqual from '@/utils/arrays-are-equal';
+import { arraysAreEqual } from '@/utils/arrays-are-equal';
 
 export default defineComponent({
 	components: { NavigationFolder },
diff --git a/app/src/modules/files/routes/collection.vue b/app/src/modules/files/routes/collection.vue
index 937fbbff15..de5a32140b 100644
--- a/app/src/modules/files/routes/collection.vue
+++ b/app/src/modules/files/routes/collection.vue
@@ -189,21 +189,23 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, ref, PropType, onMounted, onUnmounted, nextTick } from 'vue';
 import FilesNavigation from '../components/navigation.vue';
 import api from '@/api';
-import usePreset from '@/composables/use-preset';
-import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
+import { usePreset } from '@/composables/use-preset';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail.vue';
 import AddFolder from '../components/add-folder.vue';
-import SearchInput from '@/views/private/components/search-input';
-import FolderPicker from '@/views/private/components/folder-picker/folder-picker.vue';
+import SearchInput from '@/views/private/components/search-input.vue';
+import FolderPicker from '@/views/private/components/folder-picker.vue';
 import emitter, { Events } from '@/events';
 import { useRouter, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
-import { useNotificationsStore, useUserStore, usePermissionsStore } from '@/stores';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useUserStore } from '@/stores/user';
+import { usePermissionsStore } from '@/stores/permissions';
 import { subDays } from 'date-fns';
-import useFolders, { Folder } from '@/composables/use-folders';
-import useEventListener from '@/composables/use-event-listener';
+import { useFolders, Folder } from '@/composables/use-folders';
+import { useEventListener } from '@/composables/use-event-listener';
 import { useLayout } from '@directus/shared/composables';
-import uploadFiles from '@/utils/upload-files';
+import { uploadFiles } from '@/utils/upload-files';
 import { unexpectedError } from '@/utils/unexpected-error';
-import DrawerBatch from '@/views/private/components/drawer-batch';
+import DrawerBatch from '@/views/private/components/drawer-batch.vue';
 import { Filter } from '@directus/shared/types';
 import { mergeFilters } from '@directus/shared/utils';
 
diff --git a/app/src/modules/files/routes/item.vue b/app/src/modules/files/routes/item.vue
index b116f4a92e..e07e7ed0ab 100644
--- a/app/src/modules/files/routes/item.vue
+++ b/app/src/modules/files/routes/item.vue
@@ -177,19 +177,19 @@
 
 <script lang="ts" setup>
 import api, { addTokenToURL } from '@/api';
-import useEditsGuard from '@/composables/use-edits-guard';
-import useItem from '@/composables/use-item';
+import { useEditsGuard } from '@/composables/use-edits-guard';
+import { useItem } from '@/composables/use-item';
 import { usePermissions } from '@/composables/use-permissions';
-import useShortcut from '@/composables/use-shortcut';
+import { useShortcut } from '@/composables/use-shortcut';
 import { getRootPath } from '@/utils/get-root-path';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
-import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
-import FilePreview from '@/views/private/components/file-preview';
-import FolderPicker from '@/views/private/components/folder-picker/folder-picker.vue';
-import ImageEditor from '@/views/private/components/image-editor';
-import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
-import SaveOptions from '@/views/private/components/save-options';
+import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail.vue';
+import FilePreview from '@/views/private/components/file-preview.vue';
+import FolderPicker from '@/views/private/components/folder-picker.vue';
+import ImageEditor from '@/views/private/components/image-editor.vue';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail.vue';
+import SaveOptions from '@/views/private/components/save-options.vue';
 import { Field } from '@directus/shared/types';
 import { ComponentPublicInstance, computed, ref, toRefs, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
diff --git a/app/src/modules/insights/components/dashboard-dialog.vue b/app/src/modules/insights/components/dashboard-dialog.vue
index 2625dd0d33..44819ebdcd 100644
--- a/app/src/modules/insights/components/dashboard-dialog.vue
+++ b/app/src/modules/insights/components/dashboard-dialog.vue
@@ -33,9 +33,9 @@
 import api from '@/api';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { defineComponent, ref, reactive, PropType, watch } from 'vue';
-import { useInsightsStore } from '@/stores';
+import { useInsightsStore } from '@/stores/insights';
 import { router } from '@/router';
-import { Dashboard } from '@/types';
+import { Dashboard } from '@/types/insights';
 import { useI18n } from 'vue-i18n';
 import { isEqual } from 'lodash';
 
diff --git a/app/src/modules/insights/components/navigation.vue b/app/src/modules/insights/components/navigation.vue
index 7dccf58f38..c4ea422d26 100644
--- a/app/src/modules/insights/components/navigation.vue
+++ b/app/src/modules/insights/components/navigation.vue
@@ -15,8 +15,8 @@
 
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue';
-import { useInsightsStore } from '@/stores';
-import { Dashboard } from '@/types';
+import { useInsightsStore } from '@/stores/insights';
+import { Dashboard } from '@/types/insights';
 import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
diff --git a/app/src/modules/insights/index.ts b/app/src/modules/insights/index.ts
index 62e075c1df..17afe11951 100644
--- a/app/src/modules/insights/index.ts
+++ b/app/src/modules/insights/index.ts
@@ -2,7 +2,7 @@ import InsightsOverview from './routes/overview.vue';
 import InsightsDashboard from './routes/dashboard.vue';
 import InsightsPanelConfiguration from './routes/panel-configuration.vue';
 import { defineModule } from '@directus/shared/utils';
-import { useInsightsStore } from '@/stores';
+import { useInsightsStore } from '@/stores/insights';
 
 export default defineModule({
 	id: 'insights',
diff --git a/app/src/modules/insights/routes/dashboard.vue b/app/src/modules/insights/routes/dashboard.vue
index be280d77d0..a2be52476e 100644
--- a/app/src/modules/insights/routes/dashboard.vue
+++ b/app/src/modules/insights/routes/dashboard.vue
@@ -192,13 +192,15 @@
 
 <script lang="ts" setup>
 import { AppTile } from '@/components/v-workspace-tile.vue';
-import useEditsGuard from '@/composables/use-edits-guard';
-import useShortcut from '@/composables/use-shortcut';
+import { useEditsGuard } from '@/composables/use-edits-guard';
+import { useShortcut } from '@/composables/use-shortcut';
 import { getPanels } from '@/panels';
 import { router } from '@/router';
-import { useAppStore, useInsightsStore, usePermissionsStore } from '@/stores';
+import { useAppStore } from '@/stores/app';
+import { useInsightsStore } from '@/stores/insights';
+import { usePermissionsStore } from '@/stores/permissions';
 import { pointOnLine } from '@/utils/point-on-line';
-import RefreshSidebarDetail from '@/views/private/components/refresh-sidebar-detail/refresh-sidebar-detail.vue';
+import RefreshSidebarDetail from '@/views/private/components/refresh-sidebar-detail.vue';
 import { applyOptionsData } from '@directus/shared/utils';
 import { assign, isEmpty } from 'lodash';
 import { computed, ref, toRefs, unref, watch } from 'vue';
diff --git a/app/src/modules/insights/routes/overview.vue b/app/src/modules/insights/routes/overview.vue
index 826fd605f1..449e030e94 100644
--- a/app/src/modules/insights/routes/overview.vue
+++ b/app/src/modules/insights/routes/overview.vue
@@ -102,9 +102,10 @@
 
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue';
-import { useInsightsStore, usePermissionsStore } from '@/stores';
+import { useInsightsStore } from '@/stores/insights';
+import { usePermissionsStore } from '@/stores/permissions';
 import { useI18n } from 'vue-i18n';
-import { Dashboard } from '@/types';
+import { Dashboard } from '@/types/insights';
 import { router } from '@/router';
 import { Header } from '@/components/v-table/types';
 import InsightsNavigation from '../components/navigation.vue';
diff --git a/app/src/modules/insights/routes/panel-configuration.vue b/app/src/modules/insights/routes/panel-configuration.vue
index ba50777d2c..6cca6d1ff2 100644
--- a/app/src/modules/insights/routes/panel-configuration.vue
+++ b/app/src/modules/insights/routes/panel-configuration.vue
@@ -94,10 +94,10 @@
 </template>
 
 <script lang="ts" setup>
-import { FancySelectItem } from '@/components/v-fancy-select/types';
+import { FancySelectItem } from '@/components/v-fancy-select.vue';
 import { useDialogRoute } from '@/composables/use-dialog-route';
 import { getPanel, getPanels } from '@/panels';
-import { useInsightsStore } from '@/stores';
+import { useInsightsStore } from '@/stores/insights';
 import { CreatePanel } from '@/stores/insights';
 import { Panel } from '@directus/shared/types';
 import { assign, clone, omitBy, isUndefined } from 'lodash';
diff --git a/app/src/modules/register.ts b/app/src/modules/register.ts
index 907f60e494..4b236dbefc 100644
--- a/app/src/modules/register.ts
+++ b/app/src/modules/register.ts
@@ -1,5 +1,6 @@
 import { router } from '@/router';
-import { usePermissionsStore, useUserStore } from '@/stores';
+import { usePermissionsStore } from '@/stores/permissions';
+import { useUserStore } from '@/stores/user';
 import { getRootPath } from '@/utils/get-root-path';
 import RouterPass from '@/utils/router-passthrough';
 import { getModules } from './index';
diff --git a/app/src/modules/settings/index.ts b/app/src/modules/settings/index.ts
index e45d65b1f4..a1054a86d3 100644
--- a/app/src/modules/settings/index.ts
+++ b/app/src/modules/settings/index.ts
@@ -1,6 +1,8 @@
 import api from '@/api';
 import { defineModule } from '@directus/shared/utils';
-import { useCollectionsStore, useFieldsStore, useFlowsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
+import { useFlowsStore } from '@/stores/flows';
 import RouterPass from '@/utils/router-passthrough';
 import Collections from './routes/data-model/collections/collections.vue';
 import FieldDetail from './routes/data-model/field-detail/field-detail.vue';
diff --git a/app/src/modules/settings/routes/data-model/collections/collections.vue b/app/src/modules/settings/routes/data-model/collections/collections.vue
index f23898d37a..d3d3ff679a 100644
--- a/app/src/modules/settings/routes/data-model/collections/collections.vue
+++ b/app/src/modules/settings/routes/data-model/collections/collections.vue
@@ -111,8 +111,8 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, ref } from 'vue';
 import SettingsNavigation from '../../../components/navigation.vue';
-import { useCollectionsStore } from '@/stores/';
-import { Collection } from '@/types';
+import { useCollectionsStore } from '@/stores/collections';
+import { Collection } from '@/types/collections';
 import CollectionOptions from './components/collection-options.vue';
 import { sortBy, merge } from 'lodash';
 import CollectionItem from './components/collection-item.vue';
diff --git a/app/src/modules/settings/routes/data-model/collections/components/collection-dialog.vue b/app/src/modules/settings/routes/data-model/collections/components/collection-dialog.vue
index 0f5565d599..18cae478a6 100644
--- a/app/src/modules/settings/routes/data-model/collections/components/collection-dialog.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collection-dialog.vue
@@ -74,10 +74,10 @@
 import api from '@/api';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { defineComponent, ref, reactive, PropType, watch } from 'vue';
-import { useCollectionsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
 import { useI18n } from 'vue-i18n';
 import { isEqual } from 'lodash';
-import { Collection } from '@/types';
+import { Collection } from '@/types/collections';
 
 export default defineComponent({
 	name: 'CollectionDialog',
diff --git a/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue b/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue
index 6fc91daa87..42495c30cd 100644
--- a/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collection-item.vue
@@ -59,9 +59,9 @@
 <script lang="ts">
 import { defineComponent, PropType, computed, ref } from 'vue';
 import CollectionOptions from './collection-options.vue';
-import { Collection } from '@/types';
+import { Collection } from '@/types/collections';
 import Draggable from 'vuedraggable';
-import { useCollectionsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
 import { DeepPartial } from '@directus/shared/types';
 import { useI18n } from 'vue-i18n';
 import { unexpectedError } from '@/utils/unexpected-error';
diff --git a/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue b/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
index d4359f742e..235544a175 100644
--- a/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
@@ -65,8 +65,8 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, ref } from 'vue';
-import { Collection } from '@/types';
-import { useCollectionsStore } from '@/stores/';
+import { Collection } from '@/types/collections';
+import { useCollectionsStore } from '@/stores/collections';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue
index 6e82d6adb7..fc3a31c907 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-display.vue
@@ -23,7 +23,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
 import { getDisplay } from '@/displays';
 import { getInterface } from '@/interfaces';
-import { FancySelectItem } from '@/components/v-fancy-select/types';
+import { FancySelectItem } from '@/components/v-fancy-select.vue';
 import { clone } from 'lodash';
 import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
 import { storeToRefs } from 'pinia';
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue
index b936f284df..e9833c6cb3 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-interface.vue
@@ -23,7 +23,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
 import { getInterface } from '@/interfaces';
-import { FancySelectItem } from '@/components/v-fancy-select/types';
+import { FancySelectItem } from '@/components/v-fancy-select.vue';
 import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store/';
 import { storeToRefs } from 'pinia';
 import ExtensionOptions from '../shared/extension-options.vue';
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue
index 3e51949d1a..84db72ce6b 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue
@@ -158,7 +158,9 @@ import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
 import { storeToRefs } from 'pinia';
 import RelatedCollectionSelect from '../shared/related-collection-select.vue';
 import RelatedFieldSelect from '../shared/related-field-select.vue';
-import { useFieldsStore, useCollectionsStore, useRelationsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
+import { useCollectionsStore } from '@/stores/collections';
+import { useRelationsStore } from '@/stores/relations';
 import { orderBy } from 'lodash';
 
 export default defineComponent({
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2m.vue
index 9d2f75a6ec..2b5869235d 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2m.vue
@@ -204,7 +204,8 @@ import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
 import { storeToRefs } from 'pinia';
 import RelatedCollectionSelect from '../shared/related-collection-select.vue';
 import RelatedFieldSelect from '../shared/related-field-select.vue';
-import { useFieldsStore, useRelationsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
+import { useRelationsStore } from '@/stores/relations';
 
 export default defineComponent({
 	components: { RelatedCollectionSelect, RelatedFieldSelect },
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2o.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2o.vue
index 168118c8f7..f15ebe56c3 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2o.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2o.vue
@@ -76,7 +76,7 @@ import { defineComponent, computed } from 'vue';
 import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
 import { storeToRefs } from 'pinia';
 import RelatedCollectionSelect from '../shared/related-collection-select.vue';
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 
 export default defineComponent({
 	components: { RelatedCollectionSelect },
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-o2m.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-o2m.vue
index 0ca2002a9f..7d4971e3fa 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-o2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-o2m.vue
@@ -118,7 +118,8 @@ import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
 import { storeToRefs } from 'pinia';
 import RelatedCollectionSelect from '../shared/related-collection-select.vue';
 import RelatedFieldSelect from '../shared/related-field-select.vue';
-import { useFieldsStore, useRelationsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
+import { useRelationsStore } from '@/stores/relations';
 
 export default defineComponent({
 	components: { RelatedCollectionSelect, RelatedFieldSelect },
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-translations.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-translations.vue
index d0794e26ea..051d4e1540 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-translations.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-translations.vue
@@ -152,7 +152,7 @@ import { useFieldDetailStore, syncFieldDetailStoreProperty } from '../store';
 import { storeToRefs } from 'pinia';
 import RelatedCollectionSelect from '../shared/related-collection-select.vue';
 import RelatedFieldSelect from '../shared/related-field-select.vue';
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 
 export default defineComponent({
 	components: { RelatedCollectionSelect, RelatedFieldSelect },
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/relationship-configuration.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/relationship-configuration.vue
index fddfceface..3e35d2c615 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/relationship-configuration.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/relationship-configuration.vue
@@ -75,7 +75,7 @@ import { useI18n } from 'vue-i18n';
 import RelatedCollectionSelect from '../shared/related-collection-select.vue';
 import RelatedFieldSelect from '../shared/related-field-select.vue';
 import { orderBy } from 'lodash';
-import { useCollectionsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
 
 export default defineComponent({
 	components: { RelatedCollectionSelect, RelatedFieldSelect },
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index 88f2137f3e..d6973ec01b 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -28,7 +28,8 @@ import FieldDetailAdvanced from './field-detail-advanced/field-detail-advanced.v
 import FieldDetailAdvancedTabs from './field-detail-advanced/field-detail-advanced-tabs.vue';
 import FieldDetailAdvancedActions from './field-detail-advanced/field-detail-advanced-actions.vue';
 import { useRouter } from 'vue-router';
-import { useCollectionsStore, useFieldsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
 import { useI18n } from 'vue-i18n';
 import formatTitle from '@directus/format-title';
 import { useDialogRoute } from '@/composables/use-dialog-route';
diff --git a/app/src/modules/settings/routes/data-model/field-detail/shared/related-collection-select.vue b/app/src/modules/settings/routes/data-model/field-detail/shared/related-collection-select.vue
index 15e2ae8fcf..dbb46aaef2 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/shared/related-collection-select.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/shared/related-collection-select.vue
@@ -57,7 +57,7 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useCollectionsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
 import { orderBy } from 'lodash';
 
 export default defineComponent({
diff --git a/app/src/modules/settings/routes/data-model/field-detail/shared/related-field-select.vue b/app/src/modules/settings/routes/data-model/field-detail/shared/related-field-select.vue
index 34104fc010..72858c6baa 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/shared/related-field-select.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/shared/related-field-select.vue
@@ -40,7 +40,7 @@
 <script lang="ts">
 import { defineComponent, computed, PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { i18n } from '@/lang';
 
 export default defineComponent({
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/files.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/files.ts
index cb620a74dd..676e1e195c 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/files.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/files.ts
@@ -1,6 +1,7 @@
 import { StateUpdates, State, HelperFunctions } from '../types';
 import { set } from 'lodash';
-import { useCollectionsStore, useFieldsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
 
 export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
 	const { hasChanged } = helperFn;
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2a.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2a.ts
index 31fa90b553..e71cd842f2 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2a.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2a.ts
@@ -1,6 +1,7 @@
 import { StateUpdates, State, HelperFunctions } from '../types';
 import { set } from 'lodash';
-import { useCollectionsStore, useFieldsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
 
 export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
 	const { hasChanged } = helperFn;
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2m.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2m.ts
index 1020812d4b..44426b8e26 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2m.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2m.ts
@@ -1,6 +1,8 @@
 import { StateUpdates, State, HelperFunctions } from '../types';
 import { set } from 'lodash';
-import { useCollectionsStore, useFieldsStore, useRelationsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
+import { useRelationsStore } from '@/stores/relations';
 
 export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
 	const { hasChanged } = helperFn;
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2o.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2o.ts
index d0b735fb76..d85d1be04a 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2o.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/m2o.ts
@@ -1,6 +1,7 @@
 import { StateUpdates, State, HelperFunctions } from '../types';
 import { set } from 'lodash';
-import { useCollectionsStore, useFieldsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
 
 export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
 	const { hasChanged, getCurrent } = helperFn;
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/o2m.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/o2m.ts
index 342612bd91..21436b49d7 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/o2m.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/o2m.ts
@@ -1,6 +1,8 @@
 import { StateUpdates, State, HelperFunctions } from '../types';
 import { set } from 'lodash';
-import { useCollectionsStore, useFieldsStore, useRelationsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
+import { useRelationsStore } from '@/stores/relations';
 
 export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
 	const { hasChanged } = helperFn;
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/translations.ts b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/translations.ts
index 00511adeed..01b57797fc 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store/alterations/translations.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/alterations/translations.ts
@@ -1,6 +1,7 @@
 import { StateUpdates, State, HelperFunctions } from '../types';
 import { set, get } from 'lodash';
-import { useCollectionsStore, useFieldsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
 
 export function applyChanges(updates: StateUpdates, state: State, helperFn: HelperFunctions) {
 	const { hasChanged } = helperFn;
diff --git a/app/src/modules/settings/routes/data-model/field-detail/store/index.ts b/app/src/modules/settings/routes/data-model/field-detail/store/index.ts
index 32e44a0c44..04cb08dc68 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/store/index.ts
+++ b/app/src/modules/settings/routes/data-model/field-detail/store/index.ts
@@ -15,7 +15,9 @@ import { LOCAL_TYPES } from '@directus/shared/constants';
 import { computed } from 'vue';
 import { get, set } from 'lodash';
 import { unexpectedError } from '@/utils/unexpected-error';
-import { useCollectionsStore, useFieldsStore, useRelationsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
+import { useRelationsStore } from '@/stores/relations';
 
 import * as alterations from './alterations';
 import { getLocalTypeForField } from '../../get-local-type';
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index 2322980964..99b93633b3 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -146,7 +146,8 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, ref, computed } from 'vue';
-import { useCollectionsStore, useFieldsStore } from '@/stores/';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
 import { getInterface } from '@/interfaces';
 import { useRouter } from 'vue-router';
 import { cloneDeep } from 'lodash';
@@ -155,7 +156,7 @@ import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { Field } from '@directus/shared/types';
 import FieldSelectMenu from './field-select-menu.vue';
-import hideDragImage from '@/utils/hide-drag-image';
+import { hideDragImage } from '@/utils/hide-drag-image';
 import Draggable from 'vuedraggable';
 import formatTitle from '@directus/format-title';
 
diff --git a/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue b/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
index 43fff983ea..75cdb3dc31 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
@@ -55,9 +55,9 @@ import { defineComponent, computed, toRefs } from 'vue';
 import { useCollection } from '@directus/shared/composables';
 import Draggable from 'vuedraggable';
 import { Field } from '@directus/shared/types';
-import { useFieldsStore } from '@/stores/';
+import { useFieldsStore } from '@/stores/fields';
 import FieldSelect from './field-select.vue';
-import hideDragImage from '@/utils/hide-drag-image';
+import { hideDragImage } from '@/utils/hide-drag-image';
 import { orderBy, isNil } from 'lodash';
 import { LocalType } from '@directus/shared/types';
 
diff --git a/app/src/modules/settings/routes/data-model/fields/fields.vue b/app/src/modules/settings/routes/data-model/fields/fields.vue
index bec4c58b3f..2da9046def 100644
--- a/app/src/modules/settings/routes/data-model/fields/fields.vue
+++ b/app/src/modules/settings/routes/data-model/fields/fields.vue
@@ -106,11 +106,12 @@ import SettingsNavigation from '../../../components/navigation.vue';
 import { useCollection } from '@directus/shared/composables';
 import FieldsManagement from './components/fields-management.vue';
 
-import useItem from '@/composables/use-item';
+import { useItem } from '@/composables/use-item';
 import { useRouter } from 'vue-router';
-import { useCollectionsStore, useFieldsStore } from '@/stores';
-import useShortcut from '@/composables/use-shortcut';
-import useEditsGuard from '@/composables/use-edits-guard';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
+import { useShortcut } from '@/composables/use-shortcut';
+import { useEditsGuard } from '@/composables/use-edits-guard';
 
 export default defineComponent({
 	components: { SettingsNavigation, FieldsManagement },
diff --git a/app/src/modules/settings/routes/data-model/get-local-type.ts b/app/src/modules/settings/routes/data-model/get-local-type.ts
index a217bfb5f0..1e4fc19fa4 100644
--- a/app/src/modules/settings/routes/data-model/get-local-type.ts
+++ b/app/src/modules/settings/routes/data-model/get-local-type.ts
@@ -1,4 +1,5 @@
-import { useFieldsStore, useRelationsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
+import { useRelationsStore } from '@/stores/relations';
 import { LocalType, Relation } from '@directus/shared/types';
 
 export function getLocalTypeForField(collection: string, field: string): LocalType | null {
diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index 6baf0c071d..1f9a5762a5 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -131,7 +131,9 @@ import { cloneDeep } from 'lodash';
 import { defineComponent, ref, reactive, watch } from 'vue';
 import api from '@/api';
 import { Field, Relation } from '@directus/shared/types';
-import { useFieldsStore, useCollectionsStore, useRelationsStore } from '@/stores/';
+import { useFieldsStore } from '@/stores/fields';
+import { useCollectionsStore } from '@/stores/collections';
+import { useRelationsStore } from '@/stores/relations';
 import { notify } from '@/utils/notify';
 import { useDialogRoute } from '@/composables/use-dialog-route';
 import { useRouter } from 'vue-router';
diff --git a/app/src/modules/settings/routes/flows/components/flow-dialog.vue b/app/src/modules/settings/routes/flows/components/flow-dialog.vue
index 2b625d2ca6..46c8607bc7 100644
--- a/app/src/modules/settings/routes/flows/components/flow-dialog.vue
+++ b/app/src/modules/settings/routes/flows/components/flow-dialog.vue
@@ -35,7 +35,7 @@ import { ref, reactive, watch } from 'vue';
 import { FlowRaw } from '@directus/shared/types';
 import { useI18n } from 'vue-i18n';
 import { isEqual } from 'lodash';
-import { useFlowsStore } from '@/stores';
+import { useFlowsStore } from '@/stores/flows';
 
 const props = withDefaults(
 	defineProps<{
diff --git a/app/src/modules/settings/routes/flows/components/operation.vue b/app/src/modules/settings/routes/flows/components/operation.vue
index e78f3b4246..168deb0280 100644
--- a/app/src/modules/settings/routes/flows/components/operation.vue
+++ b/app/src/modules/settings/routes/flows/components/operation.vue
@@ -135,7 +135,7 @@
 </template>
 
 <script lang="ts" setup>
-import useClipboard from '@/composables/use-clipboard';
+import { useClipboard } from '@/composables/use-clipboard';
 import { getOperations } from '@/operations';
 import { translate } from '@/utils/translate-object-values';
 import { Vector2 } from '@/utils/vector2';
diff --git a/app/src/modules/settings/routes/flows/flow-drawer.vue b/app/src/modules/settings/routes/flows/flow-drawer.vue
index 8e4e2c902f..953e31a855 100644
--- a/app/src/modules/settings/routes/flows/flow-drawer.vue
+++ b/app/src/modules/settings/routes/flows/flow-drawer.vue
@@ -120,7 +120,7 @@
 
 <script lang="ts" setup>
 import api from '@/api';
-import { useFlowsStore } from '@/stores';
+import { useFlowsStore } from '@/stores/flows';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { TriggerType } from '@directus/shared/types';
 import { computed, reactive, ref, watch } from 'vue';
diff --git a/app/src/modules/settings/routes/flows/flow.vue b/app/src/modules/settings/routes/flows/flow.vue
index 52752a0ca6..cd21b05d3e 100644
--- a/app/src/modules/settings/routes/flows/flow.vue
+++ b/app/src/modules/settings/routes/flows/flow.vue
@@ -182,11 +182,11 @@ import { FlowRaw, OperationRaw } from '@directus/shared/types';
 import { useI18n } from 'vue-i18n';
 
 import { computed, ref } from 'vue';
-import { useFlowsStore } from '@/stores';
+import { useFlowsStore } from '@/stores/flows';
 import { unexpectedError } from '@/utils/unexpected-error';
 import api from '@/api';
-import useEditsGuard from '@/composables/use-edits-guard';
-import useShortcut from '@/composables/use-shortcut';
+import { useEditsGuard } from '@/composables/use-edits-guard';
+import { useShortcut } from '@/composables/use-shortcut';
 import { isEmpty, merge, omit, cloneDeep } from 'lodash';
 import { router } from '@/router';
 import { nanoid, customAlphabet } from 'nanoid';
diff --git a/app/src/modules/settings/routes/flows/overview.vue b/app/src/modules/settings/routes/flows/overview.vue
index 2532b53e9f..bff44b5b88 100644
--- a/app/src/modules/settings/routes/flows/overview.vue
+++ b/app/src/modules/settings/routes/flows/overview.vue
@@ -133,7 +133,8 @@
 import api from '@/api';
 import { Sort, Header } from '@/components/v-table/types';
 import { router } from '@/router';
-import { useFlowsStore, usePermissionsStore } from '@/stores';
+import { useFlowsStore } from '@/stores/flows';
+import { usePermissionsStore } from '@/stores/permissions';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { FlowRaw } from '@directus/shared/types';
 import { computed, ref, Ref } from 'vue';
diff --git a/app/src/modules/settings/routes/presets/collection/collection.vue b/app/src/modules/settings/routes/presets/collection/collection.vue
index a9184ac2dc..bb7e8ed0b6 100644
--- a/app/src/modules/settings/routes/presets/collection/collection.vue
+++ b/app/src/modules/settings/routes/presets/collection/collection.vue
@@ -148,13 +148,15 @@ import SettingsNavigation from '../../../components/navigation.vue';
 import PresetsInfoSidebarDetail from './components/presets-info-sidebar-detail.vue';
 
 import { useCollection, useLayout } from '@directus/shared/composables';
-import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
-import RefreshSidebarDetail from '@/views/private/components/refresh-sidebar-detail';
-import SearchInput from '@/views/private/components/search-input';
-import { usePermissionsStore, useUserStore, usePresetsStore } from '@/stores';
-import DrawerBatch from '@/views/private/components/drawer-batch';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail.vue';
+import RefreshSidebarDetail from '@/views/private/components/refresh-sidebar-detail.vue';
+import SearchInput from '@/views/private/components/search-input.vue';
+import { usePermissionsStore } from '@/stores/permissions';
+import { useUserStore } from '@/stores/user';
+import { usePresetsStore } from '@/stores/presets';
+import DrawerBatch from '@/views/private/components/drawer-batch.vue';
 import { getLayouts } from '@/layouts';
-import usePreset from '@/composables/use-preset';
+import { usePreset } from '@/composables/use-preset';
 
 export default defineComponent({
 	name: 'ContentCollection',
diff --git a/app/src/modules/settings/routes/presets/item.vue b/app/src/modules/settings/routes/presets/item.vue
index 787f6032a4..ad0358173d 100644
--- a/app/src/modules/settings/routes/presets/item.vue
+++ b/app/src/modules/settings/routes/presets/item.vue
@@ -136,13 +136,14 @@ import { defineComponent, computed, ref } from 'vue';
 import SettingsNavigation from '../../components/navigation.vue';
 import { Preset, Filter } from '@directus/shared/types';
 import api from '@/api';
-import { useCollectionsStore, usePresetsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
+import { usePresetsStore } from '@/stores/presets';
 import { getLayouts } from '@/layouts';
 import { useRouter } from 'vue-router';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { useLayout } from '@directus/shared/composables';
-import useShortcut from '@/composables/use-shortcut';
-import useEditsGuard from '@/composables/use-edits-guard';
+import { useShortcut } from '@/composables/use-shortcut';
+import { useEditsGuard } from '@/composables/use-edits-guard';
 import { isEqual } from 'lodash';
 
 type FormattedPreset = {
diff --git a/app/src/modules/settings/routes/project/project.vue b/app/src/modules/settings/routes/project/project.vue
index 74deffe976..e21ad89a45 100644
--- a/app/src/modules/settings/routes/project/project.vue
+++ b/app/src/modules/settings/routes/project/project.vue
@@ -45,11 +45,12 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, computed } from 'vue';
 import SettingsNavigation from '../../components/navigation.vue';
 import { useCollection } from '@directus/shared/composables';
-import { useSettingsStore, useServerStore } from '@/stores';
+import { useSettingsStore } from '@/stores/settings';
+import { useServerStore } from '@/stores/server';
 import ProjectInfoSidebarDetail from './components/project-info-sidebar-detail.vue';
 import { clone } from 'lodash';
-import useShortcut from '@/composables/use-shortcut';
-import useEditsGuard from '@/composables/use-edits-guard';
+import { useShortcut } from '@/composables/use-shortcut';
+import { useEditsGuard } from '@/composables/use-edits-guard';
 import { useRouter } from 'vue-router';
 
 export default defineComponent({
diff --git a/app/src/modules/settings/routes/roles/collection.vue b/app/src/modules/settings/routes/roles/collection.vue
index be05b80a6c..29d5ba0f82 100644
--- a/app/src/modules/settings/routes/roles/collection.vue
+++ b/app/src/modules/settings/routes/roles/collection.vue
@@ -62,7 +62,6 @@ import SettingsNavigation from '../../components/navigation.vue';
 
 import api from '@/api';
 import { Header as TableHeader } from '@/components/v-table/types';
-import ValueNull from '@/views/private/components/value-null';
 import { useRouter } from 'vue-router';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { translate } from '@/utils/translate-object-values';
@@ -74,7 +73,7 @@ type RoleItem = Partial<Role> & {
 
 export default defineComponent({
 	name: 'RolesCollection',
-	components: { SettingsNavigation, ValueNull },
+	components: { SettingsNavigation },
 	props: {},
 	setup() {
 		const { t } = useI18n();
diff --git a/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue b/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
index 54bcd505b4..e45e68c337 100644
--- a/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
+++ b/app/src/modules/settings/routes/roles/item/components/permissions-overview.vue
@@ -65,7 +65,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, ref, provide, watch } from 'vue';
-import { useCollectionsStore } from '@/stores';
+import { useCollectionsStore } from '@/stores/collections';
 import PermissionsOverviewHeader from './permissions-overview-header.vue';
 import PermissionsOverviewRow from './permissions-overview-row.vue';
 import { Permission } from '@directus/shared/types';
diff --git a/app/src/modules/settings/routes/roles/item/components/role-info-sidebar-detail.vue b/app/src/modules/settings/routes/roles/item/components/role-info-sidebar-detail.vue
index 8f49aceaf6..73567d2b6c 100644
--- a/app/src/modules/settings/routes/roles/item/components/role-info-sidebar-detail.vue
+++ b/app/src/modules/settings/routes/roles/item/components/role-info-sidebar-detail.vue
@@ -24,7 +24,7 @@
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
-import useClipboard from '@/composables/use-clipboard';
+import { useClipboard } from '@/composables/use-clipboard';
 
 interface Props {
 	role?: Record<string, any> | null;
diff --git a/app/src/modules/settings/routes/roles/item/item.vue b/app/src/modules/settings/routes/roles/item/item.vue
index 2ab8937c8c..935bbeb81e 100644
--- a/app/src/modules/settings/routes/roles/item/item.vue
+++ b/app/src/modules/settings/routes/roles/item/item.vue
@@ -109,12 +109,14 @@
 import { computed, defineComponent, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import useEditsGuard from '@/composables/use-edits-guard';
-import useItem from '@/composables/use-item';
-import useShortcut from '@/composables/use-shortcut';
-import { usePermissionsStore, useServerStore, useUserStore } from '@/stores/';
-import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
-import UsersInvite from '@/views/private/components/users-invite';
+import { useEditsGuard } from '@/composables/use-edits-guard';
+import { useItem } from '@/composables/use-item';
+import { useShortcut } from '@/composables/use-shortcut';
+import { usePermissionsStore } from '@/stores/permissions';
+import { useServerStore } from '@/stores/server';
+import { useUserStore } from '@/stores/user';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail.vue';
+import UsersInvite from '@/views/private/components/users-invite.vue';
 import { useRouter } from 'vue-router';
 import SettingsNavigation from '../../../components/navigation.vue';
 import PermissionsOverview from './components/permissions-overview.vue';
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
index 1336a32ae6..b3ab22b08d 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
@@ -31,7 +31,7 @@ import { defineComponent, PropType, computed } from 'vue';
 import { Permission, Role } from '@directus/shared/types';
 import { Field } from '@directus/shared/types';
 import { useSync } from '@directus/shared/composables';
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
index 66bb9d4795..8c27bc5f82 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/permissions-detail.vue
@@ -49,7 +49,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, computed, watch } from 'vue';
 import api from '@/api';
 import { Permission, Role } from '@directus/shared/types';
-import { useCollectionsStore } from '@/stores/';
+import { useCollectionsStore } from '@/stores/collections';
 import { useRouter } from 'vue-router';
 import Actions from './components/actions.vue';
 import Tabs from './components/tabs.vue';
diff --git a/app/src/modules/settings/routes/translation-strings/translation-strings-tooltip.vue b/app/src/modules/settings/routes/translation-strings/translation-strings-tooltip.vue
index f0d66cd66b..f9a4b3a75a 100644
--- a/app/src/modules/settings/routes/translation-strings/translation-strings-tooltip.vue
+++ b/app/src/modules/settings/routes/translation-strings/translation-strings-tooltip.vue
@@ -37,8 +37,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useUserStore } from '@/stores';
-import ValueNull from '@/views/private/components/value-null';
+import { useUserStore } from '@/stores/user';
 import { TranslationString } from '@/composables/use-translation-strings';
 import { sortBy } from 'lodash';
 
diff --git a/app/src/modules/settings/routes/webhooks/collection.vue b/app/src/modules/settings/routes/webhooks/collection.vue
index 8e96f61937..a6620ae7f5 100644
--- a/app/src/modules/settings/routes/webhooks/collection.vue
+++ b/app/src/modules/settings/routes/webhooks/collection.vue
@@ -95,11 +95,11 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed, ref } from 'vue';
 import SettingsNavigation from '../../components/navigation.vue';
-import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail.vue';
 import { usePreset } from '@/composables/use-preset';
 import { useLayout } from '@directus/shared/composables';
 import api from '@/api';
-import SearchInput from '@/views/private/components/search-input';
+import SearchInput from '@/views/private/components/search-input.vue';
 
 type Item = {
 	[field: string]: any;
diff --git a/app/src/modules/settings/routes/webhooks/item.vue b/app/src/modules/settings/routes/webhooks/item.vue
index 407c6ca603..65c0ec68a9 100644
--- a/app/src/modules/settings/routes/webhooks/item.vue
+++ b/app/src/modules/settings/routes/webhooks/item.vue
@@ -89,11 +89,11 @@ import { defineComponent, computed, toRefs, ref } from 'vue';
 
 import SettingsNavigation from '../../components/navigation.vue';
 import { useRouter } from 'vue-router';
-import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
-import useItem from '@/composables/use-item';
-import SaveOptions from '@/views/private/components/save-options';
-import useShortcut from '@/composables/use-shortcut';
-import useEditsGuard from '@/composables/use-edits-guard';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail.vue';
+import { useItem } from '@/composables/use-item';
+import SaveOptions from '@/views/private/components/save-options.vue';
+import { useShortcut } from '@/composables/use-shortcut';
+import { useEditsGuard } from '@/composables/use-edits-guard';
 
 export default defineComponent({
 	name: 'WebhooksItem',
diff --git a/app/src/modules/users/components/navigation-role.vue b/app/src/modules/users/components/navigation-role.vue
index f720feddeb..e165e78a96 100644
--- a/app/src/modules/users/components/navigation-role.vue
+++ b/app/src/modules/users/components/navigation-role.vue
@@ -22,7 +22,7 @@
 import { useI18n } from 'vue-i18n';
 import { computed, defineComponent, PropType } from 'vue';
 import { Role } from '@directus/shared/types';
-import { useUserStore } from '@/stores';
+import { useUserStore } from '@/stores/user';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/modules/users/components/user-info-sidebar-detail.vue b/app/src/modules/users/components/user-info-sidebar-detail.vue
index 6f0cac50d7..907a47f9b9 100644
--- a/app/src/modules/users/components/user-info-sidebar-detail.vue
+++ b/app/src/modules/users/components/user-info-sidebar-detail.vue
@@ -46,8 +46,8 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, watch } from 'vue';
-import localizedFormat from '@/utils/localized-format';
-import useClipboard from '@/composables/use-clipboard';
+import { localizedFormat } from '@/utils/localized-format';
+import { useClipboard } from '@/composables/use-clipboard';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/modules/users/routes/collection.vue b/app/src/modules/users/routes/collection.vue
index 00b51b8d90..a300ff926d 100644
--- a/app/src/modules/users/routes/collection.vue
+++ b/app/src/modules/users/routes/collection.vue
@@ -162,18 +162,20 @@
 </template>
 
 <script lang="ts" setup>
-import UsersInvite from '@/views/private/components/users-invite';
+import UsersInvite from '@/views/private/components/users-invite.vue';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import UsersNavigation from '../components/navigation.vue';
 
 import api from '@/api';
-import usePreset from '@/composables/use-preset';
-import { usePermissionsStore, useServerStore, useUserStore } from '@/stores';
+import { usePreset } from '@/composables/use-preset';
+import { usePermissionsStore } from '@/stores/permissions';
+import { useServerStore } from '@/stores/server';
+import { useUserStore } from '@/stores/user';
 import { unexpectedError } from '@/utils/unexpected-error';
-import DrawerBatch from '@/views/private/components/drawer-batch';
-import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail';
-import SearchInput from '@/views/private/components/search-input';
+import DrawerBatch from '@/views/private/components/drawer-batch.vue';
+import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail.vue';
+import SearchInput from '@/views/private/components/search-input.vue';
 import { useLayout } from '@directus/shared/composables';
 import { Role } from '@directus/shared/types';
 import { mergeFilters } from '@directus/shared/utils';
diff --git a/app/src/modules/users/routes/item.vue b/app/src/modules/users/routes/item.vue
index 0fa6663b0b..3d9fa6c13a 100644
--- a/app/src/modules/users/routes/item.vue
+++ b/app/src/modules/users/routes/item.vue
@@ -186,20 +186,22 @@ import { ComponentPublicInstance, computed, defineComponent, ref, toRefs, watch
 import { useI18n } from 'vue-i18n';
 
 import api from '@/api';
-import useEditsGuard from '@/composables/use-edits-guard';
-import useFormFields from '@/composables/use-form-fields';
-import useItem from '@/composables/use-item';
+import { useEditsGuard } from '@/composables/use-edits-guard';
+import { useFormFields } from '@/composables/use-form-fields';
+import { useItem } from '@/composables/use-item';
 import { usePermissions } from '@/composables/use-permissions';
-import useShortcut from '@/composables/use-shortcut';
+import { useShortcut } from '@/composables/use-shortcut';
 import { setLanguage } from '@/lang/set-language';
-import { useUserStore } from '@/stores';
-import { useCollectionsStore, useFieldsStore, useServerStore } from '@/stores/';
+import { useUserStore } from '@/stores/user';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
+import { useServerStore } from '@/stores/server';
 import { getRootPath } from '@/utils/get-root-path';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { userName } from '@/utils/user-name';
-import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail';
-import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
-import SaveOptions from '@/views/private/components/save-options';
+import CommentsSidebarDetail from '@/views/private/components/comments-sidebar-detail.vue';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail.vue';
+import SaveOptions from '@/views/private/components/save-options.vue';
 import { useCollection } from '@directus/shared/composables';
 import { Field } from '@directus/shared/types';
 import { useRouter } from 'vue-router';
diff --git a/app/src/panels/list/index.ts b/app/src/panels/list/index.ts
index 95508dc2d5..d0d3c55cd4 100644
--- a/app/src/panels/list/index.ts
+++ b/app/src/panels/list/index.ts
@@ -1,5 +1,5 @@
-import { useFieldsStore } from '@/stores';
-import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
+import { useFieldsStore } from '@/stores/fields';
+import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { definePanel, getFieldsFromTemplate } from '@directus/shared/utils';
 import PanelList from './panel-list.vue';
 
diff --git a/app/src/panels/list/panel-list.vue b/app/src/panels/list/panel-list.vue
index 20bee23b61..ce15b723ef 100644
--- a/app/src/panels/list/panel-list.vue
+++ b/app/src/panels/list/panel-list.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { computed } from 'vue';
 
 const props = withDefaults(
diff --git a/app/src/panels/metric/index.ts b/app/src/panels/metric/index.ts
index efdc6a45ca..6534396bb5 100644
--- a/app/src/panels/metric/index.ts
+++ b/app/src/panels/metric/index.ts
@@ -1,4 +1,4 @@
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { PanelQuery } from '@directus/shared/types';
 import { definePanel } from '@directus/shared/utils';
 import { computed } from 'vue';
diff --git a/app/src/panels/time-series/panel-time-series.vue b/app/src/panels/time-series/panel-time-series.vue
index b363bac4b9..f24f1c3e55 100644
--- a/app/src/panels/time-series/panel-time-series.vue
+++ b/app/src/panels/time-series/panel-time-series.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { adjustDate } from '@/utils/adjust-date';
 import { Filter } from '@directus/shared/types';
 import { abbreviateNumber } from '@directus/shared/utils';
diff --git a/app/src/panels/variable/panel-variable.vue b/app/src/panels/variable/panel-variable.vue
index d41be2f9c6..25bf431b6f 100644
--- a/app/src/panels/variable/panel-variable.vue
+++ b/app/src/panels/variable/panel-variable.vue
@@ -15,7 +15,7 @@
 <script lang="ts" setup>
 import { Type } from '@directus/shared/types';
 import { computed } from 'vue';
-import { useInsightsStore } from '@/stores';
+import { useInsightsStore } from '@/stores/insights';
 
 interface Props {
 	type: Type;
diff --git a/app/src/router.ts b/app/src/router.ts
index 98d4cfa666..e82f021953 100644
--- a/app/src/router.ts
+++ b/app/src/router.ts
@@ -1,13 +1,15 @@
 import { refresh } from '@/auth';
 import { hydrate } from '@/hydrate';
-import TFASetup from '@/routes/tfa-setup';
-import AcceptInviteRoute from '@/routes/accept-invite';
-import LoginRoute from '@/routes/login';
-import LogoutRoute from '@/routes/logout';
-import ShareRoute from '@/routes/shared';
-import PrivateNotFoundRoute from '@/routes/private-not-found';
-import ResetPasswordRoute from '@/routes/reset-password';
-import { useAppStore, useServerStore, useUserStore } from '@/stores';
+import TFASetup from '@/routes/tfa-setup.vue';
+import AcceptInviteRoute from '@/routes/accept-invite.vue';
+import LoginRoute from '@/routes/login/login.vue';
+import LogoutRoute from '@/routes/logout.vue';
+import ShareRoute from '@/routes/shared/shared.vue';
+import PrivateNotFoundRoute from '@/routes/private-not-found.vue';
+import ResetPasswordRoute from '@/routes/reset-password/reset-password.vue';
+import { useAppStore } from '@/stores/app';
+import { useServerStore } from '@/stores/server';
+import { useUserStore } from '@/stores/user';
 import { getRootPath } from '@/utils/get-root-path';
 import { createRouter, createWebHistory, NavigationGuard, NavigationHookAfter, RouteRecordRaw } from 'vue-router';
 
diff --git a/app/src/routes/accept-invite/accept-invite.vue b/app/src/routes/accept-invite.vue
similarity index 97%
rename from app/src/routes/accept-invite/accept-invite.vue
rename to app/src/routes/accept-invite.vue
index 1e49617636..031286835c 100644
--- a/app/src/routes/accept-invite/accept-invite.vue
+++ b/app/src/routes/accept-invite.vue
@@ -37,7 +37,7 @@ import { useRoute } from 'vue-router';
 import { defineComponent, computed, ref } from 'vue';
 import { translateAPIError } from '@/lang';
 import api, { RequestError } from '@/api';
-import jwtPayload from '@/utils/jwt-payload';
+import { jwtPayload } from '@/utils/jwt-payload';
 
 export default defineComponent({
 	setup() {
diff --git a/app/src/routes/accept-invite/index.ts b/app/src/routes/accept-invite/index.ts
deleted file mode 100644
index af8a5caf41..0000000000
--- a/app/src/routes/accept-invite/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import AcceptInviteRoute from './accept-invite.vue';
-
-export { AcceptInviteRoute };
-export default AcceptInviteRoute;
diff --git a/app/src/routes/login/components/login-form/ldap-form.vue b/app/src/routes/login/components/login-form/ldap-form.vue
index 9a1d9dd27c..592f38a1d4 100644
--- a/app/src/routes/login/components/login-form/ldap-form.vue
+++ b/app/src/routes/login/components/login-form/ldap-form.vue
@@ -21,7 +21,7 @@ import { useRouter } from 'vue-router';
 import { login } from '@/auth';
 import { RequestError } from '@/api';
 import { translateAPIError } from '@/lang';
-import { useUserStore } from '@/stores';
+import { useUserStore } from '@/stores/user';
 
 type Credentials = {
 	identifier: string;
diff --git a/app/src/routes/login/components/login-form/login-form.vue b/app/src/routes/login/components/login-form/login-form.vue
index b8d619ea54..79e9c7fd33 100644
--- a/app/src/routes/login/components/login-form/login-form.vue
+++ b/app/src/routes/login/components/login-form/login-form.vue
@@ -26,7 +26,7 @@ import { useRouter } from 'vue-router';
 import { login } from '@/auth';
 import { RequestError } from '@/api';
 import { translateAPIError } from '@/lang';
-import { useUserStore } from '@/stores';
+import { useUserStore } from '@/stores/user';
 
 type Credentials = {
 	email: string;
diff --git a/app/src/routes/login/components/sso-links.vue b/app/src/routes/login/components/sso-links.vue
index c5470cb3b0..73ff0bc7d3 100644
--- a/app/src/routes/login/components/sso-links.vue
+++ b/app/src/routes/login/components/sso-links.vue
@@ -23,7 +23,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, computed, watch, toRefs, PropType } from 'vue';
 import { useRouter } from 'vue-router';
-import { AuthProvider } from '@/types';
+import { AuthProvider } from '@/types/login';
 import { AUTH_SSO_DRIVERS } from '@/constants';
 import { translateAPIError } from '@/lang';
 import { getRootPath } from '@/utils/get-root-path';
diff --git a/app/src/routes/login/index.ts b/app/src/routes/login/index.ts
deleted file mode 100644
index 61d40a6af0..0000000000
--- a/app/src/routes/login/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import LoginRoute from './login.vue';
-
-export { LoginRoute };
-export default LoginRoute;
diff --git a/app/src/routes/login/login.vue b/app/src/routes/login/login.vue
index b3b275d748..807a5d2bf7 100644
--- a/app/src/routes/login/login.vue
+++ b/app/src/routes/login/login.vue
@@ -30,7 +30,8 @@
 
 <script lang="ts" setup>
 import { DEFAULT_AUTH_PROVIDER, DEFAULT_AUTH_DRIVER } from '@/constants';
-import { useAppStore, useServerStore } from '@/stores';
+import { useAppStore } from '@/stores/app';
+import { useServerStore } from '@/stores/server';
 import { storeToRefs } from 'pinia';
 import { computed, ref, unref } from 'vue';
 import { useI18n } from 'vue-i18n';
diff --git a/app/src/routes/logout/logout.vue b/app/src/routes/logout.vue
similarity index 100%
rename from app/src/routes/logout/logout.vue
rename to app/src/routes/logout.vue
diff --git a/app/src/routes/logout/index.ts b/app/src/routes/logout/index.ts
deleted file mode 100644
index 7623c9914c..0000000000
--- a/app/src/routes/logout/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import LogoutRoute from './logout.vue';
-
-export { LogoutRoute };
-export default LogoutRoute;
diff --git a/app/src/routes/private-not-found/private-not-found.vue b/app/src/routes/private-not-found.vue
similarity index 100%
rename from app/src/routes/private-not-found/private-not-found.vue
rename to app/src/routes/private-not-found.vue
diff --git a/app/src/routes/private-not-found/index.ts b/app/src/routes/private-not-found/index.ts
deleted file mode 100644
index 8824b26693..0000000000
--- a/app/src/routes/private-not-found/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import PrivateNotFoundRoute from './private-not-found.vue';
-
-export { PrivateNotFoundRoute };
-export default PrivateNotFoundRoute;
diff --git a/app/src/routes/readme.md b/app/src/routes/readme.md
deleted file mode 100644
index d9e32ff2a6..0000000000
--- a/app/src/routes/readme.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Routes
-
-The Vue components that render out the individual routes defined in [`router.ts`](../router.ts).
-
-## Modules
-
-The module route and corresponding router component is a special case, as it dynamically renders the module based on the
-route path.
diff --git a/app/src/routes/reset-password/index.ts b/app/src/routes/reset-password/index.ts
deleted file mode 100644
index fa5c103fcf..0000000000
--- a/app/src/routes/reset-password/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ResetPasswordRoute from './reset-password.vue';
-
-export { ResetPasswordRoute };
-export default ResetPasswordRoute;
diff --git a/app/src/routes/reset-password/reset.vue b/app/src/routes/reset-password/reset.vue
index ff9c63d0a0..e7d8a55bfb 100644
--- a/app/src/routes/reset-password/reset.vue
+++ b/app/src/routes/reset-password/reset.vue
@@ -24,7 +24,7 @@ import { defineComponent, ref, computed } from 'vue';
 import api from '@/api';
 import { translateAPIError } from '@/lang';
 import { RequestError } from '@/api';
-import jwtPayload from '@/utils/jwt-payload';
+import { jwtPayload } from '@/utils/jwt-payload';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/routes/shared/index.ts b/app/src/routes/shared/index.ts
deleted file mode 100644
index 9987effb22..0000000000
--- a/app/src/routes/shared/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import SharedRoute from './shared.vue';
-
-export { SharedRoute };
-export default SharedRoute;
diff --git a/app/src/routes/shared/shared.vue b/app/src/routes/shared/shared.vue
index cf816e9319..888863cbb9 100644
--- a/app/src/routes/shared/shared.vue
+++ b/app/src/routes/shared/shared.vue
@@ -43,7 +43,7 @@
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { defineComponent, computed, ref } from 'vue';
-import { useAppStore } from '@/stores';
+import { useAppStore } from '@/stores/app';
 import api, { RequestError } from '@/api';
 import { login, logout } from '@/auth';
 import { Share } from '@directus/shared/types';
diff --git a/app/src/routes/tfa-setup/tfa-setup.vue b/app/src/routes/tfa-setup.vue
similarity index 97%
rename from app/src/routes/tfa-setup/tfa-setup.vue
rename to app/src/routes/tfa-setup.vue
index f2a4fe270a..d1135630e6 100644
--- a/app/src/routes/tfa-setup/tfa-setup.vue
+++ b/app/src/routes/tfa-setup.vue
@@ -44,7 +44,8 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, nextTick, onMounted, ref, watch } from 'vue';
 import { useTFASetup } from '@/composables/use-tfa-setup';
-import { useAppStore, useUserStore } from '@/stores';
+import { useAppStore } from '@/stores/app';
+import { useUserStore } from '@/stores/user';
 import { router } from '@/router';
 import { User } from '@directus/shared/types';
 
diff --git a/app/src/routes/tfa-setup/index.ts b/app/src/routes/tfa-setup/index.ts
deleted file mode 100644
index bd6c589ea0..0000000000
--- a/app/src/routes/tfa-setup/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import TFASetup from './tfa-setup.vue';
-
-export { TFASetup };
-export default TFASetup;
diff --git a/app/src/stores/collections.ts b/app/src/stores/collections.ts
index 954c8b449b..48e7568ada 100644
--- a/app/src/stores/collections.ts
+++ b/app/src/stores/collections.ts
@@ -1,9 +1,9 @@
 import api from '@/api';
 import { i18n } from '@/lang';
 import { Collection as CollectionRaw, DeepPartial, Field } from '@directus/shared/types';
-import { Collection } from '@/types';
+import { Collection } from '@/types/collections';
 import { getCollectionType } from '@directus/shared/utils';
-import { notEmpty } from '@/utils/is-empty/';
+import { notEmpty } from '@/utils/is-empty';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
 import formatTitle from '@directus/format-title';
diff --git a/app/src/stores/fields.ts b/app/src/stores/fields.ts
index cf756d1faa..46e51e9bf3 100644
--- a/app/src/stores/fields.ts
+++ b/app/src/stores/fields.ts
@@ -1,7 +1,8 @@
 import api from '@/api';
 import { i18n } from '@/lang';
-import { useRelationsStore, useCollectionsStore } from '@/stores/';
-import { notEmpty } from '@/utils/is-empty/';
+import { useRelationsStore } from '@/stores/relations';
+import { useCollectionsStore } from '@/stores/collections';
+import { notEmpty } from '@/utils/is-empty';
 import { unexpectedError } from '@/utils/unexpected-error';
 import formatTitle from '@directus/format-title';
 import { DeepPartial, Field, FieldRaw, Relation } from '@directus/shared/types';
diff --git a/app/src/stores/flows.ts b/app/src/stores/flows.ts
index c98af013ea..ccb251c441 100644
--- a/app/src/stores/flows.ts
+++ b/app/src/stores/flows.ts
@@ -1,7 +1,8 @@
 import { FlowRaw } from '@directus/shared/types';
 import api from '@/api';
 import { defineStore } from 'pinia';
-import { useUserStore, usePermissionsStore } from '@/stores';
+import { useUserStore } from '@/stores/user';
+import { usePermissionsStore } from '@/stores/permissions';
 
 export const useFlowsStore = defineStore({
 	id: 'flowsStore',
diff --git a/app/src/stores/index.ts b/app/src/stores/index.ts
deleted file mode 100644
index 4f69b91132..0000000000
--- a/app/src/stores/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export * from './app';
-export * from './collections';
-export * from './fields';
-export * from './insights';
-export * from './latency';
-export * from './notifications';
-export * from './permissions';
-export * from './presets';
-export * from './relations';
-export * from './requests';
-export * from './server';
-export * from './settings';
-export * from './user';
-export * from './flows';
diff --git a/app/src/stores/insights.ts b/app/src/stores/insights.ts
index 4b5a9d88fb..eeafe7c41b 100644
--- a/app/src/stores/insights.ts
+++ b/app/src/stores/insights.ts
@@ -1,6 +1,6 @@
 import api from '@/api';
 import { getPanels } from '@/panels';
-import { usePermissionsStore } from '@/stores';
+import { usePermissionsStore } from '@/stores/permissions';
 import { queryToGqlString } from '@/utils/query-to-gql-string';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { Item, Panel } from '@directus/shared/types';
diff --git a/app/src/stores/notifications.ts b/app/src/stores/notifications.ts
index 6b454cbf4b..8bc1faeb1d 100644
--- a/app/src/stores/notifications.ts
+++ b/app/src/stores/notifications.ts
@@ -1,4 +1,4 @@
-import { Snackbar, SnackbarRaw } from '@/types';
+import { Snackbar, SnackbarRaw } from '@/types/notifications';
 import { reverse, sortBy } from 'lodash';
 import { nanoid } from 'nanoid';
 import { defineStore } from 'pinia';
diff --git a/app/src/stores/presets.ts b/app/src/stores/presets.ts
index 0b4876dd52..4fc32e79bb 100644
--- a/app/src/stores/presets.ts
+++ b/app/src/stores/presets.ts
@@ -1,5 +1,5 @@
 import api from '@/api';
-import { useUserStore } from '@/stores/';
+import { useUserStore } from '@/stores/user';
 import { Preset } from '@directus/shared/types';
 import { cloneDeep, merge, orderBy } from 'lodash';
 import { nanoid } from 'nanoid';
diff --git a/app/src/stores/relations.ts b/app/src/stores/relations.ts
index c73ea96a2f..1d6cef2741 100644
--- a/app/src/stores/relations.ts
+++ b/app/src/stores/relations.ts
@@ -1,5 +1,5 @@
 import api from '@/api';
-import { useFieldsStore } from '@/stores/';
+import { useFieldsStore } from '@/stores/fields';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { Relation, DeepPartial } from '@directus/shared/types';
 import { isEqual } from 'lodash';
diff --git a/app/src/stores/user.ts b/app/src/stores/user.ts
index 55beec8535..b98c4f0636 100644
--- a/app/src/stores/user.ts
+++ b/app/src/stores/user.ts
@@ -1,5 +1,5 @@
 import api from '@/api';
-import { useLatencyStore } from '@/stores';
+import { useLatencyStore } from '@/stores/latency';
 import { User } from '@directus/shared/types';
 import { userName } from '@/utils/user-name';
 import { defineStore } from 'pinia';
diff --git a/app/src/components/v-date-picker/flatpickr-overrides.css b/app/src/styles/lib/_flatpickr.scss
similarity index 99%
rename from app/src/components/v-date-picker/flatpickr-overrides.css
rename to app/src/styles/lib/_flatpickr.scss
index cf3efd9d4f..bbda386f92 100644
--- a/app/src/components/v-date-picker/flatpickr-overrides.css
+++ b/app/src/styles/lib/_flatpickr.scss
@@ -1,3 +1,5 @@
+@import 'flatpickr/dist/flatpickr.css';
+
 .flatpickr-wrapper {
 	width: 100%;
 }
diff --git a/app/src/styles/readme.md b/app/src/styles/readme.md
deleted file mode 100644
index 0efbf85f8c..0000000000
--- a/app/src/styles/readme.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Styles
-
-The global styles of the application. Even though everything is based around scoped styles in the components, there's
-still a need to have a certain set of global styles. Most importantly the global reset ([\_base.scss](./_base.scss)) and
-CSS Custom Properties (variables).
-
-There are a couple of third party plugins (codemirror / TinyMCE etc) that expect their styles to be global. This folder
-can be used for that as well.
diff --git a/app/src/views/private/components/comments-sidebar-detail/types.ts b/app/src/types/activity.ts
similarity index 100%
rename from app/src/views/private/components/comments-sidebar-detail/types.ts
rename to app/src/types/activity.ts
diff --git a/app/src/types/index.ts b/app/src/types/index.ts
deleted file mode 100644
index a556d64a35..0000000000
--- a/app/src/types/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from './collections';
-export * from './error';
-export * from './insights';
-export * from './notifications';
-export * from './login';
-export * from './insights';
diff --git a/app/src/views/private/components/revisions-drawer-detail/types.ts b/app/src/types/revisions.ts
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/types.ts
rename to app/src/types/revisions.ts
diff --git a/app/src/utils/add-related-primary-key-to-fields.ts b/app/src/utils/add-related-primary-key-to-fields.ts
index 7cb6b13414..7129915728 100644
--- a/app/src/utils/add-related-primary-key-to-fields.ts
+++ b/app/src/utils/add-related-primary-key-to-fields.ts
@@ -1,4 +1,4 @@
-import { useFieldsStore } from '@/stores/';
+import { useFieldsStore } from '@/stores/fields';
 
 /**
  * Adds the primary key field for any passed relational dot-notation field to the array of fields.
diff --git a/app/src/utils/adjust-fields-for-displays/adjust-fields-for-displays.ts b/app/src/utils/adjust-fields-for-displays.ts
similarity index 91%
rename from app/src/utils/adjust-fields-for-displays/adjust-fields-for-displays.ts
rename to app/src/utils/adjust-fields-for-displays.ts
index 7618f89aa8..bb2a6bcc98 100644
--- a/app/src/utils/adjust-fields-for-displays/adjust-fields-for-displays.ts
+++ b/app/src/utils/adjust-fields-for-displays.ts
@@ -1,8 +1,8 @@
 import { getDisplay } from '@/displays';
-import { useFieldsStore } from '@/stores/';
+import { useFieldsStore } from '@/stores/fields';
 import { Field } from '@directus/shared/types';
 
-export default function adjustFieldsForDisplays(fields: readonly string[], parentCollection: string): string[] {
+export function adjustFieldsForDisplays(fields: readonly string[], parentCollection: string): string[] {
 	const fieldsStore = useFieldsStore();
 
 	const adjustedFields: string[] = fields
diff --git a/app/src/utils/adjust-fields-for-displays/index.ts b/app/src/utils/adjust-fields-for-displays/index.ts
deleted file mode 100644
index 7cd3f39ad3..0000000000
--- a/app/src/utils/adjust-fields-for-displays/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import adjustFieldsForDisplays from './adjust-fields-for-displays';
-
-export { adjustFieldsForDisplays };
-export default adjustFieldsForDisplays;
diff --git a/app/src/utils/arrays-are-equal/arrays-are-equal.ts b/app/src/utils/arrays-are-equal.ts
similarity index 76%
rename from app/src/utils/arrays-are-equal/arrays-are-equal.ts
rename to app/src/utils/arrays-are-equal.ts
index d2643319d0..91da47d61e 100644
--- a/app/src/utils/arrays-are-equal/arrays-are-equal.ts
+++ b/app/src/utils/arrays-are-equal.ts
@@ -1,4 +1,4 @@
-export default function arraysAreEqual(a1: readonly (string | number)[], a2: readonly (string | number)[]): boolean {
+export function arraysAreEqual(a1: readonly (string | number)[], a2: readonly (string | number)[]): boolean {
 	const superSet: {
 		[key: string]: number;
 	} = {};
diff --git a/app/src/utils/arrays-are-equal/index.ts b/app/src/utils/arrays-are-equal/index.ts
deleted file mode 100644
index 7288f1714e..0000000000
--- a/app/src/utils/arrays-are-equal/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import arraysAreEqual from './arrays-are-equal';
-
-export { arraysAreEqual };
-export default arraysAreEqual;
diff --git a/app/src/utils/arrays-are-equal/readme.md b/app/src/utils/arrays-are-equal/readme.md
deleted file mode 100644
index 5e80fe6add..0000000000
--- a/app/src/utils/arrays-are-equal/readme.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# `arraysAreEqual`
-
-Tests if two given arrays contain the same primitive values. **Note**: this _does not_ check object equality in arrays.
-
-Based on https://stackoverflow.com/a/55614659/4859211
-
-## Usage
-
-```js
-const arr1 = ['a', 'b', 'c'];
-const arr2 = [1, 2, 3];
-const arr3 = ['a', 'b', 'c'];
-
-arraysAreEqual(arr1, arr2); // false
-arraysAreEqual(arr1, arr3); // true
-```
diff --git a/app/src/utils/capitalize-first.ts b/app/src/utils/capitalize-first.ts
new file mode 100644
index 0000000000..37cc324ae0
--- /dev/null
+++ b/app/src/utils/capitalize-first.ts
@@ -0,0 +1,3 @@
+export function capitalizeFirst(str: string): string {
+	return str.charAt(0).toUpperCase() + str.slice(1);
+}
diff --git a/app/src/utils/capitalize-first/capitalize-first.ts b/app/src/utils/capitalize-first/capitalize-first.ts
deleted file mode 100644
index c75903b11b..0000000000
--- a/app/src/utils/capitalize-first/capitalize-first.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function capitalizeFirst(str: string): string {
-	return str.charAt(0).toUpperCase() + str.slice(1);
-}
diff --git a/app/src/utils/capitalize-first/index.ts b/app/src/utils/capitalize-first/index.ts
deleted file mode 100644
index 3f751cc4b6..0000000000
--- a/app/src/utils/capitalize-first/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import capitalizeFirst from './capitalize-first';
-
-export { capitalizeFirst };
-export default capitalizeFirst;
diff --git a/app/src/utils/format-field-function.ts b/app/src/utils/format-field-function.ts
index ddcaae9d59..4a4edcc4a8 100644
--- a/app/src/utils/format-field-function.ts
+++ b/app/src/utils/format-field-function.ts
@@ -1,4 +1,4 @@
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { useI18n } from 'vue-i18n';
 import { extractFieldFromFunction } from '@/utils/extract-field-from-function';
 
diff --git a/app/src/utils/format-filesize/format-filesize.ts b/app/src/utils/format-filesize.ts
similarity index 87%
rename from app/src/utils/format-filesize/format-filesize.ts
rename to app/src/utils/format-filesize.ts
index a1989ccffb..22e728a952 100644
--- a/app/src/utils/format-filesize/format-filesize.ts
+++ b/app/src/utils/format-filesize.ts
@@ -1,4 +1,4 @@
-export default function formatFilesize(bytes = 0, decimal = true): string {
+export function formatFilesize(bytes = 0, decimal = true): string {
 	const threshold = decimal ? 1000 : 1024;
 
 	if (Boolean(bytes) === false) {
diff --git a/app/src/utils/format-filesize/index.ts b/app/src/utils/format-filesize/index.ts
deleted file mode 100644
index 7de1358c1c..0000000000
--- a/app/src/utils/format-filesize/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import formatFilesize from './format-filesize';
-
-export { formatFilesize };
-export default formatFilesize;
diff --git a/app/src/utils/geometry/basemap.ts b/app/src/utils/geometry/basemap.ts
index 130cb28622..c19412a503 100644
--- a/app/src/utils/geometry/basemap.ts
+++ b/app/src/utils/geometry/basemap.ts
@@ -1,5 +1,5 @@
 import { Style, RasterSource } from 'maplibre-gl';
-import getSetting from '@/utils/get-setting';
+import { getSetting } from '@/utils/get-setting';
 import maplibre from 'maplibre-gl';
 import { getTheme } from '@/utils/get-theme';
 
diff --git a/app/src/utils/get-date-fns-locale/import-date-locale.ts b/app/src/utils/get-date-fns-locale.ts
similarity index 88%
rename from app/src/utils/get-date-fns-locale/import-date-locale.ts
rename to app/src/utils/get-date-fns-locale.ts
index c737a21a82..9b335386c2 100644
--- a/app/src/utils/get-date-fns-locale/import-date-locale.ts
+++ b/app/src/utils/get-date-fns-locale.ts
@@ -1,4 +1,33 @@
-export default function importDateLocale(locale: string): Promise<any> {
+import { i18n } from '@/lang';
+import { Locale } from 'date-fns';
+
+const locales: { lang: string; locale: Locale }[] = [];
+
+export function getDateFNSLocale(): Locale | undefined {
+	const currentLang = i18n.global.locale.value;
+	return locales.find(({ lang }) => currentLang === lang)?.locale;
+}
+
+export async function loadDateFNSLocale(lang: string) {
+	const localesToTry = [lang, lang.split('-')[0], 'en-US'];
+
+	let locale;
+
+	for (const l of localesToTry) {
+		try {
+			const mod = await importDateLocale(l);
+			locale = mod.default;
+			locales.push({ lang, locale });
+			break;
+		} catch {
+			continue;
+		}
+	}
+
+	return locale;
+}
+
+export function importDateLocale(locale: string): Promise<any> {
 	switch (locale) {
 		case 'af':
 			return import('date-fns/locale/af/index.js');
diff --git a/app/src/utils/get-date-fns-locale/index.ts b/app/src/utils/get-date-fns-locale/index.ts
deleted file mode 100644
index feece4415f..0000000000
--- a/app/src/utils/get-date-fns-locale/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { i18n } from '@/lang';
-import { Locale } from 'date-fns';
-
-import importDateLocale from './import-date-locale';
-
-const locales: { lang: string; locale: Locale }[] = [];
-
-export function getDateFNSLocale(): Locale | undefined {
-	const currentLang = i18n.global.locale.value;
-	return locales.find(({ lang }) => currentLang === lang)?.locale;
-}
-
-export async function loadDateFNSLocale(lang: string) {
-	const localesToTry = [lang, lang.split('-')[0], 'en-US'];
-
-	let locale;
-
-	for (const l of localesToTry) {
-		try {
-			const mod = await importDateLocale(l);
-			locale = mod.default;
-			locales.push({ lang, locale });
-			break;
-		} catch {
-			continue;
-		}
-	}
-
-	return locale;
-}
diff --git a/app/src/utils/get-flatpickr-locale.ts b/app/src/utils/get-flatpickr-locale.ts
index 7e525682bd..3ea1ad7ab8 100644
--- a/app/src/utils/get-flatpickr-locale.ts
+++ b/app/src/utils/get-flatpickr-locale.ts
@@ -1,26 +1,28 @@
-import localizedFormat from '@/utils/localized-format';
+import { localizedFormat } from '@/utils/localized-format';
 import { set, add, startOfWeek } from 'date-fns';
 
 // Flatpickr locale object reference: https://github.com/flatpickr/flatpickr/blob/master/src/l10n/default.ts
-export async function getFlatpickrLocale() {
+export function getFlatpickrLocale() {
 	const now = new Date();
+
 	const firstDayOfWeekForDate = startOfWeek(now);
-	const weekdaysShorthand = await Promise.all(
-		[...Array(7).keys()].map((_, i) => localizedFormat(add(firstDayOfWeekForDate, { days: i }), 'E'))
+
+	const weekdaysShorthand = [...Array(7).keys()].map((_, i) =>
+		localizedFormat(add(firstDayOfWeekForDate, { days: i }), 'E')
 	);
-	const weekdaysLonghand = await Promise.all(
-		[...Array(7).keys()].map((_, i) => localizedFormat(add(firstDayOfWeekForDate, { days: i }), 'EEEE'))
+
+	const weekdaysLonghand = [...Array(7).keys()].map((_, i) =>
+		localizedFormat(add(firstDayOfWeekForDate, { days: i }), 'EEEE')
 	);
-	const monthsShorthand = await Promise.all(
-		[...Array(12).keys()].map((_, i) => localizedFormat(set(now, { month: i }), 'LLL'))
-	);
-	const monthsLonghand = await Promise.all(
-		[...Array(12).keys()].map((_, i) => localizedFormat(set(now, { month: i }), 'LLLL'))
-	);
-	const amPM = await Promise.all([
+
+	const monthsShorthand = [...Array(12).keys()].map((_, i) => localizedFormat(set(now, { month: i }), 'LLL'));
+
+	const monthsLonghand = [...Array(12).keys()].map((_, i) => localizedFormat(set(now, { month: i }), 'LLLL'));
+
+	const amPM = [
 		localizedFormat(set(now, { hours: 0, minutes: 0, seconds: 0 }), 'a'),
 		localizedFormat(set(now, { hours: 23, minutes: 59, seconds: 59 }), 'a'),
-	]);
+	];
 
 	return {
 		weekdays: {
diff --git a/app/src/utils/get-fullcalendar-locale/import-calendar-locale.ts b/app/src/utils/get-fullcalendar-locale.ts
similarity index 90%
rename from app/src/utils/get-fullcalendar-locale/import-calendar-locale.ts
rename to app/src/utils/get-fullcalendar-locale.ts
index 1f4c07d90c..e55a715af1 100644
--- a/app/src/utils/get-fullcalendar-locale/import-calendar-locale.ts
+++ b/app/src/utils/get-fullcalendar-locale.ts
@@ -1,4 +1,26 @@
-export default function importCalendarLocale(locale: string): Promise<any> {
+import { LocaleInput } from '@fullcalendar/core';
+
+export async function getFullcalendarLocale(lang: string): Promise<LocaleInput> {
+	const localesToTry = [lang, lang.split('-')[0], 'en-US'];
+
+	let locale;
+
+	for (const l of localesToTry) {
+		try {
+			const mod = await importCalendarLocale(l);
+
+			// There's a problem in how @fullcalendar/core exports the language to "fake" ESM
+			locale = mod.default.default || mod.default;
+			break;
+		} catch {
+			continue;
+		}
+	}
+
+	return locale;
+}
+
+export function importCalendarLocale(locale: string): Promise<any> {
 	switch (locale) {
 		case 'af':
 			return import('@fullcalendar/core/locales/af.js');
diff --git a/app/src/utils/get-fullcalendar-locale/get-fullcalendar-locale.ts b/app/src/utils/get-fullcalendar-locale/get-fullcalendar-locale.ts
deleted file mode 100644
index 60c152fcd4..0000000000
--- a/app/src/utils/get-fullcalendar-locale/get-fullcalendar-locale.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { LocaleInput } from '@fullcalendar/core';
-
-import importCalendarLocale from './import-calendar-locale';
-
-export async function getFullcalendarLocale(lang: string): Promise<LocaleInput> {
-	const localesToTry = [lang, lang.split('-')[0], 'en-US'];
-
-	let locale;
-
-	for (const l of localesToTry) {
-		try {
-			const mod = await importCalendarLocale(l);
-
-			// There's a problem in how @fullcalendar/core exports the language to "fake" ESM
-			locale = mod.default.default || mod.default;
-			break;
-		} catch {
-			continue;
-		}
-	}
-
-	return locale;
-}
diff --git a/app/src/utils/get-fullcalendar-locale/index.ts b/app/src/utils/get-fullcalendar-locale/index.ts
deleted file mode 100644
index aac683b508..0000000000
--- a/app/src/utils/get-fullcalendar-locale/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { getFullcalendarLocale } from './get-fullcalendar-locale';
-
-export { getFullcalendarLocale };
-export default getFullcalendarLocale;
diff --git a/app/src/utils/get-related-collection/get-related-collection.ts b/app/src/utils/get-related-collection.ts
similarity index 76%
rename from app/src/utils/get-related-collection/get-related-collection.ts
rename to app/src/utils/get-related-collection.ts
index 24241e8163..11eac5c4b9 100644
--- a/app/src/utils/get-related-collection/get-related-collection.ts
+++ b/app/src/utils/get-related-collection.ts
@@ -1,6 +1,6 @@
-import { useRelationsStore } from '@/stores/';
+import { useRelationsStore } from '@/stores/relations';
 import { Relation } from '@directus/shared/types';
-import { getLocalTypeForField } from '../../modules/settings/routes/data-model/get-local-type';
+import { getLocalTypeForField } from '../modules/settings/routes/data-model/get-local-type';
 
 export interface RelatedCollectionData {
 	relatedCollection: string;
@@ -8,7 +8,7 @@ export interface RelatedCollectionData {
 	path?: string[];
 }
 
-export default function getRelatedCollection(collection: string, field: string): RelatedCollectionData {
+export function getRelatedCollection(collection: string, field: string): RelatedCollectionData {
 	const relationsStore = useRelationsStore();
 
 	const relations: Relation[] = relationsStore.getRelationsForField(collection, field);
diff --git a/app/src/utils/get-related-collection/index.ts b/app/src/utils/get-related-collection/index.ts
deleted file mode 100644
index 943a067297..0000000000
--- a/app/src/utils/get-related-collection/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import getRelatedCollection from './get-related-collection';
-
-export { getRelatedCollection };
-export default getRelatedCollection;
diff --git a/app/src/utils/get-setting.ts b/app/src/utils/get-setting.ts
index 303f413b06..d419a101d6 100644
--- a/app/src/utils/get-setting.ts
+++ b/app/src/utils/get-setting.ts
@@ -1,7 +1,7 @@
-import { useSettingsStore } from '@/stores';
+import { useSettingsStore } from '@/stores/settings';
 import { Settings } from '@directus/shared/types';
 
-export default function getSetting(setting: keyof Settings): any {
+export function getSetting(setting: keyof Settings): any {
 	const settingsStore = useSettingsStore();
 	if (settingsStore.settings) return settingsStore.settings[setting];
 	return null;
diff --git a/app/src/utils/get-theme.ts b/app/src/utils/get-theme.ts
index 56fdafde6c..3e0fdc673d 100644
--- a/app/src/utils/get-theme.ts
+++ b/app/src/utils/get-theme.ts
@@ -1,4 +1,4 @@
-import { useUserStore } from '@/stores';
+import { useUserStore } from '@/stores/user';
 
 export function getTheme(): 'light' | 'dark' {
 	const userStore = useUserStore();
diff --git a/app/src/utils/hide-drag-image/hide-drag-image.ts b/app/src/utils/hide-drag-image.ts
similarity index 50%
rename from app/src/utils/hide-drag-image/hide-drag-image.ts
rename to app/src/utils/hide-drag-image.ts
index 86650db1c7..40269f9028 100644
--- a/app/src/utils/hide-drag-image/hide-drag-image.ts
+++ b/app/src/utils/hide-drag-image.ts
@@ -1,4 +1,4 @@
-export default function hideDragImage(dataTransfer: DataTransfer): void {
+export function hideDragImage(dataTransfer: DataTransfer): void {
 	const emptyImg = new Image();
 	dataTransfer.setDragImage(emptyImg, 0, 0);
 }
diff --git a/app/src/utils/hide-drag-image/index.ts b/app/src/utils/hide-drag-image/index.ts
deleted file mode 100644
index 69d2bb0b2a..0000000000
--- a/app/src/utils/hide-drag-image/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import hideDragImage from './hide-drag-image';
-
-export { hideDragImage };
-export default hideDragImage;
diff --git a/app/src/utils/is-allowed.ts b/app/src/utils/is-allowed.ts
index 63d428bbd1..d013a77234 100644
--- a/app/src/utils/is-allowed.ts
+++ b/app/src/utils/is-allowed.ts
@@ -1,4 +1,5 @@
-import { usePermissionsStore, useUserStore } from '@/stores';
+import { usePermissionsStore } from '@/stores/permissions';
+import { useUserStore } from '@/stores/user';
 import { FieldFilter, Permission } from '@directus/shared/types';
 import { generateJoi } from '@directus/shared/utils';
 
diff --git a/app/src/utils/is-empty/is-empty.ts b/app/src/utils/is-empty.ts
similarity index 100%
rename from app/src/utils/is-empty/is-empty.ts
rename to app/src/utils/is-empty.ts
diff --git a/app/src/utils/is-empty/index.ts b/app/src/utils/is-empty/index.ts
deleted file mode 100644
index a7e93ca10a..0000000000
--- a/app/src/utils/is-empty/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { isEmpty, notEmpty } from './is-empty';
-
-export { isEmpty, notEmpty };
-export default { isEmpty, notEmpty };
diff --git a/app/src/utils/is-empty/readme.md b/app/src/utils/is-empty/readme.md
deleted file mode 100644
index 47343472be..0000000000
--- a/app/src/utils/is-empty/readme.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# `isEmpty` / `notEmpty`
-
-Checks if the given value is `null` or `undefined`. Can be used in place of a simple "truthy" check:
-
-Before: `if (value) { ... }`
-
-After: `if (notEmpty(value)) { ... }
-
-## Usage
-
-```js
-const a = undefined;
-const b = null;
-const c = 'test';
-const d = 42;
-const e = [];
-const f = {};
-
-isEmpty(a); // true
-isEmpty(b); // true
-isEmpty(c); // false
-isEmpty(d); // false
-isEmpty(e); // false
-isEmpty(f); // false
-
-notEmpty(a); // false
-notEmpty(b); // false
-notEmpty(c); // true
-notEmpty(d); // true
-notEmpty(e); // true
-notEmpty(f); // true
-```
diff --git a/app/src/utils/color/index.ts b/app/src/utils/is-hex.ts
similarity index 76%
rename from app/src/utils/color/index.ts
rename to app/src/utils/is-hex.ts
index 573523c029..21888337ab 100644
--- a/app/src/utils/color/index.ts
+++ b/app/src/utils/is-hex.ts
@@ -1,7 +1,3 @@
 export function isHex(hex: string): boolean {
 	return /^#(([a-f\d]{2}){3,4})$/i.test(hex);
 }
-
-export default {
-	isHex,
-};
diff --git a/app/src/utils/jwt-payload/jwt-payload.ts b/app/src/utils/jwt-payload.ts
similarity index 80%
rename from app/src/utils/jwt-payload/jwt-payload.ts
rename to app/src/utils/jwt-payload.ts
index ed9a8b12fd..47732f99a2 100644
--- a/app/src/utils/jwt-payload/jwt-payload.ts
+++ b/app/src/utils/jwt-payload.ts
@@ -1,6 +1,6 @@
 import { decode } from 'base-64';
 
-export default function jwtPayload(token: string): any {
+export function jwtPayload(token: string): any {
 	const payloadBase64 = token.split('.')[1].replace('-', '+').replace('_', '/');
 	const payloadDecoded = decode(payloadBase64);
 	const payloadObject = JSON.parse(payloadDecoded);
diff --git a/app/src/utils/jwt-payload/index.ts b/app/src/utils/jwt-payload/index.ts
deleted file mode 100644
index 1d9dff284e..0000000000
--- a/app/src/utils/jwt-payload/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import jwtPayload from './jwt-payload';
-
-export { jwtPayload };
-export default jwtPayload;
diff --git a/app/src/utils/jwt-payload/readme.md b/app/src/utils/jwt-payload/readme.md
deleted file mode 100644
index 39a91fda84..0000000000
--- a/app/src/utils/jwt-payload/readme.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# JWT Payload
-
-Get the payload from a JWT token.
-
-## Usage
-
-```js
-jwtPayload('eyJa ... Gm18');
-
-// => { exp: 1586466920, [key: string]: any }
-```
diff --git a/app/src/utils/localized-format-distance-strict/localized-format-distance-strict.ts b/app/src/utils/localized-format-distance-strict.ts
similarity index 100%
rename from app/src/utils/localized-format-distance-strict/localized-format-distance-strict.ts
rename to app/src/utils/localized-format-distance-strict.ts
diff --git a/app/src/utils/localized-format-distance-strict/index.ts b/app/src/utils/localized-format-distance-strict/index.ts
deleted file mode 100644
index 29ae50f868..0000000000
--- a/app/src/utils/localized-format-distance-strict/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { localizedFormatDistanceStrict } from './localized-format-distance-strict';
-
-export { localizedFormatDistanceStrict };
-export default localizedFormatDistanceStrict;
diff --git a/app/src/utils/localized-format-distance/localized-format-distance.ts b/app/src/utils/localized-format-distance.ts
similarity index 100%
rename from app/src/utils/localized-format-distance/localized-format-distance.ts
rename to app/src/utils/localized-format-distance.ts
diff --git a/app/src/utils/localized-format-distance/index.ts b/app/src/utils/localized-format-distance/index.ts
deleted file mode 100644
index 84af134f60..0000000000
--- a/app/src/utils/localized-format-distance/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { localizedFormatDistance } from './localized-format-distance';
-
-export { localizedFormatDistance };
-export default localizedFormatDistance;
diff --git a/app/src/utils/localized-format.ts b/app/src/utils/localized-format.ts
new file mode 100644
index 0000000000..2953e5e8c3
--- /dev/null
+++ b/app/src/utils/localized-format.ts
@@ -0,0 +1,11 @@
+import { getDateFNSLocale } from '@/utils/get-date-fns-locale';
+import formatOriginal from 'date-fns/format';
+
+type LocalizedFormat = (...a: Parameters<typeof formatOriginal>) => string;
+
+export const localizedFormat: LocalizedFormat = (date, format, options): string => {
+	return formatOriginal(date, format, {
+		...options,
+		locale: getDateFNSLocale(),
+	});
+};
diff --git a/app/src/utils/localized-format/index.ts b/app/src/utils/localized-format/index.ts
deleted file mode 100644
index f421097a15..0000000000
--- a/app/src/utils/localized-format/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { localizedFormat } from './localized-format';
-
-export { localizedFormat };
-export default localizedFormat;
diff --git a/app/src/utils/localized-format/localized-format.ts b/app/src/utils/localized-format/localized-format.ts
deleted file mode 100644
index 90b63ef184..0000000000
--- a/app/src/utils/localized-format/localized-format.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { getDateFNSLocale } from '@/utils/get-date-fns-locale/';
-import formatOriginal from 'date-fns/format';
-
-type localizedFormat = (...a: Parameters<typeof formatOriginal>) => string;
-
-export const localizedFormat: localizedFormat = (date, format, options): string => {
-	return formatOriginal(date, format, {
-		...options,
-		locale: getDateFNSLocale(),
-	});
-};
diff --git a/app/src/utils/notify.ts b/app/src/utils/notify.ts
index 5b58aa0b10..6479357f59 100644
--- a/app/src/utils/notify.ts
+++ b/app/src/utils/notify.ts
@@ -1,5 +1,5 @@
-import { useNotificationsStore } from '@/stores/';
-import { SnackbarRaw } from '@/types';
+import { useNotificationsStore } from '@/stores/notifications';
+import { SnackbarRaw } from '@/types/notifications';
 
 let store: any;
 
diff --git a/app/src/utils/parse-filter.ts b/app/src/utils/parse-filter.ts
index 5ba1ef15ae..90c62aa48b 100644
--- a/app/src/utils/parse-filter.ts
+++ b/app/src/utils/parse-filter.ts
@@ -1,4 +1,4 @@
-import { useUserStore } from '@/stores';
+import { useUserStore } from '@/stores/user';
 import { Accountability } from '@directus/shared/types';
 import { parseFilter as parseFilterShared } from '@directus/shared/utils';
 import { Filter } from '@directus/shared/types';
diff --git a/app/src/utils/parse-preset.ts b/app/src/utils/parse-preset.ts
index a87637b333..64bdfb1bdc 100644
--- a/app/src/utils/parse-preset.ts
+++ b/app/src/utils/parse-preset.ts
@@ -1,4 +1,4 @@
-import { useUserStore } from '@/stores';
+import { useUserStore } from '@/stores/user';
 import { Accountability, Role, User } from '@directus/shared/types';
 import { parsePreset as parsePresetShared } from '@directus/shared/utils';
 
diff --git a/app/src/utils/query-to-gql-string.ts b/app/src/utils/query-to-gql-string.ts
index 0e941eabd7..df42f5a2fe 100644
--- a/app/src/utils/query-to-gql-string.ts
+++ b/app/src/utils/query-to-gql-string.ts
@@ -1,4 +1,4 @@
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { Query } from '@directus/shared/types';
 import { toArray } from '@directus/shared/utils';
 import { jsonToGraphQLQuery } from 'json-to-graphql-query';
diff --git a/app/src/utils/readable-mime-type/index.ts b/app/src/utils/readable-mime-type/index.ts
index ab571166ee..acc9f01ff5 100644
--- a/app/src/utils/readable-mime-type/index.ts
+++ b/app/src/utils/readable-mime-type/index.ts
@@ -1,4 +1,10 @@
-import readableMimeType from './readable-mime-type';
+import extensions from './extensions.json';
+import types from './types.json';
 
-export { readableMimeType };
-export default readableMimeType;
+export function readableMimeType(type: string, extension = false): string | null {
+	if (extension) {
+		return (extensions as any)[type] || null;
+	}
+
+	return (types as any)[type] || null;
+}
diff --git a/app/src/utils/readable-mime-type/readable-mime-type.ts b/app/src/utils/readable-mime-type/readable-mime-type.ts
deleted file mode 100644
index bb7f052869..0000000000
--- a/app/src/utils/readable-mime-type/readable-mime-type.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import extensions from './extensions.json';
-import types from './types.json';
-
-export default function readableMimeType(type: string, extension = false): string | null {
-	if (extension) {
-		return (extensions as any)[type] || null;
-	}
-
-	return (types as any)[type] || null;
-}
diff --git a/app/src/utils/render-string-template.ts b/app/src/utils/render-string-template.ts
index 8c88ae33a9..8ca7052bb9 100644
--- a/app/src/utils/render-string-template.ts
+++ b/app/src/utils/render-string-template.ts
@@ -1,6 +1,6 @@
-import useAliasFields from '@/composables/use-alias-fields';
+import { useAliasFields } from '@/composables/use-alias-fields';
 import { getDisplay } from '@/displays';
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { DisplayConfig, Field } from '@directus/shared/types';
 import { getFieldsFromTemplate } from '@directus/shared/utils';
 import { render, renderFn } from 'micromustache';
diff --git a/app/src/utils/save-as-csv.ts b/app/src/utils/save-as-csv.ts
index 0ac2f02a50..5f2a81747f 100644
--- a/app/src/utils/save-as-csv.ts
+++ b/app/src/utils/save-as-csv.ts
@@ -1,6 +1,6 @@
-import useAliasFields from '@/composables/use-alias-fields';
+import { useAliasFields } from '@/composables/use-alias-fields';
 import { getDisplay } from '@/displays';
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { get } from '@/utils/get-with-arrays';
 import { DisplayConfig, Field, Item } from '@directus/shared/types';
 import { saveAs } from 'file-saver';
diff --git a/app/src/utils/set-favicon.ts b/app/src/utils/set-favicon.ts
index 9cf3bd8532..6b76cf85fb 100644
--- a/app/src/utils/set-favicon.ts
+++ b/app/src/utils/set-favicon.ts
@@ -17,7 +17,7 @@ const svg = (color: string, hide: boolean) => `
 	}
 </svg>`;
 
-export default function setFavicon(color: string | null | undefined, hide = false): void {
+export function setFavicon(color: string | null | undefined, hide = false): void {
 	color = color || cssVar('--primary');
 
 	const icon = svg(color, hide);
diff --git a/app/src/utils/translate-shortcut/translate-shortcut.ts b/app/src/utils/translate-shortcut.ts
similarity index 80%
rename from app/src/utils/translate-shortcut/translate-shortcut.ts
rename to app/src/utils/translate-shortcut.ts
index a6bb36bd99..bb93d03868 100644
--- a/app/src/utils/translate-shortcut/translate-shortcut.ts
+++ b/app/src/utils/translate-shortcut.ts
@@ -1,6 +1,6 @@
-import capitalizeFirst from '@/utils/capitalize-first';
+import { capitalizeFirst } from '@/utils/capitalize-first';
 
-export default function translateShortcut(keys: string[]): string {
+export function translateShortcut(keys: string[]): string {
 	const isMac = navigator.platform.toLowerCase().startsWith('mac') || navigator.platform.startsWith('iP');
 
 	if (isMac) {
diff --git a/app/src/utils/translate-shortcut/index.ts b/app/src/utils/translate-shortcut/index.ts
deleted file mode 100644
index 172c76e805..0000000000
--- a/app/src/utils/translate-shortcut/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import translateShortcut from './translate-shortcut';
-
-export { translateShortcut };
-export default translateShortcut;
diff --git a/app/src/utils/translate-shortcut/readme.md b/app/src/utils/translate-shortcut/readme.md
deleted file mode 100644
index 139ef5abc5..0000000000
--- a/app/src/utils/translate-shortcut/readme.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Translate Shortcut
-
-Translates a given keyboard shortcut in a string that represents it's usage.
-
-```ts
-function translateShortcut(keys: string[]): string;
-```
-
-## Usage
-
-```ts
-translateShortcut(['meta', 'shift', 's']);
-
-// on Windows: Ctrl+Shift+S
-// on Mac:     ⌘⇧S
-```
diff --git a/app/src/utils/unexpected-error.ts b/app/src/utils/unexpected-error.ts
index bcbabc68bd..7afb761306 100644
--- a/app/src/utils/unexpected-error.ts
+++ b/app/src/utils/unexpected-error.ts
@@ -1,7 +1,7 @@
 import { RequestError } from '@/api';
 import { i18n } from '@/lang';
-import { useNotificationsStore } from '@/stores/';
-import { APIError } from '@/types';
+import { useNotificationsStore } from '@/stores/notifications';
+import { APIError } from '@/types/error';
 
 let store: any;
 
diff --git a/app/src/utils/upload-file/upload-file.ts b/app/src/utils/upload-file.ts
similarity index 92%
rename from app/src/utils/upload-file/upload-file.ts
rename to app/src/utils/upload-file.ts
index 6293d60ca2..7ea83cbada 100644
--- a/app/src/utils/upload-file/upload-file.ts
+++ b/app/src/utils/upload-file.ts
@@ -2,9 +2,9 @@ import api from '@/api';
 import emitter, { Events } from '@/events';
 import { i18n } from '@/lang';
 import { notify } from '@/utils/notify';
-import { unexpectedError } from '../unexpected-error';
+import { unexpectedError } from './unexpected-error';
 
-export default async function uploadFile(
+export async function uploadFile(
 	file: File,
 	options?: {
 		onProgressChange?: (percentage: number) => void;
diff --git a/app/src/utils/upload-file/index.ts b/app/src/utils/upload-file/index.ts
deleted file mode 100644
index 7bdd51039c..0000000000
--- a/app/src/utils/upload-file/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import uploadFile from './upload-file';
-
-export { uploadFile };
-export default uploadFile;
diff --git a/app/src/utils/upload-files/upload-files.ts b/app/src/utils/upload-files.ts
similarity index 85%
rename from app/src/utils/upload-files/upload-files.ts
rename to app/src/utils/upload-files.ts
index 94b21e6201..f71364e2a4 100644
--- a/app/src/utils/upload-files/upload-files.ts
+++ b/app/src/utils/upload-files.ts
@@ -1,9 +1,9 @@
 import { i18n } from '@/lang';
 import { notify } from '@/utils/notify';
-import uploadFile from '@/utils/upload-file';
-import { unexpectedError } from '../unexpected-error';
+import { uploadFile } from '@/utils/upload-file';
+import { unexpectedError } from './unexpected-error';
 
-export default async function uploadFiles(
+export async function uploadFiles(
 	files: File[],
 	options?: {
 		onProgressChange?: (percentages: number[]) => void;
diff --git a/app/src/utils/upload-files/index.ts b/app/src/utils/upload-files/index.ts
deleted file mode 100644
index 38b7b75f4f..0000000000
--- a/app/src/utils/upload-files/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import uploadFiles from './upload-files';
-
-export { uploadFiles };
-export default uploadFiles;
diff --git a/app/src/views/private/components/archive-sidebar-detail/archive-sidebar-detail.vue b/app/src/views/private/components/archive-sidebar-detail.vue
similarity index 100%
rename from app/src/views/private/components/archive-sidebar-detail/archive-sidebar-detail.vue
rename to app/src/views/private/components/archive-sidebar-detail.vue
diff --git a/app/src/views/private/components/archive-sidebar-detail/index.ts b/app/src/views/private/components/archive-sidebar-detail/index.ts
deleted file mode 100644
index dbed131a68..0000000000
--- a/app/src/views/private/components/archive-sidebar-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ArchiveSidebarDetail from './archive-sidebar-detail.vue';
-
-export { ArchiveSidebarDetail };
-export default ArchiveSidebarDetail;
diff --git a/app/src/views/private/components/bookmark-add/bookmark-add.vue b/app/src/views/private/components/bookmark-add.vue
similarity index 100%
rename from app/src/views/private/components/bookmark-add/bookmark-add.vue
rename to app/src/views/private/components/bookmark-add.vue
diff --git a/app/src/views/private/components/bookmark-add/index.ts b/app/src/views/private/components/bookmark-add/index.ts
deleted file mode 100644
index 7091f0f7aa..0000000000
--- a/app/src/views/private/components/bookmark-add/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import BookmarkAdd from './bookmark-add.vue';
-
-export { BookmarkAdd };
-export default BookmarkAdd;
diff --git a/app/src/views/private/components/comments-sidebar-detail/comment-input.vue b/app/src/views/private/components/comment-input.vue
similarity index 99%
rename from app/src/views/private/components/comments-sidebar-detail/comment-input.vue
rename to app/src/views/private/components/comment-input.vue
index 376b5a1304..d7c61316a3 100644
--- a/app/src/views/private/components/comments-sidebar-detail/comment-input.vue
+++ b/app/src/views/private/components/comment-input.vue
@@ -68,7 +68,7 @@
 <script setup lang="ts">
 import api from '@/api';
 import vTemplateInput from '@/components/v-template-input.vue';
-import useShortcut from '@/composables/use-shortcut';
+import { useShortcut } from '@/composables/use-shortcut';
 import { getRootPath } from '@/utils/get-root-path';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
diff --git a/app/src/views/private/components/comments-sidebar-detail/comment-item-header.vue b/app/src/views/private/components/comment-item-header.vue
similarity index 100%
rename from app/src/views/private/components/comments-sidebar-detail/comment-item-header.vue
rename to app/src/views/private/components/comment-item-header.vue
diff --git a/app/src/views/private/components/comments-sidebar-detail/comment-item.vue b/app/src/views/private/components/comment-item.vue
similarity index 100%
rename from app/src/views/private/components/comments-sidebar-detail/comment-item.vue
rename to app/src/views/private/components/comment-item.vue
diff --git a/app/src/views/private/components/comments-sidebar-detail/comments-sidebar-detail.vue b/app/src/views/private/components/comments-sidebar-detail.vue
similarity index 95%
rename from app/src/views/private/components/comments-sidebar-detail/comments-sidebar-detail.vue
rename to app/src/views/private/components/comments-sidebar-detail.vue
index 03e50d477c..da5e1dab7d 100644
--- a/app/src/views/private/components/comments-sidebar-detail/comments-sidebar-detail.vue
+++ b/app/src/views/private/components/comments-sidebar-detail.vue
@@ -32,7 +32,7 @@ import api from '@/api';
 import { Activity, ActivityByDate } from './types';
 import CommentInput from './comment-input.vue';
 import { groupBy, orderBy, flatten } from 'lodash';
-import formatLocalized from '@/utils/localized-format';
+import { localizedFormat } from '@/utils/localized-format';
 import { isToday, isYesterday, isThisYear } from 'date-fns';
 import CommentItem from './comment-item.vue';
 import { userName } from '@/utils/user-name';
@@ -122,8 +122,8 @@ function useActivity(collection: string, primaryKey: string | number) {
 
 				if (today) dateFormatted = t('today');
 				else if (yesterday) dateFormatted = t('yesterday');
-				else if (thisYear) dateFormatted = await formatLocalized(date, String(t('date-fns_date_short_no_year')));
-				else dateFormatted = await formatLocalized(date, String(t('date-fns_date_short')));
+				else if (thisYear) dateFormatted = localizedFormat(date, String(t('date-fns_date_short_no_year')));
+				else dateFormatted = localizedFormat(date, String(t('date-fns_date_short')));
 
 				activityGrouped.push({
 					date: date,
diff --git a/app/src/views/private/components/comments-sidebar-detail/index.ts b/app/src/views/private/components/comments-sidebar-detail/index.ts
deleted file mode 100644
index a3963bb569..0000000000
--- a/app/src/views/private/components/comments-sidebar-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import CommentsSidebarDetail from './comments-sidebar-detail.vue';
-
-export { CommentsSidebarDetail };
-export default CommentsSidebarDetail;
diff --git a/app/src/views/private/components/comments-sidebar-detail/readme.md b/app/src/views/private/components/comments-sidebar-detail/readme.md
deleted file mode 100644
index 0284f91019..0000000000
--- a/app/src/views/private/components/comments-sidebar-detail/readme.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Comments Sidebar
-
-Renders an comment timeline in a sidebar section meant to be used in the sidebar sidebar.
-
-## Usage
-
-```html
-<comments-sidebar-detail collection="authors" primary-key="15" />
-```
diff --git a/app/src/views/private/components/docs-wrapper/docs-wrapper.vue b/app/src/views/private/components/docs-wrapper.vue
similarity index 100%
rename from app/src/views/private/components/docs-wrapper/docs-wrapper.vue
rename to app/src/views/private/components/docs-wrapper.vue
diff --git a/app/src/views/private/components/docs-wrapper/index.ts b/app/src/views/private/components/docs-wrapper/index.ts
deleted file mode 100644
index 314b36113a..0000000000
--- a/app/src/views/private/components/docs-wrapper/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import DocsWrapper from './docs-wrapper.vue';
-
-export { DocsWrapper };
-export default DocsWrapper;
diff --git a/app/src/views/private/components/drawer-batch/drawer-batch.vue b/app/src/views/private/components/drawer-batch.vue
similarity index 98%
rename from app/src/views/private/components/drawer-batch/drawer-batch.vue
rename to app/src/views/private/components/drawer-batch.vue
index 10672e0962..77a269b511 100644
--- a/app/src/views/private/components/drawer-batch/drawer-batch.vue
+++ b/app/src/views/private/components/drawer-batch.vue
@@ -28,7 +28,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, computed, PropType, toRefs } from 'vue';
 import api from '@/api';
 import { VALIDATION_TYPES } from '@/constants';
-import { APIError } from '@/types';
+import { APIError } from '@/types/error';
 import { unexpectedError } from '@/utils/unexpected-error';
 
 export default defineComponent({
diff --git a/app/src/views/private/components/drawer-batch/index.ts b/app/src/views/private/components/drawer-batch/index.ts
deleted file mode 100644
index 7c23f09a8a..0000000000
--- a/app/src/views/private/components/drawer-batch/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import DrawerBatch from './drawer-batch.vue';
-
-export { DrawerBatch };
-export default DrawerBatch;
diff --git a/app/src/views/private/components/drawer-collection/drawer-collection.vue b/app/src/views/private/components/drawer-collection.vue
similarity index 98%
rename from app/src/views/private/components/drawer-collection/drawer-collection.vue
rename to app/src/views/private/components/drawer-collection.vue
index fdfa2f8b4b..bb967c3371 100644
--- a/app/src/views/private/components/drawer-collection/drawer-collection.vue
+++ b/app/src/views/private/components/drawer-collection.vue
@@ -49,9 +49,9 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, ref, computed, toRefs, watch } from 'vue';
 import { Filter } from '@directus/shared/types';
-import usePreset from '@/composables/use-preset';
+import { usePreset } from '@/composables/use-preset';
 import { useCollection, useLayout } from '@directus/shared/composables';
-import SearchInput from '@/views/private/components/search-input';
+import SearchInput from '@/views/private/components/search-input.vue';
 
 export default defineComponent({
 	components: { SearchInput },
diff --git a/app/src/views/private/components/drawer-collection/index.ts b/app/src/views/private/components/drawer-collection/index.ts
deleted file mode 100644
index 2a1bf970b9..0000000000
--- a/app/src/views/private/components/drawer-collection/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import DrawerCollection from './drawer-collection.vue';
-
-export { DrawerCollection };
-export default DrawerCollection;
diff --git a/app/src/views/private/components/drawer-item/drawer-item.vue b/app/src/views/private/components/drawer-item.vue
similarity index 98%
rename from app/src/views/private/components/drawer-item/drawer-item.vue
rename to app/src/views/private/components/drawer-item.vue
index c6d4324f6f..d75e20c529 100644
--- a/app/src/views/private/components/drawer-item/drawer-item.vue
+++ b/app/src/views/private/components/drawer-item.vue
@@ -62,13 +62,14 @@
 <script lang="ts">
 import api from '@/api';
 import { getRootPath } from '@/utils/get-root-path';
-import FilePreview from '@/views/private/components/file-preview';
+import FilePreview from '@/views/private/components/file-preview.vue';
 import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { usePermissions } from '@/composables/use-permissions';
-import useTemplateData from '@/composables/use-template-data';
-import { useFieldsStore, useRelationsStore } from '@/stores';
+import { useTemplateData } from '@/composables/use-template-data';
+import { useFieldsStore } from '@/stores/fields';
+import { useRelationsStore } from '@/stores/relations';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { validateItem } from '@/utils/validate-item';
 import { useCollection } from '@directus/shared/composables';
diff --git a/app/src/views/private/components/drawer-item/index.ts b/app/src/views/private/components/drawer-item/index.ts
deleted file mode 100644
index 59f5de9096..0000000000
--- a/app/src/views/private/components/drawer-item/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import DrawerItem from './drawer-item.vue';
-
-export { DrawerItem };
-export default DrawerItem;
diff --git a/app/src/views/private/components/export-sidebar-detail.vue b/app/src/views/private/components/export-sidebar-detail.vue
index e4309704ac..19394be477 100644
--- a/app/src/views/private/components/export-sidebar-detail.vue
+++ b/app/src/views/private/components/export-sidebar-detail.vue
@@ -223,7 +223,7 @@
 import api from '@/api';
 import { getRootPath } from '@/utils/get-root-path';
 import { notify } from '@/utils/notify';
-import readableMimeType from '@/utils/readable-mime-type';
+import { readableMimeType } from '@/utils/readable-mime-type';
 import { Filter } from '@directus/shared/types';
 import { computed, reactive, ref, toRefs, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -231,8 +231,8 @@ import { useCollection } from '@directus/shared/composables';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { debounce } from 'lodash';
 import { getEndpoint } from '@directus/shared/utils';
-import FolderPicker from '@/views/private/components/folder-picker/folder-picker.vue';
-import { usePermissionsStore } from '@/stores';
+import FolderPicker from '@/views/private/components/folder-picker.vue';
+import { usePermissionsStore } from '@/stores/permissions';
 
 type LayoutQuery = {
 	fields?: string[];
diff --git a/app/src/views/private/components/file-lightbox/file-lightbox.vue b/app/src/views/private/components/file-lightbox.vue
similarity index 99%
rename from app/src/views/private/components/file-lightbox/file-lightbox.vue
rename to app/src/views/private/components/file-lightbox.vue
index d0c4b92892..ead8d0e8a3 100644
--- a/app/src/views/private/components/file-lightbox/file-lightbox.vue
+++ b/app/src/views/private/components/file-lightbox.vue
@@ -27,7 +27,7 @@
 import api from '@/api';
 import { computed, defineComponent, ref, watch } from 'vue';
 
-import FilePreview from '@/views/private/components/file-preview';
+import FilePreview from '@/views/private/components/file-preview.vue';
 import { nanoid } from 'nanoid';
 
 import { getRootPath } from '@/utils/get-root-path';
diff --git a/app/src/views/private/components/file-lightbox/index.ts b/app/src/views/private/components/file-lightbox/index.ts
deleted file mode 100644
index 770eb07c94..0000000000
--- a/app/src/views/private/components/file-lightbox/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import FileLightbox from './file-lightbox.vue';
-
-export { FileLightbox };
-export default FileLightbox;
diff --git a/app/src/views/private/components/file-preview/file-preview.vue b/app/src/views/private/components/file-preview.vue
similarity index 100%
rename from app/src/views/private/components/file-preview/file-preview.vue
rename to app/src/views/private/components/file-preview.vue
diff --git a/app/src/views/private/components/file-preview/index.ts b/app/src/views/private/components/file-preview/index.ts
deleted file mode 100644
index 1f885d2e52..0000000000
--- a/app/src/views/private/components/file-preview/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import FilePreview from './file-preview.vue';
-
-export { FilePreview };
-export default FilePreview;
diff --git a/app/src/views/private/components/flow-sidebar-detail.vue b/app/src/views/private/components/flow-sidebar-detail.vue
index 2b4aac8328..6ff11fae00 100644
--- a/app/src/views/private/components/flow-sidebar-detail.vue
+++ b/app/src/views/private/components/flow-sidebar-detail.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
 import api from '@/api';
-import { useFlowsStore } from '@/stores';
+import { useFlowsStore } from '@/stores/flows';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { useCollection } from '@directus/shared/composables';
diff --git a/app/src/views/private/components/folder-picker/folder-picker-list-item.vue b/app/src/views/private/components/folder-picker-list-item.vue
similarity index 100%
rename from app/src/views/private/components/folder-picker/folder-picker-list-item.vue
rename to app/src/views/private/components/folder-picker-list-item.vue
diff --git a/app/src/views/private/components/folder-picker/folder-picker.vue b/app/src/views/private/components/folder-picker.vue
similarity index 100%
rename from app/src/views/private/components/folder-picker/folder-picker.vue
rename to app/src/views/private/components/folder-picker.vue
diff --git a/app/src/views/private/components/header-bar-actions/header-bar-actions.vue b/app/src/views/private/components/header-bar-actions.vue
similarity index 100%
rename from app/src/views/private/components/header-bar-actions/header-bar-actions.vue
rename to app/src/views/private/components/header-bar-actions.vue
diff --git a/app/src/views/private/components/header-bar-actions/index.ts b/app/src/views/private/components/header-bar-actions/index.ts
deleted file mode 100644
index 40bb82eba7..0000000000
--- a/app/src/views/private/components/header-bar-actions/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import HeaderBarActions from './header-bar-actions.vue';
-
-export { HeaderBarActions };
-export default HeaderBarActions;
diff --git a/app/src/views/private/components/header-bar-actions/readme.md b/app/src/views/private/components/header-bar-actions/readme.md
deleted file mode 100644
index f7163cdb24..0000000000
--- a/app/src/views/private/components/header-bar-actions/readme.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# Header Bar Actions
-
-Wrapper component that will hold all the actions in the right of the header bar. This component is made to work well
-with nested `v-button`s, but also works with any other markup.
-
-On mobile, it will only render the last element in the default slot and render a toggle button to expand / collapse the
-actions.
-
-## Usage
-
-```html
-<header-bar-actions>
-	<v-button rounded icon style="--v-button-background-color: var(--success);">
-		<v-icon name="add" />
-	</v-button>
-	<v-button rounded icon style="--v-button-background-color: var(--warning);">
-		<v-icon name="delete" />
-	</v-button>
-	<v-button rounded icon style="--v-button-background-color: var(--danger);">
-		<v-icon name="favorite" />
-	</v-button>
-</header-bar-actions>
-```
-
-## Props
-
-n/a
-
-## Slots
-
-| Slot      | Description |
-| --------- | ----------- |
-| _default_ |             |
-
-## Events
-
-| Event            | Description                                            | Value |
-| ---------------- | ------------------------------------------------------ | ----- |
-| `toggle:sidebar` | Emitted when the user clicks the toggle sidebar button | --    |
-
-## CSS Variables
-
-n/a
diff --git a/app/src/views/private/components/header-bar/header-bar.vue b/app/src/views/private/components/header-bar.vue
similarity index 98%
rename from app/src/views/private/components/header-bar/header-bar.vue
rename to app/src/views/private/components/header-bar.vue
index 7de5f2586e..b2fb0d6195 100644
--- a/app/src/views/private/components/header-bar/header-bar.vue
+++ b/app/src/views/private/components/header-bar.vue
@@ -38,7 +38,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
-import HeaderBarActions from '../header-bar-actions';
+import HeaderBarActions from './header-bar-actions.vue';
 
 export default defineComponent({
 	components: { HeaderBarActions },
diff --git a/app/src/views/private/components/header-bar/index.ts b/app/src/views/private/components/header-bar/index.ts
deleted file mode 100644
index d3d852e256..0000000000
--- a/app/src/views/private/components/header-bar/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import HeaderBar from './header-bar.vue';
-
-export { HeaderBar };
-export default HeaderBar;
diff --git a/app/src/views/private/components/header-bar/readme.md b/app/src/views/private/components/header-bar/readme.md
deleted file mode 100644
index 56307a8fde..0000000000
--- a/app/src/views/private/components/header-bar/readme.md
+++ /dev/null
@@ -1,53 +0,0 @@
-# Header Bar
-
-The header bar is the header bar displayed above the content of every component that relies on `private-view`. It needs
-to have a lot of slots in order to allow the different routes and modules to control what things are shown, while also
-providing enough consistency between views.
-
-## Usage
-
-```html
-<header-bar title="Global Settings">
-	<template #actions>
-		<v-button to="/content/settings/+">
-			<v-icon name="add" />
-		</v-button>
-	</template>
-</header-bar>
-```
-
-## Navigation toggle / `title-outer:prepend` slot
-
-On mobile views, the `title-outer:prepend` slot is replaced with the navigation toggle button. Never put any view
-critical actions in this slot.
-
-## Props
-
-| Prop      | Description                                                                         | Default |
-| --------- | ----------------------------------------------------------------------------------- | ------- |
-| `title`\* | The title of the current page                                                       | --      |
-| `dense`   | Render the header in a smaller total height, leaving more room for the view content | --      |
-
-## Slots
-
-| Slot                  | Description                                                                                                          |
-| --------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `title-outer:prepend` | Before the title box. This is hidden on mobile.                                                                      |
-| `headline`            | Line above the title. Used for breadcrumbs and other secondary information                                           |
-| `title:prepend`       | Before the actual title                                                                                              |
-| `title:append`        | After the actual title. Used for status indicator / bookmark toggle                                                  |
-| `title-outer:append`  | After the title box.                                                                                                 |
-| `actions:prepend`     | Before the action buttons                                                                                            |
-| `actions`             | The actual action buttons. This slot is rendered inside [the `header-bar-actions` component](../header-bar-actions/) |
-| `actions:append`      | After the actions section.                                                                                           |
-
-## Events
-
-| Event            | Description                               | Value |
-| ---------------- | ----------------------------------------- | ----- |
-| `toggle:nav`     | When the nav toggle button is clicked     | --    |
-| `toggle:sidebar` | When the sidebar toggle button is clicked | --    |
-
-## CSS Variables
-
-n/a
diff --git a/app/src/views/private/components/image-editor/image-editor.vue b/app/src/views/private/components/image-editor.vue
similarity index 96%
rename from app/src/views/private/components/image-editor/image-editor.vue
rename to app/src/views/private/components/image-editor.vue
index 21996b14ca..c5ed40d1cf 100644
--- a/app/src/views/private/components/image-editor/image-editor.vue
+++ b/app/src/views/private/components/image-editor.vue
@@ -22,7 +22,7 @@
 
 		<div v-show="imageData && !loading && !error" class="editor-container">
 			<div class="editor">
-				<v-image ref="imageElement" :src="imageURL" role="presentation" alt="" @load="onImageLoad" />
+				<img ref="imageElement" :src="imageURL" role="presentation" alt="" @load="onImageLoad" />
 			</div>
 
 			<div class="toolbar">
@@ -80,7 +80,7 @@
 							v-if="imageData"
 							clickable
 							:active="aspectRatio === imageData.width / imageData.height"
-							@click="aspectRatio = imageData.width / imageData.height"
+							@click="setAspectRatio"
 						>
 							<v-list-item-icon><v-icon name="crop_original" /></v-list-item-icon>
 							<v-list-item-content>{{ t('original') }}</v-list-item-content>
@@ -96,7 +96,7 @@
 					{{ n(imageData.width) }}x{{ n(imageData.height) }}
 					<template v-if="imageData.width !== newDimensions.width || imageData.height !== newDimensions.height">
 						->
-						{{ n(newDimensions.width) }}x{{ n(newDimensions.height) }}
+						{{ n(newDimensions.width ?? 0) }}x{{ n(newDimensions.height ?? 0) }}
 					</template>
 				</div>
 
@@ -115,7 +115,7 @@
 </template>
 
 <script lang="ts">
-import api from '@/api';
+import api, { addTokenToURL } from '@/api';
 import { computed, defineComponent, nextTick, reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -190,7 +190,7 @@ export default defineComponent({
 		});
 
 		const imageURL = computed(() => {
-			return `${getRootPath()}assets/${props.id}?${nanoid()}`;
+			return addTokenToURL(`${getRootPath()}assets/${props.id}?${nanoid()}`);
 		});
 
 		return {
@@ -213,6 +213,7 @@ export default defineComponent({
 			newDimensions,
 			dragMode,
 			cropping,
+			setAspectRatio,
 		};
 
 		function useImage() {
@@ -443,6 +444,12 @@ export default defineComponent({
 				dragMode.value = 'move';
 			}
 		}
+
+		function setAspectRatio() {
+			if (imageData.value) {
+				aspectRatio.value = imageData.value.width / imageData.value.height;
+			}
+		}
 	},
 });
 </script>
diff --git a/app/src/views/private/components/image-editor/index.ts b/app/src/views/private/components/image-editor/index.ts
deleted file mode 100644
index f97f64ff0a..0000000000
--- a/app/src/views/private/components/image-editor/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ImageEditor from './image-editor.vue';
-
-export { ImageEditor };
-export default ImageEditor;
diff --git a/app/src/views/private/components/latency-indicator/latency-indicator.vue b/app/src/views/private/components/latency-indicator.vue
similarity index 97%
rename from app/src/views/private/components/latency-indicator/latency-indicator.vue
rename to app/src/views/private/components/latency-indicator.vue
index 74e1bdea4b..c7f081cf25 100644
--- a/app/src/views/private/components/latency-indicator/latency-indicator.vue
+++ b/app/src/views/private/components/latency-indicator.vue
@@ -8,7 +8,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
-import { useLatencyStore } from '@/stores';
+import { useLatencyStore } from '@/stores/latency';
 import { sortBy } from 'lodash';
 import ms from 'ms';
 
diff --git a/app/src/views/private/components/latency-indicator/index.ts b/app/src/views/private/components/latency-indicator/index.ts
deleted file mode 100644
index afee4405f5..0000000000
--- a/app/src/views/private/components/latency-indicator/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import LatencyIndicator from './latency-indicator.vue';
-
-export { LatencyIndicator };
-export default LatencyIndicator;
diff --git a/app/src/views/private/components/layout-sidebar-detail/layout-sidebar-detail.vue b/app/src/views/private/components/layout-sidebar-detail.vue
similarity index 100%
rename from app/src/views/private/components/layout-sidebar-detail/layout-sidebar-detail.vue
rename to app/src/views/private/components/layout-sidebar-detail.vue
diff --git a/app/src/views/private/components/layout-sidebar-detail/index.ts b/app/src/views/private/components/layout-sidebar-detail/index.ts
deleted file mode 100644
index b6e404ba4f..0000000000
--- a/app/src/views/private/components/layout-sidebar-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import LayoutSidebarDetail from './layout-sidebar-detail.vue';
-
-export { LayoutSidebarDetail };
-export default LayoutSidebarDetail;
diff --git a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue b/app/src/views/private/components/module-bar-avatar.vue
similarity index 96%
rename from app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
rename to app/src/views/private/components/module-bar-avatar.vue
index 8c12e24ee5..dc5957d481 100644
--- a/app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
+++ b/app/src/views/private/components/module-bar-avatar.vue
@@ -51,7 +51,9 @@
 </template>
 
 <script lang="ts">
-import { useAppStore, useNotificationsStore, useUserStore } from '@/stores/';
+import { useAppStore } from '@/stores/app';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useUserStore } from '@/stores/user';
 import { getRootPath } from '@/utils/get-root-path';
 import { storeToRefs } from 'pinia';
 import { computed, defineComponent, ref } from 'vue';
diff --git a/app/src/views/private/components/module-bar-avatar/index.ts b/app/src/views/private/components/module-bar-avatar/index.ts
deleted file mode 100644
index c1677d5d68..0000000000
--- a/app/src/views/private/components/module-bar-avatar/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ModuleBarAvatar from './module-bar-avatar.vue';
-
-export { ModuleBarAvatar };
-export default ModuleBarAvatar;
diff --git a/app/src/views/private/components/module-bar-avatar/readme.md b/app/src/views/private/components/module-bar-avatar/readme.md
deleted file mode 100644
index 31b37ae217..0000000000
--- a/app/src/views/private/components/module-bar-avatar/readme.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Module Bar Avatar
-
-Renders the avatar and shows the sign out button on hover.
-
-## Usage
-
-```html
-<module-bar-avatar />
-```
-
-## Props
-
-n/a
-
-## Events
-
-n/a
-
-## Slots
-
-n/a
-
-## CSS Variables
-
-n/a
diff --git a/app/src/views/private/components/module-bar-logo/module-bar-logo.vue b/app/src/views/private/components/module-bar-logo.vue
similarity index 94%
rename from app/src/views/private/components/module-bar-logo/module-bar-logo.vue
rename to app/src/views/private/components/module-bar-logo.vue
index 2525396756..ee3723ee26 100644
--- a/app/src/views/private/components/module-bar-logo/module-bar-logo.vue
+++ b/app/src/views/private/components/module-bar-logo.vue
@@ -19,7 +19,8 @@
 </template>
 
 <script lang="ts">
-import { useRequestsStore, useSettingsStore } from '@/stores/';
+import { useRequestsStore } from '@/stores/requests';
+import { useSettingsStore } from '@/stores/settings';
 import { getRootPath } from '@/utils/get-root-path';
 import { computed, defineComponent, ref, toRefs, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -106,7 +107,7 @@ export default defineComponent({
 		width: 40px;
 		height: 32px;
 		margin: 0 auto;
-		background-image: url('./sprite.svg');
+		background-image: url('../../../assets/sprite.svg');
 		background-position: 0% 0%;
 		background-size: 600px 32px;
 	}
diff --git a/app/src/views/private/components/module-bar-logo/index.ts b/app/src/views/private/components/module-bar-logo/index.ts
deleted file mode 100644
index 856b6f3a9b..0000000000
--- a/app/src/views/private/components/module-bar-logo/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ModuleBarLogo from './module-bar-logo.vue';
-
-export { ModuleBarLogo };
-export default ModuleBarLogo;
diff --git a/app/src/views/private/components/module-bar-logo/readme.md b/app/src/views/private/components/module-bar-logo/readme.md
deleted file mode 100644
index fd0f83864a..0000000000
--- a/app/src/views/private/components/module-bar-logo/readme.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Module Bar Logo
-
-Logo at the top of the module bar. Renders either the rabbit (default), or the custom project logo if it exists.
-
-It listens to the requestsStore, and makes the bunny run whenever a request is made.
-
-## Usage
-
-```html
-<module-bar-logo />
-```
-
-## Props
-
-n/a
-
-## Slots
-
-n/a
-
-## Events
-
-n/a
-
-## CSS Variables
-
-n/a
diff --git a/app/src/views/private/components/module-bar.vue b/app/src/views/private/components/module-bar.vue
index 43033ac528..fc05f2ace3 100644
--- a/app/src/views/private/components/module-bar.vue
+++ b/app/src/views/private/components/module-bar.vue
@@ -31,9 +31,9 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
 import { getModules } from '@/modules/';
-import ModuleBarLogo from './module-bar-logo/';
-import ModuleBarAvatar from './module-bar-avatar/';
-import { useSettingsStore } from '@/stores/';
+import ModuleBarLogo from './module-bar-logo.vue';
+import ModuleBarAvatar from './module-bar-avatar.vue';
+import { useSettingsStore } from '@/stores/settings';
 import { translate } from '@/utils/translate-object-values';
 import { MODULE_BAR_DEFAULT } from '@/constants';
 import { omit } from 'lodash';
diff --git a/app/src/views/private/components/notification-dialogs/notification-dialogs.vue b/app/src/views/private/components/notification-dialogs.vue
similarity index 93%
rename from app/src/views/private/components/notification-dialogs/notification-dialogs.vue
rename to app/src/views/private/components/notification-dialogs.vue
index 1c16cc06bb..e17b2e72bf 100644
--- a/app/src/views/private/components/notification-dialogs/notification-dialogs.vue
+++ b/app/src/views/private/components/notification-dialogs.vue
@@ -24,8 +24,9 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, computed } from 'vue';
-import { useNotificationsStore, useUserStore } from '@/stores/';
-import { Notification } from '@/types';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useUserStore } from '@/stores/user';
+import { Notification } from '@/types/notifications';
 import { useProjectInfo } from '@/modules/settings/composables/use-project-info';
 
 export default defineComponent({
diff --git a/app/src/views/private/components/notification-dialogs/index.ts b/app/src/views/private/components/notification-dialogs/index.ts
deleted file mode 100644
index aa342f4039..0000000000
--- a/app/src/views/private/components/notification-dialogs/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import NotificationDialogs from './notification-dialogs.vue';
-
-export { NotificationDialogs };
-export default NotificationDialogs;
diff --git a/app/src/views/private/components/notification-item/notification-item.vue b/app/src/views/private/components/notification-item.vue
similarity index 98%
rename from app/src/views/private/components/notification-item/notification-item.vue
rename to app/src/views/private/components/notification-item.vue
index 39d5bc304d..b7ed0deb36 100644
--- a/app/src/views/private/components/notification-item/notification-item.vue
+++ b/app/src/views/private/components/notification-item.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useNotificationsStore } from '@/stores/';
+import { useNotificationsStore } from '@/stores/notifications';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/views/private/components/notification-item/index.ts b/app/src/views/private/components/notification-item/index.ts
deleted file mode 100644
index 6934d385cf..0000000000
--- a/app/src/views/private/components/notification-item/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import NotificationItem from './notification-item.vue';
-
-export { NotificationItem };
-export default NotificationItem;
diff --git a/app/src/views/private/components/notification-item/readme.md b/app/src/views/private/components/notification-item/readme.md
deleted file mode 100644
index d637c93e10..0000000000
--- a/app/src/views/private/components/notification-item/readme.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Notification Item
-
-An individual notification. Shouldn't be used outside of the notification group.
-
-## Usage
-
-```html
-<notification-item id="123" title="Hello world!" />
-```
-
-## Props
-
-| Prop      | Description                                                  | Default |
-| --------- | ------------------------------------------------------------ | ------- |
-| `id`\*    | Unique identifier for the notification                       | --      |
-| `title`\* | What title to display in the notification                    | --      |
-| `text`    | What body text to display in the notification                | --      |
-| `icon`    | Icon to render on the left of the notification               | --      |
-| `type`    | One of `info`, `success`, `warning`, `error`                 | `info`  |
-| `persist` | Prevents notification from disappearing                      | `false` |
-| `tail`    | Show a little tail on the bottom right of the bubble         | `false` |
-| `dense`   | Render the notification densely (no body text, less spacing) | `false` |
-
-## Events
-
-n/a
-
-## Slots
-
-n/a
-
-## CSS Variables
-
-n/a
diff --git a/app/src/views/private/components/notifications-drawer.vue b/app/src/views/private/components/notifications-drawer.vue
index 5582e7bd28..e2a9c3abc0 100644
--- a/app/src/views/private/components/notifications-drawer.vue
+++ b/app/src/views/private/components/notifications-drawer.vue
@@ -55,7 +55,10 @@
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useAppStore, useUserStore, useNotificationsStore, useCollectionsStore } from '@/stores';
+import { useAppStore } from '@/stores/app';
+import { useUserStore } from '@/stores/user';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useCollectionsStore } from '@/stores/collections';
 import { storeToRefs } from 'pinia';
 import { Notification } from '@directus/shared/types';
 import api from '@/api';
diff --git a/app/src/views/private/components/notifications-group/notifications-group.vue b/app/src/views/private/components/notifications-group.vue
similarity index 93%
rename from app/src/views/private/components/notifications-group/notifications-group.vue
rename to app/src/views/private/components/notifications-group.vue
index e8c258bcba..4723308ed5 100644
--- a/app/src/views/private/components/notifications-group/notifications-group.vue
+++ b/app/src/views/private/components/notifications-group.vue
@@ -14,8 +14,8 @@
 
 <script lang="ts">
 import { defineComponent, toRefs } from 'vue';
-import { useNotificationsStore } from '@/stores/';
-import NotificationItem from '../notification-item';
+import { useNotificationsStore } from '@/stores/notifications';
+import NotificationItem from './notification-item.vue';
 
 export default defineComponent({
 	components: { NotificationItem },
diff --git a/app/src/views/private/components/notifications-group/index.ts b/app/src/views/private/components/notifications-group/index.ts
deleted file mode 100644
index 97b0894708..0000000000
--- a/app/src/views/private/components/notifications-group/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import NotificationsGroup from './notifications-group.vue';
-
-export { NotificationsGroup };
-export default NotificationsGroup;
diff --git a/app/src/views/private/components/notifications-group/readme.md b/app/src/views/private/components/notifications-group/readme.md
deleted file mode 100644
index 414abd64cb..0000000000
--- a/app/src/views/private/components/notifications-group/readme.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Notifications Group
-
-Renders a notification item for every notification in the notificationsStore queue
-
-## Usage
-
-```html
-<notifications-group />
-```
-
-## Props
-
-n/a
-
-## Events
-
-n/a
-
-## Slots
-
-n/a
-
-## CSS Variables
-
-n/a
diff --git a/app/src/views/private/components/notifications-preview/notifications-preview.vue b/app/src/views/private/components/notifications-preview.vue
similarity index 92%
rename from app/src/views/private/components/notifications-preview/notifications-preview.vue
rename to app/src/views/private/components/notifications-preview.vue
index 15f041d54b..a79aa44dbd 100644
--- a/app/src/views/private/components/notifications-preview/notifications-preview.vue
+++ b/app/src/views/private/components/notifications-preview.vue
@@ -28,9 +28,9 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent } from 'vue';
-import SidebarButton from '../sidebar-button';
-import NotificationItem from '../notification-item';
-import { useNotificationsStore } from '@/stores/';
+import SidebarButton from './sidebar-button.vue';
+import NotificationItem from './notification-item.vue';
+import { useNotificationsStore } from '@/stores/notifications';
 
 export default defineComponent({
 	components: { SidebarButton, NotificationItem },
diff --git a/app/src/views/private/components/notifications-preview/index.ts b/app/src/views/private/components/notifications-preview/index.ts
deleted file mode 100644
index e7c2340b84..0000000000
--- a/app/src/views/private/components/notifications-preview/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import NotificationsPreview from './notifications-preview.vue';
-
-export { NotificationsPreview };
-export default NotificationsPreview;
diff --git a/app/src/views/private/components/notifications-preview/readme.md b/app/src/views/private/components/notifications-preview/readme.md
deleted file mode 100644
index 5c3b2039a4..0000000000
--- a/app/src/views/private/components/notifications-preview/readme.md
+++ /dev/null
@@ -1 +0,0 @@
-# Notifications Preview
diff --git a/app/src/views/private/components/project-info/project-info.vue b/app/src/views/private/components/project-info.vue
similarity index 91%
rename from app/src/views/private/components/project-info/project-info.vue
rename to app/src/views/private/components/project-info.vue
index ba6b0d2397..e0fe87baed 100644
--- a/app/src/views/private/components/project-info/project-info.vue
+++ b/app/src/views/private/components/project-info.vue
@@ -10,8 +10,8 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
-import LatencyIndicator from '../latency-indicator';
-import { useServerStore } from '@/stores/';
+import LatencyIndicator from './latency-indicator.vue';
+import { useServerStore } from '@/stores/server';
 
 export default defineComponent({
 	components: { LatencyIndicator },
diff --git a/app/src/views/private/components/project-info/index.ts b/app/src/views/private/components/project-info/index.ts
deleted file mode 100644
index db62552498..0000000000
--- a/app/src/views/private/components/project-info/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ProjectInfo from './project-info.vue';
-
-export { ProjectInfo };
-export default ProjectInfo;
diff --git a/app/src/views/private/components/refresh-sidebar-detail/refresh-sidebar-detail.vue b/app/src/views/private/components/refresh-sidebar-detail.vue
similarity index 100%
rename from app/src/views/private/components/refresh-sidebar-detail/refresh-sidebar-detail.vue
rename to app/src/views/private/components/refresh-sidebar-detail.vue
diff --git a/app/src/views/private/components/refresh-sidebar-detail/index.ts b/app/src/views/private/components/refresh-sidebar-detail/index.ts
deleted file mode 100644
index 824e713631..0000000000
--- a/app/src/views/private/components/refresh-sidebar-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import RefreshSidebarDetail from './refresh-sidebar-detail.vue';
-
-export { RefreshSidebarDetail };
-export default RefreshSidebarDetail;
diff --git a/app/src/views/private/components/render-display/render-display.vue b/app/src/views/private/components/render-display.vue
similarity index 93%
rename from app/src/views/private/components/render-display/render-display.vue
rename to app/src/views/private/components/render-display.vue
index e770a7bf42..e148d58ee8 100644
--- a/app/src/views/private/components/render-display/render-display.vue
+++ b/app/src/views/private/components/render-display.vue
@@ -17,11 +17,9 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
 import { getDisplay } from '@/displays';
-import ValueNull from '@/views/private/components/value-null';
 import { translate } from '@/utils/translate-object-values';
 
 export default defineComponent({
-	components: { ValueNull },
 	props: {
 		display: {
 			type: String,
diff --git a/app/src/views/private/components/render-display/index.ts b/app/src/views/private/components/render-display/index.ts
deleted file mode 100644
index 7efeebffef..0000000000
--- a/app/src/views/private/components/render-display/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import RenderDisplay from './render-display.vue';
-
-export { RenderDisplay };
-export default RenderDisplay;
diff --git a/app/src/views/private/components/render-display/readme.md b/app/src/views/private/components/render-display/readme.md
deleted file mode 100644
index 7ac82e3f1b..0000000000
--- a/app/src/views/private/components/render-display/readme.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Render Display
-
-Renders the display component with the provided options and value. This will do the display function check and uses the
-functional handler if that's set.
-
-## Usage
-
-```html
-<render-display
-	display="array"
-	:options="{
-		wrap: false
-	}"
-	value="example,value"
-/>
-```
-
-## Props
-
-| Prop        | Description                          | Default |
-| ----------- | ------------------------------------ | ------- |
-| `display`\* | The display to render the value with |         |
-| `options`   | The display options for the display  | `null`  |
-| `value`     | The value to render in the display   | `null`  |
-
-## Events
-
-n/a
-
-## Slots
-
-n/a
-
-## CSS Variables
-
-n/a
diff --git a/app/src/views/private/components/render-template/render-template.vue b/app/src/views/private/components/render-template.vue
similarity index 96%
rename from app/src/views/private/components/render-template/render-template.vue
rename to app/src/views/private/components/render-template.vue
index a0e740ce64..b199066c08 100644
--- a/app/src/views/private/components/render-template/render-template.vue
+++ b/app/src/views/private/components/render-template.vue
@@ -22,16 +22,14 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed, ref } from 'vue';
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { get } from 'lodash';
 import { Field } from '@directus/shared/types';
 import { getDisplay } from '@/displays';
-import ValueNull from '@/views/private/components/value-null';
 import { getDefaultDisplayForType } from '@/utils/get-default-display-for-type';
 import { translate } from '@/utils/translate-object-values';
 
 export default defineComponent({
-	components: { ValueNull },
 	props: {
 		collection: {
 			type: String,
diff --git a/app/src/views/private/components/render-template/index.ts b/app/src/views/private/components/render-template/index.ts
deleted file mode 100644
index 4fccc9176d..0000000000
--- a/app/src/views/private/components/render-template/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import RenderTemplate from './render-template.vue';
-
-export { RenderTemplate };
-export default RenderTemplate;
diff --git a/app/src/views/private/components/revisions-drawer-detail/revision-item.vue b/app/src/views/private/components/revision-item.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revision-item.vue
rename to app/src/views/private/components/revision-item.vue
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-date-group.vue b/app/src/views/private/components/revisions-date-group.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-date-group.vue
rename to app/src/views/private/components/revisions-date-group.vue
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue b/app/src/views/private/components/revisions-drawer-detail.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
rename to app/src/views/private/components/revisions-drawer-detail.vue
diff --git a/app/src/views/private/components/revisions-drawer-detail/index.ts b/app/src/views/private/components/revisions-drawer-detail/index.ts
deleted file mode 100644
index 304e56cfbe..0000000000
--- a/app/src/views/private/components/revisions-drawer-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import RevisionsDrawerDetail from './revisions-drawer-detail.vue';
-
-export { RevisionsDrawerDetail };
-export default RevisionsDrawerDetail;
diff --git a/app/src/views/private/components/revisions-drawer-detail/readme.md b/app/src/views/private/components/revisions-drawer-detail/readme.md
deleted file mode 100644
index 77250d016e..0000000000
--- a/app/src/views/private/components/revisions-drawer-detail/readme.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Activity Sidebar
-
-Renders an activity timeline in a sidebar section meant to be used in the sidebar sidebar.
-
-## Usage
-
-```html
-<activity-sidebar-detail collection="authors" primary-key="15" />
-```
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-picker.vue b/app/src/views/private/components/revisions-drawer-picker.vue
similarity index 97%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-drawer-picker.vue
rename to app/src/views/private/components/revisions-drawer-picker.vue
index 8a90380c56..4b40421d7a 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-picker.vue
+++ b/app/src/views/private/components/revisions-drawer-picker.vue
@@ -27,7 +27,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed, watch, ref } from 'vue';
 import { Revision } from './types';
 import { useSync } from '@directus/shared/composables';
-import localizedFormat from '@/utils/localized-format';
+import { localizedFormat } from '@/utils/localized-format';
 import { userName } from '@/utils/user-name';
 
 type Option = {
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue b/app/src/views/private/components/revisions-drawer-preview.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue
rename to app/src/views/private/components/revisions-drawer-preview.vue
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates-change.vue b/app/src/views/private/components/revisions-drawer-updates-change.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates-change.vue
rename to app/src/views/private/components/revisions-drawer-updates-change.vue
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue b/app/src/views/private/components/revisions-drawer-updates.vue
similarity index 98%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
rename to app/src/views/private/components/revisions-drawer-updates.vue
index 7e2a6fcd3d..91a8e702cd 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
+++ b/app/src/views/private/components/revisions-drawer-updates.vue
@@ -23,7 +23,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType, computed } from 'vue';
 import { Revision } from './types';
-import { useFieldsStore } from '@/stores';
+import { useFieldsStore } from '@/stores/fields';
 import { diffWordsWithSpace, diffJson, diffArrays } from 'diff';
 import RevisionsDrawerUpdatesChange from './revisions-drawer-updates-change.vue';
 import { isEqual } from 'lodash';
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue b/app/src/views/private/components/revisions-drawer.vue
similarity index 100%
rename from app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
rename to app/src/views/private/components/revisions-drawer.vue
diff --git a/app/src/views/private/components/save-options/save-options.vue b/app/src/views/private/components/save-options.vue
similarity index 97%
rename from app/src/views/private/components/save-options/save-options.vue
rename to app/src/views/private/components/save-options.vue
index 7c1954a1d7..67a5a750e1 100644
--- a/app/src/views/private/components/save-options/save-options.vue
+++ b/app/src/views/private/components/save-options.vue
@@ -30,7 +30,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent } from 'vue';
-import translateShortcut from '@/utils/translate-shortcut';
+import { translateShortcut } from '@/utils/translate-shortcut';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/views/private/components/save-options/index.ts b/app/src/views/private/components/save-options/index.ts
deleted file mode 100644
index b4417d093f..0000000000
--- a/app/src/views/private/components/save-options/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import SaveOptions from './save-options.vue';
-
-export { SaveOptions };
-export default SaveOptions;
diff --git a/app/src/views/private/components/save-options/readme.md b/app/src/views/private/components/save-options/readme.md
deleted file mode 100644
index b272e9f486..0000000000
--- a/app/src/views/private/components/save-options/readme.md
+++ /dev/null
@@ -1 +0,0 @@
-# Save Options
diff --git a/app/src/views/private/components/search-input/search-input.vue b/app/src/views/private/components/search-input.vue
similarity index 100%
rename from app/src/views/private/components/search-input/search-input.vue
rename to app/src/views/private/components/search-input.vue
diff --git a/app/src/views/private/components/search-input/index.ts b/app/src/views/private/components/search-input/index.ts
deleted file mode 100644
index dafc13df0c..0000000000
--- a/app/src/views/private/components/search-input/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import SearchInput from './search-input.vue';
-
-export { SearchInput };
-export default SearchInput;
diff --git a/app/src/views/private/components/search-input/readme.md b/app/src/views/private/components/search-input/readme.md
deleted file mode 100644
index 19609350d1..0000000000
--- a/app/src/views/private/components/search-input/readme.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Search Input
-
-Renders as a standard header toggle button, expands into a full search bar. Should ideally be used in the last position
-in the header bar actions slot (left most action).
-
-## Usage
-
-```html
-<search-filter v-model="searchQuery" />
-```
-
-## Props
-
-| Prop    | Description                  | Default |
-| ------- | ---------------------------- | ------- |
-| `value` | Value for use with `v-model` | `null`  |
-
-## Events
-
-| Event   | Description                      | Value    |
-| ------- | -------------------------------- | -------- |
-| `input` | Input event, used with `v-model` | `string` |
-
-## Slots
-
-n/a
-
-## CSS Variables
-
-n/a
diff --git a/app/src/views/private/components/shares-sidebar-detail/share-item.vue b/app/src/views/private/components/share-item.vue
similarity index 100%
rename from app/src/views/private/components/shares-sidebar-detail/share-item.vue
rename to app/src/views/private/components/share-item.vue
diff --git a/app/src/views/private/components/shares-sidebar-detail/shares-sidebar-detail.vue b/app/src/views/private/components/shares-sidebar-detail.vue
similarity index 98%
rename from app/src/views/private/components/shares-sidebar-detail/shares-sidebar-detail.vue
rename to app/src/views/private/components/shares-sidebar-detail.vue
index 0fd91119e2..f0944152ce 100644
--- a/app/src/views/private/components/shares-sidebar-detail/shares-sidebar-detail.vue
+++ b/app/src/views/private/components/shares-sidebar-detail.vue
@@ -77,11 +77,11 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, computed } from 'vue';
-import DrawerItem from '@/views/private/components/drawer-item';
+import DrawerItem from '@/views/private/components/drawer-item.vue';
 import { getRootPath } from '@/utils/get-root-path';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { Share } from '@directus/shared/types';
-import useClipboard from '@/composables/use-clipboard';
+import { useClipboard } from '@/composables/use-clipboard';
 
 import api from '@/api';
 import ShareItem from './share-item.vue';
diff --git a/app/src/views/private/components/shares-sidebar-detail/index.ts b/app/src/views/private/components/shares-sidebar-detail/index.ts
deleted file mode 100644
index 70349f65bb..0000000000
--- a/app/src/views/private/components/shares-sidebar-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import SharesSidebarDetail from './shares-sidebar-detail.vue';
-
-export { SharesSidebarDetail };
-export default SharesSidebarDetail;
diff --git a/app/src/views/private/components/sidebar-button/sidebar-button.vue b/app/src/views/private/components/sidebar-button.vue
similarity index 96%
rename from app/src/views/private/components/sidebar-button/sidebar-button.vue
rename to app/src/views/private/components/sidebar-button.vue
index 1f3f7bfb9c..152b54d12f 100644
--- a/app/src/views/private/components/sidebar-button/sidebar-button.vue
+++ b/app/src/views/private/components/sidebar-button.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import { defineComponent, toRefs } from 'vue';
-import { useAppStore } from '@/stores';
+import { useAppStore } from '@/stores/app';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/views/private/components/sidebar-button/index.ts b/app/src/views/private/components/sidebar-button/index.ts
deleted file mode 100644
index 80d49fdf08..0000000000
--- a/app/src/views/private/components/sidebar-button/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import SidebarButton from './sidebar-button.vue';
-
-export { SidebarButton };
-export default SidebarButton;
diff --git a/app/src/views/private/components/sidebar-button/readme.md b/app/src/views/private/components/sidebar-button/readme.md
deleted file mode 100644
index edb6ea4afa..0000000000
--- a/app/src/views/private/components/sidebar-button/readme.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Sidebar Button
-
-Looks the same as a sidebar detail, but can be used as a button / router link.
-
-## Usage
-
-```html
-<sidebar-button icon="info">Close Sidebar</sidebar-button>
-```
-
-## Props
-
-| Prop     | Description                                        | Default |
-| -------- | -------------------------------------------------- | ------- |
-| `icon`\* | What icon to render on the left of the button      | `box`   |
-| `to`     | router-link to prop. Turns button into router-link | `null`  |
-
-## Events
-
-| Event   | Description                      | Value        |
-| ------- | -------------------------------- | ------------ |
-| `click` | When the button has been clicked | `MouseEvent` |
-
-## Slots
-
-| Slot      | Description         | Data |
-| --------- | ------------------- | ---- |
-| _default_ | Title of the button | --   |
-
-## CSS Variables
-
-n/a
diff --git a/app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.vue b/app/src/views/private/components/sidebar-detail-group.vue
similarity index 100%
rename from app/src/views/private/components/sidebar-detail-group/sidebar-detail-group.vue
rename to app/src/views/private/components/sidebar-detail-group.vue
diff --git a/app/src/views/private/components/sidebar-detail-group/index.ts b/app/src/views/private/components/sidebar-detail-group/index.ts
deleted file mode 100644
index f24c5228a8..0000000000
--- a/app/src/views/private/components/sidebar-detail-group/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import SidebarDetailGroup from './sidebar-detail-group.vue';
-
-export { SidebarDetailGroup };
-export default SidebarDetailGroup;
diff --git a/app/src/views/private/components/sidebar-detail-group/readme.md b/app/src/views/private/components/sidebar-detail-group/readme.md
deleted file mode 100644
index c65449a6f6..0000000000
--- a/app/src/views/private/components/sidebar-detail-group/readme.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# Sidebar Detail Group
-
-Used in the private view to manage the active state of [the nested `sidebar-detail` components](../sidebar-detail/).
-
-## Usage
-
-```html
-<sidebar-detail-group :sidebar-open="sidebarOpen">
-	<sidebar-detail icon="person" title="Users">
-		<!-- section content -->
-	</sidebar-detail>
-	<sidebar-detail icon="settings" title="Settings">
-		<!-- section content -->
-	</sidebar-detail>
-	<sidebar-detail icon="map" title="Routes">
-		<!-- section content -->
-	</sidebar-detail>
-</sidebar-detail-group>
-```
-
-## Sidebar open state
-
-Once the sidebar closes, all open sidebar details should be closed. By watching the `sidebar-open` prop, we can
-dynamically close all details.
-
-## Props
-
-| Prop           | Description                                               | Default |
-| -------------- | --------------------------------------------------------- | ------- |
-| `sidebar-open` | If the sidebar sidebar in the private view is open or not | `false` |
-
-## Slots
-
-| Slot      | Description |
-| --------- | ----------- |
-| _default_ |             |
-
-## Events
-
-n/a
-
-## CSS Variables
-
-n/a
diff --git a/app/src/views/private/components/sidebar-detail/sidebar-detail.vue b/app/src/views/private/components/sidebar-detail.vue
similarity index 97%
rename from app/src/views/private/components/sidebar-detail/sidebar-detail.vue
rename to app/src/views/private/components/sidebar-detail.vue
index 68968a8aac..4a82aa3d50 100644
--- a/app/src/views/private/components/sidebar-detail/sidebar-detail.vue
+++ b/app/src/views/private/components/sidebar-detail.vue
@@ -28,8 +28,8 @@
 
 <script lang="ts">
 import { defineComponent, toRefs } from 'vue';
-import { useAppStore } from '@/stores';
-import { useGroupable } from '@/composables/groupable';
+import { useAppStore } from '@/stores/app';
+import { useGroupable } from '@/composables/use-groupable';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/views/private/components/sidebar-detail/index.ts b/app/src/views/private/components/sidebar-detail/index.ts
deleted file mode 100644
index 901c0e2f65..0000000000
--- a/app/src/views/private/components/sidebar-detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import SidebarDetail from './sidebar-detail.vue';
-
-export { SidebarDetail };
-export default SidebarDetail;
diff --git a/app/src/views/private/components/sidebar-detail/readme.md b/app/src/views/private/components/sidebar-detail/readme.md
deleted file mode 100644
index 0eb61a5eb1..0000000000
--- a/app/src/views/private/components/sidebar-detail/readme.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# Sidebar Detail
-
-Meant to be used in the sidebar sidebar of the private view. Is used to register multiple sections in the sidebar.
-
-## Usage
-
-```html
-<sidebar-detail icon="person" title="Users">
-	<p>Users:</p>
-	<ul>
-		<li>Admin</li>
-	</ul>
-</sidebar-detail>
-```
-
-The active state is managed by the same logic as v-item-group. The sidebar detail state is managed by the private
-`sidebar-detail-group` component in `private-view`.
-
-## Props
-
-| Prop      | Description                               | Default    |
-| --------- | ----------------------------------------- | ---------- |
-| `icon`\*  | Icon to be displayed in the toggle header | `settings` |
-| `title`\* | Name of the section                       | --         |
-| `badge`   | Show badge on icon with passed value      | `null`     |
-
-## Slots
-
-| Slot      | Description |
-| --------- | ----------- |
-| _default_ |             |
-
-## Events
-
-n/a
-
-## CSS Variables
-
-n/a
diff --git a/app/src/views/private/components/user-popover/user-popover.vue b/app/src/views/private/components/user-popover.vue
similarity index 100%
rename from app/src/views/private/components/user-popover/user-popover.vue
rename to app/src/views/private/components/user-popover.vue
diff --git a/app/src/views/private/components/user-popover/index.ts b/app/src/views/private/components/user-popover/index.ts
deleted file mode 100644
index fbc985f254..0000000000
--- a/app/src/views/private/components/user-popover/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import UserPopover from './user-popover.vue';
-
-export { UserPopover };
-export default UserPopover;
diff --git a/app/src/views/private/components/users-invite/users-invite.vue b/app/src/views/private/components/users-invite.vue
similarity index 98%
rename from app/src/views/private/components/users-invite/users-invite.vue
rename to app/src/views/private/components/users-invite.vue
index 3d4204b294..032c967422 100644
--- a/app/src/views/private/components/users-invite/users-invite.vue
+++ b/app/src/views/private/components/users-invite.vue
@@ -45,7 +45,7 @@ import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, watch } from 'vue';
 import api from '@/api';
 import { unexpectedError } from '@/utils/unexpected-error';
-import { APIError } from '@/types';
+import { APIError } from '@/types/error';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/views/private/components/users-invite/index.ts b/app/src/views/private/components/users-invite/index.ts
deleted file mode 100644
index 809758b70a..0000000000
--- a/app/src/views/private/components/users-invite/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import UsersInvite from './users-invite.vue';
-
-export { UsersInvite };
-export default UsersInvite;
diff --git a/app/src/views/private/components/value-null/value-null.vue b/app/src/views/private/components/value-null.vue
similarity index 100%
rename from app/src/views/private/components/value-null/value-null.vue
rename to app/src/views/private/components/value-null.vue
diff --git a/app/src/views/private/components/value-null/index.ts b/app/src/views/private/components/value-null/index.ts
deleted file mode 100644
index 753a4fa7f5..0000000000
--- a/app/src/views/private/components/value-null/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import ValueNull from './value-null.vue';
-
-export { ValueNull };
-export default ValueNull;
diff --git a/app/src/views/private/private-view.vue b/app/src/views/private/private-view.vue
index 86da6d72b5..f4187c2106 100644
--- a/app/src/views/private/private-view.vue
+++ b/app/src/views/private/private-view.vue
@@ -74,25 +74,26 @@
 </template>
 
 <script lang="ts" setup>
-import useElementSize from '@/composables/use-element-size';
-import useEventListener from '@/composables/use-event-listener';
-import useLocalStorage from '@/composables/use-local-storage';
-import useTitle from '@/composables/use-title';
-import useWindowSize from '@/composables/use-window-size';
-import { useAppStore, useUserStore } from '@/stores';
+import { useElementSize } from '@/composables/use-element-size';
+import { useEventListener } from '@/composables/use-event-listener';
+import { useLocalStorage } from '@/composables/use-local-storage';
+import { useTitle } from '@/composables/use-title';
+import { useWindowSize } from '@/composables/use-window-size';
+import { useAppStore } from '@/stores/app';
+import { useUserStore } from '@/stores/user';
 import { debounce } from 'lodash';
 import { storeToRefs } from 'pinia';
 import { computed, onMounted, provide, ref, toRefs, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import HeaderBar from './components/header-bar';
+import HeaderBar from './components/header-bar.vue';
 import ModuleBar from './components/module-bar.vue';
-import NotificationDialogs from './components/notification-dialogs/';
+import NotificationDialogs from './components/notification-dialogs.vue';
 import NotificationsDrawer from './components/notifications-drawer.vue';
-import NotificationsGroup from './components/notifications-group/';
-import NotificationsPreview from './components/notifications-preview/';
-import ProjectInfo from './components/project-info';
-import SidebarDetailGroup from './components/sidebar-detail-group/';
+import NotificationsGroup from './components/notifications-group.vue';
+import NotificationsPreview from './components/notifications-preview.vue';
+import ProjectInfo from './components/project-info.vue';
+import SidebarDetailGroup from './components/sidebar-detail-group.vue';
 
 interface Props {
 	title?: string | null;
diff --git a/app/src/views/public/public-view.vue b/app/src/views/public/public-view.vue
index a28b8a94e9..bdb3b6578a 100644
--- a/app/src/views/public/public-view.vue
+++ b/app/src/views/public/public-view.vue
@@ -58,7 +58,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { useServerStore } from '@/stores';
+import { useServerStore } from '@/stores/server';
 import { storeToRefs } from 'pinia';
 import { getRootPath } from '@/utils/get-root-path';
 import { useI18n } from 'vue-i18n';
diff --git a/app/src/views/shared/shared-view.vue b/app/src/views/shared/shared-view.vue
index 4c70b526e6..05ecf22478 100644
--- a/app/src/views/shared/shared-view.vue
+++ b/app/src/views/shared/shared-view.vue
@@ -35,7 +35,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
-import { useServerStore } from '@/stores';
+import { useServerStore } from '@/stores/server';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import { getRootPath } from '@/utils/get-root-path';
diff --git a/app/tests/utils/is-allowed.test.ts b/app/tests/utils/is-allowed.test.ts
index d87d265613..d93e665db3 100644
--- a/app/tests/utils/is-allowed.test.ts
+++ b/app/tests/utils/is-allowed.test.ts
@@ -1,6 +1,6 @@
 import { isAllowed } from '../../src/utils/is-allowed';
 
-jest.mock('../../src/stores', () => {
+jest.mock('../../src/stores/permissions', () => {
 	return {
 		usePermissionsStore: jest
 			.fn()
@@ -37,7 +37,11 @@ jest.mock('../../src/stores', () => {
 					},
 				],
 			}), //6
+	};
+});
 
+jest.mock('../../src/stores/user', () => {
+	return {
 		useUserStore: jest.fn().mockReturnValueOnce({ isAdmin: true }).mockReturnValue({ isAdmin: false }),
 	};
 });
diff --git a/packages/create-directus-extension/package.json b/packages/create-directus-extension/package.json
index c0d710f814..8721d55068 100644
--- a/packages/create-directus-extension/package.json
+++ b/packages/create-directus-extension/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "create-directus-extension",
-	"version": "9.14.3",
+	"version": "9.14.5",
 	"description": "A small util that will scaffold a Directus extension.",
 	"main": "lib/index.js",
 	"repository": "directus/directus",
diff --git a/packages/drive-azure/package.json b/packages/drive-azure/package.json
index 62a0ba1a3c..b13b9d030d 100644
--- a/packages/drive-azure/package.json
+++ b/packages/drive-azure/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@directus/drive-azure",
-	"version": "9.14.3",
+	"version": "9.14.5",
 	"description": "Azure Blob driver for @directus/drive",
 	"license": "MIT",
 	"main": "dist/index.js",
diff --git a/packages/drive-gcs/package.json b/packages/drive-gcs/package.json
index 3018f84952..93c66aecaf 100644
--- a/packages/drive-gcs/package.json
+++ b/packages/drive-gcs/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@directus/drive-gcs",
-	"version": "9.14.2",
+	"version": "9.14.4",
 	"description": "Google Cloud Storage driver for @directus/drive",
 	"license": "MIT",
 	"main": "dist/index.js",
diff --git a/packages/drive-s3/package.json b/packages/drive-s3/package.json
index 60f2d017d1..1d3df1189b 100644
--- a/packages/drive-s3/package.json
+++ b/packages/drive-s3/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@directus/drive-s3",
-	"version": "9.14.3",
+	"version": "9.14.5",
 	"description": "AWS S3 driver for @directus/drive",
 	"license": "MIT",
 	"main": "dist/index.js",
diff --git a/packages/drive/package.json b/packages/drive/package.json
index 7d1e30a350..9b5cf217b1 100644
--- a/packages/drive/package.json
+++ b/packages/drive/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@directus/drive",
-	"version": "9.14.3",
+	"version": "9.14.5",
 	"description": "Flexible and Fluent way to manage storage in Node.js.",
 	"license": "MIT",
 	"main": "dist/index.js",
diff --git a/packages/extensions-sdk/package.json b/packages/extensions-sdk/package.json
index 2789a03850..50c1484f5e 100644
--- a/packages/extensions-sdk/package.json
+++ b/packages/extensions-sdk/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@directus/extensions-sdk",
-	"version": "9.14.2",
+	"version": "9.14.4",
 	"description": "A toolkit to develop extensions to extend Directus.",
 	"main": "dist/cjs/index.js",
 	"repository": "directus/directus",
diff --git a/packages/schema/package.json b/packages/schema/package.json
index 0ebf246b96..1ecff21d93 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@directus/schema",
-	"version": "9.14.3",
+	"version": "9.14.5",
 	"description": "Utility for extracting information about existing DB schema",
 	"main": "dist/index.js",
 	"exports": {
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 696b93ddd9..fcbeb8533b 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@directus/shared",
-	"version": "9.14.3",
+	"version": "9.14.5",
 	"description": "Code shared between all directus packages.",
 	"exports": {
 		"./composables": {
diff --git a/packages/specs/package.json b/packages/specs/package.json
index 3eb552ca72..b3b445a7be 100644
--- a/packages/specs/package.json
+++ b/packages/specs/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@directus/specs",
-	"version": "9.14.3",
+	"version": "9.14.5",
 	"description": "OpenAPI Specification of the Directus API",
 	"main": "index.js",
 	"exports": {
diff --git a/tests/api/items/aggregate.test.ts b/tests/api/items/aggregate.test.ts
new file mode 100644
index 0000000000..df1b39fc51
--- /dev/null
+++ b/tests/api/items/aggregate.test.ts
@@ -0,0 +1,84 @@
+import config, { getUrl } from '../../config';
+import vendors from '../../get-dbs-to-test';
+import request from 'supertest';
+import knex, { Knex } from 'knex';
+import { createGuest, seedTable, createMany } from '../../setup/utils/factories';
+
+describe('/items', () => {
+	const databases = new Map<string, Knex>();
+
+	beforeAll(async () => {
+		for (const vendor of vendors) {
+			databases.set(vendor, knex(config.knexConfig[vendor]!));
+		}
+	});
+
+	afterAll(async () => {
+		for (const [_vendor, connection] of databases) {
+			await connection.destroy();
+		}
+	});
+
+	beforeEach(async () => {
+		for (const [, connection] of databases) {
+			await connection('guests').delete();
+		}
+	});
+
+	describe('/:collection GET', () => {
+		describe('returns count correctly', () => {
+			it.each(vendors)('%s', async (vendor) => {
+				const count = 10;
+				const guests: any[] = createMany(createGuest, count);
+				await seedTable(databases.get(vendor)!, 1, 'guests', guests);
+
+				const response = await request(getUrl(vendor))
+					.get(`/items/guests?aggregate[count]=id`)
+					.set('Authorization', 'Bearer AdminToken')
+					.expect('Content-Type', /application\/json/)
+					.expect(200);
+
+				const { data } = response.body;
+				expect(data[0]).toMatchObject({
+					count: {
+						id: guests.length,
+					},
+				});
+			});
+		});
+	});
+
+	describe('/:collection GraphQL Query', () => {
+		describe('returns count correctly', () => {
+			it.each(vendors)('%s', async (vendor) => {
+				const count = 10;
+				const guests: any[] = createMany(createGuest, count);
+				await seedTable(databases.get(vendor)!, 1, 'guests', guests);
+
+				const query = `
+				{
+					guests_aggregated {
+						count {
+							id
+						}
+					}
+				}`;
+
+				const response = await request(getUrl(vendor))
+					.post('/graphql')
+					.send({ query })
+					.set('Authorization', 'Bearer AdminToken')
+					.expect('Content-Type', /application\/json/)
+					.expect(200);
+
+				const { data } = response.body;
+
+				expect(data.guests_aggregated[0]).toMatchObject({
+					count: {
+						id: guests.length,
+					},
+				});
+			});
+		});
+	});
+});