feat: Implement main application shell with navigation and color scheme toggle

- Added Appshell component with responsive navbar and main content area - Integrated ColorSchemeToggle for light/dark mode switching - Created Welcome component with styled title and introductory text - Developed ChatPage for LLM interaction with WebSocket support - Implemented Biblioteca for managing notes with rich text editor - Added LoginPage for user authentication with error handling - Introduced MessageList and MessageBubble components for chat messages - Styled components with CSS modules for consistent design
2025-06-21 02:01:21 +02:00
parent 3d5deef0fb
commit aef8791151
101 changed files with 169 additions and 166 deletions
@@ -0,0 +1,65 @@
+import { Box, Title, Text, Button, Group, Stack, Image, Center } from '@mantine/core';
+import { useMantineTheme } from '@mantine/core';
+import { IconArrowLeft } from '../../../assets/icons';
+import { Link } from 'react-router-dom';
+import { MantineCardWithShader } from './HoloShader_404'; // Ajusta ruta si es necesario
+import { AppShellWithMenu } from '../Appshell/Appshell';
+
+
+
+export function Error_404() {
+
+  const theme = useMantineTheme();
+
+
+  return (
+    <AppShellWithMenu>
+      <Box
+        style={{
+          flex: 1,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+          padding: '2rem',
+          paddingTop: '0.5rem',
+        }}
+      >
+        <Box
+          style={{
+            flex: 1,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: '2rem',
+          }}
+        >
+          <Stack align="center" maw={500} mx="auto">
+            <MantineCardWithShader />
+            <Title order={1}>Página no encontrada</Title>
+
+            <Text size="lg">
+              Parece que la página que estás buscando no existe o fue removida. Pero no te preocupes,
+              puedes volver al inicio fácilmente.
+            </Text>
+
+            <Group mt="md">
+              <Button
+                component={Link}
+                to="/"
+                size="md"
+                variant="gradient"
+                gradient={{
+                  from: theme.colors.brand[7],
+                  to: theme.colors.secondary[4],
+                }}
+                leftSection={<IconArrowLeft width={18} height={18} />}
+              >
+                Volver al inicio
+              </Button>
+            </Group>
+          </Stack>
+        </Box>
+      </Box>
+    </AppShellWithMenu>
+  );
+}
@@ -0,0 +1,142 @@
+import { Card, Title, Box, useMantineTheme } from '@mantine/core';
+import { Canvas, extend, useFrame, useThree } from '@react-three/fiber';
+import { useRef, useMemo } from 'react';
+import * as THREE from 'three';
+
+// 🎨 Utilidad para convertir hex a RGB [0–1]
+function hexToRGBArray(hex: string): [number, number, number] {
+  const bigint = parseInt(hex.replace('#', ''), 16);
+  return [
+    ((bigint >> 16) & 255) / 255,
+    ((bigint >> 8) & 255) / 255,
+    (bigint & 255) / 255,
+  ];
+}
+
+// ✨ Shader personalizado estilo holográfico, con color dinámico
+class HoloShaderMaterial extends THREE.ShaderMaterial {
+  constructor(color: [number, number, number]) {
+    super({
+      uniforms: {
+        u_time: { value: 0 },
+        u_resolution: { value: new THREE.Vector2() },
+        u_color: { value: new THREE.Vector3(...color) },
+      },
+      vertexShader: `
+        void main() {
+          gl_Position = vec4(position, 1.0);
+        }
+      `,
+      fragmentShader: `
+        precision mediump float;
+        uniform float u_time;
+        uniform vec2 u_resolution;
+        uniform vec3 u_color;
+
+        void main() {
+          vec2 uv = gl_FragCoord.xy / u_resolution;
+          vec2 pos = uv * 10.0;
+          pos.x += u_time * 0.3;
+          pos.y += sin(u_time * 0.2) * 2.0;
+
+          float color = sin(pos.x + sin(pos.y + sin(pos.x))) * 0.5 + 0.5;
+
+          vec3 c = vec3(
+            u_color.r + 0.2 * sin(u_time + pos.x),
+            u_color.g + 0.2 * cos(u_time + pos.y),
+            u_color.b + 0.2 * sin(pos.x + pos.y + u_time)
+          );
+
+          gl_FragColor = vec4(c * color, 1.0);
+        }
+      `,
+    });
+  }
+}
+
+extend({ HoloShaderMaterial });
+
+// 🎥 Plano con el shader
+function HoloPlane({ color }: { color: [number, number, number] }) {
+  const mat = useRef<any>(null);
+  const { size } = useThree();
+
+  useFrame(({ clock }) => {
+    if (mat.current) {
+      mat.current.uniforms.u_time.value = clock.getElapsedTime();
+      mat.current.uniforms.u_resolution.value.set(size.width, size.height);
+    }
+  });
+
+  const material = useMemo(() => new HoloShaderMaterial(color), [color]);
+
+  return (
+    <mesh>
+      <planeGeometry args={[2, 2]} />
+      <primitive object={material} ref={mat} attach="material" />
+    </mesh>
+  );
+}
+
+// 🎨 Fondo que ocupa todo el contenedor
+function HolographicBackground({ color }: { color: [number, number, number] }) {
+  return (
+    <Box
+      style={{
+        position: 'absolute',
+        inset: 0,
+        zIndex: 0,
+        pointerEvents: 'none',
+      }}
+    >
+      <Canvas orthographic camera={{ zoom: 1, position: [0, 0, 1] }}>
+        <HoloPlane color={color} />
+      </Canvas>
+    </Box>
+  );
+}
+
+// 🧩 Componente final con fondo shader y texto 404
+export function MantineCardWithShader() {
+  const theme = useMantineTheme();
+  const hex = theme.colors[theme.primaryColor][6];
+  const rgb = hexToRGBArray(hex);
+
+  return (
+    <Card
+      withBorder
+      radius="lg"
+      shadow="xl"
+      style={{
+        position: 'relative',
+        overflow: 'hidden',
+        minHeight: 300,
+        minWidth: 400,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <HolographicBackground color={rgb} />
+
+      <Box style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
+      <Title
+        order={1}
+        style={{
+          fontSize: '15rem',
+          fontWeight: 900,
+          backgroundImage: 'linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0))',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+          textAlign: 'center',
+          lineHeight: 1,
+          userSelect: 'none',       // <-- evita selección
+          textDecoration: 'none',   // <-- evita subrayado
+        }}
+      >
+        404
+      </Title>
+      </Box>
+    </Card>
+  );
+}
@@ -0,0 +1,103 @@
+.navbar {
+  height: 100vh; /* ← Ocupa todo el alto de la ventana */
+  display: flex;
+  flex-direction: column;
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  width: 300px;
+  border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  position: sticky; /* ← Opcional, si quieres que se quede "pegado" */
+  top: 0; /* ← Ancla arriba */
+}
+  
+
+.title {
+  font-family:
+    Greycliff CF,
+    var(--mantine-font-family);
+  margin-bottom: var(--mantine-spacing-sm);
+  background-color: var(--mantine-color-body);
+  padding: var(--mantine-spacing-xs);
+  padding-top: 15px;
+  height: 50px;
+  border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
+}
+  
+
+
+  .wrapper {
+    display: flex;
+    flex: 1;
+  }
+  
+  /* Esta es la barra izquierda pequeña donde los iconos */
+  .aside {
+    flex: 0 0 52px;
+    background-color: var(--mantine-color-body);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
+  }
+  
+  .main {
+    flex: 1;
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  }
+  
+  .topSection {
+    padding-top: 12px; /* o la cantidad que desees */
+  }
+
+  /* Estos son los iconos */
+  .mainLink {
+    
+    width: 40px;
+    height: 40px;
+    margin-bottom: 4px;
+    border-radius: var(--mantine-radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+  
+    &:hover {
+      background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+    }
+  
+    &[data-active] {
+      &,
+      &:hover {
+        background-color: var(--mantine-color-brand-7);
+        color: var(--mantine-color-brand-2);
+      }
+    }
+  }
+  
+
+  
+  .link {
+    display: block;
+    text-decoration: none;
+    border-top-right-radius: var(--mantine-radius-md);
+    border-bottom-right-radius: var(--mantine-radius-md);
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+    padding: 0 var(--mantine-spacing-md);
+    font-size: var(--mantine-font-size-sm);
+    margin-right: var(--mantine-spacing-md);
+    font-weight: 420;
+    height: 30px;
+    line-height: 30px;
+  
+    &:hover {
+      background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+      color: light-dark(var(--mantine-color-dark), var(--mantine-color-light));
+    }
+  
+    &[data-active] {
+      &,
+      &:hover {
+        background-color: var(--mantine-color-brand-7);
+        color: var(--mantine-color-brand-2);
+      }
+    }
+  }
@@ -0,0 +1,191 @@
+import {
+  AppShell,
+  Burger,
+  Group,
+  Tooltip,
+  UnstyledButton,
+  Title,
+  useMantineTheme,
+} from '@mantine/core';
+import { useDisclosure, useMediaQuery } from '@mantine/hooks';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+
+import { default as LogoIcon } from '../../../assets/icons/favicon';
+import { mainLinksdata } from '../../../data/navigationsLinks_1';
+import { submenuLinks } from '../../../data/submenuLinks_1';
+
+import classes from './Appshell.module.css';
+
+type AppShellWithMenuProps = {
+  children?: React.ReactNode;
+};
+
+// Persistencia en localStorage
+const STORAGE_KEY = 'lastSubmenuRoutes';
+
+function getLastSubmenuRoute(section: string): string | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    const parsed = raw ? JSON.parse(raw) : {};
+    return parsed[section] ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function setLastSubmenuRoute(section: string, route: string) {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    const parsed = raw ? JSON.parse(raw) : {};
+    parsed[section] = route;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(parsed));
+  } catch {
+    // fallback silencioso
+  }
+}
+
+export function AppShellWithMenu({ children }: AppShellWithMenuProps) {
+  const theme = useMantineTheme();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const [mobileOpened, { toggle: toggleMobile, close: closeMobile }] = useDisclosure(false);
+  const [desktopOpened, { toggle: toggleDesktop, open: openDesktop }] = useDisclosure(true);
+
+  const isCollapsed = useMemo(
+    () => (isMobile ? !mobileOpened : !desktopOpened),
+    [isMobile, mobileOpened, desktopOpened]
+  );
+
+  // Estado para el main link activo
+  const [activeMain, setActiveMain] = useState<string>('Home');
+
+  // Ref para saber si el usuario ha hecho clic manualmente en el main link
+  const userClickedMainRef = useRef(false);
+
+  useEffect(() => {
+    const currentPath = location.pathname.toLowerCase().replace(/\/$/, '');
+
+    let matchedMain: string | null = null;
+    let maxMatchLength = 0;
+
+    Object.entries(submenuLinks).forEach(([main, items]) => {
+      items.forEach((item) => {
+        const itemPath = item.to.toLowerCase().replace(/\/$/, '');
+        if (
+          currentPath === itemPath ||
+          currentPath.startsWith(itemPath + '/')
+        ) {
+          if (itemPath.length > maxMatchLength) {
+            matchedMain = main;
+            maxMatchLength = itemPath.length;
+          }
+        }
+      });
+    });
+
+    if (matchedMain) {
+      setActiveMain(matchedMain);
+    }
+  }, [location.pathname]);
+
+  const activeLink =
+    submenuLinks[activeMain as keyof typeof submenuLinks]?.find(
+      (item) => item.to === location.pathname
+    )?.label ?? '';
+
+  const mainLinks = mainLinksdata.map((link) => (
+    <Tooltip
+      label={link.label}
+      position="right"
+      withArrow
+      transitionProps={{ duration: 0 }}
+      key={link.label}
+    >
+      <UnstyledButton
+        onClick={() => {
+          userClickedMainRef.current = true;
+          setActiveMain(link.label);
+
+          const remembered = getLastSubmenuRoute(link.label);
+          const fallback = submenuLinks[link.label as keyof typeof submenuLinks]?.[0]?.to;
+
+          if (isCollapsed && (remembered || fallback)) {
+            navigate(remembered ?? fallback);
+          }
+        }}
+        className={classes.mainLink}
+        data-active={link.label === activeMain || undefined}
+      >
+        <link.icon />
+      </UnstyledButton>
+    </Tooltip>
+  ));
+
+  const links = (submenuLinks[activeMain as keyof typeof submenuLinks] || []).map((item) => (
+    <Link
+      className={classes.link}
+      data-active={activeLink === item.label || undefined}
+      to={item.to}
+      key={item.label}
+      style={{ display: isCollapsed ? 'none' : 'block' }}
+      onClick={() => {
+        setLastSubmenuRoute(activeMain, item.to);
+        if (isMobile) closeMobile();
+      }}
+    >
+      {item.label}
+    </Link>
+  ));
+
+  useEffect(() => {
+    if (!isMobile) openDesktop();
+  }, [isMobile, openDesktop]);
+
+  return (
+    <AppShell
+      header={{ height: 60 }}
+      navbar={{
+        width: isCollapsed ? 60 : 300,
+        breakpoint: 'sm',
+        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
+      }}
+      padding="md"
+    >
+      {/* Header */}
+      <AppShell.Header>
+        <Group h="100%" px="sm">
+          <Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" />
+          <Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom="sm" size="sm" />
+          <LogoIcon
+            style={{ width: 30, height: 30 }}
+            circleFill={theme.colors.brand[9]}
+            pathFill={theme.colors.secondary[2]}
+          />
+        </Group>
+      </AppShell.Header>
+
+      {/* Navbar */}
+      <AppShell.Navbar>
+        <div className={classes.wrapper}>
+          <div className={classes.aside}>
+            <div className={classes.topSection}>{mainLinks}</div>
+          </div>
+          <div className={classes.main}>
+            {!isCollapsed && (
+              <Title order={4} className={classes.title}>
+                {activeMain}
+              </Title>
+            )}
+            {links}
+          </div>
+        </div>
+      </AppShell.Navbar>
+
+      {/* Main Content */}
+      <AppShell.Main>{children}</AppShell.Main>
+    </AppShell>
+  );
+}
@@ -0,0 +1,13 @@
+import { Button, Group, useMantineColorScheme } from '@mantine/core';
+
+export function ColorSchemeToggle() {
+  const { setColorScheme } = useMantineColorScheme();
+
+  return (
+    <Group justify="center" mt="xl">
+      <Button onClick={() => setColorScheme('light')}>Light</Button>
+      <Button onClick={() => setColorScheme('dark')}>Dark</Button>
+      <Button onClick={() => setColorScheme('auto')}>Auto</Button>
+    </Group>
+  );
+}
@@ -0,0 +1,10 @@
+import { AppShellWithMenu } from './Appshell/Appshell';
+
+
+export function Plantilla() {
+  return (
+    <AppShellWithMenu>
+
+    </AppShellWithMenu>
+  );
+}
@@ -0,0 +1,10 @@
+.title {
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  font-size: rem(100px);
+  font-weight: 900;
+  letter-spacing: rem(-2px);
+
+  @media (max-width: $mantine-breakpoint-md) {
+    font-size: rem(50px);
+  }
+}
@@ -0,0 +1,7 @@
+import { Welcome } from './Welcome';
+
+export default {
+  title: 'Welcome',
+};
+
+export const Usage = () => <Welcome />;
@@ -0,0 +1,12 @@
+import { render, screen } from '@test-utils';
+import { Welcome } from './Welcome';
+
+describe('Welcome component', () => {
+  it('has correct Vite guide link', () => {
+    render(<Welcome />);
+    expect(screen.getByText('this guide')).toHaveAttribute(
+      'href',
+      'https://mantine.dev/guides/vite/'
+    );
+  });
+});
@@ -0,0 +1,22 @@
+import { Anchor, Text, Title } from '@mantine/core';
+import classes from './Welcome.module.css';
+import { useMantineTheme } from '@mantine/core';
+
+export function Welcome() {
+
+  const theme = useMantineTheme();
+
+  return (
+    <>
+      <Title className={classes.title} ta="center" mt={100}>
+        Hola! {' '}
+        <Text inherit variant="gradient" component="span" gradient={{ from: theme.colors.brand[7], to: theme.colors.secondary[4], }} style={{ letterSpacing: '1px' }}>
+          Holooooo
+        </Text>
+      </Title>
+      <Text c="dimmed" ta="left" size="lg" maw={580} mx="auto" mt="xl">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit modi officia porro natus ullam vero mollitia provident, fuga quidem! Perspiciatis explicabo, vel non illum libero suscipit esse animi a voluptatem!
+      </Text>
+    </>
+  );
+}