Enhance feature library shimmer with theming and dismissal

What does this MR do and why?

This reverts !243508 (merged) (which switched the "More features" shimmer effect to a badge) back to the shimmer, then builds several enhancements on top of it:

  • Theme-aware colors: the shimmer gradient and inner outline now derive from --super-sidebar-theme-accent-color, so the effect matches the active sidebar theme (blue, green, red, gray, indigo) in both light and dark modes instead of being hardcoded to purple.
  • Reduced-motion scoping: the gradient and animation are scoped to @media (prefers-reduced-motion: no-preference) so they never obscure the nav item's interactive background-color states, and reduced-motion users get the plain tertiary nav item.
  • Time-based fade-out: the shimmer sweeps for several iterations, then fades away and reverts to the default tertiary nav item styling.
  • Inset outline: the 2px outline uses an inset box-shadow instead of a real border, so it no longer offsets the nav item's layout.
  • Dismissal persistence: once the user opens the feature library modal, a feature_library_shimmer_seen user callout is recorded so the animation never plays again on subsequent visits. This uses the existing user_callouts system (no new table or migration).

References

Database review

SidebarsHelper#show_feature_library_shimmer? calls User#dismissed_callout?, which loads the current user's callouts on logged-in page loads. The call is now guarded by the feature_library_modal feature flag, so no query runs when the flag is disabled. When enabled, it issues a single indexed lookup by user_id (results are memoized per request via User#callouts_by_feature_name).

Raw SQL:

SELECT "user_callouts".*
FROM "user_callouts"
WHERE "user_callouts"."user_id" = 1;

Query plan (EXPLAIN):

Index Scan using index_user_callouts_on_user_id_and_feature_name on user_callouts  (cost=0.15..7.28 rows=7 width=28)
  Index Cond: (user_id = 1)

The lookup uses the existing composite index index_user_callouts_on_user_id_and_feature_name (Index Scan, no sequential scan). No schema changes, migrations, or new tables are introduced; the query targets the existing user_callouts table.

Screenshots or screen recordings

Before After
CleanShot_2026-07-27_at_10.31.37 CleanShot_2026-07-27_at_10.27.23
CleanShot_2026-07-27_at_10.31.50 CleanShot_2026-07-27_at_10.26.17

How to set up and validate locally

  1. Enable the feature flag at https://gdk.test:3000/rails/features/feature_library_modal
  2. Go to a page, e.g. https://gdk.test:3000/flightjs/Flight/-/merge_requests
  3. Observe the "More features" nav item shimmer, then fade out to the default styling.
  4. Switch between user themes at https://gdk.test:3000/-/profile/preferences and confirm the shimmer color matches each theme in light and dark mode.
  5. Open the "More features" modal, reload the page, and confirm the shimmer no longer plays.

To replay the animation after dismissal, remove the callout in the Rails console:

User.find_by_username('root').callouts.where(feature_name: :feature_library_shimmer_seen).delete_all

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Austin Regnery

Merge request reports

Loading