Monorepo for Tangled
web/ui/components: 2nd batch 🍞
Signed-off-by: eti <eti@eti.tf>
+264
-201
+13
-14
web/src/routes/[handle]/+page.ts
+13
-14
web/src/routes/[handle]/+page.ts
···
141
141
did,
142
142
doc
143
143
? {
144
-
did: doc.did,
145
-
handle: doc.handle,
146
-
avatar: doc.avatar,
147
-
followers,
148
-
following,
149
-
isSelf,
150
-
viewerFollowRkey
151
-
}
144
+
did: doc.did,
145
+
handle: doc.handle,
146
+
avatar: doc.avatar,
147
+
followers,
148
+
following,
149
+
isSelf,
150
+
viewerFollowRkey
151
+
}
152
152
: { did, handle: did, followers, following, isSelf, viewerFollowRkey }
153
153
);
154
154
});
···
164
164
return Promise.all(
165
165
items.map(async (item): Promise<VouchData> => {
166
166
const value = item.value as VouchRecord;
167
-
const otherDid =
168
-
direction === "incoming" ? didFromUri(item.uri) : rkeyFromUri(item.uri);
167
+
const otherDid = direction === "incoming" ? didFromUri(item.uri) : rkeyFromUri(item.uri);
169
168
const doc = await cache.resolve(otherDid).catch(() => null);
170
169
return {
171
170
uri: item.uri,
···
240
239
const [found, viewerStarRkeys] = await Promise.all([
241
240
q
242
241
? search(ctx, { q, nsid: "sh.tangled.repo", author: did, limit: PAGE_LIMIT }).then(
243
-
(page) => page.hits
244
-
)
242
+
(page) => page.hits
243
+
)
245
244
: fetchPage(ctx, "sh.tangled.repo.listRepos", { subject: did, limit: PAGE_LIMIT }).then(
246
-
(page) => page.items
247
-
),
245
+
(page) => page.items
246
+
),
248
247
parent.auth?.did ? listStarRkeys(ctx, parent.auth.did) : undefined
249
248
]);
250
249
return {
+7
-4
web/src/lib/components/repo/StarButton.svelte
+7
-4
web/src/lib/components/repo/StarButton.svelte
···
67
67
<Button
68
68
variant="default"
69
69
size="sm"
70
-
class="min-h-[30px] flex-1 rounded-none border-0 before:rounded-none before:rounded-l-sm"
70
+
class="min-h-7.5 flex-1 rounded-none border-0 before:rounded-none before:rounded-l-sm"
71
71
loading={busy}
72
72
disabled={!relation.known}
73
73
onclick={toggle}
74
74
>
75
-
<Star class={`size-4 shrink-0 ${starred ? "[&_path]:fill-[currentColor]" : ""}`} aria-hidden="true" />
75
+
<Star
76
+
class={`size-4 shrink-0 ${starred ? "[&_path]:fill-[currentColor]" : ""}`}
77
+
aria-hidden="true"
78
+
/>
76
79
<span>{starred ? "Unstar" : "Star"}</span>
77
80
</Button>
78
81
<Button
79
82
href={`/${repoOwnerHandle}/${repoName}/stars`}
80
-
variant="flat"
83
+
variant="ghost"
81
84
size="sm"
82
-
class="min-h-[30px] rounded-none"
85
+
class="min-h-7.5 rounded-none"
83
86
title="Starred by"
84
87
>
85
88
{starCount.value}
+6
-6
web/src/lib/components/shell/Topbar.svelte
+6
-6
web/src/lib/components/shell/Topbar.svelte
···
15
15
import User from "$icon/user";
16
16
import UserRound from "$icon/user-round";
17
17
import Spinner from "../ui/Spinner.svelte";
18
-
import LogotypeSmall from "../ui/LogotypeSmall.svelte";
18
+
import Logo from "../ui/Logo.svelte";
19
19
import TopbarSearch from "./TopbarSearch.svelte";
20
20
21
21
interface User {
···
47
47
class="flex shrink-0 items-center gap-2 no-underline hover:no-underline"
48
48
>
49
49
<span class="hidden sm:inline-flex">
50
-
<LogotypeSmall />
50
+
<Logo wordmark alpha class="h-6.5" />
51
51
</span>
52
52
<span class="inline-flex sm:hidden">
53
53
<img src="/logos/dolly.svg" alt="tangled" class="size-8" />
···
112
112
{#if loading}
113
113
<div class="flex items-center gap-1" role="status" aria-label="Signing in">
114
114
<span
115
-
class="flex size-8 items-center justify-center rounded-full border border-border-default bg-background-inset text-foreground-placeholder md:size-[21px]"
115
+
class="flex size-8 items-center justify-center rounded-full border border-border-default bg-background-inset text-foreground-placeholder md:size-5"
116
116
>
117
117
<Spinner class="size-4" />
118
118
</span>
···
126
126
<img
127
127
src={user.avatar}
128
128
alt={user.handle}
129
-
class="size-8 rounded-full border border-border-default object-cover md:size-[21px]"
129
+
class="size-8 rounded-full border border-border-default object-cover md:size-5"
130
130
/>
131
131
{:else}
132
132
<span
133
-
class="flex size-8 items-center justify-center rounded-full border border-border-default bg-background-inset md:size-[21px]"
133
+
class="flex size-8 items-center justify-center rounded-full border border-border-default bg-background-inset md:size-5"
134
134
>
135
135
<UserRound
136
136
class="size-5 text-foreground-placeholder md:size-4"
···
152
152
</Dropdown>
153
153
{:else}
154
154
<div class="flex items-center gap-2" aria-hidden="true">
155
-
<span class="size-8 rounded-full bg-background-inset md:size-[21px]"></span>
155
+
<span class="size-8 rounded-full bg-background-inset md:size-5"></span>
156
156
<span class="hidden h-4 w-24 rounded bg-background-inset md:block"></span>
157
157
</div>
158
158
{/if}
+9
web/src/lib/components/ui/Button.stories.svelte
+9
web/src/lib/components/ui/Button.stories.svelte
···
15
15
control: { type: "inline-radio" },
16
16
options: ["sm", "md", "lg"]
17
17
},
18
+
insetShadow: { control: "boolean" },
18
19
disabled: { control: "boolean" },
19
20
loading: { control: "boolean" }
20
21
},
21
22
args: {
22
23
variant: "default",
23
24
size: "md",
25
+
insetShadow: false,
24
26
disabled: false,
25
27
loading: false
26
28
}
···
37
39
<Story name="Loading" args={{ variant: "primary", loading: true }}>Saving</Story>
38
40
<Story name="Disabled" args={{ disabled: true }}>Button</Story>
39
41
<Story name="Link" args={{ href: "/" }}>Go home</Story>
42
+
43
+
<Story name="Inset shadow" asChild>
44
+
<div class="flex items-center gap-3">
45
+
<Button insetShadow>Button</Button>
46
+
<Button variant="primary" insetShadow>Save</Button>
47
+
</div>
48
+
</Story>
40
49
41
50
<Story name="Sizes" asChild>
42
51
<div class="flex items-center gap-3">
+59
-32
web/src/lib/components/ui/Button.svelte
+59
-32
web/src/lib/components/ui/Button.svelte
···
2
2
import { tv, type VariantProps } from "tailwind-variants";
3
3
4
4
export const button = tv({
5
-
base: "inline-flex cursor-pointer select-none items-center justify-center overflow-hidden rounded-l-(--btn-radius-l) rounded-r-(--btn-radius-r) [--btn-radius:var(--radius-sm)] [--btn-radius-l:var(--btn-radius)] [--btn-radius-r:var(--btn-radius)] no-underline transition-colors duration-150 ease-in-out \
6
-
hover:no-underline \
7
-
focus-visible:outline-2 focus-visible:outline-offset-2 \
8
-
disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
5
+
base: [
6
+
"inline-flex cursor-pointer select-none items-center justify-center overflow-hidden rounded-l-(--btn-radius-l) rounded-r-(--btn-radius-r) [--btn-radius:var(--radius-sm)] [--btn-radius-l:var(--btn-radius)] [--btn-radius-r:var(--btn-radius)] no-underline",
7
+
"transition-colors duration-150 ease-in-out",
8
+
"hover:no-underline",
9
+
"focus-visible:outline-2 focus-visible:outline-offset-2",
10
+
"disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50"
11
+
],
9
12
variants: {
10
13
variant: {
11
-
default:
12
-
"border border-border-default bg-background-default text-foreground-default \
13
-
hover:bg-background-subtle focus-visible:outline-border-focus",
14
-
primary:
15
-
"border border-border-success bg-background-success-emphasis text-foreground-on-emphasis \
16
-
hover:bg-background-success-emphasis-hover focus-visible:outline-background-success-emphasis",
17
-
ghost:
18
-
"bg-transparent text-foreground-muted \
19
-
hover:bg-background-inset focus-visible:outline-border-focus",
14
+
default: [
15
+
"border border-border-default bg-background-default text-foreground-default",
16
+
"hover:bg-background-subtle",
17
+
"focus-visible:outline-border-focus"
18
+
],
19
+
primary: [
20
+
"border border-border-success bg-background-success-emphasis text-foreground-on-emphasis",
21
+
"hover:bg-background-success-emphasis-hover",
22
+
"focus-visible:outline-background-success-emphasis"
23
+
],
24
+
ghost: [
25
+
"bg-transparent text-foreground-muted border border-transparent",
26
+
"hover:bg-background-inset",
27
+
"focus-visible:outline-border-focus"
28
+
],
20
29
// danger / success / warning are outline buttons in Figma: default surface +
21
30
// border, colored text only (bound to the fg-* tokens), no accent fill.
22
-
danger:
23
-
"border border-border-default bg-background-default text-foreground-danger \
24
-
hover:bg-background-subtle focus-visible:outline-foreground-danger",
25
-
success:
26
-
"border border-border-default bg-background-default text-foreground-success \
27
-
hover:bg-background-subtle focus-visible:outline-foreground-success",
28
-
warning:
29
-
"border border-border-default bg-background-default text-foreground-warning \
30
-
hover:bg-background-subtle focus-visible:outline-foreground-warning"
31
+
danger: [
32
+
"border border-border-default bg-background-default text-foreground-danger",
33
+
"hover:bg-background-subtle",
34
+
"focus-visible:outline-foreground-danger"
35
+
],
36
+
success: [
37
+
"border border-border-default bg-background-default text-foreground-success",
38
+
"hover:bg-background-subtle",
39
+
"focus-visible:outline-foreground-success"
40
+
],
41
+
warning: [
42
+
"border border-border-default bg-background-default text-foreground-warning",
43
+
"hover:bg-background-subtle",
44
+
"focus-visible:outline-foreground-warning"
45
+
]
31
46
},
32
47
size: {
33
48
sm: "min-h-8 gap-1.5 px-2 py-1.5 text-sm",
34
49
md: "min-h-9 gap-2 px-3 py-1.5 text-sm",
35
50
lg: "min-h-10 gap-2.5 px-4 py-2 text-base"
51
+
},
52
+
insetShadow: {
53
+
true: "",
54
+
false: ""
36
55
}
37
56
},
38
57
compoundVariants: [
39
58
// raised variants draw inset depth via a ::before layer.
40
59
{
41
60
variant: "default",
42
-
class:
43
-
"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150 hover:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-strong-hover)] \
44
-
active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)] \
45
-
disabled:active:translate-y-0"
61
+
insetShadow: true,
62
+
class: [
63
+
"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150",
64
+
"hover:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-strong-hover)]",
65
+
"active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)]",
66
+
"disabled:active:translate-y-0"
67
+
]
46
68
},
47
69
{
48
70
variant: "primary",
49
-
class:
50
-
"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-alpha-dark-25)] before:transition-all before:duration-150 \
51
-
active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-dark-50)] \
52
-
disabled:active:translate-y-0"
71
+
insetShadow: true,
72
+
class: [
73
+
"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-alpha-dark-25)] before:transition-all before:duration-150",
74
+
"active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-dark-50)]",
75
+
"disabled:active:translate-y-0"
76
+
]
53
77
}
54
78
],
55
79
defaultVariants: {
56
80
variant: "default",
57
-
size: "md"
81
+
size: "md",
82
+
insetShadow: false
58
83
}
59
84
});
60
85
···
74
99
interface Props extends Omit<HTMLAnchorAttributes & HTMLButtonAttributes, "class" | "children"> {
75
100
variant?: ButtonVariants["variant"];
76
101
size?: ButtonVariants["size"];
102
+
insetShadow?: boolean;
77
103
href?: ResolvedPathname;
78
104
type?: "button" | "submit" | "reset";
79
105
disabled?: boolean;
···
87
113
let {
88
114
variant = "default",
89
115
size = "md",
116
+
insetShadow = false,
90
117
href,
91
118
type = "button",
92
119
disabled = false,
···
98
125
...rest
99
126
}: Props = $props();
100
127
101
-
const classes = $derived(button({ variant, size, class: className }));
128
+
const classes = $derived(button({ variant, size, insetShadow, class: className }));
102
129
const spinnerSize = $derived(spinnerClass ?? (size === "lg" ? "size-5" : "size-4"));
103
130
const iconSize = $derived(size === "lg" ? "size-5" : "size-4");
104
131
const Icon = $derived(icon);
+3
web/src/lib/components/ui/ButtonCard.stories.svelte
+3
web/src/lib/components/ui/ButtonCard.stories.svelte
···
12
12
control: { type: "select" },
13
13
options: ["default", "ghost"]
14
14
},
15
+
insetShadow: { control: "boolean" },
15
16
disabled: { control: "boolean" },
16
17
title: { control: "text" },
17
18
description: { control: "text" }
18
19
},
19
20
args: {
20
21
variant: "default",
22
+
insetShadow: false,
21
23
disabled: false,
22
24
title: "Button",
23
25
description: "Description"
···
30
32
<Story name="WithIcon" args={{ icon: Settings }} />
31
33
<Story name="Disabled" args={{ disabled: true }} />
32
34
<Story name="Href" args={{ href: "/", icon: Settings }} />
35
+
<Story name="Inset shadow" args={{ insetShadow: true, icon: Settings }} />
33
36
34
37
<Story name="Variants">
35
38
<div class="grid grid-cols-2 gap-3">
+31
-10
web/src/lib/components/ui/ButtonCard.svelte
+31
-10
web/src/lib/components/ui/ButtonCard.svelte
···
2
2
import { tv, type VariantProps } from "tailwind-variants";
3
3
4
4
export const buttonCard = tv({
5
-
base: "flex gap-3 rounded-(--btn-radius) [--btn-radius:var(--radius-sm)] px-4 py-3 w-48 h-40 cursor-pointer select-none no-underline transition-colors duration-150 ease-in-out \
6
-
hover:no-underline \
7
-
focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus \
8
-
disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
5
+
base: [
6
+
"flex h-40 w-48 cursor-pointer gap-3 rounded-(--btn-radius) [--btn-radius:var(--radius-sm)] px-4 py-3 select-none no-underline",
7
+
"transition-colors duration-150 ease-in-out",
8
+
"hover:no-underline",
9
+
"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
10
+
"disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50"
11
+
],
9
12
variants: {
10
13
variant: {
11
-
default: "border border-border-default bg-background-default hover:bg-background-subtle",
12
-
ghost: "border border-transparent bg-transparent hover:bg-background-inset"
14
+
default: [
15
+
"border border-border-default bg-background-default",
16
+
"hover:bg-background-subtle"
17
+
],
18
+
ghost: [
19
+
"border border-transparent bg-transparent",
20
+
"hover:bg-background-inset"
21
+
]
22
+
},
23
+
insetShadow: {
24
+
true: "",
25
+
false: ""
13
26
}
14
27
},
15
28
compoundVariants: [
16
29
// raised variants draw inset depth via a ::before layer.
17
30
{
18
31
variant: "default",
19
-
class:
20
-
"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-[max(calc(var(--btn-radius)-2px),0px)] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150 hover:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-strong-hover)] active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)] disabled:active:translate-y-0"
32
+
insetShadow: true,
33
+
class: [
34
+
"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-[max(calc(var(--btn-radius)-2px),0px)] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150",
35
+
"hover:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-strong-hover)]",
36
+
"active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)]",
37
+
"disabled:active:translate-y-0"
38
+
]
21
39
}
22
40
],
23
41
defaultVariants: {
24
-
variant: "default"
42
+
variant: "default",
43
+
insetShadow: false
25
44
}
26
45
});
27
46
···
39
58
40
59
interface Props extends Omit<HTMLAnchorAttributes & HTMLButtonAttributes, "class" | "children"> {
41
60
variant?: ButtonCardVariants["variant"];
61
+
insetShadow?: boolean;
42
62
href?: ResolvedPathname;
43
63
type?: "button" | "submit" | "reset";
44
64
disabled?: boolean;
···
51
71
52
72
let {
53
73
variant = "default",
74
+
insetShadow = false,
54
75
href,
55
76
type = "button",
56
77
disabled = false,
···
62
83
...rest
63
84
}: Props = $props();
64
85
65
-
const classes = $derived(buttonCard({ variant, class: className }));
86
+
const classes = $derived(buttonCard({ variant, insetShadow, class: className }));
66
87
const Icon = $derived(icon);
67
88
</script>
68
89
+7
-6
web/src/lib/components/ui/ButtonGroup.svelte
+7
-6
web/src/lib/components/ui/ButtonGroup.svelte
···
6
6
variants: {
7
7
spaced: {
8
8
true: "gap-2",
9
-
false:
10
-
"gap-0 \
11
-
[&>*]:relative \
12
-
[&>*:not(:first-child)]:[--btn-radius-l:0px] [&>*:not(:first-child)]:-ml-px \
13
-
[&>*:not(:last-child)]:[--btn-radius-r:0px] \
14
-
[&>*:hover]:z-10 [&>*:focus-visible]:z-10"
9
+
false: [
10
+
"gap-0",
11
+
"*:relative",
12
+
"[&>*:not(:first-child)]:[--btn-radius-l:0px] [&>*:not(:first-child)]:-ml-px",
13
+
"[&>*:not(:last-child)]:[--btn-radius-r:0px]",
14
+
"[&>*:hover]:z-10 [&>*:focus-visible]:z-10"
15
+
]
15
16
}
16
17
},
17
18
defaultVariants: {
+25
-10
web/src/lib/components/ui/Checkbox.svelte
+25
-10
web/src/lib/components/ui/Checkbox.svelte
···
24
24
const labelClasses = $derived(
25
25
`inline-flex items-center gap-2 ${disabled ? "text-foreground-disabled hover:pointer-events-none" : "cursor-pointer"} ${className ?? ""}`
26
26
);
27
+
28
+
const inputClasses = [
29
+
"peer size-4 shrink-0 appearance-none rounded border border-border-default bg-background-default",
30
+
"transition-colors duration-150",
31
+
"hover:cursor-pointer hover:bg-background-inset",
32
+
"checked:border-foreground-default checked:bg-foreground-default checked:hover:bg-gray-700",
33
+
"indeterminate:border-foreground-default indeterminate:bg-foreground-default indeterminate:hover:bg-gray-700",
34
+
"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default",
35
+
"disabled:hover:pointer-events-none disabled:hover:bg-background-default"
36
+
].join(" ");
37
+
38
+
const checkClasses = [
39
+
"pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-foreground-on-emphasis",
40
+
"peer-checked:block peer-indeterminate:hidden",
41
+
"peer-disabled:text-foreground-disabled peer-disabled:hover:cursor-default"
42
+
].join(" ");
43
+
44
+
const minusClasses = [
45
+
"pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-foreground-on-emphasis",
46
+
"peer-indeterminate:block",
47
+
"peer-disabled:text-foreground-disabled peer-disabled:hover:cursor-default"
48
+
].join(" ");
27
49
</script>
28
50
29
51
<label class={labelClasses}>
···
33
55
bind:checked
34
56
bind:indeterminate
35
57
{disabled}
36
-
class="peer size-4 shrink-0 appearance-none rounded border border-border-default bg-background-default transition-colors duration-150 \
37
-
hover:bg-background-inset hover:cursor-pointer \
38
-
checked:border-foreground-default checked:bg-foreground-default checked:hover:bg-gray-700 \
39
-
indeterminate:border-foreground-default indeterminate:bg-foreground-default indeterminate:hover:bg-gray-700 \
40
-
focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default \
41
-
disabled:hover:bg-background-default disabled:hover:pointer-events-none"
58
+
class={inputClasses}
42
59
{...rest}
43
60
/>
44
61
<Check
45
-
class="pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-foreground-on-emphasis \
46
-
peer-checked:block peer-indeterminate:hidden peer-disabled:text-foreground-disabled peer-disabled:hover:cursor-default"
62
+
class={checkClasses}
47
63
aria-hidden="true"
48
64
/>
49
65
<Minus
50
-
class="pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-foreground-on-emphasis \
51
-
peer-indeterminate:block peer-disabled:text-foreground-disabled peer-disabled:hover:cursor-default"
66
+
class={minusClasses}
52
67
aria-hidden="true"
53
68
/>
54
69
</span>
-12
web/src/lib/components/ui/Input.stories.svelte
-12
web/src/lib/components/ui/Input.stories.svelte
···
29
29
<Story name="Error" args={{ error: true, value: "Invalid value" }} />
30
30
<Story name="Disabled" args={{ disabled: true, value: "Can't edit this" }} />
31
31
<Story name="Loading" args={{ loading: true, value: "Checking..." }} />
32
-
33
32
<Story name="With left icon" args={{ iconLeft: Search, placeholder: "Search" }} />
34
33
<Story name="With right icon" args={{ iconRight: Mail, placeholder: "you@example.com" }} />
35
-
36
-
<Story name="States">
37
-
<div class="flex w-64 flex-col gap-3">
38
-
<Input placeholder="Default" />
39
-
<Input placeholder="Filled" value="Filled value" />
40
-
<Input placeholder="Error" error value="Invalid value" />
41
-
<Input placeholder="Disabled" disabled value="Can't edit this" />
42
-
<Input placeholder="Loading" loading value="Checking..." />
43
-
<Input placeholder="Search" iconLeft={Search} />
44
-
</div>
45
-
</Story>
-16
web/src/lib/components/ui/Link.stories.svelte
-16
web/src/lib/components/ui/Link.stories.svelte
···
39
39
<Story name="IconRight" args={{ iconRight: ArrowRight }}>Continue</Story>
40
40
41
41
<Story name="Href" args={{ href: "/" }}>Go home</Story>
42
-
43
-
<Story name="Variants">
44
-
<div class="flex items-center gap-4">
45
-
<Link variant="default">Default</Link>
46
-
<Link variant="success">Success</Link>
47
-
<Link variant="warning">Warning</Link>
48
-
<Link variant="danger">Danger</Link>
49
-
</div>
50
-
</Story>
51
-
52
-
<Story name="Sizes">
53
-
<div class="flex items-center gap-4">
54
-
<Link size="regular">Regular</Link>
55
-
<Link size="small">Small</Link>
56
-
</div>
57
-
</Story>
+4
-5
web/src/lib/components/ui/Link.svelte
+4
-5
web/src/lib/components/ui/Link.svelte
···
2
2
import { tv, type VariantProps } from "tailwind-variants";
3
3
4
4
export const link = tv({
5
-
base: "inline-flex cursor-pointer select-none items-center gap-1 no-underline transition-colors duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:underline focus-visible:outline-2 focus-visible:outline-offset-2",
5
+
base: "inline-flex cursor-pointer select-none items-center gap-1 no-underline transition-colors duration-150 ease-in-out hover:underline focus-visible:outline-2 focus-visible:outline-offset-2",
6
6
variants: {
7
7
variant: {
8
8
default:
···
34
34
</script>
35
35
36
36
<script lang="ts">
37
-
import { resolve } from "$app/paths";
37
+
import type { ResolvedPathname } from "$app/types";
38
38
import type { Component, Snippet } from "svelte";
39
39
import type {
40
40
HTMLAnchorAttributes,
···
45
45
interface Props extends Omit<HTMLAnchorAttributes & HTMLButtonAttributes, "class" | "children"> {
46
46
variant?: LinkVariants["variant"];
47
47
size?: LinkVariants["size"];
48
-
href?: string;
48
+
href?: ResolvedPathname;
49
49
type?: "button" | "submit" | "reset";
50
50
disabled?: boolean;
51
51
iconLeft?: Component<SvelteHTMLElements["svg"]>;
···
72
72
</script>
73
73
74
74
{#if href}
75
-
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- internal hrefs go through resolve(), external ones must pass through untouched -->
76
75
<a
77
-
href={href?.startsWith("/") ? resolve(href as "/") : href}
76
+
{href}
78
77
class={classes}
79
78
aria-disabled={disabled ? "true" : undefined}
80
79
tabindex={disabled ? -1 : undefined}
+4
-9
web/src/lib/components/ui/Logo.stories.svelte
+4
-9
web/src/lib/components/ui/Logo.stories.svelte
···
7
7
component: Logo,
8
8
tags: ["autodocs"],
9
9
argTypes: {
10
-
wordmark: { control: "boolean" }
10
+
wordmark: { control: "boolean" },
11
+
alpha: { control: "boolean" }
11
12
},
12
13
args: {
13
-
wordmark: false
14
+
wordmark: false,
15
+
alpha: false
14
16
}
15
17
});
16
18
</script>
17
19
18
20
<Story name="Icon" />
19
21
<Story name="Wordmark" args={{ wordmark: true }} />
20
-
21
-
<Story name="Both" asChild>
22
-
<div class="flex flex-col items-start gap-4">
23
-
<Logo />
24
-
<Logo wordmark />
25
-
</div>
26
-
</Story>
27
22
28
23
<Story name="Colors" asChild>
29
24
<div class="flex flex-col items-start gap-4">
+73
-29
web/src/lib/components/ui/Logo.svelte
+73
-29
web/src/lib/components/ui/Logo.svelte
···
1
1
<script lang="ts">
2
+
import { twMerge } from "tailwind-merge";
3
+
2
4
interface Props {
3
5
wordmark?: boolean;
6
+
alpha?: boolean;
4
7
class?: string;
5
8
}
6
9
7
-
let { wordmark = false, class: className = "" }: Props = $props();
10
+
let { wordmark = false, alpha = false, class: className = "" }: Props = $props();
8
11
</script>
9
12
10
-
{#if wordmark}
11
-
<svg
12
-
class={`h-8 ${className}`}
13
-
viewBox="0 0 118 32"
14
-
fill="currentColor"
15
-
xmlns="http://www.w3.org/2000/svg"
16
-
role="img"
17
-
aria-label="tangled"
18
-
>
19
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.6118 9.75728C79.2832 9.75733 79.8454 9.87208 80.2983 10.101C80.7513 10.3249 81.1161 10.6064 81.3921 10.9448C81.6732 11.278 81.8895 11.6064 82.0405 11.9292H82.1655V9.91353H85.4702V22.0307C85.4702 23.0305 85.2201 23.8668 84.7202 24.5385C84.2203 25.2154 83.5273 25.7251 82.6421 26.0688C81.762 26.4125 80.7488 26.5844 79.603 26.5844C78.5252 26.5844 77.6012 26.4385 76.8306 26.1469C76.065 25.8553 75.4555 25.462 75.0024 24.9672C74.5495 24.4726 74.2551 23.9237 74.1196 23.3198L77.1978 22.9057C77.2915 23.1243 77.4401 23.3303 77.6431 23.5229C77.8461 23.7206 78.1147 23.8824 78.4478 24.0073C78.7861 24.1321 79.1973 24.1947 79.6812 24.1948C80.4049 24.1948 81.0016 24.0227 81.4702 23.6792C81.9441 23.3355 82.1811 22.7701 82.1812 21.9838V19.7885H82.0405C81.8947 20.1217 81.6758 20.4371 81.3843 20.7338C81.0927 21.0306 80.7174 21.273 80.2593 21.4604C79.8012 21.6477 79.2546 21.7416 78.6196 21.7417C77.7188 21.7417 76.8981 21.5332 76.1587 21.1167C75.4244 20.6948 74.8383 20.0514 74.4009 19.187C73.9686 18.3172 73.7524 17.2181 73.7524 15.8901C73.7524 14.5308 73.9738 13.3952 74.4165 12.4838C74.8592 11.5726 75.4479 10.89 76.1821 10.437C76.9216 9.98403 77.7318 9.75728 78.6118 9.75728ZM79.6733 12.4057C79.1269 12.4058 78.6663 12.5544 78.2915 12.851C77.9166 13.1426 77.6326 13.5491 77.4399 14.0698C77.2472 14.5906 77.1509 15.1922 77.1509 15.8745C77.1509 16.5671 77.2472 17.1662 77.4399 17.6713C77.6378 18.1712 77.9218 18.5594 78.2915 18.8354C78.6663 19.106 79.1269 19.2416 79.6733 19.2417C80.2096 19.2417 80.663 19.1087 81.0327 18.8432C81.4076 18.5724 81.6942 18.1868 81.8921 17.687C82.0952 17.1818 82.1968 16.5776 82.1968 15.8745C82.1968 15.1714 82.0978 14.5619 81.8999 14.0463C81.702 13.5256 81.4155 13.1218 81.0405 12.8354C80.6656 12.5491 80.2096 12.4057 79.6733 12.4057Z" />
20
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M98.7397 9.75728C99.531 9.75733 100.268 9.88506 100.95 10.1401C101.637 10.39 102.236 10.7679 102.747 11.2729C103.262 11.778 103.663 12.4137 103.95 13.1792C104.236 13.9395 104.379 14.8303 104.379 15.851V16.7651H96.2085V16.7729C96.2085 17.3666 96.3179 17.8797 96.5366 18.312C96.7606 18.7441 97.0758 19.0776 97.4819 19.312C97.888 19.5461 98.3694 19.6635 98.9263 19.6635C99.2959 19.6635 99.6347 19.6113 99.9419 19.5073C100.249 19.4032 100.512 19.2467 100.731 19.0385C100.95 18.8303 101.116 18.5749 101.231 18.2729L104.309 18.476C104.153 19.2155 103.832 19.8615 103.348 20.4135C102.869 20.9603 102.249 21.3876 101.489 21.6948C100.734 21.9967 99.8609 22.1479 98.8716 22.1479C97.6376 22.1478 96.5754 21.8977 95.6851 21.3979C94.7998 20.8928 94.1173 20.179 93.6382 19.2573C93.159 18.3302 92.9194 17.2338 92.9194 15.9682C92.9194 14.7339 93.159 13.6505 93.6382 12.7182C94.1173 11.7861 94.792 11.0593 95.6616 10.5385C96.5365 10.0179 97.5629 9.75728 98.7397 9.75728ZM98.7935 12.2417C98.2886 12.2417 97.8411 12.3591 97.4507 12.5932C97.0654 12.8223 96.7632 13.1324 96.5444 13.5229C96.3427 13.8784 96.2325 14.2718 96.2124 14.7026H101.247C101.247 14.2235 101.142 13.7989 100.934 13.4292C100.726 13.0595 100.437 12.7702 100.067 12.562C99.7024 12.3486 99.2776 12.2417 98.7935 12.2417Z" />
21
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M54.187 9.75728C54.8536 9.7573 55.4918 9.83543 56.1011 9.99165C56.7155 10.1479 57.26 10.3902 57.7339 10.7182C58.2128 11.0462 58.5897 11.4685 58.8657 11.9838C59.1417 12.4942 59.2798 13.1063 59.2798 13.8198V21.9135H56.1245V20.2495H56.0308C55.8381 20.6244 55.5802 20.9552 55.2573 21.2417C54.9345 21.5229 54.5463 21.7443 54.0933 21.9057C53.6402 22.0619 53.1166 22.1401 52.5229 22.1401C51.7574 22.1401 51.075 22.0072 50.4761 21.7417C49.8772 21.4709 49.4031 21.0723 49.0542 20.5463C48.7105 20.0152 48.5386 19.3535 48.5386 18.562C48.5386 17.8954 48.661 17.3354 48.9058 16.8823C49.1505 16.4292 49.4839 16.0646 49.9058 15.7885C50.3276 15.5125 50.8068 15.3041 51.3433 15.1635C51.8849 15.0229 52.4527 14.9239 53.0464 14.8667C53.7442 14.7937 54.3069 14.726 54.7339 14.6635C55.1608 14.5958 55.4709 14.4968 55.6636 14.3667C55.8561 14.2365 55.9526 14.0436 55.9526 13.7885V13.7417C55.9526 13.247 55.7963 12.864 55.4839 12.5932C55.1767 12.3224 54.7389 12.187 54.1714 12.187C53.5726 12.187 53.0958 12.3199 52.7417 12.5854C52.3876 12.8458 52.1532 13.174 52.0386 13.5698L48.9604 13.3198C49.1167 12.5907 49.424 11.9603 49.8823 11.4292C50.3406 10.8928 50.9319 10.4812 51.6558 10.1948C52.3848 9.90318 53.2288 9.75728 54.187 9.75728ZM55.9761 16.351C55.872 16.4187 55.7285 16.4813 55.5464 16.5385C55.3694 16.5906 55.1687 16.6401 54.9448 16.687C54.721 16.7286 54.4968 16.7677 54.2729 16.8042C54.0491 16.8354 53.8458 16.8641 53.6636 16.8901C53.273 16.9474 52.9318 17.0386 52.6401 17.1635C52.3485 17.2885 52.1219 17.4578 51.9604 17.6713C51.799 17.8797 51.7183 18.1401 51.7183 18.4526C51.7183 18.9056 51.8824 19.2521 52.2104 19.4917C52.5437 19.7259 52.9658 19.8432 53.4761 19.8432C53.9655 19.8432 54.398 19.7468 54.7729 19.5542C55.1479 19.3563 55.4423 19.0906 55.6558 18.7573C55.8693 18.424 55.9761 18.0463 55.9761 17.6245V16.351Z" />
22
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M117.127 21.9135H113.846V19.9917H113.706C113.549 20.3249 113.328 20.6558 113.042 20.9838C112.76 21.3067 112.393 21.575 111.94 21.7885C111.492 22.0021 110.945 22.1088 110.299 22.1088C109.388 22.1088 108.562 21.8744 107.823 21.4057C107.088 20.9318 106.505 20.2364 106.073 19.3198C105.646 18.398 105.432 17.2676 105.432 15.9292C105.432 14.5542 105.654 13.4109 106.096 12.4995C106.539 11.5829 107.128 10.8979 107.862 10.4448C108.601 9.98651 109.411 9.75728 110.292 9.75728C110.963 9.75729 111.523 9.87189 111.971 10.101C112.424 10.325 112.789 10.6063 113.065 10.9448C113.346 11.2781 113.56 11.6063 113.706 11.9292H113.807V5.91451H117.127V21.9135ZM111.354 12.4057C110.807 12.4057 110.346 12.5542 109.971 12.851C109.596 13.1479 109.312 13.5594 109.12 14.0854C108.927 14.6114 108.831 15.2209 108.831 15.9135C108.831 16.6114 108.927 17.2287 109.12 17.7651C109.318 18.2963 109.601 18.713 109.971 19.0151C110.346 19.3119 110.807 19.4604 111.354 19.4604C111.89 19.4604 112.344 19.3145 112.713 19.0229C113.088 18.726 113.375 18.3119 113.573 17.7807C113.776 17.2495 113.877 16.627 113.877 15.9135C113.877 15.2 113.778 14.5802 113.581 14.0542C113.383 13.5282 113.096 13.1218 112.721 12.8354C112.346 12.549 111.89 12.4057 111.354 12.4057Z" />
23
-
<path d="M45.353 9.91353H47.6108V12.4135H45.353V18.226C45.353 18.5332 45.3999 18.7729 45.4937 18.9448C45.5874 19.1114 45.7177 19.2286 45.8843 19.2963C46.0561 19.364 46.2541 19.3979 46.478 19.3979C46.6342 19.3979 46.7906 19.3849 46.9468 19.3588C47.103 19.3276 47.2228 19.3042 47.3062 19.2885L47.8296 21.7651C47.6629 21.8172 47.4285 21.8771 47.1265 21.9448C46.8244 22.0177 46.4571 22.062 46.0249 22.0776C45.2229 22.1088 44.5196 22.002 43.9155 21.7573C43.3167 21.5125 42.8504 21.1322 42.5171 20.6167C42.1838 20.1011 42.0197 19.4499 42.0249 18.6635V12.4135H40.3843V9.91353H42.0249V7.03951H45.353V9.91353Z" />
24
-
<path d="M90.7808 18.3198C90.786 18.6999 90.8537 18.9761 90.9839 19.1479C91.1193 19.3145 91.3486 19.3979 91.6714 19.3979C91.838 19.3927 91.9683 19.3823 92.062 19.3667C92.1557 19.351 92.2339 19.3302 92.2964 19.3042L92.8276 21.726C92.6558 21.7781 92.4448 21.8328 92.1948 21.8901C91.9501 21.9422 91.6192 21.976 91.2026 21.9917C89.9268 22.0385 88.9839 21.7988 88.3745 21.2729C87.7652 20.7417 87.4579 19.9056 87.4526 18.7651V5.91451H90.7808V18.3198Z" />
25
-
<path d="M68.1138 9.75728C68.947 9.75728 69.6737 9.93962 70.2935 10.3042C70.9132 10.6687 71.395 11.1897 71.7388 11.8667C72.0825 12.5385 72.2544 13.3407 72.2544 14.2729V21.9135H68.9263V14.8667C68.9315 14.1324 68.744 13.5593 68.3638 13.1479C67.9836 12.7313 67.46 12.5229 66.7935 12.5229C66.3456 12.5229 65.9497 12.6193 65.606 12.812C65.2675 13.0047 65.0018 13.286 64.8091 13.6557C64.6216 14.0203 64.5252 14.4605 64.52 14.976V21.9135H61.1919V9.91353H64.3638V12.0307H64.5044C64.77 11.3329 65.2154 10.7807 65.8403 10.3745C66.4653 9.96305 67.2232 9.75728 68.1138 9.75728Z" />
26
-
<path d="M21.0971 30.866C20.0566 30.8575 19.2628 30.5542 18.4016 30.0269C17.1668 29.3753 16.2237 28.2808 15.5497 27.0739C14.4789 28.4065 13.0476 29.215 11.4453 29.6718C10.763 29.8705 9.56809 30.0721 7.58737 29.3523C4.73277 28.3905 2.65342 25.4114 2.88973 22.3758C2.8465 21.1175 3.30391 19.8825 3.95227 18.8208C2.22264 17.8897 0.812251 16.3266 0.272149 14.4098C-0.0560728 13.3604 -0.0422712 12.2299 0.0787624 11.1512C0.512215 8.60429 2.41696 6.38956 4.86912 5.59294C5.8479 3.35574 7.98378 1.68743 10.4037 1.34778C12.0104 1.12338 13.6735 1.46075 15.0792 2.27979C17.1272 0.00158572 20.6952 -0.671697 23.4195 0.727793C25.4978 1.72322 26.9839 3.80003 27.3447 6.06471C29.3222 6.85928 30.9877 8.47971 31.6413 10.5368C32.0784 11.8104 32.0929 13.2132 31.8098 14.5209C31.3041 16.5615 29.8679 18.2987 28.009 19.2482C28.0135 19.6113 29.2037 22.2296 29.0047 24.2056C28.9612 26.676 27.399 29.0172 25.2325 30.1544C23.9683 30.8945 22.4702 30.8805 21.0971 30.866ZM15.1733 23.755C16.9256 23.5593 18.0743 22.0269 18.9665 20.6469C19.3883 20.0182 19.7105 19.3146 20.0306 18.6454C20.4458 19.027 20.7975 19.7461 21.4541 19.9173C22.1457 20.1333 22.9566 19.9579 23.38 19.3277C24.1902 17.8118 23.7908 15.9827 23.319 14.4119C23.0284 13.5097 22.6472 12.5841 21.9218 11.9446C22.0765 10.85 21.4299 9.73834 20.5106 9.16542C19.7272 9.79198 18.5352 9.78821 17.7794 9.11795C16.3309 10.5997 15.0034 10.5505 13.7212 9.37618C13.4331 9.11226 12.8832 10.9871 10.9535 9.92506C9.84488 10.8567 8.98526 11.753 8.22356 13.0435C7.48342 14.4347 6.70829 15.6703 6.64151 17.1811C6.6094 18.0641 7.29731 18.9892 8.22942 18.9174C9.16105 19.0009 9.7952 18.0813 10.5006 17.6993C10.6058 18.9316 10.7243 20.2556 11.1395 21.4587C11.6161 23.0155 13.2947 24.005 14.8835 23.7784C14.9959 23.7696 15.1733 23.7549 15.1733 23.755ZM16.0828 19.1062C15.2306 18.5823 15.6407 17.4452 15.6066 16.6193C15.6914 15.6227 15.7594 14.575 16.2061 13.667C16.6788 13.0197 17.8318 13.2694 17.8827 14.0999C17.8488 14.9353 17.4664 15.767 17.5121 16.633C17.4129 17.3561 17.5839 18.1684 17.265 18.8293C17.0033 19.195 16.4703 19.3013 16.0828 19.1062ZM12.3606 18.6302C11.5578 18.1933 11.8129 17.0941 11.687 16.3298C11.7914 15.445 11.7045 14.3226 12.4431 13.7021C13.1653 13.1969 14.1485 14.0621 13.8069 14.8564C13.4426 15.8602 13.6814 16.957 13.6891 17.9748C13.5512 18.5752 12.911 18.894 12.3606 18.6302Z" />
27
-
</svg>
13
+
{#snippet mark()}
14
+
{#if wordmark}
15
+
<svg
16
+
class={twMerge("h-8", className)}
17
+
viewBox="0 0 118 32"
18
+
fill="currentColor"
19
+
xmlns="http://www.w3.org/2000/svg"
20
+
role="img"
21
+
aria-label="tangled"
22
+
>
23
+
<path
24
+
fill-rule="evenodd"
25
+
clip-rule="evenodd"
26
+
d="M78.6118 9.75728C79.2832 9.75733 79.8454 9.87208 80.2983 10.101C80.7513 10.3249 81.1161 10.6064 81.3921 10.9448C81.6732 11.278 81.8895 11.6064 82.0405 11.9292H82.1655V9.91353H85.4702V22.0307C85.4702 23.0305 85.2201 23.8668 84.7202 24.5385C84.2203 25.2154 83.5273 25.7251 82.6421 26.0688C81.762 26.4125 80.7488 26.5844 79.603 26.5844C78.5252 26.5844 77.6012 26.4385 76.8306 26.1469C76.065 25.8553 75.4555 25.462 75.0024 24.9672C74.5495 24.4726 74.2551 23.9237 74.1196 23.3198L77.1978 22.9057C77.2915 23.1243 77.4401 23.3303 77.6431 23.5229C77.8461 23.7206 78.1147 23.8824 78.4478 24.0073C78.7861 24.1321 79.1973 24.1947 79.6812 24.1948C80.4049 24.1948 81.0016 24.0227 81.4702 23.6792C81.9441 23.3355 82.1811 22.7701 82.1812 21.9838V19.7885H82.0405C81.8947 20.1217 81.6758 20.4371 81.3843 20.7338C81.0927 21.0306 80.7174 21.273 80.2593 21.4604C79.8012 21.6477 79.2546 21.7416 78.6196 21.7417C77.7188 21.7417 76.8981 21.5332 76.1587 21.1167C75.4244 20.6948 74.8383 20.0514 74.4009 19.187C73.9686 18.3172 73.7524 17.2181 73.7524 15.8901C73.7524 14.5308 73.9738 13.3952 74.4165 12.4838C74.8592 11.5726 75.4479 10.89 76.1821 10.437C76.9216 9.98403 77.7318 9.75728 78.6118 9.75728ZM79.6733 12.4057C79.1269 12.4058 78.6663 12.5544 78.2915 12.851C77.9166 13.1426 77.6326 13.5491 77.4399 14.0698C77.2472 14.5906 77.1509 15.1922 77.1509 15.8745C77.1509 16.5671 77.2472 17.1662 77.4399 17.6713C77.6378 18.1712 77.9218 18.5594 78.2915 18.8354C78.6663 19.106 79.1269 19.2416 79.6733 19.2417C80.2096 19.2417 80.663 19.1087 81.0327 18.8432C81.4076 18.5724 81.6942 18.1868 81.8921 17.687C82.0952 17.1818 82.1968 16.5776 82.1968 15.8745C82.1968 15.1714 82.0978 14.5619 81.8999 14.0463C81.702 13.5256 81.4155 13.1218 81.0405 12.8354C80.6656 12.5491 80.2096 12.4057 79.6733 12.4057Z"
27
+
/>
28
+
<path
29
+
fill-rule="evenodd"
30
+
clip-rule="evenodd"
31
+
d="M98.7397 9.75728C99.531 9.75733 100.268 9.88506 100.95 10.1401C101.637 10.39 102.236 10.7679 102.747 11.2729C103.262 11.778 103.663 12.4137 103.95 13.1792C104.236 13.9395 104.379 14.8303 104.379 15.851V16.7651H96.2085V16.7729C96.2085 17.3666 96.3179 17.8797 96.5366 18.312C96.7606 18.7441 97.0758 19.0776 97.4819 19.312C97.888 19.5461 98.3694 19.6635 98.9263 19.6635C99.2959 19.6635 99.6347 19.6113 99.9419 19.5073C100.249 19.4032 100.512 19.2467 100.731 19.0385C100.95 18.8303 101.116 18.5749 101.231 18.2729L104.309 18.476C104.153 19.2155 103.832 19.8615 103.348 20.4135C102.869 20.9603 102.249 21.3876 101.489 21.6948C100.734 21.9967 99.8609 22.1479 98.8716 22.1479C97.6376 22.1478 96.5754 21.8977 95.6851 21.3979C94.7998 20.8928 94.1173 20.179 93.6382 19.2573C93.159 18.3302 92.9194 17.2338 92.9194 15.9682C92.9194 14.7339 93.159 13.6505 93.6382 12.7182C94.1173 11.7861 94.792 11.0593 95.6616 10.5385C96.5365 10.0179 97.5629 9.75728 98.7397 9.75728ZM98.7935 12.2417C98.2886 12.2417 97.8411 12.3591 97.4507 12.5932C97.0654 12.8223 96.7632 13.1324 96.5444 13.5229C96.3427 13.8784 96.2325 14.2718 96.2124 14.7026H101.247C101.247 14.2235 101.142 13.7989 100.934 13.4292C100.726 13.0595 100.437 12.7702 100.067 12.562C99.7024 12.3486 99.2776 12.2417 98.7935 12.2417Z"
32
+
/>
33
+
<path
34
+
fill-rule="evenodd"
35
+
clip-rule="evenodd"
36
+
d="M54.187 9.75728C54.8536 9.7573 55.4918 9.83543 56.1011 9.99165C56.7155 10.1479 57.26 10.3902 57.7339 10.7182C58.2128 11.0462 58.5897 11.4685 58.8657 11.9838C59.1417 12.4942 59.2798 13.1063 59.2798 13.8198V21.9135H56.1245V20.2495H56.0308C55.8381 20.6244 55.5802 20.9552 55.2573 21.2417C54.9345 21.5229 54.5463 21.7443 54.0933 21.9057C53.6402 22.0619 53.1166 22.1401 52.5229 22.1401C51.7574 22.1401 51.075 22.0072 50.4761 21.7417C49.8772 21.4709 49.4031 21.0723 49.0542 20.5463C48.7105 20.0152 48.5386 19.3535 48.5386 18.562C48.5386 17.8954 48.661 17.3354 48.9058 16.8823C49.1505 16.4292 49.4839 16.0646 49.9058 15.7885C50.3276 15.5125 50.8068 15.3041 51.3433 15.1635C51.8849 15.0229 52.4527 14.9239 53.0464 14.8667C53.7442 14.7937 54.3069 14.726 54.7339 14.6635C55.1608 14.5958 55.4709 14.4968 55.6636 14.3667C55.8561 14.2365 55.9526 14.0436 55.9526 13.7885V13.7417C55.9526 13.247 55.7963 12.864 55.4839 12.5932C55.1767 12.3224 54.7389 12.187 54.1714 12.187C53.5726 12.187 53.0958 12.3199 52.7417 12.5854C52.3876 12.8458 52.1532 13.174 52.0386 13.5698L48.9604 13.3198C49.1167 12.5907 49.424 11.9603 49.8823 11.4292C50.3406 10.8928 50.9319 10.4812 51.6558 10.1948C52.3848 9.90318 53.2288 9.75728 54.187 9.75728ZM55.9761 16.351C55.872 16.4187 55.7285 16.4813 55.5464 16.5385C55.3694 16.5906 55.1687 16.6401 54.9448 16.687C54.721 16.7286 54.4968 16.7677 54.2729 16.8042C54.0491 16.8354 53.8458 16.8641 53.6636 16.8901C53.273 16.9474 52.9318 17.0386 52.6401 17.1635C52.3485 17.2885 52.1219 17.4578 51.9604 17.6713C51.799 17.8797 51.7183 18.1401 51.7183 18.4526C51.7183 18.9056 51.8824 19.2521 52.2104 19.4917C52.5437 19.7259 52.9658 19.8432 53.4761 19.8432C53.9655 19.8432 54.398 19.7468 54.7729 19.5542C55.1479 19.3563 55.4423 19.0906 55.6558 18.7573C55.8693 18.424 55.9761 18.0463 55.9761 17.6245V16.351Z"
37
+
/>
38
+
<path
39
+
fill-rule="evenodd"
40
+
clip-rule="evenodd"
41
+
d="M117.127 21.9135H113.846V19.9917H113.706C113.549 20.3249 113.328 20.6558 113.042 20.9838C112.76 21.3067 112.393 21.575 111.94 21.7885C111.492 22.0021 110.945 22.1088 110.299 22.1088C109.388 22.1088 108.562 21.8744 107.823 21.4057C107.088 20.9318 106.505 20.2364 106.073 19.3198C105.646 18.398 105.432 17.2676 105.432 15.9292C105.432 14.5542 105.654 13.4109 106.096 12.4995C106.539 11.5829 107.128 10.8979 107.862 10.4448C108.601 9.98651 109.411 9.75728 110.292 9.75728C110.963 9.75729 111.523 9.87189 111.971 10.101C112.424 10.325 112.789 10.6063 113.065 10.9448C113.346 11.2781 113.56 11.6063 113.706 11.9292H113.807V5.91451H117.127V21.9135ZM111.354 12.4057C110.807 12.4057 110.346 12.5542 109.971 12.851C109.596 13.1479 109.312 13.5594 109.12 14.0854C108.927 14.6114 108.831 15.2209 108.831 15.9135C108.831 16.6114 108.927 17.2287 109.12 17.7651C109.318 18.2963 109.601 18.713 109.971 19.0151C110.346 19.3119 110.807 19.4604 111.354 19.4604C111.89 19.4604 112.344 19.3145 112.713 19.0229C113.088 18.726 113.375 18.3119 113.573 17.7807C113.776 17.2495 113.877 16.627 113.877 15.9135C113.877 15.2 113.778 14.5802 113.581 14.0542C113.383 13.5282 113.096 13.1218 112.721 12.8354C112.346 12.549 111.89 12.4057 111.354 12.4057Z"
42
+
/>
43
+
<path
44
+
d="M45.353 9.91353H47.6108V12.4135H45.353V18.226C45.353 18.5332 45.3999 18.7729 45.4937 18.9448C45.5874 19.1114 45.7177 19.2286 45.8843 19.2963C46.0561 19.364 46.2541 19.3979 46.478 19.3979C46.6342 19.3979 46.7906 19.3849 46.9468 19.3588C47.103 19.3276 47.2228 19.3042 47.3062 19.2885L47.8296 21.7651C47.6629 21.8172 47.4285 21.8771 47.1265 21.9448C46.8244 22.0177 46.4571 22.062 46.0249 22.0776C45.2229 22.1088 44.5196 22.002 43.9155 21.7573C43.3167 21.5125 42.8504 21.1322 42.5171 20.6167C42.1838 20.1011 42.0197 19.4499 42.0249 18.6635V12.4135H40.3843V9.91353H42.0249V7.03951H45.353V9.91353Z"
45
+
/>
46
+
<path
47
+
d="M90.7808 18.3198C90.786 18.6999 90.8537 18.9761 90.9839 19.1479C91.1193 19.3145 91.3486 19.3979 91.6714 19.3979C91.838 19.3927 91.9683 19.3823 92.062 19.3667C92.1557 19.351 92.2339 19.3302 92.2964 19.3042L92.8276 21.726C92.6558 21.7781 92.4448 21.8328 92.1948 21.8901C91.9501 21.9422 91.6192 21.976 91.2026 21.9917C89.9268 22.0385 88.9839 21.7988 88.3745 21.2729C87.7652 20.7417 87.4579 19.9056 87.4526 18.7651V5.91451H90.7808V18.3198Z"
48
+
/>
49
+
<path
50
+
d="M68.1138 9.75728C68.947 9.75728 69.6737 9.93962 70.2935 10.3042C70.9132 10.6687 71.395 11.1897 71.7388 11.8667C72.0825 12.5385 72.2544 13.3407 72.2544 14.2729V21.9135H68.9263V14.8667C68.9315 14.1324 68.744 13.5593 68.3638 13.1479C67.9836 12.7313 67.46 12.5229 66.7935 12.5229C66.3456 12.5229 65.9497 12.6193 65.606 12.812C65.2675 13.0047 65.0018 13.286 64.8091 13.6557C64.6216 14.0203 64.5252 14.4605 64.52 14.976V21.9135H61.1919V9.91353H64.3638V12.0307H64.5044C64.77 11.3329 65.2154 10.7807 65.8403 10.3745C66.4653 9.96305 67.2232 9.75728 68.1138 9.75728Z"
51
+
/>
52
+
<path
53
+
d="M21.0971 30.866C20.0566 30.8575 19.2628 30.5542 18.4016 30.0269C17.1668 29.3753 16.2237 28.2808 15.5497 27.0739C14.4789 28.4065 13.0476 29.215 11.4453 29.6718C10.763 29.8705 9.56809 30.0721 7.58737 29.3523C4.73277 28.3905 2.65342 25.4114 2.88973 22.3758C2.8465 21.1175 3.30391 19.8825 3.95227 18.8208C2.22264 17.8897 0.812251 16.3266 0.272149 14.4098C-0.0560728 13.3604 -0.0422712 12.2299 0.0787624 11.1512C0.512215 8.60429 2.41696 6.38956 4.86912 5.59294C5.8479 3.35574 7.98378 1.68743 10.4037 1.34778C12.0104 1.12338 13.6735 1.46075 15.0792 2.27979C17.1272 0.00158572 20.6952 -0.671697 23.4195 0.727793C25.4978 1.72322 26.9839 3.80003 27.3447 6.06471C29.3222 6.85928 30.9877 8.47971 31.6413 10.5368C32.0784 11.8104 32.0929 13.2132 31.8098 14.5209C31.3041 16.5615 29.8679 18.2987 28.009 19.2482C28.0135 19.6113 29.2037 22.2296 29.0047 24.2056C28.9612 26.676 27.399 29.0172 25.2325 30.1544C23.9683 30.8945 22.4702 30.8805 21.0971 30.866ZM15.1733 23.755C16.9256 23.5593 18.0743 22.0269 18.9665 20.6469C19.3883 20.0182 19.7105 19.3146 20.0306 18.6454C20.4458 19.027 20.7975 19.7461 21.4541 19.9173C22.1457 20.1333 22.9566 19.9579 23.38 19.3277C24.1902 17.8118 23.7908 15.9827 23.319 14.4119C23.0284 13.5097 22.6472 12.5841 21.9218 11.9446C22.0765 10.85 21.4299 9.73834 20.5106 9.16542C19.7272 9.79198 18.5352 9.78821 17.7794 9.11795C16.3309 10.5997 15.0034 10.5505 13.7212 9.37618C13.4331 9.11226 12.8832 10.9871 10.9535 9.92506C9.84488 10.8567 8.98526 11.753 8.22356 13.0435C7.48342 14.4347 6.70829 15.6703 6.64151 17.1811C6.6094 18.0641 7.29731 18.9892 8.22942 18.9174C9.16105 19.0009 9.7952 18.0813 10.5006 17.6993C10.6058 18.9316 10.7243 20.2556 11.1395 21.4587C11.6161 23.0155 13.2947 24.005 14.8835 23.7784C14.9959 23.7696 15.1733 23.7549 15.1733 23.755ZM16.0828 19.1062C15.2306 18.5823 15.6407 17.4452 15.6066 16.6193C15.6914 15.6227 15.7594 14.575 16.2061 13.667C16.6788 13.0197 17.8318 13.2694 17.8827 14.0999C17.8488 14.9353 17.4664 15.767 17.5121 16.633C17.4129 17.3561 17.5839 18.1684 17.265 18.8293C17.0033 19.195 16.4703 19.3013 16.0828 19.1062ZM12.3606 18.6302C11.5578 18.1933 11.8129 17.0941 11.687 16.3298C11.7914 15.445 11.7045 14.3226 12.4431 13.7021C13.1653 13.1969 14.1485 14.0621 13.8069 14.8564C13.4426 15.8602 13.6814 16.957 13.6891 17.9748C13.5512 18.5752 12.911 18.894 12.3606 18.6302Z"
54
+
/>
55
+
</svg>
56
+
{:else}
57
+
<svg
58
+
class={twMerge("size-8", className)}
59
+
viewBox="0 0 32 32"
60
+
fill="currentColor"
61
+
xmlns="http://www.w3.org/2000/svg"
62
+
role="img"
63
+
aria-label="tangled"
64
+
>
65
+
<path
66
+
d="M21.0971 30.866C20.0566 30.8575 19.2628 30.5542 18.4016 30.0269C17.1668 29.3753 16.2237 28.2808 15.5497 27.0739C14.4789 28.4065 13.0476 29.215 11.4453 29.6718C10.763 29.8705 9.56809 30.0721 7.58737 29.3523C4.73277 28.3905 2.65342 25.4114 2.88973 22.3758C2.8465 21.1175 3.30392 19.8825 3.95228 18.8208C2.22264 17.8897 0.81225 16.3266 0.272148 14.4098C-0.0560731 13.3604 -0.042271 12.2299 0.0787626 11.1512C0.512215 8.60429 2.41697 6.38956 4.86912 5.59294C5.8479 3.35574 7.98378 1.68743 10.4037 1.34778C12.0104 1.12338 13.6735 1.46075 15.0792 2.27979C17.1272 0.00158595 20.6952 -0.671697 23.4195 0.727793C25.4978 1.72322 26.9839 3.80003 27.3447 6.06471C29.3222 6.85928 30.9877 8.47971 31.6413 10.5368C32.0784 11.8104 32.0928 13.2132 31.8098 14.5209C31.3041 16.5615 29.8679 18.2987 28.009 19.2482C28.0135 19.6113 29.2037 22.2296 29.0047 24.2056C28.9612 26.676 27.399 29.0172 25.2325 30.1544C23.9683 30.8945 22.4702 30.8805 21.0971 30.866ZM15.1733 23.755C16.9256 23.5593 18.0743 22.0269 18.9665 20.6469C19.3883 20.0182 19.7105 19.3146 20.0306 18.6454C20.4458 19.0271 20.7975 19.7461 21.4541 19.9173C22.1457 20.1333 22.9566 19.9579 23.38 19.3277C24.1902 17.8118 23.7908 15.9827 23.319 14.4119C23.0284 13.5097 22.6472 12.5841 21.9218 11.9446C22.0765 10.85 21.4299 9.73834 20.5106 9.16542C19.7272 9.79198 18.5352 9.78821 17.7794 9.11795C16.3309 10.5997 15.0034 10.5505 13.7212 9.37618C13.4331 9.11226 12.8832 10.9871 10.9535 9.92506C9.84488 10.8567 8.98526 11.753 8.22356 13.0435C7.48342 14.4347 6.70829 15.6703 6.64151 17.1811C6.6094 18.0641 7.29731 18.9892 8.22942 18.9174C9.16105 19.0009 9.7952 18.0813 10.5006 17.6993C10.6058 18.9316 10.7243 20.2556 11.1395 21.4587C11.6161 23.0155 13.2947 24.005 14.8835 23.7784C14.9959 23.7696 15.1733 23.7549 15.1733 23.755ZM16.0828 19.1062C15.2306 18.5823 15.6407 17.4452 15.6066 16.6193C15.6914 15.6227 15.7594 14.575 16.2061 13.667C16.6788 13.0197 17.8318 13.2694 17.8827 14.0999C17.8488 14.9353 17.4664 15.767 17.5121 16.633C17.4129 17.3561 17.5839 18.1684 17.265 18.8293C17.0033 19.195 16.4703 19.3013 16.0828 19.1062ZM12.3606 18.6302C11.5578 18.1933 11.8129 17.0941 11.687 16.3298C11.7914 15.445 11.7045 14.3226 12.4431 13.7021C13.1653 13.1969 14.1485 14.0621 13.8069 14.8564C13.4426 15.8602 13.6814 16.957 13.6891 17.9748C13.5512 18.5752 12.911 18.894 12.3606 18.6302Z"
67
+
/>
68
+
</svg>
69
+
{/if}
70
+
{/snippet}
71
+
72
+
{#if alpha}
73
+
<span class="inline-flex items-center gap-2 select-none">
74
+
{@render mark()}
75
+
<span
76
+
class="rounded bg-background-subtle px-1 text-[10px] leading-4 font-normal not-italic text-foreground-default"
77
+
>
78
+
alpha
79
+
</span>
80
+
</span>
28
81
{:else}
29
-
<svg
30
-
class={`size-8 ${className}`}
31
-
viewBox="0 0 32 32"
32
-
fill="currentColor"
33
-
xmlns="http://www.w3.org/2000/svg"
34
-
role="img"
35
-
aria-label="tangled"
36
-
>
37
-
<path d="M21.0971 30.866C20.0566 30.8575 19.2628 30.5542 18.4016 30.0269C17.1668 29.3753 16.2237 28.2808 15.5497 27.0739C14.4789 28.4065 13.0476 29.215 11.4453 29.6718C10.763 29.8705 9.56809 30.0721 7.58737 29.3523C4.73277 28.3905 2.65342 25.4114 2.88973 22.3758C2.8465 21.1175 3.30392 19.8825 3.95228 18.8208C2.22264 17.8897 0.81225 16.3266 0.272148 14.4098C-0.0560731 13.3604 -0.042271 12.2299 0.0787626 11.1512C0.512215 8.60429 2.41697 6.38956 4.86912 5.59294C5.8479 3.35574 7.98378 1.68743 10.4037 1.34778C12.0104 1.12338 13.6735 1.46075 15.0792 2.27979C17.1272 0.00158595 20.6952 -0.671697 23.4195 0.727793C25.4978 1.72322 26.9839 3.80003 27.3447 6.06471C29.3222 6.85928 30.9877 8.47971 31.6413 10.5368C32.0784 11.8104 32.0928 13.2132 31.8098 14.5209C31.3041 16.5615 29.8679 18.2987 28.009 19.2482C28.0135 19.6113 29.2037 22.2296 29.0047 24.2056C28.9612 26.676 27.399 29.0172 25.2325 30.1544C23.9683 30.8945 22.4702 30.8805 21.0971 30.866ZM15.1733 23.755C16.9256 23.5593 18.0743 22.0269 18.9665 20.6469C19.3883 20.0182 19.7105 19.3146 20.0306 18.6454C20.4458 19.0271 20.7975 19.7461 21.4541 19.9173C22.1457 20.1333 22.9566 19.9579 23.38 19.3277C24.1902 17.8118 23.7908 15.9827 23.319 14.4119C23.0284 13.5097 22.6472 12.5841 21.9218 11.9446C22.0765 10.85 21.4299 9.73834 20.5106 9.16542C19.7272 9.79198 18.5352 9.78821 17.7794 9.11795C16.3309 10.5997 15.0034 10.5505 13.7212 9.37618C13.4331 9.11226 12.8832 10.9871 10.9535 9.92506C9.84488 10.8567 8.98526 11.753 8.22356 13.0435C7.48342 14.4347 6.70829 15.6703 6.64151 17.1811C6.6094 18.0641 7.29731 18.9892 8.22942 18.9174C9.16105 19.0009 9.7952 18.0813 10.5006 17.6993C10.6058 18.9316 10.7243 20.2556 11.1395 21.4587C11.6161 23.0155 13.2947 24.005 14.8835 23.7784C14.9959 23.7696 15.1733 23.7549 15.1733 23.755ZM16.0828 19.1062C15.2306 18.5823 15.6407 17.4452 15.6066 16.6193C15.6914 15.6227 15.7594 14.575 16.2061 13.667C16.6788 13.0197 17.8318 13.2694 17.8827 14.0999C17.8488 14.9353 17.4664 15.767 17.5121 16.633C17.4129 17.3561 17.5839 18.1684 17.265 18.8293C17.0033 19.195 16.4703 19.3013 16.0828 19.1062ZM12.3606 18.6302C11.5578 18.1933 11.8129 17.0941 11.687 16.3298C11.7914 15.445 11.7045 14.3226 12.4431 13.7021C13.1653 13.1969 14.1485 14.0621 13.8069 14.8564C13.4426 15.8602 13.6814 16.957 13.6891 17.9748C13.5512 18.5752 12.911 18.894 12.3606 18.6302Z" />
38
-
</svg>
82
+
{@render mark()}
39
83
{/if}
-8
web/src/lib/components/ui/LogotypeSmall.svelte
-8
web/src/lib/components/ui/LogotypeSmall.svelte
···
1
-
<span class="inline-flex items-center gap-2 select-none">
2
-
<img src="/logos/logotype.svg" alt="tangled" class="h-[26px] dark:invert" />
3
-
<span
4
-
class="rounded bg-background-subtle px-1 text-[10px] leading-4 font-normal not-italic text-foreground-default"
5
-
>
6
-
alpha
7
-
</span>
8
-
</span>
+20
-37
web/src/lib/components/ui/Pagination.svelte
+20
-37
web/src/lib/components/ui/Pagination.svelte
···
1
1
<script module lang="ts">
2
-
import { tv, type VariantProps } from "tailwind-variants";
2
+
import { tv } from "tailwind-variants";
3
3
4
4
export const pagination = tv({
5
5
base: "flex items-center gap-1"
6
6
});
7
-
8
-
export const paginationNav = tv({
9
-
base: "flex size-8 items-center justify-center rounded text-foreground-muted transition-colors duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:bg-background-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:pointer-events-none disabled:opacity-50"
10
-
});
11
-
12
-
export const paginationItem = tv({
13
-
base: "flex size-8 items-center justify-center rounded border text-sm transition-colors duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
14
-
variants: {
15
-
active: {
16
-
true: "border-border-strong bg-background-inset font-medium text-foreground-default",
17
-
false: "border-border-default text-foreground-muted hover:bg-background-subtle"
18
-
}
19
-
},
20
-
defaultVariants: {
21
-
active: false
22
-
}
23
-
});
24
-
25
-
export type PaginationItemVariants = VariantProps<typeof paginationItem>;
26
7
27
8
type Item = number | "start-ellipsis" | "end-ellipsis";
28
9
···
70
51
<script lang="ts">
71
52
import ChevronLeft from "$icon/chevron-left";
72
53
import ChevronRight from "$icon/chevron-right";
54
+
import Button from "./Button.svelte";
73
55
74
56
interface Props {
75
57
page: number;
···
92
74
</script>
93
75
94
76
<nav aria-label="Pagination" class={pagination({ class: className })}>
95
-
<button
96
-
type="button"
97
-
class={paginationNav()}
77
+
<Button
78
+
variant="ghost"
79
+
size="sm"
80
+
class="size-8 p-0"
81
+
icon={ChevronLeft}
98
82
disabled={page <= 1}
99
83
aria-label="Previous page"
100
84
onclick={() => goTo(page - 1)}
101
-
>
102
-
<ChevronLeft class="size-4" aria-hidden="true" />
103
-
</button>
85
+
/>
104
86
105
87
{#each items as item, i (typeof item === "number" ? item : `${item}-${i}`)}
106
88
{#if typeof item === "number"}
107
-
<button
108
-
type="button"
109
-
class={paginationItem({ active: item === page })}
89
+
<Button
90
+
variant={item === page ? "default" : "ghost"}
91
+
size="sm"
92
+
class="size-8 p-0"
110
93
aria-current={item === page ? "page" : undefined}
111
94
aria-label={`Page ${item}`}
112
95
onclick={() => goTo(item)}
113
96
>
114
97
{item}
115
-
</button>
98
+
</Button>
116
99
{:else}
117
100
<span
118
-
class="flex size-8 items-center justify-center text-foreground-subtle"
101
+
class="flex size-8 items-center justify-center text-foreground-subtle pointer-events-none select-none"
119
102
aria-hidden="true"
120
103
>
121
104
…
···
123
106
{/if}
124
107
{/each}
125
108
126
-
<button
127
-
type="button"
128
-
class={paginationNav()}
109
+
<Button
110
+
variant="ghost"
111
+
size="sm"
112
+
class="size-8 p-0"
113
+
icon={ChevronRight}
129
114
disabled={page >= count}
130
115
aria-label="Next page"
131
116
onclick={() => goTo(page + 1)}
132
-
>
133
-
<ChevronRight class="size-4" aria-hidden="true" />
134
-
</button>
117
+
/>
135
118
</nav>