library: refine interactive cover hotspots, info card, and assorted library UI

[MaryWylde]

Calibrate InteractiveCover panorama hotspot geometry via coordinate remap with per-hotspot overrides, make the LibraryInfoCard glass blur constant so it shows immediately on reveal, and bundle the remaining library UI refinements.

[MaryWylde]

@claude, review this PR.

[claude]

Claude finished @MaryWylde's task in 4m 49s —— View job

---

PR Review: library-refinements

• Gather context and understand request
• Review diff and key changed files
• Analyze InteractiveCover hotspot remap logic
• Analyze LibraryInfoCard glass blur fix
• Review remaining library UI refinements
• Post comprehensive review feedback

---

Overview

Solid PR overall — the coordinate remap system is well-designed, the blur fix is correct, and several UX gaps (visitor search, "Create library" gating, share button layout) are cleanly addressed. A few things need attention before merge.

---

InteractiveCover — hotspot coordinate remap

coverHotspots.ts

The geometry is sound. H_SCALE = 1920/4000 = 0.48 and H_INSET = 26 correctly model the panorama as a centred, side-clipped layer within a 1920px-wide frame at the breakpoint. The remapPos / remapSize distinction is critical and correctly applied — positions shift-and-scale while sizes only scale.

The GeometryOverride / applyOverride design is clean; only tweaked fields diverge, everything else inherits from the remapped wide geometry.

One geometry concern — house-2 override sets top: 0:

// coverHotspots.ts:172
{ hit: { left: 34.7824, top: 0 } },

The wide geometry has hit: { top: 2, height: 60 }. The override sets top: 0 without touching height, so the hit box spreads from 0% → 60% of the frame height — overlapping the very top of the cover and potentially the page chrome above it. If this was calibrated against the actual panorama art, it's intentional; if it's a rounding artefact, it should be top: 2 to match the wide value. Worth a visual sanity check on the 1920px+ viewport.

The 34.7824 precision (line 172) is atypical — four decimal places suggests this was computed rather than hand-authored. Not wrong, but worth rounding for legibility if it was indeed intentional.

InteractiveCover.tsx — media query switching

The useMatchMedia hook + the isUltraWide ? hotspot.ultraWide : hotspot.wide branch is clean. SSR is handled correctly (defaults to false).

---

LibraryInfoCard — glass blur fix

LibraryInfoCard.module.scss

Correct fix. Moving backdrop-filter: blur(8px) and -webkit-backdrop-filter: blur(8px) out of .active to always-on, and removing them from the transition list, means the compositor layer is promoted before the card reveals — so the blur is instant rather than ramping in after the opacity settles.

- backdrop-filter: blur(0);
- -webkit-backdrop-filter: blur(0);
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.45s ease,
-   backdrop-filter 0.45s ease,
-   -webkit-backdrop-filter 0.45s ease;
    border-color 0.45s ease;

The will-change: opacity, transform comment in InteractiveCover.module.scss (Only hint the cheap compositor-friendly props) now applies equally here — only the wash and border animate, keeping the layer budget reasonable.

---

Placeholder data will reach production

coverHotspots.ts:123-247

All five hotspot entries use:

const lorem = 'Lorem ipsum dolor sit amet…'
libraryName: 'John's Library',
about: lorem,
bookCount: 123,

These are live data that will render in the LibraryInfoCard whenever a user hovers a building on the home cover. Unless the hotspots are feature-flagged off in production, this lorem ipsum and the fake names/counts will be visible to real users. Either:

• Replace with real library data (link to actual library entries), or
• Gate the hotspot layer on the same NEXT_PUBLIC_ENV flag used elsewhere in the library feature.

---

library-test.png filename

public/assets/library/library-test.png (3.3 MB), referenced in Home.tsx:179:

ultraWideSrc="/assets/library/library-test.png"

The "test" suffix signals WIP. If this is the final panorama artwork, rename it (e.g. library-panorama.png or library-wide-4k.png) before the merge so it's clear this is a shipped asset, not a scratch file. Fix this →

---

ObjectOverviewModal restructure

The new layout (share button always visible, owner three-dot menu gated, close button in custom header) is cleaner than the old conditional block. iconPosition={IconPosition.Right} on the share button is a nice touch.

One pre-existing issue still present: RatingBox (RatingBox.tsx:202) hardcodes:

{username} rated this book:

The component is used for all object types (book, video, audio). "this book" is wrong for non-book objects. It's pre-existing debt but now more visible since the modal is more polished. Fix this →

---

Modal.tsx — close button

Replacing the library <Button> component with a raw <button> for the close action is correct here — the library Button enforces its own size/padding/icon layout that wasn't appropriate for a bare icon button. The ObjectOverviewModal now also duplicates a close button (its own .closeButton in the header). Both are intentional since ObjectOverviewModal owns its header layout, but it's worth noting the two patterns coexist.

---

Other changes

settings-helpers.ts + uxcat-helpers.ts — username regex min 6 → 3:
The editLibrarySchema.ts comment confirms the backend regex is {3,30}, so lowering the client-side floor to 3 is the correct alignment. Both files now agree.

mapStrapiLibraries.ts — drop aboutMe fallback:

- const description = aboutMePlain || aboutLibraryPlain;
+ const description = aboutLibraryPlain;

Correct — the library card should surface the library description, not the author bio. aboutMe is for the author panel.

LibraryToolbar visitor mode — search input added:
Good addition. Visitor search was missing from the non-owner toolbar; now it matches the owner view.

LibraryToolbar visitor welcome text — gendered pronoun:

// LibraryToolbar.tsx:315
along with an incredible playlist full of his favorite songs.

"his" is hardcoded masculine. Should be "their" for inclusivity. Fix this →

createTagSchema.ts — redundant .min(1) before .min(2):

z.string().min(1, 'Tag name is required').min(2, 'Tag name must be at least 2 characters')

The first .min(1) is subsumed by .min(2) — Zod reports the first failing constraint, so for an empty string the "required" message would never show. Either drop .min(1) or check if the "required" message should appear distinctly on empty input. Fix this →

UserProfile — canCreateLibrary gating:
Feature flag correctly threaded from accountData.featureNames in Header.tsx through to the dropdown item. aria-disabled is set on the disabled state. onClick guard (if (!canCreateLibrary) return) is belt-and-suspenders but harmless.

VideoCard — shadow extraction to SVG:
Moving the drop shadow from a CSS box-shadow to a separate <VideoShadowIcon> SVG behind the card is consistent with the book/audio card pattern. The .wrap / .card layout with the icon at z-index: 0 and card at z-index: 1 is clean.

---

Summary

Approve with fixes	Placeholder hotspot data and the library-test.png naming need resolution before this lands in production.
Minor	house-2 top: 0 override, gendered pronoun in visitor toolbar, redundant .min(1) in tag schema.
Pre-existing	RatingBox "rated this book" copy applies to all object types — worth fixing alongside this polish pass.