Updated forms

src/app/(admin)/dashboard/_components/url-form-card.tsx

@@ -53,7 +53,7 @@ function AdvancedUrlForm() {
                             name="url"
                             render={({ field }) => (
                                 <FormItem>
-                                    <FormLabel>Original URL</FormLabel>
+                                    <FormLabel required>Original URL</FormLabel>
                                     <FormControl>
                                         <Input placeholder="https://example.com" {...field} />
                                     </FormControl>
@@ -69,7 +69,7 @@ function AdvancedUrlForm() {
                             name="slug"
                             render={({ field }) => (
                                 <FormItem>
-                                    <FormLabel>Custom Slug (Optional)</FormLabel>
+                                    <FormLabel>Custom Slug</FormLabel>
                                     <FormControl>
                                         <Input placeholder="my-custom-link" {...field} value={field.value ?? ""} />
                                     </FormControl>
@@ -117,7 +117,7 @@ function AdvancedUrlForm() {
                                     </div>
                                     <FormControl>
                                         <Switch
-                                            checked={field.value ?? false}
+                                            checked={field.value}
                                             onCheckedChange={field.onChange}
                                         />
                                     </FormControl>
@@ -131,7 +131,7 @@ function AdvancedUrlForm() {
                             name="title"
                             render={({ field }) => (
                                 <FormItem>
-                                    <FormLabel>Title (Optional)</FormLabel>
+                                    <FormLabel>Title</FormLabel>
                                     <FormControl>
                                         <Input placeholder="My Link Title" {...field} value={field.value ?? ""} />
                                     </FormControl>
@@ -147,7 +147,7 @@ function AdvancedUrlForm() {
                             name="maxVisits"
                             render={({ field }) => (
                                 <FormItem>
-                                    <FormLabel>Max Visits (Optional)</FormLabel>
+                                    <FormLabel>Max Visits</FormLabel>
                                     <FormControl>
                                         <Input
                                             type="number"
@@ -174,7 +174,7 @@ function AdvancedUrlForm() {
                             name="expDate"
                             render={({ field }) => (
                                 <FormItem>
-                                    <FormLabel>Expiration Date (Optional)</FormLabel>
+                                    <FormLabel>Expiration Date</FormLabel>
                                     <FormControl>
                                         <DatePicker
                                             value={field.value}

src/components/ui/form.tsx

@@ -81,8 +81,12 @@ function FormItem({ className, ...props }: React.ComponentProps<"div">) {
 
 function FormLabel({
     className,
+    required,
+    children,
     ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+}: React.ComponentProps<typeof LabelPrimitive.Root> & {
+    required?: boolean
+}) {
     const { error, formItemId } = useFormField()
 
     return (
@@ -92,7 +96,10 @@ function FormLabel({
             className={cn("data-[error=true]:text-destructive", className)}
             htmlFor={formItemId}
             {...props}
-        />
+        >
+            {children}
+            {required && <span className="text-destructive">*</span>}
+        </Label>
     )
 }
 

src/lib/actions/url.ts

@@ -66,9 +66,9 @@ export async function createAdvanceUrl(unsafeData: unknown): Promise<Response> {
 
     await insertUrl({
         ...data,
-        slug: data.slug?.length === 0 ? undefined : data.slug,
+        slug: data.slug ? data.slug.trim() : undefined,
         title: data.title?.length === 0 ? await getWebsiteTitle(data.url) : data.title,
-        maxVisits: data.maxVisits > 0 ? data.maxVisits : undefined
+        maxVisits: data.maxVisits ? data.maxVisits : null,
     })
 
     return {

src/lib/schema/url.ts

@@ -17,7 +17,7 @@ export const advancedUrlSchema = z.object({
 
 export const editUrlSchema = z.object({
     url: z.string().url("Please enter a valid URL"),
-    slug: z.string().max(10, "Slug must be 10 characters or less"),
+    slug: z.string().min(1).max(10, "Slug must be 10 characters or less"),
     title: z.string().max(100, "Title must be 100 characters or less").transform(v => v.trim() === "" ? null : v).nullable(),
     maxVisits: z.number().int().positive().nullable(),
     expDate: z.date().nullable(),