Skip to content
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions editor/app/(dev)/ui/components/degree/page.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import React, { useState } from "react";
import { TooltipProvider } from "@radix-ui/react-tooltip";
import { Tooltip as TooltipPrimitive } from "radix-ui";
import DegreeControl from "@/scaffolds/sidecontrol/controls/degree";
import { ComponentDemo } from "../component-demo";

Expand All @@ -11,7 +11,7 @@ export default function DegreeControlPage() {
const [disabledRotation, setDisabledRotation] = useState(45);

return (
<TooltipProvider>
<TooltipPrimitive.Provider>
<main className="container max-w-screen-lg mx-auto py-10">
<div className="space-y-8">
<div>
Expand Down Expand Up @@ -228,6 +228,6 @@ export default function DegreeControlPage() {
</section>
</div>
</main>
</TooltipProvider>
</TooltipPrimitive.Provider>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import React from "react";
import { ScreenRoot } from "@/theme/templates/kit/components";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { Dialog as DialogPrimitive } from "radix-ui";
import { Platform } from "@/lib/platform";
import InvitationPageTemplate from "@/theme/templates/enterprise/west-referral/invitation/page";
import InvitationCouponTemplate from "@/theme/templates/enterprise/west-referral/invitation/coupon";
Expand Down
6 changes: 3 additions & 3 deletions editor/components/data-table/data-table-view-options.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# First, locate and read the file
find . -name "data-table-view-options.tsx" -type f

Repository: gridaco/grida

Length of output: 115


🏁 Script executed:

#!/bin/bash
# Check the shadcn dropdown-menu component to see what it exports
find . -path "*/components/ui/dropdown-menu*" -type f | head -10

Repository: gridaco/grida

Length of output: 97


🏁 Script executed:

#!/bin/bash
# Look for the actual data-table-view-options file and examine its imports/usage
fd "data-table-view-options.tsx" --type f

Repository: gridaco/grida

Length of output: 113


🏁 Script executed:

#!/bin/bash
# Read the data-table-view-options.tsx file
cat -n editor/components/data-table/data-table-view-options.tsx

Repository: gridaco/grida

Length of output: 2114


🏁 Script executed:

#!/bin/bash
# Read the dropdown-menu.tsx file to check exports
cat -n editor/components/ui/dropdown-menu.tsx

Repository: gridaco/grida

Length of output: 10315


Use the shadcn DropdownMenuTrigger instead of the raw Radix primitive.

This file imports DropdownMenu as DropdownMenuPrimitive directly from "radix-ui" and uses DropdownMenuPrimitive.Trigger at lines 24 and 33, while using shadcn wrappers everywhere else (DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuCheckboxItem). The shadcn dropdown-menu module exports a DropdownMenuTrigger wrapper that should be used instead. Remove the raw Radix import and add DropdownMenuTrigger to the shadcn imports.

Proposed fix
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { Table } from "@tanstack/react-table";
 import { Settings2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuLabel,
   DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
     <DropdownMenu>
-      <DropdownMenuPrimitive.Trigger asChild>
+      <DropdownMenuTrigger asChild>
         <Button
           variant="outline"
           size="sm"
           className="ml-auto hidden h-8 lg:flex"
         >
           <Settings2 className="size-4" />
           View
         </Button>
-      </DropdownMenuPrimitive.Trigger>
+      </DropdownMenuTrigger>
🤖 Prompt for AI Agents
In `@editor/components/data-table/data-table-view-options.tsx` at line 3, The file
currently imports DropdownMenu as DropdownMenuPrimitive from "radix-ui" and uses
DropdownMenuPrimitive.Trigger; replace that by removing the raw Radix import and
instead import DropdownMenuTrigger from the shadcn dropdown-menu wrapper
alongside DropdownMenu, DropdownMenuContent, DropdownMenuLabel,
DropdownMenuSeparator, and DropdownMenuCheckboxItem, then update usages of
DropdownMenuPrimitive.Trigger to use DropdownMenuTrigger (keeping the rest of
the shadcn components unchanged).

import { Table } from "@tanstack/react-table";
import { Settings2 } from "lucide-react";
import { Button } from "@/components/ui/button";
Expand All @@ -21,7 +21,7 @@ export function DataTableViewOptions<TData>({
}: DataTableViewOptionsProps<TData>) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<DropdownMenuPrimitive.Trigger asChild>
<Button
variant="outline"
size="sm"
Expand All @@ -30,7 +30,7 @@ export function DataTableViewOptions<TData>({
<Settings2 className="size-4" />
View
</Button>
</DropdownMenuTrigger>
</DropdownMenuPrimitive.Trigger>
<DropdownMenuContent align="end" className="w-[150px]">
<DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
<DropdownMenuSeparator />
Expand Down
4 changes: 2 additions & 2 deletions editor/components/hooks/use-dialog-state.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Dialog } from "@radix-ui/react-dialog";
import { Dialog as DialogPrimitive } from "radix-ui";
import React from "react";
import { useState } from "react";

type DialogProps = React.ComponentProps<typeof Dialog>;
type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>;

export function useDialogState<T = any>(
name = "dialog",
Expand Down
29 changes: 10 additions & 19 deletions editor/components/mediaviewer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,21 @@ import React, {
createContext,
useContext,
useState,
ReactNode,
useEffect,
useCallback,
} from "react";
import {
Dialog,
DialogPortal,
DialogContent,
DialogClose,
DialogOverlay,
} from "@radix-ui/react-dialog";
import { Dialog as DialogPrimitive } from "radix-ui";
import {
Cross2Icon,
DownloadIcon,
ExitFullScreenIcon,
PlayIcon,
} from "@radix-ui/react-icons";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import { Menubar } from "@/components/ui/menubar";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { FileTypeIcon } from "@/components/form-field-type-icon";
import { PictureInPicture } from "@/components/pip";
import { AudioLinesIcon } from "lucide-react";
import { ContentAudio } from "./pip-audio-content";
import { wellkown } from "@/utils/mimetype";

Expand Down Expand Up @@ -161,15 +152,15 @@ export function MediaViewerProvider({ children }: React.PropsWithChildren) {
</PictureInPicture>
)}
{!isPip && (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogPortal>
<DialogOverlay className="fixed inset-0 bg-black/75 z-50" />
<DialogContent className="fixed inset-0 flex items-center justify-center z-50">
<DialogClose className="absolute top-4 right-4">
<DialogPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
<DialogPrimitive.Portal>
<DialogPrimitive.Overlay className="fixed inset-0 bg-black/75 z-50" />
<DialogPrimitive.Content className="fixed inset-0 flex items-center justify-center z-50">
<DialogPrimitive.Close className="absolute top-4 right-4">
<Button variant="outline" size="icon">
<Cross2Icon />
</Button>
</DialogClose>
</DialogPrimitive.Close>
<div className="w-full h-full p-10">
<StandaloneMediaView
mediaSrc={mediaSrc}
Expand Down Expand Up @@ -199,9 +190,9 @@ export function MediaViewerProvider({ children }: React.PropsWithChildren) {
</Button>
</Menubar>
</footer>
</DialogContent>
</DialogPortal>
</Dialog>
</DialogPrimitive.Content>
</DialogPrimitive.Portal>
</DialogPrimitive.Root>
)}
{children}
</MediaViewerContext.Provider>
Expand Down
15 changes: 8 additions & 7 deletions editor/components/monaco/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,16 @@ export function useMonacoTheme(
theme: "dark" | "light" | (string | {})
) {
const [themeloaded, setThemeLoaded] = useState(false);
// load theme initially
// load theme initially (from public/monaco-themes/grida-dark.json)
useEffect(() => {
if (!monaco) return;
import("monaco-themes/themes/Blackboard.json").then((data) => {
data.colors["editor.background"] = "#0D0D0D";
monaco.editor.defineTheme("dark", data as any);
monaco.editor.setTheme(theme === "dark" ? "dark" : "light");
setThemeLoaded(true);
});
fetch("/monaco-themes/grida-dark.json")
.then((res) => res.json())
.then((data) => {
monaco.editor.defineTheme("dark", data as any);
monaco.editor.setTheme(theme === "dark" ? "dark" : "light");
setThemeLoaded(true);
});
Comment on lines +16 to +22
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Missing error handling on theme fetch — silent failure.

If /monaco-themes/grida-dark.json fails to load (404, network error, invalid JSON), the promise rejects unhandled and setThemeLoaded(true) is never called. This means the second useEffect (line 27–31) that reacts to theme changes will be permanently gated by themeloaded === false, silently breaking all theme switching.

Add a .catch() to handle the failure gracefully — at minimum, still mark the theme as loaded so the light theme fallback works.

Proposed fix
     fetch("/monaco-themes/grida-dark.json")
       .then((res) => res.json())
       .then((data) => {
         monaco.editor.defineTheme("dark", data as any);
         monaco.editor.setTheme(theme === "dark" ? "dark" : "light");
         setThemeLoaded(true);
-      });
+      })
+      .catch((err) => {
+        console.error("Failed to load Monaco theme:", err);
+        // Still mark as loaded so light theme fallback works
+        monaco.editor.setTheme("light");
+        setThemeLoaded(true);
+      });
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
fetch("/monaco-themes/grida-dark.json")
.then((res) => res.json())
.then((data) => {
monaco.editor.defineTheme("dark", data as any);
monaco.editor.setTheme(theme === "dark" ? "dark" : "light");
setThemeLoaded(true);
});
fetch("/monaco-themes/grida-dark.json")
.then((res) => res.json())
.then((data) => {
monaco.editor.defineTheme("dark", data as any);
monaco.editor.setTheme(theme === "dark" ? "dark" : "light");
setThemeLoaded(true);
})
.catch((err) => {
console.error("Failed to load Monaco theme:", err);
// Still mark as loaded so light theme fallback works
monaco.editor.setTheme("light");
setThemeLoaded(true);
});
🤖 Prompt for AI Agents
In `@editor/components/monaco/index.tsx` around lines 16 - 22, The fetch for
"/monaco-themes/grida-dark.json" lacks error handling and can leave themeloaded
false; wrap the promise chain for monaco.editor.defineTheme and
monaco.editor.setTheme in a catch so any fetch/network/JSON error still calls
setThemeLoaded(true) and logs the error. Update the promise chain that currently
calls monaco.editor.defineTheme("dark", ...) and setThemeLoaded(true) to include
a .catch handler that calls setThemeLoaded(true) (so the light theme fallback
and the second useEffect can run) and optionally logs the error for debugging.

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [monaco]);

Expand Down
2 changes: 1 addition & 1 deletion editor/components/panels/side-panel.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as Dialog from "@radix-ui/react-dialog";
import { Dialog } from "radix-ui";
import React from "react";
import {
HoverCard,
Expand Down
4 changes: 2 additions & 2 deletions editor/components/ui-editor/button.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { Slot as SlotPrimitive } from "radix-ui";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/components/lib/utils/index";
Expand Down Expand Up @@ -46,7 +46,7 @@ function Button({
VariantProps<typeof buttonVariants> & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot : "button";
const Comp = asChild ? SlotPrimitive.Slot : "button";

return (
<Comp
Expand Down
2 changes: 1 addition & 1 deletion editor/components/ui-editor/checkbox.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import * as React from "react";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { Checkbox as CheckboxPrimitive } from "radix-ui";
import { CheckIcon } from "lucide-react";

import { cn } from "@/components/lib/utils/index";
Expand Down
2 changes: 1 addition & 1 deletion editor/components/ui-editor/dialog.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { Dialog as DialogPrimitive } from "radix-ui";
import { XIcon } from "lucide-react";
import {
Dialog,
Expand Down
2 changes: 1 addition & 1 deletion editor/components/ui-editor/progress.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import * as React from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress";
import { Progress as ProgressPrimitive } from "radix-ui";

import { cn } from "@/components/lib/utils/index";

Expand Down
2 changes: 1 addition & 1 deletion editor/components/ui-editor/sidebar-tabs.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { Tabs as TabsPrimitive } from "radix-ui";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/components/lib/utils/index";

Expand Down
4 changes: 2 additions & 2 deletions editor/components/ui-editor/tree.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import * as React from "react";
import { ItemInstance } from "@headless-tree/core";
import { Slot } from "@radix-ui/react-slot";
import { Slot as SlotPrimitive } from "radix-ui";
import { ChevronDownIcon } from "@radix-ui/react-icons";
import { cn } from "@/components/lib/utils/index";

Expand Down Expand Up @@ -82,7 +82,7 @@ function TreeItem<T = any>({
"--tree-padding": `${item.getItemMeta().level * indent}px`,
} as React.CSSProperties;

const Comp = asChild ? Slot : "div";
const Comp = asChild ? SlotPrimitive.Slot : "div";

return (
<TreeContext.Provider value={{ indent, currentItem: item }}>
Expand Down
2 changes: 1 addition & 1 deletion editor/components/ui/accordion.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { Accordion as AccordionPrimitive } from "radix-ui";
import { ChevronDownIcon } from "lucide-react";

import { cn } from "@/components/lib/utils/index";
Expand Down
2 changes: 1 addition & 1 deletion editor/components/ui/alert-dialog.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import * as React from "react";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
import { AlertDialog as AlertDialogPrimitive } from "radix-ui";

import { cn } from "@/components/lib/utils/index";
import { buttonVariants } from "@/components/ui/button";
Expand Down
2 changes: 1 addition & 1 deletion editor/components/ui/aspect-ratio.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
import { AspectRatio as AspectRatioPrimitive } from "radix-ui";

function AspectRatio({
...props
Expand Down
2 changes: 1 addition & 1 deletion editor/components/ui/avatar.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import * as React from "react";
import * as AvatarPrimitive from "@radix-ui/react-avatar";
import { Avatar as AvatarPrimitive } from "radix-ui";

import { cn } from "@/components/lib/utils/index";

Expand Down
4 changes: 2 additions & 2 deletions editor/components/ui/badge.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { Slot as SlotPrimitive } from "radix-ui";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/components/lib/utils/index";
Expand Down Expand Up @@ -32,7 +32,7 @@ function Badge({
...props
}: React.ComponentProps<"span"> &
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "span";
const Comp = asChild ? SlotPrimitive.Slot : "span";

return (
<Comp
Expand Down
4 changes: 2 additions & 2 deletions editor/components/ui/breadcrumb.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { Slot as SlotPrimitive } from "radix-ui";
import { cn } from "@/components/lib/utils/index";
import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";

Expand Down Expand Up @@ -37,7 +37,7 @@ function BreadcrumbLink({
}: React.ComponentProps<"a"> & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot : "a";
const Comp = asChild ? SlotPrimitive.Slot : "a";

return (
<Comp
Expand Down
4 changes: 2 additions & 2 deletions editor/components/ui/button-group.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Slot } from "@radix-ui/react-slot";
import { Slot as SlotPrimitive } from "radix-ui";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/components/lib/utils/index";
Expand Down Expand Up @@ -44,7 +44,7 @@ function ButtonGroupText({
}: React.ComponentProps<"div"> & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot : "div";
const Comp = asChild ? SlotPrimitive.Slot : "div";

return (
<Comp
Expand Down
4 changes: 2 additions & 2 deletions editor/components/ui/button.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { Slot as SlotPrimitive } from "radix-ui";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/components/lib/utils/index";
Expand Down Expand Up @@ -46,7 +46,7 @@ function Button({
VariantProps<typeof buttonVariants> & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot : "button";
const Comp = asChild ? SlotPrimitive.Slot : "button";

return (
<Comp
Expand Down
2 changes: 1 addition & 1 deletion editor/components/ui/checkbox.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import * as React from "react";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { Checkbox as CheckboxPrimitive } from "radix-ui";
import { CheckIcon } from "lucide-react";

import { cn } from "@/components/lib/utils/index";
Expand Down
2 changes: 1 addition & 1 deletion editor/components/ui/collapsible.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
import { Collapsible as CollapsiblePrimitive } from "radix-ui";

function Collapsible({
...props
Expand Down
2 changes: 1 addition & 1 deletion editor/components/ui/context-menu.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import * as React from "react";
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";

import { cn } from "@/components/lib/utils/index";
Expand Down
2 changes: 1 addition & 1 deletion editor/components/ui/dialog.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { Dialog as DialogPrimitive } from "radix-ui";
import { XIcon } from "lucide-react";

import { cn } from "@/components/lib/utils/index";
Expand Down
2 changes: 1 addition & 1 deletion editor/components/ui/dropdown-menu.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import * as React from "react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";

import { cn } from "@/components/lib/utils/index";
Expand Down
Loading
Loading