fix: restyle block components to match playground CSS classes #86

Merged

forgejo_admin merged 1 commit from 71-port-note-detail into main 2026-03-28 05:29:05 +00:00

Conversation 2 Commits 1 Files changed 7 +97 -258

forgejo_admin commented 2026-03-28 05:08:20 +00:00

Owner

Copy link

Summary

• Block components used orphaned Tailwind utility classes (Tailwind removed in PR #50), leaving blocks unstyled
• Replaced all block components with playground CSS class structure so they pick up design system styles from app.css
• Also fixes svelte_self_deprecated and state_referenced_locally build warnings

Changes

• src/lib/components/blocks/HeadingBlock.svelte: replaced Tailwind classes with playground .block-heading + .anchor-link; eliminated 107-line if/else repetition
• src/lib/components/blocks/ParagraphBlock.svelte: replaced .note-paragraph scoped styles with playground .block.block--paragraph; removed 26-line <style> block
• src/lib/components/blocks/TableBlock.svelte: replaced custom .table-header/.table-row/.table-cell with playground .block--table > .table-wrap > table; removed 28-line <style> block
• src/lib/components/blocks/ListBlock.svelte: replaced Tailwind classes with playground .block.block--list; replaced deprecated <svelte:self> with self-import; removed 20-line <style> block
• src/lib/components/blocks/CodeBlock.svelte: replaced .code-block + custom styles with playground .block--code > .code-header > .code-lang; removed 23-line <style> block
• src/lib/components/blocks/MermaidBlock.svelte: replaced .mermaid-block with playground .block.block--mermaid; removed scoped styles referencing undefined CSS vars
• src/lib/components/blocks/BlockRenderer.svelte: replaced Tailwind fallback div with .block.empty-state

Test Plan

• npm run build passes with no errors
• No Svelte warnings (state_referenced_locally and svelte_self_deprecated resolved)
• Visual verification: note detail page renders all block types with correct styling

Review Checklist

• Passed automated review-fix loop
• No secrets committed
• No unnecessary file changes
• Commit messages are descriptive

Related Notes

• Closes #71
• Depends on #68 (CSS foundation), PR #75 (app.css port), PR #79 (note detail page port)
• pal-e-app -- SvelteKit frontend

## Summary - Block components used orphaned Tailwind utility classes (Tailwind removed in PR #50), leaving blocks unstyled - Replaced all block components with playground CSS class structure so they pick up design system styles from app.css - Also fixes svelte_self_deprecated and state_referenced_locally build warnings ## Changes - `src/lib/components/blocks/HeadingBlock.svelte`: replaced Tailwind classes with playground `.block-heading` + `.anchor-link`; eliminated 107-line if/else repetition - `src/lib/components/blocks/ParagraphBlock.svelte`: replaced `.note-paragraph` scoped styles with playground `.block.block--paragraph`; removed 26-line `<style>` block - `src/lib/components/blocks/TableBlock.svelte`: replaced custom `.table-header/.table-row/.table-cell` with playground `.block--table > .table-wrap > table`; removed 28-line `<style>` block - `src/lib/components/blocks/ListBlock.svelte`: replaced Tailwind classes with playground `.block.block--list`; replaced deprecated `<svelte:self>` with self-import; removed 20-line `<style>` block - `src/lib/components/blocks/CodeBlock.svelte`: replaced `.code-block` + custom styles with playground `.block--code > .code-header > .code-lang`; removed 23-line `<style>` block - `src/lib/components/blocks/MermaidBlock.svelte`: replaced `.mermaid-block` with playground `.block.block--mermaid`; removed scoped styles referencing undefined CSS vars - `src/lib/components/blocks/BlockRenderer.svelte`: replaced Tailwind fallback div with `.block.empty-state` ## Test Plan - [x] `npm run build` passes with no errors - [x] No Svelte warnings (state_referenced_locally and svelte_self_deprecated resolved) - [ ] Visual verification: note detail page renders all block types with correct styling ## Review Checklist - [x] Passed automated review-fix loop - [x] No secrets committed - [x] No unnecessary file changes - [x] Commit messages are descriptive ## Related Notes - Closes #71 - Depends on #68 (CSS foundation), PR #75 (app.css port), PR #79 (note detail page port) - `pal-e-app` -- SvelteKit frontend

forgejo_admin added 1 commit 2026-03-28 05:08:20 +00:00

fix: restyle block components to use playground CSS classes ... a2c0388745

Block components (HeadingBlock, ParagraphBlock, TableBlock, ListBlock,
CodeBlock, MermaidBlock) were using orphaned Tailwind utility classes
and component-scoped styles that duplicated app.css rules. Since
Tailwind was removed in PR #50, these classes had no effect, leaving
blocks unstyled.

Replaced with playground CSS classes (block-heading, block--paragraph,
block--code, block--table, block--list, block--mermaid) that are
defined in app.css from the playground design system port.

Also fixes svelte_self_deprecated warning in ListBlock (uses self-import
instead of <svelte:self>) and state_referenced_locally warnings in
HeadingBlock (removed derived tag computation, uses if/else blocks).

Closes #71

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented 2026-03-28 05:09:20 +00:00

Author

Owner

Copy link

QA Review: PR #86

Verified

• All CSS classes referenced in components (block-heading, block--paragraph, block--code, block--table, block--list, block--mermaid, anchor-link, code-header, code-lang, table-wrap, empty-state) exist in src/app.css
• Base .block class exists in app.css (provides margin-bottom: 1rem)
• HeadingBlock scoped styles (.block-heading--h1, .block-heading--h3) correctly override the global .block-heading for level-specific sizing
• ListBlock uses self-import (import ListBlock from './ListBlock.svelte') instead of deprecated <svelte:self> -- resolves Svelte warning
• Build passes with no errors, no new warnings introduced
• Net deletion of 161 lines -- removed orphaned Tailwind classes and redundant scoped <style> blocks

Nits (non-blocking)

1. HeadingBlock h4/h5 reuse h3 class: block-heading--h3 is applied to h4 and h5 elements. Consider block-heading--h4 and block-heading--h5 for semantic clarity, even if the styles are identical today. (Cosmetic -- not blocking.)
2. MermaidBlock container centering: The old code had class="flex justify-center" on the mermaid container div. The playground CSS .block--mermaid has text-align: center which handles this, so the removal is correct. Just noting for awareness.

No Issues Found

• No secrets, no unrelated file changes, no regressions
• Playground CSS class structure matches app.css definitions exactly

VERDICT: APPROVED

## QA Review: PR #86 ### Verified - All CSS classes referenced in components (`block-heading`, `block--paragraph`, `block--code`, `block--table`, `block--list`, `block--mermaid`, `anchor-link`, `code-header`, `code-lang`, `table-wrap`, `empty-state`) exist in `src/app.css` - Base `.block` class exists in app.css (provides `margin-bottom: 1rem`) - HeadingBlock scoped styles (`.block-heading--h1`, `.block-heading--h3`) correctly override the global `.block-heading` for level-specific sizing - ListBlock uses self-import (`import ListBlock from './ListBlock.svelte'`) instead of deprecated `<svelte:self>` -- resolves Svelte warning - Build passes with no errors, no new warnings introduced - Net deletion of 161 lines -- removed orphaned Tailwind classes and redundant scoped `<style>` blocks ### Nits (non-blocking) 1. **HeadingBlock h4/h5 reuse h3 class**: `block-heading--h3` is applied to h4 and h5 elements. Consider `block-heading--h4` and `block-heading--h5` for semantic clarity, even if the styles are identical today. (Cosmetic -- not blocking.) 2. **MermaidBlock container centering**: The old code had `class="flex justify-center"` on the mermaid container div. The playground CSS `.block--mermaid` has `text-align: center` which handles this, so the removal is correct. Just noting for awareness. ### No Issues Found - No secrets, no unrelated file changes, no regressions - Playground CSS class structure matches `app.css` definitions exactly **VERDICT: APPROVED**

forgejo_admin commented 2026-03-28 05:11:26 +00:00

Author

Owner

Copy link

PR #86 Review

DOMAIN REVIEW

Tech stack: SvelteKit / TypeScript / CSS (pure CSS design system, no Tailwind)

This PR replaces orphaned Tailwind utility classes across 7 block components with playground CSS class names defined in app.css. All CSS classes referenced in the components (block, block--paragraph, block--code, code-header, code-lang, block-heading, anchor-link, block--list, block--table, table-wrap, block--mermaid, empty-state) have matching definitions in src/app.css (lines 360-480, 788-793). No dangling class references.

Component architecture: Clean. Each block component is now a thin template that delegates all styling to the design system in app.css, with scoped <style> only for heading-level modifiers (block-heading--h1, block-heading--h3) that override the base .block-heading rule. This is the correct Svelte pattern -- global design system handles the common case, scoped styles handle component-specific overrides.

Svelte 5 compliance: <svelte:self> replaced with self-import in ListBlock -- correct fix for the svelte_self_deprecated warning. state_referenced_locally warning also resolved (not visible in diff, but PR body claims it and no grep hits remain).

XSS protection: All {@html} usages are sanitized. BlockRenderer passes content through autolink() (which calls sanitize() via DOMPurify), sanitize() directly, or sanitizeListItems() (recursive DOMPurify). No unprotected raw HTML rendering.

DRY improvement: HeadingBlock eliminated ~60 lines of repeated per-level markup. Each heading level is now 2 lines. The h4/h5 sharing block-heading--h3 class is intentional per the "h3+ are smaller, no border" design decision.

Net change: +97 / -258 = 161 lines deleted. Pure cleanup.

BLOCKERS

None.

• No new functionality added (CSS class swap on existing components), so the zero-unit-test state is pre-existing, not introduced by this PR.
• No unvalidated user input -- all {@html} goes through DOMPurify.
• No secrets or credentials in code.
• No DRY violations in auth/security paths.

NITS

1. Inline style in MermaidBlock (src/lib/components/blocks/MermaidBlock.svelte line 39): style="font-size: 0.8rem; color: var(--color-text-muted);" on the error fallback <pre>. This is the only remaining inline style across all 7 block components. Could be a scoped style or a utility class in app.css for consistency. Low priority since it is an error display path.

2. PR body template: Uses ## Related Notes instead of the standard ## Related section header. Minor template drift.

SOP COMPLIANCE

• Branch named after issue (71-port-note-detail references #71)
• PR body has Summary, Changes, Test Plan, Related sections
• Related section does not reference a plan slug (acceptable -- this is a standalone ticket, not plan-phase work)
• No secrets committed
• No unnecessary file changes -- all 7 files are block components, directly in scope
• Commit messages are descriptive

PROCESS OBSERVATIONS

• Change failure risk: Low. This is a CSS class replacement with a net deletion of 161 lines. The design system in app.css was ported in prior PRs (#75, #79). This PR aligns the block components to use those classes.
• Dependency chain: Correctly declared -- depends on #68 (CSS foundation), #75 (app.css port), #79 (note detail page port). These are all closed/merged.
• Test gap: The visual verification checkbox in the test plan is unchecked. CI runs npm run build and npm run check, which would catch broken imports or type errors, but visual correctness requires manual verification. This is expected for a CSS-only PR.

VERDICT: APPROVED

## PR #86 Review ### DOMAIN REVIEW **Tech stack**: SvelteKit / TypeScript / CSS (pure CSS design system, no Tailwind) This PR replaces orphaned Tailwind utility classes across 7 block components with playground CSS class names defined in `app.css`. All CSS classes referenced in the components (`block`, `block--paragraph`, `block--code`, `code-header`, `code-lang`, `block-heading`, `anchor-link`, `block--list`, `block--table`, `table-wrap`, `block--mermaid`, `empty-state`) have matching definitions in `src/app.css` (lines 360-480, 788-793). No dangling class references. **Component architecture**: Clean. Each block component is now a thin template that delegates all styling to the design system in `app.css`, with scoped `<style>` only for heading-level modifiers (`block-heading--h1`, `block-heading--h3`) that override the base `.block-heading` rule. This is the correct Svelte pattern -- global design system handles the common case, scoped styles handle component-specific overrides. **Svelte 5 compliance**: `<svelte:self>` replaced with self-import in ListBlock -- correct fix for the `svelte_self_deprecated` warning. `state_referenced_locally` warning also resolved (not visible in diff, but PR body claims it and no grep hits remain). **XSS protection**: All `{@html}` usages are sanitized. BlockRenderer passes content through `autolink()` (which calls `sanitize()` via DOMPurify), `sanitize()` directly, or `sanitizeListItems()` (recursive DOMPurify). No unprotected raw HTML rendering. **DRY improvement**: HeadingBlock eliminated ~60 lines of repeated per-level markup. Each heading level is now 2 lines. The h4/h5 sharing `block-heading--h3` class is intentional per the "h3+ are smaller, no border" design decision. **Net change**: +97 / -258 = 161 lines deleted. Pure cleanup. ### BLOCKERS None. - No new functionality added (CSS class swap on existing components), so the zero-unit-test state is pre-existing, not introduced by this PR. - No unvalidated user input -- all `{@html}` goes through DOMPurify. - No secrets or credentials in code. - No DRY violations in auth/security paths. ### NITS 1. **Inline style in MermaidBlock** (`src/lib/components/blocks/MermaidBlock.svelte` line 39): `style="font-size: 0.8rem; color: var(--color-text-muted);"` on the error fallback `<pre>`. This is the only remaining inline style across all 7 block components. Could be a scoped style or a utility class in app.css for consistency. Low priority since it is an error display path. 2. **PR body template**: Uses `## Related Notes` instead of the standard `## Related` section header. Minor template drift. ### SOP COMPLIANCE - [x] Branch named after issue (`71-port-note-detail` references #71) - [x] PR body has Summary, Changes, Test Plan, Related sections - [ ] Related section does not reference a plan slug (acceptable -- this is a standalone ticket, not plan-phase work) - [x] No secrets committed - [x] No unnecessary file changes -- all 7 files are block components, directly in scope - [x] Commit messages are descriptive ### PROCESS OBSERVATIONS - **Change failure risk**: Low. This is a CSS class replacement with a net deletion of 161 lines. The design system in `app.css` was ported in prior PRs (#75, #79). This PR aligns the block components to use those classes. - **Dependency chain**: Correctly declared -- depends on #68 (CSS foundation), #75 (app.css port), #79 (note detail page port). These are all closed/merged. - **Test gap**: The visual verification checkbox in the test plan is unchecked. CI runs `npm run build` and `npm run check`, which would catch broken imports or type errors, but visual correctness requires manual verification. This is expected for a CSS-only PR. ### VERDICT: APPROVED

forgejo_admin merged commit 6524ce8571 into main 2026-03-28 05:29:05 +00:00

forgejo_admin deleted branch 71-port-note-detail 2026-03-28 05:29:05 +00:00

forgejo_admin referenced this pull request from a commit 2026-03-28 05:29:05 +00:00

fix: restyle block components to match playground CSS classes (#86)

forgejo_admin referenced this pull request 2026-03-28 12:09:07 +00:00

Validate session 2026-03-28 merges (4 PRs) #88

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

domain:backend

  

domain:devops

  

domain:frontend

No labels

domain:backend

domain:devops

domain:frontend

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

forgejo_admin/pal-e-docs-app!86

No description provided.