Monorepo for Tangled
appview/pages: show onboarding progress in home and settings
if onboarding is quit midway, show the progress status in the home page
and the settings/profile pages
Signed-off-by: oppiliappan <me@oppi.li>
oppiliappan
(Jul 7, 2026, 5:27 PM +0100)
8a3b1ca5
1ed3d894
+41
-1
+1
appview/pages/pages.go
+1
appview/pages/pages.go
+8
appview/pages/templates/onboarding/fragments/progress.html
+8
appview/pages/templates/onboarding/fragments/progress.html
···
1
+
{{ define "onboarding/progressBar" }}
2
+
<div class="flex items-center gap-2">
3
+
<span class="text-xs tabular-nums text-gray-500 dark:text-gray-400 shrink-0">{{ .Step }}/{{ .Total }}</span>
4
+
<div class="h-1 flex-1 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
5
+
<div class="h-full rounded-full bg-indigo-500" style="width: {{ .Percent }}%"></div>
6
+
</div>
7
+
</div>
8
+
{{ end }}
+19
appview/pages/templates/timeline/fragments/welcome.html
+19
appview/pages/templates/timeline/fragments/welcome.html
···
1
+
{{ define "timeline/fragments/welcome" }}
2
+
<div class="border border-gray-200 dark:border-gray-700 rounded-sm divide-y divide-gray-200 dark:divide-gray-700">
3
+
<div class="flex items-center justify-between bg-white/50 dark:bg-gray-800/50">
4
+
<h3 class="text-base dark:text-white flex items-center gap-2 px-4 py-2">
5
+
{{ i "sparkle" "size-4 flex-shrink-0" }}
6
+
Welcome
7
+
</h3>
8
+
<a href="/welcome" class="text-sm font-normal flex items-center gap-1 pr-4 text-gray-500 dark:text-gray-400 no-underline hover:no-underline">
9
+
Continue {{ i "arrow-right" "size-3.5" }}
10
+
</a>
11
+
</div>
12
+
<div class="flex flex-col gap-3 px-4 py-3 bg-white dark:bg-gray-800">
13
+
<p class="text-sm text-gray-500 dark:text-gray-400">
14
+
Continue where you left off to finish setting up your account.
15
+
</p>
16
+
{{ template "onboarding/progressBar" .Onboarding }}
17
+
</div>
18
+
</div>
19
+
{{ end }}
+3
appview/pages/templates/timeline/timeline.html
+3
appview/pages/templates/timeline/timeline.html
···
17
17
<div id="timeline-grid" class="flex flex-col w-full max-w-[1920px] mx-auto md:grid md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_minmax(0,1fr)] md:items-start">
18
18
19
19
<div class="hidden md:flex md:flex-col md:gap-4 md:pt-4 md:px-4 md:sticky md:top-0 md:h-screen md:overflow-y-auto md:pb-4 md:w-full md:max-w-[400px]">
20
+
{{ if .Onboarding.Active }}
21
+
{{ template "timeline/fragments/welcome" . }}
22
+
{{ end }}
20
23
{{ template "timeline/fragments/notifications" . }}
21
24
{{ template "timeline/fragments/recents" . }}
22
25
</div>
+1
-1
appview/settings/settings.go
+1
-1
appview/settings/settings.go
···
268
268
// TODO: bring the user state from DB instead of PDS request
269
269
isDeactivated := s.isAccountDeactivated(r.Context(), syntax.DID(user.Did))
270
270
271
-
s.Pages.UserProfileSettings(w, pages.UserProfileSettingsParams{
271
+
err = s.Pages.UserProfileSettings(w, pages.UserProfileSettingsParams{
272
272
BaseParams: pages.BaseParamsFromContext(r.Context()),
273
273
PunchcardPreference: punchcardPreferences,
274
274
IsTnglSh: isTnglSh,
+9
appview/timeline/timeline.go
+9
appview/timeline/timeline.go
···
105
105
}
106
106
}
107
107
108
+
var onboarding *models.Onboarding
109
+
if user != nil {
110
+
onboarding, err = db.GetOnboarding(t.db, user.Did)
111
+
if err != nil {
112
+
t.logger.Error("failed to get onboarding status", "err", err)
113
+
}
114
+
}
115
+
108
116
var canFocus bool
109
117
if user != nil {
110
118
focusCount, _ := db.CountFocusNotifs(t.db, user.Did)
···
113
121
114
122
err = t.pages.Timeline(w, pages.TimelineParams{
115
123
BaseParams: pages.BaseParamsFromContext(r.Context()),
124
+
Onboarding: onboarding.Progress(),
116
125
Timeline: timeline,
117
126
Repos: repos,
118
127
GfiLabel: gfiLabel,