fix(web): better menu

web/index.html

@@ -97,14 +97,16 @@
 			display: block;
 		}
 		hr.sep {
+			border: 1px solid #bf616a70;
+		}
+		hr.sticky {
+			position: sticky;
 			z-index: 100;
 			margin-top: 0;
 			padding-top: 0;
 			margin-bottom: 0;
 			padding-bottom: 0;
-			border: 1px solid #bf616a70;
 			top: 1.65rem;
-			position: sticky;
 		}
 		div.sticky {
 			z-index: 100;
@@ -244,6 +246,9 @@
 		.depth-r {
 			margin-left: .5em;
 		}
+		.only-on-mobile {
+			display: none;
+		}
 		@media screen and (max-width: 786px) {
 			.depth-r {
 				margin-left: .125em;
@@ -251,9 +256,15 @@
 			.ml-1-r {
 				margin-left: 0;
 			}
+			.only-on-mobile {
+				display: inherit;
+			}
 			.hidden-on-mobile {
 				display: none;
 			}
+			div.col-side {
+				padding-right: .25em;
+			}
 			main {
 				margin: 0;
 			}

web/src/app.rs

@@ -59,10 +59,12 @@ pub fn App() -> impl IntoView {
 			/* TODO kinda jank with the float but whatever, will do for now */
 			<input type="submit" class="mr-2 rev" on:click=move |_| set_menu.set(!menu.get()) value="menu" style="float: right" />
 		</nav>
-		<hr class="sep" />
+		<hr class="sep sticky" />
 		<div class="container mt-2 pt-2" >
 			<div class="two-col" >
 				<div class="col-side sticky pb-s" class:hidden=move || menu.get() >
+					<Navigator />
+					<hr class="mt-1 mb-1" />
 					<LoginBox
 						token_tx=set_token
 						userid_tx=set_userid
@@ -70,13 +72,14 @@ pub fn App() -> impl IntoView {
 						server_tl=server_tl
 					/>
 					<hr class="mt-1 mb-1" />
-					<Navigator />
+					<div class:hidden=move || !auth.present() >
-					<hr class="mt-1 mb-1" />
+						{move || if advanced.get() { view! {
-					{move || if advanced.get() { view! {
+							<AdvancedPostBox advanced=set_advanced/>
-						<AdvancedPostBox advanced=set_advanced/>
+						}} else { view! {
-					}} else { view! {
+							<PostBox advanced=set_advanced/>
-						<PostBox advanced=set_advanced/>
+						}}}
-					}}}
+						<hr class="only-on-mobile sep mb-0 pb-0" />
+					</div>
 				</div>
 				<div class="col-main" class:w-100=move || menu.get() >
 					<Router // TODO maybe set base="/web" ?
@@ -107,13 +110,13 @@ pub fn App() -> impl IntoView {
 											<Route path="/web/home" view=move || view! { <TimelinePage name="home" tl=home_tl /> } />
 											<Route path="/web/server" view=move || view! { <TimelinePage name="server" tl=server_tl /> } />
 
-											<Route path="/web/config" view=move || view! { <ConfigPage setter=set_config /> } />
 											<Route path="/web/about" view=AboutPage />
+											<Route path="/web/config" view=move || view! { <ConfigPage setter=set_config /> } />
+											<Route path="/web/config/dev" view=DebugPage />
 
 											<Route path="/web/users/:id" view=move || view! { <UserPage tl=user_tl /> } />
 											<Route path="/web/objects/:id" view=move || view! { <ObjectPage tl=context_tl /> } />
 
-											<Route path="/web/debug" view=DebugPage />
 											<Route path="/web/search" view=SearchPage />
 
 											<Route path="/" view=move || view! { <Redirect path="/web" /> } />

web/src/components/object.rs

@@ -90,6 +90,7 @@ pub fn Object(object: crate::Object) -> impl IntoView {
 	let sensitive = object.sensitive().unwrap_or_default();
 	let addressed = object.addressed();
 	let public = addressed.iter().any(|x| x.as_str() == apb::target::PUBLIC);
+	let external_url = object.url().id().unwrap_or_else(|| oid.clone());
 	let attachments = object.attachment()
 		.map(|x| view! { <Attachment object=x sensitive=sensitive /> })
 		.collect_view();
@@ -143,7 +144,7 @@ pub fn Object(object: crate::Object) -> impl IntoView {
 					<a class="clean hover ml-s" href={Uri::web(FetchKind::Object, object.id().unwrap_or_default())}>
 						<DateTime t=object.published() />
 					</a>
-					<sup><small><a class="clean ml-s" href={oid.clone()} target="_blank">"↗"</a></small></sup>
+					<sup><small><a class="clean ml-s" href={external_url} target="_blank">"↗"</a></small></sup>
 				</td>
 			</tr>
 		</table>

web/src/control.rs

@@ -19,11 +19,14 @@ pub fn Navigator() -> impl IntoView {
 					<a href={move|| format!("/web/search?q={}", query.get())}><input type="submit" value="go" /></a>
 				</td>
 			</tr>
+		</table>
+		<table class="align w-100">
 			<tr><td colspan="2"><a href="/web/home"><input class="w-100" type="submit" class:hidden=move || !auth.present() value="home timeline" /></a></td></tr>
 			<tr><td colspan="2"><a href="/web/server"><input class="w-100" type="submit" value="server timeline" /></a></td></tr>
-			<tr><td colspan="2"><a href="/web/about"><input class="w-100" type="submit" value="about" /></a></td></tr>
+			<tr>
-			<tr><td colspan="2"><a href="/web/config"><input class="w-100" type="submit" value="config" /></a></td></tr>
+				<td class="w-50"><a href="/web/about"><input class="w-100" type="submit" value="about" /></a></td>
-			<tr><td colspan="2"><a href="/web/debug"><input class="w-100" type="submit" value="debug" class:hidden=move|| !auth.present() /></a></td></tr>
+				<td class="w-50"><a href="/web/config"><input class="w-100" type="submit" value="config" /></a></td>
+			</tr>
 		</table>
 	}
 }
@@ -65,7 +68,7 @@ pub fn PostBox(advanced: WriteSignal<bool>) -> impl IntoView {
 	let followers_ref: NodeRef<html::Input> = create_node_ref();
 	let private_ref: NodeRef<html::Input> = create_node_ref();
 	view! {
-		<div class:hidden=move || !auth.present() >
+		<div>
 			{move ||
 				reply.reply_to.get().map(|r| {
 					let actor_strip = post_author(&r).map(|x| view! { <ActorStrip object=x /> });
@@ -165,7 +168,7 @@ pub fn AdvancedPostBox(advanced: WriteSignal<bool>) -> impl IntoView {
 	let cc_ref: NodeRef<html::Input> = create_node_ref();
 	let bcc_ref: NodeRef<html::Input> = create_node_ref();
 	view! {
-		<div class:hidden=move || !auth.present() >
+		<div>
 							 
 				<table class="align w-100">
 					<tr>

web/src/page.rs

@@ -53,46 +53,34 @@ pub fn ConfigPage(setter: WriteSignal<Config>) -> impl IntoView {
 	view! {
 		<div>
 			<Breadcrumb>config</Breadcrumb>
+			<p class="center mt-0"><small>config is saved in your browser local storage</small></p>
 			<p>
-				<input type="checkbox" title="likes" class="mr-1"
+				<span title="embedded video attachments will loop like gifs if this option is enabled">
-					prop:checked=get_cfg!(loop_videos)
+					<input type="checkbox" class="mr-1"
-					on:input=set_cfg!(loop_videos)
+						prop:checked=get_cfg!(loop_videos)
-				/> loop videos
+						on:input=set_cfg!(loop_videos)
+					/> loop videos
+				</span>
 			</p>
 			<p>
-				<input type="checkbox" title="likes" class="mr-1"
+				<span title="any post with a summary is considered to have a content warning, and collapsed by default if this option is enabled">
-					prop:checked=get_cfg!(collapse_content_warnings)
+					<input type="checkbox" class="mr-1"
-					on:input=set_cfg!(collapse_content_warnings)
+						prop:checked=get_cfg!(collapse_content_warnings)
-				/> collapse content warnings
+						on:input=set_cfg!(collapse_content_warnings)
+					/> collapse content warnings
+				</span>
 			</p>
-			<div class="mt-s mb-s" >
+			<hr />
-				<table class="ma-3 center">
+			<p><code title="unchecked elements won't show in timelines">filters</code></p>
-					<tr>
+			<ul>
-						<th></th>
+					<li><span title="like activities"><input type="checkbox" prop:checked=get_cfg!(filter likes) on:input=set_cfg!(filter likes) />" likes"</span></li>
-						<th>filters</th>
+					<li><span title="create activities with object"><input type="checkbox" prop:checked=get_cfg!(filter creates) on:input=set_cfg!(filter creates)/>" creates"</span></li>
-					</tr>
+					<li><span title="announce activities with object"><input type="checkbox" prop:checked=get_cfg!(filter announces) on:input=set_cfg!(filter announces) />" announces"</span></li>
-					<tr>
+					<li><span title="follow, accept and reject activities"><input type="checkbox" prop:checked=get_cfg!(filter follows) on:input=set_cfg!(filter follows) />" follows"</span></li>
-						<td><input type="checkbox" prop:checked=get_cfg!(filter likes) on:input=set_cfg!(filter likes) /></td>
+					<li><span title="objects without a related activity to display"><input type="checkbox" prop:checked=get_cfg!(filter orphans) on:input=set_cfg!(filter orphans) />" orphans"</span></li>
-						<td>likes</td>
+			</ul>
-					</tr>
+			<hr />
-					<tr>
+			<p><a href="/web/config/dev" title="access the devtools page">devtools</a></p>
-						<td><input type="checkbox" prop:checked=get_cfg!(filter creates) on:input=set_cfg!(filter creates)/></td>
-						<td>creates</td>
-					</tr>
-					<tr>
-						<td><input type="checkbox" prop:checked=get_cfg!(filter announces) on:input=set_cfg!(filter announces) /></td>
-						<td>announces</td>
-					</tr>
-					<tr>
-						<td><input type="checkbox" prop:checked=get_cfg!(filter follows) on:input=set_cfg!(filter follows) /></td>
-						<td>follows</td>
-					</tr>
-					<tr>
-						<td><input type="checkbox" prop:checked=get_cfg!(filter orphans) on:input=set_cfg!(filter orphans) /></td>
-						<td>orphans</td>
-					</tr>
-				</table>
-			</div>
 		</div>
 	}
 }
@@ -359,7 +347,7 @@ pub fn DebugPage() -> impl IntoView {
 	let (query, set_query) = create_signal("".to_string());
 	view! {
 		<div>
-			<Breadcrumb back=true>debug</Breadcrumb>
+			<Breadcrumb back=true>config :: devtools</Breadcrumb>
 			<div class="mt-1" >
 				<form on:submit=move|ev| {
 					ev.prevent_default();