Use tailwind for more things

src/components/EditorDisplay.tsx

@@ -1,7 +1,5 @@
 import "react-reflex/styles.css";
 
-import { createStyles, makeStyles } from "@material-ui/core/styles";
-import useMediaQuery from "@material-ui/core/useMediaQuery";
 import Editor, { DiffEditor, useMonaco } from "@monaco-editor/react";
 import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer";
 import { useNavigate, useLocation } from "@tanstack/react-router";
@@ -10,6 +8,8 @@ import monaco from "monaco-editor";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 
+import { useMediaQuery } from "@/hooks/use-media-query";
+
 import { ScrollLocation, useCookieService } from "../services/cookieservice";
 import { DataStore, DataStoreItem, DataStoreItemKind } from "../services/datastore";
 import { LocalParseState } from "../services/localparse";
@@ -33,15 +33,6 @@ import registerTupleLanguage, {
   TUPLE_THEME_NAME,
 } from "./tuplelang";
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    editorContainer: {
-      height: "100%",
-      width: "100%",
-    },
-  }),
-);
-
 export type EditorDisplayProps = {
   datastore: DataStore;
   services: Services;
@@ -86,7 +77,6 @@ export function EditorDisplay(props: EditorDisplayProps) {
     localParseState.current = props.services.localParseService.state;
   }, [props.services.localParseService.state]);
 
