83ba6f2b21
- Extract useViewportMode into a reusable hook and update Header/ListView to use it - Render mobile ListView cards with collapsible column sections, card metadata, and selection support - Add mobile-first styles for card layout, touch targets, focus states, and quick-entry overflow handling - Expand ListView and QuickEntryBox tests to cover mobile rendering and interaction behavior
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
|
|
export type ViewportMode = "mobile" | "tablet" | "desktop";
|
|
|
|
export function getViewportMode(): ViewportMode {
|
|
if (typeof window === "undefined") return "desktop";
|
|
if (window.matchMedia("(max-width: 768px)").matches) return "mobile";
|
|
if (window.matchMedia("(min-width: 769px) and (max-width: 1024px)").matches) return "tablet";
|
|
return "desktop";
|
|
}
|
|
|
|
export function useViewportMode(): ViewportMode {
|
|
const [mode, setMode] = useState<ViewportMode>(getViewportMode);
|
|
|
|
useEffect(() => {
|
|
if (typeof window === "undefined") return;
|
|
|
|
const mobileQuery = window.matchMedia("(max-width: 768px)");
|
|
const tabletQuery = window.matchMedia("(min-width: 769px) and (max-width: 1024px)");
|
|
|
|
const updateMode = () => {
|
|
if (mobileQuery.matches) {
|
|
setMode("mobile");
|
|
} else if (tabletQuery.matches) {
|
|
setMode("tablet");
|
|
} else {
|
|
setMode("desktop");
|
|
}
|
|
};
|
|
|
|
mobileQuery.addEventListener("change", updateMode);
|
|
tabletQuery.addEventListener("change", updateMode);
|
|
return () => {
|
|
mobileQuery.removeEventListener("change", updateMode);
|
|
tabletQuery.removeEventListener("change", updateMode);
|
|
};
|
|
}, []);
|
|
|
|
return mode;
|
|
}
|