- new profile.tsx layout: sticky desktop sidebar (user card + menu) wrapping all
/profile/* pages; mobile renders page content only (unchanged)
- ProfilePagesHeader hidden at lg (one change covers all account sub-pages +
cart); profile index shows a welcome on desktop (menu lives in the sidebar)
- sellers: 5-col brand grid with name overlay, contained, mobile header hidden
- MyLayout: desktop gate now covers /profile/* and /sellers
- cart checkout (/cart/$cartId): steps on the left, sticky order summary on the
right at lg (1320px container); CartSummary becomes an inline card on desktop
(fixed bottom bar on mobile)
- profile (/profile): contained account layout; menu becomes a 2-col card grid
on desktop with a heading
- MyLayout: desktop gate now includes /cart/* and /profile
- explore: hide mobile search bar at lg (global header has search); contain
content to 1320px; category grid 2-col mobile -> 4-col desktop with taller tiles
- MyLayout: desktop gate now includes /explore
Gallery (desktop):
- portrait 3/4 box, object-contain so the photo isn't cropped
- prev/next arrows on the carousel
- save (heart) overlay top-left; AI try-on button "آنلاین پرو کن" at image bottom
Info column (desktop): hide the mobile action icon row (incl. share); clean
layout — title, star rating + review count, prominent price with old/strike,
color + size, buy row (chat + add-to-cart + qty stepper), assurance cards.
Mobile keeps its existing components (ProductActions / ProductInfo / BottomBar /
ContactButton are lg:hidden).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- product: show seller (logo + name) in the desktop info column (was missing
after hiding the mobile header); action icons (save/share/collection/AI) are
now circular bordered buttons on desktop instead of a bare icon row
- collection detail: cover constrained to a 360px portrait column with
object-cover (fixes over-long image + side margins); tighter spacing
- masonry: only render the loading skeleton while actively fetching (removes
the persistent grey block before the footer); sentinel moved above it
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- ProductDetailView: gallery | info two-column grid on desktop with breadcrumb;
gallery sticky; reviews + similar products full-width below. Mobile stack
unchanged (only lg: utilities + a moved BottomBar, which is position:fixed so
its DOM location doesn't affect mobile)
- BottomBar: static inline buy card on desktop (fixed bottom bar on mobile)
- ProductInfo: larger title + tightened top spacing at lg
- MyLayout: desktop gate now includes /product/*
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- seller: only the logo overlaps the cover now; name/handle/stats sit below the
cover on white (fixes low-contrast name on the gradient)
- collections (home rail, /collections grid, /collection cover): portrait 3/4
images so full-body figures aren't cropped; detail cover uses object-contain
- MondrianProductList: add IntersectionObserver sentinel for reliable
infinite scroll on desktop (window-scroll math missed under the footer)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- seller: desktop brand header matching the design — cover, overlapping rounded
logo, name + verified badge + @handle, horizontal stats, Follow/Message
actions, description; mobile blocks hidden at lg; feed = responsive masonry
- /collections: 4-column card grid on desktop (was a stretched single column)
- /collection/<id>: two-column hero (cover + info) on desktop, contained width,
mobile header hidden at lg; products use the responsive masonry
- MyLayout: desktop gate now includes /collections and /collection/*
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- OTP input now 6 digits (matches backend 6-digit codes): maxLength 6, six
slots with responsive widths, verify enabled at length === 6
- login page: centered desktop card on a neutral canvas with brand mark
- MyLayout: auth pages (/login, /logout) get full-width desktop canvas and no
mobile bottom nav at lg (no shopping header/footer)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- HorizontalCollectionsList: 4-column grid at lg (overrides mobile fixed-width
cards), hide scroll arrows on desktop
- seller page: contained desktop layout, hide mobile back-header at lg, show
store name; feed uses the responsive masonry
- MyLayout: desktop chrome gate now includes /seller/*
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Single responsive tree (Tailwind lg:) — mobile experience unchanged; desktop
chrome is gated to the home route for now.
- DesktopHeader / DesktopFooter components (visible only at lg+), wired to
real routes with live cart badge and working search
- MyLayout: render desktop header/footer on home, expand container and hide
mobile bottom nav at lg
- Home: hide mobile top bar at lg, 1320px centered container, desktop hero
grid (carousel + 2 promos), larger section headers
- SellerTilesGrid: 2-col mobile -> 5-col desktop with name overlay
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- sessions: require REMIX_SECRET in prod (no "secret" fallback); base Secure
cookie on NODE_ENV; add maxAge
- login: safeRedirect() blocks open-redirect via redirectTo (loader + action)
- SSR loaders: encodeURIComponent on user path params before internal API
fetch (product, store product, seller)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
