view: better card handling and truncate title

views/homeview/homeview.templ

@@ -4,6 +4,7 @@ import "github.com/tigorlazuardi/redmage/views/components"
 import "github.com/tigorlazuardi/redmage/views"
 import "github.com/tigorlazuardi/redmage/views/utils"
 import "strconv"
+import "fmt"
 
 templ Home(c *views.Context, data Data) {
 	@components.Doctype() {
@@ -27,8 +28,8 @@ templ HomeContent(c *views.Context, data Data) {
 					<div
 						class="flex content-center gap-8"
 						hx-get="/"
-						hx-target="main"
+						hx-target="#recently-added-images"
-						hx-select="main"
+						hx-select="#recently-added-images"
 						hx-swap="outerHTML"
 						hx-trigger="change"
 						hx-include="this"
@@ -41,17 +42,24 @@ templ HomeContent(c *views.Context, data Data) {
 						@recentRangeInput(c)
 						@nsfwToggle(c, data)
 					</div>
-					if data.TotalImages == 0 {
+					<div id="recently-added-images">
-						<h2 class="mt-4">There are no recently added images in the current time range.</h2>
+						if data.TotalImages == 0 {
-					}
+							<h2 class="mt-4">There are no recently added images in the current time range.</h2>
-					for _, recently := range data.RecentlyAddedImages {
-						<div class="divider"></div>
-						<h2 class="mt-4">{ recently.Device.Name }</h2>
-						for _, subreddit := range recently.Subreddits {
-							<h4>{ subreddit.Subreddit.Name } - { strconv.Itoa(len(subreddit.Images)) } images</h4>
-							@RecentlyAddedImageList(subreddit.Images, 0)
 						}
-					}
+						for _, recently := range data.RecentlyAddedImages {
+							<div class="divider"></div>
+							<h2 class="mt-4">{ recently.Device.Name }</h2>
+							for _, subreddit := range recently.Subreddits {
+								<h4>
+									<a class="text-primary" href={ templ.SafeURL(fmt.Sprintf("/subreddits/details/%s?device=%d", subreddit.Subreddit.Name, recently.Device.ID)) }>
+										{ subreddit.Subreddit.Name }
+									</a>
+									- { strconv.Itoa(len(subreddit.Images)) } images
+								</h4>
+								@RecentlyAddedImageList(subreddit.Images, 0)
+							}
+						}
+					</div>
 				</section>
 				<section>
 					<h1>Subreddits</h1>
@@ -99,11 +107,11 @@ templ nsfwToggle(c *views.Context, data Data) {
 		class="select select-ghost select-bordered"
 	>
 		if (c.Request.URL.Query().Get("sfw") == "1") || data.SFW {
-			<option value="0">NSFW - ON</option>
+			<option value="0">NSFW - Show</option>
-			<option selected="selected" value="1">NSFW - Off</option>
+			<option selected="selected" value="1">NSFW - Hide</option>
 		} else {
-			<option selected="selected" value="0">NSFW - ON</option>
+			<option selected="selected" value="0">NSFW - Show</option>
-			<option value="1">NSFW - Off</option>
+			<option value="1">NSFW - Hide</option>
 		}
 	</select>
 }

views/homeview/recently_added_image.templ

@@ -37,7 +37,7 @@ templ RecentlyAddedImageCard(data *models.Image, opts ImageCardOption) {
 				<a
 					href={ templ.URL(data.PostURL) }
 					class="card-title font-bold underline text-base text-primary"
-				>{ data.Title }</a>
+				>{ truncateTitle(data.Title) }</a>
 			}
 			<a class="text-primary underline" href={ templ.URL(data.PosterURL) }>{ data.Poster }</a>
 			<div>
@@ -57,6 +57,13 @@ templ RecentlyAddedImageCard(data *models.Image, opts ImageCardOption) {
 	</div>
 }
 
+func truncateTitle(title string) string {
+	if len(title) > 50 {
+		return title[:50] + "..."
+	}
+	return title
+}
+
 templ RecentlyAddedImageList(images models.ImageSlice, opts ImageCardOption) {
 	<div class="overflow-x-auto flex gap-4 p-6 shadow-inner bg-base-300 rounded-2xl w-[85vw] md:w-full">
 		for _, data := range images {