feat: enhance CdnChooser with truncation and improve FormRow layout

- Added truncation class to the CdnChooser component for better UI.
- Updated FormRow to include flex-wrap and items-end for improved layout.
- Introduced a new overrides.ts file to generate IDs with a rot13 encoding for tierlist versions.
- Created a new page for creating tierlist versions with form handling and validation.
- Implemented a DatePicker component for selecting dates with a calendar UI.

components/chooser/index.tsx

@@ -127,11 +127,11 @@ export function CdnChooser({
       >
         {children ||
           (meta ? (
-            <span onClick={value ? choose : undefined}>
+            <span onClick={value ? choose : undefined} className="truncate">
               {meta.name} <Kbd>{b2sClient(Number(meta.size))}</Kbd>
             </span>
           ) : value ? (
-            <span onClick={value ? choose : undefined}>"File Selected"</span>
+            <span onClick={value ? choose : undefined}>File Selected</span>
           ) : (
             "Select File"
           ))}

components/date.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { format } from "date-fns";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export function DatePicker({
+  onValueChange,
+  value,
+  defaultValue,
+}: {
+  onValueChange?: (value: string | undefined) => void;
+  value?: string | Date | undefined;
+  defaultValue?: string | Date | undefined;
+}) {
+  const [date, setDateInternal] = React.useState<Date | undefined>(
+    toDate(defaultValue),
+  );
+
+  React.useEffect(() => {
+    setDateInternal(toDate(value));
+  }, [value]);
+
+  const setDate = React.useCallback(
+    (
+      value: Date | undefined | ((old: Date | undefined) => Date | undefined),
+    ) => {
+      if (typeof value === "function") return setDate(value);
+      onValueChange?.(value?.toLocaleDateString("en-GB"));
+      setDateInternal(value);
+    },
+    [onValueChange],
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          id="date-picker-simple"
+          className="justify-start font-normal"
+        >
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          required={false}
+          selected={date}
+          onSelect={setDate}
+          defaultMonth={date}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function toDate(str: Date | string | undefined) {
+  if (str instanceof Date) return str;
+  if (!str) return undefined;
+  const [d, m, y] = str.split("/").map(Number);
+  return new Date(y, m - 1, d);
+}

components/form.tsx

@@ -436,5 +436,5 @@ export function FormAction({
 }
 
 export function FormRow({ className, ...props }: React.ComponentProps<"div">) {
-  return <div className={cn("flex gap-2", className)} {...props} />;
+  return <div className={cn("flex gap-2 flex-wrap items-end", className)} {...props} />;
 }