Style settings schema sections like Obsidian cards #193

New issue

Closed

opened 2026-06-01 09:26:44 +00:00 by steve · 0 comments

steve commented

2026-06-01 09:26:44 +00:00

Owner

Problem

Schema settings pages such as Editor, Files and Links, Workspace, and plugin
declarative configuration feel visually unfinished after the navigation change.
Top borders and sticky section rows make each category look like a list item
instead of a named settings group, and there is not enough vertical separation
between categories.

Goal

Style schema-driven settings categories like Obsidian settings sections: no top
border on the category heading, a subtle background panel around each category's
settings, internal row separators only, rounded corners, and a clear gap between
categories.

Scope

Adjust the generated schema settings DOM/classes so each category can be
styled as a section title plus panel.
Style schema rows with a background panel, internal separators, and spacing
matching the Obsidian reference.
Keep existing control rendering and configuration behavior unchanged.
Cover the visual structure with focused E2E assertions.

Non-goals

Do not redesign plugin management pages or imperative plugin settings tabs.
Do not change persisted configuration keys or schema registration.
Do not change the sidebar navigation model from issue #192.

Acceptance Criteria

Category headings render without top borders or sticky row treatment.
Category settings are wrapped in a rounded, subtly tinted panel.
Rows inside a category use internal dividers, not a top border on the first
row.
Multiple categories have a clear vertical gap.
Existing setting controls still render and update without remount flashing.
Setting row titles use the setting title only; they do not repeat category
breadcrumbs such as Appearence › Advanced.
The workspace settings E2E verifies the category panel structure.

Implementation Notes

Prefer CSS hooks/classes owned by configuration.ts and
workspace-shell.css over changing the API Setting component globally.
Keep the styling scoped to schema-generated settings rows so existing
imperative tabs do not inherit card grouping unexpectedly.
The generated heading can become an unframed section title, followed by a
section-body container that receives the setting rows.

Suggested Files or Specs To Inspect

packages/workspace/src/lib/components/configuration/configuration.ts
packages/workspace/src/lib/components/configuration/configuration.svelte
packages/workspace/src/lib/styles/workspace-shell.css
packages/workspace/e2e/core-plugin-settings.spec.ts
spec/src/30-cross-package-contracts/configuration-and-settings.md
spec/src/20-packages/workspace/index.md

Validation Commands

pnpm --filter @lapis-notes/workspace check:svelte
pnpm --filter @lapis-notes/workspace check:types
pnpm --filter @lapis-notes/workspace check:format
pnpm --filter @lapis-notes/workspace check:all
pnpm --filter @lapis-notes/workspace test:e2e -- e2e/core-plugin-settings.spec.ts --project chromium
make spec-lint
mdbook build spec
pnpm backlog:verify-commit @-
pnpm backlog:doctor --strict

Follow-up to #192 — Adopt Obsidian-style settings navigation

Follow-up Tasks

Implementation Summary

Styled schema-driven settings categories as Obsidian-like panels, removed redundant category breadcrumbs from setting row titles, updated settings specs, and added E2E coverage for card structure, spacing, and plain row labels.

The Obsidian-style settings navigation now renders one selected surface at a time, but schema-driven setting sections still look like the old tree renderer: section headers are sticky setting rows and individual settings sit directly on the page with top borders. This does not match the attached Obsidian reference, where a section title sits above a softly tinted rounded group and rows inside that group are separated by internal dividers. ## Problem Schema settings pages such as Editor, Files and Links, Workspace, and plugin declarative configuration feel visually unfinished after the navigation change. Top borders and sticky section rows make each category look like a list item instead of a named settings group, and there is not enough vertical separation between categories. ## Goal Style schema-driven settings categories like Obsidian settings sections: no top border on the category heading, a subtle background panel around each category's settings, internal row separators only, rounded corners, and a clear gap between categories. ## Scope - Adjust the generated schema settings DOM/classes so each category can be styled as a section title plus panel. - Style schema rows with a background panel, internal separators, and spacing matching the Obsidian reference. - Keep existing control rendering and configuration behavior unchanged. - Cover the visual structure with focused E2E assertions. ## Non-goals - Do not redesign plugin management pages or imperative plugin settings tabs. - Do not change persisted configuration keys or schema registration. - Do not change the sidebar navigation model from issue #192. ## Acceptance Criteria - Category headings render without top borders or sticky row treatment. - Category settings are wrapped in a rounded, subtly tinted panel. - Rows inside a category use internal dividers, not a top border on the first row. - Multiple categories have a clear vertical gap. - Existing setting controls still render and update without remount flashing. - Setting row titles use the setting title only; they do not repeat category breadcrumbs such as `Appearence › Advanced`. - The workspace settings E2E verifies the category panel structure. ## Implementation Notes - Prefer CSS hooks/classes owned by `configuration.ts` and `workspace-shell.css` over changing the API `Setting` component globally. - Keep the styling scoped to schema-generated settings rows so existing imperative tabs do not inherit card grouping unexpectedly. - The generated heading can become an unframed section title, followed by a section-body container that receives the setting rows. ## Suggested Files or Specs To Inspect - `packages/workspace/src/lib/components/configuration/configuration.ts` - `packages/workspace/src/lib/components/configuration/configuration.svelte` - `packages/workspace/src/lib/styles/workspace-shell.css` - `packages/workspace/e2e/core-plugin-settings.spec.ts` - `spec/src/30-cross-package-contracts/configuration-and-settings.md` - `spec/src/20-packages/workspace/index.md` ## Validation Commands - `pnpm --filter @lapis-notes/workspace check:svelte` - `pnpm --filter @lapis-notes/workspace check:types` - `pnpm --filter @lapis-notes/workspace check:format` - `pnpm --filter @lapis-notes/workspace check:all` - `pnpm --filter @lapis-notes/workspace test:e2e -- e2e/core-plugin-settings.spec.ts --project chromium` - `make spec-lint` - `mdbook build spec` - `pnpm backlog:verify-commit @-` - `pnpm backlog:doctor --strict` ## Related Issues - Follow-up to #192 — [Adopt Obsidian-style settings navigation](../closed/192-adopt-obsidian-style-settings-navigation.md) ## Follow-up Tasks ## Implementation Summary Styled schema-driven settings categories as Obsidian-like panels, removed redundant category breadcrumbs from setting row titles, updated settings specs, and added E2E coverage for card structure, spacing, and plain row labels.

steve

2026-06-01 09:26:44 +00:00