From f560354d668d67af1d3f49f446f73787ffffaf0f Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 14 Feb 2024 12:37:23 +0100
Subject: [PATCH 1/7] context menu

---
 .../components/projectActionContextMenu.tsx   | 160 ++++++++++++++++++
 utopia-remix/app/routes/projects.tsx          |  53 +++---
 utopia-remix/app/util/links.ts                |   9 +
 utopia-remix/package.json                     |   1 +
 utopia-remix/pnpm-lock.yaml                   |  18 ++
 5 files changed, 209 insertions(+), 32 deletions(-)
 create mode 100644 utopia-remix/app/components/projectActionContextMenu.tsx
 create mode 100644 utopia-remix/app/util/links.ts

diff --git a/utopia-remix/app/components/projectActionContextMenu.tsx b/utopia-remix/app/components/projectActionContextMenu.tsx
new file mode 100644
index 000000000000..ae194bcaea27
--- /dev/null
+++ b/utopia-remix/app/components/projectActionContextMenu.tsx
@@ -0,0 +1,160 @@
+import { useFetcher } from '@remix-run/react'
+import React from 'react'
+import { Item, Menu, Separator, useContextMenu } from 'react-contexify'
+import { Category } from '../routes/projects'
+import { ProjectWithoutContent } from '../types'
+import { assertNever } from '../util/assertNever'
+import { projectEditorLink } from '../util/links'
+
+const CONTEXT_MENU_ID = 'context-menu'
+
+type ContextMenuAction = 'delete' | 'destroy' | 'restore' | 'open' | 'copy-link' | 'fork' | 'rename'
+
+type ContextMenuEntry =
+  | {
+      id: ContextMenuAction
+      text: string
+      onClick: (params: {
+        id: ContextMenuAction
+        props: { project: ProjectWithoutContent }
+      }) => void
+    }
+  | 'separator'
+
+export const ProjectContextMenu = React.memo(
+  ({ selectedCategory }: { selectedCategory: Category }) => {
+    const fetcher = useFetcher()
+
+    const deleteProject = React.useCallback(
+      (projectId: string) => {
+        fetcher.submit({}, { method: 'POST', action: `/internal/projects/${projectId}/delete` })
+      },
+      [fetcher],
+    )
+
+    const destroyProject = React.useCallback(
+      (projectId: string) => {
+        const ok = window.confirm('Are you sure? The project contents will be deleted permanently.')
+        if (ok) {
+          fetcher.submit({}, { method: 'POST', action: `/internal/projects/${projectId}/destroy` })
+        }
+      },
+      [fetcher],
+    )
+
+    const restoreProject = React.useCallback(
+      (projectId: string) => {
+        fetcher.submit({}, { method: 'POST', action: `/internal/projects/${projectId}/restore` })
+      },
+      [fetcher],
+    )
+
+    const renameProject = React.useCallback(
+      (projectId: string, newTitle: string) => {
+        fetcher.submit(
+          { title: newTitle },
+          { method: 'POST', action: `/internal/projects/${projectId}/rename` },
+        )
+      },
+      [fetcher],
+    )
+
+    const menuEntries = React.useMemo((): ContextMenuEntry[] => {
+      switch (selectedCategory) {
+        case 'allProjects':
+          return [
+            {
+              id: 'open',
+              text: 'Open',
+              onClick: (params) => {
+                window.open(projectEditorLink(params.props.project.proj_id), '_blank')
+              },
+            },
+            'separator',
+            {
+              id: 'copy-link',
+              text: 'Copy Link',
+              onClick: (params) => {
+                navigator.clipboard.writeText(projectEditorLink(params.props.project.proj_id))
+                // TODO notification toast
+              },
+            },
+            //   {
+            //     id: 'share',
+            //     text: 'Share',
+            //     onClick: (params) => {},
+            //   },
+            //   {
+            //     id: 'fork',
+            //     text: 'Fork',
+            //     onClick: (params) => {},
+            //   },
+            'separator',
+            {
+              id: 'rename',
+              text: 'Rename',
+              onClick: (params) => {
+                const newTitle = window.prompt('New title:', params.props.project.title)
+                if (newTitle != null) {
+                  renameProject(params.props.project.proj_id, newTitle)
+                }
+              },
+            },
+            {
+              id: 'delete',
+              text: 'Delete',
+              onClick: (params) => {
+                deleteProject(params.props.project.proj_id)
+              },
+            },
+          ]
+        case 'trash':
+          return [
+            {
+              id: 'restore',
+              text: 'Restore',
+              onClick: (params) => {
+                restoreProject(params.props.project.proj_id)
+              },
+            },
+            'separator',
+            {
+              id: 'destroy',
+              text: 'Delete permanently',
+              onClick: (params) => {
+                destroyProject(params.props.project.proj_id)
+              },
+            },
+          ]
+        default:
+          assertNever(selectedCategory)
+      }
+    }, [selectedCategory])
+
+    return (
+      <>
+        <Menu id={CONTEXT_MENU_ID}>
+          {menuEntries.map((entry, index) => {
+            if (entry === 'separator') {
+              return <Separator key={`separator-${index}`} />
+            }
+            return (
+              <Item key={entry.id} id={entry.id} onClick={entry.onClick as any}>
+                {entry.text}
+              </Item>
+            )
+          })}
+        </Menu>
+        <fetcher.Form />
+      </>
+    )
+  },
+)
+ProjectContextMenu.displayName = 'ActionMenu'
+
+export function useProjectContextMenu() {
+  const contextMenu = useContextMenu({
+    id: CONTEXT_MENU_ID,
+  })
+  return { showProjectContextMenu: contextMenu.show }
+}
diff --git a/utopia-remix/app/routes/projects.tsx b/utopia-remix/app/routes/projects.tsx
index 48620a2328cd..9686f34360b9 100644
--- a/utopia-remix/app/routes/projects.tsx
+++ b/utopia-remix/app/routes/projects.tsx
@@ -1,16 +1,20 @@
 import { LoaderFunctionArgs, json } from '@remix-run/node'
