Add hook to get value based on themes "direction"

In case the component didn't rerender on a language change, the used value was never updated based on the new "direction"

src/lib/ui/AwaitableDialog.tsx

@@ -10,7 +10,7 @@ import { createRoot } from 'react-dom/client';
 import { ThemeProvider } from '@mui/material/styles';
 import { ConfirmDialog } from '@/components/molecules/ConfirmDialog.tsx';
 import { ControlledPromise } from '@/lib/ControlledPromise.ts';
-import { getCurrentTheme } from '@/theme.ts';
+import { getCurrentTheme } from '@/theme.tsx';
 
 export const awaitConfirmation = async (
     dialogProps: Omit<React.ComponentProps<typeof ConfirmDialog>, 'onCancel' | 'onConfirm'>,

src/lib/ui/MediaQuery.tsx

@@ -9,7 +9,7 @@
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { Breakpoint } from '@mui/material/styles';
 import { useCallback, useState } from 'react';
-import { getCurrentTheme } from '@/theme.ts';
+import { getCurrentTheme } from '@/theme.tsx';
 import { ThemeMode } from '@/components/context/ThemeModeContext.tsx';
 import { AppStorage } from '@/util/AppStorage.ts';
 import { useResizeObserver } from '@/util/useResizeObserver.tsx';