Merge pull request #19 from ClayPulse/dev

Update to tailwind v4

Author: Shellishack

npm-packages/react-api/src/tailwind.css

@@ -1,3 +1,21 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@custom-variant dark (&:is([data-mode="dark"] *));
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

package-lock.json

@@ -1,16 +1,38 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-/* @import "./preflight.css"; */
+@import "tailwindcss";
+@config "../tailwind.config.mjs";
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@utility text-balance {
+  text-wrap: balance;
+}
+
+@utility view-layout {
+  @apply bg-default flex h-full w-full flex-col items-start justify-between rounded-2xl p-3;
+}
 
 :root {
   --background: #ffffff;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-  }
+[data-theme="dark"] {
+  --background: #0a0a0a;
 }
 
 body {
@@ -34,13 +56,3 @@ body {
     @apply text-default-foreground;
   }
 }
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-
-  .view-layout {
-    @apply flex h-full w-full flex-col items-start justify-between rounded-2xl bg-default p-3;
-  }
-}

web/app/globals.css

@@ -26,7 +26,7 @@ export default function Explorer({
   const { platformApi } = usePlatformApi();
   const [isProjectSettingsModalOpen, setIsProjectSettingsModalOpen] =
     useState(false);
-  const { openFileView} = useViewManager();
+  const { openFileView } = useViewManager();
 
   const rootGroupRef = useRef<TreeViewGroupRef | null>(null);
 
@@ -123,7 +123,7 @@ export default function Explorer({
   // Choose project home path
   if (!editorContext?.persistSettings?.projectHomePath) {
     return (
-      <div className="h-full w-full space-y-2 bg-content2 p-4">
+      <div className="bg-content2 h-full w-full space-y-2 p-4">
         <p>
           You have not set a project home path yet. Please set a project home
           path to continue. All your projects will be saved in this directory.
@@ -143,14 +143,14 @@ export default function Explorer({
   // Browse inside a project
   if (editorContext?.editorStates.project) {
     return (
-      <div className="relative h-full w-full bg-content2 px-4 py-2">
+      <div className="bg-content2 relative h-full w-full px-4 py-2">
         {editorContext.editorStates.projectContent?.length === 0 && (
-          <div className="pointer-events-none absolute left-0 top-0 m-0 flex h-full w-full flex-col items-center justify-center pb-16">
+          <div className="pointer-events-none absolute top-0 left-0 m-0 flex h-full w-full flex-col items-center justify-center pb-16">
             <p>Empty content. Create a new file to get started.</p>
           </div>
         )}
         <div className="flex h-full w-full flex-col space-y-2">
-          <div className="flex h-10 w-full items-center rounded-xl bg-default px-3 text-default-foreground">
+          <div className="bg-default text-default-foreground flex h-10 w-full items-center rounded-xl px-3">
             <div className="flex w-full">
               <Button
                 isIconOnly
@@ -166,7 +166,11 @@ export default function Explorer({
                 size="sm"
                 onPress={startCreatingNewFile}
               >
-                <Icon uri="/icons/add-file" className="-translate-x-0.5" />
+                <Icon
+                  uri="/icons/add-file"
+                  className="-translate-x-0.5"
+                  isThemed
+                />
               </Button>
             </div>
             <div className="flex">
@@ -201,7 +205,7 @@ export default function Explorer({
   // Pick project
   else {
     return (
-      <div className="h-full w-full space-y-2 overflow-y-auto bg-content2 p-4">
+      <div className="bg-content2 h-full w-full space-y-2 overflow-y-auto p-4">
         <Button
           className="w-full"
           onPress={() => {

web/components/explorer/explorer.tsx

@@ -1,11 +1,7 @@
 "use client";
 
 import { ContextMenuState } from "@/lib/types";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@heroui/react";
+import { Popover, PopoverContent, PopoverTrigger } from "@heroui/react";
 import { JSX } from "react";
 
 export default function ContextMenu({
@@ -28,6 +24,9 @@ export default function ContextMenu({
     >
       <Popover
         onClose={() => {
+          if (process.env.NODE_ENV === 'development') {
+            console.log("Popover closed");
+          }
           setState({ isOpen: false, x: 0, y: 0 });
         }}
         isOpen={state.isOpen}

web/components/interface/context-menu.tsx

@@ -11,7 +11,7 @@ function MenuPanel({ children }: { children?: React.ReactNode }) {
     <>
       {isLandscape ? (
         <motion.div
-          className="z-30 hidden h-full w-[400px] flex-shrink-0 md:block"
+          className="z-30 hidden h-full w-[400px] shrink-0 md:block"
           initial={{
             x: -400,
           }}

web/components/interface/nav-menu.tsx

@@ -57,14 +57,14 @@ export default function Nav({ children }: { children: React.ReactNode }) {
 
 
   return (
-    <div className="flex h-screen w-full flex-col overflow-x-hidden">
+    <div className="grid grid-rows-[max-content_auto] h-screen w-full flex-col overflow-x-hidden">
       <PasswordScreen
         isOpen={isPasswordScreenOpen}
         setIsOpen={setIsPasswordScreenOpen}
       />
 
       {isShowNavbar && (
-        <div className="fixed z-40 h-12 w-full">
+        <div className="z-40 h-12 w-full">
           <div
             className={
               "grid h-12 w-full grid-cols-3 grid-rows-1  px-2 py-1 text-default-foreground"
@@ -113,13 +113,13 @@ export default function Nav({ children }: { children: React.ReactNode }) {
       )}
 
       <div
-        className={`relative flex h-full w-full overflow-hidden ${isShowNavbar ? "pt-[48px]" : ""}`}
+        className={`relative flex h-full w-full overflow-hidden`}
       >
         {isShowNavbar && (
           <NavMenu isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
         )}
 
-        <div className="min-w-0 flex-grow">{children}</div>
+        <div className="min-w-0 grow">{children}</div>
       </div>
     </div>
   );

web/components/interface/nav.tsx

@@ -34,7 +34,7 @@ export default function VoiceIndicator() {
                 <PuffLoader color={colors.green["300"]} size={24} />
               ) : (
                 <ClockLoader
-                  className="!shadow-[0px_0px_0px_2px_inset] !shadow-content2-foreground [&>span]:!bg-content2-foreground"
+                  className="shadow-[0px_0px_0px_2px_inset]! shadow-content2-foreground! [&>span]:bg-content2-foreground!"
                   size={24}
                 />
               )}

web/components/interface/voice-indicator.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import { createRoot, Root } from "react-dom/client";
-import { loadRemote } from "@module-federation/runtime";
+import { loadRemote, preloadRemote } from "@module-federation/runtime";
 import React from "react";
 
 export default function ExtensionLoader({
@@ -41,16 +41,20 @@ export default function ExtensionLoader({
 
     let isMounted = true;
 
-    loadRemote(`${moduleId}/main`).then((mod) => {
-      // Prevent state updates if component is unmounted
-      if (!isMounted) return;
+    loadRemote(`${moduleId}/main`)
+      .then((module) => {
+        // Prevent state updates if component is unmounted
+        if (!isMounted) return;
 
-      // @ts-expect-error Types are not available since @module-federation/enhanced
-      // cannot work in Nextjs App router. Hence types are not generated.
-      const { default: LoadedExtension, Config } = mod;
+        // @ts-expect-error Types are not available since @module-federation/enhanced
+        // cannot work in Nextjs App router. Hence types are not generated.
+        const { default: LoadedExtension, Config } = module;
 
-      renderExtension(LoadedExtension);
-    });
+        renderExtension(LoadedExtension);
+      })
+      .catch((error) => {
+        console.error("Error loading remote module:", error);
+      });
 
     return () => {
       // Unmount React module inside the iframe.

web/components/misc/extension-loader.tsx

@@ -8,12 +8,14 @@ export default function Icon({
   extension = ".png",
   variant,
   className,
+  isThemed,
 }: {
   name?: string;
   uri?: string;
   extension?: string;
   variant?: "outlined" | "round" | "sharp" | "two-tone";
   className?: string;
+  isThemed?: boolean;
 }) {
   const { resolvedTheme } = useTheme();
 
@@ -22,24 +24,29 @@ export default function Icon({
   }
   if (name && uri) {
     throw new Error(
-      "Icon component requires either a name or a uri prop, not both.",
+      "Icon component requires either a name or a uri prop, not both."
     );
   }
 
   if (name) {
     return (
-      <span
-        className={
-          `material-icons${variant ? "-" + variant : ""}` +
-          (className ? " " + className : "")
-        }
-      >
-        {name}
-      </span>
+      <div className="flex justify-center items-center w-full h-full">
+        <span
+          className={
+            `material-icons${variant ? "-" + variant : ""}` +
+            (className ? " " + className : "")
+          }
+        >
+          {name}
+        </span>
+      </div>
     );
   }
 
-  if (resolvedTheme === "dark") {
+  if (!isThemed) {
+    const iconUri = uri + extension;
+    return <img src={iconUri} alt="icon" className={"h-6 w-6 " + className} />;
+  } else if (resolvedTheme === "dark") {
     const darkUri = uri + "-dark" + extension;
     return <img src={darkUri} alt="icon" className={"h-6 w-6 " + className} />;
   }