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