fix context menu and popups (use react portal)

Author: devklick

src/common/utils/stringUtils.ts

@@ -0,0 +1,9 @@
+export function toKebabCase(str: string) {
+  return str
+    .normalize("NFKD") // split accented chars
+    .replace(/[\u0300-\u036f]/g, "") // remove accents
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2") // camelCase → camel-Case
+    .replace(/[^a-zA-Z0-9]+/g, "-") // non-alphanumerics → -
+    .replace(/^-+|-+$/g, "") // trim leading/trailing -
+    .toLowerCase();
+}

src/components/AppPopup/AppPopup.tsx

@@ -1,7 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { Rect } from "../../hooks/useDragToResize";
 import useDetectMouseDownOutside from "../../hooks/useDetectMouseDownOutside";
+
 import useSystemSettings from "../../stores/systemSettingsStore";
+import useWindowManagerStore from "../../stores/windowManagerStore";
 
 import { StyledContent, StyledPopup } from "./styles";
 
@@ -15,6 +18,7 @@ function AppPopup<Element extends HTMLElement>({
   children,
   close,
 }: React.PropsWithChildren<AppPopupProps<Element>>) {
+  const desktopRef = useWindowManagerStore((s) => s.desktopRef);
   const thisRef = useRef<HTMLDivElement>(null);
   const settings = useSystemSettings();
   const [rect, setRect] = useState<Rect>({
@@ -43,7 +47,10 @@ function AppPopup<Element extends HTMLElement>({
     e.preventDefault();
   }
 
-  return (
+  // popup is portalled to desktop element
+  if (!desktopRef.current) return;
+
+  return createPortal(
     <StyledPopup
       {...rect}
       ref={thisRef}
@@ -54,7 +61,8 @@ function AppPopup<Element extends HTMLElement>({
       <StyledContent backgroundColor={settings.mainColor}>
         {children}
       </StyledContent>
-    </StyledPopup>
+    </StyledPopup>,
+    desktopRef.current,
   );
 }
 

src/components/AppPopup/styles.ts

@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
 import { Rect } from "../../hooks/useDragToResize";
 
 export const StyledPopup = styled.div<Rect>`
-  backdrop-filter: brightness(80%);
   position: fixed;
   z-index: 9999;
   display: flex;
@@ -12,6 +11,9 @@ export const StyledPopup = styled.div<Rect>`
   left: ${(props) => props.left}px;
   width: ${(props) => props.width}px;
   height: ${(props) => props.height}px;
+  backdrop-filter: blur(5px) brightness(80%);
+  border-radius: 6px;
+  box-shadow: 0 0 3px 3px rgb(0, 0, 0, 0.3);
 `;
 
 export const StyledContent = styled.div<{ backgroundColor: string }>`

src/components/BorderedApp/BorderedApp.tsx

@@ -22,6 +22,7 @@ import {
   StyledWindowMenusWrapper,
   StyledContentInner,
 } from "./styles";
+import { toKebabCase } from "../../common/utils/stringUtils";
 
 /**
  * A type for each of the programs wrapped in a bordered app to forward a ref for,
@@ -128,13 +129,30 @@ function BorderedApp<
       onKeyDown={handleKeyDown}
       opacity={opacity}
       blur={blur}
+      className={`bordered-app bordered-app_${toKebabCase(title)}`}
     >
-      <StyledCorner location="nw" ref={resizeHandleNW} />
-      <StyledEdge location="n" ref={resizeHandleN} />
-      <StyledCorner location="ne" ref={resizeHandleNE} />
-      <StyledEdge location="e" ref={resizeHandleE} />
+      <StyledCorner
+        location="nw"
+        ref={resizeHandleNW}
+        className="bordered-app__corner--nw"
+      />
+      <StyledEdge
+        location="n"
+        ref={resizeHandleN}
+        className="bordered-app__edge--n"
+      />
+      <StyledCorner
+        location="ne"
+        ref={resizeHandleNE}
+        className="bordered-app__corner--ne"
+      />
+      <StyledEdge
+        location="e"
+        ref={resizeHandleE}
+        className="bordered-app__edge--e"
+      />
       <StyledTitleBar
-        className="drag-to-move"
+        className="bordered-app__title-bar drag-to-move"
         ref={moveHandle}
         onDoubleClick={maximize}
       >
@@ -175,10 +193,26 @@ function BorderedApp<
           {children}
         </StyledContentInner>
       </StyledContent>
-      <StyledCorner location="sw" ref={resizeHandleSW} />
-      <StyledEdge location="s" ref={resizeHandleS} />
-      <StyledCorner location="se" ref={resizeHandleSE} />
-      <StyledEdge location="w" ref={resizeHandleW} />
+      <StyledCorner
+        location="sw"
+        ref={resizeHandleSW}
+        className="bordered-app__corner--sw"
+      />
+      <StyledEdge
+        location="s"
+        ref={resizeHandleS}
+        className="bordered-app__edge--s"
+      />
+      <StyledCorner
+        location="se"
+        ref={resizeHandleSE}
+        className="bordered-app__corner--se"
+      />
+      <StyledEdge
+        location="w"
+        ref={resizeHandleW}
+        className="bordered-app__edge--w"
+      />
     </StyledBorderedApp>
   );
 }

src/components/ContextMenu/ContextMenu.tsx

@@ -4,6 +4,8 @@ import useDetectMouseDownOutside from "../../hooks/useDetectMouseDownOutside";
 
 import { StyledContextMenu } from "./styles";
 import useBindKeyToAction from "../../hooks/useBindKeyToAction";
+import { createPortal } from "react-dom";
+import useWindowManagerStore from "../../stores/windowManagerStore";
 
 interface ContextMenuProps {
   items: Array<MenuItemProps>;
@@ -17,14 +19,23 @@ function ContextMenu({ items, position, close }: ContextMenuProps) {
   useDetectMouseDownOutside({ elementRef, onMouseDown: close });
   useBindKeyToAction({ keys: ["Escape"], action: close });
 
-  return (
-    <StyledContextMenu position={position} ref={elementRef}>
+  // Context menu portalled to the desktop element.
+  const desktopRef = useWindowManagerStore((s) => s.desktopRef);
+  if (!desktopRef.current) return;
+
+  return createPortal(
+    <StyledContextMenu
+      position={position}
+      ref={elementRef}
+      className="context-menu"
+    >
       <MenuItems
         items={items}
         position={{ x: 0, y: 0 }}
         positionType="relative"
       />
-    </StyledContextMenu>
+    </StyledContextMenu>,
+    desktopRef.current,
   );
 }
 

src/components/Desktop/Desktop.tsx

@@ -4,14 +4,16 @@ import BottomBar from "../BottomBar";
 import useSystemSettings from "../../stores/systemSettingsStore";
 
 import { StyledBackground, StyledDesktop } from "./styles";
+import useWindowManagerStore from "../../stores/windowManagerStore";
 
 interface DesktopProps {}
 
 // eslint-disable-next-line no-empty-pattern
 function Desktop({}: DesktopProps) {
   const settings = useSystemSettings();
+  const desktopRef = useWindowManagerStore((s) => s.desktopRef);
   return (
-    <StyledDesktop id="desktop">
+    <StyledDesktop id="desktop" ref={desktopRef}>
       <StyledBackground id="background" backgroundUrl={settings.background} />
       <TopBar />
       <Content />

src/stores/windowManagerStore.ts

@@ -16,13 +16,14 @@ interface ComponentDefinition<Props extends BaseProps = BaseProps> {
 
 interface WindowManagerStoreState {
   contentRef: React.RefObject<HTMLDivElement>;
+  desktopRef: React.RefObject<HTMLDivElement>;
   windowsMap: Map<string, Map<string, ComponentDefinition>>;
   highestZIndex: number;
   getWindowDefinitions: () => Array<ComponentDefinition>;
   addWindow: <Props extends BaseProps = BaseProps>(
     windowType: string,
     windowId: string,
-    definition: ComponentDefinition<Props>
+    definition: ComponentDefinition<Props>,
   ) => void;
   closeWindow: (windowType: string, windowId: string) => void;
   focusWindowsOfType: (windowType: string) => void;
@@ -33,17 +34,18 @@ interface WindowManagerStoreState {
 
 const useWindowManagerStore = create<WindowManagerStoreState>()((set, get) => ({
   contentRef: React.createRef<HTMLDivElement>(),
+  desktopRef: React.createRef<HTMLDivElement>(),
   windowsMap: new Map(),
   highestZIndex: 0,
   getWindowDefinitions() {
     return Array.from(get().windowsMap.values()).flatMap((map) =>
-      Array.from(map.values())
+      Array.from(map.values()),
     );
   },
   addWindow<Props extends BaseProps = BaseProps>(
     windowType: string,
     windowId: string,
-    definition: ComponentDefinition<Props>
+    definition: ComponentDefinition<Props>,
   ) {
     const windowsMap = get().windowsMap;
     const windowsOfType = windowsMap.get(windowType);
@@ -54,7 +56,7 @@ const useWindowManagerStore = create<WindowManagerStoreState>()((set, get) => ({
     if (!windowsOfType) {
       windowsMap.set(
         windowType,
-        new Map([[windowId, definition as unknown as ComponentDefinition]])
+        new Map([[windowId, definition as unknown as ComponentDefinition]]),
       );
     } else {
       windowsOfType.set(windowId, definition as unknown as ComponentDefinition);