add board search form, some optimizations

Author: derklaro

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@hey-api/client-fetch": "^0.10.0",
+    "@tanstack/react-form": "^1.6.3",
     "@tanstack/react-query": "^5.74.4",
     "@tanstack/react-router": "^1.117.0",
     "@tanstack/zod-adapter": "^1.117.0",

pnpm-lock.yaml

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils.ts";
+import { type ComponentProps, type FC, forwardRef } from "react";
+
+export const Button: FC<ComponentProps<"button">> = forwardRef(({ children, className = "", ...props }, ref) => (
+  <button
+    ref={ref}
+    className={cn(
+      "inline-block bg-blue-500 text-white font-medium rounded-lg px-4 py-2 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 transition",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </button>
+));

src/components/form/Button.tsx

@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils.ts";
+import { type ComponentProps, type FC, forwardRef } from "react";
+
+export const RangeInput: FC<Omit<ComponentProps<"input">, "type">> = forwardRef(
+  ({ className, value, ...props }, ref) => (
+    <div className="flex items-center w-full space-x-4">
+      <input
+        ref={ref}
+        type="range"
+        className={cn(
+          "w-full h-2 bg-gray-200 rounded-lg accent-blue-400 appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400 transition",
+          className,
+        )}
+        value={value}
+        {...props}
+      />
+      <span className="w-12 text-right text-gray-700">{value}</span>
+    </div>
+  ),
+);

src/components/form/RangeInput.tsx

@@ -0,0 +1,37 @@
+import { cn } from "@/lib/utils.ts";
+import { type ComponentProps, type FC, type PropsWithChildren, forwardRef } from "react";
+
+export const SelectInput: FC<PropsWithChildren<ComponentProps<"select">>> = forwardRef(
+  ({ children, className = "", ...props }, ref) => {
+    return (
+      <div className="relative w-full">
+        <select
+          ref={ref}
+          className={cn(
+            "block w-full appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent hover:border-gray-400 transition",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </select>
+
+        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+          <svg
+            className="h-4 w-4 text-gray-500"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <title>Dropdown Arrow</title>
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M5.23 7.21a.75.75 0 011.06-.02L10 10.674l3.71-3.486a.75.75 0 111.04 1.084l-4.24 3.99a.75.75 0 01-1.04 0l-4.24-3.99a.75.75 0 01-.02-1.06z"
+            />
+          </svg>
+        </div>
+      </div>
+    );
+  },
+);

src/components/form/SelectInput.tsx

@@ -0,0 +1,12 @@
+import { cn } from "@/lib/utils.ts";
+import { type ComponentProps, type FC, forwardRef } from "react";
+
+export const ToggleInput: FC<Omit<ComponentProps<"input">, "type">> = forwardRef(
+  ({ className = "", ...props }, ref) => (
+    <label className={cn("relative inline-flex items-center cursor-pointer", className)}>
+      <input type="checkbox" className="sr-only peer" {...props} ref={ref} />
+      <div className="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-blue-400 rounded-full peer-checked:bg-blue-500 transition-all" />
+      <div className="absolute left-1 top-1 bg-white w-4 h-4 rounded-full peer-checked:translate-x-5 transition-transform" />
+    </label>
+  ),
+);

src/components/form/ToggleInput.tsx

@@ -41,8 +41,8 @@ const findDestination = (via: Array<BoardViaEventDto>): [string | null, "schedul
   }
 
   if (firstCancelledViaIndex === 0) {
-    // the first event is canceled, train ends at the current point
-    return [null, "canceled"];
+    // the first event is canceled, actual train destination is unknown
+    return [destination.pointName, "canceled"];
   }
 
   // train ends at the first non-canceled via point

src/routes/boards/-components/BoardDestinationInfo.tsx

@@ -1,4 +1,4 @@
-import { type BoardEntryDto, listBoardDepartures, type PointInfoDto, type SimRailServerDto } from "@/api/generated";
+import { type BoardEntryDto, type PointInfoDto, type SimRailServerDto, listBoardDepartures } from "@/api/generated";
 import { Throbber } from "@/components/Throbber.tsx";
 import { BoardEntry } from "@/routes/boards/-components/BoardEntry.tsx";
 import { BoardTableHeading } from "@/routes/boards/-components/BoardTableHeading.tsx";
@@ -101,7 +101,7 @@ const getBoardFetchTimeRange = (server: SimRailServerDto, timeSpan: number): [st
   const sdt = cdt.setZone(serverTz);
   const dt = sdt.isValid ? sdt : cdt;
 
-  const timeStart = dt.minus(3 * 60 * 1000); // current time - 3 minutes
+  const timeStart = dt.minus(5 * 60 * 1000); // current time - 5 minutes
   const timeEnd = dt.plus(timeSpan * 60 * 1000); // current time + timeSpan minutes
   return [timeStart.toISO(), timeEnd.toISO()];
 };