1
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
|
import { html, useMemo } from './vendor/htm-preact.js';
import { t } from './i18n.js';
import { Icon } from './icon.js';
import { formatSize } from './file-utils.js';
/**
* The smallest application this platform can host, and the proof that adding
* one costs nothing outside its own two files.
*
* Everything else in `docs/refactor-groups.md` §3 is asserted by tests that
* read source. This is the other kind of evidence: an app nobody wrote a line
* of plumbing for, that stores directories, appears as a tab, and lists files —
* because the registry entry beside it is genuinely all there is.
*
* **Not shipped to operators.** It is registered with `dev: true`, which keeps
* it out of the tab bar and the settings page unless the reader opts in with
* `?dev=1` (same shape as transport.js's `?trace=1`). Deleting the flag would
* put a toy app in everybody's group; deleting the app would leave the claim
* resting entirely on tests that read text.
*
* It takes the standard props — see `docs/apps.md` §2 — and reads
* `helloworldDirectories`, which nothing on the node knows about by name:
* `ops.set_app_directories` keys the row by whatever the app is called.
*/
function HelloWorldApp({ entries, availableEntries, helloworldDirectories, status }) {
const dirs = helloworldDirectories || [];
const pool = availableEntries || entries || [];
const files = useMemo(() => pool.filter((e) => {
const p = e.path || '';
return dirs.some((d) => p === d || p.startsWith(d + '/'));
}).slice(0, 200), [pool, dirs]);
if (status !== 'connected') {
return html`<p class="page-message">${t('status.connecting_short')}</p>`;
}
return html`
<div class="page-content">
<h2>${t('helloworld.greeting')}</h2>
${dirs.length === 0 ? html`
<p class="page-message">${t('helloworld.no_directory')}</p>
` : html`
<p class="settings-hint">
${t('helloworld.counted', { n: files.length })}
${' — '}${dirs.join(', ')}
</p>
<ul class="hw-list">
${files.map((e) => html`
<li key=${e.id} class="hw-item">
<${Icon} name="folder" />
<span class="hw-name">${e.name}</span>
<span class="hw-size">${formatSize(e.size || 0)}</span>
</li>
`)}
</ul>
`}
</div>
`;
}
export { HelloWorldApp };
|