Formatting

2025-06-28 00:15:51 +02:00
parent 0088b8f02a
commit 4ac986745d
22 changed files with 1180 additions and 1245 deletions
--- a/src/app/manifest.ts
+++ b/src/app/manifest.ts
@@ -1,16 +1,17 @@
-import type { MetadataRoute } from 'next'
+import type { MetadataRoute } from "next"

 export default function manifest(): MetadataRoute.Manifest {
    return {
        name: "Linker - Smart URL Shortener & Link Management",
        short_name: "Linker",
-        description: "Transform long URLs into short, shareable links. Perfect for social media, emails, and anywhere you need clean, manageable links. Get started for free!",
+        description:
+            "Transform long URLs into short, shareable links. Perfect for social media, emails, and anywhere you need clean, manageable links. Get started for free!",
        start_url: "/",
        display: "standalone",
        icons: [{
-            src: '/favicon.ico',
-            sizes: 'any',
-            type: 'image/x-icon',
-        }],
+            src: "/favicon.ico",
+            sizes: "any",
+            type: "image/x-icon"
+        }]
    }
-}
+}
--- a/src/app/robots.ts
+++ b/src/app/robots.ts
@@ -1,5 +1,5 @@
-import { getAllUrls } from '@/lib/db/urls'
-import type { MetadataRoute } from 'next'
+import { getAllUrls } from "@/lib/db/urls"
+import type { MetadataRoute } from "next"

 export default async function robots(): Promise<MetadataRoute.Robots> {
    const urls = await getAllUrls()
@@ -8,7 +8,7 @@ export default async function robots(): Promise<MetadataRoute.Robots> {
        if (u.crawlable) {
            return `/r/${u.slug}`
        }
-    }).filter(v => typeof v === 'string')
+    }).filter(v => typeof v === "string")

    return {
        rules: [
@@ -17,7 +17,8 @@ export default async function robots(): Promise<MetadataRoute.Robots> {
                allow: "/",
                disallow: ["/api", "/dasboard", "/sign-in"],
                crawlDelay: 1
-            }, {
+            },
+            {
                userAgent: "*",
                disallow: "/r/",
                allow: crawlableUrls,
@@ -25,4 +26,4 @@ export default async function robots(): Promise<MetadataRoute.Robots> {
            }
        ]
    }
-}
+}
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -1,210 +1,199 @@
 "use client"

+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 import * as React from "react"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
 import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"

