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="typography-heading-4 font-bold text-foreground-default">Create a new repository</h1>
27 <p class="mb-1 typography-paragraph-small 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-sm 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 typography-paragraph-small font-medium text-foreground-muted"
39 >
40 1
41 </div>
42 </div>
43
44 <div class="flex-1 pb-12">
45 <h2 class="typography-paragraph-large font-medium text-foreground-default">General</h2>
46 <div class="mb-4 typography-paragraph-small text-foreground-subtle">Basic repository information.</div>
47
48 <div class="space-y-2">
49 <div>
50 <label class="mb-1 block typography-paragraph-small 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 p-2 typography-paragraph-small 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 did={user?.did} handle={user?.handle} size="regular" />
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-sm border border-border-default bg-background-default p-2 typography-paragraph-small 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 typography-paragraph-small 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 typography-paragraph-small 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-sm border border-border-default bg-background-default p-2 typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
88 />
89 <p class="mt-1 typography-paragraph-small 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 typography-paragraph-small font-medium text-foreground-muted"
102 >
103 2
104 </div>
105 </div>
106
107 <div class="flex-1">
108 <h2 class="typography-paragraph-large font-medium text-foreground-default">
109 Configuration
110 </h2>
111 <div class="mb-4 typography-paragraph-small text-foreground-subtle">Repository settings and hosting.</div>
112
113 <div class="space-y-2">
114 <div>
115 <label for="branch" class="mb-1 block typography-paragraph-small font-bold text-foreground-default">
116 Default branch
117 </label>
118 <input
119 id="branch"
120 name="branch"
121 type="text"
122 bind:value={defaultBranch}
123 required
124 class="w-full rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
125 />
126 <p class="mt-1 typography-paragraph-small text-foreground-subtle">
127 The primary branch where development happens. Common choices are "main" or "master".
128 </p>
129 </div>
130
131 <div>
132 <label class="mb-1 block typography-paragraph-small font-bold text-foreground-default">
133 Select a knot
134 </label>
135 <div class="w-full space-y-2">
136 {#each knots as knot (knot)}
137 <Radio value={knot} bind:group={selectedKnot} name="domain">
138 {knot}
139 </Radio>
140 {/each}
141 </div>
142 <p class="mt-1 typography-paragraph-small text-foreground-subtle">
143 A knot hosts repository data and handles Git operations. You can also
144 <a href={resolve("/settings/knots" as "/")} class="underline"
145 >register your own knot</a
146 >.
147 </p>
148 </div>
149 </div>
150 </div>
151 </div>
152
153 <div class="mt-8 flex justify-end">
154 <Button variant="primary" type="submit" icon={BookPlus}>Create repository (TODO)</Button>
155 </div>
156 </form>
157 </div>
158</div>