Big refactor

2026-07-16 11:23:10 +02:00 · 2025-06-19 22:41:05 +01:00
parent 868969192b
commit 9c410865f9
16 changed files with 36 additions and 80 deletions
@@ -0,0 +1,88 @@
+/* Language selector grid responsive layout */
+.languageGrid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0;
+}
+
+.languageItem {
+  border-right: 2px solid var(--mantine-color-gray-3);
+}
+
+.languageItem:nth-child(4n) {
+  border-right: none;
+}
+
+/* Responsive breakpoints */
+@media (max-width: 600px) {
+  .languageGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .languageItem:nth-child(4n) {
+    border-right: 2px solid var(--mantine-color-gray-3);
+  }
+  
+  .languageItem:nth-child(2n) {
+    border-right: none;
+  }
+}
+
+@media (min-width: 601px) and (max-width: 900px) {
+  .languageGrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  .languageItem:nth-child(4n) {
+    border-right: 2px solid var(--mantine-color-gray-3);
+  }
+  
+  .languageItem:nth-child(3n) {
+    border-right: none;
+  }
+}
+
+/* Dark theme support */
+[data-mantine-color-scheme="dark"] .languageItem {
+  border-right-color: var(--mantine-color-dark-4);
+}
+
+[data-mantine-color-scheme="dark"] .languageItem:nth-child(4n) {
+  border-right: none;
+}
+
+[data-mantine-color-scheme="dark"] .languageItem:nth-child(2n) {
+  border-right-color: var(--mantine-color-dark-4);
+}
+
+[data-mantine-color-scheme="dark"] .languageItem:nth-child(3n) {
+  border-right-color: var(--mantine-color-dark-4);
+}
+
+/* Responsive text visibility */
+.languageText {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .languageText {
+    display: inline;
+  }
+}
+
+/* Ripple animation */
+@keyframes ripple {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    width: 100px;
+    height: 100px;
+    opacity: 0;
+  }
+}
@@ -0,0 +1,219 @@
+import React, { useState, useEffect } from 'react';
+import { Menu, Button, ScrollArea, useMantineTheme, useMantineColorScheme } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { supportedLanguages } from '../../i18n';
+import LanguageIcon from '@mui/icons-material/Language';
+import styles from './LanguageSelector.module.css';
+
+const LanguageSelector = () => {
+  const { i18n } = useTranslation();
+  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))
+    .map(([code, name]) => ({
+      value: code,
+      label: name,
+    }));
+
+  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 (
+    <>
+      <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"
+          size="sm"
+          leftSection={<LanguageIcon style={{ fontSize: 18 }} />}
+          styles={{
+            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],
+              }
+            },
+            label: {
+              fontSize: '12px',
+              fontWeight: 500,
+            }
+          }}
+        >
+          <span className={styles.languageText}>
+            {currentLanguage}
+          </span>
+        </Button>
+      </Menu.Target>
+
+      <Menu.Dropdown
+        style={{
+          padding: '12px',
+          borderRadius: '8px',
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+          border: colorScheme === 'dark' ? `1px solid ${theme.colors.dark[4]}` : `1px solid ${theme.colors.gray[3]}`,
+        }}
+      >
+        <ScrollArea h={190} type="scroll">
+          <div className={styles.languageGrid}>
+            {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={(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',
+                      color: option.value === i18n.language ? (
+                        colorScheme === 'dark' ? theme.colors.blue[2] : theme.colors.blue[7]
+                      ) : (
+                        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: {
+                      fontSize: '13px',
+                      fontWeight: option.value === i18n.language ? 600 : 400,
+                      textAlign: 'left',
+                      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>
+    </>
+  );
+};
+
+export default LanguageSelector;
@@ -0,0 +1,70 @@
+import React from "react";
+import { ActionIcon, Stack, Tooltip } from "@mantine/core";
+import AddToPhotosIcon from "@mui/icons-material/AddToPhotos";
+import ContentCutIcon from "@mui/icons-material/ContentCut";
+import ZoomInMapIcon from "@mui/icons-material/ZoomInMap";
+import MenuBookIcon from "@mui/icons-material/MenuBook";
+import AppsIcon from "@mui/icons-material/Apps";
+import { useRainbowThemeContext } from "./RainbowThemeProvider";
+import rainbowStyles from '../../styles/rainbow.module.css';
+
+interface QuickAccessBarProps {
+  onToolsClick: () => void;
+  onReaderToggle: () => void;
+  selectedToolKey?: string;
+  toolRegistry: any;
+  leftPanelView: 'toolPicker' | 'toolContent';
+  readerMode: boolean;
+}
+
+const QuickAccessBar = ({
+  onToolsClick,
+  onReaderToggle,
+  selectedToolKey,
+  toolRegistry,
+  leftPanelView,
+  readerMode,
+}: QuickAccessBarProps) => {
+  const { isRainbowMode } = useRainbowThemeContext();
+
+  return (
+    <div
+      className={`h-screen flex flex-col w-20 ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
+      style={{ 
+        padding: '1rem 0.5rem',
+        backgroundColor: 'var(--bg-muted)'
+      }}
+    >
+      <Stack gap="lg" align="center" className="flex-1">
+        {/* All Tools Button */}
+        <div className="flex flex-col items-center gap-1">
+          <ActionIcon
+            size="xl"
+            variant={leftPanelView === 'toolPicker' && !readerMode ? "filled" : "subtle"}
+            onClick={onToolsClick}
+          >
+            <AppsIcon sx={{ fontSize: 28 }} />
+          </ActionIcon>
+          <span className="text-xs text-center leading-tight" style={{ color: 'var(--text-secondary)' }}>Tools</span>
+        </div>
+
+        {/* Reader Mode Button */}
+        <div className="flex flex-col items-center gap-1">
+          <ActionIcon
+            size="xl"
+            variant={readerMode ? "filled" : "subtle"}
+            onClick={onReaderToggle}
+          >
+            <MenuBookIcon sx={{ fontSize: 28 }} />
+          </ActionIcon>
+          <span className="text-xs text-center leading-tight" style={{ color: 'var(--text-secondary)' }}>Read</span>
+        </div>
+
+        {/* Spacer */}
+        <div className="flex-1" />
+      </Stack>
+    </div>
+  );
+};
+
+export default QuickAccessBar;
@@ -0,0 +1,55 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import { MantineProvider, ColorSchemeScript } from '@mantine/core';
+import { useRainbowTheme } from '../../hooks/useRainbowTheme';
+import { mantineTheme } from '../../theme/mantineTheme';
+import rainbowStyles from '../../styles/rainbow.module.css';
+
+interface RainbowThemeContextType {
+  themeMode: 'light' | 'dark' | 'rainbow';
+  isRainbowMode: boolean;
+  isToggleDisabled: boolean;
+  toggleTheme: () => void;
+  activateRainbow: () => void;
+  deactivateRainbow: () => void;
+}
+
+const RainbowThemeContext = createContext<RainbowThemeContextType | null>(null);
+
+export function useRainbowThemeContext() {
+  const context = useContext(RainbowThemeContext);
+  if (!context) {
+    throw new Error('useRainbowThemeContext must be used within RainbowThemeProvider');
+  }
+  return context;
+}
+
+interface RainbowThemeProviderProps {
+  children: ReactNode;
+}
+
+export function RainbowThemeProvider({ children }: RainbowThemeProviderProps) {
+  const rainbowTheme = useRainbowTheme();
+
+  // Determine the Mantine color scheme
+  const mantineColorScheme = rainbowTheme.themeMode === 'rainbow' ? 'dark' : rainbowTheme.themeMode;
+
+  return (
+    <>
+      <ColorSchemeScript defaultColorScheme={mantineColorScheme} />
+      <RainbowThemeContext.Provider value={rainbowTheme}>
+        <MantineProvider
+          theme={mantineTheme}
+          defaultColorScheme={mantineColorScheme}
+          forceColorScheme={mantineColorScheme}
+        >
+          <div
+            className={rainbowTheme.isRainbowMode ? rainbowStyles.rainbowMode : ''}
+            style={{ minHeight: '100vh' }}
+          >
+            {children}
+          </div>
+        </MantineProvider>
+      </RainbowThemeContext.Provider>
+    </>
+  );
+}
@@ -0,0 +1,97 @@
+import React from "react";
+import { Button, SegmentedControl } from "@mantine/core";
+import { useRainbowThemeContext } from "./RainbowThemeProvider";
+import LanguageSelector from "./LanguageSelector";
+import rainbowStyles from '../../styles/rainbow.module.css';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import EditNoteIcon from "@mui/icons-material/EditNote";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import { Group } from "@mantine/core";
+
+const VIEW_OPTIONS = [
+  {
+    label: (
+      <Group gap={5}>
+        <VisibilityIcon fontSize="small" />
+      </Group>
+    ),
+    value: "viewer",
+  },
+  {
+    label: (
+      <Group gap={4}>
+        <EditNoteIcon fontSize="small" />
+      </Group>
+    ),
+    value: "pageEditor",
+  },
+  {
+    label: (
+      <Group gap={4}>
+        <InsertDriveFileIcon fontSize="small" />
+      </Group>
+    ),
+    value: "fileManager",
+  },
+];
+
+interface TopControlsProps {
+  currentView: string;
+  setCurrentView: (view: string) => void;
+}
+
+const TopControls = ({
+  currentView,
+  setCurrentView,
+}: TopControlsProps) => {
+  const { themeMode, isRainbowMode, isToggleDisabled, toggleTheme } = useRainbowThemeContext();
+
+  const getThemeIcon = () => {
+    if (isRainbowMode) return <AutoAwesomeIcon className={rainbowStyles.rainbowText} />;
+    if (themeMode === "dark") return <LightModeIcon />;
+    return <DarkModeIcon />;
+  };
+
+  return (
+    <div className="absolute left-0 w-full top-0 z-[100] pointer-events-none">
+      <div className="absolute left-4 top-1/2 -translate-y-1/2 pointer-events-auto flex gap-2 items-center">
+        <Button
+          onClick={toggleTheme}
+          variant="subtle"
+          size="md"
+          aria-label="Toggle theme"
+          disabled={isToggleDisabled}
+          className={isRainbowMode ? rainbowStyles.rainbowButton : ''}
+          title={
+            isToggleDisabled
+              ? "Button disabled for 3 seconds..."
+              : isRainbowMode
+                ? "Rainbow Mode Active! Click to exit"
+                : "Toggle theme (click rapidly 6 times for a surprise!)"
+          }
+          style={isToggleDisabled ? { opacity: 0.5, cursor: 'not-allowed' } : {}}
+        >
+          {getThemeIcon()}
+        </Button>
+        <LanguageSelector />
+      </div>
+      <div className="flex justify-center items-center h-full pointer-events-auto">
+          <SegmentedControl
+            data={VIEW_OPTIONS}
+            value={currentView}
+            onChange={setCurrentView}
+            color="blue"
+            radius="xl"
+            size="md"
+            fullWidth
+            className={isRainbowMode ? rainbowStyles.rainbowSegmentedControl : ''}
+          />
+      </div>
+    </div>
+  );
+};
+
+export default TopControls;