Fusion
adaedb70ef
Mobile Navigation: - Add MobileNav component with bottom tab bar - Show mobile nav on small screens, hide desktop sidebar - Add session count badge to Sessions tab - Add safe area padding for notched devices Session Management: - Redesign SessionCard for mobile with action menu - Add MobileActionSheet for session actions - Keep primary action prominent Forms & Dialogs: - Stack form fields vertically on mobile - Ensure 44px minimum touch targets - Update dialogs for 320px viewport Responsive Layout: - Add MobilePageHeader with back button - Reduce page padding on mobile - Stack multi-column grids vertically Touch & Interaction: - Add active states to interactive elements - Ensure 8px spacing between touch targets Complex Pages: - Update Repo Workspace for mobile - Update Tool Workshop and Config Profiles Build: TypeScript check passes, production build succeeds
34 lines
885 B
TypeScript
34 lines
885 B
TypeScript
import { useNavigate } from "react-router-dom";
|
|
import { useMobileViewport } from "../hooks/use-mobile-viewport";
|
|
import { Icon } from "./icon";
|
|
|
|
interface MobilePageHeaderProps {
|
|
title: string;
|
|
showBack?: boolean;
|
|
actions?: React.ReactNode;
|
|
}
|
|
|
|
export function MobilePageHeader({ title, showBack = true, actions }: MobilePageHeaderProps) {
|
|
const navigate = useNavigate();
|
|
const isMobile = useMobileViewport();
|
|
|
|
if (!isMobile) return null;
|
|
|
|
return (
|
|
<div className="mobile-page-header">
|
|
{showBack && (
|
|
<button
|
|
className="mobile-page-header-back"
|
|
onClick={() => navigate(-1)}
|
|
type="button"
|
|
aria-label="Go back"
|
|
>
|
|
<Icon name="arrow-left" size="md" />
|
|
</button>
|
|
)}
|
|
<h1>{title}</h1>
|
|
{actions && <div className="mobile-page-header-actions">{actions}</div>}
|
|
</div>
|
|
);
|
|
}
|