// ═══════════════════════════════════════════════════════════════
// RINTANA — DESKTOP SHELL
// Chrome para viewports >= 1024px. MOBILE NO SE TOCA.
//
// Arquitectura:
// - useIsDesktop() hook + listener de resize.
// También setea la clase rt-desktop en para que CSS
// pueda anular el letterbox de phone-frame.
// - DesktopShell: header + sidebar nav + área central.
// Acepta prop `frame`:
// * 'phone' → 440px (solo VV — su layout está tuneado ahí)
// * 'reader' → 720px (IB reader, ED reader, DB)
// * 'freeform' → full width (Home, IB index, ED index)
// - DesktopHome: layout 2×2 propio.
// - DesktopIBIndex / DesktopEDIndex: grids desktop para los
// listados de IB/ED. Rompen el frame mobile para aprovechar el
// ancho desktop. Al abrir un item caen al reader mobile dentro
// del frame 'reader'.
//
// Versión desktop = opción alternativa. La primaria es mobile.
// ═══════════════════════════════════════════════════════════════
// ─── Hook ─────────────────────────────────────────────────────
function useIsDesktop(minWidth = 1024) {
const get = () => typeof window !== 'undefined' && window.matchMedia(`(min-width: ${minWidth}px)`).matches;
const [isDesktop, set] = React.useState(get);
React.useEffect(() => {
const mq = window.matchMedia(`(min-width: ${minWidth}px)`);
const onChange = () => set(mq.matches);
// Safari < 14 uses addListener; modern browsers use addEventListener
if (mq.addEventListener) mq.addEventListener('change', onChange);
else mq.addListener(onChange);
return () => {
if (mq.removeEventListener) mq.removeEventListener('change', onChange);
else mq.removeListener(onChange);
};
}, [minWidth]);
// Sync so CSS can override the phone letterbox
// without a FOUC flash (inline script in index.astro sets this pre-mount).
React.useEffect(() => {
const root = document.documentElement;
if (isDesktop) root.classList.add('rt-desktop');
else root.classList.remove('rt-desktop');
}, [isDesktop]);
return isDesktop;
}
// ─── DESKTOP SHELL ────────────────────────────────────────────
// props:
// section: current section id | null (home)
// onPick(id): navigate to section
// onHome(): navigate to home
// frame: 'phone' | 'reader' | 'freeform' — tamaño del contenedor
// children: contenido a renderizar en el área central
function DesktopShell({ section, onPick, onHome, frame = 'phone', children }) {
const secs = window.RT_SECTIONS || [];
const frameCls =
frame === 'phone' ? 'rtd-frame rtd-frame--phone' :
frame === 'reader' ? 'rtd-frame rtd-frame--reader' :
'rtd-freeform';
return (
{/* HEADER */}
Crítica de cine · por Nicolás Barak
{/* BODY = sidebar + content */}
{children}
);
}
// ─── DESKTOP HOME ─────────────────────────────────────────────
// Grid 2×2 de portales de sección. Ocupa el área central completa.
function DesktopHome({ onPick }) {
return (
RINTANA · 2026
Distintas
maneras de ver lo mismo.
Elegí por dónde entrar.
{/* VV */}
{/* IB */}
{/* ED */}
{/* Detrás */}
RINTANA · CINE · 2026Versión desktop · experimental
);
}
// ─── DESKTOP IB INDEX ─────────────────────────────────────────
// Grid de capítulos de Inmenso Bastardo. Cada tile = poster + numeral
// romano + title + meta (año · director) + excerpt.
// Click → onOpen(slug), que en RintanaApp dispara el reader.
function DesktopIBIndex({ onOpen }) {
const CAPS = window.IB_CAPITULOS || [];
return (
CUADERNOS · VOL II
Inmenso Bastardo
Historia de lo épico en el séptimo arte. {CAPS.length} capítulos largos sobre películas largas.
{CAPS.map((c) => (
))}
);
}
// ─── DESKTOP ED INDEX ─────────────────────────────────────────
// Grid de columnas de EdiBarak. No tienen poster — typography-first.
// Cada tile: N°XX grande a la izquierda, columna con topic/title/excerpt/fecha.
function DesktopEDIndex({ onOpen }) {
const EDS = window.EDITORIALES || [];
const fmtDate = (iso) => {
if (!iso) return '';
const [y, m] = iso.split('-');
const months = ['ENE','FEB','MAR','ABR','MAY','JUN','JUL','AGO','SEP','OCT','NOV','DIC'];
const mi = Math.max(0, Math.min(11, parseInt(m, 10) - 1));
return `${months[mi]} · ${y}`;
};
return (
EDI · BARAK
EdiBarak
Columnas de opinión. A veces no es solo hablar de cine. {EDS.length} entradas.