Coffee journaling on ATProto (alpha)
alpha.arabica.social
coffee
feat: return to top button on feed page
+24
+24
internal/web/pages/home.templ
+24
internal/web/pages/home.templ
···
37
37
@FeedLoadingSkeleton()
38
38
</div>
39
39
</div>
40
+
<!-- Return to top button -->
41
+
<div
42
+
x-data="{ visible: false }"
43
+
x-init="window.addEventListener('scroll', () => { visible = window.scrollY > 400 })"
44
+
>
45
+
<button
46
+
x-show="visible"
47
+
x-transition:enter="transition ease-out duration-200"
48
+
x-transition:enter-start="opacity-0 translate-y-2"
49
+
x-transition:enter-end="opacity-100 translate-y-0"
50
+
x-transition:leave="transition ease-in duration-150"
51
+
x-transition:leave-start="opacity-100 translate-y-0"
52
+
x-transition:leave-end="opacity-0 translate-y-2"
53
+
x-cloak
54
+
@click="window.scrollTo({ top: 0, behavior: 'smooth' })"
55
+
class="fixed bottom-6 right-6 z-50 bg-brown-800 text-brown-50 rounded-full shadow-lg hover:bg-brown-700 transition-colors cursor-pointer p-3 sm:px-4 sm:py-2.5 sm:rounded-lg flex items-center gap-2"
56
+
aria-label="Return to top"
57
+
>
58
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
59
+
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
60
+
</svg>
61
+
<span class="hidden sm:inline text-sm font-medium">Back to top</span>
62
+
</button>
63
+
</div>
40
64
}
41
65
42
66
templ FeedLoadingSkeleton() {