Add view type switch (#424)

* Manage view_type through collection preset composition

* Move view type translation

* Add layout drawer detail component

* Use different icon for tabular

* Render view as section in browse sidebar

* Fix sticky header in table

* Sort return statement values 🤓

* Use viewtype picker on users

* Use layout picker on files

* Default to tabular view when invalid is set

* Render view type dynamically based on setting

src/views/private/components/layout-drawer-detail/index.ts

@@ -0,0 +1,4 @@
+import LayoutDrawerDetail from './layout-drawer-detail.vue';
+
+export { LayoutDrawerDetail };
+export default LayoutDrawerDetail;

src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue

@@ -0,0 +1,39 @@
+<template>
+	<drawer-detail :icon="currentLayout.icon" :title="$t('view_type')">
+		<v-select :items="layouts" item-text="name" item-value="id" v-model="viewType" full-width />
+	</drawer-detail>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from '@vue/composition-api';
+import layouts from '@/layouts';
+
+export default defineComponent({
+	props: {
+		value: {
+			type: String,
+			required: true,
+		},
+	},
+	setup(props, { emit }) {
+		let currentLayout = layouts.find((layout) => layout.id === props.value);
+
+		// If for whatever reason the current layout doesn't exist, force reset it to tabular
+		if (currentLayout === undefined) {
+			currentLayout = layouts.find((layout) => layout.id === 'tabular');
+			emit('input', 'tabular');
+		}
+
+		const viewType = computed({
+			get() {
+				return props.value;
+			},
+			set(newType: string) {
+				emit('input', newType);
+			},
+		});
+
+		return { currentLayout, layouts, viewType };
+	},
+});
+</script>