-import { cn } from "@/lib/utils"
 import { Button, buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"

 function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
-  ...props
+    className,
+    classNames,
+    showOutsideDays = true,
+    captionLayout = "label",
+    buttonVariant = "ghost",
+    formatters,
+    components,
+    ...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"]
 }) {
-  const defaultClassNames = getDefaultClassNames()
+    const defaultClassNames = getDefaultClassNames()

-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
-          defaultClassNames.months
-        ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
-        nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
-        caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
-          defaultClassNames.weekday
-        ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
-        week_number_header: cn(
-          "select-none w-(--cell-size)",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "rounded-l-md bg-accent",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
-          }
+    return (
+        <DayPicker
+            showOutsideDays={showOutsideDays}
+            className={cn(
+                "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+                String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+                String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+                className
+            )}
+            captionLayout={captionLayout}
+            formatters={{
+                formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+                ...formatters
+            }}
+            classNames={{
+                root: cn("w-fit", defaultClassNames.root),
+                months: cn(
+                    "flex gap-4 flex-col md:flex-row relative",
+                    defaultClassNames.months
+                ),
+                month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+                nav: cn(
+                    "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+                    defaultClassNames.nav
+                ),
+                button_previous: cn(
+                    buttonVariants({ variant: buttonVariant }),
+                    "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+                    defaultClassNames.button_previous
+                ),
+                button_next: cn(
+                    buttonVariants({ variant: buttonVariant }),
+                    "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+                    defaultClassNames.button_next
+                ),
+                month_caption: cn(
+                    "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+                    defaultClassNames.month_caption
+                ),
+                dropdowns: cn(
+                    "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+                    defaultClassNames.dropdowns
+                ),
+                dropdown_root: cn(
+                    "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+                    defaultClassNames.dropdown_root
+                ),
+                dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+                caption_label: cn(
+                    "select-none font-medium",
+                    captionLayout === "label"
+                        ? "text-sm"
+                        : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+                    defaultClassNames.caption_label
+                ),
+                table: "w-full border-collapse",
+                weekdays: cn("flex", defaultClassNames.weekdays),
+                weekday: cn(
+                    "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+                    defaultClassNames.weekday
+                ),
+                week: cn("flex w-full mt-2", defaultClassNames.week),
+                week_number_header: cn(
+                    "select-none w-(--cell-size)",
+                    defaultClassNames.week_number_header
+                ),
+                week_number: cn(
+                    "text-[0.8rem] select-none text-muted-foreground",
+                    defaultClassNames.week_number
+                ),
+                day: cn(
+                    "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+                    defaultClassNames.day
+                ),
+                range_start: cn(
+                    "rounded-l-md bg-accent",
+                    defaultClassNames.range_start
+                ),
+                range_middle: cn("rounded-none", defaultClassNames.range_middle),
+                range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+                today: cn(
+                    "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+                    defaultClassNames.today
+                ),
+                outside: cn(
+                    "text-muted-foreground aria-selected:text-muted-foreground",
+                    defaultClassNames.outside
+                ),
+                disabled: cn(
+                    "text-muted-foreground opacity-50",
+                    defaultClassNames.disabled
+                ),
+                hidden: cn("invisible", defaultClassNames.hidden),
+                ...classNames
+            }}
+            components={{
+                Root: ({ className, rootRef, ...props }) => {
+                    return (
+                        <div
+                            data-slot="calendar"
+                            ref={rootRef}
+                            className={cn(className)}
+                            {...props}
+                        />
+                    )
+                },
+                Chevron: ({ className, orientation, ...props }) => {
+                    if (orientation === "left") {
+                        return <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+                    }

-          if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            )
-          }
+                    if (orientation === "right") {
+                        return (
+                            <ChevronRightIcon
+                                className={cn("size-4", className)}
+                                {...props}
+                            />
+                        )
+                    }

-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          )
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  )
+                    return <ChevronDownIcon className={cn("size-4", className)} {...props} />
+                },
+                DayButton: CalendarDayButton,
+                WeekNumber: ({ children, ...props }) => {
+                    return (
+                        <td {...props}>
+                            <div className="flex size-(--cell-size) items-center justify-center text-center">
+                                {children}
+                            </div>
+                        </td>
+                    )
+                },
+                ...components
+            }}
+            {...props}
+        />
+    )
 }

 function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
+    className,
+    day,
+    modifiers,
+    ...props
 }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
+    const defaultClassNames = getDefaultClassNames()

-  const ref = React.useRef<HTMLButtonElement>(null)
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
+    const ref = React.useRef<HTMLButtonElement>(null)
+    React.useEffect(() => {
+        if (modifiers.focused) ref.current?.focus()
+    }, [modifiers.focused])

-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className
-      )}
-      {...props}
-    />
-  )
+    return (
+        <Button
+            ref={ref}
+            variant="ghost"
+            size="icon"
+            data-day={day.date.toLocaleDateString()}
+            data-selected-single={modifiers.selected &&
+                !modifiers.range_start &&
+                !modifiers.range_end &&
+                !modifiers.range_middle}
+            data-range-start={modifiers.range_start}
+            data-range-end={modifiers.range_end}
+            data-range-middle={modifiers.range_middle}
+            className={cn(
+                "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+                defaultClassNames.day,
+                className
+            )}
+            {...props}
+        />
+    )
 }

 export { Calendar, CalendarDayButton }
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -1,167 +1,148 @@
 "use client"

-import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { Slot } from "@radix-ui/react-slot"
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form"
+import * as React from "react"
+import { Controller, type ControllerProps, type FieldPath, type FieldValues, FormProvider, useFormContext, useFormState } from "react-hook-form"

-import { cn } from "@/lib/utils"
 import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils"

 const Form = FormProvider

 type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = {
-  name: TName
+    name: TName
 }

 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
+    {} as FormFieldContextValue
 )

 const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
-  ...props
+    ...props
 }: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
+    return (
+        <FormFieldContext.Provider value={{ name: props.name }}>
+            <Controller {...props} />
+        </FormFieldContext.Provider>
+    )
 }

 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
-  const fieldState = getFieldState(fieldContext.name, formState)
+    const fieldContext = React.useContext(FormFieldContext)
+    const itemContext = React.useContext(FormItemContext)
+    const { getFieldState } = useFormContext()
+    const formState = useFormState({ name: fieldContext.name })
+    const fieldState = getFieldState(fieldContext.name, formState)

-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
-  }
+    if (!fieldContext) {
+        throw new Error("useFormField should be used within <FormField>")
+    }

