Sub icons and truncated subscribers in search results

src/search.rs

@@ -1,5 +1,5 @@
 // CRATES
-use crate::utils::{cookie, error, param, template, val, Post, Preferences};
+use crate::utils::{cookie, error, format_num, format_url, param, template, val, Post, Preferences};
 use crate::{client::json, RequestExt};
 use askama::Template;
 use hyper::{Body, Request, Response};
@@ -18,8 +18,9 @@ struct SearchParams {
 struct Subreddit {
 	name: String,
 	url: String,
+	icon: String,
 	description: String,
-	subscribers: i64,
+	subscribers: String,
 }
 
 #[derive(Template)]
@@ -81,11 +82,22 @@ async fn search_subreddits(q: &str) -> Vec<Subreddit> {
 				// For each subreddit from subreddit list
 				Some(list) => list
 					.iter()
-					.map(|subreddit| Subreddit {
+					.map(|subreddit| {
+						// Fetch subreddit icon either from the community_icon or icon_img value
+						let community_icon: &str = subreddit["data"]["community_icon"].as_str().map_or("", |s| s.split('?').collect::<Vec<&str>>()[0]);
+						let icon = if community_icon.is_empty() {
+							val(&subreddit, "icon_img")
+						} else {
+							community_icon.to_string()
+						};
+
+						Subreddit {
 							name: val(subreddit, "display_name_prefixed"),
 							url: val(subreddit, "url"),
+							icon: format_url(&icon),
 							description: val(subreddit, "public_description"),
-						subscribers: subreddit["data"]["subscribers"].as_f64().unwrap_or_default() as i64,
+							subscribers: format_num(subreddit["data"]["subscribers"].as_f64().unwrap_or_default() as i64),
+						}
 					})
 					.collect::<Vec<Subreddit>>(),
 				_ => Vec::new(),

static/style.css

@@ -522,7 +522,26 @@ button.submit:hover > svg { stroke: var(--accent); }
 
 .search_subreddit { 
 	padding: 16px 20px;
-	display: block;
+	display: flex;
+}
+
+.search_subreddit_left {
+	display: flex;
+	align-items: center;
+}
+
+.search_subreddit_left:not(:empty) {
+	margin-right: 10px;
+}
+
+.search_subreddit_left img {
+	width: 35px;
+	height: 35px;
+	border-radius: 100%;
+}
+
+.search_subreddit_right {
+	overflow: auto;
 }
 
 a.search_subreddit:hover {

templates/search.html

@@ -34,12 +34,15 @@
 		<div id="search_subreddits">
 			{% for subreddit in subreddits %}
 			<a href="{{ subreddit.url }}" class="search_subreddit">
+				<div class="search_subreddit_left">{% if subreddit.icon != "" %}<img src="{{ subreddit.icon }}" alt="r/{{ subreddit.name }} icon">{% endif %}</div>
+				<div class="search_subreddit_right">
 					<p class="search_subreddit_header"> 
 						<span class="search_subreddit_name">{{ subreddit.name }}</span>
 						<span class="dot">&bull;</span>
 						<span class="search_subreddit_members">{{ subreddit.subscribers }} Members</span>
 					</p>
 					<p class="search_subreddit_description">{{ subreddit.description }}</p>
+				</div>
 			</a>
 			{% endfor %}
 		</div>