+ {#if showInput}
+
+ {:else}
+
+ {/if}
-{#if updatedAssignees.length > 0}
-
{#if allowedToEdit}
{#each updatedAssignees as assignee}
{/each}
@@ -217,4 +205,10 @@
{/each}
{/if}
+
+ {#if !valid && validationMessage}
+
+ {validationMessage}
+
+ {/if}
{/if}
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
deleted file mode 100644
index c732ede59..000000000
--- a/src/components/Avatar.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
-
} "{publicKey}")
diff --git a/src/components/BadgeCounterSwitch.svelte b/src/components/BadgeCounterSwitch.svelte
new file mode 100644
index 000000000..11f55e129
--- /dev/null
+++ b/src/components/BadgeCounterSwitch.svelte
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Border.svelte b/src/components/Border.svelte
deleted file mode 100644
index 170744eb9..000000000
--- a/src/components/Border.svelte
+++ /dev/null
@@ -1,293 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {@render children()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index a10878563..5ce162754 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -1,23 +1,29 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {@render children()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {title}>
+ {@render children()}
diff --git a/src/components/Changes.svelte b/src/components/Changes.svelte
index 67e90a713..1555530db 100644
--- a/src/components/Changes.svelte
+++ b/src/components/Changes.svelte
@@ -5,13 +5,13 @@
import { cachedGetDiff, cachedListCommits } from "@app/lib/invoke";
import { pluralize } from "@app/lib/utils";
+ import Button from "@app/components/Button.svelte";
import Changeset from "@app/components/Changeset.svelte";
import CobCommitTeaser from "@app/components/CobCommitTeaser.svelte";
import CommitsContainer from "@app/components/CommitsContainer.svelte";
import Icon from "@app/components/Icon.svelte";
import Id from "@app/components/Id.svelte";
import JobCob from "@app/components/JobCob.svelte";
- import NakedButton from "@app/components/NakedButton.svelte";
interface Props {
patchId: string;
@@ -66,11 +66,11 @@
position: relative;
display: flex;
flex-direction: column;
- font-size: 0.875rem;
+ font: var(--txt-body-m-regular);
margin-left: 0.5rem;
gap: 0.5rem;
padding: 1rem 0.5rem 0.5rem 1rem;
- border-left: 1px solid var(--color-fill-separator);
+ border-left: 1px solid var(--color-border-subtle);
}
.commit:last-of-type::after {
content: "";
@@ -78,7 +78,7 @@
left: -18.5px;
top: 14px;
bottom: -0.5rem;
- border-left: 4px solid var(--color-background-default);
+ border-left: 4px solid var(--color-surface-canvas);
}
.commit-dot {
width: 0.25rem;
@@ -86,30 +86,30 @@
position: absolute;
top: 0.625rem;
left: -18.5px;
- background-color: var(--color-fill-separator);
+ background-color: var(--color-border-subtle);
}
.commit {
cursor: pointer;
}
.commit-dot.active {
- background-color: var(--color-border-focus);
+ background-color: var(--color-border-brand);
}
.commit:hover:not(.single-commit) .commit-dot:not(.active) {
- background-color: var(--color-foreground-contrast);
+ background-color: var(--color-text-primary);
}
.commit:hover:not(.single-commit) {
- background-color: var(--color-background-float);
+ background-color: var(--color-surface-canvas);
}
.disabled {
- color: var(--color-foreground-disabled) !important;
+ color: var(--color-text-disabled) !important;
}
.summary {
cursor: pointer;
padding: 0.25rem 0;
}
.summary:hover:not(.single-commit) {
- background-color: var(--color-background-float);
- color: var(--color-foreground-contrast) !important;
+ background-color: var(--color-surface-canvas);
+ color: var(--color-text-primary) !important;
}
.single-commit {
cursor: default !important;
@@ -117,30 +117,25 @@
-
(hideChanges = !hideChanges)}
- stylePadding="0 4px">
+
-
Changes
+
+
Changes
{#if !hideChanges}
- (filesExpanded = !filesExpanded)}>
+
+
{/if}
@@ -150,13 +145,13 @@
{#snippet leftHeader()}
- Commits
+ Commits
{/snippet}
{
@@ -169,11 +164,8 @@
{commits.length}
{pluralize("commit", commits.length)} on base
-
-
Base
+
+
Base
{#each [...commits].reverse() as commit, idx}
@@ -211,7 +203,7 @@
{/await}
{#await cachedGetDiff(rid, { base, head, unified: 3, highlight: true })}
-
Loading…
+
Loading…
{:then diff}
{/await}
diff --git a/src/components/CheckoutPatchButton.svelte b/src/components/CheckoutPatchButton.svelte
index 80c985812..927704198 100644
--- a/src/components/CheckoutPatchButton.svelte
+++ b/src/components/CheckoutPatchButton.svelte
@@ -1,10 +1,9 @@
-
+
{#snippet toggle(onclick)}
-
Checkout patch
-
+
{/snippet}
{#snippet popover()}
-
-
+
+
To checkout this patch in your working copy, run:
-
+
{/snippet}
diff --git a/src/components/CheckoutRepoButton.svelte b/src/components/CheckoutRepoButton.svelte
index dc3522389..e5089dbd8 100644
--- a/src/components/CheckoutRepoButton.svelte
+++ b/src/components/CheckoutRepoButton.svelte
@@ -1,5 +1,4 @@
-
+
{#snippet toggle(onclick)}
diff --git a/src/components/Clipboard.svelte b/src/components/Clipboard.svelte
index 446460d57..50bf11739 100644
--- a/src/components/Clipboard.svelte
+++ b/src/components/Clipboard.svelte
@@ -1,6 +1,13 @@
-
-
+ !noPopover && setVisible(true)}
+ onmouseleave={() => !noPopover && setVisible(false)}>
+
+
+
+ {#if visible}
+
+
+ {tooltip}
+
+ {/if}
diff --git a/src/components/CobCacheWarning.svelte b/src/components/CobCacheWarning.svelte
new file mode 100644
index 000000000..3837e4365
--- /dev/null
+++ b/src/components/CobCacheWarning.svelte
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+ There's a problem with your COB cache, so some {noun} may not be displayed.
+ You can rebuild the cache to resolve this.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Command.svelte b/src/components/Command.svelte
index 67f4aa358..3004acbc8 100644
--- a/src/components/Command.svelte
+++ b/src/components/Command.svelte
@@ -1,5 +1,4 @@
{#if closed}
- (closed = false)}>
-
-
+
+
{:else}
-
+
- (closed = true)}>
- Cancel
-
+
{/if}
diff --git a/src/components/CopyableId.svelte b/src/components/CopyableId.svelte
index a2633df08..04dbc64f8 100644
--- a/src/components/CopyableId.svelte
+++ b/src/components/CopyableId.svelte
@@ -7,7 +7,13 @@
inline = false,
children,
id,
- }: { inline?: boolean; children?: Snippet; id: string } = $props();
+ styleFont = undefined,
+ }: {
+ inline?: boolean;
+ children?: Snippet;
+ id: string;
+ styleFont?: string;
+ } = $props();
let clipboard: Clipboard;
@@ -15,12 +21,12 @@
-
+
+{stats.insertions}
-{stats.deletions}
diff --git a/src/components/Discussion.svelte b/src/components/Discussion.svelte
index 8c2f8ef42..ac0089e00 100644
--- a/src/components/Discussion.svelte
+++ b/src/components/Discussion.svelte
@@ -11,9 +11,9 @@
import * as roles from "@app/lib/roles";
import { scrollIntoView } from "@app/lib/utils";
+ import Button from "@app/components/Button.svelte";
import CommentToggleInput from "@app/components/CommentToggleInput.svelte";
import Icon from "@app/components/Icon.svelte";
- import NakedButton from "@app/components/NakedButton.svelte";
import ThreadComponent from "@app/components/Thread.svelte";
interface Props {
@@ -84,29 +84,28 @@
-
(hideDiscussion = !hideDiscussion)}>
-
+
- Discussion
+ Discussion
{sum(
commentThreads.map(t => {
return t.replies.length + 1;
@@ -116,8 +115,8 @@
- {
if (hideDiscussion) {
@@ -130,8 +129,8 @@
await toggleReply();
}}>
- Comment
-
+ Comment
+
diff --git a/src/components/DropdownListItem.svelte b/src/components/DropdownListItem.svelte
index 41c51f325..32f6613f0 100644
--- a/src/components/DropdownListItem.svelte
+++ b/src/components/DropdownListItem.svelte
@@ -33,32 +33,30 @@
min-height: 2rem;
padding: 0 0.75rem;
white-space: nowrap;
- font-size: var(--font-size-small);
- font-weight: var(--font-weight-regular);
- color: var(--color-foreground-contrast);
- clip-path: var(--1px-corner-fill);
+ font: var(--txt-body-m-regular);
+ color: var(--color-text-primary);
+ border-radius: var(--border-radius-sm);
}
.item.disabled {
- color: var(--color-foreground-disabled);
+ color: var(--color-text-disabled);
}
.item:hover,
.selected {
- background-color: var(--color-fill-ghost);
+ background-color: var(--color-surface-subtle);
}
.selected {
- font-weight: var(--font-weight-semibold);
- color: var(--color-foreground-contrast);
- background-color: var(--color-fill-ghost);
+ color: var(--color-text-primary);
+ background-color: var(--color-surface-subtle);
}
.item:hover.selected {
- background-color: var(--color-fill-ghost-hover);
+ background-color: var(--color-surface-mid);
}
.item:hover.selected.disabled {
- background-color: var(--color-fill-ghost);
+ background-color: var(--color-surface-subtle);
}
.item:hover.disabled {
cursor: not-allowed;
- background-color: var(--color-background-float);
+ background-color: var(--color-surface-canvas);
}
diff --git a/src/components/EditableTitle.svelte b/src/components/EditableTitle.svelte
index 552c55456..63978afa2 100644
--- a/src/components/EditableTitle.svelte
+++ b/src/components/EditableTitle.svelte
@@ -1,7 +1,7 @@
-
+
{#if children}
{@render children()}
+
{:else}
- {href}
+
{/if}
-
diff --git a/src/components/File.svelte b/src/components/FileBlock.svelte
similarity index 63%
rename from src/components/File.svelte
rename to src/components/FileBlock.svelte
index c45c9bf78..72f91e076 100644
--- a/src/components/File.svelte
+++ b/src/components/FileBlock.svelte
@@ -3,8 +3,8 @@
import { tick } from "svelte";
+ import Button from "@app/components/Button.svelte";
import Icon from "@app/components/Icon.svelte";
- import NakedButton from "@app/components/NakedButton.svelte";
interface Props {
children: Snippet;
@@ -13,6 +13,7 @@
leftHeader?: Snippet;
rightHeader?: Snippet;
sticky?: boolean;
+ border?: boolean;
}
/* eslint-disable prefer-const */
@@ -23,6 +24,7 @@
rightHeader,
sticky = true,
expandable = true,
+ border = true,
}: Props = $props();
/* eslint-enable prefer-const */
@@ -34,25 +36,13 @@
display: flex;
align-items: center;
height: 2.5rem;
- padding-left: 0.5rem;
+ padding-left: 0.25rem;
z-index: 2;
- font-size: var(--font-size-small);
- background-color: var(--color-background-default);
+ font: var(--txt-body-m-regular);
position: relative;
- }
- .header::after {
- position: absolute;
- z-index: -1;
- content: " ";
- background-color: var(--color-fill-float-hover);
- clip-path: var(--2px-top-corner-fill);
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- }
- .header.collapsed {
- clip-path: var(--2px-corner-fill);
+ background-color: var(--color-surface-canvas);
+ border-top-left-radius: var(--border-radius-md);
+ border-top-right-radius: var(--border-radius-md);
}
.sticky {
@@ -71,26 +61,25 @@
position: relative;
overflow-x: auto;
z-index: 1;
- }
- .container::after {
- position: absolute;
- z-index: -1;
- content: " ";
- clip-path: var(--2px-bottom-corner-fill);
- background-color: var(--color-background-float);
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
+ border-top: none;
+ border-bottom-left-radius: var(--border-radius-md);
+ border-bottom-right-radius: var(--border-radius-md);
}
-