-  const { id } = itemContext
+    const { id } = itemContext

-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState
+    }
 }

 type FormItemContextValue = {
-  id: string
+    id: string
 }

 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
+    {} as FormItemContextValue
 )

 function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId()
+    const id = React.useId()

-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
-    </FormItemContext.Provider>
-  )
+    return (
+        <FormItemContext.Provider value={{ id }}>
+            <div
+                data-slot="form-item"
+                className={cn("grid gap-2", className)}
+                {...props}
+            />
+        </FormItemContext.Provider>
+    )
 }

 function FormLabel({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField()
+    const { error, formItemId } = useFormField()

-  return (
-    <Label
-      data-slot="form-label"
-      data-error={!!error}
-      className={cn("data-[error=true]:text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
+    return (
+        <Label
+            data-slot="form-label"
+            data-error={!!error}
+            className={cn("data-[error=true]:text-destructive", className)}
+            htmlFor={formItemId}
+            {...props}
+        />
+    )
 }

 function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

-  return (
-    <Slot
-      data-slot="form-control"
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
+    return (
+        <Slot
+            data-slot="form-control"
+            id={formItemId}
+            aria-describedby={!error
+                ? `${formDescriptionId}`
+                : `${formDescriptionId} ${formMessageId}`}
+            aria-invalid={!!error}
+            {...props}
+        />
+    )
 }

 function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField()
+    const { formDescriptionId } = useFormField()

-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
+    return (
+        <p
+            data-slot="form-description"
+            id={formDescriptionId}
+            className={cn("text-muted-foreground text-sm", className)}
+            {...props}
+        />
+    )
 }

 function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : props.children
+    const { error, formMessageId } = useFormField()
+    const body = error ? String(error?.message ?? "") : props.children

-  if (!body) {
-    return null
-  }
+    if (!body) {
+        return null
+    }

-  return (
-    <p
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn("text-destructive text-sm", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
+    return (
+        <p
+            data-slot="form-message"
+            id={formMessageId}
+            className={cn("text-destructive text-sm", className)}
+            {...props}
+        >
+            {body}
+        </p>
+    )
 }

-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField }
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,48 +1,48 @@
 "use client"

-import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react"

 import { cn } from "@/lib/utils"

 function Popover({
-  ...props
+    ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+    return <PopoverPrimitive.Root data-slot="popover" {...props} />
 }

 function PopoverTrigger({
-  ...props
+    ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+    return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
 }

 function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
+    className,
+    align = "center",
+    sideOffset = 4,
+    ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
+    return (
+        <PopoverPrimitive.Portal>
+            <PopoverPrimitive.Content
+                data-slot="popover-content"
+                align={align}
+                sideOffset={sideOffset}
+                className={cn(
+                    "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+                    className
+                )}
+                {...props}
+            />
+        </PopoverPrimitive.Portal>
+    )
 }

 function PopoverAnchor({
-  ...props
+    ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+    return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
 }

-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -1,28 +1,28 @@
 "use client"

-import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react"

 import { cn } from "@/lib/utils"

 function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
+    className,
+    orientation = "horizontal",
+    decorative = true,
+    ...props
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      )}
-      {...props}
-    />
-  )
+    return (
+        <SeparatorPrimitive.Root
+            data-slot="separator"
+            decorative={decorative}
+            orientation={orientation}
+            className={cn(
+                "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+                className
+            )}
+            {...props}
+        />
+    )
 }

 export { Separator }
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -1,139 +1,130 @@
 "use client"

-import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { XIcon } from "lucide-react"
+import * as React from "react"

 import { cn } from "@/lib/utils"

 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+    return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }

 function SheetTrigger({
-  ...props
+    ...props
 }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+    return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 }

 function SheetClose({
-  ...props
+    ...props
 }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+    return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 }

 function SheetPortal({
-  ...props
+    ...props
 }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+    return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 }

 function SheetOverlay({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  return (
-    <SheetPrimitive.Overlay
-      data-slot="sheet-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
+    return (
+        <SheetPrimitive.Overlay
+            data-slot="sheet-overlay"
+            className={cn(
+                "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+                className
+            )}
+            {...props}
+        />
+    )
 }

 function SheetContent({
-  className,
-  children,
-  side = "right",
-  ...props
+    className,
+    children,
+    side = "right",
+    ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
+    side?: "top" | "right" | "bottom" | "left"
 }) {
-  return (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
-        data-slot="sheet-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-          side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-          side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-          side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-          side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-          <XIcon className="size-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  )
+    return (
+        <SheetPortal>
+            <SheetOverlay />
+            <SheetPrimitive.Content
+                data-slot="sheet-content"
+                className={cn(
+                    "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+                    side === "right" &&
+                        "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+                    side === "left" &&
+                        "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+                    side === "top" &&
+                        "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+                    side === "bottom" &&
+                        "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+                <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+                    <XIcon className="size-4" />
+                    <span className="sr-only">Close</span>
+                </SheetPrimitive.Close>
+            </SheetPrimitive.Content>
+        </SheetPortal>
+    )
 }

 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
-      {...props}
-    />
-  )
+    return (
+        <div
+            data-slot="sheet-header"
+            className={cn("flex flex-col gap-1.5 p-4", className)}
+            {...props}
+        />
+    )
 }

 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  )
+    return (
+        <div
+            data-slot="sheet-footer"
+            className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+            {...props}
+        />
+    )
 }

 function SheetTitle({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof SheetPrimitive.Title>) {
-  return (
-    <SheetPrimitive.Title
-      data-slot="sheet-title"
-      className={cn("text-foreground font-semibold", className)}
-      {...props}
-    />
-  )
+    return (
+        <SheetPrimitive.Title
+            data-slot="sheet-title"
+            className={cn("text-foreground font-semibold", className)}
+            {...props}
+        />
+    )
 }

 function SheetDescription({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof SheetPrimitive.Description>) {
-  return (
-    <SheetPrimitive.Description
-      data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
+    return (
+        <SheetPrimitive.Description
+            data-slot="sheet-description"
+            className={cn("text-muted-foreground text-sm", className)}
+            {...props}
+        />
+    )
 }

-export {
-  Sheet,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger }
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -1,13 +1,13 @@
 import { cn } from "@/lib/utils"

 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
-      {...props}
-    />
-  )
+    return (
+        <div
+            data-slot="skeleton"
+            className={cn("bg-accent animate-pulse rounded-md", className)}
+            {...props}
+        />
+    )
 }

 export { Skeleton }
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -4,22 +4,20 @@ import { useTheme } from "next-themes"
 import { Toaster as Sonner, ToasterProps } from "sonner"

 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+    const { theme = "system" } = useTheme()

-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  )
+    return (
+        <Sonner
+            theme={theme as ToasterProps["theme"]}
+            className="toaster group"
+            style={{
+                "--normal-bg": "var(--popover)",
+                "--normal-text": "var(--popover-foreground)",
+                "--normal-border": "var(--border)"
+            } as React.CSSProperties}
+            {...props}
+        />
+    )
 }

 export { Toaster }
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -1,31 +1,31 @@
 "use client"

