hearthforge

hearthforge/src/views/repos/NewFileForm.tsx
NewFileForm.tsx
⎇
Raw
1import type { RepositoryRow } from "../../db/index.ts";
2import type { SessionUser } from "../../middleware/session.ts";
3import { MAX_FILE_PATH_LENGTH } from "../../constants.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 && <p class="form-error">{error}</p>}
33 <form
34 method="POST"
35 action={`/${repo.name}/new-file/${treeRef}`}
36 >
37 <div class="file-blob-header">
38 <span class="file-blob-name">New file</span>
39 <div class="file-blob-actions">
40 <a href={cancelHref} class="btn btn-sm">
41 Cancel
42 </a>
43 </div>
44 </div>
45 <div class="file-blob-body">
46 <textarea
47 name="content"
48 class="file-edit-textarea"
49 rows="20"
50 spellcheck="false"
51 autocorrect="off"
52 autocapitalize="off"
53 {...{ autocomplete: "off" }}
54 placeholder="File contents..."
55 />
56 </div>
57 <div class="form-card">
58 <p
59 class="form-hint"
60 style="margin-bottom: var(--space-4);"
61 >
62 Creating file on <strong>{treeRef}</strong>
63 </p>
64 <div class="form-group">
65 <label for="file-path">File path</label>
66 <input
67 id="file-path"
68 name="path"
69 type="text"
70 required
71 value={defaultPath}
72 placeholder="path/to/file.txt"
73 class="mono"
74 maxlength={MAX_FILE_PATH_LENGTH}
75 />
76 </div>
77 <div class="form-group">
78 <label for="message">Commit message</label>
79 <textarea
80 id="message"
81 name="message"
82 rows="3"
83 placeholder="Add new file"
84 />
85 </div>
86 <div class="form-actions">
87 <button type="submit" class="btn btn-primary">
88 Create file
89 </button>
90 <a href={cancelHref} class="btn">
91 Cancel
92 </a>
93 </div>
94 </div>
95 </form>
96 </div>
97 </Layout>
98 );
99}
100