ui: trend panel + range selector on host repo page

web/templates/pages/host_repo.html

@@ -245,6 +245,12 @@
       </div>
     </div>
 
+    {{/* ---------- Trend ---------- */}}
+    <h2 class="text-[11.5px] font-semibold uppercase tracking-[0.08em] text-ink-mute mt-7 mb-3.5">Trend</h2>
+    <div class="panel rounded-[7px] p-5">
+      {{template "repo_size_chart" (dict "Page" $page.Trend)}}
+    </div>
+
     {{/* ---------- Host-default hooks ---------- */}}
     <h2 class="text-[11.5px] font-semibold uppercase tracking-[0.08em] text-ink-mute mt-9 mb-3.5">Host-default hooks</h2>
     <form method="post" action="/hosts/{{$host.ID}}/repo/hooks" class="panel rounded-[7px] p-5">

web/templates/partials/repo_size_chart.html

@@ -0,0 +1,22 @@
+{{define "repo_size_chart"}}
+{{$trend := .Page}}
+<div id="repo-trend-chart" data-range="{{$trend.Range}}">
+  <div class="flex items-center gap-2 mb-2">
+    <span class="text-xs text-ink-mid">Range:</span>
+    <a class="btn btn-ghost-xs {{if eq "30d" $trend.Range}}is-active{{end}}"
+       hx-get="/hosts/{{$trend.HostID}}/repo/trend?range=30d"
+       hx-target="#repo-trend-chart" hx-swap="outerHTML">30d</a>
+    <a class="btn btn-ghost-xs {{if eq "90d" $trend.Range}}is-active{{end}}"
+       hx-get="/hosts/{{$trend.HostID}}/repo/trend?range=90d"
+       hx-target="#repo-trend-chart" hx-swap="outerHTML">90d</a>
+    <a class="btn btn-ghost-xs {{if eq "1y" $trend.Range}}is-active{{end}}"
+       hx-get="/hosts/{{$trend.HostID}}/repo/trend?range=1y"
+       hx-target="#repo-trend-chart" hx-swap="outerHTML">1y</a>
+  </div>
+  <div class="text-ink">{{$trend.ChartSVG}}</div>
+  <div class="flex gap-4 mt-2 text-xs text-ink-mid">
+    <span><span class="inline-block w-3 h-[2px] align-middle" style="background:#3b82f6"></span> repo size</span>
+    <span><span class="inline-block w-3 h-[2px] align-middle" style="background:#f59e0b"></span> snapshot count</span>
+  </div>
+</div>
+{{end}}