diff --git a/next.config.js b/next.config.js
index e4ca3913..0721bfec 100644
--- a/next.config.js
+++ b/next.config.js
@@ -139,6 +139,15 @@ module.exports = withBundleAnalyzer({
name: 'preset-default',
params: { overrides: { removeViewBox: false } },
},
+ // preset-default's cleanupIds minifies internal ids to short
+ // strings (a, b, c…) per file. SVGR inlines every icon into the
+ // same DOM, so icons that reference their own clipPath/filter/
+ // gradient via url(#id) (book, video, their shadows, delete,
+ // edit) end up with colliding ids — url(#a) resolves to whichever
+ // #a renders first, pointing at the wrong def and rendering blank.
+ // prefixIds namespaces each file's ids by filename so they stay
+ // unique across icons.
+ 'prefixIds',
],
},
},
diff --git a/public/assets/library/audio-cover.png b/public/assets/library/audio-cover.png
new file mode 100644
index 00000000..959af9b8
Binary files /dev/null and b/public/assets/library/audio-cover.png differ
diff --git a/public/assets/library/book-cover.png b/public/assets/library/book-cover.png
new file mode 100644
index 00000000..6c6830d4
Binary files /dev/null and b/public/assets/library/book-cover.png differ
diff --git a/src/components/library/molecules/AudioCard/AudioCard.module.scss b/src/components/library/molecules/AudioCard/AudioCard.module.scss
index 0be3bc2e..53a148d6 100644
--- a/src/components/library/molecules/AudioCard/AudioCard.module.scss
+++ b/src/components/library/molecules/AudioCard/AudioCard.module.scss
@@ -52,10 +52,29 @@
opacity: 0.55;
}
+// The vinyl mockup body (sleeve + disc edge baked in). Always rendered behind
+// the cover so an uncovered object reads as a blank sleeve and a covered one
+// keeps the disc peeking out on the right.
+.placeholder {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 230px;
+ height: 194px;
+ z-index: 0;
+ background: url('/assets/library/audio-cover.png') center / cover no-repeat;
+}
+
+// The uploaded album art sits on the square sleeve only — 190×190, flush to the
+// right edge so the placeholder's disc edge stays exposed on the left.
.cover {
position: absolute;
- inset: 0;
+ top: 0;
+ right: 0;
+ width: 190px;
+ height: 190px;
overflow: hidden;
+ z-index: 1;
transition: opacity 0.15s ease;
}
@@ -66,12 +85,6 @@
object-fit: cover;
}
-.coverPlaceholder {
- width: 100%;
- height: 100%;
- background: var(--white);
-}
-
.tags {
display: flex;
flex-direction: column;
@@ -94,6 +107,15 @@
height: 138px;
gap: 0;
+ .placeholder,
+ .cover {
+ inset: 0;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+
.tags {
display: none;
}
diff --git a/src/components/library/molecules/AudioCard/AudioCard.tsx b/src/components/library/molecules/AudioCard/AudioCard.tsx
index ec9b5904..00df7106 100644
--- a/src/components/library/molecules/AudioCard/AudioCard.tsx
+++ b/src/components/library/molecules/AudioCard/AudioCard.tsx
@@ -57,8 +57,9 @@ export function AudioCard({
/>
)}
+
- {coverUrl ? (
+ {coverUrl && (
- ) : (
-
)}
- {coverUrl ? (
+ {coverUrl && (
- ) : (
-
)}
-
-
- {isOpen &&
- (!portal || menuPos) &&
- (() => {
- const menuContent = (
-
e.stopPropagation() : undefined}
- >
- {options.length === 0 ? (
-
-
- {emptyState}
-
-
- ) : (
- options.map(option => {
- const selected = isSelected(option);
- return (
-
toggle(option)}
- >
-
- {selected && (
-
- ✓
-
- )}
-
- );
- })
- )}
-
- );
+
+ {value.length > 0 ? `${value.length} selected` : placeholder}
+
+
+
+ {isOpen &&
+ (!portal || menuPos) &&
+ (() => {
+ const menuContent = (
+
e.stopPropagation() : undefined}
+ >
+ {options.length === 0 ? (
+
+
+ {emptyState}
+
+
+ ) : (
+ options.map(option => {
+ const selected = isSelected(option);
+ return (
+
toggle(option)}
+ >
+
+ {selected && (
+
+ ✓
+
+ )}
+
+ );
+ })
+ )}
+
+ );
- return portal && typeof document !== 'undefined'
- ? createPortal(
-
{menuContent}
,
- document.body,
- )
- : menuContent;
- })()}
+ return portal && typeof document !== 'undefined'
+ ? createPortal(
+
{menuContent}
,
+ document.body,
+ )
+ : menuContent;
+ })()}
+
diff --git a/src/components/library/molecules/VideoCard/VideoCard.module.scss b/src/components/library/molecules/VideoCard/VideoCard.module.scss
index b1e763e7..c7594f3a 100644
--- a/src/components/library/molecules/VideoCard/VideoCard.module.scss
+++ b/src/components/library/molecules/VideoCard/VideoCard.module.scss
@@ -3,12 +3,14 @@
box-sizing: border-box;
display: flex;
flex-direction: column;
- width: 318px;
+ width: 255px;
height: 183px;
padding: 12px;
background: var(--off-white);
border-radius: 0 0 20px 20px;
- box-shadow: var(--card-shadow);
+ box-shadow:
+ 0px 6px 16px 0px #0000001a,
+ 0px 16px 40px 0px #00000014;
cursor: pointer;
border: none;
outline: none;
@@ -17,7 +19,8 @@
&:focus-visible {
box-shadow:
0 0 0 2px var(--brown),
- var(--card-shadow);
+ 0px 6px 16px 0px #0000001a,
+ 0px 16px 40px 0px #00000014;
}
}
@@ -47,9 +50,10 @@
.thumbWrap {
position: relative;
+ // 231×125 cover: full inner width (255 − 24 padding) at a fixed thumbnail height.
width: 100%;
- flex: 1 1 auto;
- min-height: 0;
+ height: 125px;
+ flex: 0 0 auto;
}
.thumb {
@@ -105,6 +109,10 @@
padding: 0;
border-radius: 0;
+ .thumbWrap {
+ height: 100%;
+ }
+
.bar,
.title {
display: none;
diff --git a/src/components/library/organisms/AddObjectModal/AddObjectModal.module.scss b/src/components/library/organisms/AddObjectModal/AddObjectModal.module.scss
index 6068c51e..634e324f 100644
--- a/src/components/library/organisms/AddObjectModal/AddObjectModal.module.scss
+++ b/src/components/library/organisms/AddObjectModal/AddObjectModal.module.scss
@@ -11,6 +11,7 @@
.indicatorWrap {
padding: 20px 32px;
+ background: #fffbf4;
border-top: 1px solid var(--brown-border);
border-bottom: 1px solid var(--brown-border);
}
diff --git a/src/components/library/organisms/AddObjectModal/AddObjectModal.tsx b/src/components/library/organisms/AddObjectModal/AddObjectModal.tsx
index dd66f396..6df3e6b1 100644
--- a/src/components/library/organisms/AddObjectModal/AddObjectModal.tsx
+++ b/src/components/library/organisms/AddObjectModal/AddObjectModal.tsx
@@ -257,7 +257,24 @@ export function AddObjectModal(props: AddObjectModalProps): JSX.Element {
size: number;
} | null = null;
if (data.coverImage instanceof File) {
- const uploaded = await uploadFile(data.coverImage);
+ let uploaded: Awaited>;
+ try {
+ uploaded = await uploadFile(data.coverImage);
+ } catch (uploadErr) {
+ // The image goes straight to Strapi. When it exceeds the server's
+ // upload limit the request is rejected with 413 — or dropped by the
+ // proxy so axios sees a bare network error (no response). Either way,
+ // surface a clear size message instead of the generic save error.
+ const status = (uploadErr as { response?: { status?: number } })
+ ?.response?.status;
+ const hasResponse = !!(uploadErr as { response?: unknown })?.response;
+ setSubmitError(
+ status === 413 || !hasResponse
+ ? 'Image is too large. Maximum size is 5 MB.'
+ : "Couldn't upload the image. Please try again.",
+ );
+ return;
+ }
coverImageId = uploaded.id;
uploadedCover = uploaded;
} else if (editing) {
diff --git a/src/components/library/organisms/EditLibraryModal/EditLibraryModal.tsx b/src/components/library/organisms/EditLibraryModal/EditLibraryModal.tsx
index 1edb5087..049f4b75 100644
--- a/src/components/library/organisms/EditLibraryModal/EditLibraryModal.tsx
+++ b/src/components/library/organisms/EditLibraryModal/EditLibraryModal.tsx
@@ -149,7 +149,23 @@ export function EditLibraryModal(props: EditLibraryModalProps): JSX.Element {
// 1. Upload avatar first if a new file was picked — we need the id for the PUT.
let uploadedAvatarId: number | null | undefined;
if (avatarFile) {
- const uploaded = await uploadFile(avatarFile);
+ let uploaded: Awaited>;
+ try {
+ uploaded = await uploadFile(avatarFile);
+ } catch (uploadErr) {
+ // Avatar uploads straight to Strapi; an over-limit image returns 413
+ // (or is dropped by the proxy, surfacing as a bare network error).
+ // Show a size message on the avatar field instead of a generic error.
+ const status = (uploadErr as { response?: { status?: number } })
+ ?.response?.status;
+ const hasResponse = !!(uploadErr as { response?: unknown })?.response;
+ setAvatarError(
+ status === 413 || !hasResponse
+ ? 'Avatar must be 5 MB or smaller.'
+ : "Couldn't upload the avatar. Please try again.",
+ );
+ return;
+ }
uploadedAvatarId = uploaded.id;
} else if (avatarRemoved) {
uploadedAvatarId = null;
diff --git a/src/components/library/organisms/ObjectOverviewModal/ObjectOverviewModal.tsx b/src/components/library/organisms/ObjectOverviewModal/ObjectOverviewModal.tsx
index 9805ba7f..cb0d5055 100644
--- a/src/components/library/organisms/ObjectOverviewModal/ObjectOverviewModal.tsx
+++ b/src/components/library/organisms/ObjectOverviewModal/ObjectOverviewModal.tsx
@@ -276,9 +276,16 @@ export function ObjectOverviewModal(
);
const tagsList = attributes.tags?.data ?? [];
const shelfData = attributes.shelf?.data;
+ // Prefer the live shelf from GlobalState (matched by id) so a rename reflects
+ // instantly — the object's embedded `shelf.data` is frozen at fetch time.
+ const liveShelf = currentShelves.find(s => s.id === currentShelfId);
const shelfDisplayName =
- shelfData?.attributes.name ?? attributes.shelfName ?? '—';
- const shelfPosition = shelfData?.attributes.order;
+ liveShelf?.attributes.name ??
+ shelfData?.attributes.name ??
+ attributes.shelfName ??
+ '—';
+ const shelfPosition =
+ liveShelf?.attributes.order ?? shelfData?.attributes.order;
const publishedFormatted = formatDate(attributes.publicationDate);
const sourceLabel =
attributes.source && attributes.source.length > 0 ? attributes.source : '—';
diff --git a/src/components/library/organisms/Shelf/Shelf.module.scss b/src/components/library/organisms/Shelf/Shelf.module.scss
index d45065d9..488e622c 100644
--- a/src/components/library/organisms/Shelf/Shelf.module.scss
+++ b/src/components/library/organisms/Shelf/Shelf.module.scss
@@ -88,29 +88,29 @@
align-items: center;
position: relative;
overflow: hidden;
+ // Raises the bottom of the scroll row (and so the overflow scrollbar) up
+ // onto the visible shelf board, out of the board PNG's transparent lower
+ // zone. The absolute `.banner` (bottom: 0) is unaffected, and `.items`
+ // drops the same amount from its own padding-bottom so the cards stay
+ // seated. This is the knob: increase to slide the scrollbar up the board.
+ padding-bottom: 65px;
.banner {
width: -webkit-fill-available;
position: absolute;
bottom: 0;
margin-right: -32px;
+ // Sit the shelf board behind the cards so each object rests fully opaque
+ // *on* the shelf instead of bleeding through the board's translucent top
+ // edge. Cards are z-index 1 (see .items).
+ z-index: 0;
+ pointer-events: none;
img {
width: inherit;
}
}
- .arrow {
- width: 46px;
- height: 46px;
- flex-shrink: 0;
- z-index: 2;
- }
-
- .arrowLeft svg {
- transform: rotate(180deg);
- }
-
.items {
flex: 1;
min-width: 0;
@@ -121,7 +121,9 @@
// Give the cards 40px of headroom so their tops aren't clipped by the
// shelf's `overflow: hidden`; they still bottom-align onto the shelf.
padding-top: 40px;
- padding-bottom: 24px;
+ // Paired with `.content`'s 65px padding-bottom: the two sum to 100px so
+ // the cards' seating line is unchanged while the scrollbar rides higher.
+ padding-bottom: 35px;
position: relative;
z-index: 1;
overflow-x: auto;
@@ -130,6 +132,7 @@
// Arrows (and trackpad/touch swipe) drive navigation — hide the native
// scrollbar so it doesn't cut across the shelf artwork.
scrollbar-width: none;
+ padding-left: 58px;
&::-webkit-scrollbar {
display: none;
@@ -139,7 +142,12 @@
// When the row overflows (arrows present), expose a styled horizontal
// scrollbar so the overflow is discoverable by drag, not just the arrows.
.scrollable {
- scrollbar-width: thin;
+ // Must be `auto`, not `thin`: when scrollbar-width is thin/none, Chrome
+ // 121+ renders the standard scrollbar and IGNORES the ::-webkit-scrollbar
+ // rules below — so the custom 12px #c0b6ae bar never showed. `auto` keeps
+ // the webkit pseudo-element styling active. (Overrides `.items`' `none`.)
+ scrollbar-width: auto;
+ // Firefox can't honor the 12px height, but still gets the tint.
scrollbar-color: #c0b6ae transparent;
&::-webkit-scrollbar {
diff --git a/src/components/library/organisms/Shelf/Shelf.tsx b/src/components/library/organisms/Shelf/Shelf.tsx
index f3d1f812..ba6d8be9 100644
--- a/src/components/library/organisms/Shelf/Shelf.tsx
+++ b/src/components/library/organisms/Shelf/Shelf.tsx
@@ -20,7 +20,6 @@ import { updateShelf } from '@api/library/shelf/updateShelf';
import shelfBackground from '@icons/library/images/shelfBackground.png';
import {
- ArrowIcon,
AudioIcon,
BookIcon,
PlusIcon,
@@ -196,9 +195,9 @@ export function Shelf(props: ShelfProps): JSX.Element {
const [renameLoading, setRenameLoading] = useState(false);
const [renameError, setRenameError] = useState(null);
- // Horizontal scroller: keep every card on one row and page through them with
- // the arrows. Arrows only show when the row actually overflows; each click
- // advances by one card width (+ the 24px gap).
+ // Horizontal scroller: keep every card on one row. When the row overflows we
+ // expose the styled scrollbar (`.scrollable`) so the overflow is discoverable
+ // by drag/swipe.
const itemsRef = useRef(null);
const [canScrollLeft, setCanScrollLeft] = useState(false);
const [canScrollRight, setCanScrollRight] = useState(false);
@@ -224,14 +223,6 @@ export function Shelf(props: ShelfProps): JSX.Element {
};
}, [syncScrollState, objects.length]);
- const scrollByCard = (direction: -1 | 1) => {
- const el = itemsRef.current;
- if (!el) return;
- const firstCard = el.querySelector(`.${styles.cards} > *`);
- const step = firstCard ? firstCard.offsetWidth + 35 : el.clientWidth * 0.8;
- el.scrollBy({ left: direction * step, behavior: 'smooth' });
- };
-
const isOverflowing = canScrollLeft || canScrollRight;
const closeRename = useCallback(() => {
@@ -448,16 +439,6 @@ export function Shelf(props: ShelfProps): JSX.Element {
- {isOverflowing && (
-