fix active sidebar active item, added error boundaries for relational form fields, fixed schema diagram for m:n relations

app/src/ui/components/display/ErrorBoundary.tsx

@@ -2,6 +2,7 @@ import React, { Component, type ErrorInfo, type ReactNode } from "react";
 
 interface ErrorBoundaryProps {
    children: ReactNode;
+   suppressError?: boolean;
    fallback?:
       | (({ error, resetError }: { error: Error; resetError: () => void }) => ReactNode)
       | ReactNode;
@@ -23,31 +24,44 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
    }
 
    override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-      console.error("ErrorBoundary caught an error:", error, errorInfo);
+      const type = this.props.suppressError ? "warn" : "error";
+      console[type]("ErrorBoundary caught an error:", error, errorInfo);
    }
 
    resetError = () => {
       this.setState({ hasError: false, error: undefined });
    };
 
+   private renderFallback() {
+      if (this.props.fallback) {
+         return typeof this.props.fallback === "function"
+            ? this.props.fallback({ error: this.state.error!, resetError: this.resetError })
+            : this.props.fallback;
+      }
+      return <BaseError>Error</BaseError>;
+   }
+
    override render() {
       if (this.state.hasError) {
-         return this.props.fallback ? (
-            typeof this.props.fallback === "function" ? (
-               this.props.fallback({ error: this.state.error!, resetError: this.resetError })
-            ) : (
-               this.props.fallback
-            )
-         ) : (
-            <div>
-               <h2>Something went wrong.</h2>
-               <button onClick={this.resetError}>Try Again</button>
-            </div>
-         );
+         return this.renderFallback();
+      }
+
+      if (this.props.suppressError) {
+         try {
+            return this.props.children;
+         } catch (e) {
+            return this.renderFallback();
+         }
       }
 
       return this.props.children;
    }
 }
 
+const BaseError = ({ children }: { children: ReactNode }) => (
+   <div className="bg-red-700 text-white py-1 px-2 rounded-md leading-none font-mono">
+      {children}
+   </div>
+);
+
 export default ErrorBoundary;

app/src/ui/components/wouter/Link.tsx

@@ -42,9 +42,16 @@ const useLocationFromRouter = (router) => {
    ];
 };
 
-export function isLinkActive(href: string, strict?: boolean) {
+export function isLinkActive(href: string, strictness?: number) {
    const path = window.location.pathname;
-   return strict ? path === href : path.includes(href);
+
+   if (!strictness || strictness === 0) {
+      return path.includes(href);
+   } else if (strictness === 1) {
+      return path === href || path.endsWith(href) || path.includes(href + "/");
+   }
+
+   return path === href;
 }
 
 export function Link({