Put UserCreateSheet on it's own route

So `useBeforeLeave` works!

apps/configure/src/components/search/TableContent.tsx

@@ -103,7 +103,7 @@ export function TableContent(
 		const d = rawData();
 		if (!d) return [];
 
-		return d.sort((a, b) => a.data.name.localeCompare(b.data.name));
+		return [...d].sort((a, b) => a.data.name.localeCompare(b.data.name));
 	});
 
 	const virtualizer = createWindowVirtualizer({

apps/configure/src/routes.ts

@@ -19,7 +19,7 @@ export const routes = [
 				component: lazy(() => import("./routes/(dash)/(overview)")),
 			},
 			{
-				path: "/users",
+				path: ["/users", "/users/new"],
 				component: lazy(() => import("./routes/(dash)/users/(users)")),
 			},
 			{

apps/configure/src/routes/(dash)/users/(users).tsx

@@ -25,7 +25,7 @@ import {
 } from "@mattrax/ui/forms";
 import { latestNoSuspense } from "@mattrax/ui/lib";
 import { createConnectivitySignal } from "@solid-primitives/connectivity";
-import { createAsync, useNavigate } from "@solidjs/router";
+import { createAsync, useLocation, useNavigate } from "@solidjs/router";
 import { Show, Suspense, createSignal } from "solid-js";
 import { z } from "zod";
 import { PageLayout, PageLayoutHeading } from "~/components/PageLayout";
@@ -35,6 +35,8 @@ import { createDbQuery } from "~/lib/query";
 import { useSync } from "~/lib/sync";
 
 export default function Page() {
+	const navigate = useNavigate();
+	const location = useLocation();
 	const ctx = createSearchPageContext([
 		{
 			type: "enum",
@@ -43,19 +45,36 @@ export default function Page() {
 		},
 	]);
 
+	const isSheetOpen = () => location.pathname.endsWith("/new");
+
 	return (
 		<PageLayout
 			class="max-w-7xl space-y-2"
 			heading={
 				<>
 					<PageLayoutHeading>Users</PageLayoutHeading>
-					<Sheet open={true}>
-						<SheetTrigger as={Button}>
+					<Sheet
+						open={isSheetOpen()}
+						onOpenChange={(isOpen) => {
+							if (!isOpen) navigate("..");
+						}}
+					>
+						<SheetTrigger
+							as={Button}
+							onClick={(e) => {
+								e.preventDefault();
+								e.stopPropagation();
+								navigate("new");
+							}}
+						>
 							Create
 							{/* // TODO: Add keyboard shortcut */}
 							{/* <Kbd class="ml-2">N</Kbd> */}
 						</SheetTrigger>
-						<CreateUserSheetContent />
+
+						<SheetContent>
+							<CreateUserSheet />
+						</SheetContent>
 					</Sheet>
 				</>
 			}
@@ -65,7 +84,7 @@ export default function Page() {
 	);
 }
 
-function CreateUserSheetContent() {
+function CreateUserSheet() {
 	const navigate = useNavigate();
 	const sync = useSync();
 	const isOnline = createConnectivitySignal();
@@ -113,7 +132,7 @@ function CreateUserSheetContent() {
 	};
 
 	return (
-		<SheetContent>
+		<>
 			<SheetHeader>
 				<SheetTitle>Create user</SheetTitle>
 				<SheetDescription>
@@ -289,7 +308,7 @@ function CreateUserSheetContent() {
 					</Button>
 				</SheetFooter>
 			</Form>
-		</SheetContent>
+		</>
 	);
 }
 

apps/web/src/api/trpc/routers/device.ts

@@ -174,7 +174,6 @@ export const deviceRouter = createTRPCRouter({
 			const pols: Array<number> = [],
 				apps: Array<number> = [];
 
-			// biome-ignore lint/complexity/noForEach: <explanation>
 			input.assignments.forEach((a) => {
 				if (a.variant === "policy") pols.push(a.pk);
 				else apps.push(a.pk);

apps/web/src/api/utils/index.ts

@@ -16,8 +16,6 @@ export function getEmailDomain(email: string) {
 }
 
 export function omit<T, K extends string>(obj: T, keys: K[]): Omit<T, K> {
-	// biome-ignore lint/complexity/noForEach: <explanation>
-	// biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
 	keys.forEach((k) => ((obj as any)[k] = undefined));
 
 	return obj;

biome.json

@@ -40,6 +40,9 @@
 			},
 			"correctness": {
 				"useJsxKeyInIterable": "off"
+			},
+			"complexity": {
+				"noForEach": "off"
 			}
 		}
 	},

packages/ui/src/chart.tsx

@@ -171,7 +171,6 @@ function showTooltip(context: ChartContext) {
 
 	let content = "";
 
-	// biome-ignore lint/complexity/noForEach:
 	model.title.forEach((title) => {
 		content += `<h3 class="font-semibold leading-none tracking-tight">${title}</h3>`;
 	});

packages/ui/src/dialog.tsx

@@ -19,7 +19,7 @@ import {
 	type Controller,
 	ControllerProvider,
 	createController,
-} from "./controller";
+} from "./lib/controller";
 
 const Dialog: Component<
 	Omit<DialogRootProps, "open"> &

packages/ui/src/dropdown-menu.tsx

@@ -23,7 +23,7 @@ import {
 	type Controller,
 	ControllerProvider,
 	createController,
-} from "./controller";
+} from "./lib/controller";
 
 const DropdownMenu = <T extends ValidComponent = "div">(
 	props: Omit<

packages/ui/src/forms/Form.tsx

@@ -18,7 +18,7 @@ export function Form<S>(
 	]);
 
 	useBeforeLeave((e) => {
-		if (!props.guardBeforeLeave) return;
+		if (props.guardBeforeLeave === false) return;
 		if (props.form.isDirty && !props.form.isSubmitting && !e.defaultPrevented) {
 			// preventDefault to block immediately and prompt user async
 			e.preventDefault();

packages/ui/src/index.tsx

@@ -16,7 +16,6 @@ export * from "./textarea";
 export * from "./tooltip";
 export * from "./timeline";
 export * from "./dropdown-menu";
-export * from "./controller";
 export * from "./label";
 export * from "./flat-tabs";
 export * from "./badge";
@@ -29,7 +28,6 @@ export * from "./toggle";
 export * from "./context-menu";
 export * from "./number-input";
 export * from "./description-list";
-// export * from "./show";
 export * from "./kbd";
 export * from "./chart";
 export * from "./progress";

packages/ui/src/lib/index.ts

@@ -1,2 +1,3 @@
 export * from "./contentEditable";
 export * from "./solidv2";
+export * from "./controller";

packages/ui/src/popover.tsx

@@ -12,7 +12,7 @@ import {
 	type Controller,
 	ControllerProvider,
 	createController,
-} from "./controller";
+} from "./lib/controller";
 
 const Popover: Component<
 	Omit<PopoverPrimitive.PopoverRootProps, "open"> &