From e887675346eefab70d380389db7f996112d0d628 Mon Sep 17 00:00:00 2001
From: Tigor Hutasuhut <tigor.hutasuhut@gmail.com>
Date: Tue, 28 May 2024 15:06:55 +0700
Subject: [PATCH] view: optimize for mobile and add icons

---
 views/components/navigation.templ             | 11 +++-
 views/components/notification.templ           |  9 +--
 views/devices/view.templ                      |  7 ++-
 views/icons/plus.templ                        | 37 +++++++++++
 views/subreddits/view.templ                   | 18 +++---
 .../detailsview/detailsview.templ             | 63 ++++++++++---------
 6 files changed, 97 insertions(+), 48 deletions(-)
 create mode 100644 views/icons/plus.templ

diff --git a/views/components/navigation.templ b/views/components/navigation.templ
index 32220fa..07369d5 100644
--- a/views/components/navigation.templ
+++ b/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]">
diff --git a/views/components/notification.templ b/views/components/notification.templ
index 05d1f80..b36d833 100644
--- a/views/components/notification.templ
+++ b/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)"
-		class="toast"
+		x-data="{ init() { setTimeout(() => $el.remove(), 5000) } }"
 		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)"
-		class="toast"
+		x-data="{ init() { setTimeout(() => $el.remove(), 5000) } }"
 		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">
diff --git a/views/devices/view.templ b/views/devices/view.templ
index 069dee8..06b42ce 100644
--- a/views/devices/view.templ
+++ b/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)
diff --git a/views/icons/plus.templ b/views/icons/plus.templ
new file mode 100644
index 0000000..02a48d2
--- /dev/null
+++ b/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>
+}
diff --git a/views/subreddits/view.templ b/views/subreddits/view.templ
index 5ffc455..075bb7c 100644
--- a/views/subreddits/view.templ
+++ b/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 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>
+				<h2>{ strconv.FormatInt(data.Subreddits.Total, 10) } Subreddits Registered</h2>
 			}
 			<div class="flex flex-wrap gap-1 justify-around" hx-boost="true">
 				for _, subreddit := range data.Subreddits.Data {
diff --git a/views/subredditsview/detailsview/detailsview.templ b/views/subredditsview/detailsview/detailsview.templ
index 9cb24de..458f226 100644
--- a/views/subredditsview/detailsview/detailsview.templ
+++ b/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>
-				</div>
-				<div class="flex flex-wrap justify-center xs:justify-between content-center gap-4">
-					<h2 class="my-auto">
-						Total Images: 
-						{ strconv.FormatInt(data.TotalImages, 10) }
-					</h2>
-					<div class="dropdown dropdown-hover dropdown-end">
-						<div tabindex="0" role="button" class="btn m-1">
-							@icons.Kebab("h-8 w-8")
+					<h1 class="my-auto">Subreddit { data.Subreddit.Name }</h1>
+					<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 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">
+								<li class="m-0 p-0 hover:bg-primary rounded-btn">
+									<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 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">