Skip to content

feat: add setting description popovers on hover#46

Open
RonenMars wants to merge 1 commit into
zerebos:mainfrom
RonenMars:feat/setting-descriptions
Open

feat: add setting description popovers on hover#46
RonenMars wants to merge 1 commit into
zerebos:mainfrom
RonenMars:feat/setting-descriptions

Conversation

@RonenMars
Copy link
Copy Markdown

Adds contextual info popovers to each setting item, displaying the full Ghostty documentation description on hover. This gives users quick access to what each setting does without leaving the app.

Demo

Each setting with a known description gets a small icon next to its name. Hovering over it shows a positioned popover with the full description from the Ghostty schema.

How it works

Concern Implementation
Description lookup getSettingDescription(id) maps camelCase setting IDs → kebab-case schema keys
Data source Existing ghostty-schema.ts (auto-generated from Ghostty's Config.zig)
Trigger Mouse enter/leave with 150ms debounced hide (prevents flicker when moving to popover)
Positioning Fixed positioning based on icon's getBoundingClientRect(), clamped to viewport
Animation Svelte scale transition (150ms, starts at 0.95) for smooth appear/disappear

Changes

src/lib/utils/schema.ts (new)

  • camelToKebab(id) — converts camelCase setting IDs to kebab-case keys for schema lookup, handling edge cases like x11InstanceNamex11-instance-name and consecutive capitals
  • getSettingDescription(id) — looks up a setting's description in the Ghostty schema by ID

src/lib/components/settings/Item.svelte

  • Accepts new optional settingId prop
  • Renders an info icon ( SVG) next to the setting name when a description is available
  • Shows a fixed-position popover on hover with the full description
  • Popover stays visible when hovering over it (for readability), dismisses with 150ms delay
  • Viewport-aware positioning prevents popover from overflowing the right edge
  • Styled with frosted glass effect (backdrop-filter: blur) matching the app's aesthetic

src/routes/settings/[category]/+page.svelte

  • Passes settingId={setting.id} to each <Item> component

Design decisions

  • No click required: Hover-based interaction is consistent with native macOS tooltip patterns (matching the app's macOS System Preferences aesthetic)
  • Graceful degradation: Settings without a schema description simply don't show the icon — no empty popovers
  • 150ms hide delay: Prevents the popover from flickering when the user moves their mouse from the icon to the popover content
  • Fixed positioning: Avoids layout shifts and overflow issues within scrollable settings panels

Add info icon popovers to setting items that display the full Ghostty
schema description on hover. Introduces a schema utility module
(schema.ts) for looking up descriptions by setting ID, and updates the
Item component with a hover-triggered popover UI.
@zerebos zerebos mentioned this pull request Mar 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant