Add "show hidden collections" context menu

Closes #3310

app/src/lang/translations/en-US.yaml

@@ -155,9 +155,9 @@ click_to_manage_translated_fields: >-
   There are no translated fields yet. Click here to create them. | There is one translated field. Click here to manage
   it. | There are {count} translated fields. Click here to manage them.
 fields_group: Fields Group
-new_data_alert: "The following will be created within your Data Model:"
-new_field: "New Field"
-new_collection: "New Collection"
+new_data_alert: 'The following will be created within your Data Model:'
+new_field: 'New Field'
+new_collection: 'New Collection'
 configure_m2o: Configure your Many-to-One Relationship...
 configure_o2m: Configure your One-to-Many Relationship...
 configure_m2m: Configure your Many-to-Many Relationship...
@@ -430,6 +430,8 @@ delete_collection_are_you_sure: >-
 collections_shown: Collections Shown
 visible_collections: Visible Collections
 hidden_collections: Hidden Collections
+show_hidden_collections: Show Hidden Collections
+hide_hidden_collections: Hide Hidden Collections
 unmanaged_collections: Unconfigured Collections
 system_collections: System Collections
 placeholder: Placeholder

app/src/modules/collections/components/navigation.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-list large>
+	<v-list large class="collections-navigation" @contextmenu.native.prevent.stop="$refs.contextMenu.activate">
 		<template v-if="customNavItems && customNavItems.length > 0">
 			<template v-for="(group, index) in customNavItems">
 				<template
@@ -53,11 +53,41 @@
 				{{ $t('no_collections_copy') }}
 			</template>
 		</div>
+
+		<template v-if="hiddenShown">
+			<v-divider />
+
+			<v-list-item
+				class="hidden-collection"
+				:exact="exact"
+				v-for="navItem in hiddenNavItems"
+				:key="navItem.to"
+				:to="navItem.to"
+			>
+				<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
+				<v-list-item-content>
+					<v-text-overflow :text="navItem.name" />
+				</v-list-item-content>
+			</v-list-item>
+		</template>
+
+		<v-menu ref="contextMenu" show-arrow placement="bottom-start">
+			<v-list>
+				<v-list-item @click="hiddenShown = !hiddenShown">
+					<v-list-item-icon>
+						<v-icon :name="hiddenShown ? 'visibility_off' : 'visibility'" />
+					</v-list-item-icon>
+					<v-list-item-content>
+						<v-text-overflow :text="hiddenShown ? $t('hide_hidden_collections') : $t('show_hidden_collections')" />
+					</v-list-item-content>
+				</v-list-item>
+			</v-list>
+		</v-menu>
 	</v-list>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed, ref } from '@vue/composition-api';
 import useNavigation from '../composables/use-navigation';
 import { usePresetsStore, useUserStore } from '@/stores/';
 import { orderBy } from 'lodash';
@@ -72,10 +102,12 @@ export default defineComponent({
 		},
 	},
 	setup() {
+		const contextMenu = ref();
+
 		const presetsStore = usePresetsStore();
-		const { customNavItems, navItems, activeGroups } = useNavigation();
 		const userStore = useUserStore();
 		const isAdmin = computed(() => userStore.state.currentUser?.role.admin_access === true);
+		const { hiddenShown, customNavItems, navItems, activeGroups, hiddenNavItems } = useNavigation();
 
 		const bookmarks = computed(() => {
 			return orderBy(
@@ -99,7 +131,18 @@ export default defineComponent({
 			);
 		});
 
-		return { navItems, bookmarks, customNavItems, isAdmin, activeGroups, isActive, toggleActive };
+		return {
+			navItems,
+			bookmarks,
+			customNavItems,
+			isAdmin,
+			activeGroups,
+			isActive,
+			toggleActive,
+			contextMenu,
+			hiddenShown,
+			hiddenNavItems,
+		};
 
 		function isActive(name: string) {
 			return activeGroups.value.includes(name);
@@ -124,9 +167,18 @@ export default defineComponent({
 
 .empty {
 	color: var(--foreground-subdued);
+
 	.v-button {
 		--v-button-background-color: var(--foreground-subdued);
 		--v-button-background-color-hover: var(--primary);
 	}
 }
+
+.collections-navigation {
+	--v-list-min-height: 100%;
+}
+
+.hidden-collection {
+	--v-list-item-color: var(--foreground-subdued);
+}
 </style>

app/src/modules/collections/composables/use-navigation.ts

@@ -19,6 +19,7 @@ export type NavItemGroup = {
 };
 
 let activeGroups: Ref<string[]>;
+let hiddenShown: Ref<boolean>;
 
 export default function useNavigation() {
 	const collectionsStore = useCollectionsStore();
@@ -73,12 +74,35 @@ export default function useNavigation() {
 			});
 	});
 
-	if (!activeGroups)
+	const hiddenNavItems = computed<NavItem[]>(() => {
+		return collectionsStore.hiddenCollections.value
+			.map((collection: Collection) => {
+				const navItem: NavItem = {
+					collection: collection.collection,
+					name: collection.name,
+					icon: collection.meta?.icon || 'label',
+					note: collection.meta?.note || null,
+					to: `/collections/${collection.collection}`,
+				};
+
+				return navItem;
+			})
+			.sort((navA: NavItem, navB: NavItem) => {
+				return navA.name > navB.name ? 1 : -1;
+			});
+	});
+
+	if (!activeGroups) {
 		activeGroups = ref(
 			customNavItems.value
 				? customNavItems.value.filter((navItem) => navItem.accordion === 'start_open').map((navItem) => navItem.name)
 				: []
 		);
+	}
 
-	return { customNavItems, navItems, activeGroups };
+	if (hiddenShown === undefined) {
+		hiddenShown = ref(false);
+	}
+
+	return { customNavItems, navItems, activeGroups, hiddenNavItems, hiddenShown };
 }

app/src/stores/collections.ts

@@ -19,6 +19,11 @@ export const useCollectionsStore = createStore({
 				.filter(({ collection }) => collection.startsWith('directus_') === false)
 				.filter((collection) => collection.meta?.hidden !== true);
 		},
+		hiddenCollections: (state) => {
+			return state.collections
+				.filter(({ collection }) => collection.startsWith('directus_') === false)
+				.filter((collection) => collection.meta?.hidden !== false);
+		},
 	},
 	actions: {
 		async hydrate() {