1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>{% block title %}td{% endblock %}</title>
7 <link rel="stylesheet" href="/static/oat.min.css">
8 <link rel="stylesheet" href="/static/td.css">
9 <script src="/static/oat.min.js" defer></script>
10 <script src="/static/td.js" defer></script>
11</head>
12<body data-sidebar-layout>
13 <a href="#main-content" class="skip-link">Skip to main content</a>
14
15 <nav data-topnav>
16 <button data-sidebar-toggle aria-label="Toggle sidebar" class="outline">☰</button>
17 <strong>td</strong>
18 </nav>
19
20 <aside data-sidebar>
21 <nav aria-label="Project navigation">
22 <ul>
23 <li><a href="/"{% if active_project.is_none() %} aria-current="page"{% endif %}>All projects</a></li>
24 {% for p in all_projects %}
25 <li>
26 <a href="/projects/{{ p }}"{% if active_project.as_deref() == Some(p.as_str()) %} aria-current="page"{% endif %}>{{ p }}</a>
27 </li>
28 {% endfor %}
29 </ul>
30 </nav>
31 </aside>
32
33 <main id="main-content" tabindex="-1">
34 <div class="container p-4">
35 {% block content %}{% endblock %}
36 </div>
37 </main>
38
39 <!-- FAB -->
40 <div class="fab-group" id="fab-group">
41 <div class="fab-actions" id="fab-actions" hidden>
42 <button commandfor="dlg-new-task" command="show-modal" class="fab-action" aria-label="New task">
43 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344"/><path d="m9 11 3 3L22 4"/></svg>
44 <span>Task</span>
45 </button>
46 <button commandfor="dlg-new-project" command="show-modal" class="fab-action" aria-label="New project">
47 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 10v6"/><path d="M9 13h6"/><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
48 <span>Project</span>
49 </button>
50 </div>
51 <button class="fab-toggle" id="fab-toggle" aria-label="Create new…" aria-expanded="false">
52 <svg class="fab-icon-plus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
53 <svg class="fab-icon-close" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
54 </button>
55 </div>
56
57 <!-- New task dialog -->
58 <dialog id="dlg-new-task" closedby="any">
59 <form method="post" id="form-new-task">
60 <header>
61 <h3>New task</h3>
62 </header>
63 <div class="vstack">
64 <div data-field>
65 <label for="nt-project">Project</label>
66 <select id="nt-project" aria-label="Project" required>
67 <option value=""{% if active_project.is_none() %} selected{% endif %}>Select project…</option>
68 {% for p in all_projects %}
69 <option value="{{ p }}"{% if active_project.as_deref() == Some(p.as_str()) %} selected{% endif %}>{{ p }}</option>
70 {% endfor %}
71 </select>
72 </div>
73 <label data-field>
74 Title
75 <input type="text" id="nt-title" name="title" required>
76 </label>
77 <label data-field>
78 Description
79 <textarea id="nt-desc" name="description" rows="3"></textarea>
80 </label>
81 <div class="hstack gap-2">
82 <div data-field>
83 <label for="nt-type">Type</label>
84 <select id="nt-type" name="task_type">
85 <option value="task" selected>Task</option>
86 <option value="bug">Bug</option>
87 <option value="feature">Feature</option>
88 </select>
89 </div>
90 <div data-field>
91 <label for="nt-priority">Priority</label>
92 <select id="nt-priority" name="priority">
93 <option value="high">High</option>
94 <option value="medium" selected>Medium</option>
95 <option value="low">Low</option>
96 </select>
97 </div>
98 <div data-field>
99 <label for="nt-effort">Effort</label>
100 <select id="nt-effort" name="effort">
101 <option value="low">Low</option>
102 <option value="medium" selected>Medium</option>
103 <option value="high">High</option>
104 </select>
105 </div>
106 </div>
107 <label data-field>
108 Labels <small class="text-light">(comma-separated)</small>
109 <input type="text" name="labels" placeholder="frontend, urgent">
110 </label>
111 <label data-field>
112 Parent task ID <small class="text-light">(optional)</small>
113 <input type="text" name="parent" placeholder="td-XXXXXXX">
114 </label>
115 </div>
116 <footer>
117 <button type="button" commandfor="dlg-new-task" command="close" class="outline">Cancel</button>
118 <button type="submit">Create</button>
119 </footer>
120 </form>
121 </dialog>
122
123 <!-- New project dialog -->
124 <dialog id="dlg-new-project" closedby="any">
125 <form method="post" action="/projects">
126 <header>
127 <h3>New project</h3>
128 </header>
129 <div class="vstack">
130 <label data-field>
131 Project name
132 <input type="text" name="name" required placeholder="my-project">
133 </label>
134 <label data-field>
135 Bind path <small class="text-light">(optional directory to link)</small>
136 <input type="text" name="bind_path" placeholder="/home/user/repos/project">
137 </label>
138 </div>
139 <footer>
140 <button type="button" commandfor="dlg-new-project" command="close" class="outline">Cancel</button>
141 <button type="submit">Create</button>
142 </footer>
143 </form>
144 </dialog>
145</body>
146</html>