Remix: fix loader data not updating (#4916)

* fix loader data not updating

* rename store

* dark mode hook

* split components, drop useEffects

utopia-remix/app/components/projectActionContextMenu.tsx

@@ -1,7 +1,7 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { useFetcher } from '@remix-run/react'
 import React from 'react'
-import { useStore } from '../store'
+import { useProjectsStore } from '../store'
 import { contextMenuItem } from '../styles/contextMenuItem.css'
 import { colors } from '../styles/sprinkles.css'
 import { ProjectWithoutContent } from '../types'
@@ -17,7 +17,7 @@ type ContextMenuEntry =
 
 export const ProjectContextMenu = React.memo(({ project }: { project: ProjectWithoutContent }) => {
   const fetcher = useFetcher()
-  const selectedCategory = useStore((store) => store.selectedCategory)
+  const selectedCategory = useProjectsStore((store) => store.selectedCategory)
 
   const deleteProject = React.useCallback(
     (projectId: string) => {

utopia-remix/app/hooks/useIsDarkMode.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+export function useIsDarkMode() {
+  const [isDarkMode, setIsDarkMode] = React.useState<boolean>(false)
+
+  React.useEffect(() => {
+    const handleColorSchemeChange = (event: {
+      matches: boolean | ((prevState: boolean) => boolean)
+    }) => {
+      setIsDarkMode(event.matches)
+    }
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    setIsDarkMode(mediaQuery.matches)
+    mediaQuery.addListener(handleColorSchemeChange)
+
+    return () => {
+      mediaQuery.removeListener(handleColorSchemeChange)
+    }
+  }, [])
+
+  return isDarkMode
+}