Page editor redesign

frontend/src/components/LanguageSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Menu, Button, ScrollArea, useMantineTheme, useMantineColorScheme } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { supportedLanguages } from '../i18n';
@@ -10,6 +10,10 @@ const LanguageSelector: React.FC = () => {
   const theme = useMantineTheme();
   const { colorScheme } = useMantineColorScheme();
   const [opened, setOpened] = useState(false);
+  const [animationTriggered, setAnimationTriggered] = useState(false);
+  const [isChanging, setIsChanging] = useState(false);
+  const [pendingLanguage, setPendingLanguage] = useState<string | null>(null);
+  const [rippleEffect, setRippleEffect] = useState<{x: number, y: number, key: number} | null>(null);
 
   const languageOptions = Object.entries(supportedLanguages)
     .sort(([, nameA], [, nameB]) => nameA.localeCompare(nameB))
@@ -18,22 +22,78 @@ const LanguageSelector: React.FC = () => {
       label: name,
     }));
 
-  const handleLanguageChange = (value: string) => {
-    i18n.changeLanguage(value);
-    setOpened(false);
+  const handleLanguageChange = (value: string, event: React.MouseEvent) => {
+    // Create ripple effect at click position
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    
+    setRippleEffect({ x, y, key: Date.now() });
+    
+    // Start transition animation
+    setIsChanging(true);
+    setPendingLanguage(value);
+    
+    // Simulate processing time for smooth transition
+    setTimeout(() => {
+      i18n.changeLanguage(value);
+      
+      setTimeout(() => {
+        setIsChanging(false);
+        setPendingLanguage(null);
+        setOpened(false);
+        
+        // Clear ripple effect
+        setTimeout(() => setRippleEffect(null), 100);
+      }, 300);
+    }, 200);
   };
 
   const currentLanguage = supportedLanguages[i18n.language as keyof typeof supportedLanguages] || 
                          supportedLanguages['en-GB'];
 
+  // Trigger animation when dropdown opens
+  useEffect(() => {
+    if (opened) {
+      setAnimationTriggered(false);
+      // Small delay to ensure DOM is ready
+      setTimeout(() => setAnimationTriggered(true), 50);
+    }
+  }, [opened]);
+
   return (
-    <Menu 
-      opened={opened} 
-      onChange={setOpened}
-      width={600}
-      position="bottom-start"
-      offset={8}
-    >
+    <>
+      <style>
+        {`
+          @keyframes ripple-expand {
+            0% {
+              width: 0;
+              height: 0;
+              opacity: 0.6;
+            }
+            50% {
+              opacity: 0.3;
+            }
+            100% {
+              width: 100px;
+              height: 100px;
+              opacity: 0;
+            }
+          }
+        `}
+      </style>
+      <Menu 
+        opened={opened} 
+        onChange={setOpened}
+        width={600}
+        position="bottom-start"
+        offset={8}
+        transitionProps={{
+          transition: 'scale-y',
+          duration: 200,
+          timingFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+        }}
+      >
       <Menu.Target>
         <Button
           variant="subtle"
@@ -43,6 +103,7 @@ const LanguageSelector: React.FC = () => {
             root: {
               border: 'none',
               color: colorScheme === 'dark' ? theme.colors.gray[3] : theme.colors.gray[7],
+              transition: 'background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
               '&:hover': {
                 backgroundColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
               }
@@ -69,22 +130,29 @@ const LanguageSelector: React.FC = () => {
       >
         <ScrollArea h={190} type="scroll">
           <div className={styles.languageGrid}>
-            {languageOptions.map((option) => (
+            {languageOptions.map((option, index) => (
               <div
                 key={option.value}
                 className={styles.languageItem}
+                style={{
+                  opacity: animationTriggered ? 1 : 0,
+                  transform: animationTriggered ? 'translateY(0px)' : 'translateY(8px)',
+                  transition: `opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) ${index * 0.02}s, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) ${index * 0.02}s`,
+                }}
               >
                 <Button
                   variant="subtle"
                   size="sm"
                   fullWidth
-                  onClick={() => handleLanguageChange(option.value)}
+                  onClick={(event) => handleLanguageChange(option.value, event)}
                   styles={{
                     root: {
                       borderRadius: '4px',
                       minHeight: '32px',
                       padding: '4px 8px',
                       justifyContent: 'flex-start',
+                      position: 'relative',
+                      overflow: 'hidden',
                       backgroundColor: option.value === i18n.language ? (
                         colorScheme === 'dark' ? theme.colors.blue[8] : theme.colors.blue[1]
                       ) : 'transparent',
@@ -93,12 +161,15 @@ const LanguageSelector: React.FC = () => {
                       ) : (
                         colorScheme === 'dark' ? theme.colors.gray[3] : theme.colors.gray[7]
                       ),
+                      transition: 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
                       '&:hover': {
                         backgroundColor: option.value === i18n.language ? (
                           colorScheme === 'dark' ? theme.colors.blue[7] : theme.colors.blue[2]
                         ) : (
                           colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]
                         ),
+                        transform: 'translateY(-1px)',
+                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
                       }
                     },
                     label: {
@@ -108,17 +179,40 @@ const LanguageSelector: React.FC = () => {
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
                       whiteSpace: 'nowrap',
+                      position: 'relative',
+                      zIndex: 2,
                     }
                   }}
                 >
                   {option.label}
+                  
+                  {/* Ripple effect */}
+                  {rippleEffect && pendingLanguage === option.value && (
+                    <div
+                      key={rippleEffect.key}
+                      style={{
+                        position: 'absolute',
+                        left: rippleEffect.x,
+                        top: rippleEffect.y,
+                        width: 0,
+                        height: 0,
+                        borderRadius: '50%',
+                        backgroundColor: theme.colors.blue[4],
+                        opacity: 0.6,
+                        transform: 'translate(-50%, -50%)',
+                        animation: 'ripple-expand 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+                        zIndex: 1,
+                      }}
+                    />
+                  )}
                 </Button>
               </div>
             ))}
           </div>
         </ScrollArea>
       </Menu.Dropdown>
-    </Menu>
+      </Menu>
+    </>
   );
 };