feat: rtl (#17860)

web/src/lib/components/shared-components/context-menu/button-context-menu.svelte

@@ -7,6 +7,7 @@
   } from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
   import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
+  import { languageManager } from '$lib/stores/language-manager.svelte';
   import {
     getContextMenuPositionFromBoundingRect,
     getContextMenuPositionFromEvent,
@@ -26,6 +27,7 @@
     /**
      * The direction in which the context menu should open.
      */
+    // TODO change to start vs end
     direction?: 'left' | 'right';
     color?: Color;
     size?: string | undefined;
@@ -62,7 +64,15 @@
   const menuId = `context-menu-${id}`;
 
   const openDropdown = (event: KeyboardEvent | MouseEvent) => {
-    contextMenuPosition = getContextMenuPositionFromEvent(event, align);
+    let layoutAlign = align;
+    if (languageManager.rtl) {
+      if (align.includes('left')) {
+        layoutAlign = align.replace('left', 'right') as Align;
+      } else if (align.includes('right')) {
+        layoutAlign = align.replace('right', 'left') as Align;
+      }
+    }
+    contextMenuPosition = getContextMenuPositionFromEvent(event, layoutAlign);
     isOpen = true;
     menuContainer?.focus();
   };

web/src/lib/components/shared-components/context-menu/context-menu.svelte

@@ -3,6 +3,7 @@
   import { slide } from 'svelte/transition';
   import { clickOutside } from '$lib/actions/click-outside';
   import type { Snippet } from 'svelte';
+  import { languageManager } from '$lib/stores/language-manager.svelte';
 
   interface Props {
     isVisible?: boolean;
@@ -41,12 +42,17 @@
 
   $effect(() => {
     if (menuElement) {
+      let layoutDirection = direction;
+      if (languageManager.rtl) {
+        layoutDirection = direction === 'left' ? 'right' : 'left';
+      }
+
       const rect = menuElement.getBoundingClientRect();
-      const directionWidth = direction === 'left' ? rect.width : 0;
+      const directionWidth = layoutDirection === 'left' ? rect.width : 0;
       const menuHeight = Math.min(menuElement.clientHeight, height) || 0;
 
-      left = Math.min(window.innerWidth - rect.width, x - directionWidth);
-      top = Math.min(window.innerHeight - menuHeight, y);
+      left = Math.max(8, Math.min(window.innerWidth - rect.width, x - directionWidth));
+      top = Math.max(8, Math.min(window.innerHeight - menuHeight, y));
     }
   });
 </script>
@@ -66,7 +72,7 @@
     aria-labelledby={ariaLabelledBy}
     bind:this={menuElement}
     class="{isVisible
-      ? 'max-h-dvh max-h-svh'
+      ? 'max-h-dvh'
       : 'max-h-0'} flex flex-col transition-all duration-[250ms] ease-in-out outline-none overflow-auto"
     role="menu"
     tabindex="-1"

web/src/lib/components/shared-components/context-menu/menu-option.svelte

@@ -53,7 +53,7 @@
   onclick={handleClick}
   onmouseover={() => ($selectedIdStore = id)}
   onmouseleave={() => ($selectedIdStore = undefined)}
-  class="w-full p-4 text-left text-sm font-medium {textColor} focus:outline-none focus:ring-2 focus:ring-inset cursor-pointer border-gray-200 flex gap-2 items-center {isActive
+  class="w-full p-4 text-start text-sm font-medium {textColor} focus:outline-none focus:ring-2 focus:ring-inset cursor-pointer border-gray-200 flex gap-2 items-center {isActive
     ? activeColor
     : 'bg-slate-100'}"
   role="menuitem"
@@ -65,7 +65,7 @@
     <div class="flex justify-between">
       {text}
       {#if shortcutLabel}
-        <span class="text-gray-500 pl-4">
+        <span class="text-gray-500 ps-4">
           {shortcutLabel}
         </span>
       {/if}

web/src/lib/components/shared-components/context-menu/right-click-context-menu.svelte

@@ -38,7 +38,7 @@
     const elements = document.elementsFromPoint(event.x, event.y);
 
     if (menuContainer && elements.includes(menuContainer)) {
-      // User right-clicked on the context menu itself, we keep the context
+      // User end-clicked on the context menu itself, we keep the context
       // menu as is
       return;
     }
@@ -91,7 +91,7 @@
         },
       ]}
     >
-      <section class="fixed left-0 top-0 z-10 flex h-dvh w-dvw" {oncontextmenu} role="presentation">
+      <section class="fixed start-0 top-0 z-10 flex h-dvh w-dvw" {oncontextmenu} role="presentation">
         <ContextMenu
           {direction}
           {x}