Monorepo for Tangled
web: implement repo/new
Signed-off-by: oppiliappan <me@oppi.li>
oppiliappan
(Jul 15, 2026, 4:18 PM +0100)
e089a0c5
a64a68bf
+155
+6
web/src/routes/repo/new/+page.server.ts
+6
web/src/routes/repo/new/+page.server.ts
+149
web/src/routes/repo/new/+page.svelte
+149
web/src/routes/repo/new/+page.svelte
···
1
+
<script lang="ts">
2
+
import { getAuth } from "$lib/auth.svelte";
3
+
import Avatar from "$lib/components/ui/Avatar.svelte";
4
+
import Button from "$lib/components/ui/Button.svelte";
5
+
import Radio from "$lib/components/ui/Radio.svelte";
6
+
import BookPlus from "$icon/book-plus";
7
+
8
+
const auth = getAuth();
9
+
const user = $derived(auth.currentUser);
10
+
11
+
let repoName = $state("");
12
+
let description = $state("");
13
+
let defaultBranch = $state("main");
14
+
let selectedKnot = $state("knot1.tangled.sh");
15
+
16
+
const knots = ["knot1.tangled.sh"];
17
+
</script>
18
+
19
+
<svelte:head>
20
+
<title>New repository · Tangled</title>
21
+
</svelte:head>
22
+
23
+
<div class="mx-auto w-full max-w-2xl px-4 py-12">
24
+
<div class="px-6 py-2">
25
+
<h1 class="text-xl font-bold text-foreground-default">Create a new repository</h1>
26
+
<p class="text-sm text-foreground-subtle mb-1">
27
+
Repositories contain a project's files and version history. All repositories are publicly
28
+
accessible.
29
+
</p>
30
+
</div>
31
+
32
+
<div class="bg-background-default drop-shadow-sm rounded p-6">
33
+
<form>
34
+
<div class="flex gap-4 relative border-l border-border-default pl-6">
35
+
<div class="absolute -left-3 -top-0">
36
+
<div class="size-6 bg-background-inset rounded-full flex items-center justify-center text-sm font-medium mt-1 text-foreground-muted">
37
+
1
38
+
</div>
39
+
</div>
40
+
41
+
<div class="flex-1 pb-12">
42
+
<h2 class="text-lg font-medium text-foreground-default">General</h2>
43
+
<div class="text-sm text-foreground-subtle mb-4">Basic repository information.</div>
44
+
45
+
<div class="space-y-2">
46
+
<div>
47
+
<label class="block text-sm font-bold text-foreground-default mb-1">
48
+
Repository name
49
+
</label>
50
+
<div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0 w-full">
51
+
<div class="shrink-0 hidden md:flex items-center px-2 py-2 gap-1 text-sm text-foreground-muted md:border md:border-r-0 md:border-border-default md:rounded-l md:bg-background-inset">
52
+
<Avatar src={user?.avatar} handle={user?.handle} size="size-5" />
53
+
<span>{user?.handle ?? "…"}</span>
54
+
</div>
55
+
<input
56
+
id="name"
57
+
name="name"
58
+
type="text"
59
+
placeholder="repository-name"
60
+
bind:value={repoName}
61
+
required
62
+
class="flex-1 md:rounded-r md:rounded-l-none py-2 rounded border border-border-default bg-background-default text-sm text-foreground-default placeholder:text-foreground-placeholder focus:outline-none focus:ring-1 focus:ring-border-strong px-2"
63
+
/>
64
+
</div>
65
+
<p class="text-sm text-foreground-subtle mt-1">
66
+
Choose a unique, descriptive name for your repository. Use letters, numbers, and
67
+
hyphens.
68
+
</p>
69
+
</div>
70
+
71
+
<div>
72
+
<label for="description" class="block text-sm font-bold text-foreground-default mb-1">
73
+
Description
74
+
</label>
75
+
<input
76
+
id="description"
77
+
name="description"
78
+
type="text"
79
+
placeholder="A brief description of your project..."
80
+
maxlength={140}
81
+
bind:value={description}
82
+
class="w-full py-2 px-2 rounded border border-border-default bg-background-default text-sm text-foreground-default placeholder:text-foreground-placeholder focus:outline-none focus:ring-1 focus:ring-border-strong"
83
+
/>
84
+
<p class="text-sm text-foreground-subtle mt-1">
85
+
Optional. A short description to help others understand what your project does (max
86
+
140 characters).
87
+
</p>
88
+
</div>
89
+
</div>
90
+
</div>
91
+
</div>
92
+
93
+
<div class="flex gap-4 relative border-l border-border-default pl-6">
94
+
<div class="absolute -left-3 -top-0">
95
+
<div class="size-6 bg-background-inset rounded-full flex items-center justify-center text-sm font-medium mt-1 text-foreground-muted">
96
+
2
97
+
</div>
98
+
</div>
99
+
100
+
<div class="flex-1">
101
+
<h2 class="text-lg font-medium text-foreground-default">Configuration</h2>
102
+
<div class="text-sm text-foreground-subtle mb-4">Repository settings and hosting.</div>
103
+
104
+
<div class="space-y-2">
105
+
<div>
106
+
<label for="branch" class="block text-sm font-bold text-foreground-default mb-1">
107
+
Default branch
108
+
</label>
109
+
<input
110
+
id="branch"
111
+
name="branch"
112
+
type="text"
113
+
bind:value={defaultBranch}
114
+
required
115
+
class="w-full py-2 px-2 rounded border border-border-default bg-background-default text-sm text-foreground-default placeholder:text-foreground-placeholder focus:outline-none focus:ring-1 focus:ring-border-strong"
116
+
/>
117
+
<p class="text-sm text-foreground-subtle mt-1">
118
+
The primary branch where development happens. Common choices are "main" or "master".
119
+
</p>
120
+
</div>
121
+
122
+
<div>
123
+
<label class="block text-sm font-bold text-foreground-default mb-1">
124
+
Select a knot
125
+
</label>
126
+
<div class="w-full space-y-2">
127
+
{#each knots as knot}
128
+
<Radio value={knot} bind:group={selectedKnot} name="domain">
129
+
{knot}
130
+
</Radio>
131
+
{/each}
132
+
</div>
133
+
<p class="text-sm text-foreground-subtle mt-1">
134
+
A knot hosts repository data and handles Git operations. You can also
135
+
<a href="/settings/knots" class="underline">register your own knot</a>.
136
+
</p>
137
+
</div>
138
+
</div>
139
+
</div>
140
+
</div>
141
+
142
+
<div class="mt-8 flex justify-end">
143
+
<Button variant="primary" type="submit" icon={BookPlus}>
144
+
Create repository (TODO)
145
+
</Button>
146
+
</div>
147
+
</form>
148
+
</div>
149
+
</div>