ok better, i sleep now fr

DeepDoge · Nov 16, 2024 · 95b2b2e · 95b2b2e
1 parent 38cdbf6
commit 95b2b2e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 29 deletions.
diff --git 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
@@ -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;