diff --git a/.changeset/lint-ux-style-polish.md b/.changeset/lint-ux-style-polish.md new file mode 100644 index 00000000..39efcb95 --- /dev/null +++ b/.changeset/lint-ux-style-polish.md @@ -0,0 +1,5 @@ +--- +"@inkeep/open-knowledge": patch +--- + +Style polish on the lint UX: the Fix button in the editor's lint hover popup now uses the standard button styling instead of a one-off look, and the settings sidebar search matches the app's other search boxes — a single clean border around the input (no doubled bottom edge) with results listed flush below it. diff --git a/packages/app/src/components/settings/SettingsDialogShell.tsx b/packages/app/src/components/settings/SettingsDialogShell.tsx index 8e08d614..1adddd2c 100644 --- a/packages/app/src/components/settings/SettingsDialogShell.tsx +++ b/packages/app/src/components/settings/SettingsDialogShell.tsx @@ -366,16 +366,20 @@ function SettingsSidebar({ {/* cmdk surface wraps ONLY the search input + results — its roving focus never touches the plain-button group nav below (which keeps its aria-current + disabled-group semantics). The popover-styled base - classes are reset so it sits flush as a plain sidebar search box. */} + classes are reset; the input wrapper is boxed like a shadcn Input + (its stock border-b divider only ever bordered the box bottom here) + and the results render flush on the sidebar background, like the + group nav they replace while searching. */} {/* Polite result-count announcement — cmdk's listbox semantics don't @@ -385,7 +389,7 @@ function SettingsSidebar({ {query !== '' ? : null} {query !== '' ? ( - + No settings found diff --git a/packages/app/src/editor/extensions/markdown-lint-decorations.ts b/packages/app/src/editor/extensions/markdown-lint-decorations.ts index 9546b368..c47dd8eb 100644 --- a/packages/app/src/editor/extensions/markdown-lint-decorations.ts +++ b/packages/app/src/editor/extensions/markdown-lint-decorations.ts @@ -42,11 +42,13 @@ import type { Node as PmNode } from '@tiptap/pm/model'; import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'; import { Decoration, DecorationSet } from '@tiptap/pm/view'; import { LINT_NAV_EVENT, type LintNavDetail } from '@/components/ProblemsPanel'; +import { buttonVariants } from '@/components/ui/button'; import { collectFixes, LINT_SOURCE_FIXED_EVENT } from '@/editor/apply-lint-fix'; import { clearPendingSourceNavigation, peekPendingSourceNavigation, } from '@/editor/source-editor-navigation'; +import { cn } from '@/lib/utils'; import { fetchEffectiveLintConfig, subscribeToLintConfigChanged } from '../lint-config-client'; const markdownLintDecorationKey = new PluginKey('markdownLintDecorations'); @@ -212,7 +214,14 @@ function createLintTooltip( tooltip.appendChild(message); const fixButton = document.createElement('button'); fixButton.type = 'button'; - fixButton.className = 'ok-lint-tooltip-fix'; + // Styled by the shared shadcn button recipe so the imperative tooltip matches + // React surfaces; `ok-lint-tooltip-fix` is a bare selector hook (tests + + // the [hidden] guard in globals.css), not a styling class. + fixButton.className = cn( + 'ok-lint-tooltip-fix', + buttonVariants({ variant: 'default', size: 'xs' }), + 'mt-1 self-start', + ); fixButton.hidden = true; tooltip.appendChild(fixButton); // Body-appended, viewport-fixed: positioned by floating-ui against a virtual diff --git a/packages/app/src/globals.css b/packages/app/src/globals.css index c217b033..640b7dea 100644 --- a/packages/app/src/globals.css +++ b/packages/app/src/globals.css @@ -5276,18 +5276,11 @@ html.electron-mode [data-slot="sidebar-inner"] { .ok-lint-tooltip-message { white-space: pre-line; } -.ok-lint-tooltip-fix { - align-self: flex-start; - margin-top: 0.25rem; - padding: 0.125rem 0.5rem; - border-radius: 0.25rem; - font-weight: 600; - cursor: pointer; - color: var(--color-fd-primary-foreground, #fff); - background: var(--color-fd-primary, oklch(55% 0.2 255)); -} -.ok-lint-tooltip-fix:hover { - filter: brightness(1.08); +/* Fix button styling comes from the shadcn buttonVariants recipe applied in + markdown-lint-decorations.ts; this guard keeps the recipe's inline-flex from + overriding the `hidden` attribute on the imperative DOM element. */ +.ok-lint-tooltip-fix[hidden] { + display: none; } .ok-lint-tooltip[hidden] { display: none;