configure: resizable columns

apps/configure/package.json

@@ -13,6 +13,9 @@
 		"@mattrax/ui": "workspace:*",
 		"@solid-primitives/context": "^0.2.3",
 		"@solid-primitives/event-listener": "^2.3.3",
+		"@solid-primitives/memo": "^1.3.9",
+		"@solid-primitives/resize-observer": "^2.0.26",
+		"@solid-primitives/set": "^0.4.11",
 		"@solidjs/router": "^0.14.1",
 		"@tanstack/solid-query": "^5.51.9",
 		"@tanstack/solid-query-devtools": "^5.51.9",

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

@@ -4,14 +4,19 @@ import { Badge } from "@mattrax/ui";
 import { db } from "~/lib/db";
 import { type Entity, defineEntity } from "./filters";
 
+const typeColumn = (type: string) =>
+	({
+		header: "Type",
+		// Badge width + padding
+		size: 66.82 + 2 * 16,
+		render: () => <Badge variant="secondary">{type.toUpperCase()}</Badge>,
+	}) as const;
+
 export const entities = {
 	users: defineEntity({
 		load: async () => await (await db).getAll("users"),
 		columns: {
-			type: {
-				header: "Type",
-				render: (_) => <Badge variant="secondary">USER</Badge>,
-			},
+			type: typeColumn("USER"),
 			name: {
 				header: "Name",
 				render: (user) => (
@@ -57,10 +62,7 @@ export const entities = {
 	devices: defineEntity({
 		load: async () => await (await db).getAll("devices"),
 		columns: {
-			type: {
-				header: "Type",
-				render: (_) => <Badge variant="secondary">DEVICE</Badge>,
-			},
+			type: typeColumn("DEVICE"),
 			name: {
 				header: "Name",
 				render: (device) => (
@@ -85,10 +87,7 @@ export const entities = {
 	groups: defineEntity({
 		load: async () => await (await db).getAll("groups"),
 		columns: {
-			type: {
-				header: "Type",
-				render: (_) => <Badge variant="secondary">GROUP</Badge>,
-			},
+			type: typeColumn("GROUP"),
 			name: {
 				header: "Name",
 				render: (group) => (
@@ -109,10 +108,7 @@ export const entities = {
 	policies: defineEntity({
 		load: async () => await (await db).getAll("policies"),
 		columns: {
-			type: {
-				header: "Type",
-				render: (_) => <Badge variant="secondary">POLICY</Badge>,
-			},
+			type: typeColumn("POLICY"),
 			name: {
 				header: "Name",
 				render: (policy) => (
@@ -133,10 +129,7 @@ export const entities = {
 	apps: defineEntity({
 		load: async () => await (await db).getAll("apps"),
 		columns: {
-			type: {
-				header: "Type",
-				render: (_) => <Badge variant="secondary">APP</Badge>,
-			},
+			type: typeColumn("APP"),
 			name: {
 				header: "Name",
 				render: (app) => (

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

@@ -30,7 +30,11 @@ export type ColumnDefinitions<T> = Record<
 	// The render function will still be called on the specific entity to ensure links and the like remain correct.
 	string,
 	{
+		// The header to display above the column.
 		header: JSX.Element;
+		// The size of the column in `px`.
+		size?: "auto" | number;
+		// The content to render in the individual table cell.
 		render: (data: T) => JSX.Element;
 	}
 >;