-import { useFetcher, useLoaderData } from '@remix-run/react'
+import { useLoaderData } from '@remix-run/react'
 import moment from 'moment'
 import { UserDetails } from 'prisma-client'
 import React, { useEffect, useState } from 'react'
+import { ProjectContextMenu, useProjectContextMenu } from '../components/projectActionContextMenu'
 import { listDeletedProjects, listProjects } from '../models/project.server'
+import { button } from '../styles/button.css'
 import { newProjectButton } from '../styles/newProjectButton.css'
 import { projectCategoryButton, userName } from '../styles/sidebarComponents.css'
 import { sprinkles } from '../styles/sprinkles.css'
-import { requireUser } from '../util/api.server'
 import { ProjectWithoutContent } from '../types'
+import { requireUser } from '../util/api.server'
 import { assertNever } from '../util/assertNever'
-import { button } from '../styles/button.css'
+import { projectEditorLink } from '../util/links'
+
+import 'react-contexify/ReactContexify.css'
 
 export async function loader(args: LoaderFunctionArgs) {
   const user = await requireUser(args.request)
@@ -38,6 +42,7 @@ const categories: { [key in Category]: { name: string } } = {
   allProjects: { name: 'All My Projects' },
   trash: { name: 'Trash' },
 }
+
 const ProjectsPage = React.memo(() => {
   const marginSize = 30
   const rowHeight = 30
@@ -104,7 +109,7 @@ const ProjectsPage = React.memo(() => {
   }, [searchValue, projects])
 
   const createNewProject = () => {
-    window.open(`${window.ENV.EDITOR_URL}/project/`, '_blank')
+    window.open(projectEditorLink(null), '_blank')
   }
 
   const newProjectButtons = [
@@ -154,7 +159,7 @@ const ProjectsPage = React.memo(() => {
     }
   }, [])
 
-  const logoPic = isDarkMode ? 'url(assets/pyramid_dark.png)' : 'url(assets/pyramid_light.png)'
+  const logoPic = isDarkMode ? 'url(/assets/pyramid_dark.png)' : 'url(/assets/pyramid_light.png)'
 
   return (
     <div
@@ -339,6 +344,7 @@ const ProjectsPage = React.memo(() => {
           ))}
         </div>
       </div>
+      <ProjectContextMenu selectedCategory={selectedCategory} />
     </div>
   )
 })
