solve-diary-2 — Cursor Rules

This document summarizes key frontend design principles and rules, showcasing recommended patterns. Follow these guidelines when writing frontend code.

Improving the clarity and ease of understanding code.

Rule: Replace magic numbers with named constants for clarity. Reasoning: • Improves clarity by giving semantic meaning to unexplained values. • Enhances maintainability. Recommended Pattern: `typescript const ANIMATION_DELAY_MS = 300; async function onLikeClick() { await postLike(url); await delay(ANIMATION_DELAY_MS); // Clearly indicates waiting for animation await refetchPostLike(); } `

Rule: Abstract complex logic/interactions into dedicated components/HOCs. Reasoning: • Reduces cognitive load by separating concerns. • Improves readability, testability, and maintainability of components. Recommended Pattern 1: Auth Guard (Login check abstracted to a wrapper/guard component) `tsx // App structure function App() { return ( <AuthGuard> {" "} {/ Wrapper handles auth check /} <LoginStartPage /> </AuthGuard> ); } // AuthGuard component encapsulates the check/redirect logic function AuthGuard({ children }) { const status = useCheckLoginStatus(); useEffect(() => { if (status === "LOGGED_IN") { location.href = "/home"; } }, [status]); // Render children only if not logged in, otherwise render null (or loading) return status !== "LOGGED_IN" ? children : null; } // LoginStartPage is now simpler, focused only on login UI/logic function LoginStartPage() { // ... login related logic ONLY ... return <>{/ ... login related components ... /}</>; } ` Recommended Pattern 2: Dedicated Interaction Component (Dialog logic abstracted into a dedicated InviteButton component) `tsx export function FriendInvitation() { const { data } = useQuery(/ ... /); return ( <> {/ Use the dedicated button component /} <InviteButton name={data.name} /> {/ ... other UI ... /} </> ); } // InviteButton handles the confirmation flow internally function InviteButton({ name }) { const handleClick = async () => { const canInvite = await overlay.openAsync(({ isOpen, close }) => ( <ConfirmDialog title={Share with ${name}} // ... dialog setup ... /> )); if (canInvite) { await sendPush(); } }; return <Button onClick={handleClick}>Invite</Button>; } `