added a back button and other visual improvements (#53)

src/lib/components/BackButton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { afterNavigate } from "$app/navigation";
+	import { page } from "$app/stores";
+	import logo from "$lib/assets/logo.png";
+
+	export let label = "Back";
+	const disabledUrls = ["/login", "/signup", "/"];
+
+	let documentTitle: string | undefined;
+	let disabled = true;
+
+	afterNavigate(() => {
+		documentTitle = document?.title;
+		disabled = disabledUrls.find((url) => $page.url.pathname === url) !== undefined;
+	});
+</script>
+
+{#if disabled}
+	<a class="flex flex-row items-center space-x-2" href="/">
+		<img class="h-10 md:h-12" alt="Wishlist Logo" src={logo} />
+		<span class="text-primary-900-50-token text-2xl font-bold md:text-3xl">Wishlist</span>
+	</a>
+{:else}
+	<button class="btn w-fit p-0" type="button" on:click={() => history.back()}>
+		<!-- <div class="flex flex-row items-center space-x-1"> -->
+		<iconify-icon icon="ion:arrow-back" />
+
+		<span class="text-xl">{documentTitle || label}</span>
+		<!-- </div> -->
+	</button>
+{/if}

src/lib/components/navigation/BottomTabs.svelte

@@ -13,7 +13,7 @@
 
 {#if $isInstalled}
 	<TabGroup
-		class="w-full py-4 bg-surface-200-700-token md:hidden"
+		class="bg-surface-200-700-token w-full pb-6 pt-4 md:hidden"
 		active="variant-glass-primary"
 		border=""
 		hover="hover:variant-soft-primary"

src/lib/components/navigation/NavBar.svelte

@@ -5,32 +5,36 @@
 	import NavMenu from "./NavMenu.svelte";
 	import type { User } from "lucia";
 	import { isInstalled } from "$lib/stores/is-installed";
+	import BackButton from "../BackButton.svelte";
 
 	export let navItems: NavItem[];
 	export let user: User | undefined;
 
-    const drawerStore = getDrawerStore();
+	const drawerStore = getDrawerStore();
 </script>
 
 <AppBar background="bg-surface-200-700-token" padding="py-2 md:py-4 px-4">
 	<svelte:fragment slot="lead">
 		<div class="flex content-center items-center space-x-4">
 			{#if user && !$isInstalled}
-				<button
-					class="btn btn-sm p-0 pt-0.5 md:hidden"
-					on:click={() =>
-						drawerStore.open({
-							width: "w-[280px] md:w-[480px]"
-						})}
-				>
-					<iconify-icon class="text-2xl" icon="ion:menu" />
-				</button>
+				{#if user}
+					<button
+						class="btn btn-sm p-0 pt-0.5 md:hidden"
+						on:click={() =>
+							drawerStore.open({
+								width: "w-[280px] md:w-[480px]"
+							})}
+					>
+						<iconify-icon class="text-2xl" icon="ion:menu" />
+					</button>
+				{/if}
+				<a class="flex flex-row items-center space-x-2" href="/">
+					<img class="h-10 md:h-12" alt="Wishlist Logo" src={logo} />
+					<span class="text-primary-900-50-token text-2xl font-bold md:text-3xl">Wishlist</span>
+				</a>
+			{:else}
+				<BackButton />
 			{/if}
-
-			<a class="flex flex-row items-center space-x-2" href="/">
-				<img class="h-10 md:h-12" alt="Wishlist Logo" src={logo} />
-				<span class="text-primary-900-50-token text-2xl font-bold md:text-3xl">Wishlist</span>
-			</a>
 		</div>
 	</svelte:fragment>
 

src/routes/+layout.svelte

@@ -2,7 +2,14 @@
 	import "../app.postcss";
 
 	import { afterNavigate, beforeNavigate } from "$app/navigation";
-	import { AppShell, Modal, Toast, storePopup, type ModalComponent, initializeStores } from "@skeletonlabs/skeleton";
+	import {
+		AppShell,
+		Modal,
+		Toast,
+		storePopup,
+		type ModalComponent,
+		initializeStores
+	} from "@skeletonlabs/skeleton";
 	import { computePosition, autoUpdate, flip, shift, offset, arrow } from "@floating-ui/dom";
 
 	import NavBar from "$lib/components/navigation/NavBar.svelte";
@@ -19,16 +26,18 @@
 	export let data: LayoutData;
 
 	let showNavigationLoadingBar = false;
+	let documentTitle: string | undefined;
 
 	beforeNavigate(() => {
 		showNavigationLoadingBar = true;
 	});
 
 	afterNavigate(() => {
 		showNavigationLoadingBar = false;
+		documentTitle = document?.title;
 	});
 
-    initializeStores();
+	initializeStores();
 
 	onMount(() => {
 		if (window.matchMedia("(display-mode: standalone)").matches) {
@@ -80,6 +89,9 @@
 	</svelte:fragment>
 	<!-- Router Slot -->
 	<div class="px-4 py-4 md:px-12 lg:px-32 xl:px-56">
+		{#if !$isInstalled && documentTitle}
+			<h1 class="h1 pb-2 md:pb-4">{documentTitle}</h1>
+		{/if}
 		<slot />
 	</div>
 

src/routes/+page.svelte

@@ -8,7 +8,6 @@
 </script>
 
 <div class="flex flex-col space-y-4" in:fade>
-	<h1 class="h1">Lists</h1>
 	<ApprovalAlert approvalCount={data.me._count.items} />
 	<UserCard hideCount user={data.me} />
 
@@ -18,5 +17,5 @@
 </div>
 
 <svelte:head>
-	<title>Wishlist</title>
+	<title>Lists</title>
 </svelte:head>

src/routes/admin/groups/[groupId]/+layout@.svelte

@@ -19,7 +19,7 @@
 	};
 </script>
 
-<h1 class="h1">{data.group.name} Group</h1>
+<h1 class="h1 pb-2">{data.group.name} Group</h1>
 
 <TabGroup>
 	{#each tabs as { label, href }, value}

src/routes/claims/+page.svelte

@@ -28,8 +28,6 @@
 	$: items = data.items;
 </script>
 
-<h1 class="h1 pb-4">My Claims</h1>
-
 {#if data.items.length === 0}
 	<div>
 		<p>No items yet</p>

src/routes/wishlists/[username]/+page.svelte

@@ -61,10 +61,6 @@
 	}
 </script>
 
-<h1 class="h1 pb-4">
-	{data.listOwner.isMe ? "My" : `${data.listOwner.name}'s`} Wishes
-</h1>
-
 {#if data.approvals.length > 0}
 	<h2 class="h2 pb-2">Approvals</h2>
 	<div class="flex flex-col space-y-4 pb-2">
@@ -109,8 +105,8 @@
 <!-- Add Item button -->
 {#if data.listOwner.isMe || data.suggestionsEnabled}
 	<button
-		class="z-90 btn variant-ghost-surface fixed right-4 h-16 w-16 rounded-full md:bottom-10 md:right-10"
-		class:bottom-16={$isInstalled}
+		class="z-90 variant-ghost-surface btn fixed right-4 h-16 w-16 rounded-full md:bottom-10 md:right-10 md:h-20 md:w-20"
+		class:bottom-24={$isInstalled}
 		class:bottom-4={!$isInstalled}
 		on:click={() => goto(`${$page.url}/new`)}
 	>

src/routes/wishlists/[username]/new/+page.server.ts

@@ -39,7 +39,7 @@ export const load: PageServerLoad = async ({ locals, params }) => {
 	return {
 		owner: {
 			name: listOwner.name,
-			isMe: params.username === listOwner.username
+			isMe: listOwner.username === session.user.username
 		},
 		suggestion: session.user.username !== params.username,
 		suggestionMethod: config.suggestions.method

src/routes/wishlists/[username]/new/+page.svelte

@@ -26,7 +26,7 @@
 
 {#if data.suggestion && data.suggestionMethod === "approval" && !warningHidden}
 	<div class="pb-4">
-		<aside class="variant-ghost-warning alert">
+		<aside class="alert variant-ghost-warning">
 			<div class="alert-message flex flex-row items-center space-x-4 space-y-0">
 				<span><iconify-icon class="text-4xl" icon="ion:warning" /></span>
 				<div>
@@ -50,5 +50,7 @@
 </form>
 
 <svelte:head>
-	<title>New Wish | {data.owner.isMe ? "My" : `${data.owner.name}'s`} Wishes</title>
+	<title>
+		Create Wish {!data.owner.isMe && `for ${data.owner.name}`}
+	</title>
 </svelte:head>