Tweaks (#615)

* checkbox inactive styling * fix options * fix translation * dropdown placeholder default * cleanup text input options * roles layout setup * add placeholder option to dropdown * add translations * info on global settings * elipses after placeholders * update to bytes for better formatting control * clean up mime type displays * new template formatting * WIP info and help sidebar * add support for svgs * user popover styling * have un-styled logo spinner feel centered * consistent missing avatar colors * fix asset url * add info drawers * initial help drawer * WIP add help components to all pages * Remove non-existing trim * Fix file interface deselect Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
2026-01-27 17:58:02 -05:00 · 2020-05-22 18:19:33 -04:00
parent 2bf4ce9af7
commit ebd78f86fc
43 changed files with 605 additions and 224 deletions
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
    "@vue/composition-api": "^0.5.0",
    "axios": "^0.19.2",
    "base-64": "^0.1.0",
+    "bytes": "^3.1.0",
    "cropperjs": "^1.5.6",
    "date-fns": "^2.14.0",
    "diff": "^4.0.2",
@@ -35,7 +36,6 @@
    "nanoid": "^3.1.9",
    "pinia": "0.0.5",
    "portal-vue": "^2.1.7",
-    "pretty-bytes": "^5.3.0",
    "resize-observer": "^1.0.0",
    "semver": "^7.3.2",
    "stylelint-config-prettier": "^8.0.1",
@@ -58,6 +58,7 @@
    "@storybook/core": "^5.3.18",
    "@storybook/vue": "^5.3.18",
    "@types/base-64": "^0.1.3",
+    "@types/bytes": "^3.1.0",
    "@types/diff": "^4.0.2",
    "@types/jest": "^25.2.3",
    "@types/marked": "^0.7.4",
--- a/src/assets/avatar-placeholder.svg
+++ b/src/assets/avatar-placeholder.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <g fill="none" fill-rule="evenodd">
-    <path fill="#F5F7F8" d="M0 0h64v64H0z"/>
+    <path fill="#ECEFF1" d="M0 0h64v64H0z"/>
    <path d="M32 32c4.42 0 8-3.58 8-8s-3.58-8-8-8-8 3.58-8 8 3.58 8 8 8zm0 4c-5.34 0-16 2.68-16 8v4h32v-4c0-5.32-10.66-8-16-8z" fill="#B0BEC5" fill-rule="nonzero"/>
    <path d="M8 8h48v48H8z"/>
  </g>
--- a/src/components/v-avatar/v-avatar.vue
+++ b/src/components/v-avatar/v-avatar.vue
@@ -29,7 +29,7 @@ export default defineComponent({

 <style>
 body {
-	--v-avatar-color: var(--primary);
+	--v-avatar-color: var(--background-normal);
 	--v-avatar-size: 48px;
 }
 </style>
@@ -43,7 +43,7 @@ body {
 	width: var(--v-avatar-size);
 	height: var(--v-avatar-size);
 	overflow: hidden;
-	color: var(--white);
+	color: var(--foreground-subdued);
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	background-color: var(--v-avatar-color);
--- a/src/components/v-checkbox/v-checkbox.vue
+++ b/src/components/v-checkbox/v-checkbox.vue
@@ -133,6 +133,8 @@ body {

 	.label:not(:empty) {
 		margin-left: 8px;
+		color: var(--foreground-subdued);
+		transition: color var(--fast) var(--transition);

 		input {
 			width: 100%;
@@ -147,6 +149,8 @@ body {

 	& .checkbox {
 		--v-icon-color: var(--foreground-subdued);
+
+		transition: color var(--fast) var(--transition);
 	}

 	&:disabled {
@@ -163,7 +167,10 @@ body {

 	&:not(:disabled):hover {
 		.checkbox {
-			--v-icon-color: var(--foreground-subdued);
+			--v-icon-color: var(--foreground-normal);
+		}
+		.label {
+			color: var(--foreground-normal);
 		}
 	}

--- a/src/displays/filesize/handler.ts
+++ b/src/displays/filesize/handler.ts
@@ -1,5 +1,5 @@
-import prettyBytes from 'pretty-bytes';
+import bytes from 'bytes';

 export default function handler(value: number) {
-	return prettyBytes(value);
+	return bytes(value, { decimalPlaces: 0 });
 }
--- a/src/displays/formatted-text/index.ts
+++ b/src/displays/formatted-text/index.ts
@@ -26,10 +26,10 @@ export default defineDisplay(({ i18n }) => ({
 			width: 'half',
 			interface: 'dropdown',
 			options: {
-				items: [
-					{ itemText: i18n.t('sans_serif'), itemValue: 'sans-serif' },
-					{ itemText: i18n.t('serif'), itemValue: 'serif' },
-					{ itemText: i18n.t('monospace'), itemValue: 'monospace' },
+				choices: [
+					{ text: i18n.t('sans_serif'), value: 'sans-serif' },
+					{ text: i18n.t('serif'), value: 'serif' },
+					{ text: i18n.t('monospace'), value: 'monospace' },
 				],
 			},
 		},
--- a/src/displays/template/index.ts
+++ b/src/displays/template/index.ts
@@ -18,7 +18,7 @@ export default defineDisplay(({ i18n }) => ({
 	options: [
 		{
 			field: 'template',
-			name: i18n.t('template'),
+			name: i18n.t('display_template'),
 			interface: 'text-input',
 			width: 'full',
 		},
--- a/src/interfaces/dropdown/dropdown.vue
+++ b/src/interfaces/dropdown/dropdown.vue
@@ -20,6 +20,7 @@

 <script lang="ts">
 import { defineComponent, PropType } from '@vue/composition-api';
+import i18n from '@/lang';

 type Option = {
 	text: string;
@@ -50,7 +51,7 @@ export default defineComponent({
 		},
 		placeholder: {
 			type: String,
-			default: null,
+			default: i18n.t('select_an_item'),
 		},
 		allowOther: {
 			type: Boolean,
--- a/src/interfaces/dropdown/index.ts
+++ b/src/interfaces/dropdown/index.ts
@@ -34,5 +34,11 @@ export default defineInterface(({ i18n }) => ({
 			width: 'half',
 			interface: 'icon',
 		},
+		{
+			field: 'placeholder',
+			name: i18n.t('placeholder'),
+			width: 'half',
+			interface: 'text-input',
+		},
 	],
 }));
--- a/src/interfaces/file/file.vue
+++ b/src/interfaces/file/file.vue
@@ -13,7 +13,13 @@
 						:value="file && file.title"
 					>
 						<template #prepend>
-							<div class="preview" :class="{ 'has-file': file }">
+							<div
+								class="preview"
+								:class="{
+									'has-file': file,
+									'is-svg': file && file.type.includes('svg'),
+								}"
+							>
 								<img
 									v-if="imageThumbnail"
 									:src="imageThumbnail"
@@ -127,6 +133,7 @@ type FileInfo = {
 	title: string;
 	type: string;
 	data: {
+		asset_url: string;
 		thumbnails?: {
 			key: string;
 			url: string;
@@ -160,6 +167,7 @@ export default defineComponent({

 		const imageThumbnail = computed(() => {
 			if (file.value === null) return null;
+			if (file.value.type.includes('svg')) return file.value.data.asset_url;
 			if (file.value.type.includes('image') === false) return null;
 			return file.value.data.thumbnails?.find((thumb) => thumb.key === 'directus-small-crop')
 				?.url;
@@ -291,9 +299,24 @@ export default defineComponent({
 	background-color: var(--background-normal);
 	border-radius: var(--border-radius);

+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
 	&.has-file {
 		background-color: var(--primary-alt);
 	}
+
+	&.is-svg {
+		padding: 4px;
+		background-color: var(--background-normal);
+
+		img {
+			object-fit: contain;
+		}
+	}
 }

 .extension {
--- a/src/interfaces/image/image.vue
+++ b/src/interfaces/image/image.vue
@@ -6,7 +6,11 @@
 			{{ $t('disabled') }}
 		</v-notice>

-		<div class="image-preview" v-else-if="image" :class="{ isSVG: image.type.includes('svg') }">
+		<div
+			class="image-preview"
+			v-else-if="image"
+			:class="{ 'is-svg': image.type.includes('svg') }"
+		>
 			<img :src="src" alt="" role="presentation" />

 			<div class="shadow" />
@@ -217,9 +221,9 @@ img {
 	object-fit: cover;
 }

-.isSVG {
+.is-svg {
 	padding: 32px;
-	background-color: var(--background-subdued);
+	background-color: var(--background-normal);

 	img {
 		object-fit: contain;
--- a/src/interfaces/text-input/index.ts
+++ b/src/interfaces/text-input/index.ts
@@ -3,7 +3,7 @@ import { defineInterface } from '@/interfaces/define';

 export default defineInterface(({ i18n }) => ({
 	id: 'text-input',
-	name: i18n.t('interfaces.text-input.text-input'),
+	name: i18n.t('text_input'),
 	icon: 'text_fields',
 	component: InterfaceTextInput,
 	options: [
@@ -25,22 +25,17 @@ export default defineInterface(({ i18n }) => ({
 			width: 'half',
 			interface: 'icon',
 		},
-		{
-			field: 'trim',
-			name: 'Trim',
-			width: 'half',
-			interface: 'toggle',
-		},
 		{
 			field: 'font',
 			name: 'Font',
 			width: 'half',
-			interface: 'select-one-dropdown',
+			interface: 'dropdown',
+			default: 'sans-serif',
 			options: {
-				items: [
-					{ itemText: 'Sans', itemValue: 'sans-serif' },
-					{ itemText: 'Mono', itemValue: 'monospace' },
-					{ itemText: 'Serif', itemValue: 'serif' },
+				choices: [
+					{ text: 'Sans Serif', value: 'sans-serif' },
+					{ text: 'Monospace', value: 'monospace' },
+					{ text: 'Serif', value: 'serif' },
 				],
 			},
 		},
--- a/src/interfaces/text-input/text-input.vue
+++ b/src/interfaces/text-input/text-input.vue
@@ -3,7 +3,6 @@
 		:value="value"
 		:placeholder="placeholder"
 		:disabled="disabled"
-		:trim="trim"
 		:type="masked ? 'password' : 'text'"
 		:class="font"
 		:maxlength="length"
--- a/src/lang/en-US/index.json
+++ b/src/lang/en-US/index.json
@@ -64,7 +64,7 @@
 	"clear_value": "Clear value",
 	"reset_to_default": "Reset to default",
 	"undo_changes": "Undo changes",
-	"collapse_sidebar": "Collapse Sidebar",
+	"page_info": "Page Information",
 	"notifications": "Notifications",
 	"show_all_activity": "Show All Activity",
 	"page_not_found": "Page Not Found",
@@ -209,6 +209,7 @@
 	"no_items": "No items",

 	"disabled": "Disabled",
+	"information": "Information",

 	"interface_not_found": "Interface \"{interface}\" not found",

@@ -221,6 +222,7 @@
 	"no_collections_copy_admin": "It looks like you don’t have any Collections yet. Fortunately, it’s very easy to create one — click the button below to get started.",
 	"no_collections_copy": "It looks like you don’t have any Collections yet. Please contact your system administrator to have them create your data-model.",

+	"text_input": "Text Input",
 	"radio_buttons": "Radio Buttons",
 	"checkboxes": "Checkboxes",

@@ -576,6 +578,23 @@
 	"layout_preview": "Layout Preview",
 	"layout_setup": "Layout Setup",

+	"page_help_collections_overview": "Provides a listing of all collections you have access to.",
+	"page_help_collections_browse": "**Item Browse Page** — Customize the layout, filters, and sorting to tailor your view of items within this {collection} collection.<br><br>You can also save bookmarks of these different configurations to quickly switch between them.<br><br><a href='https://docs.directus.io/guides/user-guide.html#items' target='_blank'>Learn More</a>",
+	"page_help_collections_detail": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+	"page_help_activity_detail": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+	"page_help_activity_browse": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+	"page_help_files_browse": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+	"page_help_settings_global": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+	"page_help_settings_datamodel_collections": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+	"page_help_settings_datamodel_fields": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+	"page_help_settings_roles_browse": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+	"page_help_settings_roles_detail": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+	"page_help_settings_presets_browse": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+	"page_help_settings_presets_detail": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+	"page_help_settings_webhooks_browse": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+	"page_help_settings_webhooks_detail": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+	"page_help_users_browse": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+
  "about_directus": "About Directus",
  "activity_log": "Activity Log",
  "add_field_filter": "Add a field filter",
@@ -747,7 +766,7 @@
  "enter_collection_name": "Enter collection name...",
  "enter_otp": "Please enter the one-time-password (OTP) from your authenticator app.",
  "enter_role_name": "Enter role name...",
-  "enter_value": "Enter Value",
+  "enter_value": "Enter value...",
  "environment": "Environment",
  "equal_to": "Equal to",
  "error_unknown": "Unknown error. Try again later.",
@@ -809,6 +828,7 @@
  "hidden_browse": "Hidden on Browse",
  "hidden_detail": "Hidden on Detail",
  "icon": "Icon",
+  "image": "Image",
  "in_list": "One of these",
  "info": "Info",
  "initial_schema": "Choose an Initial Schema",
@@ -948,6 +968,7 @@
  "sort_direction": "Sort Direction",
  "spacing": "Spacing",
  "statuses": "Statuses",
+  "template": "Template",
  "text": "Text",
  "translation": "Translation",
  "translated_field_name": "Translated field name...",
--- a/src/layouts/cards/components/card.vue
+++ b/src/layouts/cards/components/card.vue
@@ -279,10 +279,6 @@ export default defineComponent({
 	line-height: 1.3em;
 	white-space: nowrap;
 	text-overflow: ellipsis;
-
-	> .render-template ::v-deep > *:not(:last-child) {
-		margin-right: 4px;
-	}
 }

 .title {
--- a/src/modules/activity/routes/browse/browse.vue
+++ b/src/modules/activity/routes/browse/browse.vue
@@ -6,8 +6,6 @@
 			</v-button>
 		</template>

-		<template #drawer><portal-target name="drawer" /></template>
-
 		<template #navigation>
 			<activity-navigation />
 		</template>
@@ -20,6 +18,19 @@
 			:view-query.sync="viewQuery"
 			:detail-route="'/{{project}}/activity/{{primaryKey}}'"
 		/>
+
+		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div class="format-markdown" v-html="marked($t('page_help_activity_browse'))" />
+			</drawer-detail>
+			<portal-target name="drawer" />
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
+		</template>
 	</private-view>
 </template>

@@ -30,6 +41,7 @@ import useProjectsStore from '@/stores/projects';
 import { i18n } from '@/lang';
 import { LayoutComponent } from '@/layouts/types';
 import useCollectionPreset from '@/composables/use-collection-preset';
+import marked from 'marked';

 type Item = {
 	[field: string]: any;
@@ -51,6 +63,7 @@ export default defineComponent({
 			layout,
 			viewOptions,
 			viewQuery,
+			marked,
 		};

 		function useBreadcrumb() {
--- a/src/modules/activity/routes/detail/detail.vue
+++ b/src/modules/activity/routes/detail/detail.vue
@@ -20,6 +20,18 @@
 			:initial-values="item"
 			:primary-key="primaryKey"
 		/>
+
+		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div class="format-markdown" v-html="marked($t('page_help_activity_detail'))" />
+			</drawer-detail>
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
+		</template>
 	</private-view>
 </template>

@@ -30,6 +42,7 @@ import ActivityNavigation from '../../components/navigation/';
 import { i18n } from '@/lang';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
+import marked from 'marked';

 type Values = {
 	[field: string]: any;
@@ -57,6 +70,7 @@ export default defineComponent({
 			loading,
 			error,
 			breadcrumb,
+			marked,
 		};

 		function useBreadcrumb() {
--- a/src/modules/collections/routes/browse/browse.vue
+++ b/src/modules/collections/routes/browse/browse.vue
@@ -38,11 +38,6 @@
 			</bookmark-edit>
 		</template>

-		<template #drawer>
-			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
-			<portal-target name="drawer" />
-		</template>
-
 		<template #actions:prepend>
 			<portal-target name="actions:prepend" />
 		</template>
@@ -112,6 +107,26 @@
 			:filters.sync="filters"
 			:search-query.sync="searchQuery"
 		/>
+
+		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				Page Info Here...
+			</drawer-detail>
+			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
+			<portal-target name="drawer" />
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="
+						marked(
+							$t('page_help_collections_browse', {
+								collection: currentCollection.name,
+							})
+						)
+					"
+				/>
+			</drawer-detail>
+		</template>
 	</private-view>
 </template>

@@ -132,6 +147,7 @@ import SearchInput from '@/views/private/components/search-input';
 import BookmarkAdd from '@/views/private/components/bookmark-add';
 import BookmarkEdit from '@/views/private/components/bookmark-edit';
 import router from '@/router';
+import marked from 'marked';

 const redirectIfNeeded: NavigationGuard = async (to, from, next) => {
 	const collectionsStore = useCollectionsStore();
@@ -250,6 +266,7 @@ export default defineComponent({
 			editingBookmark,
 			editBookmark,
 			breadcrumb,
+			marked,
 		};

 		function useBreadcrumb() {
--- a/src/modules/collections/routes/detail/detail.vue
+++ b/src/modules/collections/routes/detail/detail.vue
@@ -143,6 +143,9 @@
 		/>

 		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div class="format-markdown" v-html="marked($t('page_help_collections_detail'))" />
+			</drawer-detail>
 			<revisions-drawer-detail
 				v-if="isBatch === false && isNew === false"
 				:collection="collection"
@@ -155,6 +158,12 @@
 				:collection="collection"
 				:primary-key="primaryKey"
 			/>
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
 		</template>
 	</private-view>
 </template>
@@ -171,6 +180,7 @@ import CommentsDrawerDetail from '@/views/private/components/comments-drawer-det
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import i18n from '@/lang';
+import marked from 'marked';

 type Values = {
 	[field: string]: any;
@@ -275,6 +285,7 @@ export default defineComponent({
 			breadcrumb,
 			title,
 			revisionsDrawerDetail,
+			marked,
 			refresh,
 		};

--- a/src/modules/collections/routes/overview/overview.vue
+++ b/src/modules/collections/routes/overview/overview.vue
@@ -32,6 +32,21 @@
 				{{ $t('no_collections_copy') }}
 			</template>
 		</v-info>
+
+		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
+		</template>
 	</private-view>
 </template>

@@ -43,6 +58,7 @@ import useNavigation, { NavItem } from '../../composables/use-navigation';
 import router from '@/router';
 import useUserStore from '@/stores/user';
 import useProjectsStore from '@/stores/projects';
+import marked from 'marked';

 export default defineComponent({
 	name: 'collections-overview',
@@ -80,7 +96,14 @@ export default defineComponent({
 			return `/${projectsStore.state.currentProjectKey}/settings/data-model`;
 		});

-		return { tableHeaders, navItems, navigateToCollection, isAdmin, dataModelLink };
+		return {
+			tableHeaders,
+			navItems,
+			navigateToCollection,
+			isAdmin,
+			dataModelLink,
+			marked,
+		};

 		function navigateToCollection(navItem: NavItem) {
 			router.push(navItem.to);
--- a/src/modules/files/routes/browse/browse.vue
+++ b/src/modules/files/routes/browse/browse.vue
@@ -6,11 +6,6 @@
 			</v-button>
 		</template>

-		<template #drawer>
-			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
-			<portal-target name="drawer" />
-		</template>
-
 		<template #actions:prepend>
 			<portal-target name="actions:prepend" />
 		</template>
@@ -67,6 +62,20 @@
 			@update:filters="filters = $event"
 			:detail-route="'/{{project}}/files/{{primaryKey}}'"
 		/>
+
+		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div class="format-markdown" v-html="marked($t('page_help_files_browse'))" />
+			</drawer-detail>
+			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
+			<portal-target name="drawer" />
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
+		</template>
 	</private-view>
 </template>

@@ -82,6 +91,7 @@ import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail'
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
 import AddFolder from '../../components/add-folder';
 import SearchInput from '@/views/private/components/search-input';
+import marked from 'marked';

 type Item = {
 	[field: string]: any;
@@ -164,6 +174,7 @@ export default defineComponent({
 			currentFolder,
 			filtersWithFolderAndType,
 			searchQuery,
+			marked,
 		};

 		function useBatchDelete() {
--- a/src/modules/files/routes/detail/components/file-info-drawer-detail.vue
+++ b/src/modules/files/routes/detail/components/file-info-drawer-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<drawer-detail icon="info_outline" :title="$t('file_details')">
+	<drawer-detail icon="info_outline" :title="$t('file_details')" close>
 		<dl>
 			<div v-if="type">
 				<dt>{{ $t('type') }}</dt>
@@ -32,7 +32,7 @@
 <script lang="ts">
 import { defineComponent, computed, ref } from '@vue/composition-api';
 import readableMimeType from '@/utils/readable-mime-type';
-import prettyBytes from 'pretty-bytes';
+import bytes from 'bytes';
 import i18n from '@/lang';
 import localizedFormat from '@/utils/localized-format';

@@ -68,7 +68,7 @@ export default defineComponent({
 		const size = computed(() => {
 			if (!props.filesize) return null;

-			return prettyBytes(props.filesize, { locale: i18n.locale.split('-')[0] });
+			return bytes(props.filesize, { decimalPlaces: 2, unitSeparator: ' ' }); // { locale: i18n.locale.split('-')[0] }
 		});

 		const creationDate = ref<string>(null);
--- a/src/modules/files/routes/detail/detail.vue
+++ b/src/modules/files/routes/detail/detail.vue
@@ -115,6 +115,12 @@
 				collection="directus_files"
 				:primary-key="primaryKey"
 			/>
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
 		</template>
 	</private-view>
 </template>
@@ -136,6 +142,7 @@ import FileLightbox from '@/views/private/components/file-lightbox';
 import useFieldsStore from '@/stores/fields';
 import { Field } from '@/stores/fields/types';
 import FileInfoDrawerDetail from './components/file-info-drawer-detail.vue';
+import marked from 'marked';

 type Values = {
 	[field: string]: any;
@@ -220,6 +227,7 @@ export default defineComponent({
 			previewActive,
 			revisionsDrawerDetail,
 			formFields,
+			marked,
 		};

 		function changeCacheBuster() {
--- a/src/modules/settings/components/navigation/navigation.vue
+++ b/src/modules/settings/components/navigation/navigation.vue
@@ -35,16 +35,16 @@ export default defineComponent({
 				name: i18n.t('settings_permissions'),
 				to: `/${currentProjectKey.value}/settings/roles`,
 			},
-			{
-				icon: 'send',
-				name: i18n.t('settings_webhooks'),
-				to: `/${currentProjectKey.value}/settings/webhooks`,
-			},
 			{
 				icon: 'bookmark',
 				name: i18n.t('settings_presets'),
 				to: `/${currentProjectKey.value}/settings/presets`,
 			},
+			{
+				icon: 'send',
+				name: i18n.t('settings_webhooks'),
+				to: `/${currentProjectKey.value}/settings/webhooks`,
+			},
 		];

 		return { navItems };
--- a/src/modules/settings/routes/data-model/collections/collections.vue
+++ b/src/modules/settings/routes/data-model/collections/collections.vue
@@ -16,10 +16,6 @@
 			<settings-navigation />
 		</template>

-		<template #drawer>
-			<collections-filter v-model="activeTypes" />
-		</template>
-
 		<div class="padding-box">
 			<v-info
 				type="warning"
@@ -86,6 +82,22 @@
 		</div>

 		<new-collection v-model="addNewActive" />
+
+		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_settings_datamodel_collections'))"
+				/>
+			</drawer-detail>
+			<collections-filter v-model="activeTypes" />
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
+		</template>
 	</private-view>
 </template>

@@ -102,6 +114,7 @@ import router from '@/router';
 import { sortBy } from 'lodash';
 import CollectionOptions from './components/collection-options';
 import CollectionsFilter from './components/collections-filter';
+import marked from 'marked';

 export default defineComponent({
 	components: { SettingsNavigation, NewCollection, CollectionOptions, CollectionsFilter },
@@ -142,6 +155,7 @@ export default defineComponent({
 			items,
 			openCollection,
 			activeTypes,
+			marked,
 		};

 		function useItems() {
--- a/src/modules/settings/routes/data-model/fields/fields.vue
+++ b/src/modules/settings/routes/data-model/fields/fields.vue
@@ -67,6 +67,21 @@
 				v-model="edits"
 			/>
 		</div>
+
+		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_settings_datamodel_fields'))"
+				/>
+			</drawer-detail>
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
+		</template>
 	</private-view>
 </template>

@@ -79,6 +94,7 @@ import useProjectsStore from '@/stores/projects';
 import useItem from '@/composables/use-item';
 import router from '@/router';
 import useCollectionsStore from '@/stores/collections';
+import marked from 'marked';

 export default defineComponent({
 	components: { SettingsNavigation, FieldsManagement },
@@ -131,6 +147,7 @@ export default defineComponent({
 			deleteAndQuit,
 			saveAndQuit,
 			hasEdits,
+			marked,
 		};

 		async function deleteAndQuit() {
--- a/src/modules/settings/routes/global/global.vue
+++ b/src/modules/settings/routes/global/global.vue
@@ -24,6 +24,18 @@
 				:primary-key="1"
 			/>
 		</div>
+
+		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_global'))" />
+			</drawer-detail>
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
+		</template>
 	</private-view>
 </template>

@@ -32,6 +44,7 @@ import { defineComponent, ref, computed } from '@vue/composition-api';
 import SettingsNavigation from '../../components/navigation/';
 import useCollection from '@/composables/use-collection';
 import useSettingsStore from '@/stores/settings';
+import marked from 'marked';

 export default defineComponent({
 	components: { SettingsNavigation },
@@ -49,7 +62,7 @@ export default defineComponent({

 		const saving = ref(false);

-		return { fields, initialValues, edits, noEdits, saving, save };
+		return { fields, initialValues, edits, noEdits, saving, save, marked };

 		async function save() {
 			if (edits.value === null) return;
--- a/src/modules/settings/routes/presets/browse/browse.vue
+++ b/src/modules/settings/routes/presets/browse/browse.vue
@@ -85,6 +85,21 @@
 				</template>
 			</v-table>
 		</div>
+
+		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_settings_presets_browse'))"
+				/>
+			</drawer-detail>
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
+		</template>
 	</private-view>
 </template>

@@ -100,6 +115,7 @@ import layouts from '@/layouts';
 import { TranslateResult } from 'vue-i18n';
 import router from '@/router';
 import ValueNull from '@/views/private/components/value-null';
+import marked from 'marked';

 type PresetRaw = {
 	id: number;
@@ -146,6 +162,7 @@ export default defineComponent({
 			confirmDelete,
 			deleting,
 			deleteSelection,
+			marked,
 		};

 		function useLinks() {
--- a/src/modules/settings/routes/presets/detail/detail.vue
+++ b/src/modules/settings/routes/presets/detail/detail.vue
@@ -43,12 +43,6 @@
 			</v-button>
 		</template>

-		<template #drawer>
-			<div class="layout-drawer">
-				<portal-target name="drawer" />
-			</div>
-		</template>
-
 		<div class="preset-detail">
 			<v-form
 				:fields="fields"
@@ -71,6 +65,24 @@
 				/>
 			</div>
 		</div>
+
+		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_settings_presets_detail'))"
+				/>
+			</drawer-detail>
+			<div class="layout-drawer">
+				<portal-target name="drawer" />
+			</div>
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
+		</template>
 	</private-view>
 </template>

@@ -85,6 +97,7 @@ import useCollectionsStore from '@/stores/collections';
 import layouts from '@/layouts';
 import router from '@/router';
 import useCollectionPresetsStore from '@/stores/collection-presets';
+import marked from 'marked';

 type User = {
 	id: number;
@@ -154,6 +167,7 @@ export default defineComponent({
 			deleting,
 			deleteAndQuit,
 			confirmDelete,
+			marked,
 		};

 		function useSave() {
--- a/src/modules/settings/routes/roles/browse/browse.vue
+++ b/src/modules/settings/routes/roles/browse/browse.vue
@@ -6,8 +6,6 @@
 			</v-button>
 		</template>

-		<template #drawer><portal-target name="drawer" /></template>
-
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
@@ -58,6 +56,22 @@
 			:view-query.sync="viewQuery"
 			:detail-route="'/{{project}}/settings/roles/{{primaryKey}}'"
 		/>
+
+		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_settings_roles_browse'))"
+				/>
+			</drawer-detail>
+			<portal-target name="drawer" />
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
+		</template>
 	</private-view>
 </template>

@@ -69,6 +83,7 @@ import { i18n } from '@/lang';
 import api from '@/api';
 import { LayoutComponent } from '@/layouts/types';
 import useCollectionPreset from '@/composables/use-collection-preset';
+import marked from 'marked';

 type Item = {
 	[field: string]: any;
@@ -84,11 +99,30 @@ export default defineComponent({

 		const selection = ref<Item[]>([]);

-		const { viewOptions, viewQuery } = useCollectionPreset(ref('directus_roles'));
+		const { viewType, viewOptions, viewQuery } = useCollectionPreset(ref('directus_roles'));
 		const { addNewLink, batchLink } = useLinks();
 		const { confirmDelete, deleting, batchDelete } = useBatchDelete();
 		const { breadcrumb } = useBreadcrumb();

+		if (viewType.value === null) {
+			viewType.value = 'tabular';
+		}
+
+		if (viewOptions.value === null && viewType.value === 'tabular') {
+			viewOptions.value = {
+				widths: {
+					name: 160,
+					users: 160,
+				},
+			};
+		}
+
+		if (viewQuery.value === null && viewType.value === 'tabular') {
+			viewQuery.value = {
+				fields: ['name', 'users', 'description'],
+			};
+		}
+
 		return {
 			addNewLink,
 			batchLink,
@@ -100,6 +134,7 @@ export default defineComponent({
 			layout,
 			viewOptions,
 			viewQuery,
+			marked,
 		};

 		function useBatchDelete() {
--- a/src/modules/settings/routes/roles/detail/detail.vue
+++ b/src/modules/settings/routes/roles/detail/detail.vue
@@ -83,11 +83,23 @@
 		</div>

 		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_settings_roles_detail'))"
+				/>
+			</drawer-detail>
 			<revisions-drawer-detail
 				v-if="isNew === false"
 				collection="directus_roles"
 				:primary-key="primaryKey"
 			/>
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
 		</template>
 	</private-view>
 </template>
@@ -101,6 +113,7 @@ import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-d
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import PermissionsManagement from './components/permissions-management';
+import marked from 'marked';
 import useUserStore from '@/stores/user';

 type Values = {
@@ -158,6 +171,7 @@ export default defineComponent({
 			saveAsCopyAndNavigate,
 			isBatch,
 			currentProjectKey,
+			marked,
 		};

 		/**
--- a/src/modules/settings/routes/webhooks/browse/browse.vue
+++ b/src/modules/settings/routes/webhooks/browse/browse.vue
@@ -6,8 +6,6 @@
 			</v-button>
 		</template>

-		<template #drawer><portal-target name="drawer" /></template>
-
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
@@ -58,6 +56,22 @@
 			:view-query.sync="viewQuery"
 			:detail-route="'/{{project}}/settings/webhooks/{{primaryKey}}'"
 		/>
+
+		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_settings_webhooks_browse'))"
+				/>
+			</drawer-detail>
+			<portal-target name="drawer" />
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
+		</template>
 	</private-view>
 </template>

@@ -69,6 +83,7 @@ import { i18n } from '@/lang';
 import api from '@/api';
 import { LayoutComponent } from '@/layouts/types';
 import useCollectionPreset from '@/composables/use-collection-preset';
+import marked from 'marked';

 type Item = {
 	[field: string]: any;
@@ -118,6 +133,7 @@ export default defineComponent({
 			layout,
 			viewOptions,
 			viewQuery,
+			marked,
 		};

 		function useBatchDelete() {
--- a/src/modules/settings/routes/webhooks/detail/detail.vue
+++ b/src/modules/settings/routes/webhooks/detail/detail.vue
@@ -74,11 +74,23 @@
 		/>

 		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_settings_webhooks_detail'))"
+				/>
+			</drawer-detail>
 			<revisions-drawer-detail
 				v-if="isNew === false"
 				collection="directus_webhooks"
 				:primary-key="primaryKey"
 			/>
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
 		</template>
 	</private-view>
 </template>
@@ -91,6 +103,7 @@ import router from '@/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 marked from 'marked';

 type Values = {
 	[field: string]: any;
@@ -145,6 +158,7 @@ export default defineComponent({
 			saveAsCopyAndNavigate,
 			isBatch,
 			currentProjectKey,
+			marked,
 		};

 		async function saveAndQuit() {
--- a/src/modules/users/routes/browse/browse.vue
+++ b/src/modules/users/routes/browse/browse.vue
@@ -6,11 +6,6 @@
 			</v-button>
 		</template>

-		<template #drawer>
-			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
-			<portal-target name="drawer" />
-		</template>
-
 		<template #actions:prepend>
 			<portal-target name="actions:prepend" />
 		</template>
@@ -65,6 +60,20 @@
 			:search-query="searchQuery"
 			@update:filters="filters = $event"
 		/>
+
+		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				<div class="format-markdown" v-html="marked($t('page_help_users_browse'))" />
+			</drawer-detail>
+			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
+			<portal-target name="drawer" />
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
+		</template>
 	</private-view>
 </template>

@@ -79,6 +88,7 @@ import useCollectionPreset from '@/composables/use-collection-preset';
 import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
 import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
 import SearchInput from '@/views/private/components/search-input';
+import marked from 'marked';

 type Item = {
 	[field: string]: any;
@@ -162,6 +172,7 @@ export default defineComponent({
 			viewQuery,
 			viewType,
 			searchQuery,
+			marked,
 		};

 		function useBatchDelete() {
--- a/src/modules/users/routes/detail/detail.vue
+++ b/src/modules/users/routes/detail/detail.vue
@@ -98,6 +98,9 @@
 		</div>

 		<template #drawer>
+			<drawer-detail icon="info_outline" :title="$t('information')" close>
+				[TK]
+			</drawer-detail>
 			<revisions-drawer-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_users"
@@ -109,6 +112,12 @@
 				collection="directus_users"
 				:primary-key="primaryKey"
 			/>
+			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_collections_overview'))"
+				/>
+			</drawer-detail>
 		</template>
 	</private-view>
 </template>
@@ -123,6 +132,7 @@ import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-d
 import CommentsDrawerDetail from '@/views/private/components/comments-drawer-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
+import marked from 'marked';
 import api from '@/api';

 type Values = {
@@ -196,6 +206,7 @@ export default defineComponent({
 			saveAsCopyAndNavigate,
 			isBatch,
 			revisionsDrawerDetail,
+			marked,
 			previewLoading,
 			avatarSrc,
 			roleName,
--- a/src/utils/readable-mime-type/types.json
+++ b/src/utils/readable-mime-type/types.json
@@ -21,7 +21,7 @@
 	"application/vnd.adobe.air-application-installer-package+zip": "Adobe AIR Application",
 	"application/x-shockwave-flash": "Adobe Flash",
 	"application/vnd.adobe.fxp": "Adobe Flex Project",
-	"application/pdf": "Adobe Portable Document Format",
+	"application/pdf": "PDF",
 	"application/vnd.cups-ppd": "Adobe PostScript Printer Description File Format",
 	"application/x-director": "Adobe Shockwave Player",
 	"application/vnd.adobe.xdp+xml": "Adobe XML Data Package",
@@ -47,15 +47,15 @@
 	"application/atomsvc+xml": "Atom Publishing Protocol Service Document",
 	"application/atom+xml": "Atom Syndication Format",
 	"application/pkix-attr-cert": "Attribute Certificate",
-	"audio/x-aiff": "Audio Interchange File Format",
-	"video/x-msvideo": "Audio Video Interleave (AVI)",
+	"audio/x-aiff": "AIFF",
+	"video/x-msvideo": "AVI",
 	"application/vnd.audiograph": "Audiograph",
 	"image/vnd.dxf": "AutoCAD DXF",
 	"model/vnd.dwf": "Autodesk Design Web Format (DWF)",
 	"text/plain-bas": "BAS Partitur Format",
 	"application/x-bcpio": "Binary CPIO Archive",
 	"application/octet-stream": "Binary Data",
-	"image/bmp": "Bitmap Image File",
+	"image/bmp": "Bitmap Image",
 	"application/x-bittorrent": "BitTorrent",
 	"application/vnd.rim.cod": "Blackberry COD File",
 	"application/vnd.blueice.multipass": "Blueice Research Multipass",
@@ -85,7 +85,7 @@
 	"application/vnd.cluetrust.cartomobile-config-pkg": "ClueTrust CartoMobile - Config Package",
 	"image/x-cmu-raster": "CMU Image",
 	"model/vnd.collada+xml": "COLLADA",
-	"text/csv": "Comma-Seperated Values",
+	"text/csv": "CSV",
 	"application/mac-compactpro": "Compact Pro",
 	"application/vnd.wap.wmlc": "Compiled Wireless Markup Language (WMLC)",
 	"image/cgm": "Computer Graphics Metafile",
@@ -123,7 +123,7 @@
 	"video/vnd.dece.pd": "DECE PD Video",
 	"video/vnd.dece.sd": "DECE SD Video",
 	"video/vnd.dece.video": "DECE Video",
-	"application/x-dvi": "Device Independent File Format (DVI)",
+	"application/x-dvi": "DVI",
 	"application/vnd.fdsn.seed": "Digital Siesmograph Networks - SEED Datafiles",
 	"application/x-dtbook+xml": "Digital Talking Book",
 	"application/x-dtbresource+xml": "Digital Talking Book - Resource File",
@@ -204,7 +204,7 @@
 	"application/vnd.google-earth.kml+xml": "Google Earth - KML",
 	"application/vnd.google-earth.kmz": "Google Earth - Zipped KML",
 	"application/vnd.grafeq": "GrafEq",
-	"image/gif": "Graphics Interchange Format",
+	"image/gif": "GIF",
 	"text/vnd.graphviz": "Graphviz",
 	"application/vnd.groove-account": "Groove - Account",
 	"application/vnd.groove-help": "Groove - Help",
@@ -230,7 +230,7 @@
 	"application/vnd.hydrostatix.sof-data": "Hydrostatix Master Suite",
 	"application/hyperstudio": "Hyperstudio",
 	"application/vnd.hal+xml": "Hypertext Application Language",
-	"text/html": "HyperText Markup Language (HTML)",
+	"text/html": "HTML",
 	"application/vnd.ibm.rights-management": "IBM DB2 Rights Manager",
 	"application/vnd.ibm.secure-container": "IBM Electronic Media Management System - Secure Container",
 	"text/calendar": "iCalendar",
@@ -263,12 +263,12 @@
 	"application/java-serialized-object": "Java Serialized Object",
 	"text/x-java-source,java": "Java Source File",
 	"application/javascript": "JavaScript",
-	"application/json": "JavaScript Object Notation (JSON)",
+	"application/json": "JSON",
 	"application/vnd.joost.joda-archive": "Joda Archive",
-	"video/jpm": "JPEG 2000 Compound Image File Format",
-	"image/jpeg": "JPEG Image",
-	"image/x-citrix-jpeg": "JPEG Image (Citrix client)",
-	"image/pjpeg": "JPEG Image (Progressive)",
+	"video/jpm": "JPG",
+	"image/jpeg": "JPG",
+	"image/x-citrix-jpeg": "JPG",
+	"image/pjpeg": "JPG",
 	"video/jpeg": "JPGVideo",
 	"application/vnd.kahootz": "Kahootz",
 	"application/vnd.chipnuts.karaoke-mmd": "Karaoke on Chipnuts Chipsets",
@@ -323,72 +323,72 @@
 	"application/vnd.micrografx.flo": "Micrografx",
 	"application/vnd.micrografx.igx": "Micrografx iGrafx Professional",
 	"application/vnd.eszigno3+xml": "MICROSEC e-Szign¢",
-	"application/x-msaccess": "Microsoft Access",
-	"video/x-ms-asf": "Microsoft Advanced Systems Format (ASF)",
-	"application/x-msdownload": "Microsoft Application",
-	"application/vnd.ms-artgalry": "Microsoft Artgalry",
-	"application/vnd.ms-cab-compressed": "Microsoft Cabinet File",
-	"application/vnd.ms-ims": "Microsoft Class Server",
-	"application/x-ms-application": "Microsoft ClickOnce",
-	"application/x-msclip": "Microsoft Clipboard Clip",
-	"image/vnd.ms-modi": "Microsoft Document Imaging Format",
-	"application/vnd.ms-fontobject": "Microsoft Embedded OpenType",
-	"application/vnd.ms-excel": "Microsoft Excel",
-	"application/vnd.ms-excel.addin.macroenabled.12": "Microsoft Excel - Add-In File",
-	"application/vnd.ms-excel.sheet.binary.macroenabled.12": "Microsoft Excel - Binary Workbook",
-	"application/vnd.ms-excel.template.macroenabled.12": "Microsoft Excel - Macro-Enabled Template File",
-	"application/vnd.ms-excel.sheet.macroenabled.12": "Microsoft Excel - Macro-Enabled Workbook",
-	"application/vnd.ms-htmlhelp": "Microsoft Html Help File",
-	"application/x-mscardfile": "Microsoft Information Card",
-	"application/vnd.ms-lrm": "Microsoft Learning Resource Module",
-	"application/x-msmediaview": "Microsoft MediaView",
-	"application/x-msmoney": "Microsoft Money",
-	"application/vnd.openxmlformats-officedocument.presentationml.presentation": "Microsoft Office - OOXML - Presentation",
-	"application/vnd.openxmlformats-officedocument.presentationml.slide": "Microsoft Office - OOXML - Presentation (Slide)",
-	"application/vnd.openxmlformats-officedocument.presentationml.slideshow": "Microsoft Office - OOXML - Presentation (Slideshow)",
-	"application/vnd.openxmlformats-officedocument.presentationml.template": "Microsoft Office - OOXML - Presentation Template",
-	"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "Microsoft Office - OOXML - Spreadsheet",
-	"application/vnd.openxmlformats-officedocument.spreadsheetml.template": "Microsoft Office - OOXML - Spreadsheet Template",
-	"application/vnd.openxmlformats-officedocument.wordprocessingml.document": "Microsoft Office - OOXML - Word Document",
-	"application/vnd.openxmlformats-officedocument.wordprocessingml.template": "Microsoft Office - OOXML - Word Document Template",
-	"application/x-msbinder": "Microsoft Office Binder",
-	"application/vnd.ms-officetheme": "Microsoft Office System Release Theme",
-	"application/onenote": "Microsoft OneNote",
-	"audio/vnd.ms-playready.media.pya": "Microsoft PlayReady Ecosystem",
-	"video/vnd.ms-playready.media.pyv": "Microsoft PlayReady Ecosystem Video",
-	"application/vnd.ms-powerpoint": "Microsoft PowerPoint",
-	"application/vnd.ms-powerpoint.addin.macroenabled.12": "Microsoft PowerPoint - Add-in file",
-	"application/vnd.ms-powerpoint.slide.macroenabled.12": "Microsoft PowerPoint - Macro-Enabled Open XML Slide",
-	"application/vnd.ms-powerpoint.presentation.macroenabled.12": "Microsoft PowerPoint - Macro-Enabled Presentation File",
-	"application/vnd.ms-powerpoint.slideshow.macroenabled.12": "Microsoft PowerPoint - Macro-Enabled Slide Show File",
-	"application/vnd.ms-powerpoint.template.macroenabled.12": "Microsoft PowerPoint - Macro-Enabled Template File",
-	"application/vnd.ms-project": "Microsoft Project",
-	"application/x-mspublisher": "Microsoft Publisher",
-	"application/x-msschedule": "Microsoft Schedule+",
-	"application/x-silverlight-app": "Microsoft Silverlight",
-	"application/vnd.ms-pki.stl": "Microsoft Trust UI Provider - Certificate Trust Link",
-	"application/vnd.ms-pki.seccat": "Microsoft Trust UI Provider - Security Catalog",
-	"application/vnd.visio": "Microsoft Visio",
-	"application/vnd.visio2013": "Microsoft Visio 2013",
-	"video/x-ms-wm": "Microsoft Windows Media",
-	"audio/x-ms-wma": "Microsoft Windows Media Audio",
-	"audio/x-ms-wax": "Microsoft Windows Media Audio Redirector",
-	"video/x-ms-wmx": "Microsoft Windows Media Audio/Video Playlist",
-	"application/x-ms-wmd": "Microsoft Windows Media Player Download Package",
-	"application/vnd.ms-wpl": "Microsoft Windows Media Player Playlist",
-	"application/x-ms-wmz": "Microsoft Windows Media Player Skin Package",
-	"video/x-ms-wmv": "Microsoft Windows Media Video",
-	"video/x-ms-wvx": "Microsoft Windows Media Video Playlist",
-	"application/x-msmetafile": "Microsoft Windows Metafile",
-	"application/x-msterminal": "Microsoft Windows Terminal Services",
-	"application/msword": "Microsoft Word",
-	"application/vnd.ms-word.document.macroenabled.12": "Microsoft Word - Macro-Enabled Document",
-	"application/vnd.ms-word.template.macroenabled.12": "Microsoft Word - Macro-Enabled Template",
-	"application/x-mswrite": "Microsoft Wordpad",
-	"application/vnd.ms-works": "Microsoft Works",
-	"application/x-ms-xbap": "Microsoft XAML Browser Application",
-	"application/vnd.ms-xpsdocument": "Microsoft XML Paper Specification",
-	"audio/midi": "MIDI - Musical Instrument Digital Interface",
+	"application/x-msaccess": "Access",
+	"video/x-ms-asf": "MS ASF",
+	"application/x-msdownload": "MS App",
+	"application/vnd.ms-artgalry": "MS Artgalry",
+	"application/vnd.ms-cab-compressed": "MS Cabinet File",
+	"application/vnd.ms-ims": "MS Class Server",
+	"application/x-ms-application": "MS ClickOnce",
+	"application/x-msclip": "MS Clipboard Clip",
+	"image/vnd.ms-modi": "MS Document Imaging Format",
+	"application/vnd.ms-fontobject": "MS Embedded OpenType",
+	"application/vnd.ms-excel": "Excel",
+	"application/vnd.ms-excel.addin.macroenabled.12": "MS Excel - Add-In File",
+	"application/vnd.ms-excel.sheet.binary.macroenabled.12": "MS Excel - Binary Workbook",
+	"application/vnd.ms-excel.template.macroenabled.12": "MS Excel - Macro-Enabled Template File",
+	"application/vnd.ms-excel.sheet.macroenabled.12": "MS Excel - Macro-Enabled Workbook",
+	"application/vnd.ms-htmlhelp": "MS Html Help File",
+	"application/x-mscardfile": "MS Information Card",
+	"application/vnd.ms-lrm": "MS Learning Resource Module",
+	"application/x-msmediaview": "MS MediaView",
+	"application/x-msmoney": "MS Money",
+	"application/vnd.openxmlformats-officedocument.presentationml.presentation": "MS Office - OOXML - Presentation",
+	"application/vnd.openxmlformats-officedocument.presentationml.slide": "MS Office - OOXML - Presentation (Slide)",
+	"application/vnd.openxmlformats-officedocument.presentationml.slideshow": "MS Office - OOXML - Presentation (Slideshow)",
+	"application/vnd.openxmlformats-officedocument.presentationml.template": "MS Office - OOXML - Presentation Template",
+	"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "MS Office - OOXML - Spreadsheet",
+	"application/vnd.openxmlformats-officedocument.spreadsheetml.template": "MS Office - OOXML - Spreadsheet Template",
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.document": "MS Office - OOXML - Word Document",
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.template": "MS Office - OOXML - Word Document Template",
+	"application/x-msbinder": "MS Office Binder",
+	"application/vnd.ms-officetheme": "MS Office System Release Theme",
+	"application/onenote": "OneNote",
+	"audio/vnd.ms-playready.media.pya": "MS PlayReady Ecosystem",
+	"video/vnd.ms-playready.media.pyv": "MS PlayReady Ecosystem Video",
+	"application/vnd.ms-powerpoint": "PowerPoint",
+	"application/vnd.ms-powerpoint.addin.macroenabled.12": "PowerPoint - Add-in file",
+	"application/vnd.ms-powerpoint.slide.macroenabled.12": "PowerPoint - Macro-Enabled Open XML Slide",
+	"application/vnd.ms-powerpoint.presentation.macroenabled.12": "PowerPoint - Macro-Enabled Presentation File",
+	"application/vnd.ms-powerpoint.slideshow.macroenabled.12": "PowerPoint - Macro-Enabled Slide Show File",
+	"application/vnd.ms-powerpoint.template.macroenabled.12": "PowerPoint - Macro-Enabled Template File",
+	"application/vnd.ms-project": "MS Project",
+	"application/x-mspublisher": "MS Publisher",
+	"application/x-msschedule": "MS Schedule+",
+	"application/x-silverlight-app": "MS Silverlight",
+	"application/vnd.ms-pki.stl": "MS Trust UI Provider - Certificate Trust Link",
+	"application/vnd.ms-pki.seccat": "MS Trust UI Provider - Security Catalog",
+	"application/vnd.visio": "Visio",
+	"application/vnd.visio2013": "Visio 2013",
+	"video/x-ms-wm": "MS Windows Media",
+	"audio/x-ms-wma": "WMA",
+	"audio/x-ms-wax": "MS Windows Media Audio Redirector",
+	"video/x-ms-wmx": "MS Windows Media Audio/Video Playlist",
+	"application/x-ms-wmd": "MS Windows Media Player Download Package",
+	"application/vnd.ms-wpl": "MS Windows Media Player Playlist",
+	"application/x-ms-wmz": "MS Windows Media Player Skin Package",
+	"video/x-ms-wmv": "WMV",
+	"video/x-ms-wvx": "MS Windows Media Video Playlist",
+	"application/x-msmetafile": "MS Windows Metafile",
+	"application/x-msterminal": "MS Windows Terminal Services",
+	"application/msword": "Word",
+	"application/vnd.ms-word.document.macroenabled.12": "MS Word - Macro-Enabled Document",
+	"application/vnd.ms-word.template.macroenabled.12": "MS Word - Macro-Enabled Template",
+	"application/x-mswrite": "MS Wordpad",
+	"application/vnd.ms-works": "MS Works",
+	"application/x-ms-xbap": "MS XAML Browser Application",
+	"application/vnd.ms-xpsdocument": "MS XML Paper Specification",
+	"audio/midi": "MIDI",
 	"application/vnd.ibm.minipay": "MiniPay",
 	"application/vnd.ibm.modcap": "MO:DCA-P",
 	"application/vnd.jcp.javame.midlet-rms": "Mobile Information Device Profile",
@@ -407,13 +407,13 @@
 	"video/mj2": "Motion JPEG 2000",
 	"audio/mpeg": "MPEG Audio",
 	"video/vnd.mpegurl": "MPEG Url",
-	"video/mpeg": "MPEG Video",
+	"video/mpeg": "MPEG",
 	"application/mp21": "MPEG-21",
-	"audio/mp4": "MPEG-4 Audio",
-	"video/mp4": "MPEG-4 Video",
-	"application/mp4": "MPEG4",
+	"audio/mp4": "MP4 Audio",
+	"video/mp4": "MP4 Video",
+	"application/mp4": "MP4",
 	"application/vnd.apple.mpegurl": "Multimedia Playlist Unicode",
-	"application/vnd.musician": "MUsical Score Interpreted Code Invented  for the ASCII designation of Notation",
+	"application/vnd.musician": "MUsical Score Interpreted Code Invented for the ASCII designation of Notation",
 	"application/vnd.muvee.style": "Muvee Automatic Video Editing",
 	"application/xv+xml": "MXML",
 	"application/vnd.nokia.n-gage.data": "N-Gage Game Data",
@@ -445,8 +445,8 @@
 	"application/vnd.intu.qbo": "Open Financial Exchange",
 	"application/vnd.openofficeorg.extension": "Open Office Extension",
 	"application/vnd.yamaha.openscoreformat": "Open Score Format",
-	"audio/webm": "Open Web Media Project - Audio",
-	"video/webm": "Open Web Media Project - Video",
+	"audio/webm": "WebM Audio",
+	"video/webm": "WebM Video",
 	"application/vnd.oasis.opendocument.chart": "OpenDocument Chart",
 	"application/vnd.oasis.opendocument.chart-template": "OpenDocument Chart Template",
 	"application/vnd.oasis.opendocument.database": "OpenDocument Database",
@@ -501,9 +501,9 @@
 	"application/font-tdpfr": "Portable Font Resource",
 	"application/x-chess-pgn": "Portable Game Notation (Chess Games)",
 	"image/x-portable-graymap": "Portable Graymap Format",
-	"image/png": "Portable Network Graphics (PNG)",
-	"image/x-citrix-png": "Portable Network Graphics (PNG) (Citrix client)",
-	"image/x-png": "Portable Network Graphics (PNG) (x-token)",
+	"image/png": "PNG",
+	"image/x-citrix-png": "PNG",
+	"image/x-png": "PNG",
 	"image/x-portable-pixmap": "Portable Pixmap Format",
 	"application/pskc+xml": "Portable Symmetric Key Container",
 	"application/vnd.ctc-posml": "PosML",
@@ -541,13 +541,13 @@
 	"application/rdf+xml": "Resource Description Framework",
 	"application/vnd.cloanto.rp9": "RetroPlatform Player",
 	"application/vnd.jisp": "RhymBox",
-	"application/rtf": "Rich Text Format",
-	"text/richtext": "Rich Text Format (RTF)",
+	"application/rtf": "Rich Text",
+	"text/richtext": "Rich Text",
 	"application/vnd.route66.link66+xml": "ROUTE 66 Location Based Services",
-	"application/rss+xml": "RSS - Really Simple Syndication",
+	"application/rss+xml": "RSS",
 	"application/shf+xml": "S Hexdump Format",
 	"application/vnd.sailingtracker.track": "SailingTracker",
-	"image/svg+xml": "Scalable Vector Graphics (SVG)",
+	"image/svg+xml": "SVG",
 	"application/vnd.sus-calendar": "ScheduleUs",
 	"application/sru+xml": "Search/Retrieve via URL Response Format",
 	"application/set-payment-initiation": "Secure Electronic Transaction - Payment",
@@ -587,7 +587,7 @@
 	"application/srgs+xml": "Speech Recognition Grammar Specification - XML",
 	"application/ssml+xml": "Speech Synthesis Markup Language",
 	"application/vnd.koan": "SSEYO Koan Play File",
-	"text/sgml": "Standard Generalized Markup Language (SGML)",
+	"text/sgml": "SGML",
 	"application/vnd.stardivision.calc": "StarOffice - Calc",
 	"application/vnd.stardivision.draw": "StarOffice - Draw",
 	"application/vnd.stardivision.impress": "StarOffice - Impress",
@@ -610,14 +610,14 @@
 	"application/x-sv4crc": "System V Release 4 CPIO Checksum Data",
 	"application/sbml+xml": "Systems Biology Markup Language",
 	"text/tab-separated-values": "Tab Seperated Values",
-	"image/tiff": "Tagged Image File Format",
+	"image/tiff": "TIFF",
 	"application/vnd.tao.intent-module-archive": "Tao Intent",
-	"application/x-tar": "Tar File (Tape Archive)",
+	"application/x-tar": "Tar File",
 	"application/x-tcl": "Tcl Script",
 	"application/x-tex": "TeX",
 	"application/x-tex-tfm": "TeX Font Metric",
 	"application/tei+xml": "Text Encoding and Interchange",
-	"text/plain": "Text File",
+	"text/plain": "Text",
 	"application/vnd.spotfire.dxp": "TIBCO Spotfire",
 	"application/vnd.spotfire.sfs": "TIBCO Spotfire",
 	"application/timestamped-data": "Time Stamped Data Envelope",
@@ -649,28 +649,28 @@
 	"application/voicexml+xml": "VoiceXML",
 	"application/x-wais-source": "WAIS Source",
 	"application/vnd.wap.wbxml": "WAP Binary XML (WBXML)",
-	"image/vnd.wap.wbmp": "WAP Bitamp (WBMP)",
-	"audio/x-wav": "Waveform Audio File Format (WAV)",
+	"image/vnd.wap.wbmp": "WBMP",
+	"audio/x-wav": "WAV",
 	"application/davmount+xml": "Web Distributed Authoring and Versioning",
-	"application/x-font-woff": "Web Open Font Format",
+	"application/x-font-woff": "WOFF",
 	"application/wspolicy+xml": "Web Services Policy",
-	"image/webp": "WebP Image",
+	"image/webp": "WebP",
 	"application/vnd.webturbo": "WebTurbo",
 	"application/widget": "Widget Packaging and XML Configuration",
 	"application/winhlp": "WinHelp",
-	"text/vnd.wap.wml": "Wireless Markup Language (WML)",
-	"text/vnd.wap.wmlscript": "Wireless Markup Language Script (WMLScript)",
+	"text/vnd.wap.wml": "WML",
+	"text/vnd.wap.wmlscript": "WMLScript",
 	"application/vnd.wap.wmlscriptc": "WMLScript",
 	"application/vnd.wordperfect": "Wordperfect",
 	"application/vnd.wt.stf": "Worldtalk",
-	"application/wsdl+xml": "WSDL - Web Services Description Language",
+	"application/wsdl+xml": "WSDL",
 	"image/x-xbitmap": "X BitMap",
 	"image/x-xpixmap": "X PixMap",
 	"image/x-xwindowdump": "X Window Dump",
 	"application/x-x509-ca-cert": "X.509 Certificate",
 	"application/x-xfig": "Xfig",
-	"application/xhtml+xml": "XHTML - The Extensible HyperText Markup Language",
-	"application/xml": "XML - Extensible Markup Language",
+	"application/xhtml+xml": "XHTML",
+	"application/xml": "XML",
 	"application/xcap-diff+xml": "XML Configuration Access Protocol - XCAP Diff",
 	"application/xenc+xml": "XML Encryption Syntax and Processing",
 	"application/patch-ops-error+xml": "XML Patch Framework",
@@ -683,7 +683,7 @@
 	"application/xspf+xml": "XSPF - XML Shareable Playlist Format",
 	"application/vnd.mozilla.xul+xml": "XUL - XML User Interface Language",
 	"chemical/x-xyz": "XYZ File Format",
-	"text/yaml": "YAML Ain't Markup Language / Yet Another Markup Language",
+	"text/yaml": "YAML",
 	"application/yang": "YANG Data Modeling Language",
 	"application/yin+xml": "YIN (YANG - XML)",
 	"application/vnd.zul": "Z.U.L. Geometry",
--- a/src/views/private/components/drawer-detail/drawer-detail.vue
+++ b/src/views/private/components/drawer-detail/drawer-detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="drawer-detail">
+	<div class="drawer-detail" :class="{ open: drawerOpen }">
 		<button class="toggle" @click="toggle" :class="{ open: active }">
 			<div class="icon">
 				<v-badge bordered :value="badge" :disabled="!badge">
@@ -9,6 +9,9 @@
 			<div class="title" v-show="drawerOpen">
 				{{ title }}
 			</div>
+			<div v-if="close" class="close" @click.stop="drawerOpen = !drawerOpen">
+				<v-icon name="close" />
+			</div>
 		</button>
 		<transition-expand class="scroll-container">
 			<div v-show="active">
@@ -39,6 +42,10 @@ export default defineComponent({
 			type: [String, Number],
 			default: null,
 		},
+		close: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const { active, toggle } = useGroupable(props.title, 'drawer-detail');
@@ -70,16 +77,42 @@ body {
 		height: 64px;
 		color: var(--foreground-normal);
 		background-color: var(--background-normal-alt);
+
+		.icon {
+			--v-icon-color: var(--drawer-detail-icon-color);
+
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 64px;
+			height: 100%;
+		}
+
+		.close {
+			position: absolute;
+			top: 0;
+			right: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 64px;
+			height: 64px;
+			color: var(--foreground-subdued);
+			opacity: 0;
+			transition: opacity var(--fast) var(--transition), color var(--fast) var(--transition);
+			pointer-events: none;
+
+			&:hover {
+				color: var(--foreground-normal);
+			}
+		}
 	}

-	.icon {
-		--v-icon-color: var(--drawer-detail-icon-color);
-
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 64px;
-		height: 100%;
+	&.open {
+		.toggle .close {
+			opacity: 1;
+			pointer-events: auto;
+		}
 	}

 	.title {
@@ -98,6 +131,13 @@ body {

 	.content {
 		padding: 16px;
+		::v-deep {
+			.format-markdown {
+				a {
+					color: var(--primary);
+				}
+			}
+		}
 	}
 }
 </style>
--- a/src/views/private/components/module-bar-logo/module-bar-logo.vue
+++ b/src/views/private/components/module-bar-logo/module-bar-logo.vue
@@ -67,7 +67,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .module-bar-logo {
 	--v-progress-circular-color: var(--white);
-	--v-progress-circular-background-color: transparent;
+	--v-progress-circular-background-color: rgba(255, 255, 255, 0.25);

 	position: relative;
 	display: flex;
--- a/src/views/private/components/render-display/render-display.vue
+++ b/src/views/private/components/render-display/render-display.vue
@@ -1,7 +1,7 @@
 <template>
 	<value-null v-if="value === null || value === undefined" />
-	<span v-else-if="displayInfo === null" class="no-wrap">{{ value }}</span>
-	<span v-else-if="typeof displayInfo.handler === 'function'" class="no-wrap">
+	<span v-else-if="displayInfo === null" class="display">{{ value }}</span>
+	<span v-else-if="typeof displayInfo.handler === 'function'" class="display">
 		{{ displayInfo.handler(value, options, { type }) }}
 	</span>
 	<component
@@ -68,10 +68,7 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '@/styles/mixins/no-wrap.scss';
-
-.no-wrap {
+.display {
 	line-height: 22px;
-	@include no-wrap;
 }
 </style>
--- a/src/views/private/components/render-template/render-template.vue
+++ b/src/views/private/components/render-template/render-template.vue
@@ -12,7 +12,7 @@
 				:type="part.type"
 				v-bind="part.options"
 			/>
-			<span :key="index" v-else>{{ part + ' ' }}</span>
+			<span :key="index" v-else>{{ part }}</span>
 		</template>
 	</div>
 </template>
@@ -86,7 +86,7 @@ export default defineComponent({
 						type: field.type,
 					};
 				})
-				.map((p) => (typeof p === 'string' ? p.trim() : p))
+				.map((p) => p)
 				.filter((p) => p)
 		);

@@ -99,16 +99,31 @@ export default defineComponent({
@import '@/styles/mixins/no-wrap';

 .render-template {
-	display: flex;
-	align-items: center;
+	position: relative;
 	max-width: 100%;
 	height: 100%;
+	padding-right: 8px;

 	& > * {
-		margin-right: 6px;
-
-		@include no-wrap;
+		vertical-align: middle;
 	}
+
+	&::after {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		width: 8px;
+		background: linear-gradient(
+			90deg,
+			rgba(var(--background-page-rgb), 0) 0%,
+			rgba(var(--background-page-rgb), 1) 100%
+		);
+		content: '';
+		pointer-events: none;
+	}
+
+	@include no-wrap;
 }

 .subdued {
--- a/src/views/private/components/user-popover/user-popover.vue
+++ b/src/views/private/components/user-popover/user-popover.vue
@@ -121,17 +121,28 @@ export default defineComponent({

 .user-box {
 	display: flex;
+	min-width: 300px;
 	height: 80px;
-	margin: 10px 6px;
+	margin: 8px 4px;

 	.v-avatar {
 		margin-right: 16px;
 	}

 	.status-role {
+		text-transform: capitalize;
+		&.invited {
+			color: var(--primary);
+		}
 		&.active {
 			color: var(--success);
 		}
+		&.suspended {
+			color: var(--warning);
+		}
+		&.deleted {
+			color: var(--danger);
+		}
 	}

 	.email {
@@ -153,7 +164,7 @@ export default defineComponent({
 	display: flex;
 	align-items: center;
 	height: 80px;
-	margin: 10px 6px;
+	margin: 8px 4px;

 	.avatar {
 		width: 80px;
--- a/src/views/private/private-view.vue
+++ b/src/views/private/private-view.vue
@@ -40,14 +40,6 @@
 			:class="{ 'is-open': drawerOpen }"
 			@click="drawerOpen = true"
 		>
-			<drawer-button
-				class="drawer-toggle"
-				@click.stop="drawerOpen = !drawerOpen"
-				:icon="drawerOpen ? 'chevron_right' : 'chevron_left'"
-			>
-				{{ $t('collapse_sidebar') }}
-			</drawer-button>
-
 			<drawer-detail-group :drawer-open="drawerOpen">
 				<slot name="drawer" />
 			</drawer-detail-group>
--- a/yarn.lock
+++ b/yarn.lock
@@ -1904,6 +1904,11 @@
  resolved "https://registry.yarnpkg.com/@types/base-64/-/base-64-0.1.3.tgz#875320c0d019f576a179324124cdbd5031a411f5"
  integrity sha512-DJpw7RKNMXygZ0j2xe6ROBqiJUy7JWEItkzOPBzrT35HUWS7VLYyW9XJX8yCCvE2xg8QD7wesvVyXFg8AVHTMA==

+"@types/bytes@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/bytes/-/bytes-3.1.0.tgz#835a3e4aea3b4d7604aca216a78de372bff3ecc3"
+  integrity sha512-5YG1AiIC8HPPXRvYAIa7ehK3YMAwd0DWiPCtpuL9sgKceWLyWsVtLRA+lT4NkoanDNF9slwQ66lPizWDpgRlWA==
+
 "@types/color-name@^1.1.1":
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -4026,7 +4031,7 @@ bytes@3.0.0:
  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
  integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=

-bytes@3.1.0:
+bytes@3.1.0, bytes@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
@@ -11694,11 +11699,6 @@ prettier@^2.0.5:
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
  integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==

-pretty-bytes@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
-  integrity sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg==
-
 pretty-error@^2.0.2, pretty-error@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"