improvement: appointment dialog UX improved.

2026-07-12 22:07:11 +03:30
parent 53b43f2cdb
commit abf0371a5b
18 changed files with 1006 additions and 759 deletions
--- a/frontend/src/components/ui/shared/TimeStepInput.tsx
+++ b/frontend/src/components/ui/shared/TimeStepInput.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { adjustTimeInput } from '@/components/appointments/appointmentTime';
+
+interface TimeStepInputProps {
+  id?: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  stepMinutes?: number;
+  disabled?: boolean;
+}
+
+const inputClassName =
+  'min-w-0 flex-1 rounded-[var(--radius-md)] border border-border bg-background-secondary/90 text-text-primary px-3 py-2 text-sm text-center tabular-nums focus:outline-none focus:ring-2 focus:ring-primary/35';
+
+export function TimeStepInput({
+  id,
+  label,
+  value,
+  onChange,
+  stepMinutes = 5,
+  disabled = false,
+}: TimeStepInputProps) {
+  const step = (delta: number) => {
+    if (disabled) return;
+    onChange(adjustTimeInput(value, delta * stepMinutes));
+  };
+
+  return (
+    <div>
+      <label htmlFor={id} className="block text-sm font-medium text-text-secondary mb-1">
+        {label}
+      </label>
+        <div className="flex items-stretch gap-1.5">
+          <div className="flex flex-col justify-center gap-0.5 shrink-0 self-stretch py-0.5">
+            <button
+              type="button"
+              aria-label={`${label} +${stepMinutes}m`}
+              disabled={disabled}
+              onClick={() => step(1)}
+              className="flex flex-1 min-h-[1.25rem] items-center justify-center rounded-[var(--radius-sm)] border border-border bg-background-secondary/90 px-1.5 text-text-muted hover:text-text-primary hover:bg-background-card/80 disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
+            >
+              <ChevronUp className="h-3.5 w-3.5 icon-flat" />
+            </button>
+            <button
+              type="button"
+              aria-label={`${label} -${stepMinutes}m`}
+              disabled={disabled}
+              onClick={() => step(-1)}
+              className="flex flex-1 min-h-[1.25rem] items-center justify-center rounded-[var(--radius-sm)] border border-border bg-background-secondary/90 px-1.5 text-text-muted hover:text-text-primary hover:bg-background-card/80 disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
+            >
+              <ChevronDown className="h-3.5 w-3.5 icon-flat" />
+            </button>
+          </div>
+        <input
+          id={id}
+          type="time"
+          step={stepMinutes * 60}
+          className={inputClassName}
+          value={value}
+          disabled={disabled}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      </div>
+    </div>
+  );
+}