...

modules/app/src/features/post/FeedViewer.ts

@@ -27,8 +27,7 @@ export function FeedViewer(feedId: Bytes32Hex, startIndexInclusive: bigint = 0n)
 			const response = await sw.calls.getFeed(feedId, oldestPost ? oldestPost.index - 1n : null, -1n, 256n);
 			posts.children(response.map((post) => li().children(PostViewer(post))));
 
-			const oldest = response.at(-1);
-			oldestPost = oldest ?? null;
+			oldestPost = response.at(-1) ?? null;
 			if (!newestPost) {
 				const newest = response.at(0);
 				if (newest) newestPost = newest;

modules/app/src/features/post/PostForm.ts

@@ -7,7 +7,7 @@ import { IEternisProxy } from "@modules/contracts/connect";
 import { zeroPadBytes } from "ethers";
 import { computed, css, fragment, ref, sheet, tags } from "purify-js";
 
-const { form, div, textarea, button, small, input } = tags;
+const { form, div, textarea, button, small, input, details, summary, ul, li, label } = tags;
 
 export function PostForm() {
 	const host = div({ role: "form" });
@@ -18,7 +18,11 @@ export function PostForm() {
 	const textEncoded = computed(() => PostContent.toBytes([{ type: PostContent.Part.TypeMap.Text, value: text.val }]));
 
 	const proxyContracts = computed(() => config.val.networks[0].contracts.EternisProxies);
+	const proxyContractEntries = computed(() => Object.entries(proxyContracts.val));
 	const currentProxyKey = ref("");
+	host.element.onConnect(() =>
+		proxyContractEntries.follow((entries) => (currentProxyKey.val = entries[0]?.[0] ?? ""), true),
+	);
 	const currentProxy = computed(() => proxyContracts.val[currentProxyKey.val]);
 
 	const postForm = form()
@@ -65,24 +69,45 @@ export function PostForm() {
 				),
 			),
 			div({ class: "actions" }).children(
-				button({
-					form: postForm.id,
-				})
-					.role("button")
-					.type("submit")
-					.disabled(computed(() => !currentProxy.val))
-					.children("Post"),
-			),
-			div({ class: "select-proxy" }).children(
-				computed(() =>
-					Object.entries(proxyContracts.val).map(([key, address]) =>
+				div()
+					.role("group")
+					.children(
+						button({
+							form: postForm.id,
+						})
+							.role("button")
+							.type("submit")
+							.disabled(computed(() => !currentProxy.val))
+							.children("Post"),
 						button()
-							.type("button")
 							.role("button")
-							.onclick(() => (currentProxyKey.val = key))
-							.children(key),
+							.children(
+								details().children(
+									summary().children(),
+									ul().children(
+										computed(() =>
+											proxyContractEntries.val.map(([key, address]) =>
+												li().children(
+													label().children(
+														input()
+															.type("radio")
+															.name("proxy")
+															.value(key)
+															.checked(computed(() => currentProxyKey.val === key))
+															.onchange(
+																(event) =>
+																	event.currentTarget.checked &&
+																	(currentProxyKey.val = key),
+															),
+														key,
+													),
+												),
+											),
+										),
+									),
+								),
+							),
 					),
-				),
 			),
 		),
 	);
@@ -124,4 +149,21 @@ const PostFormStyle = sheet(css`
 		overflow-x: hidden;
 		overflow-wrap: break-word;
 	}
+
+	.actions [role="group"] {
+		position: relative;
+	}
+
+	details:has(> ul) {
+		ul {
+			position: absolute;
+			inset-block-start: calc(100% + 0.5em);
+			inset-inline-end: 0;
+			color: var(--back);
+			background-color: var(--front);
+			list-style: none;
+			padding: 0.5em;
+			border-radius: var(--radius);
+		}
+	}
 `);

modules/app/src/styles.ts

@@ -42,23 +42,23 @@ export const globalSheet = sheet(css`
 			box-sizing: border-box;
 		}
 
-		* {
-			color: var(--front);
-			background-color: var(--back);
-		}
-
 		* {
 			margin: 0;
 			padding: 0;
 		}
 
+		body {
+			color: var(--front);
+			background-color: var(--back);
+		}
+
 		[role="textbox"] {
 			all: unset;
 			display: inline-block;
 			padding: 0.75em;
 			border-radius: var(--radius);
 			border: none;
-			background-color: hsl(from var(--back) h s calc(calc(1 - l) * 0.5) / 0.1);
+			background-color: color-mix(in srgb, var(--back) 95%, currentColor);
 			font: inherit;
 
 			&:focus-visible {
@@ -69,6 +69,11 @@ export const globalSheet = sheet(css`
 				resize: vertical;
 				min-height: 4.5em;
 			}
+
+			&:disabled {
+				cursor: not-allowed;
+				opacity: 0.5;
+			}
 		}
 
 		[role="button"] {
@@ -81,6 +86,61 @@ export const globalSheet = sheet(css`
 			color: var(--back);
 			font: inherit;
 			cursor: pointer;
+
+			&:disabled {
+				cursor: not-allowed;
+				opacity: 0.5;
+			}
+		}
+
+		[role="group"] {
+			display: inline-flex;
+			gap: 1px;
+
+			& > *:not(:first-child) {
+				border-start-start-radius: 0;
+				border-end-start-radius: 0;
+			}
+
+			& > *:not(:last-child) {
+				border-start-end-radius: 0;
+				border-end-end-radius: 0;
+			}
+		}
+
+		label:has(> input:is([type="checkbox"], [type="radio"])) {
+			display: inline-flex;
+			inline-size: fit-content;
+			gap: 0.5ch;
+			align-items: center;
+
+			& > input {
+				position: absolute;
+				pointer-events: none;
+				scale: 0;
+			}
+
+			&::before {
+				content: "";
+				display: block;
+				inline-size: 1.25em;
+				aspect-ratio: 1;
+				border: solid 0.15em currentColor;
+				padding: 0.1em;
+			}
+
+			&:has(> input[type="checkbox"])::before {
+				border-radius: var(--radius);
+			}
+
+			&:has(> input[type="radio"])::before {
+				border-radius: var(--radius-full);
+			}
+
+			&:has(> input:checked)::before {
+				background-color: currentColor;
+				background-clip: content-box;
+			}
 		}
 	}
 `);