-  const classes = useStyles();
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -450,7 +440,7 @@ export function EditorDisplay(props: EditorDisplayProps) {
   return (
     <div>
       {monacoReady && currentItem && (
-        <div className={classes.editorContainer}>
+        <div className="w-full h-full">
           <Component
             key={`${currentItem.id}-${props.diff ? "diff" : ""}`}
             height={

src/components/panels/errordisplays.tsx

@@ -1,6 +1,5 @@
 import "react-reflex/styles.css";
 
-import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
 import { Link } from "@tanstack/react-router";
 import { CircleX, MessageCircleWarning } from "lucide-react";
 
@@ -12,7 +11,7 @@
 } from "../../spicedb-common/protodefs/developer/v1/developer_pb";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 
 export const ERROR_SOURCE_TO_ITEM = {
   [DeveloperError_Source.SCHEMA]: DataStoreItemKind.SCHEMA,
   [DeveloperError_Source.RELATIONSHIP]: DataStoreItemKind.RELATIONSHIPS,
   [DeveloperError_Source.ASSERTION]: DataStoreItemKind.ASSERTIONS,
@@ -21,64 +20,20 @@
   [DeveloperError_Source.UNKNOWN_SOURCE]: undefined,
 };
 
-const useErrorDisplayStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    validationError: {
-      border: 0,
-    },
-    foundVia: {
-      marginTop: theme.spacing(1),
-    },
-    foundViaList: {
-      margin: 0,
-      fontFamily: "Roboto Mono, monospace",
-      listStyleType: "none",
-      "& li::after": {
-        content: '" →"',
-      },
-      "& li:last-child::after": {
-        content: '""',
-      },
-    },
-    editorContainer: {
-      display: "grid",
-      alignItems: "center",
-      gridTemplateColumns: "auto 1fr",
-    },
-    dot: {
-      display: "inline-block",
-      marginRight: theme.spacing(1),
-      borderRadius: "50%",
-      width: "8px",
-      height: "8px",
-    },
-    progress: {
-      color: theme.palette.text.primary,
-    },
-    success: {
-      color: theme.palette.success.main,
-    },
-    gray: {
-      color: theme.palette.grey[500],
-    },
-    warning: {
-      color: theme.palette.warning.main,
-    },
-  }),
-);
-
 export function DeveloperErrorDisplay({ error }: { error: DeveloperError }) {
-  const classes = useErrorDisplayStyles();
   return (
     <Alert variant="destructive">
       <CircleX />
       <AlertTitle>{error.message}</AlertTitle>
       {error.path.length > 0 && (
         <AlertDescription>
           Found Via:
-          <ul className={classes.foundViaList}>
+          <ul className="">
             {error.path.map((item) => (
-              <li key={item}>{item}</li>
+              // NOTE: the \2192 here is the → character; tailwind needs it as an escape sequence.
+              <li className="after:content-['\2192'] after:ml-2 last:after:content-none" key={item}>
+                {item}
+              </li>
             ))}
           </ul>
         </AlertDescription>
@@ -96,72 +51,42 @@
   );
 }
 
-const useSourceDisplayStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    link: {
-      color: theme.palette.text.primary,
-    },
-    validationErrorContext: {
-      padding: theme.spacing(1),
-      backgroundColor: theme.palette.background.default,
-    },
-  }),
-);
-
 export function DeveloperWarningSourceDisplay({ warning }: { warning: DeveloperWarning }) {
-  const classes = useSourceDisplayStyles();
-
   return (
-    <div className={classes.validationErrorContext}>
+    <div className="m-2">
       In
-      <Link className={classes.link} to={DataStorePaths.Schema()}>
-        Schema
-      </Link>
+      <Link to={DataStorePaths.Schema()}>Schema</Link>
       {/* NOTE: this is a guess; I think this was an unintentional omission. */}: {warning.message}
     </div>
   );
 }
 
 export function DeveloperSourceDisplay({ error }: { error: DeveloperError }) {
-  const classes = useSourceDisplayStyles();
-
   // TODO: unify with error source above.
   return (
     <div>
       {error.source === DeveloperError_Source.SCHEMA && (
-        <div className={classes.validationErrorContext}>
+        <div className="m-2">
           In
-          <Link className={classes.link} to={DataStorePaths.Schema()}>
-            Schema
-          </Link>
-          :
+          <Link to={DataStorePaths.Schema()}>Schema</Link>:
         </div>
       )}
       {error.source === DeveloperError_Source.ASSERTION && (
-        <div className={classes.validationErrorContext}>
+        <div className="m-2">
           In
-          <Link className={classes.link} to={DataStorePaths.Assertions()}>
-            Assertions
-          </Link>
-          :
+          <Link to={DataStorePaths.Assertions()}>Assertions</Link>:
         </div>
       )}
       {error.source === DeveloperError_Source.RELATIONSHIP && (
-        <div className={classes.validationErrorContext}>
+        <div className="m-2">
           In
-          <Link className={classes.link} to={DataStorePaths.Relationships()}>
-            Test Data
-          </Link>
-          :
+          <Link to={DataStorePaths.Relationships()}>Test Data</Link>:
         </div>
       )}
       {error.source === DeveloperError_Source.VALIDATION_YAML && (
-        <div className={classes.validationErrorContext}>
+        <div className="m-2">
           In
-          <Link className={classes.link} to={DataStorePaths.ExpectedRelations()}>
-            Expected Relations
-          </Link>
-          :
+          <Link to={DataStorePaths.ExpectedRelations()}>Expected Relations</Link>:
         </div>
       )}
     </div>

src/hooks/use-media-query.ts

@@ -0,0 +1,42 @@
+import { useState, useLayoutEffect } from "react";
+
+type UseMediaQueryOptions = {
+  defaultValue?: boolean;
+  initializeWithValue?: boolean;
+};
+
+const getMatches = (query: string): boolean => {
+  return window.matchMedia(query).matches;
+};
+
+export function useMediaQuery(
+  query: string,
+  { defaultValue = false, initializeWithValue = true }: UseMediaQueryOptions = {},
+): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (initializeWithValue) {
+      return getMatches(query);
+    }
+    return defaultValue;
+  });
+
+  useLayoutEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    // Handles the change event of the media query.
+    // Declared inside the layout effect so that we don't need
+    // to worry about its identity.
+    const handleChange = () => setMatches(getMatches(query));
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    matchMedia.addEventListener("change", handleChange);
+
+    return () => {
+      matchMedia.removeEventListener("change", handleChange);
+    };
+  }, [query]);
+
+  return matches;
+}