-import * as React from "react"
 import * as SwitchPrimitive from "@radix-ui/react-switch"
+import * as React from "react"

 import { cn } from "@/lib/utils"

 function Switch({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot="switch"
-      className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-        )}
-      />
-    </SwitchPrimitive.Root>
-  )
+    return (
+        <SwitchPrimitive.Root
+            data-slot="switch"
+            className={cn(
+                "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+                className
+            )}
+            {...props}
+        >
+            <SwitchPrimitive.Thumb
+                data-slot="switch-thumb"
+                className={cn(
+                    "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+                )}
+            />
+        </SwitchPrimitive.Root>
+    )
 }

 export { Switch }
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -5,112 +5,103 @@ import * as React from "react"
 import { cn } from "@/lib/utils"

 function Table({ className, ...props }: React.ComponentProps<"table">) {
-  return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  )
+    return (
+        <div
+            data-slot="table-container"
+            className="relative w-full overflow-x-auto"
+        >
+            <table
+                data-slot="table"
+                className={cn("w-full caption-bottom text-sm", className)}
+                {...props}
+            />
+        </div>
+    )
 }

 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  )
+    return (
+        <thead
+            data-slot="table-header"
+            className={cn("[&_tr]:border-b", className)}
+            {...props}
+        />
+    )
 }

 function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
+    return (
+        <tbody
+            data-slot="table-body"
+            className={cn("[&_tr:last-child]:border-0", className)}
+            {...props}
+        />
+    )
 }

 function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className
-      )}
-      {...props}
-    />
-  )
+    return (
+        <tfoot
+            data-slot="table-footer"
+            className={cn(
+                "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+                className
+            )}
+            {...props}
+        />
+    )
 }

 function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className
-      )}
-      {...props}
-    />
-  )
+    return (
+        <tr
+            data-slot="table-row"
+            className={cn(
+                "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+                className
+            )}
+            {...props}
+        />
+    )
 }

 function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
