Copilot instructions

1---
2applyTo: "**/*.tsx"
3---
4## React
5 
6 
7- You are using the latest version of React (v19)
8- Do not write any backend code. Just frontend logic.
9- If a complex skeleton is needed, create a component function `LoadingSkeleton` in the same file.
10- Store components for each major page or workflow in `app/components/$WORKFLOW/$COMPONENT.tsx`.
11  - If a single page has more than two dedicated components, create a subfolder `app/components/$WORKFLOW/$PAGE/$COMPONENT.tsx`
12- Use lowercase dash separated words for file names.
13- Use React 19, TypeScript, Tailwind CSS, and ShadCN components.
14- Prefer function components, hooks over classes.
15- Use ShadCN components in `web/app/components/ui` as your component library. If you need new components, ask for them.
16  - Never edit the `web/components/ui/*.tsx` files.
17  - You can find a list of components here https://ui.shadcn.com/docs/components
18- Break up large components into smaller components, but keep them in the same file unless they can be generalized.
19- Put any "magic" strings like API keys, hosts, etc into a "constants.ts" file.
20- For React functional components with three or fewer props, always inline the prop types as an object literal directly in the function signature after the destructured parameters (e.g., `function Component({ prop1, prop2 }: { prop1: string; prop2?: number }) { ... })`. Include default values in destructuring and mark optional props with ? in the type object. Do not use separate interfaces or type aliases; keep types inline. For complex types, add inline comments if needed.
21- Put the interface definition right above the related function
22- Internally, store all currency values as integers and convert them to floats when rendering visually
23- When building forms use React Hook Form.
24- Include a two line breaks between any `useHook()` calls and any `useState()` definitions for a component.
25- When using a function prop inside a `useEffect`, please use a pattern that avoids including the function in the dependency array, like the `useRef` trick.
26- When writing React components, always hoist complex conditional expressions into descriptively named constants at the top of the component function for better readability and maintainability.
27- When managing API response data, store the entire response object (or relevant subset) in a single `useState` rather than creating separate state variables for each field. Derive individual values from the response object when passing to child components using optional chaining (e.g., response?.field || defaultValue).
28- Refactor ternary to &&: `{condition ? <A/> : <B/>}` → `{condition && <A/>}{!condition && <B/>}`
29- Use the following pattern to reference query string values (i.e. `?theQueryStringParam=value`):
30 
31```typescript
32const [searchParams, _setSearchParams] = useSearchParams();
33// searchParams contains the value of all query string parameters
34const queryStringValue = searchParams.get("theQueryStringParam")
35```
36 
37### Mock Data
38 
39- For any backend communication, create mock responses. Use a async function to return mock data that I will swap out later for a async call to an API.
40- When creating mock data, always specify it in a dedicated `web/app/mock.ts` file
41- Load mock data using a react router `clientLoader`. Use the Skeleton component to present a loading state.
42 
43### React Hook Form
44 
45Follow this structure when generating a form.
46 
47```tsx
48 
49// add a mock function simulating server communication
50async function descriptiveServerSendFunction(values: any) {
51  const mockData = getMockReturnData(/* ... */)
52  return new Promise(resolve => setTimeout(() => resolve(mockData), 500));
53}
54 
55const formSchema = z.object({
56  field_name: z.string(),
57  // additional schema definition
58})
59 
60const form = useForm<z.infer<typeof formSchema>>({
61  resolver: zodResolver(formSchema),
62})
63 
64const {
65  formState: { isSubmitting, errors },
66  setError,
67  clearErrors,
68} = form
69 
70 
71async function onSubmit(values: z.infer<typeof formSchema>) {
72  clearErrors("root")
73 
74  // ...
75  const { data, error } = await descriptiveSendFunction(values)
76 
77  if (error) {
78    setError("root.serverError", { message: error.detail?.[0]?.msg })
79    return
80  }
81  // ...
82}
83 
84return (
85  <Form {...form}>
86    <form onSubmit={form.handleSubmit(onSubmit)}>
87      {/* form fields */}
88 
89      <ServerErrorAlert error={errors.root?.serverError} />
90 
91      <Button
92        type="submit"
93        disabled={isSubmitting}
94      >
95        {isSubmitting ? "Submitting..." : "Submit"}
96      </Button>
97    </form>
98  </Form>
99)
100```
101 
102### Styling
103 
104* Use `text-blue-link` for styling any simple `<a>` tags
105