feat: Improve tolgee library UI TG-300

.gitignore

@@ -11,6 +11,7 @@ testapps/*/node_modules
 testapps/*/build
 testapps/*/.cache
 testapps/react/.env.development.local
+testapps/next/.env.development.local
 **/packahe.json.lerna_backup
 **/node_modules
 packages/**/dist

packages/ui/src/KeyContextMenu/KeyContextMenu.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { TranslationService } from '@tolgee/core/lib/services/TranslationService';
+import { Menu, MenuItem } from '@mui/material';
+
+import { StylesContextProvider } from '../common/styles/StylesContextProvider';
+import { ThemeProvider } from '../ThemeProvider';
+import { DEVTOOLS_ID, DEVTOOLS_Z_INDEX } from '../constants';
+import styled from '@emotion/styled';
+
+const SCMenuItem = styled(MenuItem)`
+  display: flex;
+  flex-direction: column;
+  height: 50px;
+  justify-content: center;
+`;
+
+const SCTranslation = styled.div`
+  display: flex;
+  padding: 3px;
+`;
+
+const SCKey = styled.div`
+  display: flex;
+  margin-top: 10px;
+  padding: 3px;
+  font-weight: bold;
+  font-size: 12px;
+  font-family: Monospace, 'Courier New', Courier;
+`;
+
+export interface KeyContextMenuParams {
+  openEvent: MouseEvent;
+  keys: Set<string>;
+  onSelect: (key) => void;
+}
+
+export type KeyContextMenuState = Partial<KeyContextMenuParams> & {
+  opened: boolean;
+};
+
+export type ComponentDependencies = {
+  translationService: TranslationService;
+};
+
+export type KeyContextMenuProps = {
+  dependencies: ComponentDependencies;
+};
+
+export class KeyContextMenu extends React.Component<KeyContextMenuProps> {
+  constructor(props: KeyContextMenuProps) {
+    super(props);
+  }
+
+  state: KeyContextMenuState & { opened: boolean } = {
+    opened: false,
+  };
+
+  async show(params: KeyContextMenuParams) {
+    this.setState({ ...params, opened: true });
+  }
+
+  keyDown = (e) => {
+    if (e.key === 'Escape') {
+      this.setState((s) => ({ ...s, opened: false }));
+      this.state.onSelect && this.state.onSelect(null);
+    }
+  };
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.keyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.keyDown);
+  }
+
+  render() {
+    return (
+      <StylesContextProvider>
+        <ThemeProvider>
+          {this.state.opened && (
+            <Menu
+              anchorEl={this.state.openEvent.target as Element}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'center',
+              }}
+              open
+              onClose={() => {
+                this.setState({ opened: false });
+                this.state.onSelect(null);
+              }}
+              container={document.getElementById(DEVTOOLS_ID)}
+              style={{ zIndex: DEVTOOLS_Z_INDEX }}
+            >
+              {Array.from(this.state.keys).map((key, index) => (
+                <SCMenuItem
+                  onClick={() => {
+                    this.setState({ opened: false });
+                    this.state.onSelect(key);
+                  }}
+                  key={index}
+                >
+                  <SCTranslation>
+                    {this.props.dependencies.translationService.getFromCacheOrFallback(
+                      key
+                    )}
+                  </SCTranslation>
+                  <SCKey>{key}</SCKey>
+                </SCMenuItem>
+              ))}
+            </Menu>
+          )}
+        </ThemeProvider>
+      </StylesContextProvider>
+    );
+  }
+}

packages/ui/src/translationDialog/KeyForm.tsx → packages/ui/src/KeyDialog/KeyForm.tsx

@@ -6,10 +6,10 @@ import { useTranslationDialogContext } from './useTranslationDialogContext';
 import { IconButton } from './IconButton';
 import { TranslationFields } from './TranslationFields';
 import { OpenInNew } from '../common/icons';
-import { LanguageSelect } from '../LanguageSelect';
+import { LanguageSelect } from '../common/LanguageSelect';
 import { Button } from '@mui/material';
 import { ScreenshotPreview } from '../screenshots/ScreenshotPreview';
