From 76171702069b595f7a3d399ceb081d053a50a56e Mon Sep 17 00:00:00 2001
From: alemi <me@alemi.dev>
Date: Wed, 24 Apr 2024 04:58:46 +0200
Subject: [PATCH] feat(web): expandable images

is it sustainable to create a signal for each image? we'll find out!
---
 web/index.html               |  6 ++++++
 web/src/components/object.rs | 19 +++++++++++++------
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/web/index.html b/web/index.html
index 32d7b87f..bf7c59da 100644
--- a/web/index.html
+++ b/web/index.html
@@ -155,12 +155,18 @@
 			max-height: 2em;
 		}
 		img.attachment {
+			cursor: pointer;
 			height: 10em;
 			width: 100%;
 			border: 5px solid #bf616a;
 			padding: 5px;
 			object-fit: cover;
 		}
+		img.expand {
+			height: unset;
+			max-height: 50vh;
+			object-fit: contain;
+		}
 		div.tl-header {
 			background-color: #bf616a55;
 			color: #bf616a;
diff --git a/web/src/components/object.rs b/web/src/components/object.rs
index 873c5dcb..b1a7c210 100644
--- a/web/src/components/object.rs
+++ b/web/src/components/object.rs
@@ -11,12 +11,19 @@ pub fn Object(object: serde_json::Value) -> impl IntoView {
 	let author_id = object.attributed_to().id().unwrap_or_default();
 	let author = CACHE.get_or(&author_id, serde_json::Value::String(author_id.clone()));
 	let attachments = object.attachment()
-		.map(|x| view! {
-			<p class="center">
-				<a href={x.url().id().unwrap_or_default()} target="_blank">
-					<img class="attachment ml-1" src={x.url().id().unwrap_or_default()} title={x.name().unwrap_or_default().to_string()} />
-				</a>
-			</p>
+		.map(|x| {
+			let (expand, set_expand) = create_signal(false);
+			view! {
+				<p class="center">
+					<img
+						class="attachment ml-1"
+						class:expand=expand
+						src={x.url().id().unwrap_or_default()}
+						title={x.name().unwrap_or_default().to_string()}
+						on:click=move |_| set_expand.set(!expand.get())
+					/>
+				</p>
+			}
 		})
 		.collect_view();
 	let attachments_padding = if object.attachment().is_empty() {