fix(ui): various RTL issues (#774)

apps/ui.immich.app/src/routes/(docs)/+layout.svelte

@@ -22,7 +22,16 @@
     toastManager,
     type NavbarProps,
   } from '@immich/ui';
-  import { mdiCodeBraces, mdiCompass, mdiCompassOutline, mdiMenu, mdiNote, mdiNoteOutline } from '@mdi/js';
+  import {
+    mdiAlignHorizontalLeft,
+    mdiAlignHorizontalRight,
+    mdiCodeBraces,
+    mdiCompass,
+    mdiCompassOutline,
+    mdiMenu,
+    mdiNote,
+    mdiNoteOutline,
+  } from '@mdi/js';
   import { MediaQuery } from 'svelte/reactivity';
 
   let { children } = $props();
@@ -42,6 +51,12 @@
   commandPaletteManager.setTranslations({
     command_palette_prompt_default: 'Quickly find components, links, and commands',
   });
+
+  let dirIsLtr = $state(true);
+
+  $effect(() => {
+    document.dir = dirIsLtr ? 'ltr' : 'rtl';
+  });
 </script>
 
 <AppShell>
@@ -64,6 +79,14 @@
       </ControlBarHeader>
       <ControlBarOverflow>
         <CommandPaletteButton />
+        <IconButton
+          shape="round"
+          variant="ghost"
+          size="medium"
+          aria-label="Switch between LTR and RTL text direction"
+          icon={dirIsLtr ? mdiAlignHorizontalLeft : mdiAlignHorizontalRight}
+          onclick={() => (dirIsLtr = !dirIsLtr)}
+        />
         <ThemeSwitcher size="medium" />
       </ControlBarOverflow>
     </ControlBar>

apps/ui.immich.app/src/routes/(docs)/components/markdown/BasicExample.md

@@ -34,7 +34,7 @@ This is ~~strike-through~~
 
 This is `code`
 
-#### Headers can also container `code`
+#### Headers can also contain `code`
 
 ### Link
 

packages/ui/src/lib/components/CodeBlock/CodeBlock.svelte

@@ -55,7 +55,7 @@
 <Card class="relative">
   <div class="text-sm">
     {#if canCopy}
-      <span class="absolute top-2 right-2 {zIndex.CodeBlockCopyButton} cursor-pointer">
+      <span class="absolute top-2 inset-e-2 {zIndex.CodeBlockCopyButton} cursor-pointer">
         <IconButton
           icon={copied ? mdiCheckCircle : mdiContentCopy}
           size="small"

packages/ui/src/lib/components/Input/Input.svelte

@@ -31,7 +31,7 @@
     variants: {
       padding: {
         base: 'px-4',
-        icon: 'pl-4',
+        icon: 'ps-4',
       },
     },
   });

packages/ui/src/lib/components/Toast/ToastPanel.svelte

@@ -14,7 +14,7 @@
 <TooltipProvider>
   <div
     class={cleanClass(
-      isEmpty ? 'hidden' : 'absolute top-0 right-0 flex flex-col items-end justify-end gap-2 p-4',
+      isEmpty ? 'hidden' : 'absolute top-0 inset-e-0 flex flex-col items-end justify-end gap-2 p-4',
       zIndex.ToastPanel,
       className,
     )}

packages/ui/src/lib/internal/Select.svelte

@@ -104,12 +104,12 @@
         giant: 'h-12',
       },
       leadingPadding: {
-        base: 'pl-4',
-        icon: 'pl-0',
+        base: 'ps-4',
+        icon: 'ps-0',
       },
       trailingPadding: {
-        base: 'pr-4',
-        icon: 'pr-0',
+        base: 'pe-4',
+        icon: 'pe-0',
       },
       roundedSize: styleVariants.inputRoundedSize,
     },

packages/ui/src/lib/styles.ts

@@ -125,12 +125,12 @@ export const inputStyles = tv({
   variants: {
     textSize: styleVariants.textSize,
     leadingPadding: {
-      base: 'pl-4',
-      icon: 'pl-0',
+      base: 'ps-4',
+      icon: 'ps-0',
     },
     trailingPadding: {
-      base: 'pr-4',
-      icon: 'pr-0',
+      base: 'pe-4',
+      icon: 'pe-0',
     },
     roundedSize: {
       tiny: 'rounded-lg',