hearthforge

hearthforge/src/views/repos/NewFileForm.tsx
NewFileForm.tsx
⎇
Raw
1import { MAX_FILE_PATH_LENGTH } from "../../constants.ts";
2import type { RepositoryRow } from "../../db/index.ts";
3import type { SessionUser } from "../../middleware/session.ts";
4import { Layout } from "../layout.tsx";
5import { RepoHeader } from "../repos/RepoHeader.tsx";
6import { RepoNav } from "./RepoNav.tsx";
7
8interface NewFileFormProps {
9 user: SessionUser;
10 repo: RepositoryRow;
11 ref: string;
12 dir?: string;
13 error?: string;
14}
15
16export function NewFileForm({
17 user,
18 repo,
19 ref: treeRef,
20 dir,
21 error,
22}: NewFileFormProps) {
23 const defaultPath = dir ? `${dir}/` : "";
24 const cancelHref = dir
25 ? `/${repo.name}/tree/${treeRef}/${dir}`
26 : `/${repo.name}/tree/${treeRef}`;
27 return (
28 <Layout user={user} title={`New file — ${repo.name}`}>
29 <div class="container">
30 <RepoHeader repo={repo} />
31 <RepoNav repo={repo} active="code" user={user} />
32 {!!error && (
33 <p class="form-error" safe>
34 {error}
35 </p>
36 )}
37 <form
38 method="POST"
39 action={`/${repo.name}/new-file/${treeRef}`}
40 >
41 <div class="file-blob-header">
42 <span class="file-blob-name">New file</span>
43 <div class="file-blob-actions">
44 <a href={cancelHref} class="btn btn-sm">
45 Cancel
46 </a>
47 </div>
48 </div>
49 <div class="file-blob-body">
50 <textarea
51 name="content"
52 class="file-edit-textarea"
53 rows="20"
54 spellcheck="false"
55 autocorrect="off"
56 autocapitalize="off"
57 {...{ autocomplete: "off" }}
58 placeholder="File contents..."
59 />
60 </div>
61 <div class="form-card">
62 <p
63 class="form-hint"
64 style="margin-bottom: var(--space-4);"
65 >
66 Creating file on <strong safe>{treeRef}</strong>
67 </p>
68 <div class="form-group">
69 <label for="file-path">File path</label>
70 <input
71 id="file-path"
72 name="path"
73 type="text"
74 required
75 value={defaultPath}
76 placeholder="path/to/file.txt"
77 class="mono"
78 maxlength={MAX_FILE_PATH_LENGTH}
79 />
80 </div>
81 <div class="form-group">
82 <label for="message">Commit message</label>
83 <textarea
84 id="message"
85 name="message"
86 rows="3"
87 placeholder="Add new file"
88 />
89 </div>
90 <div class="form-actions">
91 <button type="submit" class="btn btn-primary">
92 Create file
93 </button>
94 <a href={cancelHref} class="btn">
95 Cancel
96 </a>
97 </div>
98 </div>
99 </form>
100 </div>
101 </Layout>
102 );
103}
104