@@ -354,7 +360,7 @@ type ProjectCardProps = {
 
 const ProjectCard: React.FC<ProjectCardProps> = ({ project, selected, onSelect }) => {
   const openProject = React.useCallback(() => {
-    window.open(`${window.ENV.EDITOR_URL}/p/${project.proj_id}`, '_blank')
+    window.open(projectEditorLink(project.proj_id), '_blank')
   }, [project.proj_id])
 
   return (
@@ -387,25 +393,14 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project, selected, onSelect }
 }
 
 const ProjectActions = React.memo(({ project }: { project: ProjectWithoutContent }) => {
-  const fetcher = useFetcher()
-
-  const deleteProject = React.useCallback(() => {
-    if (project.deleted === true) {
-      const ok = window.confirm('Are you sure? The project contents will be deleted permanently.')
-      if (ok) {
-        fetcher.submit(
-          {},
-          { method: 'POST', action: `/internal/projects/${project.proj_id}/destroy` },
-        )
-      }
-    } else {
-      fetcher.submit({}, { method: 'POST', action: `/internal/projects/${project.proj_id}/delete` })
-    }
-  }, [fetcher])
+  const { showProjectContextMenu } = useProjectContextMenu()
 
-  const restoreProject = React.useCallback(() => {
-    fetcher.submit({}, { method: 'POST', action: `/internal/projects/${project.proj_id}/restore` })
-  }, [fetcher])
+  const openProjectContextMenu = React.useCallback(
+    (event: React.MouseEvent) => {
+      showProjectContextMenu({ event: event, props: { project: project } })
+    },
+    [showProjectContextMenu],
+  )
 
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -414,15 +409,9 @@ const ProjectActions = React.memo(({ project }: { project: ProjectWithoutContent
         <div>{moment(project.modified_at).fromNow()}</div>
       </div>
       <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-        {project.deleted === true ? (
-          <button className={button({ size: 'small' })} onClick={restoreProject}>
-            Restore
-          </button>
-        ) : null}
-        <button className={button({ color: 'danger', size: 'small' })} onClick={deleteProject}>
-          Delete
+        <button className={button({ size: 'small' })} onClick={openProjectContextMenu}>
+          …
         </button>
-        <fetcher.Form />
       </div>
     </div>
   )
diff --git a/utopia-remix/app/util/links.ts b/utopia-remix/app/util/links.ts
new file mode 100644
index 000000000000..a89ed568f6b5
--- /dev/null
+++ b/utopia-remix/app/util/links.ts
@@ -0,0 +1,9 @@
+import urlJoin from 'url-join'
+
+export function projectEditorLink(projectId: string | null): string {
+  const editorURL = window.ENV.EDITOR_URL
+  if (editorURL == null) {
+    throw new Error('missing editor url')
+  }
+  return urlJoin(editorURL, 'project', projectId ?? '')
+}
diff --git a/utopia-remix/package.json b/utopia-remix/package.json
index 1b8f8964183c..3f999820b51c 100644
--- a/utopia-remix/package.json
+++ b/utopia-remix/package.json
@@ -25,6 +25,7 @@
     "moment": "2.30.1",
     "prisma-client": "link:node_modules/@utopia/prisma-client",
     "react": "18.2.0",
+    "react-contexify": "6.0.0",
     "react-dom": "18.2.0",
     "slugify": "1.6.6",
     "tiny-invariant": "1.3.1",
diff --git a/utopia-remix/pnpm-lock.yaml b/utopia-remix/pnpm-lock.yaml
index c2c7f4f3b1ec..63bb0f1079ef 100644
--- a/utopia-remix/pnpm-lock.yaml
+++ b/utopia-remix/pnpm-lock.yaml
@@ -35,6 +35,7 @@ specifiers:
   prisma: 5.9.0
   prisma-client: link:node_modules/@utopia/prisma-client
   react: 18.2.0
+  react-contexify: 6.0.0
   react-dom: 18.2.0
   slugify: 1.6.6
   tiny-invariant: 1.3.1
@@ -54,6 +55,7 @@ dependencies:
   moment: 2.30.1
   prisma-client: link:node_modules/@utopia/prisma-client
   react: 18.2.0
+  react-contexify: 6.0.0_biqbaboplfbrettd7655fr4n2y
   react-dom: 18.2.0_react@18.2.0
   slugify: 1.6.6
   tiny-invariant: 1.3.1
@@ -3615,6 +3617,11 @@ packages:
     engines: {node: '>=0.8'}
     dev: true
 
+  /clsx/1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /co/4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -7329,6 +7336,17 @@ packages:
       iconv-lite: 0.4.24
       unpipe: 1.0.0
 
+  /react-contexify/6.0.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-jMhz6yZI81Jv3UDj7TXqCkhdkCFEEmvwGCPXsQuA2ZUC8EbCuVQ6Cy8FzKMXa0y454XTDClBN2YFvvmoFlrFkg==}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+    dependencies:
+      clsx: 1.2.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /react-dom/18.2.0_react@18.2.0:
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:

From bedfef525409cd9afa91038388ce3c16575dcd25 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 14 Feb 2024 12:44:21 +0100
Subject: [PATCH 2/7] remove unused

---
 utopia-remix/app/components/projectActionContextMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/utopia-remix/app/components/projectActionContextMenu.tsx b/utopia-remix/app/components/projectActionContextMenu.tsx
index ae194bcaea27..01f1d1ff1643 100644
--- a/utopia-remix/app/components/projectActionContextMenu.tsx
+++ b/utopia-remix/app/components/projectActionContextMenu.tsx
@@ -8,7 +8,7 @@ import { projectEditorLink } from '../util/links'
 
 const CONTEXT_MENU_ID = 'context-menu'
 
-type ContextMenuAction = 'delete' | 'destroy' | 'restore' | 'open' | 'copy-link' | 'fork' | 'rename'
+type ContextMenuAction = 'delete' | 'destroy' | 'restore' | 'open' | 'copy-link' | 'rename' // | 'fork' | 'share'
 
 type ContextMenuEntry =
   | {

From d8d67b1b4f768bdc295c57190c24856451d39cbe Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 14 Feb 2024 13:52:49 +0100
Subject: [PATCH 3/7] use radix

---
 .../components/projectActionContextMenu.tsx   | 110 +--
 utopia-remix/app/radix-fix.css                |   4 +
 utopia-remix/app/root.tsx                     |   2 +
 utopia-remix/app/routes/projects.tsx          |  65 +-
 .../app/styles/contextMenuItem.css.ts         |  16 +
 utopia-remix/package.json                     |   4 +-
 utopia-remix/pnpm-lock.yaml                   | 669 +++++++++++++++++-
 7 files changed, 763 insertions(+), 107 deletions(-)
 create mode 100644 utopia-remix/app/radix-fix.css
 create mode 100644 utopia-remix/app/styles/contextMenuItem.css.ts

diff --git a/utopia-remix/app/components/projectActionContextMenu.tsx b/utopia-remix/app/components/projectActionContextMenu.tsx
index 01f1d1ff1643..90a89b72aa20 100644
--- a/utopia-remix/app/components/projectActionContextMenu.tsx
+++ b/utopia-remix/app/components/projectActionContextMenu.tsx
@@ -1,28 +1,28 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+
 import { useFetcher } from '@remix-run/react'
 import React from 'react'
-import { Item, Menu, Separator, useContextMenu } from 'react-contexify'
 import { Category } from '../routes/projects'
 import { ProjectWithoutContent } from '../types'
 import { assertNever } from '../util/assertNever'
 import { projectEditorLink } from '../util/links'
-
-const CONTEXT_MENU_ID = 'context-menu'
-
-type ContextMenuAction = 'delete' | 'destroy' | 'restore' | 'open' | 'copy-link' | 'rename' // | 'fork' | 'share'
+import { contextMenuItem } from '../styles/contextMenuItem.css'
 
 type ContextMenuEntry =
   | {
-      id: ContextMenuAction
       text: string
-      onClick: (params: {
-        id: ContextMenuAction
-        props: { project: ProjectWithoutContent }
-      }) => void
+      onClick: (project: ProjectWithoutContent) => void
     }
   | 'separator'
 
 export const ProjectContextMenu = React.memo(
-  ({ selectedCategory }: { selectedCategory: Category }) => {
+  ({
+    selectedCategory,
+    project,
+  }: {
+    selectedCategory: Category
+    project: ProjectWithoutContent
+  }) => {
     const fetcher = useFetcher()
 
     const deleteProject = React.useCallback(
@@ -64,65 +64,59 @@ export const ProjectContextMenu = React.memo(
         case 'allProjects':
           return [
             {
-              id: 'open',
               text: 'Open',
-              onClick: (params) => {
-                window.open(projectEditorLink(params.props.project.proj_id), '_blank')
+              onClick: (project) => {
+                window.open(projectEditorLink(project.proj_id), '_blank')
               },
             },
             'separator',
             {
-              id: 'copy-link',
               text: 'Copy Link',
-              onClick: (params) => {
-                navigator.clipboard.writeText(projectEditorLink(params.props.project.proj_id))
+              onClick: (project) => {
+                navigator.clipboard.writeText(projectEditorLink(project.proj_id))
                 // TODO notification toast
               },
             },
             //   {
             //     id: 'share',
             //     text: 'Share',
-            //     onClick: (params) => {},
+            //     onClick: (project) => {},
             //   },
             //   {
             //     id: 'fork',
             //     text: 'Fork',
-            //     onClick: (params) => {},
+            //     onClick: (project) => {},
             //   },
             'separator',
             {
-              id: 'rename',
               text: 'Rename',
-              onClick: (params) => {
-                const newTitle = window.prompt('New title:', params.props.project.title)
+              onClick: (project) => {
+                const newTitle = window.prompt('New title:', project.title)
                 if (newTitle != null) {
-                  renameProject(params.props.project.proj_id, newTitle)
+                  renameProject(project.proj_id, newTitle)
                 }
               },
             },
             {
-              id: 'delete',
               text: 'Delete',
-              onClick: (params) => {
-                deleteProject(params.props.project.proj_id)
+              onClick: (project) => {
+                deleteProject(project.proj_id)
               },
             },
           ]
         case 'trash':
           return [
             {
-              id: 'restore',
               text: 'Restore',
-              onClick: (params) => {
-                restoreProject(params.props.project.proj_id)
+              onClick: (project) => {
+                restoreProject(project.proj_id)
               },
             },
             'separator',
             {
-              id: 'destroy',
               text: 'Delete permanently',
-              onClick: (params) => {
-                destroyProject(params.props.project.proj_id)
+              onClick: (project) => {
+                destroyProject(project.proj_id)
               },
             },
           ]
@@ -133,28 +127,40 @@ export const ProjectContextMenu = React.memo(
 
     return (
       <>
-        <Menu id={CONTEXT_MENU_ID}>
-          {menuEntries.map((entry, index) => {
-            if (entry === 'separator') {
-              return <Separator key={`separator-${index}`} />
-            }
-            return (
-              <Item key={entry.id} id={entry.id} onClick={entry.onClick as any}>
-                {entry.text}
-              </Item>
-            )
-          })}
-        </Menu>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content
+            style={{
+              background: 'white',
+              padding: 10,
+              boxShadow: '2px 3px 4px #dddddd',
+              border: '1px solid #ccc',
+              borderRadius: 4,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 4,
+            }}
+            sideOffset={5}
+          >
+            {menuEntries.map((entry, index) => {
+              if (entry === 'separator') {
+                return <DropdownMenu.Separator key={`separator-${index}`} />
+              }
+              return (
+                <DropdownMenu.Item
+                  key={`entry-${index}`}
+                  onClick={() => entry.onClick(project)}
+                  className={contextMenuItem()}
+                >
+                  {entry.text}
+                </DropdownMenu.Item>
+              )
+            })}
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+
         <fetcher.Form />
       </>
     )
   },
 )
-ProjectContextMenu.displayName = 'ActionMenu'
-
-export function useProjectContextMenu() {
-  const contextMenu = useContextMenu({
-    id: CONTEXT_MENU_ID,
-  })
-  return { showProjectContextMenu: contextMenu.show }
-}
+ProjectContextMenu.displayName = 'ProjectContextMenu'
diff --git a/utopia-remix/app/radix-fix.css b/utopia-remix/app/radix-fix.css
new file mode 100644
index 000000000000..337882ba3f05
--- /dev/null
+++ b/utopia-remix/app/radix-fix.css
@@ -0,0 +1,4 @@
+body {
+	border: 1px solid transparent; /* Fix jumpy content when opening dropdowns */
+}
+
diff --git a/utopia-remix/app/root.tsx b/utopia-remix/app/root.tsx
index b8cd7ed702b2..aa71290b5002 100644
--- a/utopia-remix/app/root.tsx
+++ b/utopia-remix/app/root.tsx
@@ -14,6 +14,8 @@ import {
 import { BrowserEnvironment } from './env.server'
 import { styles } from './styles/styles.css'
 
+import './radix-fix.css'
+
 declare global {
   interface Window {
     ENV: BrowserEnvironment
diff --git a/utopia-remix/app/routes/projects.tsx b/utopia-remix/app/routes/projects.tsx
index 9686f34360b9..bdec888748cd 100644
--- a/utopia-remix/app/routes/projects.tsx
+++ b/utopia-remix/app/routes/projects.tsx
@@ -3,9 +3,8 @@ import { useLoaderData } from '@remix-run/react'
 import moment from 'moment'
 import { UserDetails } from 'prisma-client'
 import React, { useEffect, useState } from 'react'
-import { ProjectContextMenu, useProjectContextMenu } from '../components/projectActionContextMenu'
+import { ProjectContextMenu } from '../components/projectActionContextMenu'
 import { listDeletedProjects, listProjects } from '../models/project.server'
-import { button } from '../styles/button.css'
 import { newProjectButton } from '../styles/newProjectButton.css'
 import { projectCategoryButton, userName } from '../styles/sidebarComponents.css'
 import { sprinkles } from '../styles/sprinkles.css'
@@ -14,7 +13,7 @@ import { requireUser } from '../util/api.server'
 import { assertNever } from '../util/assertNever'
 import { projectEditorLink } from '../util/links'
 
-import 'react-contexify/ReactContexify.css'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
 export async function loader(args: LoaderFunctionArgs) {
   const user = await requireUser(args.request)
@@ -340,11 +339,11 @@ const ProjectsPage = React.memo(() => {
               project={project}
               selected={project.proj_id === selectedProject.selectedProjectId}
               onSelect={() => handleProjectSelect(project.proj_id)}
+              selectedCategory={selectedCategory}
             />
           ))}
         </div>
       </div>
-      <ProjectContextMenu selectedCategory={selectedCategory} />
     </div>
   )
 })
@@ -356,9 +355,15 @@ type ProjectCardProps = {
   project: ProjectWithoutContent
   selected: boolean
   onSelect: () => void
+  selectedCategory: Category
 }
 
-const ProjectCard: React.FC<ProjectCardProps> = ({ project, selected, onSelect }) => {
+const ProjectCard: React.FC<ProjectCardProps> = ({
+  project,
+  selected,
+  onSelect,
+  selectedCategory,
+}) => {
   const openProject = React.useCallback(() => {
     window.open(projectEditorLink(project.proj_id), '_blank')
   }, [project.proj_id])
@@ -387,33 +392,35 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project, selected, onSelect }
         onMouseDown={onSelect}
         onDoubleClick={openProject}
       />
-      <ProjectActions project={project} />
+      <ProjectActions project={project} selectedCategory={selectedCategory} />
     </div>
   )
 }
 
-const ProjectActions = React.memo(({ project }: { project: ProjectWithoutContent }) => {
-  const { showProjectContextMenu } = useProjectContextMenu()
-
-  const openProjectContextMenu = React.useCallback(
-    (event: React.MouseEvent) => {
-      showProjectContextMenu({ event: event, props: { project: project } })
-    },
-    [showProjectContextMenu],
-  )
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center' }}>
-      <div style={{ display: 'flex', flexDirection: 'column', padding: 10, gap: 5, flex: 1 }}>
-        <div style={{ fontWeight: 600 }}>{project.title}</div>
-        <div>{moment(project.modified_at).fromNow()}</div>
-      </div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-        <button className={button({ size: 'small' })} onClick={openProjectContextMenu}>
-          …
-        </button>
+const ProjectActions = React.memo(
+  ({
+    project,
+    selectedCategory,
+  }: {
+    project: ProjectWithoutContent
+    selectedCategory: Category
+  }) => {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', padding: 10, gap: 5, flex: 1 }}>
+          <div style={{ fontWeight: 600 }}>{project.title}</div>
+          <div>{moment(project.modified_at).fromNow()}</div>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <button>…</button>
+            </DropdownMenu.Trigger>
+            <ProjectContextMenu selectedCategory={selectedCategory} project={project} />
+          </DropdownMenu.Root>
+        </div>
       </div>
-    </div>
-  )
-})
+    )
+  },
+)
 ProjectActions.displayName = 'ProjectActions'
diff --git a/utopia-remix/app/styles/contextMenuItem.css.ts b/utopia-remix/app/styles/contextMenuItem.css.ts
new file mode 100644
index 000000000000..0ed5191f994c
--- /dev/null
+++ b/utopia-remix/app/styles/contextMenuItem.css.ts
@@ -0,0 +1,16 @@
+import { recipe } from '@vanilla-extract/recipes'
+import { sprinkles } from './sprinkles.css'
+
+export const contextMenuItem = recipe({
+  base: [
+    sprinkles({
+      borderRadius: 'small',
+      color: 'lightModeBlack',
+    }),
+    {
+      padding: '4px 4px',
+      cursor: 'default',
+      border: 'none',
+    },
+  ],
+})
diff --git a/utopia-remix/package.json b/utopia-remix/package.json
index 3f999820b51c..e7963c6c9b95 100644
--- a/utopia-remix/package.json
+++ b/utopia-remix/package.json
@@ -15,6 +15,9 @@
   },
   "dependencies": {
     "@prisma/client": "5.9.0",
+    "@radix-ui/react-context-menu": "2.1.5",
+    "@radix-ui/react-dropdown-menu": "2.0.6",
+    "@radix-ui/react-icons": "1.3.0",
     "@remix-run/css-bundle": "2.5.1",
     "@remix-run/node": "2.5.1",
     "@remix-run/react": "2.5.1",
@@ -25,7 +28,6 @@
     "moment": "2.30.1",
     "prisma-client": "link:node_modules/@utopia/prisma-client",
     "react": "18.2.0",
-    "react-contexify": "6.0.0",
     "react-dom": "18.2.0",
     "slugify": "1.6.6",
     "tiny-invariant": "1.3.1",
diff --git a/utopia-remix/pnpm-lock.yaml b/utopia-remix/pnpm-lock.yaml
index 63bb0f1079ef..4918e009db6c 100644
--- a/utopia-remix/pnpm-lock.yaml
+++ b/utopia-remix/pnpm-lock.yaml
@@ -4,6 +4,9 @@ specifiers:
   '@babel/core': 7.23.9
   '@babel/preset-env': 7.23.9
   '@prisma/client': 5.9.0
+  '@radix-ui/react-context-menu': 2.1.5
+  '@radix-ui/react-dropdown-menu': 2.0.6
+  '@radix-ui/react-icons': 1.3.0
   '@remix-run/css-bundle': 2.5.1
   '@remix-run/dev': 2.5.1
   '@remix-run/node': 2.5.1
@@ -35,7 +38,6 @@ specifiers:
   prisma: 5.9.0
   prisma-client: link:node_modules/@utopia/prisma-client
   react: 18.2.0
-  react-contexify: 6.0.0
   react-dom: 18.2.0
   slugify: 1.6.6
   tiny-invariant: 1.3.1
@@ -45,6 +47,9 @@ specifiers:
 
 dependencies:
   '@prisma/client': 5.9.0_prisma@5.9.0
+  '@radix-ui/react-context-menu': 2.1.5_gltvt74xzh7f5lvw2hzxriz5bu
+  '@radix-ui/react-dropdown-menu': 2.0.6_gltvt74xzh7f5lvw2hzxriz5bu
+  '@radix-ui/react-icons': 1.3.0_react@18.2.0
   '@remix-run/css-bundle': 2.5.1
   '@remix-run/node': 2.5.1_typescript@5.1.6
   '@remix-run/react': 2.5.1_i4rjfizg7pnsmg7p6yi76gfzdq
@@ -55,7 +60,6 @@ dependencies:
   moment: 2.30.1
   prisma-client: link:node_modules/@utopia/prisma-client
   react: 18.2.0
-  react-contexify: 6.0.0_biqbaboplfbrettd7655fr4n2y
   react-dom: 18.2.0_react@18.2.0
   slugify: 1.6.6
   tiny-invariant: 1.3.1
@@ -1296,7 +1300,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.14.1
-    dev: true
 
   /@babel/template/7.23.9:
     resolution: {integrity: sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==}
@@ -1791,6 +1794,34 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@floating-ui/core/1.6.0:
+    resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
+    dependencies:
+      '@floating-ui/utils': 0.2.1
+    dev: false
+
+  /@floating-ui/dom/1.6.3:
+    resolution: {integrity: sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==}
+    dependencies:
+      '@floating-ui/core': 1.6.0
+      '@floating-ui/utils': 0.2.1
+    dev: false
+
+  /@floating-ui/react-dom/2.0.8_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/dom': 1.6.3
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@floating-ui/utils/0.2.1:
+    resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
+    dev: false
+
   /@humanwhocodes/config-array/0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -2231,6 +2262,507 @@ packages:
     dependencies:
       '@prisma/debug': 5.9.0
 
+  /@radix-ui/primitive/1.0.1:
+    resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
+    dependencies:
+      '@babel/runtime': 7.23.9
+    dev: false
+
+  /@radix-ui/react-arrow/1.0.3_gltvt74xzh7f5lvw2hzxriz5bu:
+    resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/react-primitive': 1.0.3_gltvt74xzh7f5lvw2hzxriz5bu
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-collection/1.0.3_gltvt74xzh7f5lvw2hzxriz5bu:
+    resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/react-compose-refs': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-context': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-primitive': 1.0.3_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-slot': 1.0.2_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-compose-refs/1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@types/react': 18.2.20
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-context-menu/2.1.5_gltvt74xzh7f5lvw2hzxriz5bu:
+    resolution: {integrity: sha512-R5XaDj06Xul1KGb+WP8qiOh7tKJNz2durpLBXAGZjSVtctcRFCuEvy2gtMwRJGePwQQE5nV77gs4FwRi8T+r2g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-context': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-menu': 2.0.6_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-primitive': 1.0.3_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-use-callback-ref': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-use-controllable-state': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-context/1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@types/react': 18.2.20
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-direction/1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@types/react': 18.2.20
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-dismissable-layer/1.0.5_gltvt74xzh7f5lvw2hzxriz5bu:
+    resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-primitive': 1.0.3_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-use-callback-ref': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-use-escape-keydown': 1.0.3_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-dropdown-menu/2.0.6_gltvt74xzh7f5lvw2hzxriz5bu:
+    resolution: {integrity: sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-context': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-id': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-menu': 2.0.6_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-primitive': 1.0.3_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-use-controllable-state': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-focus-guards/1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@types/react': 18.2.20
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-focus-scope/1.0.4_gltvt74xzh7f5lvw2hzxriz5bu:
+    resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/react-compose-refs': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-primitive': 1.0.3_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-use-callback-ref': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-icons/1.3.0_react@18.2.0:
+    resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
+    peerDependencies:
+      react: ^16.x || ^17.x || ^18.x
+    dependencies:
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-id/1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/react-use-layout-effect': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@types/react': 18.2.20
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-menu/2.0.6_gltvt74xzh7f5lvw2hzxriz5bu:
+    resolution: {integrity: sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-compose-refs': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-context': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-direction': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-dismissable-layer': 1.0.5_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-focus-guards': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-focus-scope': 1.0.4_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-id': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-popper': 1.1.3_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-portal': 1.0.4_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-presence': 1.0.1_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-primitive': 1.0.3_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-roving-focus': 1.0.4_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-slot': 1.0.2_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-use-callback-ref': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-remove-scroll: 2.5.5_j3ahe22lw6ac2w6qvqp4kjqnqy
+    dev: false
+
+  /@radix-ui/react-popper/1.1.3_gltvt74xzh7f5lvw2hzxriz5bu:
+    resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@floating-ui/react-dom': 2.0.8_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-arrow': 1.0.3_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-compose-refs': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-context': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-primitive': 1.0.3_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-use-callback-ref': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-use-layout-effect': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-use-rect': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-use-size': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/rect': 1.0.1
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-portal/1.0.4_gltvt74xzh7f5lvw2hzxriz5bu:
+    resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/react-primitive': 1.0.3_gltvt74xzh7f5lvw2hzxriz5bu
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-presence/1.0.1_gltvt74xzh7f5lvw2hzxriz5bu:
+    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/react-compose-refs': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-use-layout-effect': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-primitive/1.0.3_gltvt74xzh7f5lvw2hzxriz5bu:
+    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/react-slot': 1.0.2_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-roving-focus/1.0.4_gltvt74xzh7f5lvw2hzxriz5bu:
+    resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-compose-refs': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-context': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-direction': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-id': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-primitive': 1.0.3_gltvt74xzh7f5lvw2hzxriz5bu
+      '@radix-ui/react-use-callback-ref': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@radix-ui/react-use-controllable-state': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@types/react': 18.2.20
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-slot/1.0.2_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/react-compose-refs': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@types/react': 18.2.20
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-callback-ref/1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@types/react': 18.2.20
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-controllable-state/1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/react-use-callback-ref': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@types/react': 18.2.20
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-escape-keydown/1.0.3_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/react-use-callback-ref': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@types/react': 18.2.20
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-layout-effect/1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@types/react': 18.2.20
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-rect/1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/rect': 1.0.1
+      '@types/react': 18.2.20
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-size/1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@radix-ui/react-use-layout-effect': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      '@types/react': 18.2.20
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/rect/1.0.1:
+    resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
+    dependencies:
+      '@babel/runtime': 7.23.9
+    dev: false
+
   /@remix-run/css-bundle/2.5.1:
     resolution: {integrity: sha512-QPeNvgD7fj4NmXB9CuGM5Mp0ZtM43dMeda8Ik3AUoQOMgMWb0d4jK4Cye6eoTGwJOron6XISKh0mq8MorucWEQ==}
     engines: {node: '>=18.0.0'}
@@ -2708,13 +3240,11 @@ packages:
 
   /@types/prop-types/15.7.11:
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
-    dev: true
 
   /@types/react-dom/18.2.7:
     resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==}
     dependencies:
       '@types/react': 18.2.20
-    dev: true
 
   /@types/react/18.2.20:
     resolution: {integrity: sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==}
@@ -2722,11 +3252,9 @@ packages:
       '@types/prop-types': 15.7.11
       '@types/scheduler': 0.16.8
       csstype: 3.1.3
-    dev: true
 
   /@types/scheduler/0.16.8:
     resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==}
-    dev: true
 
   /@types/semver/7.5.6:
     resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
@@ -3124,6 +3652,13 @@ packages:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
 
+  /aria-hidden/1.2.3:
+    resolution: {integrity: sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
   /aria-query/5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
     dependencies:
@@ -3617,11 +4152,6 @@ packages:
     engines: {node: '>=0.8'}
     dev: true
 
-  /clsx/1.2.1:
-    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
-    engines: {node: '>=6'}
-    dev: false
-
   /co/4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -3764,7 +4294,6 @@ packages:
 
   /csstype/3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
-    dev: true
 
   /damerau-levenshtein/1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
@@ -3876,6 +4405,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /detect-node-es/1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+    dev: false
+
   /diff-sequences/29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -4798,6 +5331,11 @@ packages:
       has-symbols: 1.0.3
       hasown: 2.0.0
 
+  /get-nonce/1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+    dev: false
+
   /get-package-type/0.1.0:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
@@ -5092,6 +5630,12 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /invariant/2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /ipaddr.js/1.9.1:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
@@ -7336,17 +7880,6 @@ packages:
       iconv-lite: 0.4.24
       unpipe: 1.0.0
 
-  /react-contexify/6.0.0_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-jMhz6yZI81Jv3UDj7TXqCkhdkCFEEmvwGCPXsQuA2ZUC8EbCuVQ6Cy8FzKMXa0y454XTDClBN2YFvvmoFlrFkg==}
-    peerDependencies:
-      react: '>=16'
-      react-dom: '>=16'
-    dependencies:
-      clsx: 1.2.1
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-    dev: false
-
   /react-dom/18.2.0_react@18.2.0:
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
@@ -7370,6 +7903,41 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /react-remove-scroll-bar/2.3.4_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.20
+      react: 18.2.0
+      react-style-singleton: 2.2.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      tslib: 2.6.2
+    dev: false
+
+  /react-remove-scroll/2.5.5_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.20
+      react: 18.2.0
+      react-remove-scroll-bar: 2.3.4_j3ahe22lw6ac2w6qvqp4kjqnqy
+      react-style-singleton: 2.2.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      tslib: 2.6.2
+      use-callback-ref: 1.3.1_j3ahe22lw6ac2w6qvqp4kjqnqy
+      use-sidecar: 1.1.2_j3ahe22lw6ac2w6qvqp4kjqnqy
+    dev: false
+
   /react-router-dom/6.21.3_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==}
     engines: {node: '>=14.0.0'}
@@ -7393,6 +7961,23 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-style-singleton/2.2.1_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.20
+      get-nonce: 1.0.1
+      invariant: 2.2.4
+      react: 18.2.0
+      tslib: 2.6.2
+    dev: false
+
   /react/18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -7452,7 +8037,6 @@ packages:
 
   /regenerator-runtime/0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
-    dev: true
 
   /regenerator-transform/0.15.2:
     resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==}
@@ -8179,6 +8763,10 @@ packages:
       strip-bom: 3.0.0
     dev: true
 
+  /tslib/2.6.2:
+    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+    dev: false
+
   /type-check/0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -8398,6 +8986,37 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: false
 
+  /use-callback-ref/1.3.1_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.20
+      react: 18.2.0
+      tslib: 2.6.2
+    dev: false
+
+  /use-sidecar/1.1.2_j3ahe22lw6ac2w6qvqp4kjqnqy:
+    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.2.20
+      detect-node-es: 1.1.0
+      react: 18.2.0
+      tslib: 2.6.2
+    dev: false
+
   /util-deprecate/1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true

From 8badea2115e92b7c88a3c65190fbc5ed49eb2a69 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 14 Feb 2024 13:53:30 +0100
Subject: [PATCH 4/7] update imports

---
 utopia-remix/package.json   |  2 --
 utopia-remix/pnpm-lock.yaml | 38 -------------------------------------
 2 files changed, 40 deletions(-)

diff --git a/utopia-remix/package.json b/utopia-remix/package.json
index e7963c6c9b95..9988d3eb7fdd 100644
--- a/utopia-remix/package.json
+++ b/utopia-remix/package.json
@@ -15,9 +15,7 @@
   },
   "dependencies": {
     "@prisma/client": "5.9.0",
-    "@radix-ui/react-context-menu": "2.1.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",
-    "@radix-ui/react-icons": "1.3.0",
     "@remix-run/css-bundle": "2.5.1",
     "@remix-run/node": "2.5.1",
     "@remix-run/react": "2.5.1",
diff --git a/utopia-remix/pnpm-lock.yaml b/utopia-remix/pnpm-lock.yaml
index 4918e009db6c..850b68497856 100644
--- a/utopia-remix/pnpm-lock.yaml
+++ b/utopia-remix/pnpm-lock.yaml
@@ -4,9 +4,7 @@ specifiers:
   '@babel/core': 7.23.9
   '@babel/preset-env': 7.23.9
   '@prisma/client': 5.9.0
-  '@radix-ui/react-context-menu': 2.1.5
   '@radix-ui/react-dropdown-menu': 2.0.6
-  '@radix-ui/react-icons': 1.3.0
   '@remix-run/css-bundle': 2.5.1
   '@remix-run/dev': 2.5.1
   '@remix-run/node': 2.5.1
@@ -47,9 +45,7 @@ specifiers:
 
 dependencies:
   '@prisma/client': 5.9.0_prisma@5.9.0
-  '@radix-ui/react-context-menu': 2.1.5_gltvt74xzh7f5lvw2hzxriz5bu
   '@radix-ui/react-dropdown-menu': 2.0.6_gltvt74xzh7f5lvw2hzxriz5bu
-  '@radix-ui/react-icons': 1.3.0_react@18.2.0
   '@remix-run/css-bundle': 2.5.1
   '@remix-run/node': 2.5.1_typescript@5.1.6
   '@remix-run/react': 2.5.1_i4rjfizg7pnsmg7p6yi76gfzdq
@@ -2327,32 +2323,6 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-context-menu/2.1.5_gltvt74xzh7f5lvw2hzxriz5bu:
-    resolution: {integrity: sha512-R5XaDj06Xul1KGb+WP8qiOh7tKJNz2durpLBXAGZjSVtctcRFCuEvy2gtMwRJGePwQQE5nV77gs4FwRi8T+r2g==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.9
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-context': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
-      '@radix-ui/react-menu': 2.0.6_gltvt74xzh7f5lvw2hzxriz5bu
-      '@radix-ui/react-primitive': 1.0.3_gltvt74xzh7f5lvw2hzxriz5bu
-      '@radix-ui/react-use-callback-ref': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
-      '@radix-ui/react-use-controllable-state': 1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy
-      '@types/react': 18.2.20
-      '@types/react-dom': 18.2.7
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-    dev: false
-
   /@radix-ui/react-context/1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy:
     resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
     peerDependencies:
@@ -2470,14 +2440,6 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-icons/1.3.0_react@18.2.0:
-    resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
-    peerDependencies:
-      react: ^16.x || ^17.x || ^18.x
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /@radix-ui/react-id/1.0.1_j3ahe22lw6ac2w6qvqp4kjqnqy:
     resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
     peerDependencies:

From 59f764da070c218de80f0305f3f7926a44d734ca Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 14 Feb 2024 13:54:50 +0100
Subject: [PATCH 5/7] use button style

---
 utopia-remix/app/routes/projects.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/utopia-remix/app/routes/projects.tsx b/utopia-remix/app/routes/projects.tsx
index bdec888748cd..bac3f705e060 100644
--- a/utopia-remix/app/routes/projects.tsx
+++ b/utopia-remix/app/routes/projects.tsx
@@ -14,6 +14,7 @@ import { assertNever } from '../util/assertNever'
 import { projectEditorLink } from '../util/links'
 
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { button } from '../styles/button.css'
 
 export async function loader(args: LoaderFunctionArgs) {
   const user = await requireUser(args.request)
@@ -414,7 +415,7 @@ const ProjectActions = React.memo(
         <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
           <DropdownMenu.Root>
             <DropdownMenu.Trigger asChild>
-              <button>…</button>
+              <button className={button()}>…</button>
             </DropdownMenu.Trigger>
             <ProjectContextMenu selectedCategory={selectedCategory} project={project} />
           </DropdownMenu.Root>

From 94f007822196f13acea4547871ee1d3a391205ba Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 14 Feb 2024 13:55:49 +0100
Subject: [PATCH 6/7] remove old commented out

---
 .../app/components/projectActionContextMenu.tsx        | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/utopia-remix/app/components/projectActionContextMenu.tsx b/utopia-remix/app/components/projectActionContextMenu.tsx
index 90a89b72aa20..e3b413f5c81f 100644
--- a/utopia-remix/app/components/projectActionContextMenu.tsx
+++ b/utopia-remix/app/components/projectActionContextMenu.tsx
@@ -77,16 +77,6 @@ export const ProjectContextMenu = React.memo(
                 // TODO notification toast
               },
             },
-            //   {
-            //     id: 'share',
-            //     text: 'Share',
-            //     onClick: (project) => {},
-            //   },
-            //   {
-            //     id: 'fork',
-            //     text: 'Fork',
-            //     onClick: (project) => {},
-            //   },
             'separator',
             {
               text: 'Rename',

From aba8fd423e53c17dc68b6c37f758b23c582b2430 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Wed, 14 Feb 2024 16:22:06 +0100
Subject: [PATCH 7/7] fix colors

---
 .../app/components/projectActionContextMenu.tsx     | 11 +++++++++--
 utopia-remix/app/styles/contextMenuItem.css.ts      | 13 +++++++++----
 utopia-remix/app/styles/sprinkles.css.ts            |  3 ++-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/utopia-remix/app/components/projectActionContextMenu.tsx b/utopia-remix/app/components/projectActionContextMenu.tsx
index e3b413f5c81f..53d3f248367d 100644
--- a/utopia-remix/app/components/projectActionContextMenu.tsx
+++ b/utopia-remix/app/components/projectActionContextMenu.tsx
@@ -7,6 +7,7 @@ import { ProjectWithoutContent } from '../types'
 import { assertNever } from '../util/assertNever'
 import { projectEditorLink } from '../util/links'
 import { contextMenuItem } from '../styles/contextMenuItem.css'
+import { colors } from '../styles/sprinkles.css'
 
 type ContextMenuEntry =
   | {
@@ -121,19 +122,25 @@ export const ProjectContextMenu = React.memo(
           <DropdownMenu.Content
             style={{
               background: 'white',
-              padding: 10,
+              padding: 4,
               boxShadow: '2px 3px 4px #dddddd',
               border: '1px solid #ccc',
               borderRadius: 4,
               display: 'flex',
               flexDirection: 'column',
               gap: 4,
+              minWidth: 100,
             }}
             sideOffset={5}
           >
             {menuEntries.map((entry, index) => {
               if (entry === 'separator') {
-                return <DropdownMenu.Separator key={`separator-${index}`} />
+                return (
+                  <DropdownMenu.Separator
+                    key={`separator-${index}`}
+                    style={{ backgroundColor: colors.separator, height: 1 }}
+                  />
+                )
               }
               return (
                 <DropdownMenu.Item
diff --git a/utopia-remix/app/styles/contextMenuItem.css.ts b/utopia-remix/app/styles/contextMenuItem.css.ts
index 0ed5191f994c..b6863f4372e8 100644
--- a/utopia-remix/app/styles/contextMenuItem.css.ts
+++ b/utopia-remix/app/styles/contextMenuItem.css.ts
@@ -1,5 +1,5 @@
 import { recipe } from '@vanilla-extract/recipes'
-import { sprinkles } from './sprinkles.css'
+import { colors, sprinkles } from './sprinkles.css'
 
 export const contextMenuItem = recipe({
   base: [
@@ -8,9 +8,14 @@ export const contextMenuItem = recipe({
       color: 'lightModeBlack',
     }),
     {
-      padding: '4px 4px',
-      cursor: 'default',
-      border: 'none',
+      outline: 'none',
+      padding: '6px 8px',
+      cursor: 'pointer',
+      border: 'none !important',
+      ':hover': {
+        backgroundColor: colors.primary,
+        color: 'white',
+      },
     },
   ],
 })
diff --git a/utopia-remix/app/styles/sprinkles.css.ts b/utopia-remix/app/styles/sprinkles.css.ts
index 89121f559099..b9e95777cba4 100644
--- a/utopia-remix/app/styles/sprinkles.css.ts
+++ b/utopia-remix/app/styles/sprinkles.css.ts
@@ -1,12 +1,13 @@
 import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles'
 
-const colors = {
+export const colors = {
   black: '#000',
   white: '#fff',
   primary: '#0075F9',
   aqua: '#00E3E3',
   darkModeBlack: '#181C20',
   lightModeBlack: '#2B2B2B',
+  separator: '#dddddd',
 }
 
 const colorProperties = defineProperties({