docs: tsx,nextjs,frontends (5 files)

docs/todo/0-kickstart.md

@@ -8,11 +8,19 @@ Use this file when you’re not sure what to do next, or you want a quick “mak
 - Skim: [../START_HERE.md](../START_HERE.md) and [../INDEX.md](../INDEX.md)
 - Then pick the most relevant TODO file from [./README.md](README.md)
 
+## How These TODOs Work
+
+- Keep items small and actionable (one change set per checkbox when possible)
+- When you complete an item, mark it `[x]` and add a short reference (commit hash or PR)
+- If an item grows, split it into follow-ups (or a new numbered TODO file) and link it from [./README.md](README.md)
+- Prefer including concrete file paths and commands in TODO items
+
 ## 15-Minute Local Sanity Check (Frontend)
 
 Run from `frontends/nextjs/`:
 
-- [ ] `cd frontends/nextjs`
+From repo root: `cd frontends/nextjs`
+
 - [ ] `npm ci` (or `npm install`)
 - [ ] `npm run typecheck`
 - [ ] `npm run lint`

frontends/nextjs/src/components/PasswordChangeDialog.tsx

@@ -41,8 +41,8 @@ export function PasswordChangeDialog({ open, username, onPasswordChanged, isFirs
   }
 
   return (
-    <Dialog open={open} onOpenChange={() => {}}>
-      <DialogContent className="sm:max-w-md" onPointerDownOutside={(e) => e.preventDefault()}>
+    <Dialog open={open} onOpenChange={() => {}} disableEscapeKeyDown>
+      <DialogContent className="sm:max-w-md">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             {isFirstLogin && <Warning className="text-orange-500" size={24} />}

frontends/nextjs/src/components/molecules/Tabs.tsx

@@ -58,11 +58,11 @@ export interface TabsTriggerProps extends Omit<MuiTabProps, 'value'> {
   value: string
 }
 
-const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
+const TabsTrigger = forwardRef<HTMLDivElement, TabsTriggerProps>(
   ({ value, label, children, sx, ...props }, ref) => {
     return (
       <MuiTab
-        ref={ref}
+        ref={ref as React.Ref<HTMLDivElement>}
         value={value}
         label={label || children}
         sx={{

frontends/nextjs/src/components/organisms/Sidebar.tsx

@@ -235,9 +235,11 @@ SidebarGroupLabel.displayName = 'SidebarGroupLabel'
 const SidebarGroupContent = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
   ({ children, ...props }, ref) => {
     return (
-      <List ref={ref} dense disablePadding {...props}>
-        {children}
-      </List>
+      <Box ref={ref} {...props}>
+        <List dense disablePadding>
+          {children}
+        </List>
+      </Box>
     )
   }
 )
@@ -255,12 +257,13 @@ interface SidebarMenuItemProps {
   className?: string
 }
 
-const SidebarMenuItem = forwardRef<HTMLLIElement, SidebarMenuItemProps>(
+const SidebarMenuItem = forwardRef<HTMLDivElement, SidebarMenuItemProps>(
   ({ children, icon, label, href, active, disabled, onClick, ...props }, ref) => {
     const content = children || label
 
     return (
-      <ListItem ref={ref} disablePadding {...props}>
+      <ListItem disablePadding>
+        <Box ref={ref} sx={{ width: '100%' }} {...props}>
         <ListItemButton
           selected={active}
           disabled={disabled}
@@ -288,6 +291,7 @@ const SidebarMenuItem = forwardRef<HTMLLIElement, SidebarMenuItemProps>(
             primaryTypographyProps={{ fontSize: '0.875rem' }}
           />
         </ListItemButton>
+        </Box>
       </ListItem>
     )
   }
@@ -295,12 +299,14 @@ const SidebarMenuItem = forwardRef<HTMLLIElement, SidebarMenuItemProps>(
 SidebarMenuItem.displayName = 'SidebarMenuItem'
 
 // SidebarMenu (alias for List)
-const SidebarMenu = forwardRef<HTMLUListElement, { children: ReactNode; className?: string }>(
+const SidebarMenu = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
   ({ children, ...props }, ref) => {
     return (
-      <List ref={ref} dense disablePadding {...props}>
-        {children}
-      </List>
+      <Box ref={ref} {...props}>
+        <List dense disablePadding>
+          {children}
+        </List>
+      </Box>
     )
   }
 )

frontends/nextjs/src/components/ui/atoms/Input.tsx

@@ -8,7 +8,9 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ type, error, ...props }, ref) => {
+  ({ type, error, className, style, ...props }, ref) => {
+    // Filter out HTML-specific props that conflict with MUI
+    const { color, ...restProps } = props as InputProps & { color?: string }
     return (
       <InputBase
         inputRef={ref}
@@ -38,7 +40,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             p: 0,
           },
         }}
-        {...props}
+        {...restProps}
       />
     )
   }