Inline custom section creation with header controls#118
Merged
Conversation
Creation moves from Settings → Custom Sections to a hover-activated "+ Create custom section" placeholder that appears below every section. Clicking it opens the create dialog and inserts the new section right after the hovered one. Each custom section header gains trash and rename (title-only) buttons next to the visibility toggle, removing the round-trip through Settings for day-to-day management. Layout conversion after creation is dropped and the Custom Sections settings tab is removed; the inline controls cover every path. https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug
Deploying cv-manager with
|
| Latest commit: |
0307a31
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://f4712a1f.cv-manager-a5e.pages.dev |
| Branch Preview URL: | https://claude-inline-custom-section.cv-manager-a5e.pages.dev |
Cursor moving from a section into the gap below it used to lose hover mid-animation: the phantom was pulled up into the section's margin-bottom with height 0, so the 16px gap had no hit target until the phantom had already collapsed. Now the phantom occupies the full gap via padding (2+6+0+6+2 = 16px total box), and the top edge stays fixed at the section's bottom border while the element grows downward on hover. The section-hover trigger is removed so the phantom appears only when the cursor is actually inside the gap. The phantom after the final section gets a `.phantom-last` class and stays visible (lower opacity), acting as a discoverability hint for the inline creation flow. https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug
We're still iterating on the 1.34.0 feature on this branch, so the phantom gap-hover and always-visible-at-bottom behavior shouldn't get its own version. The 1.34.0 CHANGELOG entry now describes the final behavior (gap-hover + discoverability hint below the last section). https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug
Split the phantom into an outer hit target + inner dashed box so the outer can carry real padding (≈16px, matching the section gap) without growing the visible UI. Moving the cursor into that padding area keeps hover active — it's still inside the outer element — instead of the previous tight hit target where the cursor leaving the dashed border would dismiss the phantom. `.phantom-box` is the visible pill (`pointer-events: none` so hover is always resolved on the outer). The outer still starts collapsed in the 16px inter-section gap and expands to 64px on hover (16 top pad + 32 inner + 16 bottom pad). The last phantom shares the expanded state so it's always present at the bottom. https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug
Between sections the phantom now shows a persistent thin-lines + circle separator (`.phantom-hint`) so there's a visual affordance for "you can add something here" without requiring hover. The existing dashed pill (`.phantom-box`) replaces the separator on hover. Both children share the outer hit target (both have pointer-events: none) so the hover/swap is a pure opacity crossfade with no layout shift. `.phantom-last` still hides the separator and shows the pill always. Phantom rendering lives in admin.js and ships only on the admin site (public-readonly loads i18n.js + scripts.js only), and `.no-print` + the print-media rule keep both the separator and the pill out of PDFs. https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug
- Circled "+" inside the dashed pill so the pill's affordance visually matches the "⎯ (+) ⎯" hint between sections. Replaces the Material `add` icon with a `.phantom-box-plus` span (1.5px border circle using currentColor so it picks up the hover / last-phantom tints). - Pill is larger: min-width 260px, padding 10×24, font 14px, gap 10px — more presence without overlapping the surrounding sections. - Outer `.phantom-section` grows with it (24px top/bottom padding, 48px min-height) so the absolute pill fits comfortably centered. - `.phantom-last` sits fully below the last section's margin-bottom (margin-top: 16px instead of the -16px used between sections) and adds 32px top padding on top of the base — more breathing room between the last section and the always-visible pill. https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug
The hint and the pill both dropped their hand-rolled circle (border + border-radius: 50% + centered "+") in favor of the Material Symbols `add_circle` glyph. Less CSS to maintain, and it matches the rest of the app's iconography (CLAUDE.md flags Material Symbols as the standard icon library). https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug
The hint's `add_circle` icon now uses `var(--gray-300)` instead of `gray-500` so it reads as part of the same decorative separator as the lines on either side (same color). Baseline outer shrinks to `padding: 0` + no `min-height`. The only content is the 20px hint, which overlaps the section's 16px margin-bottom via the existing `margin-top: -16px`. Net visible gap between sections = ~4px of icon overflow, essentially unchanged from before the hint existed. The 16px breathing-room padding only kicks in on `:hover` when the pill is shown, and `.phantom-last` keeps its generous 32/24 padding since the pill is always visible there. https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug
- Baseline (between sections): 4px top/bottom padding so the 20px hint icon no longer touches the sections above and below it. Net inter-section gap: ~28px. - Hover (pill visible): padding bumped to 24px top/bottom so the 44px pill has ~12px of clearance from both surrounding sections (was ~4px). - Last phantom: padding bumped from 32/24 to 36/28 for consistency and a touch more breathing room around the always-visible pill. https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug
`.phantom-hint` shrinks from `width: 100%` to `50%`. Flex centering on the outer keeps it horizontally centered; the `flex: 1` lines now span half the previous width, so each side of the icon is ~half its former length. https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug
Revert the always-visible separator between sections. Back to: - baseline: invisible 16px hit area filling the section gap - hover: pill appears with breathing-room padding - .phantom-last: pill always visible under the last section Removes `.phantom-hint`, `.phantom-hint-line`, `.phantom-hint-circle` CSS and the corresponding `insertAdjacentHTML` in the injector. https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug
When the hint was removed from the outer, the content area collapsed to 0, so `padding: 24px 0` alone gave an outer of only 48px around a 44px pill — only 2px of clearance on each side. Adding `min-height: 20px` restores the content-area contribution the 20px hint used to provide, so the pill once again has ~12px clearance from the surrounding sections on hover and ~20px on the last phantom. https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug
String rename: - `custom_section.create_phantom` in all 8 locales switches from "Create..." to "Add..." variants (matching the modal's "Add Custom Section" title). Docs pass (all 8 locales of `docs/guide/custom-sections.md`): - Reword the creation section to reflect both inline entry points — the between-sections hover pill and the always-visible pill at the bottom of the CV — and call out that there's no Settings tab for custom sections anymore. - Drop the old numbered "Hover below an existing section" steps in favor of a clearer two-paths structure. FAQ pass (all 8 locales of `docs/reference/faq.md`): - Flip the "Can I change a custom section's layout type after creating it?" answer from Yes to No (we dropped layout conversion when edit became title-only), and direct users to the create-new-section-and-move-items workflow instead. https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug
Each section header (built-in + custom) now has a print button alongside the visibility toggle, mirroring the one in Settings → Sections & Headlines. Clicking it toggles the section's `print_visible` flag, updates the `.hidden-print` class for the live preview, swaps the icon (`print` ↔ `print_disabled`), toasts, and autosaves to the active dataset. The button is disabled whenever the section itself is hidden, same rule as the Settings panel. - `PUT /api/sections/:name` now handles `visible` and `print_visible` independently: passing just `print_visible` updates only that column, leaving `visible` untouched. - New `toggleSectionPrint(key)` and `syncSectionPrintButton(key)` in admin.js. `reorderSectionElements()` re-syncs every button after a render so state stays consistent. - Built-in section buttons added to index.html for all 7 sections; custom sections render the button via `renderCustomSection()`. - `.icon-btn:disabled` gets the same dimmed styling as `.btn:disabled`. - New i18n key `action.toggle_print_visibility` added to all 8 locales. https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug
This reverts commit e92f34c.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR redesigns the custom section creation and management workflow to be inline and contextual rather than modal-based in Settings.
Key changes:
Phantom section placeholders: Hovering below any section reveals a dashed "+ Create custom section" placeholder. Clicking it opens the creation dialog and inserts the new section directly after the hovered section in the order.
Inline section controls: Each custom section header now has three icon buttons:
Removed Settings tab: The "Custom Sections" tab in Settings has been removed entirely. All creation, editing, and deletion now happens inline on the CV itself.
Layout type is immutable: Removed the ability to change a section's layout type after creation. Layout is chosen once at creation time; if a different layout is needed, users create a new section and move items over.
Updated documentation: All language guides updated to reflect the new inline workflow and removed the note about changing layout types post-creation.
Type of Change
Checklist
Required for all code changes
1.33.3→1.34.0inpackage.jsonandversion.jsonCHANGELOG.mdupdated with new entry under[1.34.0]If adding or changing user-visible strings
t('key')in JS ordata-i18nin HTMLescapeHtml()Documentation
Test Plan
https://claude.ai/code/session_015sL8STYmL3AzbjbupUReug