view(subreddits-details): update view to use new components

Makefile

@@ -77,11 +77,11 @@ web-dependencies:
 
 web-build: web-dependencies
 	mkdir -p public
-	npx tailwindcss -i views/style.css -o public/style.css
+	npx tailwindcss --minify -i views/style.css -o public/style.css
 
 web-build-docker:
 	mkdir -p public
-	npx tailwindcss -i views/style.css -o public/style.css
+	npx tailwindcss --minify -i views/style.css -o public/style.css
 
 build: web-dependencies build-dependencies prepare
 	go build -o redmage

views/devices/details/data.go

@@ -6,11 +6,12 @@ import (
 )
 
 type Data struct {
-	Error       string
+	Error               string
-	Device      *models.Device
+	Device              *models.Device
-	Images      models.ImageSlice
+	Images              models.ImageSlice
-	TotalImages int64
+	TotalImages         int64
-	Params      api.ImageListParams
+	Params              api.ImageListParams
+	FlashMessageSuccess string
 }
 
 type splitBySubredditImages struct {

views/devices/details/filter.templ

@@ -2,6 +2,7 @@ package details
 
 import "fmt"
 import "github.com/tigorlazuardi/redmage/views"
+import "github.com/tigorlazuardi/redmage/api"
 
 templ filter(c *views.Context, data Data) {
 	<div
@@ -9,53 +10,55 @@ templ filter(c *views.Context, data Data) {
 		hx-get={ fmt.Sprintf("/devices/details/%s", data.Device.Slug) }
 		hx-include="this"
 		hx-trigger="change, input delay:500ms"
-		hx-target="main"
+		hx-target="#image-content"
-		hx-select="main"
+		hx-select="#image-content"
 		hx-swap="outerHTML"
 		hx-push-url="true"
-		class="grid md:grid-cols-2 gap-4 items-center"
+		class="grid grid-cols-[1fr,4fr] sm:grid-cols-[1fr,4fr,1fr,4fr] gap-4 items-center"
 	>
-		<label class="input input-bordered flex items-center gap-2">
+		@searchInput(data.Params)
-			<input
+		@limitInput(data.Params)
-				id="search"
+		@rangeInput(c)
-				type="text"
-				class="grow"
-				placeholder="Search"
-				name="q"
-				value={ data.Params.Q }
-			/>
-			<svg
-				onclick="htmx.trigger('#filter-bar', 'change')"
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 16 16"
-				fill="currentColor"
-				class="w-4 h-4 opacity-70"
-			><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg>
-		</label>
-		<div class="grid grid-cols-[1fr,3fr] sm:grid-cols-[1fr,3fr,1fr,3fr] gap-4 items-center">
-			<label for="limit">Limit</label>
-			<select id="limit" name="limit" class="select select-bordered w-full">
-				<option value="25" selected?={ data.Params.Limit == 25 }>25</option>
-				<option value="50" selected?={ data.Params.Limit == 50 }>50</option>
-				<option value="75" selected?={ data.Params.Limit == 75 }>75</option>
-				<option value="100" selected?={ data.Params.Limit == 100 }>100</option>
-			</select>
-			<label for="range">Range</label>
-			<select id="range" name="created_at" class="select select-bordered w-full">
-				@rangeOption(c, "", "*No Filter")
-				@rangeOption(c, "-10800", "3 Hours")
-				@rangeOption(c, "-21600", "6 Hours")
-				@rangeOption(c, "-43200", "12 Hours")
-				@rangeOption(c, "-86400", "1 Day")
-				@rangeOption(c, "-172800", "2 Days")
-				@rangeOption(c, "-259200", "3 Days")
-				@rangeOption(c, "-604800", "7 Days")
-				@rangeOption(c, "-2592000", "30 Days")
-			</select>
-		</div>
 	</div>
 }
 
+templ searchInput(params api.ImageListParams) {
+	<label for="search" class="label">Search</label>
+	<input
+		id="search"
+		type="text"
+		class="input input-bordered w-full"
+		placeholder="Search"
+		name="q"
+		value={ params.Q }
+	/>
+}
+
+templ limitInput(params api.ImageListParams) {
+	<label class="label" for="limit">Limit</label>
+	<select id="limit" name="limit" class="select select-bordered w-full">
+		<option value="25" selected?={ params.Limit == 25 }>25</option>
+		<option value="50" selected?={ params.Limit == 50 }>50</option>
+		<option value="75" selected?={ params.Limit == 75 }>75</option>
+		<option value="100" selected?={ params.Limit == 100 }>100</option>
+	</select>
+}
+
+templ rangeInput(c *views.Context) {
+	<label class="label" for="range">Range</label>
+	<select id="range" name="created_at" class="select select-bordered w-full">
+		@rangeOption(c, "", "*No Filter")
+		@rangeOption(c, "-10800", "3 Hours")
+		@rangeOption(c, "-21600", "6 Hours")
+		@rangeOption(c, "-43200", "12 Hours")
+		@rangeOption(c, "-86400", "1 Day")
+		@rangeOption(c, "-172800", "2 Days")
+		@rangeOption(c, "-259200", "3 Days")
+		@rangeOption(c, "-604800", "7 Days")
+		@rangeOption(c, "-2592000", "30 Days")
+	</select>
+}
+
 templ rangeOption(c *views.Context, value, display string) {
 	<option value={ value } selected?={ c.Request.URL.Query().Get("created_at") == value }>{ display }</option>
 }

views/devices/details/view.templ

@@ -16,6 +16,11 @@ templ View(c *views.Context, data Data) {
 		}
 		@components.Body(c) {
 			@Content(c, data)
+			@components.NotificationContainer() {
+				if data.FlashMessageSuccess != "" {
+					@components.SuccessNotification(data.FlashMessageSuccess)
+				}
+			}
 		}
 	}
 }
