Added front page, moved shelf navigation to header.

templates/shelves/shelf.vue

@@ -15,6 +15,18 @@
 			<div class="sidebar">
 				<h4 class="sidebar-title">{{ shelf.slug }}</h4>
 
+				<button
+					v-if="subscribed"
+					class="button button-submit subscribe"
+					@click="unsubscribe"
+				>Unsubscribe</button>
+
+				<button
+					v-else
+					class="button button-submit subscribe"
+					@click="subscribe"
+				>Subscribe</button>
+
 				<form
 					class="form compose"
 					@submit.prevent="submitPost"
@@ -44,7 +56,10 @@
 					</div>
 
 					<div class="form-actions">
-						<button class="button button-submit">Post</button>
+						<button
+							class="button button-submit"
+							:disabled="!body && !link"
+						>Post</button>
 					</div>
 				</form>
 			</div>
@@ -53,7 +68,7 @@
 </template>
 
 <script setup>
-import { ref, defineProps } from 'vue';
+import { ref } from 'vue';
 import * as api from '../../assets/js/api';
 import { navigate } from '../../assets/js/navigate';
 import { usePageContext } from '../../renderer/usePageContext';
@@ -68,8 +83,9 @@ const props = defineProps({
 });
 
 const title = ref();
-const link = ref();
-const body = ref();
+const link = ref(null);
+const body = ref(null);
+const subscribed = ref(props.shelf.subscribed);
 
 async function submitPost() {
 	const post = await api.post(`/shelves/${routeParams.id}/posts`, {
@@ -78,7 +94,17 @@ async function submitPost() {
 		body: body.value,
 	});
 
-	navigate(`/s/${props.shelf.slug}/post/${post.id}`);
+	navigate(`/s/${props.shelf.slug}/post/${post.id}/${post.slug}`);
+}
+
+async function subscribe() {
+	subscribed.value = true;
+	await api.post(`/shelves/${routeParams.id}/members`);
+}
+
+async function unsubscribe() {
+	subscribed.value = false;
+	await api.delete(`/shelves/${routeParams.id}/members`);
 }
 </script>
 
@@ -123,4 +149,9 @@ async function submitPost() {
 	margin: 0 0 1rem 0;
 	font-size: 1.25rem;
 }
+
+.subscribe {
+	width: 100%;
+	margin-bottom: 1rem;
+}
 </style>