ui/ux improvements

apps/web/app/(main)/profile/schedule/page.tsx

@@ -1,5 +1,6 @@
+import { HorizontalDivider } from '@/components/common/divider';
 import { PageHeader } from '@/components/navigation';
-import { SlotsCalendar, TimeSlots } from '@/components/schedule';
+import { AddSlotForm, SlotsCalendar, SlotsList } from '@/components/schedule';
 import { ScheduleSlotsProvider } from '@/context/schedule-slots';
 
 export default function SchedulePage() {
@@ -7,7 +8,9 @@ export default function SchedulePage() {
     <ScheduleSlotsProvider>
       <PageHeader title="График работы" />
       <SlotsCalendar />
-      <TimeSlots />
+      <SlotsList />
+      <HorizontalDivider className="px-4" />
+      <AddSlotForm />
     </ScheduleSlotsProvider>
   );
 }

apps/web/components/common/divider.tsx

@@ -0,0 +1,13 @@
+import { cn } from '@repo/ui/lib/utils';
+
+type Props = {
+  readonly className?: string;
+};
+
+export function HorizontalDivider({ className }: Props) {
+  return (
+    <div className={cn('', className)}>
+      <div className="h-px w-full bg-muted-foreground/15" />
+    </div>
+  );
+}

apps/web/components/schedule/calendar.tsx

@@ -8,18 +8,16 @@ export function SlotsCalendar() {
   const { selectedDate, setSelectedDate } = use(ScheduleSlotsContext);
 
   return (
-    <div>
-      <Calendar
-        className="bg-background"
-        disabled={(date) => {
-          return dayjs().isAfter(dayjs(date), 'day');
-        }}
-        mode="single"
-        onSelect={(date) => {
-          if (date) setSelectedDate(date);
-        }}
-        selected={selectedDate}
-      />
-    </div>
+    <Calendar
+      className="bg-background"
+      disabled={(date) => {
+        return dayjs().isAfter(dayjs(date), 'day');
+      }}
+      mode="single"
+      onSelect={(date) => {
+        if (date) setSelectedDate(date);
+      }}
+      selected={selectedDate}
+    />
   );
 }

apps/web/components/schedule/time-slots/components/add-slot-form.tsx

@@ -33,11 +33,14 @@ export const AddSlotForm = withContext(ContextProvider)(function () {
   };
 
   return (
-    <form className="grid grid-cols-[1fr_1fr_auto] items-center gap-2" onSubmit={handleSubmit}>
-      <AddTimePair />
-      <Button type="submit">
-        <PlusSquare className="size-4" />
-      </Button>
-    </form>
+    <div className="p-4 px-6">
+      <form className="grid grid-cols-[1fr_1fr_auto] items-center gap-2" onSubmit={handleSubmit}>
+        <AddTimePair />
+        <Button className="rounded-full" type="submit">
+          <PlusSquare className="mr-1 size-4" />
+          Добавить
+        </Button>
+      </form>
+    </div>
   );
 });

apps/web/components/schedule/time-slots/components/slot-card.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { ContextProvider } from '../context';
 import { type SlotProps } from '../types';
-import { ReadonlyTimePair } from './time-pair';
+import { ReadonlyTimeRange } from './time-pair';
 import { useSlotQuery } from '@/hooks/slots';
 import { withContext } from '@/utils/context';
 import { Badge } from '@repo/ui/components/ui/badge';
@@ -19,7 +19,7 @@ export const SlotCard = withContext(ContextProvider)(function (props: Readonly<S
   return (
     <Link href={`/profile/schedule/slot/${documentId}`} rel="noopener noreferrer">
       <div className="flex items-center justify-between rounded-2xl bg-background p-4 px-6 dark:bg-primary/5">
-        <ReadonlyTimePair {...slotData.slot} />
+        <ReadonlyTimeRange {...slotData.slot} />
         <div>
           {hasOrders ? (
             <Badge variant="success">Есть записи</Badge>

apps/web/components/schedule/time-slots/components/slots-list.tsx

@@ -1,10 +1,9 @@
 'use client';
-import { AddSlotForm } from './components/add-slot-form';
-import { SlotCard } from './components/slot-card';
+import { SlotCard } from './slot-card';
 import { useSlots } from '@/hooks/slots';
 import { Loader } from 'lucide-react';
 
-export function TimeSlots() {
+export function SlotsList() {
   const { data: slots, isLoading } = useSlots();
 
   if (isLoading)
@@ -21,7 +20,6 @@ export function TimeSlots() {
 
         return <SlotCard key={slot.documentId} {...slot} />;
       })}
-      <AddSlotForm />
     </div>
   );
 }

apps/web/components/schedule/time-slots/components/time-pair.tsx

@@ -25,7 +25,7 @@ export function AddTimePair() {
   );
 }
 
-export function ReadonlyTimePair({ dateend, datestart }: Readonly<Slot>) {
+export function ReadonlyTimeRange({ dateend, datestart }: Readonly<Slot>) {
   return (
     <div className="flex flex-row items-center gap-2 text-lg font-bold">
       <span>{getTimeString(datestart)}</span>
@@ -46,6 +46,7 @@ function TimeInputPair({
     <>
       <div className="flex-1">
         <Input
+          className="rounded-xl"
           disabled={disabled}
           id="start-time"
           onChange={(event) => setStartTime?.(event.target.value)}
@@ -56,6 +57,7 @@ function TimeInputPair({
       </div>
       <div className="flex-1">
         <Input
+          className="rounded-xl"
           disabled={disabled}
           id="end-time"
           onChange={(event) => setEndTime?.(event.target.value)}

apps/web/components/schedule/time-slots/index.ts

@@ -0,0 +1,2 @@
+export * from './components/add-slot-form';
+export * from './components/slots-list';