devices: enhanced add device form validation and checkboxes

server/routes/device_validate_name.go

@@ -29,6 +29,15 @@ func (routes *Routes) DevicesValidateNameHTMX(rw http.ResponseWriter, req *http.
 		Value:     s,
 		HXSwapOOB: true,
 	}
+
+	if s == "" {
+		slugData.Error = "Identifier resolves to empty value. Please set a valid identifier manually."
+		_ = nameComponent.Render(ctx, rw)
+		if err := adddevice.SlugInput(slugData).Render(ctx, rw); err != nil {
+			log.New(ctx).Err(err).Error("failed to render name input")
+		}
+		return
+	}
 	exist, err := routes.API.DevicesValidateSlug(ctx, s)
 	if err != nil {
 		log.New(ctx).Err(err).Error("failed to validate slug")
@@ -42,7 +51,6 @@ func (routes *Routes) DevicesValidateNameHTMX(rw http.ResponseWriter, req *http.
 
 	if exist {
 		slugData.Error = "Device with this identifier already exist. Please change the value manually."
-		// rw.WriteHeader(http.StatusConflict)
 		_ = nameComponent.Render(ctx, rw)
 		if err := adddevice.SlugInput(slugData).Render(ctx, rw); err != nil {
 			log.New(ctx).Err(err).Error("failed to render name input")
@@ -50,7 +58,7 @@ func (routes *Routes) DevicesValidateNameHTMX(rw http.ResponseWriter, req *http.
 		return
 	}
 
-	slugData.Valid = "Identifier is available"
+	slugData.Valid = "Identifier is available."
 
 	_ = nameComponent.Render(ctx, rw)
 	if err := adddevice.SlugInput(slugData).Render(ctx, rw); err != nil {

views/components/image_card.templ

@@ -10,7 +10,15 @@ func (o ImageCardOption) Has(opt ImageCardOption) bool {
 	return o&opt != 0
 }
 
+func (o ImageCardOption) SetCond(opt ImageCardOption, cond bool) ImageCardOption {
+	if cond {
+		return o | opt
+	}
+	return o
+}
+
 const (
+	HideNothing ImageCardOption = 0
 	HideTitle   ImageCardOption = 1 << iota
 	HideSubreddit
 	HidePoster

views/devicesview/adddevice/nsfw_checkbox.templ

@@ -1,24 +1,37 @@
 package adddevice
 
+import "fmt"
+
 type NSFWCheckboxData struct {
 	Checked bool
 }
 
 templ NSFWCheckbox(data NSFWCheckboxData) {
-	<div class="form-control">
+	<div
-		<div class="divider my-0 py-0"></div>
+		x-data={ fmt.Sprintf(`{checked: %t}`, data.Checked) }
-		<div class="divider my-0 py-0"></div>
+		class="form-control"
-		<label class="label cursor-pointer">
+	>
-			<span class="label-text">NSFW</span>
+		<label
+			class="label cursor-pointer border input input-bordered"
+			:class="{'input-primary': checked}"
+		>
+			<span
+				class="label-text"
+				:class="{'text-primary': checked}"
+			>Allow NSFW Images</span>
 			<input
 				type="checkbox"
 				checked?={ data.Checked }
 				class="checkbox"
+				:class="{'checkbox-primary': checked}"
 				name="nsfw"
 				value="1"
+				@change="checked = !checked"
 			/>
 		</label>
-		<div class="divider my-0 py-0"></div>
+		<span
-		<span class="label-text pl-1">Whether to allow NSFW images for current device.</span>
+			class="label-text pl-1 mt-2"
+			:class="{'text-primary': checked}"
+		>Whether to allow NSFW images for current device.</span>
 	</div>
 }

views/devicesview/adddevice/windows_wallpaper_checkbox.templ

@@ -1,26 +1,39 @@
 package adddevice
 
+import "fmt"
+
 type WindowsWallpaperCheckboxData struct {
 	Checked bool
 }
 
 templ WindowsWallpaperCheckbox(data WindowsWallpaperCheckboxData) {
-	<div class="form-control">
+	<div
-		<div class="divider my-0 py-0"></div>
+		x-data={ fmt.Sprintf(`{checked: %t}`, data.Checked) }
-		<div class="divider my-0 py-0"></div>
+		class="form-control"
-		<label class="label cursor-pointer">
+	>
-			<span class="label-text">Windows Wallpaper Mode</span>
+		<label
+			class="label cursor-pointer input input-bordered"
+			:class="{'input-secondary': checked}"
+		>
+			<span
+				class="label-text"
+				:class="{'text-secondary': checked}"
+			>Windows Wallpaper Mode</span>
 			<input
 				type="checkbox"
 				checked?={ data.Checked }
 				class="checkbox"
+				:class="{'checkbox-secondary': checked}"
 				name="windows_wallpaper_mode"
+				@change="checked = !checked"
 				value="1"
 			/>
 		</label>
-		<div class="divider my-0 py-0"></div>
+		<span
-		<span class="label-text pl-1">
+			class="label-text pl-1 mt-2"
-			Windows Wallpaper Mode puts images under one folder instead of split by subreddits.
+			:class="{'text-secondary': checked}"
+		>
+			Windows Wallpaper Mode puts images for this device under one folder instead of split by subreddits.
 			This allows the user to target Windows Wallpaper to the whole image collections.
 		</span>
 	</div>

views/subredditsview/detailsview/detailsview.templ

@@ -60,7 +60,7 @@ templ DetailsContent(c *views.Context, data Data) {
 				@showingImageFromTo(data)
 				<div class="flex flex-wrap gap-4 my-8 justify-around">
 					for _, image := range data.Images {
-						@components.ImageCard(image, 0)
+						@components.ImageCard(image, components.HideNothing.SetCond(components.HideDevice, data.Params.Device != ""))
 					}
 				</div>
 				<div class="flex w-full justify-center">