view: optimize for mobile and add icons

views/components/navigation.templ

@@ -6,9 +6,14 @@ import "github.com/tigorlazuardi/redmage/views/utils"
 
 templ Navigation(c *views.Context) {
 	<div class="drawer">
-		<input id="drawer-toggle" type="checkbox" class="drawer-toggle"/>
+		<input id="drawer-toggle" type="checkbox" class="drawer-toggle" autocomplete="off"/>
 		<div class="drawer-content">
-			<header class="navbar bg-base-200 lg:hidden">
+			<header
+				x-data="{ lastScrollPost: 0, hide: false, get onTop() { return this.lastScrollPost < 60 } }"
+				class="navbar bg-base-200 z-50 lg:hidden transition-all duration-300 shadow-lg sticky top-0"
+				:class="{ '-translate-y-full': !onTop && hide }"
+				@scroll.window.throttle.50ms="hide = window.scrollY > lastScrollPost; lastScrollPost = window.scrollY;"
+			>
 				<div class="flex-none">
 					<label for="drawer-toggle" class="btn btn-square btn-ghost drawer-button">
 						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
@@ -25,7 +30,7 @@ templ Navigation(c *views.Context) {
 			</header>
 			{ children... }
 		</div>
-		<nav class="drawer-side">
+		<nav class="drawer-side z-[51]">
 			<label for="drawer-toggle" class="drawer-overlay"></label>
 			<div class="menu py-4 min-w-[15rem] min-h-full bg-base-200 text-base-content">
 				<div class="flex flex-col items-center min-w-[180px] max-w-[280px]">

views/components/notification.templ

@@ -3,15 +3,14 @@ package components
 const NotificationContainerID = "#notification-container"
 
 templ NotificationContainer() {
-	<div id="notification-container" class="fixed bottom-4 right-4 z-50">
+	<div id="notification-container" class="toast max-xs:toast-top max-xs:toast-end z-50">
 		{ children... }
 	</div>
 }
 
 templ InfoNotication(messages ...string) {
 	<div
-		hx-on::load="setTimeout(() => this.remove(), 5000)"
+		x-data="{ init() { setTimeout(() => $el.remove(), 5000) } }"
-		class="toast"
 		onclick="this.remove()"
 	>
 		<div class="alert alert-info hover:bg-info-content transition-all">
@@ -27,8 +26,7 @@ templ InfoNotication(messages ...string) {
 
 templ ErrorNotication(messages ...string) {
 	<div
-		hx-on::load="setTimeout(() => this.remove(), 5000)"
+		x-data="{ init() { setTimeout(() => $el.remove(), 5000) } }"
-		class="toast"
 		onclick="this.remove()"
 	>
 		<div class="alert alert-error hover:bg-error-content transition-all">
@@ -45,7 +43,6 @@ templ ErrorNotication(messages ...string) {
 templ SuccessNotification(messages ...string) {
 	<div
 		x-data="{ init() { setTimeout(() => $el.remove(), 5000) } }"
-		class="toast"
 		onclick="this.remove()"
 	>
 		<div class="alert alert-success hover:bg-success-content transition-all">

views/devices/view.templ

@@ -7,6 +7,7 @@ import "github.com/tigorlazuardi/redmage/api"
 import "strconv"
 import "fmt"
 import "github.com/tigorlazuardi/redmage/views/utils"
+import "github.com/tigorlazuardi/redmage/views/icons"
 
 type Data struct {
 	Error   string
@@ -32,7 +33,11 @@ templ Content(c *views.Context, data Data) {
 			} else {
 				<div class="flex justify-between items-center">
 					<h1 class="my-auto">Devices</h1>
-					<a href="/devices/add" class="btn btn-primary no-underline text-base-100">Add Device</a>
+					<div class="tooltip" data-tip="Add Device">
+						<a href="/devices/add" class="btn btn-primary btn-outline btn-square text-base-100">
+							@icons.PlusCircleFill("w-6 h-6")
+						</a>
+					</div>
 				</div>
 				<div class="divider"></div>
 				@filter(data)

views/icons/plus.templ

@@ -0,0 +1,37 @@
+package icons
+
+import "strings"
+
+templ PlusCircleFill(class ...string) {
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+		class={ strings.Join(class, " ") }
+		viewBox="0 0 32 32"
+		version="1.1"
+	>
+		<desc>Created with Sketch Beta.</desc>
+		<defs></defs>
+		<g
+			id="Page-1"
+			stroke="none"
+			stroke-width="1"
+			fill="currentColor"
+			fill-rule="evenodd"
+			sketch:type="MSPage"
+		>
+			<g
+				id="Icon-Set-Filled"
+				sketch:type="MSLayerGroup"
+				transform="translate(-466.000000, -1089.000000)"
+				fill="currentColor"
+			>
+				<path
+					d="M488,1106 L483,1106 L483,1111 C483,1111.55 482.553,1112 482,1112 C481.447,1112 481,1111.55 481,1111 L481,1106 L476,1106 C475.447,1106 475,1105.55 475,1105 C475,1104.45 475.447,1104 476,1104 L481,1104 L481,1099 C481,1098.45 481.447,1098 482,1098 C482.553,1098 483,1098.45 483,1099 L483,1104 L488,1104 C488.553,1104 489,1104.45 489,1105 C489,1105.55 488.553,1106 488,1106 L488,1106 Z M482,1089 C473.163,1089 466,1096.16 466,1105 C466,1113.84 473.163,1121 482,1121 C490.837,1121 498,1113.84 498,1105 C498,1096.16 490.837,1089 482,1089 L482,1089 Z"
+					sketch:type="MSShapeGroup"
+				></path>
+			</g>
+		</g>
+	</svg>
+}

views/subreddits/view.templ

@@ -6,6 +6,7 @@ import "github.com/tigorlazuardi/redmage/api"
 import "github.com/tigorlazuardi/redmage/models"
 import "fmt"
 import "strconv"
+import "github.com/tigorlazuardi/redmage/views/icons"
 
 type Data struct {
 	Subreddits api.ListSubredditsResult
@@ -24,17 +25,20 @@ templ View(c *views.Context, data Data) {
 templ Content(c *views.Context, data Data) {
 	<main class="prose min-w-full">
 		@components.Container() {
-			<h1>Subreddits</h1>
+			<div class="flex justify-between items-center">
+				<h1 class="my-0">Subreddits</h1>
+				<div class="tooltip" data-tip="Add Subreddit">
+					<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 {
-				<div class="divider"></div>
 				<h3>No Subreddits Found</h3>
 				<p>Click <a class="text-primary" href="/subreddits/add">here</a> to add a new subreddit.</p>
 			} else {
-				<div class="flex justify-center sm:justify-between flex-wrap gap-4">
+				<h2>{ strconv.FormatInt(data.Subreddits.Total, 10) } Subreddits Registered</h2>
-					<h2 class="my-auto">{ strconv.FormatInt(data.Subreddits.Total, 10) } Subreddits Registered</h2>
-					<a class="btn btn-primary text-base-100 no-underline" href="/subreddits/add">Add Subreddit</a>
-				</div>
-				<div class="divider"></div>
 			}
 			<div class="flex flex-wrap gap-1 justify-around" hx-boost="true">
 				for _, subreddit := range data.Subreddits.Data {

views/subredditsview/detailsview/detailsview.templ

@@ -43,40 +43,41 @@ templ DetailsContent(c *views.Context, data Data) {
 				<h1>Error: { data.Error }</h1>
 			} else {
 				<div class="flex items-center justify-between">
-					<h1>Subreddit { data.Subreddit.Name }</h1>
+					<h1 class="my-auto">Subreddit { data.Subreddit.Name }</h1>
-				</div>
+					<div class="max-xs:toast max-xs:z-40">
-				<div class="flex flex-wrap justify-center xs:justify-between content-center gap-4">
+						<div class="dropdown dropdown-hover dropdown-top xs:dropdown-bottom dropdown-end">
-					<h2 class="my-auto">
+							<div tabindex="0" role="button" class="btn btn-primary max-xs:btn-circle btn-square xs:btn-outline m-1 max-xs:border-none">
-						Total Images: 
+								@icons.Kebab("h-8 w-8")
-						{ strconv.FormatInt(data.TotalImages, 10) }
+							</div>
-					</h2>
+							<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">
-					<div class="dropdown dropdown-hover dropdown-end">
+								<li class="m-0 p-0 hover:bg-primary rounded-btn">
-						<div tabindex="0" role="button" class="btn m-1">
+									<button
-							@icons.Kebab("h-8 w-8")
+										hx-post="/htmx/subreddits/start"
+										hx-include="this"
+										hx-target={ components.NotificationContainerID }
+										hx-target-error={ components.NotificationContainerID }
+										hx-swap="afterbegin"
+										class="btn btn-ghost btn-sm m-0"
+									>
+										Start Download
+										<input type="hidden" name="subreddit" value={ data.Subreddit.Name }/>
+									</button>
+								</li>
+								<div class="divider m-0 p-0"></div>
+								<li class="m-0 p-0 hover:bg-primary rounded-btn">
+									<a
+										href={ templ.SafeURL(fmt.Sprintf("/subreddits/edit/%s", data.Subreddit.Name)) }
+										class="btn btn-ghost btn-sm no-underline m-0"
+									>Edit</a>
+								</li>
+							</ul>
 						</div>
-						<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 mt-0">
-							<li>
-								<button
-									hx-post="/htmx/subreddits/start"
-									hx-include="this"
-									hx-target={ components.NotificationContainerID }
-									hx-target-error={ components.NotificationContainerID }
-									hx-swap="afterbegin"
-									class="btn btn-ghost"
-								>
-									Start Download
-									<input type="hidden" name="subreddit" value={ data.Subreddit.Name }/>
-								</button>
-							</li>
-							<li>
-								<a
-									href={ templ.SafeURL(fmt.Sprintf("/subreddits/edit/%s", data.Subreddit.Name)) }
-									class="btn btn-ghost no-underline"
-								>Edit</a>
-							</li>
-						</ul>
 					</div>
 				</div>
+				<h2 class="my-8">
+					Total Images: 
+					{ strconv.FormatInt(data.TotalImages, 10) }
+				</h2>
 				<div class="divider"></div>
 				@FilterBar(c, data)
 				<div class="grid justify-center my-4">