Use supabase

29 files changed, 273 insertions, 344 deletions

diff --git a/src/app.html b/src/app.html
index d69f799..c0ce439 100644
--- a/src/app.html
+++ b/src/app.html
@@ -8,7 +8,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#ffffff" />
 
-		%svelte.head%
+		%sveltekit.head%
 
 		<link rel="manifest" href="/manifest.webmanifest" />
 	</head>
@@ -18,7 +18,7 @@
 			<p>Please enable Javascript to use this forum.</p>
 		</noscript>
 		<div class="grid grid-cols-12 auto-rows-[minmax(3rem, auto)] gap-2" id="forum">
-			%svelte.body%
+			%sveltekit.body%
 		</div>
 	</body>
 </html>
diff --git a/src/lib/components/footer/footer.svelte b/src/lib/components/footer/footer.svelte
index e2db937..f24c54b 100644
--- a/src/lib/components/footer/footer.svelte
+++ b/src/lib/components/footer/footer.svelte
@@ -7,10 +7,10 @@
 </script>
 
 <footer
-	class="col-start-1 col-span-12 border-t-2 border-t-black border-solid"
+	class="col-start-1 col-span-12 border-t border-t-black border-solid"
 	title={$_('footer.title')}
 >
-	<ul class="p-0">
+	<ul class="py-2">
 		<li class="inline m-1">{@html $_('footer.license', { values: { licenseUrl } })}</li>
 		<li class="inline m-1">{$_('footer.choose_language')}: <LanguageSelector /></li>
 	</ul>
diff --git a/src/lib/components/forum/forum.svelte b/src/lib/components/forum/forum.svelte
index bcd23a3..e9841a9 100644
--- a/src/lib/components/forum/forum.svelte
+++ b/src/lib/components/forum/forum.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Forum } from '$lib/data/types';
+	import { topicsForForum } from '$lib/stores/topics';
 
 	export let forum: Forum;
 
@@ -7,9 +8,11 @@
 	import TopicSummary from '$lib/components/topic_summary/topic_summary.svelte';
 </script>
 