+    return (
+        <th
+            data-slot="table-head"
+            className={cn(
+                "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+                className
+            )}
+            {...props}
+        />
+    )
 }

 function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
+    return (
+        <td
+            data-slot="table-cell"
+            className={cn(
+                "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+                className
+            )}
+            {...props}
+        />
+    )
 }

 function TableCaption({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
-      {...props}
-    />
-  )
+    return (
+        <caption
+            data-slot="table-caption"
+            className={cn("text-muted-foreground mt-4 text-sm", className)}
+            {...props}
+        />
+    )
 }

-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow }
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,61 +1,61 @@
 "use client"

-import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react"

 import { cn } from "@/lib/utils"

 function TooltipProvider({
-  delayDuration = 0,
-  ...props
+    delayDuration = 0,
+    ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
+    return (
+        <TooltipPrimitive.Provider
+            data-slot="tooltip-provider"
+            delayDuration={delayDuration}
+            {...props}
+        />
+    )
 }

 function Tooltip({
-  ...props
+    ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  )
+    return (
+        <TooltipProvider>
+            <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+        </TooltipProvider>
+    )
 }

 function TooltipTrigger({
-  ...props
+    ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+    return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }

 function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
+    className,
+    sideOffset = 0,
+    children,
+    ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
+    return (
+        <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Content
+                data-slot="tooltip-content"
+                sideOffset={sideOffset}
+                className={cn(
+                    "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+                <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+            </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+    )
 }

-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
--- a/src/hooks/use-mobile.ts
+++ b/src/hooks/use-mobile.ts
@@ -3,17 +3,17 @@ import * as React from "react"
 const MOBILE_BREAKPOINT = 768

 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+    const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+        }
+        mql.addEventListener("change", onChange)
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+        return () => mql.removeEventListener("change", onChange)
+    }, [])

-  return !!isMobile
+    return !!isMobile
 }
--- a/src/lib/actions/url.ts
+++ b/src/lib/actions/url.ts
@@ -1,10 +1,10 @@
 "use server"

+import { revalidatePath } from "next/cache"
 import { getSession } from "../auth/session"
 import { insertUrl } from "../db/urls"
-import { advancedUrlSchema, editUrlSchema, urlFormSchema } from "../schema/url"
 import { deleteUrl as deleteUrlDb, updateUrl as updateUrlDb } from "../db/urls"
-import { revalidatePath } from "next/cache"
+import { advancedUrlSchema, editUrlSchema, urlFormSchema } from "../schema/url"
 import { getWebsiteTitle } from "../websiteTitle"

 type Response = {
@@ -68,7 +68,7 @@ export async function createAdvanceUrl(unsafeData: unknown): Promise<Response> {
        ...data,
        slug: data.slug?.length === 0 ? undefined : data.slug,
        title: data.title?.length === 0 ? await getWebsiteTitle(data.url) : data.title,
-        maxVisits: data.maxVisits > 0 ? data.maxVisits : undefined,
+        maxVisits: data.maxVisits > 0 ? data.maxVisits : undefined
    })

    return {
@@ -120,4 +120,4 @@ export async function deleteUrl(id: string): Promise<Response> {
        error: false,
        message: "Short link deleted successfully!"
    }
-}
+}
--- a/src/lib/auth/auth.ts
+++ b/src/lib/auth/auth.ts
@@ -1,9 +1,9 @@
 import { betterAuth } from "better-auth"
 import { drizzleAdapter } from "better-auth/adapters/drizzle"
+import { nextCookies } from "better-auth/next-js"
 import { genericOAuth } from "better-auth/plugins"
 import { db } from "../drizzle/db"
 import { env } from "../env/server"
-import { nextCookies } from "better-auth/next-js"

 export const auth = betterAuth({
    database: drizzleAdapter(db, {
@@ -18,6 +18,6 @@ export const auth = betterAuth({
                clientSecret: env.AUTHENTIK_CLIENT_SECRET,
                discoveryUrl: env.AUTHENTIK_DISCOVERY_URL
            }]
-        }),
+        })
    ]
 })
--- a/src/lib/auth/session.ts
+++ b/src/lib/auth/session.ts
@@ -1,6 +1,6 @@
 import { headers } from "next/headers"
-import { auth } from "./auth"
 import { redirect } from "next/navigation"
