Skip to content

Refactor dataset language UI & add version badge support#114

Merged
vincentmakes merged 9 commits into
mainfrom
claude/dataset-banner-languages-6373t
Apr 17, 2026
Merged

Refactor dataset language UI & add version badge support#114
vincentmakes merged 9 commits into
mainfrom
claude/dataset-banner-languages-6373t

Conversation

@vincentmakes

@vincentmakes vincentmakes commented Apr 17, 2026

Copy link
Copy Markdown
Owner

Description

This PR refactors the active dataset banner's language switcher into a more intuitive chip-based interface and adds support for displaying dataset versions. The changes improve UX by:

  1. Language chips: Sibling language variants now appear as inline clickable chips in the banner, allowing quick switching without a dropdown menu.
  2. Add language dropdown: A dedicated + button with a filtered dropdown lets users add new language variants directly from the banner, showing only languages not yet in the group.
  3. Version badge: When a dataset has multiple versions in its version_group, a v{N} badge displays in the banner.
  4. Language fallback: If a loaded dataset lacks a language value, the current UI locale is used and persisted back to the database.

The refactoring consolidates repeated dataset-loading logic into a new applyLoadedDatasetResult() function, reducing duplication across multiple code paths.

Type of Change

  • New feature (non-breaking change that adds functionality)
  • Refactoring (no functional changes)

Checklist

Required for all code changes

  • I have tested my changes locally (npm test passes)
  • Version has been bumped in all 3 files (package.json, package-lock.json, version.json)
  • CHANGELOG.md has been updated with a new entry under the correct version

If adding or changing user-visible strings

  • No hardcoded English — all strings use t('key') in JS or data-i18n in HTML
  • New i18n keys added to en.json and all 7 other locale files (de, fr, nl, es, it, pt, zh)
  • escapeHtml() used for any user-provided content rendered as HTML

Key Changes

  • admin.js:

    • Added activeDatasetVersion, activeDatasetVersionGroup, activeDatasetVersionCount state variables
    • Extracted dataset loading logic into applyLoadedDatasetResult() to DRY up multiple load paths
    • Added loadActiveDatasetVersionCount() to count datasets in the same version group
    • Replaced renderDatasetLangSwitcher() with renderActiveDatasetLangChips() and renderAddLangDropdown()
    • Refactored addLanguageFromSwitcher() → addDatasetLanguage(code) with language preselection
    • Updated showActiveDatasetBanner() to render language chips and version badge
    • Updated hideActiveDatasetBanner() to reset new state variables

  • styles.css:

    • Replaced .dataset-lang-switcher styles with .active-dataset-lang-chips and .dataset-lang-chip for inline chip display
    • Added .active-dataset-version-badge styles
    • Renamed .dataset-lang-dropdown to .dataset-add-lang-dropdown and adjusted layout
    • Removed .active and .add-lang option styles; added .disabled state

  • index.html:

    • Added activeDatasetVersionBadge element
    • Replaced language switcher button with language chips container and add-language dropdown

  • i18n files: Added 3 new keys across all 8 locales:

    • datasets.switch_to_lang: Tooltip for language chips
    • datasets.add_language_title: Button title for add-language dropdown
    • datasets.version_badge_tooltip: Tooltip for version badge

https://claude.ai/code/session_015eHAbWiBBJZTmZFcmtokGB

claude added 9 commits April 17, 2026 09:31
@claude
Banner: inline sibling language chips, Add-language dropdown, version…
2f9830a 
… chip (1.31.0)

- Sibling languages render as inline clickable chips in the active dataset banner, loading the sibling on click.
- New + icon opens a dropdown listing languages not yet in the group; picking one opens Save As pre-filled and locked to that language.
- Current language badge is always visible; a v{N} chip appears when the dataset has multiple versions in its version_group.
- Defensive: datasets loaded without a language fall back to I18n.locale and the value is persisted via the existing PUT /api/datasets/:id/language.

https://claude.ai/code/session_015eHAbWiBBJZTmZFcmtokGB
@claude
Banner polish: right-align variants, round flags, intro label, amber …
ebba016 
…version pill (1.31.1)

- Right-align sibling language chips and the Add-language button inside a new variants group, with an intro label "Switch other variants of this CV:" shown when siblings exist.
- Round flag badges on the current-language pill, sibling chips, and Add-language dropdown options for quicker visual recognition.
- Version pill switched to a high-contrast amber pill so it stands out next to the language and default badges.
- Add-language button restyled as a filled primary pill with an explicit "Add language" label.

