Monorepo for Tangled
tangled.org
appview/profile: improve styling for punchcard preferences
Signed-off-by: oppiliappan <me@oppi.li>
author
oppiliappan
date
(Feb 25, 2026, 6:44 AM UTC)
commit
7eb437a7
7eb437a713bfa2552cc72797d1a25132e097d66e
parent
2482a23f
2482a23f71f8a3acca4292dd6339f189005932e3
change-id
xpqzwzyk
xpqzwzykyozqkzsznqypsmqnynyzsuuy
+38
-65
+38
-65
appview/pages/templates/user/settings/profile.html
+38
-65
appview/pages/templates/user/settings/profile.html
···
4
4
<div class="p-6">
5
5
<p class="text-xl font-bold dark:text-white">Settings</p>
6
6
</div>
7
-
<div class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
8
-
<section class="w-full grid grid-cols-1 md:grid-cols-4 gap-6">
9
-
<div class="col-span-1">
10
-
{{ template "user/settings/fragments/sidebar" . }}
11
-
</div>
7
+
<div class="bg-white dark:bg-gray-800 p-6 rounded w-full mx-auto drop-shadow-sm dark:text-white">
8
+
<section class="grid grid-cols-1 md:grid-cols-4 gap-6">
9
+
{{ template "user/settings/fragments/sidebar" . }}
12
10
<div class="col-span-1 md:col-span-3 flex flex-col gap-6">
13
-
{{ template "profileInfo" . }}
11
+
{{ template "profile" . }}
12
+
{{ template "punchcard" . }}
14
13
</div>
15
14
</section>
16
15
</div>
17
16
{{ end }}
18
17
19
-
{{ define "profileInfo" }}
20
-
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
21
-
<div class="col-span-1 md:col-span-2">
22
-
<h2 class="text-sm pb-2 uppercase font-bold">Profile</h2>
23
-
<p class="text-gray-500 dark:text-gray-400">
24
-
Your account information from your AT Protocol identity.
25
-
</p>
26
-
</div>
27
-
<div class="col-span-1 md:col-span-1 md:justify-self-end">
28
-
</div>
29
-
</div>
30
-
<div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700 w-full">
31
-
<div class="flex items-center justify-between p-4">
32
-
<div class="hover:no-underline flex flex-col gap-1 min-w-0 max-w-[80%]">
33
-
<div class="flex flex-wrap text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
34
-
<span>Handle</span>
35
-
</div>
36
-
<span class="font-bold">
37
-
{{ resolve .LoggedInUser.Did }}
38
-
</span>
18
+
{{ define "profile" }}
19
+
<div>
20
+
<h2 class="text-sm uppercase font-bold">Profile</h2>
21
+
<p class="text-gray-500 dark:text-gray-400 pb-2">
22
+
Your account information from your AT Protocol identity.
23
+
</p>
24
+
<div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
25
+
<div class="flex flex-col gap-1 p-4">
26
+
<span class="text-sm text-gray-500 dark:text-gray-400">Handle</span>
27
+
<span class="font-bold">{{ resolve .LoggedInUser.Did }}</span>
39
28
</div>
40
-
</div>
41
-
<div class="flex items-center justify-between p-4">
42
-
<div class="hover:no-underline flex flex-col gap-1 min-w-0 max-w-[80%]">
43
-
<div class="flex flex-wrap text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
44
-
<span>Decentralized Identifier (DID)</span>
45
-
</div>
46
-
<span class="font-mono font-bold">
47
-
{{ .LoggedInUser.Did }}
48
-
</span>
29
+
<div class="flex flex-col gap-1 p-4">
30
+
<span class="text-sm text-gray-500 dark:text-gray-400">Decentralized Identifier (DID)</span>
31
+
<span class="font-mono font-bold">{{ .LoggedInUser.Did }}</span>
49
32
</div>
50
-
</div>
51
-
<div class="flex items-center justify-between p-4">
52
-
<div class="hover:no-underline flex flex-col gap-1 min-w-0 max-w-[80%]">
53
-
<div class="flex flex-wrap text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
54
-
<span>Personal Data Server (PDS)</span>
55
-
</div>
56
-
<span class="font-bold">
57
-
{{ .LoggedInUser.Pds }}
58
-
</span>
33
+
<div class="flex flex-col gap-1 p-4">
34
+
<span class="text-sm text-gray-500 dark:text-gray-400">Personal Data Server (PDS)</span>
35
+
<span class="font-bold">{{ .LoggedInUser.Pds }}</span>
59
36
</div>
60
37
</div>
61
38
</div>
62
-
<div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700 w-full">
63
-
<div class="flex items-center justify-between p-4">
64
-
<div class="hover:no-underline flex flex-col gap-1 min-w-0 max-w-[80%]">
65
-
<div class="flex flex-wrap text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
66
-
<span>Punchcard settings</span>
67
-
</div>
68
-
<form hx-post="/profile/punchcard" class="col-span-1 md:col-span-1 md:justify-self-end group flex gap-2 items-stretch">
69
-
<div>
70
-
<input type="checkbox" id="hideMine" name="hideMine" value="on" {{ if eq true $.PunchcardPreference.HideMine }}checked{{ end }}>
71
-
<label for="hideMine" class="my-0 py-0 normal-case font-normal">Hide mine</label>
72
-
</div>
73
-
<div>
74
-
<input type="checkbox" id="hideOthers" name="hideOthers" value="on" {{ if eq true $.PunchcardPreference.HideOthers }}checked{{ end }}>
75
-
<label for="hideOthers" class="my-0 py-0 normal-case font-normal">Hide others from me</label>
76
-
</div>
77
-
<button class="btn flex gap-2 items-center" type="submit">
78
-
{{ i "check" "size-4" }}
79
-
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
80
-
</button>
81
-
</form>
39
+
{{ end }}
40
+
41
+
{{ define "punchcard" }}
42
+
<div>
43
+
<h2 class="text-sm uppercase font-bold">Punchcard</h2>
44
+
<p class="text-gray-500 dark:text-gray-400 pb-2 ">
45
+
Configure punchcard visibility and preferences.
46
+
</p>
47
+
<form hx-post="/profile/punchcard" hx-trigger="change" hx-swap="none" class="flex flex-col gap-2">
48
+
<div class="flex items-center gap-2">
49
+
<input type="checkbox" id="hideMine" name="hideMine" value="on" {{ if eq true $.PunchcardPreference.HideMine }}checked{{ end }}>
50
+
<label for="hideMine" class="my-0 py-0 normal-case font-normal">Hide mine</label>
51
+
</div>
52
+
<div class="flex items-center gap-2">
53
+
<input type="checkbox" id="hideOthers" name="hideOthers" value="on" {{ if eq true $.PunchcardPreference.HideOthers }}checked{{ end }}>
54
+
<label for="hideOthers" class="my-0 py-0 normal-case font-normal">Hide others from me</label>
82
55
</div>
83
-
</div>
56
+
</form>
84
57
</div>
85
58
{{ end }}