Feature: documents edit

app/(pages)/brands/page.tsx

@@ -155,12 +155,12 @@ export default async function Brands() {
                   className="group flex items-center justify-between py-0.5 px-2 rounded-lg border bg-card hover:bg-accent hover:border-primary/50 transition-all duration-200 no-underline"
                 >
                   <div className="flex items-center gap-2 min-w-0 flex-1">
-                    <span className="text-xl flex-shrink-0">{country.flag || '🏭'}</span>
+                    <span className="text-xl shrink-0">{country.flag || '🏭'}</span>
                     <span className="font-medium text-sm truncate group-hover:text-primary transition-colors">
                       {country.name}
                     </span>
                   </div>
-                  <Badge variant="secondary" className="ml-2 flex-shrink-0">
+                  <Badge variant="secondary" className="ml-2 shrink-0">
                     <span className="text-background">{country._count.manufacturers}</span>
                   </Badge>
                 </a>

app/(pages)/collection/items/[slug]/components/edit-fields/brand-edit.tsx

@@ -6,7 +6,7 @@ import { useCallback, useEffect, useMemo, useState, useTransition } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
-import { ClearButton, RequiredFieldMark } from '@/components/elements'
+import { ClearButton, EditButton, RequiredFieldMark } from '@/components/elements'
 import {
   Button,
   Command,
@@ -29,7 +29,6 @@ import { updateBarometer } from '@/server/barometers/actions'
 import type { BarometerDTO } from '@/server/barometers/queries'
 import type { AllBrandsDTO } from '@/server/brands/queries'
 import { cn } from '@/utils'
-import { EditButton } from './edit-button'
 
 interface Props {
   barometer: NonNullable<BarometerDTO>
@@ -97,7 +96,7 @@ function BrandEdit({ brands, barometer }: Props) {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <EditButton />
+      <EditButton label="Edit brand" />
       <DialogContent className="sm:max-w-md max-h-[80vh] overflow-y-visible">
         <FormProvider {...form}>
           <form onSubmit={form.handleSubmit(update)} noValidate>

app/(pages)/collection/items/[slug]/components/edit-fields/category-edit.tsx

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useState, useTransition } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
+import { EditButton } from '@/components/elements/EditButton'
 import {
   Button,
   Dialog,
@@ -26,7 +27,6 @@ import {
 import { updateBarometer } from '@/server/barometers/actions'
 import type { BarometerDTO } from '@/server/barometers/queries'
 import type { CategoriesDTO } from '@/server/categories/queries'
-import { EditButton } from './edit-button'
 
 interface Props {
   barometer: NonNullable<BarometerDTO>
@@ -80,7 +80,7 @@ export function CategoryEdit({ barometer, categories }: Props) {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <EditButton />
+      <EditButton label="Edit category" />
       <DialogContent>
         <FormProvider {...form}>
           <form onSubmit={form.handleSubmit(update)}>

app/(pages)/collection/items/[slug]/components/edit-fields/condition-edit.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useState, useTransition } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
+import { EditButton } from '@/components/elements/EditButton'
 import {
   Button,
   Dialog,
@@ -27,7 +28,6 @@ import {
 import { updateBarometer } from '@/server/barometers/actions'
 import type { BarometerDTO } from '@/server/barometers/queries'
 import type { ConditionsDTO } from '@/server/conditions/queries'
-import { EditButton } from './edit-button'
 
 interface ConditionEditProps {
   barometer: NonNullable<BarometerDTO>
@@ -82,7 +82,7 @@ export function ConditionEdit({ barometer, conditions }: ConditionEditProps) {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <EditButton />
+      <EditButton label="Edit condition" />
       <DialogContent className="sm:max-w-md">
         <FormProvider {...form}>
           <form onSubmit={form.handleSubmit(update)} noValidate>

app/(pages)/collection/items/[slug]/components/edit-fields/date-edit.tsx

@@ -2,19 +2,18 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import dayjs from 'dayjs'
-import { Edit } from 'lucide-react'
 import { type ComponentProps, useEffect, useState, useTransition } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
+import { EditButton } from '@/components/elements'
 import {
   Button,
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
   FormControl,
   FormField,
   FormItem,
@@ -24,7 +23,6 @@ import {
 } from '@/components/ui'
 import { updateBarometer } from '@/server/barometers/actions'
 import type { BarometerDTO } from '@/server/barometers/queries'
-import { cn } from '@/utils'
 
 interface DateEditProps extends ComponentProps<'button'> {
   size?: string | number | undefined
@@ -47,7 +45,7 @@ const validationSchema = z.object({
 
 type DateForm = z.output<typeof validationSchema>
 
-export function DateEdit({ size = 18, barometer, className, ...props }: DateEditProps) {
+export function DateEdit({ barometer }: DateEditProps) {
   const [open, setOpen] = useState(false)
   const [isPending, startTransition] = useTransition()
   const form = useForm<DateForm>({
@@ -82,16 +80,7 @@ export function DateEdit({ size = 18, barometer, className, ...props }: DateEdit
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button
-          variant="ghost"
-          aria-label="Edit year"
-          className={cn('h-fit w-fit p-1', className)}
-          {...props}
-        >
-          <Edit className="text-destructive" size={Number(size) || 18} />
-        </Button>
-      </DialogTrigger>
+      <EditButton label="Edit year" />
       <DialogContent className="sm:max-w-md">
         <FormProvider {...form}>
           <form onSubmit={form.handleSubmit(update)} noValidate>

app/(pages)/collection/items/[slug]/components/edit-fields/dimensions-edit.tsx

@@ -2,19 +2,19 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { isEqual } from 'lodash'
-import { Edit, Plus, Trash2 } from 'lucide-react'
+import { Plus, Trash2 } from 'lucide-react'
 import { type ComponentProps, useCallback, useEffect, useState, useTransition } from 'react'
 import { useFieldArray, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
+import { EditButton } from '@/components/elements'
 import {
   Button,
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
   FormControl,
   FormField,
   FormItem,
@@ -25,7 +25,6 @@ import {
 import { updateBarometer } from '@/server/barometers/actions'
 import type { BarometerDTO } from '@/server/barometers/queries'
 import type { Dimensions } from '@/types'
-import { cn } from '@/utils'
 
 interface DimensionEditProps extends ComponentProps<'button'> {
   barometer: NonNullable<BarometerDTO>
@@ -46,7 +45,7 @@ const validationSchema = z.object({
 
 type DimensionsForm = z.output<typeof validationSchema>
 
-export function DimensionEdit({ barometer, className, ...props }: DimensionEditProps) {
+export function DimensionEdit({ barometer }: DimensionEditProps) {
   const [open, setOpen] = useState(false)
   const [isPending, startTransition] = useTransition()
   const form = useForm<DimensionsForm>({
@@ -99,16 +98,7 @@ export function DimensionEdit({ barometer, className, ...props }: DimensionEditP
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button
-          variant="ghost"
-          aria-label="Edit dimensions"
-          className={cn('h-fit w-fit p-1', className)}
-          {...props}
-        >
-          <Edit className="text-destructive" size={18} />
-        </Button>
-      </DialogTrigger>
+      <EditButton label="Edit dimensions" />
       <DialogContent className="sm:max-w-2xl">
         <FormProvider {...form}>
           <form onSubmit={form.handleSubmit(handleUpdateBarometer)} noValidate>

app/(pages)/collection/items/[slug]/components/edit-fields/estimated-price-edit.tsx

@@ -1,19 +1,18 @@
 'use client'
 
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Edit } from 'lucide-react'
 import { type ComponentProps, useEffect, useState, useTransition } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
+import { EditButton } from '@/components/elements'
 import {
   Button,
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
   FormControl,
   FormField,
   FormItem,
@@ -24,7 +23,6 @@ import {
 } from '@/components/ui'
 import { updateBarometer } from '@/server/barometers/actions'
 import type { BarometerDTO } from '@/server/barometers/queries'
-import { cn } from '@/utils'
 
 interface EstimatedPriceEditProps extends ComponentProps<'button'> {
   size?: string | number | undefined
@@ -40,12 +38,7 @@ const validationSchema = z.object({
 
 type EstimatedPriceForm = z.output<typeof validationSchema>
 
-export function EstimatedPriceEdit({
-  size = 18,
-  barometer,
-  className,
-  ...props
-}: EstimatedPriceEditProps) {
+export function EstimatedPriceEdit({ barometer }: EstimatedPriceEditProps) {
   const [open, setOpen] = useState(false)
   const [isPending, startTransition] = useTransition()
   const form = useForm<EstimatedPriceForm>({
@@ -84,16 +77,7 @@ export function EstimatedPriceEdit({
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button
-          variant="ghost"
-          aria-label="Edit estimated price"
-          className={cn('h-fit w-fit p-1', className)}
-          {...props}
-        >
-          <Edit className="text-destructive" size={Number(size) || 18} />
-        </Button>
-      </DialogTrigger>
+      <EditButton label="Edit estimated price" />
       <DialogContent className="sm:max-w-md">
         <FormProvider {...form}>
           <form onSubmit={form.handleSubmit(update)} noValidate>

app/(pages)/collection/items/[slug]/components/edit-fields/images-edit.tsx

@@ -1,20 +1,18 @@
 'use client'
 
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Edit } from 'lucide-react'
 import { type ComponentProps, useEffect, useMemo, useState, useTransition } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
-import { ImageUpload } from '@/components/elements'
+import { EditButton, ImageUpload } from '@/components/elements'
 import {
   Button,
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
   FormProvider,
   LoadingOverlay,
 } from '@/components/ui'
@@ -55,7 +53,7 @@ const TransformSchema = ImagesEditSchema.transform(
   },
 )
 
-export function ImagesEdit({ barometer, size, className, ...props }: ImagesEditProps) {
+export function ImagesEdit({ barometer }: ImagesEditProps) {
   const savedImages = useMemo(
     () =>
       barometer.images.map(img => ({
@@ -112,16 +110,7 @@ export function ImagesEdit({ barometer, size, className, ...props }: ImagesEditP
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button
-          variant="ghost"
-          aria-label="Edit images"
-          className={cn('absolute top-0 right-20 z-10 h-fit w-fit p-1', className)}
-          {...props}
-        >
-          <Edit className="text-destructive" size={Number(size) || 18} />
-        </Button>
-      </DialogTrigger>
+      <EditButton label="Edit images" />
       <DialogContent className={cn('sm:max-w-4xl', { 'overflow-hidden': isPending })}>
         <FormProvider {...form}>
           <form onSubmit={handleSubmit(update)} noValidate>

app/(pages)/collection/items/[slug]/components/edit-fields/materials-edit.tsx

@@ -2,11 +2,12 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { isEqual } from 'lodash'
-import { Check, Edit, X } from 'lucide-react'
+import { Check, X } from 'lucide-react'
 import { type ComponentProps, useEffect, useState, useTransition } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
+import { EditButton } from '@/components/elements'
 import {
   Badge,
   Button,
@@ -21,7 +22,6 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
   FormControl,
   FormField,
   FormItem,
@@ -35,7 +35,6 @@ import {
 import { updateBarometer } from '@/server/barometers/actions'
 import type { BarometerDTO } from '@/server/barometers/queries'
 import type { MaterialsDTO } from '@/server/materials/queries'
-import { cn } from '@/utils'
 
 interface MaterialsEditProps extends ComponentProps<'button'> {
   barometer: NonNullable<BarometerDTO>
@@ -48,7 +47,7 @@ const validationSchema = z.object({
 
 type MaterialsForm = z.output<typeof validationSchema>
 
-export function MaterialsEdit({ barometer, materials, className, ...props }: MaterialsEditProps) {
+export function MaterialsEdit({ barometer, materials }: MaterialsEditProps) {
   const [open, setOpen] = useState(false)
   const [isPending, startTransition] = useTransition()
 
@@ -92,16 +91,7 @@ export function MaterialsEdit({ barometer, materials, className, ...props }: Mat
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button
-          variant="ghost"
-          aria-label="Edit materials"
-          className={cn('h-fit w-fit p-1', className)}
-          {...props}
-        >
-          <Edit className="text-destructive" size={18} />
-        </Button>
-      </DialogTrigger>
+      <EditButton label="Edit materials" />
       <DialogContent className="sm:max-w-md">
         <FormProvider {...form}>
           <form onSubmit={form.handleSubmit(handleUpdateBarometer)} noValidate>