view: images: better horizontal image well component

server/routes/page_home.go

@@ -4,7 +4,6 @@ import (
 	"net/http"
 	"time"
 
-	"github.com/tigorlazuardi/redmage/api"
 	"github.com/tigorlazuardi/redmage/pkg/errs"
 	"github.com/tigorlazuardi/redmage/pkg/log"
 	"github.com/tigorlazuardi/redmage/views"
@@ -19,9 +18,9 @@ func (routes *Routes) PageHome(rw http.ResponseWriter, r *http.Request) {
 
 	vc := views.NewContext(routes.Config, r)
 
-	listSubredditParams := parseSubredditListQuery(r)
+	data.ListSubredditParams.FillFromQuery(r.URL.Query())
-
+	data.ListSubredditParams.Limit = 0
-	list, err := routes.API.ListSubreddits(ctx, listSubredditParams)
+	list, err := routes.API.ListSubreddits(ctx, data.ListSubredditParams)
 	if err != nil {
 		log.New(ctx).Err(err).Error("failed to list subreddits")
 		code, message := errs.HTTPMessage(err)
@@ -33,14 +32,13 @@ func (routes *Routes) PageHome(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	imageListParams := api.ImageListParams{}
+	data.ImageListParams.FillFromQuery(r.URL.Query())
-	imageListParams.FillFromQuery(r.URL.Query())
+	if data.ImageListParams.CreatedAt.IsZero() {
-	if imageListParams.CreatedAt.IsZero() {
+		data.ImageListParams.CreatedAt = time.Now().Add(-time.Hour * 24) // images in the last 24 hours
-		imageListParams.CreatedAt = time.Now().Add(-time.Hour * 24) // images in the last 24 hours
 	}
-	imageListParams.Limit = 0
+	data.ImageListParams.Limit = 0
 
-	imageList, err := routes.API.ImagesListWithDevicesAndSubreddits(ctx, imageListParams)
+	imageList, err := routes.API.ImagesListWithDevicesAndSubreddits(ctx, data.ImageListParams)
 	if err != nil {
 		log.New(ctx).Err(err).Error("failed to list subreddits")
 		code, message := errs.HTTPMessage(err)

views/components/horizontal_image_well.templ

@@ -0,0 +1,9 @@
+package components
+
+templ HorizontalImageWell() {
+	<div class="grid">
+		<div class="overflow-x-auto flex gap-4 p-6 shadow-inner bg-base-300 rounded-2xl scrollbar-track-base-100 scrollbar-thumb-primary scrollbar-thin hover:scrollbar-thumb-base-300">
+			{ children... }
+		</div>
+	</div>
+}

views/homeview/homeview.templ

@@ -3,7 +3,6 @@ package homeview
 import "github.com/tigorlazuardi/redmage/views/components"
 import "github.com/tigorlazuardi/redmage/views"
 import "github.com/tigorlazuardi/redmage/views/utils"
-import "github.com/tigorlazuardi/redmage/models"
 import "strconv"
 import "fmt"
 
@@ -28,9 +27,8 @@ templ HomeContent(c *views.Context, data Data) {
 				@components.ErrorToast(data.Error)
 			} else {
 				<section class="mb-4 mx-auto">
-					<h1 class="mb-4">
+					<h1 class="mb-4">Recently Added</h1>
-						Recently Added 						
+					@filterBar(c, data)
-					</h1>
 					<div id="recently-added-images">
 						if data.TotalImages == 0 {
 							<h2 class="mt-4">There are no recently added images in the current time range.</h2>
@@ -39,20 +37,6 @@ templ HomeContent(c *views.Context, data Data) {
 								{ strconv.FormatInt(data.TotalImages, 10) } Images
 							</h2>
 						}
-						<div
-							id="filter-bar"
-							hx-get="/"
-							hx-target="#recently-added-images"
-							hx-select="#recently-added-images"
-							hx-swap="outerHTML"
-							hx-trigger="change"
-							hx-include="this"
-							hx-push-url="true"
-							class="flex flex-wrap content-center gap-x-8"
-						>
-							@recentRangeInput(c)
-							@nsfwToggle(c, data)
-						</div>
 						for _, recently := range data.RecentlyAddedImages {
 							<div class="divider"></div>
 							<h2 class="mt-4">{ recently.Device.Name }</h2>
@@ -63,7 +47,11 @@ templ HomeContent(c *views.Context, data Data) {
 									</a>
 									- { strconv.Itoa(len(subreddit.Images)) } images
 								</h4>
-								@RecentlyAddedImageList(subreddit.Images, 0)
+								@components.HorizontalImageWell() {
+									for _, data := range subreddit.Images {
+										@components.ImageCard(data, components.HideDevice)
+									}
+								}
 							}
 						}
 					</div>
@@ -82,62 +70,53 @@ templ HomeContent(c *views.Context, data Data) {
 	</main>
 }
 
-templ recentRangeInput(c *views.Context) {
+templ filterBar(c *views.Context, data Data) {
-	<div class="form-control">
+	<div
-		<label class="label gap-4">
+		id="filter-bar"
-			<span class="label-text">Range</span>
+		hx-get="/"
+		hx-target="#recently-added-images"
+		hx-select="#recently-added-images"
+		hx-swap="outerHTML"
+		hx-trigger="change"
+		hx-include="this"
+		hx-push-url="true"
+		class="grid grid-cols-[1fr,4fr] sm:grid-cols-[1fr,4fr,1fr,4fr] items-center gap-4"
+	>
+		@nsfwToggle(data)
+		@recentRangeInput(c.Query.Get("created_at"))
+	</div>
+}
+
+templ recentRangeInput(current string) {
+	<label for="range" class="label">Range</label>
 	<select
-				id="select-range"
+		id="range"
 		name="created_at"
 		class="select select-ghost select-bordered"
 	>
-				@recentlyRangeOption(c, "-10800", "3 Hours")
+		@rangeOption("-10800", "3 Hours", current == "-10800")
-				@recentlyRangeOption(c, "-21600", "6 Hours")
+		@rangeOption("-21600", "6 Hours", current == "-21600")
-				@recentlyRangeOption(c, "-43200", "12 Hours")
+		@rangeOption("-43200", "12 Hours", current == "-43200")
-				@recentlyRangeOption(c, "-86400", "1 Day")
+		@rangeOption("-86400", "1 Day", current == "-86400" || current == "")
-				@recentlyRangeOption(c, "-172800", "2 Days")
+		@rangeOption("-172800", "2 Days", current == "-172800")
-				@recentlyRangeOption(c, "-259200", "3 Days")
+		@rangeOption("-259200", "3 Days", current == "-259200")
-				@recentlyRangeOption(c, "-604800", "7 Days")
+		@rangeOption("-604800", "7 Days", current == "-604800")
-				@recentlyRangeOption(c, "-2592000", "30 Days")
+		@rangeOption("-2592000", "7 Days", current == "-2592000")
 	</select>
-		</label>
-	</div>
 }
 
-templ recentlyRangeOption(c *views.Context, value, text string) {
+templ rangeOption(value, text string, selected bool) {
-	if c.Request.URL.Query().Get("created_at") == "" && value == "-86400" {
+	<option selected?={ selected } value={ value }>{ text }</option>
-		<option selected="selected" value={ value }>{ text }</option>
-	} else if c.Request.URL.Query().Get("created_at") == value {
-		<option selected="selected" value={ value }>{ text }</option>
-	} else {
-		<option value={ value }>{ text }</option>
-	}
 }
 
-templ nsfwToggle(c *views.Context, data Data) {
+templ nsfwToggle(data Data) {
-	<div class="form-control">
+	<label for="nsfw" class="label">NSFW</label>
-		<label class="label gap-4">
-			<span class="label-text">NSFW</span>
 	<select
+		id="nsfw"
 		name="sfw"
 		class="select select-ghost select-bordered"
 	>
-				if (c.Request.URL.Query().Get("sfw") == "1") || data.SFW {
 		<option value="0">Show</option>
-					<option selected="selected" value="1">Hide</option>
+		<option selected?={ data.ImageListParams.SFW } value="1">Hide</option>
-				} else {
-					<option selected="selected" value="0">Show</option>
-					<option value="1">Hide</option>
-				}
 	</select>
-		</label>
-	</div>
-}
-
-templ RecentlyAddedImageList(images models.ImageSlice, opts components.ImageCardOption) {
-	<div class="overflow-x-auto flex gap-4 p-6 shadow-inner bg-base-300 rounded-2xl w-[85vw] md:w-full scrollbar-track-base-100 scrollbar-thumb-primary scrollbar-thin hover:scrollbar-thumb-base-300">
-		for _, data := range images {
-			@components.ImageCard(data, components.HideDevice)
-		}
-	</div>
 }

views/homeview/homeview_data.go

@@ -15,7 +15,8 @@ type Data struct {
 	TotalImages         int64
 	Error               string
 	Now                 time.Time
-	SFW                 bool
+	ListSubredditParams api.ListSubredditsParams
+	ImageListParams     api.ImageListParams
 }
 
 type RecentlyAddedImages = []RecentlyAddedImage