many things idk idc

TODO.md

@@ -1,6 +1,5 @@
 # TODO
 
--   [ ] PostForm should have parts, not just text like on X or Facebook or Instagram. It should be more like a page builder.
 -   [x] Instead of using tx.origin, Sender contract should give the sender address to the Indexer contract, and there should be permissions on the indexer contract that allows or disallows Sender contracts to index post in behalf of you.
 -   [x] On the left side of header we should have feed list similar to X lists, at the top there is the default home list for your home feed.
 -   [x] We should be able to add any feed we want to the list. So we should have a add to feed popover and button something.

project/app/src/app/layout/Layout.ts

@@ -13,15 +13,13 @@ const { div } = tags;
 const documentScroller = document.scrollingElement ?? document.body;
 
 export function Layout() {
-	console.log("hello");
 	const mainElement = Main().element;
-
-	console.log(mainElement);
+	const headerElement = Header().effect(usePart("header")).element;
 
 	return div()
 		.id("app")
 		.effect(useScope(LayoutCss))
-		.children(Header().effect(usePart("header")), mainElement)
+		.children(headerElement, mainElement)
 		.effect((appElement) => {
 			function scroll(isOpen: boolean, behavior: ScrollBehavior) {
 				const left = isOpen ? 0 : Number.MAX_SAFE_INTEGER;
@@ -53,15 +51,30 @@ export function Layout() {
 			let isStaticCache = true;
 			function updateStaticState() {
 				const scrollProgress = getScrollProgress();
-				const isStatic =
-					scrollProgress === 1 || appElement.scrollWidth === appElement.clientWidth;
+
+				const isScrollable = appElement.scrollWidth !== appElement.clientWidth;
+
+				// TODO: Need something like this becuase having overflow: auto; on the app breaks sticky content
+				// Basically if im gonna make the app scrollable it should be when im scrolling already somehow
+				// worse case i might make the whole thing not scroll based and would use pointer events
+				/* console.log("isScrollable", isScrollable);
+				if (!isScrollable) {
+					appElement.style.removeProperty("overflow");
+					headerElement.style.removeProperty("display");
+				} else {
+					appElement.style.overflow = "unset";
+					headerElement.style.display = "none";
+					mainElement.style.inlineSize = "calc(100% + 1px)";
+				} */
+
+				const isStatic = scrollProgress === 1 || !isScrollable;
 
 				if (isStatic === isStaticCache) return isStatic;
 
 				if (isStatic) {
 					const scrollY = mainElement.scrollTop;
-					mainElement.style.overflow = "visible";
-					mainElement.style.blockSize = "";
+					mainElement.style.removeProperty("overflow");
+					mainElement.style.removeProperty("block-size");
 					documentScroller.scrollTop = scrollY;
 					isStaticCache = true;
 				} else {
@@ -94,6 +107,7 @@ export function Layout() {
 
 			appElement.addEventListener("scroll", handleScroll);
 			function handleScroll() {
+				console.log("scroll");
 				updateStaticState();
 			}
 
@@ -114,28 +128,6 @@ const LayoutCss = css`
 		align-items: start;
 		grid-template-columns: minmax(0, 20em) 1fr;
 		grid-template-rows: auto;
-
-		@container body (inline-size < ${layoutBrakpoint}) {
-			overflow: overlay;
-			grid-template-columns: 100% 100%;
-
-			&::-webkit-scrollbar {
-				display: none;
-			}
-
-			[data-part="header"] {
-				animation: hide-header-scroll linear;
-				animation-timeline: scroll(x);
-				z-index: -1;
-			}
-
-			@keyframes hide-header-scroll {
-				to {
-					scale: 0.95;
-					translate: 100% 0;
-				}
-			}
-		}
 	}
 
 	[data-part="header"] {
@@ -145,4 +137,29 @@ const LayoutCss = css`
 
 		overflow: clip;
 	}
+
+	@container body (inline-size < ${layoutBrakpoint}) {
+		:scope {
+			overflow: auto;
+			position: relative;
+			grid-template-columns: 100% 100%;
+		}
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+
+		[data-part="header"] {
+			animation: hide-header-scroll linear;
+			animation-timeline: scroll(x);
+			z-index: -1;
+		}
+
+		@keyframes hide-header-scroll {
+			to {
+				scale: 0.95;
+				translate: 100% 0;
+			}
+		}
+	}
 `;

project/app/src/app/layout/Main.ts

@@ -10,30 +10,30 @@ import { BackSvg } from "~/shared/svgs/BackSvg";
 import { CloseSvg } from "~/shared/svgs/CloseSvg";
 import { css, useScope } from "~/shared/utils/css";
 
+// TODO: seperate route and post section into two different files later.
+
 const { section, main, header, a, strong } = tags;
 
 export function Main() {
 	return main()
 		.effect(useScope(MainCss))
 		.children(
-			section({ class: "route" })
-				.ariaLabel(router.route.derive((route) => route?.title() ?? null))
-				.children(
-					header().children(
-						a({ class: "icon back" })
-							.ariaHidden("true")
-							.href(menuSearchParam.toHref("open"))
-							.children(BackSvg()),
-						router.route.derive((route) => {
-							if (!route) return null;
-							return strong().textContent(route.title());
-						}),
-					),
-					router.route.derive((route) => {
-						return route?.render() ?? null;
-					}),
-				),
-
+			router.route.derive((route) => {
+				if (!route) return null;
+				return section({ class: "route" })
+					.ariaLabel(route.title)
+					.children(
+						header().children(
+							a({ class: "icon back" })
+								.ariaHidden("true")
+								.href(menuSearchParam.toHref("open"))
+								.children(BackSvg()),
+							strong().textContent(route.title),
+							route.renderHeaderEnd(),
+						),
+						route.render(),
+					);
+			}),
 			computed(() => ({ searchParam: postSearchParam.val, config: config.val })).derive(
 				({ searchParam, config }) =>
 					awaited(
@@ -49,10 +49,7 @@ export function Main() {
 											.ariaHidden("true")
 											.href(postSearchParam.toHref(null))
 											.children(CloseSvg()),
-										router.route.derive((route) => {
-											if (!route) return null;
-											return strong().textContent("Post");
-										}),
+										strong().textContent("Post"),
 									),
 									PostThread(post),
 								);
@@ -69,8 +66,6 @@ export const MainCss = css`
 		display: block flex;
 		align-content: start;
 
-		gap: 0.5em;
-
 		background-color: var(--base);
 		min-block-size: 100dvb;
 	}
@@ -80,18 +75,41 @@ export const MainCss = css`
 		gap: 1em;
 		align-content: start;
 
-		background-color: color-mix(in srgb, var(--base), var(--pop) 5%);
+		header {
+			position: sticky;
+			inset-block-start: 0;
+
+			display: block flex;
+			align-items: center;
+			gap: 1em;
+
+			background-color: color-mix(in srgb, var(--base), var(--pop) 2.5%);
+			padding-inline: 1em;
+			padding-block: 1.25em;
+
+			.icon {
+				inline-size: 1.5em;
+				border-radius: 50%;
+				aspect-ratio: 1;
+				color: color-mix(in srgb, var(--base), var(--pop) 50%);
+			}
+
+			strong {
+				font-size: 1.1em;
+			}
+		}
 
 		&.route {
 			flex: 1.5;
 
-			&:has(a svg) {
-				@container body (inline-size >= ${layoutBrakpoint}) {
-					grid-template-columns: auto;
+			header {
+				margin-inline: 0.5em;
+				margin-block-start: 0.5em;
+			}
 
-					a:has(svg) {
-						display: none;
-					}
+			@container body (inline-size >= ${layoutBrakpoint}) {
+				header .icon {
+					display: none;
 				}
 			}
 		}
@@ -106,6 +124,8 @@ export const MainCss = css`
 			position: sticky;
 			inset-block-start: 0;
 
+			background-color: color-mix(in srgb, var(--base), var(--pop) 1%);
+
 			@container main (inline-size < 60em) {
 				position: fixed;
 				inset-block: 0;
@@ -115,21 +135,4 @@ export const MainCss = css`
 			}
 		}
 	}
-
-	section header {
-		display: block grid;
-		grid-template-columns: 1.5em auto;
-		align-items: center;
-		gap: 1em;
-
-		a:has(svg) {
-			border-radius: 50%;
-			aspect-ratio: 1;
-			color: color-mix(in srgb, var(--base), var(--pop) 50%);
-		}
-
-		strong {
-			font-size: 1.1em;
-		}
-	}
 `;

project/app/src/features/feed/components/FeedForm.ts

@@ -153,7 +153,8 @@ export function FeedForm(feedIds: readonly FeedId[]) {
 const PostFormCss = css`
 	:scope {
 		display: block grid;
-		background-color: color-mix(in srgb, var(--base), var(--pop) 7.5%);
+		background-color: color-mix(in srgb, transparent, var(--base) 90%);
+		backdrop-filter: blur(3px);
 
 		padding-inline: 1em;
 		padding-block: 0.5em;
@@ -177,7 +178,7 @@ const PostFormCss = css`
 		gap: 0.5em;
 		padding: 0.5em;
 
-		background-color: color-mix(in srgb, var(--base), var(--pop) 10%);
+		background-color: color-mix(in srgb, var(--base), var(--pop) 5%);
 
 		.actions {
 			align-self: start;

project/app/src/features/feed/components/FeedGroupAddFormPopoverButton.ts

@@ -38,7 +38,7 @@ export function FeedGroupAddFormPopoverButton(params: {
 			}),
 		);
 
-	return button()
+	return button({ class: "button" })
 		.effect(() => {
 			document.body.append(popover.element);
 			return () => {

project/app/src/features/feed/components/FeedScroller.ts

@@ -7,7 +7,7 @@ import { ReloadSvg } from "~/shared/svgs/ReloadSvg";
 import { css, useScope } from "~/shared/utils/css";
 import { useOnVisible } from "~/shared/utils/effects/useOnVisible";
 
-const { div, section, button } = tags;
+const { ul, li, section, button } = tags;
 
 export function FeedScroller(feed: Feed) {
 	const host = section()
@@ -17,7 +17,7 @@ export function FeedScroller(feed: Feed) {
 		})
 		.ariaLabel("Feed");
 
-	const posts = div({ class: "posts" });
+	const posts = ul();
 
 	let nextGenerator: ReturnType<typeof feed.nextGenerator> | undefined;
 
@@ -39,7 +39,9 @@ export function FeedScroller(feed: Feed) {
 		// Give animation time to play.
 		await new Promise((resolve) => setTimeout(resolve, Math.max(0, 1000 - passed)));
 
-		const newFragment = fragment(result.value?.map((post) => PostView(post)) ?? null);
+		const newFragment = fragment(
+			result.value?.map((post) => li().children(PostView(post))) ?? null,
+		);
 
 		if (clear) {
 			posts.element.replaceChildren(newFragment);
@@ -107,14 +109,24 @@ export function FeedScroller(feed: Feed) {
 const FeedScrollerCss = css`
 	:scope {
 		display: block grid;
-		gap: 2em;
+		gap: 0.5em;
 		align-content: start;
 	}
 
-	.posts {
+	ul {
 		display: block grid;
-		gap: 1em;
 		align-content: start;
+
+		gap: 0.5em;
+
+		list-style: none;
+	}
+
+	li {
+		padding-inline: 1.5em;
+		padding-block: 2em;
+
+		background-color: color-mix(in srgb, transparent, currentColor 5%);
 	}
 
 	button.load {