diff --git a/AGENTS.md b/AGENTS.md index b97a943..8c478cc 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -266,38 +266,45 @@ const value = 《当用漢字による書きかえ》; prefer original forms such as `編輯`. - For user-facing Japanese ellipses, prefer `……` over ASCII `...`. -### Frontend TSX style +### Frontend TypeScript and TSX style -- Preserve the local TSX formatting style. +- The delimiter-placement and line-breaking rules in this section apply to + both plain TypeScript `.ts` and TSX `.tsx`, unless a bullet explicitly says + it is JSX- or React-specific. +- Preserve the local TypeScript and TSX formatting style. - Do not normalize TSX to common Prettier-style React formatting unless explicitly asked. -- Treat TSX formatting rules as hard constraints, not preferences. Before - finishing a TSX edit, inspect the edited hunks for closing `)`, `]`, and `}` - placement and fix violations instead of relying on formatter defaults. -- After every TSX edit, perform a style-only self-review of the edited hunks - before running verification or reporting completion. The task is not complete - while any edited TSX hunk violates these local formatting rules. -- The TSX self-review must classify every edited leading or trailing `)`, `]`, - and `}` by syntax role before deciding whether it is valid. Do not apply a - rule by glyph alone. A closing `)` for a function parameter list is different - from a closing `)` for a function call. A closing `}` for a block is different - from a closing `}` for an object, type literal, import list, or destructuring - pattern. -- The TSX self-review must confirm there are no common Prettier-style React - component declarations with a multi-line destructured parameter. -- The TSX self-review must confirm multi-line function declaration parameter - `)` placement follows the detailed parameter-list rules below. -- The TSX self-review must confirm call-expression `)` is never at the +- Treat TypeScript and TSX formatting rules as hard constraints, not + preferences. Before finishing a TypeScript or TSX edit, inspect the edited + hunks for closing `)`, `]`, and `}` placement and fix violations instead of + relying on formatter defaults. +- After every TypeScript or TSX edit, perform a style-only self-review of the + edited hunks before running verification or reporting completion. The task is + not complete while any edited TypeScript or TSX hunk violates these local + formatting rules. +- The TypeScript/TSX self-review must classify every edited leading or trailing + `)`, `]`, and `}` by syntax role before deciding whether it is valid. Do not + apply a rule by glyph alone. A closing `)` for a function parameter list is + different from a closing `)` for a function call. A closing `}` for a block + is different from a closing `}` for an object, type literal, import list, or + destructuring pattern. +- The TSX-specific self-review must confirm there are no common Prettier-style + React component declarations with a multi-line destructured parameter. +- The TypeScript/TSX self-review must confirm multi-line function declaration + parameter `)` placement follows the detailed parameter-list rules below. +- The TypeScript/TSX self-review must confirm call-expression `)` is never at + the beginning of a line. +- The TypeScript/TSX self-review must confirm + object/type/import/destructuring `}` is not at the beginning of a line. +- The TypeScript/TSX self-review must confirm multi-line + function/lambda/callback/block `}` is on its own line and never at the end + of the previous line. +- The TypeScript/TSX self-review must confirm array `]` is not at the beginning of a line. -- The TSX self-review must confirm object/type/import/destructuring `}` is not - at the beginning of a line. -- The TSX self-review must confirm multi-line function/lambda/callback/block - `}` is on its own line and never at the end of the previous line. -- The TSX self-review must confirm array `]` is not at the beginning of a line. -- The TSX self-review must confirm JSX closing markers and closing parentheses - keep the surrounding compact style. -- The TSX self-review must confirm leading indentation follows 4-space logical - indentation with tabs only as leading 8-space compression. +- The TSX-specific self-review must confirm JSX closing markers and closing + parentheses keep the surrounding compact style. +- The TypeScript/TSX self-review must confirm leading indentation follows + 4-space logical indentation with tabs only as leading 8-space compression. - Prefer `const` arrow functions for TypeScript/TSX component and helper declarations. - Put two blank lines before and after top-level `const` function declarations, unless imports, exports, or file boundaries make that awkward. @@ -699,10 +706,11 @@ Good: Rule: JavaScript object braces on one line get one inner space. JSX expression braces do not get inner spaces. -#### Final TSX self-review checklist +#### Final TypeScript/TSX self-review checklist Before reporting completion after a TypeScript or TSX edit, check the edited -hunks line by line: +hunks line by line. Unless a step explicitly mentions JSX, it applies equally +to `.ts` and `.tsx`: 1. No import/export/type/object/destructuring `}` appears alone at the beginning of a line. diff --git a/frontend/AGENTS.md b/frontend/AGENTS.md index 4d0178d..cddc89b 100644 --- a/frontend/AGENTS.md +++ b/frontend/AGENTS.md @@ -122,37 +122,44 @@ pass or the remaining failure is clearly blocked. if the class cannot be statically detected. - Do not introduce new UI libraries or production dependencies without approval. -## TSX formatting +## TypeScript and TSX formatting +- The delimiter-placement and line-breaking rules in this section apply to + both plain TypeScript `.ts` and TSX `.tsx`, unless a bullet explicitly says + it is JSX- or React-specific. - Preserve compact TSX expression shapes such as inline ternary branches and closing `)` forms when nearby code uses them. -- Treat TSX formatting rules as hard constraints, not preferences. Before - finishing a TSX edit, inspect the edited hunks for closing `)`, `]`, and `}` - placement and fix violations instead of relying on formatter defaults. -- After every TSX edit, perform a style-only self-review of the edited hunks - before running verification or reporting completion. The task is not complete - while any edited TSX hunk violates these local formatting rules. -- The TSX self-review must classify every edited leading or trailing `)`, `]`, - and `}` by syntax role before deciding whether it is valid. Do not apply a - rule by glyph alone. A closing `)` for a function parameter list is different - from a closing `)` for a function call. A closing `}` for a block is different - from a closing `}` for an object, type literal, import list, or destructuring - pattern. -- The TSX self-review must confirm there are no common Prettier-style React - component declarations with a multi-line destructured parameter. -- The TSX self-review must confirm multi-line function declaration parameter - `)` placement follows the detailed parameter-list rules below. -- The TSX self-review must confirm call-expression `)` is never at the +- Treat TypeScript and TSX formatting rules as hard constraints, not + preferences. Before finishing a TypeScript or TSX edit, inspect the edited + hunks for closing `)`, `]`, and `}` placement and fix violations instead of + relying on formatter defaults. +- After every TypeScript or TSX edit, perform a style-only self-review of the + edited hunks before running verification or reporting completion. The task is + not complete while any edited TypeScript or TSX hunk violates these local + formatting rules. +- The TypeScript/TSX self-review must classify every edited leading or trailing + `)`, `]`, and `}` by syntax role before deciding whether it is valid. Do not + apply a rule by glyph alone. A closing `)` for a function parameter list is + different from a closing `)` for a function call. A closing `}` for a block + is different from a closing `}` for an object, type literal, import list, or + destructuring pattern. +- The TSX-specific self-review must confirm there are no common Prettier-style + React component declarations with a multi-line destructured parameter. +- The TypeScript/TSX self-review must confirm multi-line function declaration + parameter `)` placement follows the detailed parameter-list rules below. +- The TypeScript/TSX self-review must confirm call-expression `)` is never at + the beginning of a line. +- The TypeScript/TSX self-review must confirm + object/type/import/destructuring `}` is not at the beginning of a line. +- The TypeScript/TSX self-review must confirm multi-line + function/lambda/callback/block `}` is on its own line and never at the end + of the previous line. +- The TypeScript/TSX self-review must confirm array `]` is not at the beginning of a line. -- The TSX self-review must confirm object/type/import/destructuring `}` is not - at the beginning of a line. -- The TSX self-review must confirm multi-line function/lambda/callback/block - `}` is on its own line and never at the end of the previous line. -- The TSX self-review must confirm array `]` is not at the beginning of a line. -- The TSX self-review must confirm JSX closing markers and closing parentheses - keep the surrounding compact style. -- The TSX self-review must confirm leading indentation follows 4-space logical - indentation with tabs only as leading 8-space compression. +- The TSX-specific self-review must confirm JSX closing markers and closing + parentheses keep the surrounding compact style. +- The TypeScript/TSX self-review must confirm leading indentation follows + 4-space logical indentation with tabs only as leading 8-space compression. - For long Tailwind `className` strings, wrap across lines only when needed. - Keep continuation indentation aligned with the 4-space logical indentation rule, using tabs only as leading 8-space compression. @@ -215,7 +222,8 @@ pass or the remaining failure is clearly blocked. ### Delimiter decision table Use this table before accepting any edited TypeScript or TSX hunk. The table is -more authoritative than formatter habit. +more authoritative than formatter habit. Unless a subsection explicitly +mentions JSX, it applies equally to `.ts` and `.tsx`. #### Import and export named bindings diff --git a/frontend/src/components/TopNav.tsx b/frontend/src/components/TopNav.tsx index 0f611d6..2b41409 100644 --- a/frontend/src/components/TopNav.tsx +++ b/frontend/src/components/TopNav.tsx @@ -208,12 +208,12 @@ const TopNav: FC = ({ user }) => { return ( <> -