projects-panel.html
108 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
<!-- Projects Panel -->
<div class="bg-white rounded-xl border border-slate-200/60">
<div class="flex items-center justify-between px-4 pt-3 pb-1">
<h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Projects</h3>
<div class="flex gap-0.5">
<button class="w-6 h-6 inline-flex items-center justify-center rounded text-slate-300 hover:text-indigo-600 hover:bg-indigo-50 transition-colors" onclick="document.getElementById('new-project-modal').showModal()" title="New Congo Project">
<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="M12 4v16m8-8H4" /></svg>
</button>
<button class="w-6 h-6 inline-flex items-center justify-center rounded text-slate-300 hover:text-indigo-600 hover:bg-indigo-50 transition-colors" onclick="document.getElementById('clone-modal').showModal()" title="Clone">
<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>
</button>
</div>
</div>
{{if dashboard.Repositories}}
<div class="px-1 pb-2">
{{range $repo := dashboard.Repositories}}
{{template "project-card.html" $repo}}
{{end}}
</div>
{{else}}
<div class="text-center py-8 pb-6">
<p class="text-sm text-slate-400 mb-3">No projects yet</p>
<div class="flex gap-2 justify-center">
<button class="btn btn-primary btn-xs" onclick="document.getElementById('new-project-modal').showModal()">New Project</button>
<button class="btn btn-ghost btn-xs" onclick="document.getElementById('clone-modal').showModal()">Clone</button>
</div>
</div>
{{end}}
</div>
<!-- New Project Modal -->
<dialog id="new-project-modal" class="modal modal-bottom sm:modal-middle">
<div class="modal-box bg-white border border-slate-200 shadow-xl max-w-md p-5">
<h3 class="text-base font-bold text-slate-800 mb-0.5">New Congo Project</h3>
<p class="text-[11px] text-slate-400 mb-4">Scaffold with the Congo framework</p>
<form method="dialog"><button class="btn btn-sm btn-circle btn-ghost absolute right-3 top-3 text-slate-300">x</button></form>
<form hx-post="/repos/new" hx-target="body">
<div class="form-control mb-4">
<label class="floating-label">
<span>Project Name</span>
<input type="text" name="name" class="input input-bordered w-full" placeholder="my-app" required pattern="[a-z0-9_-]+" title="Lowercase letters, numbers, hyphens, underscores" />
</label>
</div>
<div class="mb-4">
<div class="text-[10px] font-semibold uppercase tracking-wider text-slate-400 mb-2">Exclude</div>
<div class="grid grid-cols-2 gap-2">
<label class="flex items-center gap-2 cursor-pointer text-[12px] text-slate-500"><input type="checkbox" name="no_frontend" class="checkbox checkbox-xs" /> No Frontend</label>
<label class="flex items-center gap-2 cursor-pointer text-[12px] text-slate-500"><input type="checkbox" name="no_database" class="checkbox checkbox-xs" /> No Database</label>
<label class="flex items-center gap-2 cursor-pointer text-[12px] text-slate-500"><input type="checkbox" name="no_assistant" class="checkbox checkbox-xs" /> No AI</label>
<label class="flex items-center gap-2 cursor-pointer text-[12px] text-slate-500"><input type="checkbox" name="no_platform" class="checkbox checkbox-xs" /> No Cloud</label>
</div>
</div>
<div class="flex justify-end gap-2">
<button type="button" class="btn btn-ghost btn-sm" onclick="document.getElementById('new-project-modal').close()">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm">Create</button>
</div>
</form>
</div>
<form method="dialog" class="modal-backdrop bg-black/10"><button>close</button></form>
</dialog>
<!-- Clone Modal -->
<dialog id="clone-modal" class="modal modal-bottom sm:modal-middle">
<div class="modal-box bg-white border border-slate-200 shadow-xl max-w-md p-5">
<h3 class="text-base font-bold text-slate-800 mb-0.5">Clone Repository</h3>
<p class="text-[11px] text-slate-400 mb-4">Import from a git URL</p>
<form method="dialog"><button class="btn btn-sm btn-circle btn-ghost absolute right-3 top-3 text-slate-300">x</button></form>
<form hx-post="/repos/clone" hx-target="body">
<div class="form-control mb-3">
<label class="floating-label"><span>Git URL</span>
<input type="text" name="url" class="input input-bordered w-full" placeholder="https://github.com/user/repo" required />
</label>
</div>
<div class="form-control mb-4">
<label class="floating-label"><span>Name (optional)</span>
<input type="text" name="name" class="input input-bordered w-full" placeholder="custom-name" />
</label>
</div>
<div class="flex justify-end gap-2">
<button type="button" class="btn btn-ghost btn-sm" onclick="document.getElementById('clone-modal').close()">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm">Clone</button>
</div>
</form>
</div>
<form method="dialog" class="modal-backdrop bg-black/10"><button>close</button></form>
</dialog>
<!-- Init Modal -->
<dialog id="init-modal" class="modal modal-bottom sm:modal-middle">
<div class="modal-box bg-white border border-slate-200 shadow-xl max-w-md p-5">
<h3 class="text-base font-bold text-slate-800 mb-0.5">New Repository</h3>
<p class="text-[11px] text-slate-400 mb-4">Initialize an empty git repo</p>
<form method="dialog"><button class="btn btn-sm btn-circle btn-ghost absolute right-3 top-3 text-slate-300">x</button></form>
<form hx-post="/repos/init" hx-target="body">
<div class="form-control mb-4">
<label class="floating-label"><span>Repository Name</span>
<input type="text" name="name" class="input input-bordered w-full" placeholder="my-project" required />
</label>
</div>
<div class="flex justify-end gap-2">
<button type="button" class="btn btn-ghost btn-sm" onclick="document.getElementById('init-modal').close()">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm">Create</button>
</div>
</form>
</div>
<form method="dialog" class="modal-backdrop bg-black/10"><button>close</button></form>
</dialog>