project.html
220 lines1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
{{template "main.html" .}}
{{define "title"}}{{if explorer.Repo}}{{explorer.Repo.Name}}{{else}}Project{{end}} — Congo Dev{{end}}
{{define "content"}}
{{if explorer.Repo}}
<!-- Header -->
<div class="flex items-center gap-3 mb-4">
<a href="/" class="text-slate-300 hover:text-slate-500 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
</a>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2.5">
<h1 class="text-lg font-bold text-slate-800 truncate">{{explorer.Repo.Name}}</h1>
{{if explorer.Repo.Branch}}
<span class="text-[10px] font-mono text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded">{{explorer.Repo.Branch}}</span>
{{end}}
{{if explorer.Repo.StatusDetail}}
<span class="text-[10px] font-medium {{if eq explorer.Repo.StatusDetail "clean"}}text-emerald-500{{else}}text-amber-500{{end}}">{{explorer.Repo.StatusDetail}}</span>
{{end}}
</div>
{{if explorer.Repo.URL}}
<p class="text-[11px] text-slate-400 font-mono mt-0.5 truncate">{{explorer.Repo.ShortURL}}</p>
{{end}}
</div>
<div class="flex items-center gap-1 shrink-0">
<a href="/coder/?folder=/home/coder/repos/{{explorer.Repo.Name}}" target="_blank"
class="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg text-[11px] font-medium text-slate-500 bg-white border border-slate-200 hover:border-indigo-200 hover:text-indigo-600 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
Code
</a>
<button class="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg text-[11px] font-medium text-slate-500 bg-white border border-slate-200 hover:border-slate-300 hover:text-slate-700 transition-colors"
hx-post="/repos/{{explorer.Repo.ID}}/pull" hx-target="body">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
Pull
</button>
<button class="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg text-[11px] font-medium text-white bg-indigo-600 hover:bg-indigo-700 transition-colors"
hx-post="/services/deploy" hx-vals='{"repo_id": "{{explorer.Repo.ID}}"}' hx-target="body">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" /></svg>
Deploy
</button>
</div>
</div>
<!-- Two-Column Layout -->
<div class="grid grid-cols-1 lg:grid-cols-5 gap-4">
<!-- Left: Files -->
<div class="lg:col-span-3 space-y-4">
<!-- Files -->
<div class="bg-white rounded-xl border border-slate-200/60 overflow-hidden">
<div class="flex items-center justify-between px-4 py-2.5 border-b border-slate-100">
<h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Files</h3>
<span class="text-[10px] text-slate-300 font-mono">{{len explorer.Entries}} items</span>
</div>
{{if explorer.Entries}}
<div hx-boost="true">
{{range $entry := explorer.Entries}}
<a href="/repos/{{explorer.Repo.ID}}/files/{{$entry.Path}}" class="flex items-center justify-between gap-3 px-4 py-1.5 border-b border-slate-50 last:border-b-0 hover:bg-slate-50/80 transition-colors">
<div class="flex items-center gap-2.5 min-w-0">
{{if $entry.IsDir}}
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-indigo-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
{{else}}
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-slate-300 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
{{end}}
<span class="text-[12px] font-mono truncate {{if $entry.IsDir}}text-slate-700 font-medium{{else}}text-slate-500{{end}}">{{$entry.Name}}</span>
</div>
{{if $entry.Size}}<span class="text-[10px] text-slate-300 font-mono shrink-0">{{$entry.Size}}</span>{{end}}
</a>
{{end}}
</div>
{{else}}
<div class="px-4 py-8 text-center text-slate-400 text-sm">Empty repository</div>
{{end}}
</div>
<!-- infra.json -->
{{if explorer.HasInfra}}
{{with explorer.Infra}}
<div class="bg-white rounded-xl border border-slate-200/60 overflow-hidden">
<div class="px-4 py-2.5 border-b border-slate-100">
<div class="flex items-center gap-2">
<h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Infrastructure</h3>
<span class="text-[10px] font-mono text-slate-300">infra.json</span>
</div>
</div>
<div class="p-4">
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4">
<div class="bg-slate-50 rounded-lg px-3 py-2">
<div class="text-[10px] font-semibold uppercase tracking-wider text-slate-400 mb-0.5">Platforms</div>
<div class="text-lg font-bold text-slate-700">{{len .Platforms}}</div>
</div>
<div class="bg-slate-50 rounded-lg px-3 py-2">
<div class="text-[10px] font-semibold uppercase tracking-wider text-slate-400 mb-0.5">Servers</div>
<div class="text-lg font-bold text-slate-700">{{len .Servers}}</div>
</div>
<div class="bg-slate-50 rounded-lg px-3 py-2">
<div class="text-[10px] font-semibold uppercase tracking-wider text-slate-400 mb-0.5">Services</div>
<div class="text-lg font-bold text-slate-700">{{len .Services}}</div>
</div>
<div class="bg-slate-50 rounded-lg px-3 py-2">
<div class="text-[10px] font-semibold uppercase tracking-wider text-slate-400 mb-0.5">Instances</div>
<div class="text-lg font-bold text-slate-700">{{len .Instances}}</div>
</div>
</div>
<details>
<summary class="flex items-center gap-2 cursor-pointer select-none py-1 group text-[11px]">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-slate-300 transition-transform [details[open]>&]:rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
<span class="font-medium text-slate-400 group-hover:text-slate-500 transition-colors">View raw</span>
</summary>
<pre class="mt-2 bg-slate-900 text-slate-300 rounded-lg p-3 text-[11px] font-mono max-h-64 overflow-auto whitespace-pre-wrap leading-relaxed"><code class="language-json">{{.Raw}}</code></pre>
</details>
</div>
</div>
{{end}}
{{end}}
</div>
<!-- Right: Services & Routes -->
<div class="lg:col-span-2 space-y-4">
<!-- Services from this repo -->
<div class="bg-white rounded-xl border border-slate-200/60">
<div class="flex items-center justify-between px-4 py-2.5 border-b border-slate-100">
<h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Services</h3>
{{if explorer.LinkedServices}}
<span class="text-[10px] font-mono text-slate-300">{{len explorer.LinkedServices}}</span>
{{end}}
</div>
{{if explorer.LinkedServices}}
<div class="divide-y divide-slate-50">
{{range $svc := explorer.LinkedServices}}
<a href="/services/{{$svc.ID}}" class="flex items-center gap-3 px-4 py-2.5 hover:bg-slate-50/80 transition-colors">
{{if eq $svc.Status "running"}}
<span class="w-2 h-2 rounded-full bg-emerald-500 shrink-0"></span>
{{else if eq $svc.Status "building"}}
<span class="w-2 h-2 rounded-full bg-amber-400 animate-pulse shrink-0"></span>
{{else if eq $svc.Status "failed"}}
<span class="w-2 h-2 rounded-full bg-red-500 shrink-0"></span>
{{else}}
<span class="w-2 h-2 rounded-full bg-slate-300 shrink-0"></span>
{{end}}
<div class="flex-1 min-w-0">
<div class="text-[13px] font-medium text-slate-700 truncate">{{$svc.Name}}</div>
<div class="text-[10px] font-mono text-slate-400">svc-{{$svc.Slug}} · :{{$svc.Port}}</div>
</div>
<span class="text-[10px] font-medium px-1.5 py-0.5 rounded-full
{{if eq $svc.Status "running"}}text-emerald-600 bg-emerald-50
{{else if eq $svc.Status "failed"}}text-red-600 bg-red-50
{{else if eq $svc.Status "building"}}text-amber-600 bg-amber-50
{{else}}text-slate-400 bg-slate-100{{end}}">{{$svc.Status}}</span>
</a>
{{end}}
</div>
{{else}}
<div class="px-4 py-6 text-center">
<p class="text-[12px] text-slate-400 mb-2">No services deployed</p>
<button class="inline-flex items-center gap-1.5 px-3 h-7 rounded-lg text-[11px] font-medium text-white bg-indigo-600 hover:bg-indigo-700 transition-colors"
hx-post="/services/deploy" hx-vals='{"repo_id": "{{explorer.Repo.ID}}"}' hx-target="body">
Deploy
</button>
</div>
{{end}}
</div>
<!-- Routes -->
{{if explorer.LinkedRoutes}}
<div class="bg-white rounded-xl border border-slate-200/60">
<div class="flex items-center justify-between px-4 py-2.5 border-b border-slate-100">
<h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Routes</h3>
<span class="text-[10px] font-mono text-slate-300">{{len explorer.LinkedRoutes}}</span>
</div>
<div class="divide-y divide-slate-50">
{{range $route := explorer.LinkedRoutes}}
<div class="flex items-center gap-2.5 px-4 py-2 text-[12px]">
{{if $route.Active}}
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 shrink-0"></span>
{{else}}
<span class="w-1.5 h-1.5 rounded-full bg-slate-300 shrink-0"></span>
{{end}}
<span class="text-slate-600 font-mono truncate flex-1">{{$route.Host}}</span>
<span class="text-slate-300">→</span>
<span class="text-slate-400 font-mono shrink-0 text-[11px]">{{$route.Target}}:{{$route.Port}}</span>
</div>
{{end}}
</div>
</div>
{{end}}
<!-- Quick Actions -->
<div class="bg-white rounded-xl border border-slate-200/60">
<div class="px-4 py-2.5 border-b border-slate-100">
<h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Actions</h3>
</div>
<div class="p-3 space-y-1.5">
<a href="/repos/{{explorer.Repo.ID}}/files" hx-boost="true"
class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-[12px] text-slate-600 hover:bg-slate-50 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
Browse all files
</a>
<a href="/coder/?folder=/home/coder/repos/{{explorer.Repo.Name}}" target="_blank"
class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-[12px] text-slate-600 hover:bg-slate-50 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
Open in VS Code
</a>
<button class="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-[12px] text-red-400 hover:bg-red-50 transition-colors"
hx-post="/repos/{{explorer.Repo.ID}}/delete" hx-confirm="Delete {{explorer.Repo.Name}}?" hx-target="body">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
Delete project
</button>
</div>
</div>
</div>
</div>
{{else}}
<div class="text-center py-16">
<p class="text-slate-400 mb-3 text-sm">Project not found</p>
<a href="/" class="text-indigo-500 hover:text-indigo-600 text-sm">Back to Dashboard</a>
</div>
{{end}}
{{end}}