tangled.org
Monorepo for Tangled
tangled.org
appview/pages: overhaul new repo page
Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
anirudh.fi
+144
-58
+142
-56
appview/pages/templates/repo/new.html
+142
-56
appview/pages/templates/repo/new.html
···
1
1
{{ define "title" }}new repo{{ end }}
2
2
3
3
{{ define "content" }}
4
-
<div class="p-6">
5
-
<p class="text-xl font-bold dark:text-white">Create a new repository</p>
4
+
<div class="px-6 py-2 mb-4">
5
+
<h1 class="text-xl font-bold dark:text-white mb-1">Create a new repository</h1>
6
+
<p class="text-gray-600 dark:text-gray-400 mb-1">
7
+
Repositories contain a project's files and version history.
8
+
</p>
6
9
</div>
7
-
<div class="p-6 bg-white dark:bg-gray-800 drop-shadow-sm rounded">
8
-
<form hx-post="/repo/new" class="space-y-12" hx-swap="none" hx-indicator="#spinner">
9
-
<div class="space-y-2">
10
-
<label for="name" class="-mb-1 dark:text-white">Repository name</label>
11
-
<input
12
-
type="text"
13
-
id="name"
14
-
name="name"
15
-
required
16
-
class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600"
17
-
/>
18
-
<p class="text-sm text-gray-500 dark:text-gray-400">All repositories are publicly visible.</p>
19
10
20
-
<label for="branch" class="dark:text-white">Default branch</label>
21
-
<input
22
-
type="text"
23
-
id="branch"
24
-
name="branch"
25
-
value="main"
26
-
required
27
-
class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600"
28
-
/>
11
+
<div class="bg-white dark:bg-gray-800 drop-shadow-sm rounded">
12
+
<form hx-post="/repo/new" hx-swap="none" hx-indicator="#spinner">
29
13
30
-
<label for="description" class="dark:text-white">Description</label>
31
-
<input
32
-
type="text"
33
-
id="description"
34
-
name="description"
35
-
class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600"
36
-
/>
37
-
</div>
14
+
<div class="p-6">
15
+
<!-- Step 1: General -->
16
+
<div class="flex gap-4">
17
+
<div class="flex flex-col items-center w-10 flex-shrink-0">
18
+
<div class="w-6 h-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-full flex items-center justify-center text-sm font-medium mt-1">
19
+
1
20
+
</div>
21
+
<div class="w-px bg-gray-300 dark:bg-gray-600 h-80 mt-1"></div>
22
+
</div>
23
+
<div class="flex-1">
24
+
<div class="mb-6">
25
+
<div class="text-lg font-semibold dark:text-white mb-1">General</div>
26
+
<div class="text-sm text-gray-500 dark:text-gray-400">Basic repository information.</div>
27
+
</div>
38
28
39
-
<fieldset class="space-y-3">
40
-
<legend class="dark:text-white">Select a knot</legend>
41
-
<div class="space-y-2">
42
-
<div class="flex flex-col">
43
-
{{ range .Knots }}
44
-
<div class="flex items-center">
45
-
<input
46
-
type="radio"
47
-
name="domain"
48
-
value="{{ . }}"
49
-
class="mr-2"
50
-
id="domain-{{ . }}"
29
+
<div class="space-y-2">
30
+
<!-- Repository Name with Owner -->
31
+
<div>
32
+
<label class="block text-sm font-bold uppercase dark:text-white mb-1">
33
+
Repository name
34
+
</label>
35
+
<div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0">
36
+
{{ if .LoggedInUser.Handle }}
37
+
<div class="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">
38
+
{{ template "user/fragments/picHandle" .LoggedInUser.Handle }}
39
+
<span class="md:hidden pr-2 py-2 text-gray-500 dark:text-gray-400">/</span>
40
+
</div>
41
+
<span class="hidden md:inline pr-2 py-2 text-gray-500 dark:text-gray-400 border-t border-b border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700">/</span>
42
+
{{ end }}
43
+
<input
44
+
type="text"
45
+
id="name"
46
+
name="name"
47
+
required
48
+
class="w-full max-w-md 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"
49
+
placeholder="repository-name"
51
50
/>
52
-
<label for="domain-{{ . }}" class="dark:text-white">{{ . }}</label>
51
+
</div>
52
+
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
53
+
Choose a unique, descriptive name for your repository. Use letters, numbers, and hyphens.
54
+
</p>
55
+
</div>
56
+
57
+
<!-- Description -->
58
+
<div>
59
+
<label for="description" class="block text-sm font-bold uppercase dark:text-white mb-1">
60
+
Description
61
+
</label>
62
+
<input
63
+
type="text"
64
+
id="description"
65
+
name="description"
66
+
class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
67
+
placeholder="A brief description of your project..."
68
+
/>
69
+
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
70
+
Optional. A short description to help others understand what your project does.
71
+
</p>
72
+
</div>
53
73
</div>
54
-
{{ else }}
55
-
<p class="dark:text-white">No knots available.</p>
56
-
{{ end }}
74
+
</div>
75
+
</div>
76
+
77
+
<!-- Step 2: Configuration -->
78
+
<div class="flex gap-4">
79
+
<div class="flex flex-col items-center w-10 flex-shrink-0">
80
+
<div class="w-6 h-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-full flex items-center justify-center text-sm font-medium mt-1">
81
+
2
82
+
</div>
83
+
</div>
84
+
<div class="flex-1">
85
+
<div class="mb-6">
86
+
<div class="text-lg font-semibold dark:text-white mb-1">Configuration</div>
87
+
<div class="text-sm text-gray-500 dark:text-gray-400">Repository settings and hosting.</div>
88
+
</div>
89
+
90
+
<div class="space-y-2">
91
+
<!-- Default Branch -->
92
+
<div>
93
+
<label for="branch" class="block text-sm font-bold uppercase dark:text-white mb-1">
94
+
Default branch
95
+
</label>
96
+
<input
97
+
type="text"
98
+
id="branch"
99
+
name="branch"
100
+
value="main"
101
+
required
102
+
class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded px-3 py-2"
103
+
/>
104
+
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
105
+
The primary branch where development happens. Common choices are "main" or "master".
106
+
</p>
107
+
</div>
108
+
109
+
<!-- Knot Selection -->
110
+
<div>
111
+
<label class="block text-sm font-bold uppercase dark:text-white mb-1">
112
+
Select a knot
113
+
</label>
114
+
<div class="w-full max-w-md dark:bg-gray-700 dark:text-white dark:border-gray-600 border border-gray-300 rounded p-3 space-y-2">
115
+
{{ range .Knots }}
116
+
<div class="flex items-center">
117
+
<input
118
+
type="radio"
119
+
name="domain"
120
+
value="{{ . }}"
121
+
class="mr-2"
122
+
id="domain-{{ . }}"
123
+
required
124
+
/>
125
+
<label for="domain-{{ . }}" class="dark:text-white lowercase">{{ . }}</label>
126
+
</div>
127
+
{{ else }}
128
+
<p class="dark:text-white">no knots available.</p>
129
+
{{ end }}
130
+
</div>
131
+
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
132
+
A knot hosts repository data and handles Git operations.
133
+
You can also <a href="/knots" class="underline">register your own knot</a>.
134
+
</p>
135
+
</div>
136
+
</div>
57
137
</div>
58
138
</div>
59
-
<p class="text-sm text-gray-500 dark:text-gray-400">A knot hosts repository data. <a href="/knots" class="underline">Learn how to register your own knot.</a></p>
60
-
</fieldset>
139
+
</div>
61
140
62
-
<div class="space-y-2">
141
+
<!-- Create Repository Button -->
142
+
<div class="p-6 border-t border-gray-200 dark:border-gray-700">
143
+
<div class="flex items-center justify-between">
144
+
<div class="text-sm text-gray-500 dark:text-gray-400">
145
+
All repositories are publicly accessible.
146
+
</div>
63
147
<button type="submit" class="btn-create flex items-center gap-2">
64
-
{{ i "book-plus" "w-4 h-4" }}
65
-
create repo
66
-
<span id="spinner" class="group">
67
-
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
68
-
</span>
148
+
{{ i "book-plus" "w-4 h-4" }}
149
+
create repo
150
+
<span id="spinner" class="group">
151
+
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
152
+
</span>
69
153
</button>
70
-
<div id="repo" class="error"></div>
154
+
</div>
155
+
<div id="repo" class="error mt-2"></div>
71
156
</div>
157
+
72
158
</form>
73
159
</div>
74
160
{{ end }}
+2
-2
appview/pages/templates/strings/put.html
+2
-2
appview/pages/templates/strings/put.html
···
3
3
{{ define "content" }}
4
4
<div class="px-6 py-2 mb-4">
5
5
{{ if eq .Action "new" }}
6
-
<p class="text-xl font-bold dark:text-white">Create a new string</p>
7
-
<p class="">Store and share code snippets with ease.</p>
6
+
<p class="text-xl font-bold dark:text-white mb-1">Create a new string</p>
7
+
<p class="text-gray-600 dark:text-gray-400 mb-1">Store and share code snippets with ease.</p>
8
8
{{ else }}
9
9
<p class="text-xl font-bold dark:text-white">Edit string</p>
10
10
{{ end }}