yoten.app
Yōten: A social tracker for your language learning journey built on the atproto.
brookjeynes.dev
1package views
2
3import (
4 "yoten.app/internal/server/views/layouts"
5 "yoten.app/internal/server/views/partials"
6)
7
8templ IndexPage(params IndexPageParams) {
9 @layouts.Base(layouts.BaseParams{Title: "home"}) {
10 @partials.Header(partials.HeaderProps{User: params.User})
11 <div class="container mx-auto max-w-2xl px-4 py-8">
12 <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-8 gap-4">
13 <div>
14 <h1 class="text-3xl font-bold">Study Feed</h1>
15 <p class="text-text-muted mt-1">See what the community is learning</p>
16 </div>
17 <a href="/session/new" class="btn btn-primary w-auto">
18 <i class="w-4 h-4" data-lucide="plus"></i>
19 <span>Log Session</span>
20 </a>
21 </div>
22 <div x-data="{ mode: 'global' }" class="flex flex-col">
23 <div class="flex p-1">
24 <button
25 type="button"
26 hx-target="#study-feed"
27 id="global-feed-button"
28 hx-swap="innerHTML"
29 hx-get="/feed?friends=false"
30 hx-disabled-elt="#friends-feed-button,#global-feed-button"
31 hx-indicator="#feed-spinner"
32 @click="mode = 'global'"
33 :disabled="mode === 'global'"
34 :class="mode === 'global' ? 'border-b-primary text-text font-semibold' : 'border-b-bg text-text-muted'"
35 class="cursor-pointer w-1/2 py-2 px-4 border-b-2 transition-all"
36 >
37 Global
38 </button>
39 if params.User != nil {
40 <button
41 type="button"
42 hx-target="#study-feed"
43 id="friends-feed-button"
44 hx-swap="innerHTML"
45 hx-get="/feed?friends=true"
46 hx-disabled-elt="#friends-feed-button,#global-feed-button"
47 hx-indicator="#feed-spinner"
48 @click="mode = 'friends'"
49 :disabled="mode === 'friends'"
50 :class="mode === 'friends' ? 'border-b-primary text-text font-semibold' : 'border-b-bg text-text-muted'"
51 class="cursor-pointer w-1/2 py-2 px-4 border-b-2 transition-all"
52 >
53 Friends
54 </button>
55 } else {
56 <button
57 type="button"
58 disabled
59 id="friends-feed-button"
60 class="cursor-pointer text-text-muted disabled:cursor-not-allowed w-1/2 py-2 px-4 rounded-md font-semibold transition-all"
61 title="Login to see friends feed."
62 >
63 Friends
64 </button>
65 }
66 </div>
67 <div id="feed-spinner" class="htmx-indicator flex justify-center py-4">
68 <i data-lucide="loader-circle" class="w-6 h-6 animate-spin text-text-muted"></i>
69 </div>
70 </div>
71 <div>
72 <div id="study-feed" hx-trigger="load" hx-get="/feed?friends=false" class="flex flex-col gap-6">
73 <div class="flex justify-center py-4">
74 <i data-lucide="loader-circle" class="w-6 h-6 animate-spin text-text-muted"></i>
75 </div>
76 </div>
77 </div>
78 </div>
79 }
80}