@@ -28,19 +33,32 @@ templ Content(c *views.Context, data Data) {
 			} else {
 				<div class="flex justify-between items-center">
 					<h1 class="my-auto">{ data.Device.Name }</h1>
-					<div class="tooltip" data-tip="Edit">
+					@actionButton(data)
-						<a
-							href={ templ.SafeURL(fmt.Sprintf("/devices/edit/%s", data.Device.Slug)) }
-							class="btn btn-primary no-underline"
-						>
-							@icons.Gear("w-8 h-8 text-primary-content")
-						</a>
-					</div>
 				</div>
 				<div class="divider"></div>
 				@filter(c, data)
-				<h2>{ strconv.FormatInt(data.TotalImages, 10) } Images</h2>
+				<div id="image-content">
-				if data.TotalImages > 0 {
+					<h2 class="my-4">{ strconv.FormatInt(data.TotalImages, 10) } Images</h2>
+					if data.TotalImages > 0 {
+						<div class="flex justify-center mt-4">
+							@components.Pagination(c, components.PaginationData{
+								BaseURL: "/devices/details/" + data.Device.Slug,
+								Limit:   data.Params.Limit,
+								Offset:  data.Params.Offset,
+								Total:   data.TotalImages,
+							})
+						</div>
+						<p class="text-center my-4">
+							Showing from 
+							{ strconv.FormatInt(data.Params.Offset + 1, 10) }
+							to 
+							{ strconv.FormatInt(min(data.Params.Limit+data.Params.Offset, data.TotalImages), 10) }
+						</p>
+					}
+					for _, group := range data.splitImages() {
+						<h2 class="my-4">{ group.Subreddit }</h2>
+						@imageList(group.Images)
+					}
 					<div class="flex justify-center mt-4">
 						@components.Pagination(c, components.PaginationData{
 							BaseURL: "/devices/details/" + data.Device.Slug,
@@ -49,34 +67,49 @@ templ Content(c *views.Context, data Data) {
 							Total:   data.TotalImages,
 						})
 					</div>
-					<p class="text-center my-4">
-						Showing from 
-						{ strconv.FormatInt(data.Params.Offset + 1, 10) }
-						to 
-						{ strconv.FormatInt(min(data.Params.Limit+data.Params.Offset, data.TotalImages), 10) }
-					</p>
-				}
-				for _, group := range data.splitImages() {
-					<h2>{ group.Subreddit }</h2>
-					@imageList(group.Images)
-				}
-				<div class="flex justify-center mt-4">
-					@components.Pagination(c, components.PaginationData{
-						BaseURL: "/devices/details/" + data.Device.Slug,
-						Limit:   data.Params.Limit,
-						Offset:  data.Params.Offset,
-						Total:   data.TotalImages,
-					})
 				</div>
 			}
 		}
 	</main>
 }
 
+templ actionButton(data Data) {
+	<div class="max-xs:toast max-xs:z-40">
+		<div class="dropdown dropdown-hover dropdown-top xs:dropdown-bottom dropdown-end">
+			<div
+				tabindex="0"
+				role="button"
+				class="btn btn-primary max-xs:btn-circle max-lg:btn-square xs:btn-outline m-1 max-xs:border-none"
+			>
+				@icons.Kebab("h-8 w-8")
+			</div>
+			<ul
+				tabindex="0"
+				class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 m-0 border-primary border-2"
+				onclick="document.activeElement.blur()"
+			>
+				<li class="m-0 p-0 hover:bg-primary rounded-btn">
+					<a
+						href={ templ.SafeURL(fmt.Sprintf("/devices/edit/%s", data.Device.Slug)) }
+						class="btn btn-ghost btn-sm no-underline m-0"
+					>Edit</a>
+				</li>
+				<div class="xs:hidden divider m-0 p-0"></div>
+				<li class="xs:hidden m-0 p-0 hover:bg-primary rounded-btn">
+					<button
+						class="btn btn-ghost btn-sm m-0"
+						onclick="window.scrollTo({ top: 0, behavior: 'smooth' })"
+					>Scroll to Top</button>
+				</li>
+			</ul>
+		</div>
+	</div>
+}
+
 templ imageList(images models.ImageSlice) {
-	<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">
+	@components.HorizontalImageWell() {
 		for _, data := range images {
 			@components.ImageCard(data, 0)
 		}
-	</div>
+	}
 }