Added front page, moved shelf navigation to header.

renderer/_default.page.server.js

@@ -7,6 +7,8 @@ import { createApp } from './app';
 import { useUser } from '../stores/user';
 import logoUrl from './logo.svg';
 
+import { fetchAllShelves } from '../src/shelves';
+
 async function render(pageContext) {
 	// See https://vite-plugin-ssr.com/head
 	const { documentProps } = pageContext.exports;
@@ -48,11 +50,15 @@ async function render(pageContext) {
 async function onBeforeRender(pageContext) {
 	try {
 		const pageData = await pageContext.exports.getPageData?.(pageContext, pageContext.session);
+		const shelves = await fetchAllShelves({ user: pageContext.session.user });
 
 		return {
 			pageContext: {
 				// initialState: store.state.value,
-				pageData,
+				pageData: {
+					...pageData,
+					shelves,
+				},
 				me: pageContext.session.user,
 				now: new Date(),
 			},
@@ -62,9 +68,7 @@ async function onBeforeRender(pageContext) {
 
 		throw RenderErrorPage({
 			pageContext: {
-				pageProps: {
-					errorInfo: error.statusMessage,
-				},
+				pageProps: error,
 				me: pageContext.session.user,
 				now: new Date(),
 			},

renderer/_error.page.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="content">
 		<div v-if="is404">
-			<h1>404 Page Not Found</h1>
+			<h1>{{ statusCode }}</h1>
 
-			<p v-if="errorInfo">{{ errorInfo }}</p>
+			<p v-if="statusMessage">{{ statusMessage }}</p>
 			<p v-else>This page could not be found.</p>
 		</div>
 
 		<div v-else>
 			<h1>500 Internal Error</h1>
 
-			<p v-if="errorInfo">{{ errorInfo }}</p>
+			<p v-if="statusMessage">{{ errorInfo }}</p>
 			<p v-else>Something went wrong.</p>
 		</div>
 	</div>
@@ -20,5 +20,5 @@
 import { usePageContext } from './usePageContext';
 
 const { pageProps } = usePageContext();
-const { is404, errorInfo } = pageProps;
+const { is404, statusCode, statusMessage } = pageProps;
 </script>

renderer/app.js

@@ -1,9 +1,12 @@
 import { createSSRApp, h } from 'vue';
 import { createPinia } from 'pinia';
+import FloatingVue from 'floating-vue';
+
 import Container from './container.vue';
 import { setPageContext } from './usePageContext';
 
 import '../assets/css/style.css';
+import 'floating-vue/dist/style.css';
 
 function createApp(pageContext) {
 	const PageWithLayout = {
@@ -20,6 +23,7 @@ function createApp(pageContext) {
 	const store = createPinia();
 
 	app.use(store);
+	app.use(FloatingVue);
 
 	// We make pageContext available from any Vue component
 	setPageContext(app, pageContext);

renderer/container.vue

@@ -18,11 +18,63 @@
 				>
 			</div>
 
-			<span
-				v-if="me"
-				class="userpanel"
-				@click="logout"
-			>{{ me.username }}</span>
+			<div class="actions">
+				<VDropdown>
+					<button class="button">Explore</button>
+
+					<template #popper>
+						<ul class="tooltip nolist">
+							<li class="tooltip-item">
+								<a
+									href="/shelf/create"
+									class="menu-item"
+								>
+									<button class="button button-submit">New shelf</button>
+								</a>
+							</li>
+
+							<li
+								v-for="shelf in shelves"
+								:key="shelf.id"
+								class="tooltip-item"
+							>
+								<a
+									:href="`/s/${shelf.slug}`"
+									class="link shelf"
+								>s/{{ shelf.slug }}</a>
+							</li>
+						</ul>
+					</template>
+				</VDropdown>
+			</div>
+
+			<VDropdown v-if="me">
+				<span class="userpanel">{{ me.username }}</span>
+
+				<template #popper>
+					<ul	class="tooltip nolist">
+						<li>
+							<a
+								:href="`/user/${me.username}`"
+								class="link menu-item"
+							>Profile</a>
+						</li>
+
+						<li class="menu-item">
+							<button
+								class="button"
+								@click="logout"
+							>Log out</button>
+						</li>
+					</ul>
+				</template>
+			</VDropdown>
+
+			<a
+				v-else
+				href="/account/login"
+				class="link userpanel"
+			>Log in</a>
 		</header>
 
 		<div class="content-container">
@@ -38,7 +90,9 @@ import { del } from '../assets/js/api';
 import { navigate } from '../assets/js/navigate';
 import { usePageContext } from './usePageContext';
 
-const { me } = usePageContext();
+const { pageData, me } = usePageContext();
+const { shelves } = pageData;
+
 const version = CLIENT_VERSION;
 
 async function logout() {
@@ -48,6 +102,13 @@ async function logout() {
 </script>
 
 <style>
+.content {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	padding: 1rem;
+}
+
 .logo svg {
     height: 100%;
     width: auto;
@@ -71,6 +132,7 @@ async function logout() {
 
 .header {
     display: flex;
+	align-items: center;
 	flex-shrink: 0;
     background: var(--background);
     box-shadow: 0 0 3px var(--shadow-weak-10);
@@ -99,11 +161,32 @@ async function logout() {
     }
 }
 
+.actions {
+	display: flex;
+	align-items: center;
+}
+
 .userpanel {
 	display: flex;
 	align-items: center;
 	padding: 1rem;
 	font-weight: bold;
+	cursor: pointer;
+}
+
+.tooltip {
+	width: 10rem;
+	padding-bottom: .25rem;
+
+	.button {
+		width: 100%;
+	}
+
+	.shelf {
+		display: block;
+		box-sizing: border-box;
+		padding: .25rem .5rem;
+	}
 }
 
 .footer {