billing

src/routes/(app)/+layout.svelte

@@ -3,19 +3,18 @@
 
 	import Menu from 'lucide-svelte/icons/menu';
 	import Package2 from 'lucide-svelte/icons/package-2';
-	import Search from 'lucide-svelte/icons/search';
 	import CircleUser from 'lucide-svelte/icons/circle-user';
 	import Sun from 'svelte-radix/Sun.svelte';
 	import Moon from 'svelte-radix/Moon.svelte';
 
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
-	import { Input } from '$lib/components/ui/input/index.js';
 	import * as Sheet from '$lib/components/ui/sheet/index.js';
 	import { Button } from '$lib/components/ui/button/index.js';
 
 	import { ModeWatcher, toggleMode } from 'mode-watcher';
 	import { Toaster } from '$lib/components/ui/sonner';
 	import { config } from '$lib';
+	import * as Dialog from '$lib/components/ui/dialog';
 
 	/** @type {import('./$types').LayoutServerData} */
 	export let data;
@@ -24,14 +23,16 @@
 		{ name: 'Dashboard', redirect: '/' },
 		{ name: 'Articles', redirect: '/articles' },
 		{ name: 'Emails', redirect: '/emails' },
-		{ name: 'Website', redirect: '/website' },
+		{ name: 'Website', redirect: '/website' }
 		// { name: 'Analytics', redirect: '##' },
 	];
 
 	async function logout() {
-		fetch("/auth/logout");
+		fetch('/auth/logout');
-		window.location.href = "/auth"
+		window.location.href = '/auth';
 	}
+
+	const is_subscribed = new Date(data.me.subscribed_until) > new Date();
 </script>
 
 <Toaster />
@@ -47,7 +48,9 @@
 				<span class="sr-only">{data.me.name}</span>
 			</a>
 			{#each navs as nav}
-				<a href="{nav.redirect}" class="text-muted-foreground transition-colors hover:text-foreground">{nav.name}</a>
+				<a href={nav.redirect} class="text-muted-foreground transition-colors hover:text-foreground"
+					>{nav.name}</a
+				>
 			{/each}
 		</nav>
 		<Sheet.Root>
@@ -64,7 +67,7 @@
 						<span class="sr-only">{data.me.name}</span>
 					</a>
 					{#each navs as nav}
-						<a href="{nav.redirect}" class="hover:text-foreground">{nav.name}</a>
+						<a href={nav.redirect} class="hover:text-foreground">{nav.name}</a>
 					{/each}
 					<div class="mt-auto">
 						<Button on:click={toggleMode} variant="outline" size="icon">
@@ -103,7 +106,7 @@
 					/>
 				</div>
 			</form> -->
-			<div class="md:ml-0 ml-auto">
+			<div class="ml-auto md:ml-0">
 				Tokens: <span>{data.me.tokens}</span>
 			</div>
 			<DropdownMenu.Root>
@@ -116,8 +119,11 @@
 				<DropdownMenu.Content align="end">
 					<DropdownMenu.Label>My Account</DropdownMenu.Label>
 					<DropdownMenu.Separator />
-					<DropdownMenu.Item href={config.api_url + "/me/billing"}>Billing</DropdownMenu.Item>
+					<DropdownMenu.Item href={config.api_url + '/me/billing'}>Billing</DropdownMenu.Item>
-					<DropdownMenu.Item><a href="mailto:osabic2004@gmail.com?Subject=Youpage.ai support">Support</a></DropdownMenu.Item>
+					<DropdownMenu.Item
+						><a href="mailto:osabic2004@gmail.com?Subject=Youpage.ai support">Support</a
+						></DropdownMenu.Item
+					>
 					<DropdownMenu.Separator />
 					<DropdownMenu.Item on:click={logout}>Logout</DropdownMenu.Item>
 				</DropdownMenu.Content>
@@ -128,3 +134,21 @@
 		<slot />
 	</main>
 </div>
+
+<!-- <Dialog open={true}>
+	<Dialog.Content> -->
+{#if !is_subscribed}
+	<div
+		class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:max-w-[750px] sm:rounded-lg md:w-full"
+	>
+		<p>
+			Oh! It looks like you aren't subscribed. Don't worry. Your site is still up at its normal
+			location and will remain available. But, if you want to manage your articles and signups, then
+			please update your billing information or resubscribe!
+		</p>
+		<Button href="{config.api_url}/me/subscribe">Resubscribe</Button>
+		<Button href="{config.api_url}/me/billing">Manage Billing</Button>
+	</div>
+{/if}
+<!-- </Dialog.Content>
+</Dialog> -->

src/routes/(app)/articles/+page.server.js

@@ -3,9 +3,11 @@ import { message, setError, superValidate, fail } from "sveltekit-superforms";
 import { createFormSchema, editFormSchema } from "./schema";
 import { zod } from "sveltekit-superforms/adapters";
 
+const articlesPerPage = 10;
+
 /** @type {import("./$types").PageServerLoad} */
 export const load = async ({ fetch, url, request }) => {
-    const offset = (Number(url.searchParams.get("page") || 1) - 1) * 10;
+    const offset = (Number(url.searchParams.get("page") || 1) - 1) * articlesPerPage;
     // @ts-ignore
     const blogRes = await fetch(config.api_url + "/blog?mine=true&offset=" + offset, {
         credentials: 'include'

src/routes/(app)/articles/+page.svelte

@@ -12,6 +12,7 @@
 	import { browser } from '$app/environment';
 	import {config} from '$lib';
 	
+	const articlesPerPage = 10;
 
 	/** @type {import("./$types").PageData} */
 	export let data;
@@ -30,7 +31,8 @@
 			});
 	}
 
-	let currentPage = 1;
+	/** @type {Number} */
+	let currentPage;
 
 	onMount(() => {
 		if(!browser) return; 
@@ -61,7 +63,9 @@
 			isLoading = false;
 		}
 	}
-	$: currentPage
+	// $: {
+	// 	console.log(currentPage)
+	// }
 	let isLoading = true;
 </script>
 
@@ -132,7 +136,7 @@
 			</Table.Body>
 		</Table.Root>
 
-		<Pagination.Root count={data.total_articles} perPage={10} let:pages currentPage={currentPage}>
+		<Pagination.Root count={data.total_articles} perPage={articlesPerPage} let:pages currentPage={currentPage}>
 			<Pagination.Content>
 				<!-- <Pagination.Item>
 					<Pagination.PrevButton>

src/routes/(app)/articles/articleQueue.svelte

@@ -5,22 +5,26 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	import { Badge } from "$lib/components/ui/badge";
+	import { browser } from '$app/environment';
 
 
 	/** @type {any[]} */
 	let queue;
 	let open = false;
-
+	let interval;
 	onMount(async () => {
+		if(!browser) return;
 		queue = await fetch('/articles/getQueue').then((x) => x.json());
 	});
 
-	let interval = setInterval(async () => {
+	if(browser) {
+		interval = setInterval(async () => {
 			queue = await fetch('/articles/getQueue').then((x) => x.json());
 		}, 5000);
+	}
 
 	onDestroy(() => {
-		clearInterval(interval);
+		if(interval) clearInterval(interval);
 	});
 </script>