view: added config route

server/routes/page_config.go

@@ -0,0 +1,17 @@
+package routes
+
+import (
+	"net/http"
+
+	"github.com/tigorlazuardi/redmage/pkg/log"
+	"github.com/tigorlazuardi/redmage/views"
+	"github.com/tigorlazuardi/redmage/views/configview"
+)
+
+func (routes *Routes) PageConfig(rw http.ResponseWriter, req *http.Request) {
+	vc := views.NewContext(routes.Config, req)
+
+	if err := configview.Config(vc).Render(req.Context(), rw); err != nil {
+		log.New(req.Context()).Err(err).Error("Failed to render config page")
+	}
+}

server/routes/routes.go

@@ -65,5 +65,6 @@ func (routes *Routes) registerWWWRoutes(router chi.Router) {
 		r.Use(chimiddleware.SetHeader("Content-Type", "text/html; charset=utf-8"))
 		r.Get("/", routes.PageHome)
 		r.Get("/subreddits", routes.PageSubreddits)
+		r.Get("/config", routes.PageConfig)
 	})
 }

views/components/navigation.templ

@@ -32,20 +32,7 @@ templ Navigation(c *views.Context) {
 					<span class="font-bold">Redmage</span>
 				</div>
 				<div class="divider"></div>
-				<ul>
+				@navList(c)
-					<a href="/" class={ classForNavItem(c, "/") }>
-						<li class="hover:bg-accent hover:text-neutral-50 py-2 pl-4 hover:font-bold">Home</li>
-					</a>
-					<a href="/about" class={ classForNavItem(c, "/about") }>
-						<li class="hover:bg-accent hover:text-neutral-50 py-2 pl-4 hover:font-bold">About</li>
-					</a>
-					<a href="/config" class={ classForNavItem(c, "/config") }>
-						<li class="hover:bg-accent hover:text-neutral-50 py-2 pl-4 hover:font-bold">Config</li>
-					</a>
-					<a href="/browse" class={ classForNavItem(c, "/browse") }>
-						<li class="hover:bg-accent hover:text-neutral-50 py-2 pl-4 hover:font-bold">Browse</li>
-					</a>
-				</ul>
 			</div>
 		</nav>
 	</div>
@@ -91,20 +78,19 @@ templ Navbar(c *views.Context) {
 				@navList(c)
 			</nav>
 			<div class="flex-grow"></div>
-			@SelectThemeInput()
 		</div>
 	</header>
 }
 
 templ navList(c *views.Context) {
-	<ul class="flex flex-col flex-wrap">
+	<ul hx-boost="true" class="flex flex-col flex-wrap transition-all">
 		<a href="/" class={ classForNavItem(c, "/") }>
 			<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">Home</li>
 		</a>
 		<a href="/about" class={ classForNavItem(c, "/about") }>
 			<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">About</li>
 		</a>
-		<a href="/config" class={ classForNavItem(c, "/config") }>
+		<a hx-boost="false" href="/config" class={ classForNavItem(c, "/config") }>
 			<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">Config</li>
 		</a>
 		<a href="/subreddits" class={ classForNavItem(c, "/subreddits") }>
@@ -112,19 +98,3 @@ templ navList(c *views.Context) {
 		</a>
 	</ul>
 }
-
-templ SelectThemeInput() {
-	<select class="select select-ghost select-bordered w-full" data-choose-theme>
-		<option value="light">Light (Default)</option>
-		<option value="dark">Dark</option>
-		<option value="cupcake">Cupcake</option>
-		<option value="bumblebee">Bumblebee</option>
-		<option value="emerald">Emerald</option>
-		<option value="corporate">Corporate</option>
-		<option value="synthwave">Synthwave</option>
-		<option value="retru">Retro</option>
-		<option value="cyberpunk">Cyberpunk</option>
-		<option value="valentine">Valentine</option>
-		<option value="halloween">Halloween</option>
-	</select>
-}

views/configview/configview.templ

@@ -0,0 +1,42 @@
+package configview
+
+import "github.com/tigorlazuardi/redmage/views"
+import "github.com/tigorlazuardi/redmage/views/components"
+
+templ Config(c *views.Context) {
+	@components.Doctype() {
+		@components.Head(c, components.HeadTitle("Redmage - Config"))
+		@components.Body(c) {
+			@ConfigContent(c)
+		}
+	}
+}
+
+templ ConfigContent(c *views.Context) {
+	<main class="prose min-w-full">
+		@components.Container() {
+			<h1>Config</h1>
+			<div class="divider"></div>
+			<div class="grid grid-cols-2 items-center">
+				<h2>Theme</h2>
+				@SelectThemeInput()
+			</div>
+		}
+	</main>
+}
+
+templ SelectThemeInput() {
+	<select class="select select-ghost select-bordered w-full" data-choose-theme>
+		<option value="light">Light (Default)</option>
+		<option value="dark">Dark</option>
+		<option value="cupcake">Cupcake</option>
+		<option value="bumblebee">Bumblebee</option>
+		<option value="emerald">Emerald</option>
+		<option value="corporate">Corporate</option>
+		<option value="synthwave">Synthwave</option>
+		<option value="retru">Retro</option>
+		<option value="cyberpunk">Cyberpunk</option>
+		<option value="valentine">Valentine</option>
+		<option value="halloween">Halloween</option>
+	</select>
+}

views/utils/relative_schedule_time.templ

@@ -9,7 +9,7 @@ import "strconv"
 
 script RelativeFromTimeText(id string, time int64, inter int) {
     const el = document.getElementById(id)
-    el.parentNode.dataset.tip = dayjs.unix(time).tz(dayjs.tz.guess()).format('ddd, D MMM YYYY HH:mm:ss Z')
+    el.parentNode.dataset.tip = dayjs.unix(time).tz(dayjs.tz.guess()).format('ddd, D MMM YYYY HH:mm:ss')
     
     const timeText = dayjs.unix(time).fromNow()
     el.textContent = timeText
@@ -34,7 +34,7 @@ script RelativeFromTimeText(id string, time int64, inter int) {
 }
 
 templ RelativeTimeNode(id string, time int64, class ...string) {
-	<div class="tooltip z-10" data-tip={ strconv.FormatInt(time, 10) }>
+	<div class="tooltip" data-tip={ strconv.FormatInt(time, 10) }>
 		<span
 			id={ id }
 			class={ strings.Join(class, " ") }