@manta-eu/react 0.11.0 → 0.13.0

package/src/components/input/input-date.tsx

@@ -1,50 +1,122 @@
-import { getHours, getMinutes, setHours, setMinutes, startOfDay } from "date-fns";
+import {
+  addYears,
+  getHours,
+  getMinutes,
+  isAfter,
+  isBefore,
+  max,
+  min,
+  setHours,
+  setMinutes,
+  startOfDay,
+} from "date-fns";
 import { Calendar as CalendarBlank, ChevronDown } from "lucide-react";
+import { useState } from "react";
 import { Button } from "../button";
-import { Calendar } from "../calendar";
+import { Calendar, type CalendarProps } from "../calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 import { cn } from "#style";
 
+const earliestDefaultMonth = new Date(1900, 0, 1);
+
+// A day picked with no time yet starts at midnight rather than now, and never lands outside the bounds.
+export function pickedDateTime(day: Date, selected?: Date, minDate?: Date, maxDate?: Date): Date {
+  const picked = selected ? setMinutes(setHours(day, getHours(selected)), getMinutes(selected)) : startOfDay(day);
+  if (minDate && isBefore(picked, minDate)) return minDate;
+  if (maxDate && isAfter(picked, maxDate)) return maxDate;
+  return picked;
+}
+
 export type InputDateArgs = {
+  id?: string;
   selected?: Date;
 
   onChange: (date: Date) => void;
+  /** The first day that can be picked; today unless `allowPast` is set. */
   minDate?: Date;
   maxDate?: Date;
+  /** Let days before today be picked. `minDate` still applies when given. */
+  allowPast?: boolean;
   disabled?: boolean;
   className?: string;
   align?: "start" | "center" | "end";
+  placeholder?: string;
+  /** Close the picker once a day is picked. */
+  closeOnSelect?: boolean;
+  captionLayout?: CalendarProps["captionLayout"];
+  startMonth?: Date;
+  endMonth?: Date;
+  invalid?: boolean;
+  "aria-label"?: string;
+  "aria-invalid"?: boolean;
+  "aria-describedby"?: string;
 };
 
