Various fixes (#46)

* add store for pwa installed

* fix add button on mobile

* fix alert size on mobile

* replace state when selecting tabs

* fix

src/lib/components/admin/SMTPAlert.svelte

@@ -5,20 +5,19 @@
 
 {#if !$smtpAcknowledged && !smtpEnable}
 	<aside class="variant-ghost-warning alert mb-2">
-		<div>
-			<span class="text-4xl">⚠️</span>
-		</div>
-		<div class="alert-message">
-			<span class="text-2xl font-bold">SMTP is not enabled</span>
-			<p>
-				While email setup is not a requirement, users will not be able to reset their passwords via
-				self-service and you will have to manually send out links to reset passwords.
-			</p>
+		<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>
+				<span class="text-xl font-bold">SMTP is not enabled</span>
+				<p class="text-sm">
+					While email setup is not a requirement, users will not be able to reset their passwords
+					via self-service and you will have to manually send out links to reset passwords.
+				</p>
+			</div>
 		</div>
 		<div class="alert-actions">
-			<a class="variant-filled-warning btn" href="/admin" target="_blank">View docs</a>
-			<button class="variant-ghost-error btn-icon" on:click={() => ($smtpAcknowledged = true)}>
-				<iconify-icon icon="ion:close" />
+			<button class="variant-filled-warning btn btn-sm" on:click={() => ($smtpAcknowledged = true)}>
+				Dismiss
 			</button>
 		</div>
 	</aside>

src/lib/components/navigation/BottomTabs.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
 	import { page } from "$app/stores";
+	import { isInstalled } from "$lib/stores/is-installed";
 	import { TabGroup, Tab } from "@skeletonlabs/skeleton";
-	import { getContext } from "svelte";
-	import type { Writable } from "svelte/store";
 
 	export let navItems: NavItem[];
 
-	let isInstalled = getContext<Writable<boolean>>("nav");
 	let tabsBottomNav: number;
 
 	tabsBottomNav = navItems.findIndex((n) => $page.url.pathname.startsWith(n.href));

src/lib/components/navigation/NavBar.svelte

@@ -4,13 +4,10 @@
 	import { page } from "$app/stores";
 	import NavMenu from "./NavMenu.svelte";
 	import type { User } from "lucia-auth";
-	import { getContext } from "svelte";
-	import type { Writable } from "svelte/store";
+	import { isInstalled } from "$lib/stores/is-installed";
 
 	export let navItems: NavItem[];
 	export let user: User | null;
-
-	let isInstalled = getContext<Writable<boolean>>("nav");
 </script>
 
 <AppBar background="bg-surface-200-700-token" padding="py-2 md:py-4 px-4">

src/lib/components/wishlists/ApprovalAlert.svelte

@@ -4,13 +4,17 @@
 
 {#if approvalCount > 0}
 	<aside class="variant-ghost-primary alert">
-		<div><iconify-icon class="text-4xl" icon="ion:information-circle" /></div>
-		<div class="alert-message">
-			<span class="text-2xl font-bold">Approval Needed</span>
-			<p>You have {approvalCount} item{approvalCount > 1 ? "s" : ""} awaiting your approval</p>
+		<div class="alert-message flex flex-row items-center space-x-4 space-y-0">
+			<div><iconify-icon class="text-4xl" icon="ion:information-circle" /></div>
+			<div class="flex flex-col">
+				<span class="text-xl font-bold">Approval Needed</span>
+				<p class="text-sm">
+					You have {approvalCount} item{approvalCount > 1 ? "s" : ""} awaiting your approval
+				</p>
+			</div>
 		</div>
 		<div class="alert-actions">
-			<a class="btn variant-filled-primary" href="/wishlists/me">View Wishes</a>
+			<a class="btn btn-sm variant-filled-primary" href="/wishlists/me">View Wishes</a>
 		</div>
 	</aside>
 {/if}

src/lib/components/wishlists/ItemForm.svelte

@@ -104,13 +104,21 @@
 		/>
 	</label>
 
-	<div class="flex flex-row space-x-4">
-		<button class="btn variant-filled-primary w-min" disabled={loading} type="submit">
-			{buttonText}
-		</button>
-		<button class="variant-ghost-secondary btn w-min" type="button" on:click={() => history.back()}>
-			Cancel
-		</button>
+	<div class="flex flex-col space-y-2">
+		<span class="text-sm">*required field</span>
+
+		<div class="flex flex-row space-x-4">
+			<button class="btn variant-filled-primary w-min" disabled={loading} type="submit">
+				{buttonText}
+			</button>
+			<button
+				class="variant-ghost-secondary btn w-min"
+				type="button"
+				on:click={() => history.back()}
+			>
+				Cancel
+			</button>
+		</div>
 	</div>
 </div>
 

src/lib/stores/is-installed.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const isInstalled = writable<boolean>(false);

src/routes/+layout.svelte

@@ -14,9 +14,9 @@
 	import GroupSelectModal from "$lib/components/modals/GroupSelectModal.svelte";
 	import InviteUserModal from "$lib/components/modals/InviteUserModal.svelte";
 	import type { LayoutData } from "./$types";
-	import { writable, type Writable } from "svelte/store";
-	import { getContext, onMount, setContext } from "svelte";
+	import { onMount } from "svelte";
 	import BottomTabs from "$lib/components/navigation/BottomTabs.svelte";
+	import { isInstalled } from "$lib/stores/is-installed";
 
 	export let data: LayoutData;
 
@@ -30,8 +30,6 @@
 		showNavigationLoadingBar = false;
 	});
 
-	setContext("nav", writable<boolean>(false));
-	let isInstalled = getContext<Writable<boolean>>("nav");
 	onMount(() => {
 		if (window.matchMedia("(display-mode: standalone)").matches) {
 			$isInstalled = true;

src/routes/admin/+layout.svelte

@@ -20,7 +20,12 @@
 
 <TabGroup>
 	{#each tabs as { label, href }, value}
-		<Tab name={label} {value} bind:group={selectedTab} on:change={() => goto(`/admin${href}`)}>
+		<Tab
+			name={label}
+			{value}
+			bind:group={selectedTab}
+			on:change={() => goto(`/admin${href}`, { replaceState: true })}
+		>
 			{label}
 		</Tab>
 	{/each}

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

@@ -27,7 +27,7 @@
 			name={label}
 			{value}
 			bind:group={selectedTab}
-			on:change={() => goto(`/admin/groups/${$page.params.groupId}${href}`)}
+			on:change={() => goto(`/admin/groups/${$page.params.groupId}${href}`, { replaceState: true })}
 		>
 			{label}
 		</Tab>

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

@@ -9,6 +9,7 @@
 	import { flip } from "svelte/animate";
 	import { quintOut } from "svelte/easing";
 	import { crossfade } from "svelte/transition";
+	import { isInstalled } from "$lib/stores/is-installed";
 
 	export let data: PageData;
 
@@ -108,7 +109,9 @@
 <!-- Add Item button -->
 {#if data.listOwner.isMe || data.suggestionsEnabled}
 	<button
-		class="z-90 btn variant-ghost-surface fixed bottom-16 right-4 h-16 w-16 rounded-full md:bottom-10 md:right-10"
+		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:bottom-4={!$isInstalled}
 		on:click={() => goto(`${$page.url}/new`)}
 	>
 		<iconify-icon height="32" icon="ion:add" width="32" />

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

@@ -27,17 +27,18 @@
 {#if data.suggestion && data.suggestionMethod === "approval" && !warningHidden}
 	<div class="pb-4">
 		<aside class="variant-ghost-warning alert">
-			<span class="text-4xl">⚠️</span>
-			<div class="alert-message">
-				<span class="text-2xl font-bold">Heads up!</span>
-				<p>
-					You are making a suggestion to {data.owner.name}. {data.owner.name} will need to approve your
-					suggestion before it is added to their list.
-				</p>
+			<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>
+					<span class="text-xl font-bold">Heads up!</span>
+					<p class="text-sm">
+						{data.owner.name} will need to approve your suggestion before it is added to their list.
+					</p>
+				</div>
 			</div>
 			<div class="alert-actions">
-				<button class="variant-ghost-warning btn" on:click={() => (warningHidden = true)}>
-					Acknowledge
+				<button class="variant-ghost-warning btn btn-sm" on:click={() => (warningHidden = true)}>
+					OK
 				</button>
 			</div>
 		</aside>