tree.templ RawHistoryFolder

1// SPDX-License-Identifier: AGPL-3.0-or-later
2
3package web
4
5// Tree is a directory: the filter, the entries with their last commit, the
6// notes on what is left out, and the README of the directory below.
7templ Tree(l Layout, p TreePage) {
8	@Shell(l, nil) {
9		<div class="filter">
10			<label for="tree-filter" class="sr">filter</label>
11			<input
12				id="tree-filter"
13				type="search"
14				data-filter
15				placeholder="Filter this directory…"
16				autocomplete="off"
17				hx-on:input="let t = this.value.toLowerCase(); q('#tree-rows > tr').arr().forEach(r => r.hidden = !r.textContent.toLowerCase().includes(t)); take('data-cursor', '#tree-rows > tr:not([hidden])')"
18			/>
19		</div>
20		<table class="list tree" aria-label="Entries">
21			<thead>
22				<tr><th class="cur"></th><th class="c-kind"></th><th class="c-name">name</th><th class="c-size">size</th><th class="c-sub">last commit</th><th class="c-who">author</th><th class="c-when">date</th></tr>
23			</thead>
24			<tbody id="tree-rows" data-rows>
25				for _, r := range p.Rows {
26					@TreeRowView(r)
27				}
28			</tbody>
29		</table>
30		if len(p.Rows) == 0 {
31			<p class="lede dim">this directory is empty.</p>
32		}
33		for _, n := range p.Notes {
34			<p class="note">{ n }</p>
35		}
36		if p.Readme != nil {
37			@ReadmeCard(*p.Readme)
38		}
39	}
40}
41
42// TreeRowView is one entry of a directory. Glyph: ▾ directory, @ symbolic
43// link, + submodule, · file.
44templ TreeRowView(r TreeRow) {
45	<tr data-cursor?={ r.Cursor }>
46		<td class="cur" aria-hidden="true"></td>
47		<td class="c-kind" aria-hidden="true">{ r.Glyph }</td>
48		<td class="c-name">
49			if r.Href != "" {
50				<a href={ templ.SafeURL(r.Href) }>{ r.Name }</a>
51			} else {
52				{ r.Name }
53			}
54		</td>
55		<td class="c-size num dim">{ r.Size }</td>
56		<td class="c-sub dim">
57			if r.CHref != "" {
58				<a href={ templ.SafeURL(r.CHref) }>{ r.Subject }</a>
59			}
60		</td>
61		<td class="c-who dim">{ r.Author }</td>
62		<td class="c-when nowrap dim">
63			if r.WhenAt != "" {
64				<time datetime={ r.WhenAt } title={ r.WhenAt }>{ r.When }</time>
65			}
66		</td>
67	</tr>
68}