Monorepo for Tangled
appview/repo/fork: revamp
Signed-off-by: eti <eti@eti.tf>
+149
-37
+149
-37
appview/pages/templates/repo/fork.html
+149
-37
appview/pages/templates/repo/fork.html
···
1
1
{{ define "title" }}fork · {{ .RepoInfo.FullName }}{{ end }}
2
2
3
3
{{ define "content" }}
4
-
<div class="p-6">
5
-
<p class="text-xl font-bold dark:text-white">Fork {{ .RepoInfo.FullName }}</p>
6
-
</div>
7
-
<div class="p-6 bg-white dark:bg-gray-800 drop-shadow-sm rounded">
8
-
<form hx-post="/{{ .RepoInfo.FullName }}/fork" class="space-y-12" hx-swap="none" hx-indicator="#spinner">
4
+
<div class="grid grid-cols-12">
5
+
<div class="col-span-full md:col-start-3 md:col-span-8 p-4 pb-2 mb-4">
6
+
<h1 class="text-xl dark:text-white mb-1 flex items-center gap-2 flex-wrap">
7
+
{{ i "git-fork" "size-5 shrink-0" }}
8
+
Fork
9
+
<span class="flex items-center gap-1 font-normal">
10
+
{{ template "user/fragments/picHandleLink" .RepoInfo.OwnerDid }}
11
+
<span class="text-gray-400 dark:text-gray-500">/</span>
12
+
<span class="dark:text-white">{{ .RepoInfo.Name }}</span>
13
+
</span>
14
+
</h1>
15
+
</div>
16
+
17
+
<div class="col-span-full md:col-start-3 md:col-span-8 bg-white dark:bg-gray-800 drop-shadow-sm rounded overflow-hidden">
18
+
19
+
{{/* Info banner */}}
20
+
<div class="flex items-center gap-3 p-4 md:px-7 border-b border-gray-100 dark:border-gray-700">
21
+
{{ i "badge-info" "size-6 text-gray-500 dark:text-gray-400 mt-0.5" }}
22
+
<p class="text-sm">
23
+
A fork is a copy of a repository.
24
+
<br/>
25
+
Forking gives you your own copy of a repository to work on independently.
26
+
</p>
27
+
</div>
28
+
29
+
<form hx-post="/{{ .RepoInfo.FullName }}/fork" hx-swap="none" hx-indicator="#spinner" class="p-6 md:px-10 pb-0">
30
+
31
+
{{/* Step 1 — Details */}}
32
+
<div class="flex gap-4 relative border-l border-gray-200 dark:border-gray-700 pl-6 pb-6">
33
+
{{ template "fork/numberCircle" 1 }}
34
+
<div class="flex-1">
35
+
<h2 class="text-lg font-semibold dark:text-white">Details</h2>
9
36
10
-
<fieldset class="space-y-3">
11
-
<legend for="repo_name" class="dark:text-white">Repository name</legend>
12
-
<input type="text" id="repo_name" name="repo_name" value="{{ .RepoInfo.Name }}"
13
-
class="w-full p-2 border rounded bg-gray-100 dark:bg-gray-700 dark:text-white dark:border-gray-600" />
14
-
</fieldset>
37
+
<div class="space-y-4">
15
38
16
-
<fieldset class="space-y-3">
17
-
<legend class="dark:text-white">Select a knot to fork into</legend>
18
-
<div class="space-y-2">
19
-
<div class="flex flex-col">
20
-
{{ range .Knots }}
21
-
<div class="flex items-center">
22
-
<input
23
-
type="radio"
24
-
name="knot"
25
-
value="{{ . }}"
26
-
class="mr-2"
27
-
id="domain-{{ . }}"
28
-
{{if eq (len $.Knots) 1}}checked{{end}}
39
+
{{/* Repository name */}}
40
+
<div>
41
+
<label class="block text-sm font-bold uppercase dark:text-white mb-1">Repository name</label>
42
+
<div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0 w-full">
43
+
<div class="shrink-0 hidden md:flex items-center px-2 py-2 gap-1 text-sm text-gray-700 dark:text-gray-300 md:border md:border-r-0 md:border-gray-300 md:dark:border-gray-600 md:rounded-l md:bg-gray-50 md:dark:bg-gray-700">
44
+
{{ template "user/fragments/picHandle" .LoggedInUser.Did }}
45
+
</div>
46
+
<input
47
+
type="text"
48
+
id="repo_name"
49
+
name="repo_name"
50
+
value="{{ .RepoInfo.Name }}"
51
+
required
52
+
class="flex-1 dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded md:rounded-r md:rounded-l-none px-3 py-2"
29
53
/>
30
-
<label for="domain-{{ . }}" class="dark:text-white">{{ . }}</label>
54
+
</div>
55
+
</div>
56
+
57
+
{{/* Description */}}
58
+
<div>
59
+
<label for="fork_description" class="block text-sm font-bold uppercase dark:text-white mb-1">Description</label>
60
+
<input
61
+
type="text"
62
+
id="fork_description"
63
+
name="description"
64
+
value="{{ .RepoInfo.Description }}"
65
+
maxlength="140"
66
+
oninput="document.getElementById('fork-desc-count').textContent = this.value.length + '/140 characters'"
67
+
class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 border border-gray-300 rounded px-3 py-2"
68
+
placeholder="A brief description of your project..."
69
+
/>
70
+
<p id="fork-desc-count" class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ len .RepoInfo.Description }}/140 characters</p>
71
+
</div>
72
+
31
73
</div>
32
-
{{ else }}
33
-
<p class="dark:text-white">No knots available.</p>
34
-
{{ end }}
35
74
</div>
36
75
</div>
37
-
<p class="text-sm text-gray-500 dark:text-gray-400">A knot hosts repository data. <a href="/settings/knots" class="underline">Learn how to register your own knot.</a></p>
38
-
</fieldset>
76
+
77
+
{{/* Step 2 — Knot selection */}}
78
+
<div class="flex gap-4 relative border-l border-gray-200 dark:border-gray-700 pl-6 pb-6">
79
+
{{ template "fork/numberCircle" 2 }}
80
+
<div class="flex-1 flex flex-col gap-2">
81
+
<h2 class="text-lg font-semibold dark:text-white">Knot selection</h2>
82
+
83
+
<div class="space-y-4">
84
+
85
+
{{/* Knot info box */}}
86
+
<div id="knot-info" class="hidden flex gap-3 items-start bg-blue-50 dark:bg-blue-950 border border-blue-100 dark:border-blue-900 rounded p-3">
87
+
<div class="flex flex-col gap-1.5 flex-1 min-w-0">
88
+
<p class="text-sm font-medium dark:text-white">What is a knot?</p>
89
+
<p class="text-sm text-gray-600 dark:text-gray-400">Knots are lightweight servers for your repositories. Self-host one, or let Tangled manage it for you.</p>
90
+
<a href="/settings/knots" class="inline-flex items-center gap-1 text-sm underline dark:text-gray-300">
91
+
Learn how to register your own knot
92
+
{{ i "arrow-right" "size-3.5" }}
93
+
</a>
94
+
</div>
95
+
<button type="button" onclick="dismissKnotInfo()" class="shrink-0 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
96
+
{{ i "x" "size-4" }}
97
+
</button>
98
+
</div>
99
+
100
+
{{/* Knot list */}}
101
+
<div>
102
+
<label class="block text-sm font-bold uppercase dark:text-white mb-1">Select a knot</label>
103
+
<div class="w-full dark:bg-gray-800 dark:text-white dark:border-gray-700 space-y-2">
104
+
{{ range .Knots }}
105
+
<div class="flex items-center">
106
+
<input
107
+
type="radio"
108
+
name="knot"
109
+
value="{{ . }}"
110
+
id="knot-{{ . }}"
111
+
required
112
+
{{ if eq (len $.Knots) 1 }}checked{{ end }}
113
+
class="mr-2"
114
+
/>
115
+
<label for="knot-{{ . }}" class="dark:text-white">{{ . }}</label>
116
+
</div>
117
+
{{ else }}
118
+
<p class="text-sm text-gray-500 dark:text-gray-400">No knots available.</p>
119
+
{{ end }}
120
+
</div>
121
+
</div>
122
+
123
+
</div>
124
+
</div>
125
+
</div>
39
126
40
-
<div class="space-y-2">
41
-
<button type="submit" class="btn-create flex items-center gap-2">
42
-
{{ i "git-fork" "w-4 h-4" }}
127
+
<div class="py-8 flex justify-end border-l border-gray-200 dark:border-gray-700 pl-6">
128
+
<button type="submit" class="btn-create flex items-center gap-2">
129
+
{{ i "git-fork" "size-4" }}
43
130
fork repo
44
131
<span id="spinner" class="group">
45
-
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
132
+
{{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
46
133
</span>
47
-
</button>
48
-
<div id="repo" class="error"></div>
49
-
</div>
50
-
</form>
134
+
</button>
135
+
</div>
136
+
<div id="repo" class="error mt-2 hidden"></div>
137
+
138
+
</form>
139
+
</div>
51
140
</div>
141
+
142
+
<script>
143
+
const KNOT_INFO_KEY = 'fork-knot-info-dismissed';
144
+
145
+
function dismissKnotInfo() {
146
+
localStorage.setItem(KNOT_INFO_KEY, '1');
147
+
document.getElementById('knot-info').classList.add('hidden');
148
+
}
149
+
150
+
if (!localStorage.getItem(KNOT_INFO_KEY)) {
151
+
const el = document.getElementById('knot-info');
152
+
el.classList.remove('hidden');
153
+
el.classList.add('flex');
154
+
}
155
+
</script>
156
+
{{ end }}
157
+
158
+
{{ define "fork/numberCircle" }}
159
+
<div class="absolute top-px -left-[11px]">
160
+
<div class="size-6 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center text-sm font-medium dark:text-white">
161
+
{{.}}
162
+
</div>
163
+
</div>
52
164
{{ end }}