Added shelf template shared between shelf and post page.

templates/shelves/shelf.vue

@@ -0,0 +1,126 @@
+<template>
+	<div class="page">
+		<header class="header">
+			<h2 class="title">
+				<a
+					:href="`/s/${shelf.slug}`"
+					class="nolink"
+				>s/{{ shelf.slug }}</a>
+			</h2>
+		</header>
+
+		<div class="body">
+			<slot />
+
+			<div class="sidebar">
+				<h4 class="sidebar-title">{{ shelf.slug }}</h4>
+
+				<form
+					class="form compose"
+					@submit.prevent="submitPost"
+				>
+					<div class="form-row">
+						<input
+							v-model="title"
+							placeholder="Title"
+							class="input"
+						>
+					</div>
+
+					<div class="form-row">
+						<input
+							v-model="link"
+							class="input"
+							placeholder="Link"
+						>
+					</div>
+
+					<div class="form-row">
+						<textarea
+							v-model="body"
+							placeholder="Body"
+							class="input body"
+						/>
+					</div>
+
+					<div class="form-actions">
+						<button class="button button-submit">Post</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, defineProps } from 'vue';
+import * as api from '../../assets/js/api';
+import { navigate } from '../../assets/js/navigate';
+import { usePageContext } from '../../renderer/usePageContext';
+
+const { routeParams } = usePageContext();
+
+const props = defineProps({
+	shelf: {
+		type: Object,
+		default: null,
+	},
+});
+
+const title = ref();
+const link = ref();
+const body = ref();
+
+async function submitPost() {
+	const post = await api.post(`/shelves/${routeParams.id}/posts`, {
+		title: title.value,
+		link: link.value,
+		body: body.value,
+	});
+
+	navigate(`/s/${props.shelf.slug}/post/${post.id}`);
+}
+</script>
+
+<style scoped>
+.page {
+	display: flex;
+	flex-direction: column;
+	padding: 1rem
+}
+
+.body {
+	display: flex;
+}
+
+.content {
+	width: 100%;
+	display: flex;
+	flex-grow: 1;
+}
+
+.header {
+	padding: 1rem;
+	border-radius: .25rem;
+	margin-bottom: .5rem;
+	background: var(--background);
+}
+
+.title {
+	margin: 0;
+	font-size: 1.25rem;
+}
+
+.sidebar {
+	background: var(--background);
+	width: 20rem;
+	padding: .5rem;
+	border-radius: .25rem;
+	margin-left: .5rem;
+}
+
+.sidebar-title {
+	margin: 0 0 1rem 0;
+	font-size: 1.25rem;
+}
+</style>