Added shelf template shared between shelf and post page.

pages/posts/post.page.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="page">
+	<Shelf :shelf="shelf">
 		<div class="content">
 			<Post
 				:post="post"
@@ -43,14 +43,11 @@
 				</li>
 			</ul>
 		</div>
-
-		<div class="sidebar">
-			{{ shelf.name }}
-		</div>
-	</div>
+	</Shelf>
 </template>
 
 <script setup>
+import Shelf from '../../templates/shelves/shelf.vue';
 import Post from '../../components/posts/post.vue';
 import Comment from '../../components/comments/comment.vue';
 import Writer from '../../components/comments/writer.vue';
@@ -67,12 +64,8 @@ const {
 </script>
 
 <style scoped>
-.page {
-	display: flex;
-}
-
 .content {
-	flex-grow: 1;
+	width: 100%;
 }
 
 .body {
@@ -90,12 +83,4 @@ const {
 .post {
 	margin-bottom: .5rem;
 }
-
-.sidebar {
-	background: var(--background);
-	width: 20rem;
-	padding: .5rem;
-	border-radius: .5rem;
-	margin-left: .5rem;
-}
 </style>

pages/shelves/shelf.page.vue

@@ -1,11 +1,10 @@
 <template>
-	<div class="content">
-		<h3>{{ shelf.slug }}</h3>
-
+	<Shelf :shelf="shelf">
 		<ul class="posts nolist">
 			<li
 				v-for="post in posts"
 				:key="post.id"
+				class="post-item"
 			>
 				<Post
 					:post="post"
@@ -13,74 +12,31 @@
 				/>
 			</li>
 		</ul>
-
-		<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>
+	</Shelf>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import Shelf from '../../templates/shelves/shelf.vue';
 import Post from '../../components/posts/post.vue';
 
-import * as api from '../../assets/js/api';
-import { navigate } from '../../assets/js/navigate';
 import { usePageContext } from '../../renderer/usePageContext';
 
-const { pageData, routeParams } = usePageContext();
+const { pageData } = usePageContext();
 
 const {
 	shelf,
 	posts,
 } = pageData;
-
-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/${shelf.slug}/post/${post.id}`);
-}
 </script>
 
 <style scoped>
 .posts {
+	width: 100%;
+	display: flex;
 	margin-bottom: 1rem;
 }
+
+.post-item {
+	width: 100%;
+}
 </style>