## Bug Fixes ### Note Card Actions - Fix broken size change functionality (missing state declaration) - Implement React 19 useOptimistic for instant UI feedback - Add startTransition for non-blocking updates - Ensure smooth animations without page refresh - All note actions now work: pin, archive, color, size, checklist ### Markdown LaTeX Rendering - Add remark-math and rehype-katex plugins - Support inline equations with dollar sign syntax - Support block equations with double dollar sign syntax - Import KaTeX CSS for proper styling - Equations now render correctly instead of showing raw LaTeX ## Technical Details - Replace undefined currentNote references with optimistic state - Add optimistic updates before server actions for instant feedback - Use router.refresh() in transitions for smart cache invalidation - Install remark-math, rehype-katex, and katex packages ## Testing - Build passes successfully with no TypeScript errors - Dev server hot-reloads changes correctly
79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
DialogFooter,
|
|
} from '@/components/ui/dialog'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Plus } from 'lucide-react'
|
|
import { createUser } from '@/app/actions/admin'
|
|
import { toast } from 'sonner'
|
|
|
|
export function CreateUserDialog() {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button>
|
|
<Plus className="mr-2 h-4 w-4" /> Add User
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Create User</DialogTitle>
|
|
<DialogDescription>
|
|
Add a new user to the system. They will need to change their password upon first login if you implement that policy.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<form
|
|
action={async (formData) => {
|
|
const result = await createUser(formData)
|
|
if (result?.error) {
|
|
toast.error('Failed to create user')
|
|
} else {
|
|
toast.success('User created successfully')
|
|
setOpen(false)
|
|
}
|
|
}}
|
|
className="grid gap-4 py-4"
|
|
>
|
|
<div className="grid gap-2">
|
|
<label htmlFor="name">Name</label>
|
|
<Input id="name" name="name" required />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label htmlFor="email">Email</label>
|
|
<Input id="email" name="email" type="email" required />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label htmlFor="password">Password</label>
|
|
<Input id="password" name="password" type="password" required minLength={6} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label htmlFor="role">Role</label>
|
|
<select
|
|
id="role"
|
|
name="role"
|
|
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
<option value="USER">User</option>
|
|
<option value="ADMIN">Admin</option>
|
|
</select>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button type="submit">Create User</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|