alice.pds.demo.boltless.dev
This repository has no description
web/components: minor fixups
- inset breadcrums
- uniform height for BlobHeader and TreeHeader
- also use catpuccin syntax hl
Signed-off-by: oppiliappan <me@oppi.li>
author
oppiliappan
date
(Aug 1, 2026, 8:39 AM +0100)
commit
d977e681
d977e681d2731d7d849d11d04b0845d8208a4d3e
parent
1f24d09e
1f24d09e0af35548f9f3c9ab0df83114e3ac305f
change-id
yuqwkvzq
yuqwkvzqmpmzvyrvsxltkotrlltnzour
+59
-42
+2
-2
web/src/lib/components/repo/BlobHeader.svelte
+2
-2
web/src/lib/components/repo/BlobHeader.svelte
···
58
58
};
59
59
</script>
60
60
61
-
<div class="mb-3 flex flex-wrap items-center justify-between gap-2 typography-paragraph-regular">
61
+
<div class="flex flex-wrap items-center justify-between gap-2 typography-paragraph-regular mb-2">
62
62
<div class="flex min-w-0 items-center gap-3">
63
63
<RepoCrumbs {ownerHandle} {repoName} {ref} {path} />
64
64
···
82
82
<RefChip {ownerHandle} {repoName} {ref} />
83
83
{#if language && languageColor}
84
84
<div
85
-
class="flex w-fit items-center gap-2 rounded border border-border-default bg-background-inset p-2 whitespace-nowrap"
85
+
class="flex w-fit items-center gap-2 rounded border border-border-default bg-background-canvas px-2 py-1 whitespace-nowrap"
86
86
>
87
87
<div
88
88
class="size-2 rounded-full"
+1
-1
web/src/lib/components/repo/BlobView.svelte
+1
-1
web/src/lib/components/repo/BlobView.svelte
+1
-1
web/src/lib/components/repo/CommitList.svelte
+1
-1
web/src/lib/components/repo/CommitList.svelte
···
32
32
{#if commit.body}
33
33
<button
34
34
type="button"
35
-
class="mt-1 shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 py-0.5 text-foreground-muted hover:bg-background-muted"
35
+
class="mt-1 shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 hover:bg-background-muted"
36
36
aria-expanded={expanded[commit.hash] === true}
37
37
aria-label="Toggle commit body"
38
38
onclick={() => (expanded[commit.hash] = !expanded[commit.hash])}
+2
-2
web/src/lib/components/repo/DiffFileList.svelte
+2
-2
web/src/lib/components/repo/DiffFileList.svelte
···
56
56
{#each list as node (`${node.type}:${node.name}`)}
57
57
{#if node.type === "dir"}
58
58
<details open class="group">
59
-
<summary class="cursor-pointer list-none pt-1">
59
+
<summary class="cursor-pointer list-none">
60
60
<span class="inline-flex items-center gap-2">
61
61
<Folder class="size-4 shrink-0 group-open:hidden" />
62
62
<FolderOpen class="hidden size-4 shrink-0 group-open:block" />
···
68
68
</div>
69
69
</details>
70
70
{:else}
71
-
<div class="flex items-center gap-2 pt-1">
71
+
<div class="flex items-center gap-2">
72
72
<File class="size-4 shrink-0" />
73
73
<a
74
74
href="#file-{node.path}"
+5
-5
web/src/lib/components/repo/DiffTopbar.svelte
+5
-5
web/src/lib/components/repo/DiffTopbar.svelte
···
45
45
</script>
46
46
47
47
<div
48
-
class="sticky top-[env(safe-area-inset-top)] z-10 flex h-12 items-center gap-2 bg-background-canvas p-2"
48
+
class="sticky top-[env(safe-area-inset-top)] z-10 flex h-12 items-center gap-2 bg-background-canvas py-2"
49
49
>
50
50
{#if onToggleFiles}
51
51
<Button
···
97
97
data-sveltekit-replacestate
98
98
data-sveltekit-noscroll
99
99
size="sm"
100
-
variant={diffStyle === "split" ? "default" : "primary"}
101
-
icon={SquareSplitHorizontal}
100
+
variant={diffStyle === "split" ? "ghost" : "default"}
101
+
icon={SquareSplitVertical}
102
102
aria-label="Unified diff"
103
103
title="Unified diff"
104
104
/>
···
107
107
data-sveltekit-replacestate
108
108
data-sveltekit-noscroll
109
109
size="sm"
110
-
variant={diffStyle === "split" ? "primary" : "default"}
111
-
icon={SquareSplitVertical}
110
+
variant={diffStyle === "split" ? "default" : "ghost"}
111
+
icon={SquareSplitHorizontal}
112
112
aria-label="Split diff"
113
113
title="Split diff"
114
114
/>
+1
-1
web/src/lib/components/repo/RefChip.svelte
+1
-1
web/src/lib/components/repo/RefChip.svelte
···
16
16
</script>
17
17
18
18
<div
19
-
class="flex w-fit items-center justify-center gap-2 rounded-sm border border-border-default bg-background-inset p-2 whitespace-nowrap {className}"
19
+
class="flex w-fit items-center justify-center gap-2 rounded-sm border border-border-default bg-background-canvas px-2 py-1 whitespace-nowrap {className}"
20
20
>
21
21
<span class="text-foreground-muted">at</span>
22
22
<a href={treeHref} class="text-foreground-default no-underline hover:underline">{ref}</a>
+1
-1
web/src/lib/components/repo/RepoCrumbs.svelte
+1
-1
web/src/lib/components/repo/RepoCrumbs.svelte
···
28
28
</script>
29
29
30
30
<div
31
-
class="flex w-fit items-center gap-1 overflow-x-auto rounded-sm border border-border-default bg-background-inset px-3 py-2 whitespace-nowrap"
31
+
class="flex w-fit items-center gap-1 overflow-x-auto rounded-sm border border-border-default bg-background-canvas px-3 py-1 whitespace-nowrap"
32
32
>
33
33
{#each crumbs as crumb (crumb.href)}
34
34
{#if crumb.last}
+1
-1
web/src/lib/components/repo/TreeHeader.svelte
+1
-1
web/src/lib/components/repo/TreeHeader.svelte
···
20
20
const plural = (count: number, noun: string) => `${count} ${noun}${count === 1 ? "" : "s"}`;
21
21
</script>
22
22
23
-
<div class="mb-3 flex items-center justify-between gap-2 text-sm">
23
+
<div class="flex items-center justify-between gap-2 typography-paragraph-regular mb-2">
24
24
<div class="flex min-w-0 items-center gap-3">
25
25
<RepoCrumbs {ownerHandle} {repoName} {ref} {path} />
26
26
+13
-13
web/src/lib/components/repo/pierre.ts
+13
-13
web/src/lib/components/repo/pierre.ts
···
22
22
// pierre.css defines the real tokens on diffs-container, these are just
23
23
// fallbacks for the generated bindings
24
24
background: "#ffffff",
25
-
foreground: "#111827",
26
-
"token-comment": "#6b7280",
27
-
"token-string": "#16a34a",
28
-
"token-string-expression": "#16a34a",
29
-
"token-keyword": "#c084fc",
30
-
"token-function": "#60a5fa",
31
-
"token-constant": "#f59e0b",
32
-
"token-parameter": "#111827",
33
-
"token-punctuation": "#4b5563",
34
-
"token-link": "#4338ca",
35
-
"token-inserted": "#16a34a",
36
-
"token-deleted": "#dc2626",
37
-
"token-changed": "#d97706"
25
+
foreground: "#4c4f69",
26
+
"token-comment": "#7c7f93",
27
+
"token-string": "#40a02b",
28
+
"token-string-expression": "#40a02b",
29
+
"token-keyword": "#8839ef",
30
+
"token-function": "#1e66f5",
31
+
"token-constant": "#fe640b",
32
+
"token-parameter": "#e64553",
33
+
"token-punctuation": "#7c7f93",
34
+
"token-link": "#1e66f5",
35
+
"token-inserted": "#40a02b",
36
+
"token-deleted": "#d20f39",
37
+
"token-changed": "#df8e1d"
38
38
});
39
39
40
40
// pierre skips highlighting lines past 1e3 chars by default.
+31
-14
web/src/pierre.css
+31
-14
web/src/pierre.css
···
12
12
forces color-scheme: dark. without them the bg chain goes
13
13
guaranteed-invalid and light-dark() is stuck on the dark branch */
14
14
--diffs-background: var(--color-background-default);
15
-
--diffs-foreground: var(--color-foreground-default);
15
+
--diffs-foreground: #4c4f69;
16
16
color-scheme: light dark;
17
17
--diffs-light-bg: var(--color-background-default);
18
18
--diffs-dark-bg: var(--color-background-default);
···
27
27
--diffs-addition-color-override: var(--color-foreground-success-strong);
28
28
--diffs-deletion-color-override: var(--color-foreground-danger-strong);
29
29
30
-
/* syntax palette for the "tangled" theme registered in pierre.ts */
31
-
--diffs-token-comment: var(--color-foreground-placeholder);
32
-
--diffs-token-string: var(--color-foreground-success);
33
-
--diffs-token-string-expression: var(--color-foreground-success);
34
-
--diffs-token-keyword: #c084fc;
35
-
--diffs-token-function: #60a5fa;
36
-
--diffs-token-constant: #f59e0b;
37
-
--diffs-token-parameter: var(--color-foreground-default);
38
-
--diffs-token-punctuation: var(--color-foreground-muted);
39
-
--diffs-token-link: var(--color-foreground-info);
40
-
--diffs-token-inserted: var(--color-foreground-success);
41
-
--diffs-token-deleted: var(--color-foreground-danger);
42
-
--diffs-token-changed: var(--color-foreground-warning);
30
+
/* syntax palette — catppuccin latte */
31
+
--diffs-token-comment: #7c7f93; /* overlay2 */
32
+
--diffs-token-string: #40a02b; /* green */
33
+
--diffs-token-string-expression: #40a02b; /* green */
34
+
--diffs-token-keyword: #8839ef; /* mauve */
35
+
--diffs-token-function: #1e66f5; /* blue */
36
+
--diffs-token-constant: #fe640b; /* peach */
37
+
--diffs-token-parameter: #e64553; /* maroon */
38
+
--diffs-token-punctuation: #7c7f93; /* overlay2 */
39
+
--diffs-token-link: #1e66f5; /* blue */
40
+
--diffs-token-inserted: #40a02b; /* green */
41
+
--diffs-token-deleted: #d20f39; /* red */
42
+
--diffs-token-changed: #df8e1d; /* yellow */
43
43
}
44
44
45
45
@media (prefers-color-scheme: dark) {
···
51
51
--diffs-bg-deletion-override: var(--color-background-danger-subtle);
52
52
--diffs-addition-color-override: var(--color-foreground-success);
53
53
--diffs-deletion-color-override: var(--color-foreground-danger);
54
+
55
+
/* catppuccin mocha text (background stays on the app token) */
56
+
--diffs-foreground: #cdd6f4;
57
+
58
+
/* syntax palette — catppuccin mocha */
59
+
--diffs-token-comment: #9399b2; /* overlay2 */
60
+
--diffs-token-string: #a6e3a1; /* green */
61
+
--diffs-token-string-expression: #a6e3a1; /* green */
62
+
--diffs-token-keyword: #cba6f7; /* mauve */
63
+
--diffs-token-function: #89b4fa; /* blue */
64
+
--diffs-token-constant: #fab387; /* peach */
65
+
--diffs-token-parameter: #eba0ac; /* maroon */
66
+
--diffs-token-punctuation: #9399b2; /* overlay2 */
67
+
--diffs-token-link: #89b4fa; /* blue */
68
+
--diffs-token-inserted: #a6e3a1; /* green */
69
+
--diffs-token-deleted: #f38ba8; /* red */
70
+
--diffs-token-changed: #f9e2af; /* yellow */
54
71
}
55
72
}
+1
-1
web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
+1
-1
web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte