From b607b091d5a0e00e8215af6ec531a41e6a619ba2 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Fri, 12 Jun 2026 11:01:53 +0200
Subject: [PATCH] feat: add section_action component

---
 templates/components/section_action.gohtml | 20 ++++++++++++++++++++
 templates/discover.gohtml                  | 12 ++++++------
 templates/index.gohtml                     | 19 +++++--------------
 3 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 templates/components/section_action.gohtml

diff --git a/templates/components/section_action.gohtml b/templates/components/section_action.gohtml
new file mode 100644
index 0000000..44b24f6
--- /dev/null
+++ b/templates/components/section_action.gohtml
@@ -0,0 +1,20 @@
+{{define "section_action"}}
+<a href="{{.Href}}" class="group inline-flex min-h-9 shrink-0 items-center gap-2 bg-background-button px-3 text-sm font-normal text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
+  <span>{{.Label}}</span>
+  <svg class="size-4 transition-transform group-hover:translate-x-0.5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path
+      d="M5 12h12"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+    />
+    <path
+      d="m13 7 5 5-5 5"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</a>
+{{end}}
diff --git a/templates/discover.gohtml b/templates/discover.gohtml
index 1bd7eae..158c6ab 100644
--- a/templates/discover.gohtml
+++ b/templates/discover.gohtml
@@ -54,9 +54,9 @@
 
   {{/* Trending Section */}}
   <section class="flex flex-col gap-4">
-    <div class="flex items-center justify-between">
+    <div class="flex items-center justify-between gap-3">
       <h2 class="text-base font-normal text-foreground">Trending This Season</h2>
-      <a href="/browse?order_by=popularity&sort=asc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
+      {{template "section_action" dict "Href" "/browse?order_by=popularity&sort=asc" "Label" "View all"}}
     </div>
     <div hx-get="/api/discover/trending" hx-trigger="load" hx-swap="outerHTML">
       {{template "discover_skeleton"}}
@@ -65,9 +65,9 @@
 
   {{/* Upcoming Section */}}
   <section class="flex flex-col gap-4">
-    <div class="flex items-center justify-between">
+    <div class="flex items-center justify-between gap-3">
       <h2 class="text-base font-normal text-foreground">Highly Anticipated</h2>
-      <a href="/browse?status=upcoming&order_by=members&sort=desc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
+      {{template "section_action" dict "Href" "/browse?status=upcoming&order_by=members&sort=desc" "Label" "View all"}}
     </div>
     <div hx-get="/api/discover/upcoming" hx-trigger="load" hx-swap="outerHTML">
       {{template "discover_skeleton"}}
@@ -76,9 +76,9 @@
 
   {{/* Top Section */}}
   <section class="flex flex-col gap-4">
-    <div class="flex items-center justify-between">
+    <div class="flex items-center justify-between gap-3">
       <h2 class="text-base font-normal text-foreground">All-Time Greats</h2>
-      <a href="/browse?order_by=score&sort=desc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
+      {{template "section_action" dict "Href" "/browse?order_by=score&sort=desc" "Label" "View all"}}
     </div>
     <div hx-get="/api/discover/top" hx-trigger="load" hx-swap="outerHTML">
       {{template "discover_skeleton"}}
diff --git a/templates/index.gohtml b/templates/index.gohtml
index 1824f26..f4b722d 100644
--- a/templates/index.gohtml
+++ b/templates/index.gohtml
@@ -12,12 +12,9 @@
   {{end}}
 
   <section class="w-full">
-    <div class="mb-4 flex items-end justify-between">
+    <div class="mb-4 flex items-end justify-between gap-3">
       <h2 class="text-base font-normal text-foreground">Currently Airing</h2>
-      <a href="/browse?status=airing&order_by=popularity&sort=asc" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
-        See more
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
-      </a>
+      {{template "section_action" dict "Href" "/browse?status=airing&order_by=popularity&sort=asc" "Label" "View all"}}
     </div>
     <div hx-get="/api/catalog/airing" hx-trigger="load" hx-swap="outerHTML">
       {{template "catalog_skeleton"}}
@@ -25,12 +22,9 @@
   </section>
 
   <section class="w-full">
-    <div class="mb-4 flex items-end justify-between">
+    <div class="mb-4 flex items-end justify-between gap-3">
       <h2 class="text-base font-normal text-foreground">Most Popular</h2>
-      <a href="/browse?order_by=popularity&sort=asc" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
-        See more
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
-      </a>
+      {{template "section_action" dict "Href" "/browse?order_by=popularity&sort=asc" "Label" "View all"}}
     </div>
     <div hx-get="/api/catalog/popular" hx-trigger="load" hx-swap="outerHTML">
       {{template "catalog_skeleton"}}
@@ -45,10 +39,7 @@
     <section id="top-pick-for-you-section" class="w-full" data-top-pick-carousel>
       <div class="mb-4 flex items-end justify-between gap-3">
         <h2 class="min-w-0 text-base font-normal text-foreground">Top Pick for You</h2>
-        <a href="/discover/top-picks" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
-          Explore more
-          <svg xmlns="http://www.w3.org/2000/svg" class="size-4 transition-transform group-hover:translate-x-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
-        </a>
+        {{template "section_action" dict "Href" "/discover/top-picks" "Label" "View all"}}
       </div>
       <div class="relative overflow-hidden">
         <div data-top-pick-track tabindex="0" class="grid min-w-0 grid-flow-col auto-cols-[calc((100%-0.75rem)/2.18)] gap-3 overflow-x-auto scroll-smooth pb-1 scrollbar-hidden md:auto-cols-[calc((100%-2rem)/3.35)] md:gap-4 lg:auto-cols-[calc((100%-3rem)/4.35)] xl:auto-cols-[calc((100%-4rem)/5.35)] 2xl:auto-cols-[calc((100%-5rem)/6.35)]">