Collection display template (#487)

* Add translation strings for adding/editing item

* Add display_template to collection type

* Dont use functional for skeleton loader

* Make title optional and add title slot

* Make title prop optional in private view

* Render -- for null values in render template

* Render display template in header bar

* Render null values in template as subdued --

* Render status dot aligned in the middle

* Fetch latest collections on settings save

src/views/private/components/header-bar/header-bar.vue

@@ -11,9 +11,11 @@
 		<div class="title-container">
 			<slot name="headline" />
 			<div class="title">
-				<slot name="title:prepend" />
-				<h1 class="type-title">{{ title }}</h1>
-				<slot name="title:append" />
+				<slot name="title">
+					<slot name="title:prepend" />
+					<h1 class="type-title">{{ title }}</h1>
+					<slot name="title:append" />
+				</slot>
 			</div>
 		</div>
 
@@ -38,7 +40,7 @@ export default defineComponent({
 	props: {
 		title: {
 			type: String,
-			required: true,
+			default: null,
 		},
 	},
 	setup() {

src/views/private/components/render-template/render-template.vue

@@ -1,11 +1,12 @@
 <template>
 	<div class="render-template">
 		<template v-for="(part, index) in parts">
+			<span :key="index" v-if="part === null || part.value === null" class="subdued">--</span>
 			<component
-				v-if="part !== null && typeof part === 'object'"
+				v-else-if="typeof part === 'object'"
 				:is="`display-${part.component}`"
 				:key="index"
-				:value="part.value"
+				:value="part.value === null ? '--' : part.value"
 				:interface="part.interface"
 				:interface-options="part.interfaceOptions"
 				v-bind="part.options"
@@ -91,4 +92,8 @@ export default defineComponent({
 .render-template {
 	display: contents;
 }
+
+.subdued {
+	color: var(--foreground-subdued);
+}
 </style>

src/views/private/private-view.vue

@@ -94,7 +94,7 @@ export default defineComponent({
 	props: {
 		title: {
 			type: String,
-			required: true,
+			default: null,
 		},
 	},
 	setup() {