ui: ESLint config updates (#27700)

* chore: Spacing between sibling elements in html markup

* chore: Formatting and linting rules
This commit is contained in:
Aleksander Grygier
2026-08-25 14:34:34 +02:00
committed by GitHub
parent 3737e41370
commit f1357e4998
267 changed files with 1706 additions and 1344 deletions
@@ -40,12 +40,12 @@
</script>
<Collapsible.Root
{open}
class={cn('group/collapsible', 'my-0!', className)}
onOpenChange={(value) => {
open = value;
onToggle?.();
}}
class={cn('group/collapsible', 'my-0!', className)}
{open}
>
<Collapsible.Trigger
class={cn(
@@ -56,10 +56,10 @@
<div class="flex min-w-0 items-start gap-2 text-muted-foreground">
{#if iconUrl}
<img
src={iconUrl}
alt=""
class={cn('shrink-0 rounded-sm mt-0.75', iconClass)}
onerror={hideBrokenIcon}
src={iconUrl}
/>
{:else if IconComponent}
<IconComponent class={cn('shrink-0 text-muted-foreground/60 mt-0.75', iconClass)} />
@@ -40,12 +40,12 @@
</script>
<Collapsible.Root
{open}
class={cn('group/collapsible', 'overflow-hidden rounded-md', className)}
onOpenChange={(value) => {
open = value;
onToggle?.();
}}
class={cn('group/collapsible', 'overflow-hidden rounded-md', className)}
{open}
style="background: var(--code-background); border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);"
>
<Collapsible.Trigger
@@ -57,10 +57,10 @@
<div class="flex min-w-0 items-start gap-2 text-muted-foreground">
{#if iconUrl}
<img
src={iconUrl}
alt=""
class={cn('shrink-0 rounded-sm mt-0.5', iconClass)}
onerror={hideBrokenIcon}
src={iconUrl}
/>
{:else if IconComponent}
<IconComponent class={cn('shrink-0 text-muted-foreground/60 mt-0.5', iconClass)} />
@@ -867,10 +867,10 @@
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
bind:this={containerRef}
onclick={handleMermaidClick}
class="markdown-content {className}{settingsStore.config[SETTINGS_KEYS.FULL_HEIGHT_CODE_BLOCKS]
? ' full-height-code-blocks'
: ''}"
onclick={handleMermaidClick}
>
{#each renderedBlocks as block (block.id)}
<div class="markdown-block" {...{ [MARKDOWN_DATA_ATTRS.BLOCK_ID]: block.id }}>
@@ -893,14 +893,16 @@
<div class="mermaid-block-wrapper streaming-mermaid-block">
<div class="code-block-header">
<span class="code-language">mermaid</span>
<div class="code-block-actions">
<ActionIconCopyToClipboard
text={incompleteCodeBlock.code}
canCopy={false}
ariaLabel="Diagram incomplete"
canCopy={false}
text={incompleteCodeBlock.code}
/>
</div>
</div>
<div class="mermaid-loading-placeholder">
<span class="mermaid-loading-text">Generating diagram...</span>
</div>
@@ -909,14 +911,16 @@
<div class="svg-block-wrapper streaming-svg-block">
<div class="code-block-header">
<span class="code-language">svg</span>
<div class="code-block-actions">
<ActionIconCopyToClipboard
text={incompleteCodeBlock.code}
canCopy={false}
ariaLabel="Diagram incomplete"
canCopy={false}
text={incompleteCodeBlock.code}
/>
</div>
</div>
{#if liveSvgHtml}
<div class="svg-scroll-container">
<div class={SVG.BLOCK_CLASS}>
@@ -933,10 +937,11 @@
<div class="code-block-wrapper streaming-code-block relative">
<div class="code-block-header">
<span class="code-language">{incompleteCodeBlock.language || 'text'}</span>
<CodeBlockActions
code={incompleteCodeBlock.code}
language={incompleteCodeBlock.language || 'text'}
disabled
language={incompleteCodeBlock.language || 'text'}
onPreview={(code, lang) => {
previewCode = code;
previewLanguage = lang;
@@ -961,16 +966,16 @@
</div>
<DialogCodePreview
open={previewDialogOpen}
code={previewCode}
language={previewLanguage}
onOpenChange={handlePreviewDialogOpenChange}
open={previewDialogOpen}
/>
<DialogMermaidPreview
onOpenChange={handleMermaidPreviewOpenChange}
open={mermaidPreviewOpen}
svgHtml={mermaidPreviewSvgHtml}
onOpenChange={handleMermaidPreviewOpenChange}
/>
<style>
@@ -103,22 +103,22 @@
<div
class="mermaid-preview-diagram transform-origin-center inline-block min-h-fit min-w-fit will-change-transform {isDragging &&
'select-none'}"
onpointerdown={handlePointerDown}
onpointerleave={handlePointerUp}
onpointermove={handlePointerMove}
onpointerup={handlePointerUp}
style="transform: translate({translateX}px, {translateY}px) scale({scale}); cursor: {isDragging
? 'grabbing'
: 'grab'};"
onpointerdown={handlePointerDown}
onpointermove={handlePointerMove}
onpointerup={handlePointerUp}
onpointerleave={handlePointerUp}
>
<div bind:this={svgHost}></div>
</div>
<MermaidPreviewControls
{scale}
{svgHtml}
onResetView={resetView}
onZoomIn={zoomIn}
onZoomOut={zoomOut}
onResetView={resetView}
{scale}
{svgHtml}
/>
</div>
@@ -34,42 +34,46 @@
>
<div class="mermaid-preview-controls-inner flex items-center gap-1 rounded-lg bg-muted p-1">
<button
aria-label="Zoom out"
class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
onclick={onZoomOut}
title="Zoom out"
aria-label="Zoom out"
>
<ZoomOutIcon class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
</button>
<span
class="mermaid-preview-zoom-label min-w-[3.5rem] px-0.5 text-center text-xs font-medium text-muted-foreground tabular-nums select-none"
>{Math.round(scale * 100)}%</span
>
<button
aria-label="Zoom in"
class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
onclick={onZoomIn}
title="Zoom in"
aria-label="Zoom in"
>
<ZoomInIcon class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
</button>
<div class="mermaid-preview-controls-separator mx-1 h-5 w-px bg-border/50"></div>
<button
aria-label="Reset view"
class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
onclick={onResetView}
title="Reset view"
aria-label="Reset view"
>
<RotateCcwIcon class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
</button>
<div class="mermaid-preview-controls-separator mx-1 h-5 w-px bg-border/50"></div>
<button
aria-label="Download SVG"
class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
onclick={downloadSvg}
title="Download SVG"
aria-label="Download SVG"
>
<Download class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
</button>
@@ -129,8 +129,8 @@
<div
bind:this={scrollEl}
onscroll={handleScrollEvent}
class="code-preview-wrapper min-w-0 max-w-full overflow-auto rounded-xl border shadow-[0_1px_2px_0_rgb(0_0_0_/_0.05)] {className}"
onscroll={handleScrollEvent}
style="border-color: color-mix(in oklch, var(--border) 30%, transparent); background: var(--code-background); max-height: {maxHeight}; {maxWidth
? `max-width: ${maxWidth};`
: ''}"