views(subreddits): enhanced view for mobile

views/subreddits/details/filter.templ

@@ -31,7 +31,7 @@ templ searchInput(params api.SubredditGetByNameImageParams) {
 	<input
 		id="search"
 		type="text"
-		class="grow input input-bordered"
+		class="grow input input-bordered w-full"
 		placeholder="Search"
 		name="q"
 		value={ params.Q }
@@ -42,7 +42,7 @@ templ nsfwInput(params api.SubredditGetByNameImageParams) {
 	<label for="nsfw" class="label">
 		NSFW
 	</label>
-	<select id="nsfw" name="nsfw" class="select select-bordered">
+	<select id="nsfw" name="nsfw" class="select select-bordered w-full">
 		<option value="-1" selected?={ params.NSFW == -1 }>*No Filter</option>
 		<option value="0" selected?={ params.NSFW == 0 }>Hide</option>
 		<option value="1" selected?={ params.NSFW == 1 }>Show Only</option>
@@ -62,16 +62,12 @@ templ limitInput(params api.SubredditGetByNameImageParams) {
 }
 
 templ limitOption(params api.SubredditGetByNameImageParams, value int) {
-	if int(params.Limit) == value {
+	<option selected?={ params.Limit == int64(value) }>{ strconv.Itoa(value) }</option>
-		<option selected>{ strconv.Itoa(value) }</option>
-	} else {
-		<option>{ strconv.Itoa(value) }</option>
-	}
 }
 
 templ deviceInput(data Data) {
 	<label for="devices" class="label">Device</label>
-	<select id="devices" name="device" class="select select-bordered">
+	<select id="devices" name="device" class="select select-bordered w-full">
 		if len(data.Devices) == 0 {
 			<option disabled selected>No Devices</option>
 		} else {

views/subreddits/filter.templ

@@ -27,7 +27,7 @@ templ searchInput(params api.ListSubredditsParams) {
 		type="text"
 		id="search"
 		name="q"
-		class="input input-bordered"
+		class="input input-bordered w-full"
 		value={ params.Q }
 		placeholder="Filter Subreddit"
 	/>
@@ -35,7 +35,7 @@ templ searchInput(params api.ListSubredditsParams) {
 
 templ nsfwSelect(params api.ListSubredditsParams) {
 	<label for="nsfw" class="label">NSFW</label>
-	<select id="nsfw" name="nsfw" class="select select-bordered">
+	<select id="nsfw" name="nsfw" class="select select-bordered w-full">
 		<option value="-1" selected?={ params.NSFW < 0 || params.NSFW > 1 }>*No Filter</option>
 		<option value="0" selected?={ params.NSFW == 0 }>Hide</option>
 		<option value="1" selected?={ params.NSFW == 1 }>Show Only</option>
@@ -44,7 +44,7 @@ templ nsfwSelect(params api.ListSubredditsParams) {
 
 templ orderInput(params api.ListSubredditsParams) {
 	<label for="order" class="label">Order By</label>
-	<select id="order" name="order_by" class="select select-bordered">
+	<select id="order" name="order_by" class="select select-bordered w-full">
 		<option value="updated_at" selected?={ params.OrderBy == "updated_at" }>Latest Update</option>
 		<option value="created_at" selected?={ params.OrderBy == "created_at" }>Created</option>
 		<option value="name" selected?={ params.OrderBy == "name" }>Name</option>
@@ -53,7 +53,7 @@ templ orderInput(params api.ListSubredditsParams) {
 
 templ sortInput(params api.ListSubredditsParams) {
 	<label for="sort" class="label">Sort</label>
-	<select id="sort" name="sort" class="select select-bordered">
+	<select id="sort" name="sort" class="select select-bordered w-full">
 		<option value="desc" selected?={ params.Sort == "desc" }>Descending</option>
 		<option value="asc" selected?={ params.Sort == "asc" }>Ascending</option>
 	</select>

views/subreddits/view.templ

@@ -28,11 +28,7 @@ templ Content(c *views.Context, data Data) {
 		@components.Container() {
 			<div class="flex justify-between items-center">
 				<h1 class="my-0">Subreddits</h1>
-				<div class="tooltip" data-tip="Add Subreddit">
+				@actionButton()
-					<a class="btn btn-primary btn-outline" href="/subreddits/add">
-						@icons.PlusCircleFill("w-6 h-6")
-					</a>
-				</div>
 			</div>
 			<div class="divider"></div>
 			if data.Subreddits.Total > 0 {
@@ -86,3 +82,36 @@ templ imagePlaceholder() {
 		<path fill-rule="evenodd" clip-rule="evenodd" d="M33.2503 38.4816C33.2603 37.0472 34.4199 35.8864 35.8543 35.875H83.1463C84.5848 35.875 85.7503 37.0431 85.7503 38.4816V80.5184C85.7403 81.9528 84.5807 83.1136 83.1463 83.125H35.8543C34.4158 83.1236 33.2503 81.957 33.2503 80.5184V38.4816ZM80.5006 41.1251H38.5006V77.8751L62.8921 53.4783C63.9172 52.4536 65.5788 52.4536 66.6039 53.4783L80.5006 67.4013V41.1251ZM43.75 51.6249C43.75 54.5244 46.1005 56.8749 49 56.8749C51.8995 56.8749 54.25 54.5244 54.25 51.6249C54.25 48.7254 51.8995 46.3749 49 46.3749C46.1005 46.3749 43.75 48.7254 43.75 51.6249Z" fill="#687787"></path>
 	</svg>
 }
+
+templ actionButton() {
+	<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="/subreddits/add"
+						class="btn btn-ghost btn-sm no-underline m-0"
+					>Add New Subreddit</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>
+}