refactor(scheduling): update availability calendar and form layout for improved structure and functionality

- Change start script in package.json to use next dev and add start:prod for production
- Enhance AvailabilityCalendar with tooltip positioning and refactor pointer position handling
- Integrate Card components in AvailabilityForm for better layout and styling
- Simplify form structure and improve error message display

Author: achneerov

components/scheduling/availability-calendar.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import * as React from "react";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 import {
    buildCalendarRange,
@@ -268,19 +270,16 @@ export function AvailabilityCalendar({
 
    if (!anchor) {
       return (
-         <div
-            className={cn(
-               "min-h-[480px] w-full animate-pulse rounded-xl bg-muted/40",
-               className,
-            )}
+         <Skeleton
+            className={cn("min-h-[480px] w-full rounded-none", className)}
             aria-busy="true"
             aria-label="Loading availability calendar"
          />
       );
    }
 
    return (
-      <div className={cn("mx-auto w-full max-w-6xl bg-card", className)}>
+      <div className={cn("w-full", className)}>
          <div className="overflow-x-auto">
             <div
                style={{ minWidth: `${Math.max(720, 80 + columnCount * 56)}px` }}
@@ -365,7 +364,8 @@ export function AvailabilityCalendar({
 
                   {tooltip && pointerPos ? (
                      <div
-                        className="pointer-events-none fixed z-50 rounded-md bg-foreground px-3 py-1.5 text-xs font-medium text-background shadow-lg"
+                        role="tooltip"
+                        className="pointer-events-none fixed z-50 inline-flex w-fit items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background"
                         style={{
                            left: pointerPos.x,
                            top: pointerPos.y,
@@ -378,7 +378,8 @@ export function AvailabilityCalendar({
                </div>
             </div>
          </div>
-         <footer className="flex flex-col gap-4 border-t border-border px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
+         <Separator />
+         <div className="flex flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
             <div className="flex flex-wrap items-center gap-4 text-xs text-muted-foreground">
                <span className="font-semibold tracking-wider text-foreground/70">
                   YOUR SELECTIONS:
@@ -396,7 +397,7 @@ export function AvailabilityCalendar({
                {slotCount} slot{slotCount === 1 ? "" : "s"} selected ·{" "}
                {hoursTotal.toFixed(2)} hrs total
             </p>
-         </footer>
+         </div>
       </div>
    );
 }

components/scheduling/availability-form.tsx

@@ -5,6 +5,7 @@ import { useActionState } from "react";
 
 import { AvailabilityCalendar } from "@/components/scheduling/availability-calendar";
 import { MessageYourCoach } from "@/components/scheduling/message-your-coach";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 import type { TimeSlot, Weekday } from "@/lib/scheduling/time-slot";
 import {
@@ -47,44 +48,42 @@ export function AvailabilityForm({
    const errors = state?.errors;
 
    return (
-      <form
-         action={formAction}
-         className={cn(
-            "mx-auto w-full max-w-6xl overflow-hidden rounded-xl border border-border bg-card shadow-sm",
-            className,
-         )}
-      >
+      <form action={formAction}>
          <input type="hidden" name="session_id" value={sessionId} />
          <input
             type="hidden"
             name="time_slots"
             value={JSON.stringify(slots)}
          />
 
-         <AvailabilityCalendar
-            weeks={weeks}
-            daysOfWeek={daysOfWeek}
-            startHour={startHour}
-            endHour={endHour}
-            anchor={anchor}
-            value={slots}
-            onChange={setSlots}
-         />
+         <Card className={cn("mx-auto w-full max-w-6xl gap-0 py-0", className)}>
+            <CardContent className="p-0">
+               <AvailabilityCalendar
+                  weeks={weeks}
+                  daysOfWeek={daysOfWeek}
+                  startHour={startHour}
+                  endHour={endHour}
+                  anchor={anchor}
+                  value={slots}
+                  onChange={setSlots}
+               />
+            </CardContent>
 
-         <div className="border-t border-border bg-accent/30 p-4">
-            <MessageYourCoach
-               name="notes"
-               value={coachMessage}
-               onChange={setCoachMessage}
-               pending={pending}
-            />
+            <CardFooter className="flex-col items-stretch gap-2">
+               <MessageYourCoach
+                  name="notes"
+                  value={coachMessage}
+                  onChange={setCoachMessage}
+                  pending={pending}
+               />
 
-            <FormErrors errors={errors} />
+               <FormErrors errors={errors} />
 
-            {state?.message && !errors ? (
-               <p className="mt-2 text-sm text-primary">{state.message}</p>
-            ) : null}
-         </div>
+               {state?.message && !errors ? (
+                  <p className="text-sm text-primary">{state.message}</p>
+               ) : null}
+            </CardFooter>
+         </Card>
       </form>
    );
 }
@@ -94,7 +93,7 @@ function FormErrors({ errors }: { errors?: Record<string, string[]> }) {
    const messages = Object.values(errors).flat();
    if (messages.length === 0) return null;
    return (
-      <ul className="mt-2 flex flex-col gap-0.5 text-sm text-destructive">
+      <ul className="flex flex-col gap-0.5 text-sm text-destructive">
          {messages.map((m, i) => (
             <li key={i}>{m}</li>
          ))}

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "next dev",
+    "start:prod": "next start",
     "lint": "eslint",
     "db:push": "drizzle-kit push",
     "db:generate": "drizzle-kit generate",