https://claude.ai/code/session_015eHAbWiBBJZTmZFcmtokGB
@claude
Banner: true round flag images + uniform pill shapes (1.31.2)
81ac0aa 
- Replace emoji flags with the existing langFlagImg CDN helper so flags render as true circular images (matching the rest of the app).
- Current-language pill is now pill-shaped (border-radius 999px) with flag + code, matching the sibling-chip shape.
- Version pill also fully rounded and sized to match the language chips for visual consistency.

https://claude.ai/code/session_015eHAbWiBBJZTmZFcmtokGB
@claude
Banner: right-align variants group to viewport edge; consolidate to o…
f93a863 
…ne version bump

- Drop max-width: 1200px and margin: 0 auto from .active-dataset-banner-content so the variants group (intro label + chips + Add button) truly reaches the right edge of the banner on wide screens. Padding on the outer banner still provides edge spacing.
- Consolidate the three iterative 1.31.x entries into a single 1.31.0 entry (this is one feature shipping as a single bump).

https://claude.ai/code/session_015eHAbWiBBJZTmZFcmtokGB
@claude
Banner: true right-align, version-before-language, Default→Public ren…
f2ab14b 
…ame, Shared icon

- Drop margin-left:auto from .active-dataset-actions so the variants group is the only auto-margin item — it now actually hits the right edge instead of splitting free space with the (empty) actions slot.
- Reorder badges: version pill now precedes the language pill (name, v2, EN, Public).
- Version pill restyled as a soft purple outlined pill (less shouty than the amber fill, still distinct from the blue language / public pills).
- Sibling chips now use the same primary-blue fill as the current-language pill for visual consistency (both look like filled blue pills, not one filled + one outlined).
- Rename "Default" badge to "Public" across id/class/i18n key (banner.default → banner.public). The is_default DB column is unchanged — this is a UX label change only.
- Add a Shared icon pill that lights up when is_public=1 (dataset has a /v/slug URL). Backend /load, /save, and /default endpoints now return is_public so the banner can reflect it.

https://claude.ai/code/session_015eHAbWiBBJZTmZFcmtokGB
@claude
Banner: fix invisible + icon, bump variants label to banner font size
f22d4b9 
- "Switch other variants of this CV" now inherits the banner's 13px font size (was stuck at 11px), matching the "Editing:" label.
- Plus icon on the Add-language button was being recoloured to primary by .active-dataset-banner-content .material-symbols-outlined, making it blue-on-blue and invisible. Bumped the scoped color:inherit rules for the add-lang button and shared badge to the same specificity so they actually win.

https://claude.ai/code/session_015eHAbWiBBJZTmZFcmtokGB
@claude
Toolbar: replace 'CV Manager' text with favicon icon; fix Default→Pub…
ff0566a 
…lic in CV Manager modal

- Toolbar title now shows the favicon.png icon (44px tall, 36px on narrow screens) instead of the 'CV Manager' text.
- CV Manager modal dataset rows: the 'Default' badge was a hardcoded English literal in admin.js. Route it through t('datasets.default_hint_short') so it uses the translated value.
- Change 'datasets.default_hint_short' value from 'Default' → 'Public' (and equivalent) in all 8 locales, matching the banner badge wording.

https://claude.ai/code/session_015eHAbWiBBJZTmZFcmtokGB
@claude
CV Manager list: 'Make public' pill on non-default rows; revert toolb…
f1db47a 
…ar icon

- Each non-default dataset row in the CV Manager modal now shows a dashed outlined 'Make public' pill in the same slot where default rows show the 'Public' badge. Clicking it calls the existing setDatasetDefault flow (PUT /api/datasets/:id/default) — parallel action to the radio button but clearly labelled.
- Revert toolbar title back to 'CV Manager' text; favicon image approach will be revisited later.
- New i18n key datasets.make_public translated in all 8 locales.

https://claude.ai/code/session_015eHAbWiBBJZTmZFcmtokGB
@claude
Banner: add 'Make public' pill on non-default datasets; drop CV Manag…
7d12266 
…er toolbar text

- Active dataset banner now shows a dashed 'Make public' pill (same style language as the CV Manager modal list) when the dataset is not the default. Clicking calls the existing setDatasetDefault flow.
- Solid 'Public' badge and dashed 'Make public' pill occupy the same slot — exactly one is visible at any time based on is_default.
- Remove the 'CV Manager' text from the toolbar per user request (will be revisited later with an icon).

https://claude.ai/code/session_015eHAbWiBBJZTmZFcmtokGB
@vincentmakes vincentmakes merged commit 54d5c07 into main Apr 17, 2026
3 checks passed
@vincentmakes vincentmakes deleted the claude/dataset-banner-languages-6373t branch April 17, 2026 12:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@vincentmakes @claude