alice.pds.demo.boltless.dev
This repository has no description
appview/pages: rework knots pages to support new flow
Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.sh>
author
Anirudh Oppiliappan
committer
oppiliappan
date
(Aug 25, 2025, 4:58 PM +0100)
commit
0c03847b
0c03847bd18eeb7d94e9ea53c2f76b6eb7fafb80
parent
9b23cf54
9b23cf54fcaaa11d421a8dc807d23280d485e32d
change-id
kquvstnw
kquvstnwzquuvoyrvokrxktlqpwktmkt
+177
-119
-16
appview/pages/pages.go
-16
appview/pages/pages.go
···
367
367
return p.executePlain("knots/fragments/knotListing", w, params)
368
368
}
369
369
370
-
type KnotListingFullParams struct {
371
-
Registrations []db.Registration
372
-
}
373
-
374
-
func (p *Pages) KnotListingFull(w io.Writer, params KnotListingFullParams) error {
375
-
return p.executePlain("knots/fragments/knotListingFull", w, params)
376
-
}
377
-
378
-
type KnotSecretParams struct {
379
-
Secret string
380
-
}
381
-
382
-
func (p *Pages) KnotSecret(w io.Writer, params KnotSecretParams) error {
383
-
return p.executePlain("knots/fragments/secret", w, params)
384
-
}
385
-
386
370
type SpindlesParams struct {
387
371
LoggedInUser *oauth.User
388
372
Spindles []db.Spindle
+93
-28
appview/pages/templates/knots/dashboard.html
+93
-28
appview/pages/templates/knots/dashboard.html
···
1
-
{{ define "title" }}{{ .Registration.Domain }}{{ end }}
1
+
{{ define "title" }}{{ .Registration.Domain }} · knots{{ end }}
2
2
3
3
{{ define "content" }}
4
-
<div class="px-6 py-4">
5
-
<div class="flex justify-between items-center">
6
-
<div id="left-side" class="flex gap-2 items-center">
7
-
<h1 class="text-xl font-bold dark:text-white">
8
-
{{ .Registration.Domain }}
9
-
</h1>
10
-
<span class="text-gray-500 text-base">
11
-
{{ template "repo/fragments/shortTimeAgo" .Registration.Created }}
4
+
<div class="px-6 py-4">
5
+
<div class="flex justify-between items-center">
6
+
<h1 class="text-xl font-bold dark:text-white">{{ .Registration.Domain }}</h1>
7
+
<div id="right-side" class="flex gap-2">
8
+
{{ $style := "px-2 py-1 rounded flex items-center flex-shrink-0 gap-2" }}
9
+
{{ $isOwner := and .LoggedInUser (eq .LoggedInUser.Did .Registration.ByDid) }}
10
+
{{ if .Registration.IsRegistered }}
11
+
<span class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 {{$style}}">{{ i "shield-check" "w-4 h-4" }} verified</span>
12
+
{{ if $isOwner }}
13
+
{{ template "knots/fragments/addMemberModal" .Registration }}
14
+
{{ end }}
15
+
{{ else if .Registration.IsReadOnly }}
16
+
<span class="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 {{$style}}">
17
+
{{ i "shield-alert" "w-4 h-4" }} read-only
12
18
</span>
13
-
</div>
14
-
<div id="right-side" class="flex gap-2">
15
-
{{ $style := "px-2 py-1 rounded flex items-center flex-shrink-0 gap-2" }}
16
-
{{ if .Registration.Registered }}
17
-
<span class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 {{$style}}">{{ i "shield-check" "w-4 h-4" }} verified</span>
18
-
{{ template "knots/fragments/addMemberModal" .Registration }}
19
-
{{ else }}
20
-
<span class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 {{$style}}">{{ i "shield-off" "w-4 h-4" }} pending</span>
19
+
{{ if $isOwner }}
20
+
{{ block "retryButton" .Registration }} {{ end }}
21
+
{{ end }}
22
+
{{ else }}
23
+
<span class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 {{$style}}">{{ i "shield-off" "w-4 h-4" }} unverified</span>
24
+
{{ if $isOwner }}
25
+
{{ block "retryButton" .Registration }} {{ end }}
21
26
{{ end }}
22
-
</div>
27
+
{{ end }}
28
+
29
+
{{ if $isOwner }}
30
+
{{ block "deleteButton" .Registration }} {{ end }}
31
+
{{ end }}
23
32
</div>
24
-
<div id="operation-error" class="dark:text-red-400"></div>
25
33
</div>
34
+
<div id="operation-error" class="dark:text-red-400"></div>
35
+
</div>
26
36
27
-
{{ if .Members }}
28
-
<section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
29
-
<div class="flex flex-col gap-2">
30
-
{{ block "knotMember" . }} {{ end }}
31
-
</div>
32
-
</section>
33
-
{{ end }}
37
+
{{ if .Members }}
38
+
<section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
39
+
<div class="flex flex-col gap-2">
40
+
{{ block "member" . }} {{ end }}
41
+
</div>
42
+
</section>
43
+
{{ end }}
34
44
{{ end }}
35
45
36
-
{{ define "knotMember" }}
46
+
47
+
{{ define "member" }}
37
48
{{ range .Members }}
38
49
<div>
39
50
<div class="flex justify-between items-center">
···
41
52
{{ template "user/fragments/picHandleLink" . }}
42
53
<span class="ml-2 font-mono text-gray-500">{{.}}</span>
43
54
</div>
55
+
{{ if ne $.LoggedInUser.Did . }}
56
+
{{ block "removeMemberButton" (list $ . ) }} {{ end }}
57
+
{{ end }}
44
58
</div>
45
59
<div class="ml-2 pl-2 pt-2 border-l border-gray-200 dark:border-gray-700">
46
60
{{ $repos := index $.Repos . }}
···
53
67
</div>
54
68
{{ else }}
55
69
<div class="text-gray-500 dark:text-gray-400">
56
-
No repositories created yet.
70
+
No repositories configured yet.
57
71
</div>
58
72
{{ end }}
59
73
</div>
60
74
</div>
61
75
{{ end }}
62
76
{{ end }}
77
+
78
+
{{ define "deleteButton" }}
79
+
<button
80
+
class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2 group"
81
+
title="Delete knot"
82
+
hx-delete="/knots/{{ .Domain }}"
83
+
hx-swap="outerHTML"
84
+
hx-confirm="Are you sure you want to delete the knot '{{ .Domain }}'?"
85
+
hx-headers='{"shouldRedirect": "true"}'
86
+
>
87
+
{{ i "trash-2" "w-5 h-5" }}
88
+
<span class="hidden md:inline">delete</span>
89
+
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
90
+
</button>
91
+
{{ end }}
92
+
93
+
94
+
{{ define "retryButton" }}
95
+
<button
96
+
class="btn gap-2 group"
97
+
title="Retry knot verification"
98
+
hx-post="/knots/{{ .Domain }}/retry"
99
+
hx-swap="none"
100
+
hx-headers='{"shouldRefresh": "true"}'
101
+
>
102
+
{{ i "rotate-ccw" "w-5 h-5" }}
103
+
<span class="hidden md:inline">retry</span>
104
+
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
105
+
</button>
106
+
{{ end }}
107
+
108
+
109
+
{{ define "removeMemberButton" }}
110
+
{{ $root := index . 0 }}
111
+
{{ $member := index . 1 }}
112
+
{{ $memberHandle := resolve $member }}
113
+
<button
114
+
class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2 group"
115
+
title="Remove member"
116
+
hx-post="/knots/{{ $root.Registration.Domain }}/remove"
117
+
hx-swap="none"
118
+
hx-vals='{"member": "{{$member}}" }'
119
+
hx-confirm="Are you sure you want to remove {{ $memberHandle }} from this knot?"
120
+
>
121
+
{{ i "user-minus" "w-4 h-4" }}
122
+
remove
123
+
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
124
+
</button>
125
+
{{ end }}
126
+
127
+
+6
-7
appview/pages/templates/knots/fragments/addMemberModal.html
+6
-7
appview/pages/templates/knots/fragments/addMemberModal.html
···
1
1
{{ define "knots/fragments/addMemberModal" }}
2
2
<button
3
3
class="btn gap-2 group"
4
-
title="Add member to this spindle"
4
+
title="Add member to this knot"
5
5
popovertarget="add-member-{{ .Id }}"
6
6
popovertargetaction="toggle"
7
7
>
···
20
20
21
21
{{ define "addKnotMemberPopover" }}
22
22
<form
23
-
hx-put="/knots/{{ .Domain }}/member"
23
+
hx-post="/knots/{{ .Domain }}/add"
24
24
hx-indicator="#spinner"
25
25
hx-swap="none"
26
26
class="flex flex-col gap-2"
···
28
28
<label for="member-did-{{ .Id }}" class="uppercase p-0">
29
29
ADD MEMBER
30
30
</label>
31
-
<p class="text-sm text-gray-500 dark:text-gray-400">Members can create repositories on this knot.</p>
31
+
<p class="text-sm text-gray-500 dark:text-gray-400">Members can create repositories and run workflows on this knot.</p>
32
32
<input
33
33
type="text"
34
34
id="member-did-{{ .Id }}"
35
-
name="subject"
35
+
name="member"
36
36
required
37
37
placeholder="@foo.bsky.social"
38
38
/>
39
39
<div class="flex gap-2 pt-2">
40
-
<button
40
+
<button
41
41
type="button"
42
42
popovertarget="add-member-{{ .Id }}"
43
43
popovertargetaction="hide"
···
54
54
</div>
55
55
<div id="add-member-error-{{ .Id }}" class="text-red-500 dark:text-red-400"></div>
56
56
</form>
57
-
{{ end }}
58
-
57
+
{{ end }}
+46
-23
appview/pages/templates/knots/fragments/knotListing.html
+46
-23
appview/pages/templates/knots/fragments/knotListing.html
···
1
1
{{ define "knots/fragments/knotListing" }}
2
-
<div
3
-
id="knot-{{.Id}}"
4
-
hx-swap-oob="true"
5
-
class="flex items-center justify-between p-2 border-b border-gray-200 dark:border-gray-700">
6
-
{{ block "listLeftSide" . }} {{ end }}
7
-
{{ block "listRightSide" . }} {{ end }}
2
+
<div id="knot-{{.Id}}" class="flex items-center justify-between p-2 border-b border-gray-200 dark:border-gray-700">
3
+
{{ block "knotLeftSide" . }} {{ end }}
4
+
{{ block "knotRightSide" . }} {{ end }}
8
5
</div>
9
6
{{ end }}
10
7
11
-
{{ define "listLeftSide" }}
8
+
{{ define "knotLeftSide" }}
9
+
{{ if .Registered }}
10
+
<a href="/knots/{{ .Domain }}" class="hover:no-underline flex items-center gap-2 min-w-0 max-w-[60%]">
11
+
{{ i "hard-drive" "w-4 h-4" }}
12
+
<span class="hover:underline">
13
+
{{ .Domain }}
14
+
</span>
15
+
<span class="text-gray-500">
16
+
{{ template "repo/fragments/shortTimeAgo" .Created }}
17
+
</span>
18
+
</a>
19
+
{{ else }}
12
20
<div class="hover:no-underline flex items-center gap-2 min-w-0 max-w-[60%]">
13
21
{{ i "hard-drive" "w-4 h-4" }}
14
-
{{ if .Registered }}
15
-
<a href="/knots/{{ .Domain }}">
16
-
{{ .Domain }}
17
-
</a>
18
-
{{ else }}
19
-
{{ .Domain }}
20
-
{{ end }}
22
+
{{ .Domain }}
21
23
<span class="text-gray-500">
22
24
{{ template "repo/fragments/shortTimeAgo" .Created }}
23
25
</span>
24
26
</div>
27
+
{{ end }}
25
28
{{ end }}
26
29
27
-
{{ define "listRightSide" }}
30
+
{{ define "knotRightSide" }}
28
31
<div id="right-side" class="flex gap-2">
29
32
{{ $style := "px-2 py-1 rounded flex items-center flex-shrink-0 gap-2 text-sm" }}
30
33
{{ if .Registered }}
31
34
<span class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 {{$style}}">{{ i "shield-check" "w-4 h-4" }} verified</span>
32
35
{{ template "knots/fragments/addMemberModal" . }}
33
36
{{ else }}
34
-
<span class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 {{$style}}">{{ i "shield-off" "w-4 h-4" }} pending</span>
35
-
{{ block "initializeButton" . }} {{ end }}
37
+
<span class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 {{$style}}">
38
+
{{ i "shield-off" "w-4 h-4" }} unverified
39
+
</span>
40
+
{{ block "knotRetryButton" . }} {{ end }}
41
+
{{ block "knotDeleteButton" . }} {{ end }}
36
42
{{ end }}
37
43
</div>
38
44
{{ end }}
39
45
40
-
{{ define "initializeButton" }}
46
+
{{ define "knotDeleteButton" }}
41
47
<button
42
-
class="btn dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 flex gap-2 items-center group"
43
-
hx-post="/knots/{{ .Domain }}/init"
44
-
hx-swap="none"
48
+
class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2 group"
49
+
title="Delete knot"
50
+
hx-delete="/knots/{{ .Domain }}"
51
+
hx-swap="outerHTML"
52
+
hx-target="#knot-{{.Id}}"
53
+
hx-confirm="Are you sure you want to delete the knot '{{ .Domain }}'?"
45
54
>
46
-
{{ i "square-play" "w-5 h-5" }}
47
-
<span class="hidden md:inline">initialize</span>
55
+
{{ i "trash-2" "w-5 h-5" }}
56
+
<span class="hidden md:inline">delete</span>
48
57
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
49
58
</button>
50
59
{{ end }}
51
60
61
+
62
+
{{ define "knotRetryButton" }}
63
+
<button
64
+
class="btn gap-2 group"
65
+
title="Retry knot verification"
66
+
hx-post="/knots/{{ .Domain }}/retry"
67
+
hx-swap="none"
68
+
hx-target="#knot-{{.Id}}"
69
+
>
70
+
{{ i "rotate-ccw" "w-5 h-5" }}
71
+
<span class="hidden md:inline">retry</span>
72
+
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
73
+
</button>
74
+
{{ end }}
-18
appview/pages/templates/knots/fragments/knotListingFull.html
-18
appview/pages/templates/knots/fragments/knotListingFull.html
···
1
-
{{ define "knots/fragments/knotListingFull" }}
2
-
<section
3
-
id="knot-listing-full"
4
-
hx-swap-oob="true"
5
-
class="rounded w-full flex flex-col gap-2">
6
-
<h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">your knots</h2>
7
-
<div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 w-full">
8
-
{{ range $knot := .Registrations }}
9
-
{{ template "knots/fragments/knotListing" . }}
10
-
{{ else }}
11
-
<div class="flex items-center justify-center p-2 border-b border-gray-200 dark:border-gray-700 text-gray-500">
12
-
no knots registered yet
13
-
</div>
14
-
{{ end }}
15
-
</div>
16
-
<div id="operation-error" class="text-red-500 dark:text-red-400"></div>
17
-
</section>
18
-
{{ end }}
-10
appview/pages/templates/knots/fragments/secret.html
-10
appview/pages/templates/knots/fragments/secret.html
···
1
-
{{ define "knots/fragments/secret" }}
2
-
<div
3
-
id="secret"
4
-
hx-swap-oob="true"
5
-
class="bg-gray-50 dark:bg-gray-700 border border-black dark:border-gray-500 rounded px-6 py-2 w-full lg:w-3xl">
6
-
<h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">generated secret</h2>
7
-
<p class="pb-2">Configure your knot to use this secret, and then hit initialize.</p>
8
-
<span class="font-mono overflow-x">{{ .Secret }}</span>
9
-
</div>
10
-
{{ end }}
+22
-7
appview/pages/templates/knots/index.html
+22
-7
appview/pages/templates/knots/index.html
···
8
8
<section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
9
9
<div class="flex flex-col gap-6">
10
10
{{ block "about" . }} {{ end }}
11
-
{{ template "knots/fragments/knotListingFull" . }}
11
+
{{ block "list" . }} {{ end }}
12
12
{{ block "register" . }} {{ end }}
13
13
</div>
14
14
</section>
···
27
27
</section>
28
28
{{ end }}
29
29
30
+
{{ define "list" }}
31
+
<section class="rounded w-full flex flex-col gap-2">
32
+
<h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">your knots</h2>
33
+
<div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 w-full">
34
+
{{ range $registration := .Registrations }}
35
+
{{ template "knots/fragments/knotListing" . }}
36
+
{{ else }}
37
+
<div class="flex items-center justify-center p-2 border-b border-gray-200 dark:border-gray-700 text-gray-500">
38
+
no knots registered yet
39
+
</div>
40
+
{{ end }}
41
+
</div>
42
+
<div id="operation-error" class="text-red-500 dark:text-red-400"></div>
43
+
</section>
44
+
{{ end }}
45
+
30
46
{{ define "register" }}
31
-
<section class="rounded max-w-2xl flex flex-col gap-2">
47
+
<section class="rounded w-full lg:w-fit flex flex-col gap-2">
32
48
<h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">register a knot</h2>
33
-
<p class="mb-2 dark:text-gray-300">Enter the hostname of your knot to generate a key.</p>
49
+
<p class="mb-2 dark:text-gray-300">Enter the hostname of your knot to get started.</p>
34
50
<form
35
-
hx-post="/knots/key"
36
-
class="space-y-4"
51
+
hx-post="/knots/register"
52
+
class="max-w-2xl mb-2 space-y-4"
37
53
hx-indicator="#register-button"
38
54
hx-swap="none"
39
55
>
···
53
69
>
54
70
<span class="inline-flex items-center gap-2">
55
71
{{ i "plus" "w-4 h-4" }}
56
-
generate
72
+
register
57
73
</span>
58
74
<span class="pl-2 hidden group-[.htmx-request]:inline">
59
75
{{ i "loader-circle" "w-4 h-4 animate-spin" }}
···
64
80
<div id="registration-error" class="error dark:text-red-400"></div>
65
81
</form>
66
82
67
-
<div id="secret"></div>
68
83
</section>
69
84
{{ end }}
+2
-2
appview/pages/templates/spindles/fragments/addMemberModal.html
+2
-2
appview/pages/templates/spindles/fragments/addMemberModal.html
···
14
14
id="add-member-{{ .Instance }}"
15
15
popover
16
16
class="bg-white w-full md:w-96 dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50">
17
-
{{ block "addMemberPopover" . }} {{ end }}
17
+
{{ block "addSpindleMemberPopover" . }} {{ end }}
18
18
</div>
19
19
{{ end }}
20
20
21
-
{{ define "addMemberPopover" }}
21
+
{{ define "addSpindleMemberPopover" }}
22
22
<form
23
23
hx-post="/spindles/{{ .Instance }}/add"
24
24
hx-indicator="#spinner"
+8
-8
appview/pages/templates/spindles/fragments/spindleListing.html
+8
-8
appview/pages/templates/spindles/fragments/spindleListing.html
···
1
1
{{ define "spindles/fragments/spindleListing" }}
2
2
<div id="spindle-{{.Id}}" class="flex items-center justify-between p-2 border-b border-gray-200 dark:border-gray-700">
3
-
{{ block "leftSide" . }} {{ end }}
4
-
{{ block "rightSide" . }} {{ end }}
3
+
{{ block "spindleLeftSide" . }} {{ end }}
4
+
{{ block "spindleRightSide" . }} {{ end }}
5
5
</div>
6
6
{{ end }}
7
7
8
-
{{ define "leftSide" }}
8
+
{{ define "spindleLeftSide" }}
9
9
{{ if .Verified }}
10
10
<a href="/spindles/{{ .Instance }}" class="hover:no-underline flex items-center gap-2 min-w-0 max-w-[60%]">
11
11
{{ i "hard-drive" "w-4 h-4" }}
···
25
25
{{ end }}
26
26
{{ end }}
27
27
28
-
{{ define "rightSide" }}
28
+
{{ define "spindleRightSide" }}
29
29
<div id="right-side" class="flex gap-2">
30
30
{{ $style := "px-2 py-1 rounded flex items-center flex-shrink-0 gap-2 text-sm" }}
31
31
{{ if .Verified }}
···
33
33
{{ template "spindles/fragments/addMemberModal" . }}
34
34
{{ else }}
35
35
<span class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 {{$style}}">{{ i "shield-off" "w-4 h-4" }} unverified</span>
36
-
{{ block "retryButton" . }} {{ end }}
36
+
{{ block "spindleRetryButton" . }} {{ end }}
37
37
{{ end }}
38
-
{{ block "deleteButton" . }} {{ end }}
38
+
{{ block "spindleDeleteButton" . }} {{ end }}
39
39
</div>
40
40
{{ end }}
41
41
42
-
{{ define "deleteButton" }}
42
+
{{ define "spindleDeleteButton" }}
43
43
<button
44
44
class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2 group"
45
45
title="Delete spindle"
···
55
55
{{ end }}
56
56
57
57
58
-
{{ define "retryButton" }}
58
+
{{ define "spindleRetryButton" }}
59
59
<button
60
60
class="btn gap-2 group"
61
61
title="Retry spindle verification"