-import { LoadingButton } from 'common/LoadingButton';
+import { LoadingButton } from '../common/LoadingButton';
 
 export const KeyForm = () => {
   const handleTakeScreenshot = () => {

packages/ui/src/translationDialog/TranslationDialog.tsx → packages/ui/src/KeyDialog/TranslationDialog.tsx

@@ -2,13 +2,16 @@ import React from 'react';
 import { TranslationDialogWrapper } from './TranslationDialogWrapper';
 import { useTranslationDialogContext } from './useTranslationDialogContext';
 import { KeyForm } from './KeyForm';
+import { ThemeProvider } from '../ThemeProvider';
 
 export const TranslationDialog = () => {
   const context = useTranslationDialogContext();
 
   return (
-    <TranslationDialogWrapper context={context}>
-      <KeyForm />
-    </TranslationDialogWrapper>
+    <ThemeProvider>
+      <TranslationDialogWrapper context={context}>
+        <KeyForm />
+      </TranslationDialogWrapper>
+    </ThemeProvider>
   );
 };

packages/ui/src/translationDialog/TranslationDialogWrapper.tsx → packages/ui/src/KeyDialog/TranslationDialogWrapper.tsx

@@ -1,8 +1,9 @@
-import * as React from 'react';
+import React from 'react';
+
 import { DialogContextType } from './TranslationDialogContextProvider';
 import { NewWindow } from '../common/NewWindow';
-import { Modal } from '../common/Modal';
 import { StylesContextProvider } from '../common/styles/StylesContextProvider';
+import { Modal } from '../common/Modal';
 
 export const TranslationDialogWrapper: React.FC<{
   context: DialogContextType;
@@ -17,12 +18,10 @@ export const TranslationDialogWrapper: React.FC<{
         ) : (
           !context.takingScreenshot && (
             <Modal
+              style={{ width: 700 }}
               open={context.open}
               onClose={context.onClose}
               aria-labelledby="form-dialog-title"
-              style={{
-                width: 700,
-              }}
             >
               {props.children}
             </Modal>

packages/ui/src/ThemeProvider.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  ThemeProvider as MuiThemeProvider,
+  createTheme,
+} from '@mui/material/styles';
+
+const theme = createTheme({
+  typography: {
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+  },
+  palette: {
+    primary: {
+      main: '#822B55',
+    },
+    secondary: {
+      main: '#2B5582',
+    },
+    text: {
+      secondary: '#808080',
+    },
+    background: {
+      default: 'rgb(255, 255, 255)',
+    },
+  },
+  mixins: {
+    toolbar: {
+      minHeight: 52,
+    },
+  },
+});
+
+export const ThemeProvider: React.FC = ({ children }) => {
+  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
+};

packages/ui/src/TolgeeViewer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BodyEnd } from './common/BodyEnd';
-import { TranslationDialogContextProvider } from './translationDialog/TranslationDialogContextProvider';
-import { TranslationDialog } from './translationDialog/TranslationDialog';
+import { TranslationDialogContextProvider } from './KeyDialog/TranslationDialogContextProvider';
+import { TranslationDialog } from './KeyDialog/TranslationDialog';
 import { DependencyStore } from '@tolgee/core/lib/services/DependencyStore';
 
 export type ComponentDependencies = DependencyStore;

packages/ui/src/common/BodyEnd.tsx

@@ -1,3 +1,4 @@
+import { DEVTOOLS_ID } from '../constants';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
@@ -8,9 +9,14 @@ export class BodyEnd extends React.PureComponent<{ document?: Document }> {
     return this.props.document || document;
   }
 
+  get devTools() {
+    return this.document.getElementById(DEVTOOLS_ID) || this.document.body;
+  }
+
   componentDidMount() {
     this._popup = this.document.createElement('div');
-    this.document.body.appendChild(this._popup);
+
+    this.devTools.appendChild(this._popup);
     this._render();
   }
 
@@ -20,7 +26,7 @@ export class BodyEnd extends React.PureComponent<{ document?: Document }> {
 
   componentWillUnmount() {
     ReactDOM.unmountComponentAtNode(this._popup);
-    this.document.body.removeChild(this._popup);
+    this.devTools.removeChild(this._popup);
   }
 
   _render() {