e6869c82cc
Some checks failed
Visual diff / Should run? (pull_request) Has been cancelled
CI / Lint (pull_request) Has been cancelled
CI / Schema map up to date (pull_request) Has been cancelled
CI / Forbidden patterns (9 checks) (pull_request) Has been cancelled
CI / Migrations apply (node-pg-migrate) (pull_request) Has been cancelled
CI / Unit tests (vitest) (pull_request) Has been cancelled
Convoy metrics gate / Require role-event telemetry on convoy PRs (pull_request) Has been cancelled
PR Health rollup / Aggregate gate status (pull_request) Has been cancelled
Preview smoke / Should run? (pull_request) Has been cancelled
Visual diff / Screenshot diff (pull_request) Has been cancelled
Preview smoke / Playwright smoke (pull_request) Has been cancelled
- styles/globals.css: add overflow-x: hidden + max-width: 100vw to body (global safety net) - components/CollectionPageView.js: flex-wrap filter row, responsive search width (w-full sm:w-64) - pages/my-cards.js: replace min-w-[200px] with w-full sm:min-w-[200px] on filter search - pages/designer.js: remove shrink-0 from live preview sidebar to allow flex collapse - components/DeckDetailView.js: add flex-wrap + gap to header flex row - components/CardItem.js: remove whitespace-nowrap from expanding add buttons (3 instances) - components/DashboardRecentActivity.js: whitespace-nowrap → whitespace-normal on timestamp - components/CollaboratorFacepile.js: tooltips use whitespace-normal + break-words + max-w - components/MobileNavigation.js: tooltip whitespace-nowrap → whitespace-normal Fixes horizontal scroll / layout breakage on mobile (<375px) across the site.
102 lines
3.5 KiB
JavaScript
102 lines
3.5 KiB
JavaScript
import Link from 'next/link';
|
|
import { VOCAB } from '../lib/collection-vocabulary.js';
|
|
|
|
/**
|
|
* Recent adds to My Collection on /dashboard.
|
|
*/
|
|
export default function DashboardRecentActivity({ activities = [], loading = false }) {
|
|
return (
|
|
<section className="glass-panel rounded-2xl p-5 sm:p-6">
|
|
<header className="flex items-center justify-between mb-4">
|
|
<h2
|
|
className="text-lg font-bold flex items-center gap-2"
|
|
style={{ color: 'var(--text-primary)' }}
|
|
>
|
|
<span
|
|
className="inline-flex h-5 w-5 items-center justify-center rounded-md"
|
|
style={{
|
|
background:
|
|
'linear-gradient(135deg, rgb(255, 140, 30) 0%, rgb(216, 67, 21) 100%)',
|
|
}}
|
|
aria-hidden="true"
|
|
>
|
|
<svg
|
|
className="h-3.5 w-3.5"
|
|
viewBox="0 0 24 24"
|
|
fill="rgb(255, 255, 255)"
|
|
>
|
|
<path d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
</span>
|
|
Recent activity
|
|
</h2>
|
|
<Link
|
|
href="/my-cards"
|
|
className="text-sm font-medium hover:underline focus:outline-none focus:ring-2 rounded-md px-1"
|
|
style={{
|
|
color: 'var(--accent-ember)',
|
|
'--tw-ring-color': 'var(--accent-ember)',
|
|
}}
|
|
>
|
|
View {VOCAB.MY_COLLECTION}
|
|
</Link>
|
|
</header>
|
|
|
|
{loading ? (
|
|
<ul className="space-y-3" aria-busy="true">
|
|
{[0, 1, 2].map((idx) => (
|
|
<li
|
|
key={idx}
|
|
className="h-12 rounded-xl motion-essential animate-pulse"
|
|
style={{ backgroundColor: 'var(--bg-tertiary)' }}
|
|
/>
|
|
))}
|
|
</ul>
|
|
) : activities.length === 0 ? (
|
|
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
|
|
No recent adds yet. Scan a card or browse the catalog to start
|
|
building {VOCAB.MY_COLLECTION}.
|
|
</p>
|
|
) : (
|
|
<ul className="space-y-3">
|
|
{activities.map((row) => (
|
|
<li key={row.id} className="flex items-start gap-3">
|
|
<div
|
|
className="w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0"
|
|
style={{
|
|
background:
|
|
'linear-gradient(135deg, rgb(255, 140, 30) 0%, rgb(216, 67, 21) 100%)',
|
|
color: 'rgb(255, 255, 255)',
|
|
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.18)',
|
|
}}
|
|
aria-hidden="true"
|
|
>
|
|
{row.actor.initial}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm" style={{ color: 'var(--text-primary)' }}>
|
|
<span className="font-semibold">{row.actor.name}</span>{' '}
|
|
<span style={{ color: 'var(--text-secondary)' }}>
|
|
{row.action}
|
|
</span>
|
|
</div>
|
|
<div
|
|
className="text-xs truncate"
|
|
style={{ color: 'var(--text-secondary)' }}
|
|
>
|
|
{row.subject}
|
|
</div>
|
|
</div>
|
|
<span
|
|
className="text-xs whitespace-normal flex-shrink-0"
|
|
style={{ color: 'var(--text-secondary)' }}
|
|
>
|
|
{row.time}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|