From 95b2b2e4994f6fa6aece73b8511e7adc125f459d Mon Sep 17 00:00:00 2001
From: Shiba <44804845+DeepDoge@users.noreply.github.com>
Date: Sat, 16 Nov 2024 21:40:27 +0000
Subject: [PATCH] ok better, i sleep now fr

---
 project/app/src/app/layout/Main.ts            | 50 ++++++++-----------
 .../src/features/feed/components/FeedForm.ts  |  2 +-
 2 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/project/app/src/app/layout/Main.ts b/project/app/src/app/layout/Main.ts
index f867313..29435ad 100644
--- a/project/app/src/app/layout/Main.ts
+++ b/project/app/src/app/layout/Main.ts
@@ -1,4 +1,4 @@
-import { computed, ref, tags } from "@purifyjs/core";
+import { awaited, computed, tags } from "@purifyjs/core";
 import { menuSearchParam } from "~/app/layout/routes";
 import { router } from "~/app/router";
 import { layoutBrakpoint } from "~/app/styles";
@@ -18,29 +18,6 @@ const { section, main, header, a, strong } = tags;
 export function Main() {
 	const host = main();
 
-	const post = ref<Post | null>(null);
-	host.effect(() => {
-		const postPromise = computed(() => ({
-			searchParam: postSearchParam.val,
-			config: config.val,
-		})).derive(({ searchParam, config }) => {
-			if (!searchParam) return null;
-			return Post.loadWithSearchParam(searchParam, config);
-		});
-
-		return postPromise.follow((promise) => {
-			if (!promise) {
-				post.val = null;
-				return;
-			}
-
-			promise.then((resultPost) => {
-				if (promise !== postPromise.val) return;
-				post.val = resultPost;
-			});
-		}, true);
-	});
-
 	return host.effect(useScope(MainCss)).children(
 		match(router.route)
 			.if((route) => route !== null)
@@ -62,9 +39,16 @@ export function Main() {
 					),
 			)
 			.else(() => null),
-		match(post)
-			.if((post) => post !== null)
-			.then((post) => {
+		match(postSearchParam)
+			.if((searchParam) => searchParam !== null)
+			.then((searchParam) => {
+				const postPromise = computed(() => ({
+					searchParam: searchParam.val,
+					config: config.val,
+				})).derive(({ searchParam, config }) =>
+					Post.loadWithSearchParam(searchParam, config),
+				);
+
 				return section({ class: "post" })
 					.role("complementary")
 					.ariaLabel("Post")
@@ -76,7 +60,15 @@ export function Main() {
 								.children(CloseSvg()),
 							strong().textContent("Post"),
 						),
-						post.derive(PostThread),
+						postPromise.derive((postPromise) => {
+							return awaited(
+								postPromise.then((post) => {
+									if (!post) return null; // not found
+									return PostThread(post);
+								}),
+								null, // loading
+							);
+						}),
 					);
 			})
 			.else(() => null),
@@ -90,6 +82,8 @@ export const MainCss = css`
 		display: block flex;
 		align-content: start;
 
+		/* gap: 0.25em; */
+
 		background-color: var(--base);
 		min-block-size: 100dvb;
 	}
diff --git a/project/app/src/features/feed/components/FeedForm.ts b/project/app/src/features/feed/components/FeedForm.ts
index 051c91c..e61de85 100644
--- a/project/app/src/features/feed/components/FeedForm.ts
+++ b/project/app/src/features/feed/components/FeedForm.ts
@@ -153,7 +153,7 @@ export function FeedForm(feedIds: readonly FeedId[]) {
 const PostFormCss = css`
 	:scope {
 		display: block grid;
-		background-color: color-mix(in srgb, transparent, var(--base) 90%);
+		background-color: color-mix(in srgb, var(--base), var(--pop) 1.5%);
 		backdrop-filter: blur(3px);
 
 		padding-inline: 1em;