+/** The first pickable day: `minDate` when given, else today, else none when `allowPast` is set. */
+export function inputDateLowerBound(options: { minDate?: Date; allowPast?: boolean; today?: Date }): Date | undefined {
+  const { minDate, allowPast = false, today = new Date() } = options;
+  return minDate ?? (allowPast ? undefined : startOfDay(today));
+}
+
 export function InputDate(props: InputDateArgs) {
-  const { selected, onChange, minDate = startOfDay(new Date()), maxDate, disabled, className, align = "start" } = props;
+  const {
+    id,
+    selected,
+    onChange,
+    minDate,
+    maxDate,
+    allowPast = false,
+    disabled,
+    className,
+    align = "start",
+    placeholder = "Select date",
+    closeOnSelect = false,
+    captionLayout = "dropdown",
+    startMonth,
+    endMonth,
+    invalid,
+    "aria-label": ariaLabel,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+  } = props;
+  const [open, setOpen] = useState(false);
+  const lowerBound = inputDateLowerBound({ minDate, allowPast });
 
   function handleOnChange(date?: Date) {
     if (!date) return;
-
-    const originalDate = selected ?? new Date();
-    const hours = getHours(originalDate);
-    const minutes = getMinutes(originalDate);
-
-    const withHours = setHours(date, hours);
-    const withMinutes = setMinutes(withHours, minutes);
-
-    onChange(withMinutes);
+    onChange(pickedDateTime(date, selected, lowerBound, maxDate));
+    if (closeOnSelect) setOpen(false);
   }
 
+  const firstMonth = startMonth ?? lowerBound ?? min([earliestDefaultMonth, ...(selected ? [selected] : [])]);
+  const lastMonth = endMonth ?? maxDate ?? max([addYears(new Date(), 50), ...(selected ? [selected] : [])]);
+
   return (
-    <Popover>
+    <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button rounded="md" variant="tertiary" disabled={disabled} className={cn(className, "px-3 whitespace-nowrap")}>
+        <Button
+          id={id}
+          rounded="md"
+          variant="tertiary"
+          disabled={disabled}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={invalid || ariaInvalid ? true : undefined}
+          className={cn(
+            className,
+            "px-3 whitespace-nowrap",
+            invalid && "border border-error-border ring-2 ring-error-foreground/20",
+          )}
+        >
           <CalendarBlank className="size-md" />
           {selected ? (
             selected.toLocaleDateString(undefined, {
               month: "short",
               day: "numeric",
-              year: "2-digit",
+              year: "numeric",
             })
           ) : (
-            <span className="text-muted-foreground">Select date</span>
+            <span className="text-muted-foreground">{placeholder}</span>
           )}
           <ChevronDown className="size-md text-muted-foreground" />
         </Button>
@@ -54,15 +126,15 @@ export function InputDate(props: InputDateArgs) {
           className="w-full"
           mode="single"
           required
-          defaultMonth={selected}
+          captionLayout={captionLayout}
+          startMonth={firstMonth}
+          endMonth={lastMonth}
+          defaultMonth={selected ?? lowerBound}
           selected={selected}
           onSelect={handleOnChange}
           fixedWeeks
           showOutsideDays
-          disabled={{
-            before: minDate,
-            after: maxDate,
-          }}
+          disabled={[...(lowerBound ? [{ before: lowerBound }] : []), ...(maxDate ? [{ after: maxDate }] : [])]}
         />
       </PopoverContent>
     </Popover>

package/src/components/input/input-time.tsx

@@ -1,4 +1,4 @@
-import { getHours, isAfter, isBefore, setHours, startOfHour } from "date-fns";
+import { getHours, getMinutes, isAfter, isBefore, setHours, setMinutes, startOfDay, startOfMinute } from "date-fns";
 import { ChevronDown } from "lucide-react";
 import { Button } from "../button";
 import { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from "../dropdown";
@@ -8,6 +8,32 @@ function formatTime24(date: Date): string {
   return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
 }
 
+function minuteOfDay(date: Date): number {
+  return getHours(date) * 60 + getMinutes(date);
+}
+
+function atMinuteOfDay(day: Date, minute: number): Date {
+  return setMinutes(setHours(startOfDay(day), Math.floor(minute / 60)), minute % 60);
+}
+
+function floorToStep(date: Date, minuteStep: number): Date {
+  const minutes = minuteOfDay(date);
+  return atMinuteOfDay(date, minutes - (minutes % minuteStep));
+}
+
+// A slot is enabled only when its own start is within the bounds. A wall time the clocks skip on a daylight saving day
+// is left out rather than listed again as the hour after it.
+export function timeSlots(day: Date, minuteStep: number, minDate?: Date, maxDate?: Date) {
+  return Array.from({ length: Math.ceil((24 * 60) / minuteStep) }, (_, index) => index * minuteStep).flatMap(
+    (minute) => {
+      const slot = atMinuteOfDay(day, minute);
+      if (minuteOfDay(slot) !== minute) return [];
+      const disabled = Boolean(minDate && isBefore(slot, minDate)) || Boolean(maxDate && isAfter(slot, maxDate));
+      return [{ value: slot.toISOString(), label: formatTime24(slot), disabled }];
+    },
+  );
+}
+
 export type InputTimeArgs = {
   selected?: Date;
 
@@ -17,34 +43,33 @@ export type InputTimeArgs = {
   minDate?: Date;
   maxDate?: Date;
   align?: "start" | "center" | "end";
+  minuteStep?: number;
+  invalid?: boolean;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
 };
 
 export function InputTime(props: InputTimeArgs) {
-  const { selected, onChange, disabled, minDate, maxDate, className, align = "start" } = props;
-
-  const baseDate = selected ?? new Date();
-
-  const options = Array.from({ length: 24 }, (_, hour) => {
-    const d = setHours(startOfHour(baseDate), hour);
-
-    const minCheck = minDate ? startOfHour(minDate) : undefined;
-    const maxCheck = maxDate ? startOfHour(maxDate) : undefined;
-
-    const isDisabled = Boolean(minCheck && isBefore(d, minCheck)) || Boolean(maxCheck && isAfter(d, maxCheck));
+  const {
+    selected,
+    onChange,
+    disabled,
+    minDate,
+    maxDate,
+    className,
+    align = "start",
+    minuteStep = 60,
+    invalid,
+  } = props;
 
-    return {
-      value: d.toISOString(),
-      label: formatTime24(d),
-      disabled: isDisabled,
-    };
-  });
+  const options = timeSlots(selected ?? new Date(), minuteStep, minDate, maxDate);
 
-  const selectedValue =
-    selected instanceof Date
-      ? (options.find((opt) => getHours(new Date(opt.value)) === getHours(selected))?.value ?? "")
-      : "";
+  const selectedStart = selected instanceof Date ? floorToStep(startOfMinute(selected), minuteStep) : undefined;
+  const selectedValue = selectedStart
+    ? (options.find((opt) => new Date(opt.value).getTime() === selectedStart.getTime())?.value ?? "")
+    : "";
 
-  const selectedLabel = selectedValue ? (options.find((opt) => opt.value === selectedValue)?.label ?? "") : "";
+  const selectedLabel = selected instanceof Date ? formatTime24(selected) : "";
 
   return (
     <Dropdown>
@@ -53,14 +78,22 @@ export function InputTime(props: InputTimeArgs) {
           variant="tertiary"
           size="base"
           rounded="md"
-          className={cn("w-fit min-w-32 justify-between", !selectedLabel && "text-muted-foreground", className)}
+          className={cn(
+            "w-fit min-w-32 justify-between whitespace-nowrap",
+            !selectedLabel && "text-muted-foreground",
+            invalid && "border border-error-border ring-2 ring-error-foreground/20",
+            className,
+          )}
           disabled={disabled}
+          aria-label={props["aria-label"]}
+          aria-describedby={props["aria-describedby"]}
+          aria-invalid={invalid ? true : undefined}
         >
-          {selectedLabel || "Select hour"}
+          {selectedLabel || (minuteStep >= 60 ? "Select hour" : "Select time")}
           <ChevronDown className="size-4 shrink-0 opacity-50" />
         </Button>
       </DropdownTrigger>
-      <DropdownContent align={align}>
+      <DropdownContent align={align} className="max-h-72 overflow-y-auto">
         {options.map((opt) => (
           <DropdownItem
             key={opt.value}

package/src/components/layouts/RouteLayout.tsx

@@ -1,4 +1,3 @@
-import type { MantaModelId } from "@manta-eu/client/shared/model";
 import { useCallback, useState, type ReactNode } from "react";
 import { Chat } from "../chat-view/index";
 import { LoadingView } from "../chat-view/LoadingView";
@@ -21,7 +20,7 @@ import { useShouldAutoFocusInput } from "#hooks/use-should-auto-focus-input";
 import { useChatPanelSync } from "#hooks/useChatPanelSync";
 import { useDatastoreSelection } from "#hooks/useDatastoreSelection";
 import { useOnboardingState } from "#hooks/useOnboardingState";
-import type { Datastore, User } from "#lib/chat-types";
+import { useAuthContext } from "#providers/AuthContext";
 import { ChatPanelProvider } from "#providers/ChatPanelContext";
 import { CommandProvider } from "#providers/commands/CommandContext";
 import { KnowledgeGraphStateProvider } from "#providers/KnowledgeGraphStateProvider";
@@ -30,33 +29,17 @@ const expandedSidebarWidth = 232;
 const collapsedSidebarWidth = 68;
 
 export type RouteLayoutProps = {
-  user: User;
-  datastore?: Datastore;
-  datastores?: Datastore[];
-  isOperator: boolean;
-  canSwitchDatastore?: boolean;
-  logout?: () => void;
   floatingMobileMenu?: boolean;
-  allowedModels?: MantaModelId[];
   title?: string;
   mark?: ReactNode;
   children: ReactNode;
 };
 
 export function RouteLayout(props: RouteLayoutProps) {
-  const {
-    user,
-    datastore,
-    datastores,
-    isOperator,
-    canSwitchDatastore,
-    logout,
-    floatingMobileMenu,
-    allowedModels,
-    title,
-    mark,
-    children,
-  } = props;
+  const { floatingMobileMenu, title, mark, children } = props;
+
+  const { datastore, canSwitchDatastore } = useAuthContext();
+
   const { setSelectedDatastore, isSwitching } = useDatastoreSelection({ canSwitchDatastore });
 
   const handleDatastoreSelected = useCallback(
@@ -65,14 +48,7 @@ export function RouteLayout(props: RouteLayoutProps) {
   );
 
   const body = (
-    <RouteLayoutBody
-      user={user}
-      datastore={datastore}
-      isOperator={isOperator}
-      allowedModels={allowedModels}
-      title={title}
-      mark={mark}
-    >
+    <RouteLayoutBody title={title} mark={mark}>
       {children}
     </RouteLayoutBody>
   );
@@ -82,16 +58,7 @@ export function RouteLayout(props: RouteLayoutProps) {
       <CommandProvider>
         <SidebarProvider className="h-dvh">
           <ChatPanelProvider>
-            <Sidebar
-              user={user}
-              datastore={datastore}
-              datastores={datastores}
-              isOperator={isOperator}
-              isSwitching={isSwitching}
-              canSwitchDatastore={canSwitchDatastore}
-              onLogout={logout}
-              onDatastoreSelected={handleDatastoreSelected}
-            />
+            <Sidebar isSwitching={isSwitching} onDatastoreSelected={handleDatastoreSelected} />
             <SidebarInset className="min-w-0 overflow-hidden">
               <MainContent className="relative flex min-w-0 flex-col overflow-hidden">
                 <ConnectionBanner />
@@ -158,18 +125,12 @@ function OnboardingLayer() {
   );
 }
 
-type RouteLayoutBodyProps = {
-  user: User;
-  datastore?: Datastore;
-  isOperator: boolean;
-  allowedModels?: MantaModelId[];
-  title?: string;
-  mark?: ReactNode;
-  children: ReactNode;
-};
+type RouteLayoutBodyProps = Omit<RouteLayoutProps, "floatingMobileMenu">;
 
 function RouteLayoutBody(props: RouteLayoutBodyProps) {
-  const { user, datastore, isOperator, allowedModels, title, mark, children } = props;
+  const { title, mark, children } = props;
+
+  const { user, datastore, isOperator, allowedModels } = useAuthContext();
 
   const { splitEligible, chatOpen, chatReady, closeChat } = useChatPanelSync();
 

package/src/components/layouts/Sidebar.tsx

@@ -22,7 +22,7 @@ import {
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import type { MouseEvent } from "react";
-import { use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Link, useLocation } from "react-router";
 import { ConnectionBadge } from "../ConnectionBadge";
 import { ManageDatastoresMenuItem } from "../datastore-management/ManageDatastoresMenuItem";
@@ -53,12 +53,11 @@ import { useConnectionProblems } from "#hooks/use-connection-problems";
 import { useConversations } from "#hooks/useConversations";
 import { useDeleteChat } from "#hooks/useDeleteChat";
 import { canPickDatastore } from "#ldo-ui";
-import { currentRealm, enableDatastoreManagement } from "#lib/build-config";
-import type { Datastore, User } from "#lib/chat-types";
+import { currentRealm } from "#lib/build-config";
 import { usePlatform } from "#lib/use-platform";
 import { cn } from "#lib/utils";
 import { useAbsoluteNavigate } from "#providers/ActiveDatastoreProvider";
-import { AuthContext } from "#providers/AuthContext";
+import { useAuthContext } from "#providers/AuthContext";
 import { useChatManagerConnection } from "#providers/ChatManagerProvider";
 import { useCommandContext } from "#providers/commands/CommandContext";
 import { useKnowledgeGraphState } from "#providers/KnowledgeGraphStateContext";
@@ -85,14 +84,8 @@ function onNavClick(handler: () => void) {
 }
 
 type SidebarProps = {
-  user?: User;
-  datastore?: Datastore;
-  datastores?: Datastore[];
-  isOperator?: boolean;
   isSwitching?: boolean;
-  canSwitchDatastore?: boolean;
-  onLogout?: () => void;
-  onDatastoreSelected?: (datastoreId: string) => void;
+  onDatastoreSelected: (datastoreId: string) => void;
 };
 
 export function Sidebar(props: SidebarProps) {
@@ -100,15 +93,22 @@ export function Sidebar(props: SidebarProps) {
   const { pathname } = useLocation();
   const { isKnowledgeGraphUnavailable } = useKnowledgeGraphState();
 
-  const { user, datastore, datastores, isOperator, isSwitching, canSwitchDatastore, onLogout, onDatastoreSelected } =
-    props;
+  const { isSwitching, onDatastoreSelected } = props;
 
-  const authContext = use(AuthContext);
-  const canManageTeam = authContext?.canManageTeam ?? false;
-  const canManageCustomApps = authContext?.canManageCustomApps ?? false;
-  const canDisconnectCustomApps = authContext?.canDisconnectCustomApps ?? false;
-  const hasProfilePage = authContext?.hasProfilePage ?? false;
-  const canManageStreams = authContext?.canManageStreams ?? isOperator ?? false;
+  const {
+    user,
+    datastore,
+    datastores,
+    isOperator,
+    canSwitchDatastore,
+    logout: onLogout,
+    canManageTeam,
+    canManageCustomApps,
+    canManageStreams,
+    canManageDatastores = false,
+    canDisconnectCustomApps = false,
+    hasProfilePage = false,
+  } = useAuthContext();
 
   const { state: sidebarState, isMobile, toggleSidebar, setOpenMobile } = useSidebar();
   const isSidebarExpanded = isMobile || sidebarState === "expanded";
@@ -233,10 +233,9 @@ export function Sidebar(props: SidebarProps) {
   const datastoreName = datastore?.name ?? (isOperator ? realmVocabLabel(realmDatastoreId) : "");
 
   const chatId = activeConversation?.id;
-  const canManageDatastores = enableDatastoreManagement && !!isOperator && !!onDatastoreSelected;
   const showDatastorePicker = canPickDatastore({
     canSwitchDatastore,
-    canSelect: !!onDatastoreSelected,
+    canSelect: true,
     datastores,
     isOperator,
   });
@@ -455,8 +454,7 @@ export function Sidebar(props: SidebarProps) {
             picture={user?.picture}
             currentDatastore={{ name: datastoreName }}
             pickerSlot={
-              showDatastorePicker &&
-              onDatastoreSelected && (
+              showDatastorePicker && (
                 <ConnectedDatastorePicker
                   currentDatastoreId={datastore?.id}
                   isOperator={isOperator}