-<h1>{forum.glyph} {$_(forum.label)}</h1>
-<ul>
-	{#each forum.topics as topic}
-		<TopicSummary {topic} />
-	{/each}
+<h1 class="py-4 font-bold text-3xl">{forum.glyph} {$_(forum.label)}</h1>
+<ul class="list-disc list-inside pl-2">
+  {#if forum.topics}
+    {#each forum.topics as topic}
+      <TopicSummary {topic} />
+    {/each}
+  {/if}
 </ul>
diff --git a/src/lib/components/forum_list/forum_list.svelte b/src/lib/components/forum_list/forum_list.svelte
index 250e36e..d1518bd 100644
--- a/src/lib/components/forum_list/forum_list.svelte
+++ b/src/lib/components/forum_list/forum_list.svelte
@@ -4,14 +4,16 @@
 	export let forums: Forum[];
 
 	import { _ } from 'svelte-i18n';
-	$: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
+  $: sortedForums = forums
+  .slice()
+  .sort((a, b) => a.position - b.position);
 </script>
 
-<ul>
+<ul class="p-0 pl-2">
 	{#each sortedForums as forum}
-		<li>
-			<a href="/f/{forum.id}">
-				<span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
+		<li class="block text-left mb-5">
+			<a class="no-underline text-blue-600 visited:text-purple-500" href="/f/{forum.id}">
+				<span aria-hidden="true" class="block text-2xl {forum.glyph}">{forum.glyph}</span>
 				<span class="navigation-label">{$_(forum.label)}</span>
 			</a>
 		</li>
@@ -19,26 +21,7 @@
 </ul>
 
 <style>
-	ul {
-		padding: 0;
-	}
-
-	li {
-		display: block;
-		text-align: left;
-		margin-bottom: 20px;
-	}
-
-	.navigation-glyph {
-		font-size: 1.5rem;
-		display: block;
-	}
-
 	.☽ {
 		font-size: 2rem;
 	}
-
-	a {
-		text-decoration: none;
-	}
 </style>
diff --git a/src/lib/components/glyph/glyph.svelte b/src/lib/components/glyph/glyph.svelte
index 0559b98..0726752 100644
--- a/src/lib/components/glyph/glyph.svelte
+++ b/src/lib/components/glyph/glyph.svelte
@@ -5,9 +5,9 @@
 	export let uuid: string;
 </script>
 
-<div class="glyphicon" role="img" aria-label={$_('glyph.title')} title={$_('glyph.title')}>
+<div class="inline-block w-12 h-12 mt-1 bg-white border border-black border-solid p-0.5 box-content glyphicon" role="img" aria-label={$_('glyph.title')} title={$_('glyph.title')}>
 	{#each getGlyphHash(uuid) as fragment}
-		<span class={fragment.glyph} style="color: {fragment.color} ">
+		<span class="block text-2xl float-left w-6 h-6 text-center leading-6 {fragment.glyph}" style="color: {fragment.color} ">
 			{fragment.glyph}
 		</span>
 	{/each}
@@ -16,22 +16,6 @@
 <style>
 	.glyphicon {
 		border: 1px solid black;
-		display: inline-block;
-		font-size: 1.4rem;
-		height: 48px;
-		margin-top: 5px;
-		width: 48px;
-		background-color: white;
-		padding: 2px;
-	}
-
-	span {
-		display: block;
-		float: left;
-		width: 24px;
-		height: 24px;
-		text-align: center;
-		line-height: 24px;
 	}
 
 	.☽ {
diff --git a/src/lib/components/header/header.svelte b/src/lib/components/header/header.svelte
index 3d08913..93f828b 100644
--- a/src/lib/components/header/header.svelte
+++ b/src/lib/components/header/header.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <header
-	class="col-start-1 col-span-12 border-b-2 border-b-black border-solid"
+	class="col-start-1 col-span-12 border-b border-b-black border-solid"
 	title={$_('header.title')}
 >
 	<ul class="p-0">
diff --git a/src/lib/components/post/post.svelte b/src/lib/components/post/post.svelte
index 535f7ac..b0f99e4 100644
--- a/src/lib/components/post/post.svelte
+++ b/src/lib/components/post/post.svelte
@@ -15,26 +15,30 @@
 	class="post-meta"
 	title={$_('post.metadata_title', { values: { count: index + 1, total: count } })}
 >
-	<Glyph uuid={post.author.id} />
-	<span class="h-card">
-		{$_('post.author_credit')}
-		<a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
-	</span>
+	<Glyph uuid={post.author_id} />
+  {#if post.author}
+    <span class="h-card">
+      {$_('post.author_credit')}
+      <a href="/a/{post.author.handle}" class="p-nickname u-url underline text-blue-600 visited:text-purple-500">{post.author.handle}</a>.
+    </span>
+  {:else}
+    <span>????</span>
+  {/if}
 	<time role="presentation" class="dt-published" datetime={timestampToISO(post.created_at)}>
-		<a title={$_('post.permalink_title')} href="/p/{post.id}">
+		<a title={$_('post.permalink_title')} class="underline text-blue-600 visited:text-purple-500" href="/p/{post.id}">
 			{timestampToISO(post.created_at)}
 		</a>
 	</time>
 	{#if post.topic}
 		<span>
-			({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
+			({$_('post.topic_location')} <a class="text-blue-600 underline visited:text-purple-500" href="/t/{post.topic.id}">{post.topic.title}</a>.)
 		</span>
 	{/if}
 </aside>
 <article
-	class="e-content"
+	class="e-content whitespace-pre"
 	title={$_('post.title', {
-		values: { count: index + 1, total: count, author: post.author.handle }
+    values: { count: index + 1, total: count, author: post.author?.handle || '????' }
 	})}
 >
 	{post.text}
diff --git a/src/lib/components/tag/tag.svelte b/src/lib/components/tag/tag.svelte
index b3fe806..1744094 100644
--- a/src/lib/components/tag/tag.svelte
+++ b/src/lib/components/tag/tag.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-	import type { Tag } from '$lib/data/types';
+	import type { Tag, Topic } from '$lib/data/types';
 
 	export let tag: Tag;
+	export let topics: Topic[];
 
 	import { _ } from 'svelte-i18n';
 	import TopicSummary from '$lib/components/topic_summary/topic_summary.svelte';
 </script>
 
-<h1>{$_('tag.title')}: {tag.id}</h1>
-<ul>
-	{#each tag.topics as topic}
+<h1 class="py-4 font-bold text-3xl">{$_('tag.title')}: {tag}</h1>
+<ul class="list-disc list-inside pl-2">
+	{#each topics as topic}
 		<TopicSummary {topic} />
 	{/each}
 </ul>
diff --git a/src/lib/components/topic/topic.svelte b/src/lib/components/topic/topic.svelte
index ec89876..0715857 100644
--- a/src/lib/components/topic/topic.svelte
+++ b/src/lib/components/topic/topic.svelte
@@ -7,41 +7,43 @@
 	import Post from '$lib/components/post/post.svelte';
 	import { readableTime } from '$lib/utils/readable_time';
 
-	$: remainingTime = topic.updated_at + topic.ttl - Date.now();
+	$: remainingTime = new Date(topic.updated_at).getTime() + topic.ttl - Date.now();
 	$: remaining = readableTime(remainingTime);
 </script>
 
 <div class="h-entry" title={$_('topic.title')}>
-	<h1 class="p-name">{topic.title}</h1>
+	<h1 class="py-4 font-bold text-3xl p-name">{topic.title}</h1>
 	<aside class="topic-meta" title={$_('topic.metadata_title')}>
 		{#if topic.forum}
 			<span class="topic-location">
 				{$_('topic.category_location')}
-				<a href="/f/{topic.forum.id}" class="p-category">
+				<a href="/f/{topic.forum.id}" class="p-category underline text-blue-600 visited:text-purple-500">
 					{topic.forum.glyph}
 					{$_(topic.forum.label)}
 				</a>.
 			</span>
 		{/if}
 		<span class="topic-ttl">
-			<a class="u-url u-uid" title={$_('topic.permalink_title')} href="/t/{topic.id}">
+			<a class="u-url u-uid underline text-blue-600 visited:text-purple-500" title={$_('topic.permalink_title')} href="/t/{topic.id}">
 				({$_('topic.remaining_time', {
 					values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) }
 				})})
-			</a>.
+			</a>
 		</span>
 	</aside>
-	{#if topic.tags.length > 0}
+	{#if topic.tags}
 		<aside class="topic-tags" title={$_('topic.tags_title')}>
 			{$_('topic.tags_location')}
 			{#each topic.tags as tag}
-				<a href="/g/{tag.id}" class="p-category">
-					{tag.id}<span class="tag-weight">({tag.weight})</span>
-				</a>{' '}
+				<a href="/g/{tag.tag}" class="p-category underline text-blue-600 visited:text-purple-500">
+					{tag.tag}<span class="tag-weight">({tag.count})</span></a
+      >{' '}
 			{/each}
 		</aside>
 	{/if}
-	{#each topic.posts as post, index}
-		<Post {post} {index} count={topic.posts.length} />
-	{/each}
+	{#if topic.posts}
+    {#each topic.posts as post, index}
+      <Post {post} {index} count={topic.posts.length} />
+    {/each}
+	{/if}
 </div>
diff --git a/src/lib/components/topic_summary/topic_summary.svelte b/src/lib/components/topic_summary/topic_summary.svelte
index 337a064..d54a195 100644
--- a/src/lib/components/topic_summary/topic_summary.svelte
+++ b/src/lib/components/topic_summary/topic_summary.svelte
@@ -6,13 +6,13 @@
 	import { _ } from 'svelte-i18n';
 	import { readableTime } from '$lib/utils/readable_time';
 
-	$: remainingTime = topic.updated_at + topic.ttl - Date.now();
+	$: remainingTime = new Date(topic.updated_at).getTime() + topic.ttl - Date.now();
 	$: remaining = readableTime(remainingTime);
 </script>
 
 <li class="h-entry" title={$_('topic.title')}>
 	<span class="p-name">
-		<a class="u-url u-uid" title={$_('topic.permalink_title')} href="/t/{topic.id}">
+		<a class="u-url u-uid underline text-blue-600 visited:text-purple-500" title={$_('topic.permalink_title')} href="/t/{topic.id}">
 			{topic.title}
 		</a></span
 	>
@@ -22,6 +22,3 @@
 		})})
 	</span>
 </li>
-
-<style>
-</style>
diff --git a/src/lib/config/apollo.ts b/src/lib/config/apollo.ts
deleted file mode 100644
index a8b27ef..0000000
--- a/src/lib/config/apollo.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import fetch from 'cross-fetch';
-import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client/core';
-import { apollo as apolloConfig } from './config';
-
-const cache = new InMemoryCache();
-
-export const client = new ApolloClient({
-	cache,
-	link: new HttpLink({
-		uri: apolloConfig.uri,
-    headers: {
-      apiKey: apolloConfig.key
-    },
-		fetch
-	}),
-	...apolloConfig
-});
diff --git a/src/lib/config/config.ts b/src/lib/config/config.ts
index 2bf9bc1..9590e88 100644
--- a/src/lib/config/config.ts
+++ b/src/lib/config/config.ts
@@ -8,11 +8,9 @@ const internals = {
  * file, otherwise it won't work.
  */
 
-export const apollo = {
-	uri: import.meta.env.VITE_APOLLO_SERVER,
-	key: import.meta.env.VITE_APOLLO_KEY,
-	name: 'forum',
-	version: internals.version
+export const supabase = {
+	url: import.meta.env.VITE_SUPABASE_URL,
+	key: import.meta.env.VITE_SUPABASE_KEY
 };
 
 export const version = internals.version;
diff --git a/src/lib/config/env.dist b/src/lib/config/env.dist
index 2d95266..5100f41 100644
--- a/src/lib/config/env.dist
+++ b/src/lib/config/env.dist
@@ -1,2 +1,2 @@
-VITE_APOLLO_SERVER=http://location_of_apollo_server
-VITE_APOLLO_KEY=""
+VITE_SUPABASE_URL=""
+VITE_SUPABASE_KEY=""
diff --git a/src/lib/data/queries.ts b/src/lib/data/queries.ts
deleted file mode 100644
index 4def052..0000000
--- a/src/lib/data/queries.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { gql } from '@apollo/client/core';
-
-export const GET_FORUMS = gql`
-	query GetForums {
-		forumsCollection {
-      edges {
-        node {
-          id
-          glyph
-          label
-          position
-        }
-      }
-    }
-	}
-`;
-
-export const GET_FORUM = gql`
-	query GetForum($id: ID!) {
-		forum(id: $id) {
-			id
-			glyph
-			label
-			position
-			topics {
-				id
-				title
-				updated_at
-				ttl
-			}
-		}
-	}
-`;
-
-export const GET_TAG = gql`
-	query GetTag($id: ID!) {
-		tag(id: $id) {
-			id
-			topics {
-				id
-				title
-				updated_at
-				ttl
-			}
-		}
-	}
-`;
-
-export const GET_TOPIC = gql`
-	query GetTopic($id: ID!) {
-		topic(id: $id) {
-			id
-			title
-			updated_at
-			ttl
-			forum {
-				id
-				glyph
-				label
-			}
-			tags {
-				id
-				weight
-			}
-			posts {
-				id
-				text
-				created_at
-				author {
-					id
-					handle
-				}
-			}
-		}
-	}
-`;
-
-export const GET_POST = gql`
-	query GetPost($id: ID!) {
-		post(id: $id) {
-			id
-			text
-			created_at
-			author {
-				id
-				handle
-			}
-			topic {
-				id
-				title
-			}
-		}
-	}
-`;
diff --git a/src/lib/data/types.d.ts b/src/lib/data/types.d.ts
index 2498bf7..aae2f80 100644
--- a/src/lib/data/types.d.ts
+++ b/src/lib/data/types.d.ts
@@ -8,9 +8,10 @@ export type Topic = {
 	title: string;
 	ttl: number;
 	updated_at: number;
-	tags: Tag[];
-	posts: Post[];
-	forum: Forum;
+  forum_id: string;
+  forum?: Forum;
+  posts?: Post[];
+  tags?: Tag[];
 };
 
 export type Post = {
@@ -18,14 +19,15 @@ export type Post = {
 	created_at: number;
 	title: string;
 	text: string;
-	topic: Topic;
-	author: Author;
+	topic_id: string;
+	topic?: Topic;
+  author_id: string;
+  author?: User;
 };
 
 export type Tag = {
-	id: string;
-	weight: number;
-	topics: Topic[];
+	tag: string;
+	count: number;
 };
 
 export type Forum = {
@@ -36,7 +38,7 @@ export type Forum = {
 	topics: Topic[];
 };
 
-export type Author = {
+export type User = {
 	id: string;
 	handle: string;
 };
diff --git a/src/lib/stores/apollo.ts b/src/lib/stores/apollo.ts
deleted file mode 100644
index c75dd87..0000000
--- a/src/lib/stores/apollo.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { ApolloError } from '@apollo/client/core';
-import { readable } from 'svelte/store';
-import { client } from '$lib/config/apollo';
-import type { DocumentNode, ApolloQueryResult } from '@apollo/client/core';
-
-import type { Readable } from 'svelte/store';
-
-/*
- * This is a generic store for use with apollo
- */
-
-type ApolloStoreConfiguration<Type> = {
-	key: string;
-	query: DocumentNode;
-	initialValue?: Type | void;
-	variables?: object;
-};
-
-type ApolloStoreState<Type> = {
-	loading: boolean;
-	data: Type | void;
-	error: Error | void;
-};
-
-export const store = function store<Type>({
-	key,
-	query,
-	initialValue = null,
-	variables = {}
-}: ApolloStoreConfiguration<Type>): Readable<ApolloStoreState<Type>> {
-	const initialState: ApolloStoreState<Type> = {
-		loading: true,
-		data: initialValue,
-		error: undefined
-	};
-
-	return readable(initialState, (set) => {
-		const handleError = function (error: Error) {
-			return set({
-				loading: false,
-				data: initialValue,
-				error
-			});
-		};
-
-		client.watchQuery({ query, variables }).subscribe(
-			(result: ApolloQueryResult<Type>) => {
-				if (result.errors) {
-					const error = new ApolloError({ graphQLErrors: result.errors });
-					return handleError(error);
-				}
-
-				set({
-					loading: false,
-					data: result.data[key].edges.map((item) => item.node),
-					error: undefined
-				});
-			},
-			(error: Error) => handleError(error)
-		);
-	});
-};
diff --git a/src/lib/stores/forums.ts b/src/lib/stores/forums.ts
index 0ff09f7..40a3f2c 100644
--- a/src/lib/stores/forums.ts
+++ b/src/lib/stores/forums.ts
@@ -1,9 +1,18 @@
-import { store } from './apollo';
-import { GET_FORUM, GET_FORUMS } from '$lib/data/queries';
+import { createClient } from '@supabase/supabase-js'
+import { single, collection } from './supabase';
+import { supabase } from '$lib/config/config';
 
 import type { Forum } from '$lib/data/types';
 
-export const getForum = (id: string) =>
-	store<Forum>({ key: 'forum', query: GET_FORUM, variables: { id } });
-export const getForums = () =>
-	store<Forum[]>({ key: 'forumsCollection', query: GET_FORUMS, initialValue: [] });
+const client = createClient(supabase.url, supabase.key);
+
+export const forum = (id: string, withTopics = false) => single<Forum>(client
+  .from('forums')
+  .select(withTopics ? `*, 
+    topics (
+      *
+    )
+  `: '*' )
+  .eq('id', id),
+  null);
+export const forums = collection<Forum>(client.from('forums').select('*'), []);
diff --git a/src/lib/stores/posts.ts b/src/lib/stores/posts.ts
index 718e1e5..f592dca 100644
--- a/src/lib/stores/posts.ts
+++ b/src/lib/stores/posts.ts
@@ -1,7 +1,23 @@
-import { store } from './apollo';
-import { GET_POST } from '$lib/data/queries';
+import { createClient } from '@supabase/supabase-js'
+import { single, collection } from './supabase';
+import { supabase } from '$lib/config/config';
 
 import type { Post } from '$lib/data/types';
 
-export const getPost = (id: string) =>
-	store<Post>({ key: 'post', query: GET_POST, variables: { id } });
+const client = createClient(supabase.url, supabase.key);
+
+export const post = (id: string, withTopic = false) => single<Post>(client
+  .from('posts')
+  .select(withTopic ? `*, 
+    topic:topic_id (
+      *
+    )
+  `: '*' )
+  .eq('id', id),
+  null);
+export const postsForTopic = (id: string) => collection<Post>(client
+  .from('posts')
+  .select('*')
+  .eq('topic_id', id)
+  .order('created_at', { ascending: true }),
+  []);
diff --git a/src/lib/stores/response_builder.ts b/src/lib/stores/response_builder.ts
new file mode 100644
index 0000000..1e12243
--- /dev/null
+++ b/src/lib/stores/response_builder.ts
@@ -0,0 +1,37 @@
+/**
+ * Utilities to build responses
+ */
+
+interface AnyError {
+  message: string
+};
+
+export type StoreState<Type> = {
+	loading: boolean;
+	data: Type | void;
+	error: AnyError | void;
+};
+
+export function initialResponse<T> (initialState: T): StoreState<T> {
+  return {
+    loading: true,
+    data: initialState,
+    error: undefined
+  };
+}
+
+export function errorResponse<T> (error: AnyError): StoreState<T> {
+  return {
+    loading: false,
+    data: undefined,
+    error
+  };
+}
+
+export function response<T> (data: T): StoreState<T> {
+  return {
+    loading: false,
+    data,
+    error: undefined
+  };
+}
diff --git a/src/lib/stores/supabase.ts b/src/lib/stores/supabase.ts
new file mode 100644
index 0000000..804141f
--- /dev/null
+++ b/src/lib/stores/supabase.ts
@@ -0,0 +1,38 @@
+import { readable } from 'svelte/store';
+import { initialResponse, errorResponse, response } from './response_builder';
+
+import type { Readable } from 'svelte/store';
+import type { PostgrestFilterBuilder } from '@supabase/postgrest-js';
+import type { StoreState } from './response_builder';
+
+export function collection<T> (query: PostgrestFilterBuilder<T>, initialValue: T[]): Readable<StoreState<T[]>> {
+
+  return readable(initialResponse<T[]>(initialValue), (set) => {
+
+    (async function() {
+      const { data, error } = await query;
+
+      if (error) {
+        return set(errorResponse<T[]>(error));
+      }
+
+      set(response<T[]>(data));
+    })()
+  });
+}
+
+export function single<T> (query: PostgrestFilterBuilder<T>, initialValue: T): Readable<StoreState<T>> {
+
+  return readable(initialResponse<T>(initialValue), (set) => {
+
+    (async function() {
+      const { data, error } = await query.single();
+
+      if (error) {
+        return set(errorResponse<T>(error));
+      }
+
+      set(response<T>(data));
+    })()
+  });
+}
diff --git a/src/lib/stores/tags.ts b/src/lib/stores/tags.ts
index c96da2d..0b528e8 100644
--- a/src/lib/stores/tags.ts
+++ b/src/lib/stores/tags.ts
@@ -1,6 +1,13 @@
-import { store } from './apollo';
-import { GET_TAG } from '$lib/data/queries';
+import { createClient } from '@supabase/supabase-js'
+import { collection } from './supabase';
+import { supabase } from '$lib/config/config';
 
 import type { Tag } from '$lib/data/types';
 
-export const getTag = (id: string) => store<Tag>({ key: 'tag', query: GET_TAG, variables: { id } });
+const client = createClient(supabase.url, supabase.key);
+
+export const tagsForTopic = (id: string) => collection<Tag>(client
+  .from('topic_tags')
+  .select('*')
+  .eq('topic_id', id),
+  []);
diff --git a/src/lib/stores/topics.ts b/src/lib/stores/topics.ts
index 0e39769..04c1e9e 100644
--- a/src/lib/stores/topics.ts
+++ b/src/lib/stores/topics.ts
@@ -1,7 +1,32 @@
-import { store } from './apollo';
-import { GET_TOPIC } from '$lib/data/queries';
+import { createClient } from '@supabase/supabase-js'
+import { single, collection } from './supabase';
+import { supabase } from '$lib/config/config';
 
 import type { Topic } from '$lib/data/types';
 
-export const getTopic = (id: string) =>
-	store<Topic>({ key: 'topic', query: GET_TOPIC, variables: { id } });
+const client = createClient(supabase.url, supabase.key);
+
+export const topic = (id: string, withPosts = false) => single<Topic>(client
+  .from('topics')
+  .select(withPosts ? `*, 
+    forum: forums (*),
+    tags: topic_tags (*),
+    posts (
+      *,
+      author:author_id (*)
+    )
+  `: '*' )
+  .eq('id', id),
+  null);
+export const topicsForForum = (id: string) => collection<Topic>(client
+  .from('topics')
+  .select('*')
+  .eq('forum_id', id),
+  []);
+export const topicsForTag = (id: string) => collection<Topic>(client
+  .from('topics')
+  .select(`
+    *,tags!inner(*)
+  `)
+  .eq('tags.tag', id),
+  []);
diff --git a/src/lib/stores/users.ts b/src/lib/stores/users.ts
new file mode 100644
index 0000000..2a56cb5
--- /dev/null
+++ b/src/lib/stores/users.ts
@@ -0,0 +1,13 @@
+import { createClient } from '@supabase/supabase-js'
+import { single } from './supabase';
+import { supabase } from '$lib/config/config';
+
+import type { User } from '$lib/data/types';
+
+const client = createClient(supabase.url, supabase.key);
+
+export const user = (id: string) => single<User>(client
+  .from('users')
+  .select('*')
+  .eq('id', id),
+  null);
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 0077810..16ae5dc 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -5,16 +5,13 @@
 	import { isLoading } from 'svelte-i18n';
 	import { _ } from 'svelte-i18n';
 
-	import { getForums } from '$lib/stores/forums';
+	import { forums } from '$lib/stores/forums';
 
 	import ErrorBlock from '$lib/components/error_block/error_block.svelte';
 	import ForumList from '$lib/components/forum_list/forum_list.svelte';
 	import Header from '$lib/components/header/header.svelte';
 	import Loader from '$lib/components/loader/loader.svelte';
 	import Footer from '$lib/components/footer/footer.svelte';
-
-	$: store = getForums();
-	$: forums = $store.data;
 </script>
 
 {#if $isLoading}
@@ -25,17 +22,17 @@
 		<slot />
 	</main>
 	<nav
-		class="col-start-1 row-start-2 border-r-2 border-2-black border-solid"
+		class="col-start-1 row-start-2 border-r border-r-black border-solid"
 		title={$_('forum_list.title')}
 	>
-		{#if $store.loading}
+		{#if $forums.loading}
 			<Loader />
 		{/if}
-		{#if $store.error}
+		{#if $forums.error}
 			<ErrorBlock message={$_('forum_list.error.unavailable')} />
 		{/if}
-		{#if forums}
-			<ForumList {forums} />
+		{#if $forums.data}
+			<ForumList forums={$forums.data} />
 		{/if}
 	</nav>
 	<Footer />
diff --git a/src/routes/a/[id].svelte b/src/routes/a/[id].svelte
index aeca142..6f5a3db 100644
--- a/src/routes/a/[id].svelte
+++ b/src/routes/a/[id].svelte
@@ -1,8 +1,6 @@
 <script lang="ts" context="module">
 	export const load = ({
-		page: {
-			params: { id }
-		}
+    params: { id }
 	}) => ({ props: { id } });
 </script>
 
diff --git a/src/routes/f/[id].svelte b/src/routes/f/[id].svelte
index fc103d2..103e8f8 100644
--- a/src/routes/f/[id].svelte
+++ b/src/routes/f/[id].svelte
@@ -1,8 +1,6 @@
 <script lang="ts" context="module">
 	export const load = ({
-		page: {
-			params: { id }
-		}
+    params: { id }
 	}) => ({ props: { id } });
 </script>
 
@@ -14,21 +12,20 @@
 
 	export let id: string;
 
-	import { getForum } from '$lib/stores/forums';
-	$: store = getForum(id);
-	$: forum = $store.data;
+	import { forum } from '$lib/stores/forums';
+	$: response = forum(id, true);
 </script>
 
 <svelte:head>
 	<title>{$_(`forum.name.${id}`)}, {$_('forum.forum')}</title>
 </svelte:head>
 
-{#if $store.loading}
+{#if $response.loading}
 	<Loader />
 {/if}
-{#if $store.error}
+{#if $response.error}
 	<ErrorBlock message={$_('forum.error.unavailable')} />
 {/if}
-{#if forum}
-	<Forum {forum} />
+{#if $response.data}
+	<Forum forum={$response.data} />
 {/if}
diff --git a/src/routes/g/[id].svelte b/src/routes/g/[id].svelte
index 0419362..2033f14 100644
--- a/src/routes/g/[id].svelte
+++ b/src/routes/g/[id].svelte
@@ -1,33 +1,30 @@
 <script lang="ts" context="module">
 	export const load = ({
-		page: {
-			params: { id }
-		}
+    params: { id }
 	}) => ({ props: { id } });
 </script>
 
 <script lang="ts">
 	import { _ } from 'svelte-i18n';
-	import { getTag } from '$lib/stores/tags';
+	import { topicsForTag } from '$lib/stores/topics';
 	import ErrorBlock from '$lib/components/error_block/error_block.svelte';
 	import Loader from '$lib/components/loader/loader.svelte';
 	import Tag from '$lib/components/tag/tag.svelte';
 	export let id: string;
 
-	$: store = getTag(id);
-	$: tag = $store.data;
+	$: tagResponse = topicsForTag(id);
 </script>
 
 <svelte:head>
 	<title>{id}, {$_('tag.title')}</title>
 </svelte:head>
 
-{#if $store.loading}
+{#if $tagResponse.loading}
 	<Loader />
 {/if}
-{#if $store.error}
+{#if $tagResponse.error}
 	<ErrorBlock message={$_('tag.error.unavailable')} />
 {/if}
-{#if tag}
-	<Tag {tag} />
+{#if $tagResponse.data}
+	<Tag topics={$tagResponse.data} tag={id} />
 {/if}
diff --git a/src/routes/p/[id].svelte b/src/routes/p/[id].svelte
index 8efd8c1..bbf6396 100644
--- a/src/routes/p/[id].svelte
+++ b/src/routes/p/[id].svelte
@@ -1,34 +1,31 @@
 <script lang="ts" context="module">
 	export const load = ({
-		page: {
-			params: { id }
-		}
+    params: { id }
 	}) => ({ props: { id } });
 </script>
 
 <script lang="ts">
 	import { _ } from 'svelte-i18n';
-	import { getPost } from '$lib/stores/posts';
+	import { post } from '$lib/stores/posts';
 	import Post from '$lib/components/post/post.svelte';
 	import ErrorBlock from '$lib/components/error_block/error_block.svelte';
 	import Loader from '$lib/components/loader/loader.svelte';
 
 	export let id: string;
 
-	$: store = getPost(id);
-	$: post = $store.data;
+	$: postResponse = post(id, true);
 </script>
 
 <svelte:head>
 	<title>{$_('post.post')}}</title>
 </svelte:head>
 
-{#if $store.loading}
+{#if $postResponse.loading}
 	<Loader />
 {/if}
-{#if $store.error}
+{#if $postResponse.error}
 	<ErrorBlock message={$_('post.error.unavailable')} />
 {/if}
-{#if post}
-	<Post {post} />
+{#if $postResponse.data}
+	<Post post={$postResponse.data} />
 {/if}
diff --git a/src/routes/t/[id].svelte b/src/routes/t/[id].svelte
index d60946b..45cc63e 100644
--- a/src/routes/t/[id].svelte
+++ b/src/routes/t/[id].svelte
@@ -1,15 +1,13 @@
 <script lang="ts" context="module">
 	export const load = ({
-		page: {
-			params: { id }
-		}
+    params: { id }
 	}) => ({ props: { id } });
 </script>
 
 <script lang="ts">
 	import { onDestroy } from 'svelte';
 	import { _ } from 'svelte-i18n';
-	import { getTopic } from '$lib/stores/topics';
+	import { topic } from '$lib/stores/topics';
 	import { disableTopicActions, enableTopicActions } from '$lib/stores/actions';
 
 	import Topic from '$lib/components/topic/topic.svelte';
@@ -18,31 +16,30 @@
 
 	export let id: string;
 
-	$: store = getTopic(id);
-	$: topic = $store.data;
+	$: response = topic(id, true);
 
 	enableTopicActions(id);
 	onDestroy(() => disableTopicActions());
 </script>
 
 <svelte:head>
-	{#if $store.loading}
+	{#if $response.loading}
 		<title>{$_('loader.message')}, {$_('topic.title')}</title>
 	{/if}
-	{#if $store.error}
+	{#if $response.error}
 		<title>{$_('error.generic.title')}, {$_('topic.title')}</title>
 	{/if}
-	{#if topic}
-		<title>{topic.title}, {$_('topic.title')}</title>
+	{#if $response.data}
+		<title>{$response.data.title}, {$_('topic.title')}</title>
 	{/if}
 </svelte:head>
 
-{#if $store.loading}
+{#if $response.loading}
 	<Loader />
 {/if}
-{#if $store.error}
+{#if $response.error}
 	<ErrorBlock message={$_('topic.error.unavailable')} />
 {/if}
-{#if topic}
-	<Topic {topic} />
+{#if $response.data}
+	<Topic topic={$response.data} />
 {/if}