+import { auth } from "./auth"

 export async function getSession() {
    const session = await auth.api.getSession({
@@ -11,4 +11,4 @@ export async function getSession() {
    }

    return { session, redirect: redirectFunc }
-}
+}
--- a/src/lib/db/urls.ts
+++ b/src/lib/db/urls.ts
@@ -1,8 +1,8 @@
-import { eq, desc, count } from "drizzle-orm";
-import { db } from "../drizzle/db";
-import { urls, visits } from "../drizzle/schema";
-import { cacheTag } from "next/dist/server/use-cache/cache-tag";
-import { revalidateTag } from "next/cache";
+import { count, desc, eq } from "drizzle-orm"
+import { revalidateTag } from "next/cache"
+import { cacheTag } from "next/dist/server/use-cache/cache-tag"
+import { db } from "../drizzle/db"
+import { urls, visits } from "../drizzle/schema"

 export async function getAllUrls() {
    "use cache"
@@ -67,4 +67,4 @@ export async function trackVisit(data: typeof visits.$inferInsert) {
    revalidateTag("visits")

    return await db.insert(visits).values(data)
-}
+}
--- a/src/lib/randomSlug.ts
+++ b/src/lib/randomSlug.ts
@@ -1,10 +1,10 @@
 export function generateRandomSlug(): string {
-    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    let result = '';
+    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
+    let result = ""

    for (let i = 0; i < 5; i++) {
-        result += characters.charAt(Math.floor(Math.random() * characters.length));
+        result += characters.charAt(Math.floor(Math.random() * characters.length))
    }

-    return result;
-}
+    return result
+}
--- a/src/lib/schema/url.ts
+++ b/src/lib/schema/url.ts
@@ -1,4 +1,4 @@
-import { z } from "zod";
+import { z } from "zod"

 export const urlFormSchema = z.object({
    url: z.string().url("Please enter a valid URL"),
@@ -12,7 +12,7 @@ export const advancedUrlSchema = z.object({
    maxVisits: z.number().int().positive().nullable(),
    expDate: z.date().optional(),
    forwardQueryParams: z.boolean(),
-    crawlable: z.boolean(),
+    crawlable: z.boolean()
 })

 export const editUrlSchema = z.object({
@@ -22,5 +22,5 @@ export const editUrlSchema = z.object({
    maxVisits: z.number().int().positive().nullable(),
    expDate: z.date().nullable(),
    forwardQueryParams: z.boolean(),
-    crawlable: z.boolean(),
-})
+    crawlable: z.boolean()
+})
--- a/src/lib/websiteTitle.ts
+++ b/src/lib/websiteTitle.ts
@@ -1,12 +1,12 @@
 export async function getWebsiteTitle(url: string): Promise<string | null> {
-    const res = await fetch(url, { redirect: 'follow' })
+    const res = await fetch(url, { redirect: "follow" })

    if (!res.ok) {
        return null
    }

-    const contentType = res.headers.get('content-type')
-    if (!contentType || !contentType.includes('text/html')) {
+    const contentType = res.headers.get("content-type")
+    if (!contentType || !contentType.includes("text/html")) {
        return null
    }

@@ -16,16 +16,16 @@ export async function getWebsiteTitle(url: string): Promise<string | null> {

    if (titleMatch && titleMatch[1]) {
        const title = titleMatch[1]
-            .replace(/&lt;/g, '<')
-            .replace(/&gt;/g, '>')
-            .replace(/&amp;/g, '&')
-            .replace(/&quot;/g, '"')
+            .replace(/&lt;/g, "<")
+            .replace(/&gt;/g, ">")
+            .replace(/&amp;/g, "&")
+            .replace(/&quot;/g, "\"")
            .replace(/&#39;/g, "'")
-            .replace(/&nbsp;/g, ' ')
+            .replace(/&nbsp;/g, " ")
            .trim()

        return title || null
    }

    return null
-}
+}
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,13 +1,13 @@
-import { NextRequest, NextResponse } from "next/server";
-import { getSessionCookie } from "better-auth/cookies";
+import { getSessionCookie } from "better-auth/cookies"
+import { NextRequest, NextResponse } from "next/server"

 export async function middleware(request: NextRequest) {
-    const sessionCookie = getSessionCookie(request);
+    const sessionCookie = getSessionCookie(request)
    if (!sessionCookie) {
-        return NextResponse.redirect(new URL("/", request.url));
+        return NextResponse.redirect(new URL("/", request.url))
    }

-    return NextResponse.next();
+    return NextResponse.next()
 }

-export const config = { matcher: ["/dashboard"] };
+export const config = { matcher: ["/dashboard"] }