egutierrez/Fitz_Studio
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance application structure with new Prueba_appshell page and responsive navbar; update dependencies

Browse Source
This commit is contained in:
egutierrez
2025-05-06 01:14:08 +02:00
parent 27f71a05f3
commit 00fd103112
9 changed files with 193 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package-lock.json
Generated
+59
View File
@@ -28,6 +28,7 @@
"@types/node": "^22.13.11",
"@types/react": "^19.0.12",
"@types/react-dom": "^19.0.4",
"@types/three": "^0.176.0",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.23.0",
"eslint-config-mantine": "^4.0.3",
@@ -533,6 +534,13 @@
"@csstools/css-tokenizer": "^3.0.3"
}
},
"node_modules/@dimforge/rapier3d-compat": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
"integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
"dev": true,
"license": "Apache-2.0"
},
"node_modules/@dual-bundle/import-meta-resolve": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
@@ -2215,6 +2223,13 @@
"@testing-library/dom": ">=7.21.4"
}
},
"node_modules/@tweenjs/tween.js": {
"version": "23.1.3",
"resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
"integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/aria-query": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -2333,6 +2348,29 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/stats.js": {
"version": "0.17.4",
"resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
"integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/three": {
"version": "0.176.0",
"resolved": "https://registry.npmjs.org/@types/three/-/three-0.176.0.tgz",
"integrity": "sha512-FwfPXxCqOtP7EdYMagCFePNKoG1AGBDUEVKtluv2BTVRpSt7b+X27xNsirPCTCqY1pGYsPUzaM3jgWP7dXSxlw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@dimforge/rapier3d-compat": "^0.12.0",
"@tweenjs/tween.js": "~23.1.3",
"@types/stats.js": "*",
"@types/webxr": "*",
"@webgpu/types": "*",
"fflate": "~0.8.2",
"meshoptimizer": "~0.18.1"
}
},
"node_modules/@types/webxr": {
"version": "0.5.22",
"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.22.tgz",
@@ -2688,6 +2726,13 @@
"url": "https://opencollective.com/vitest"
}
},
"node_modules/@webgpu/types": {
"version": "0.1.60",
"resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.60.tgz",
"integrity": "sha512-8B/tdfRFKdrnejqmvq95ogp8tf52oZ51p3f4QD5m5Paey/qlX4Rhhy5Y8tgFMi7Ms70HzcMMw3EQjH/jdhTwlA==",
"dev": true,
"license": "BSD-3-Clause"
},
"node_modules/accepts": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
@@ -4635,6 +4680,13 @@
}
}
},
"node_modules/fflate": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
"integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
"dev": true,
"license": "MIT"
},
"node_modules/file-entry-cache": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -6307,6 +6359,13 @@
"node": ">= 8"
}
},
"node_modules/meshoptimizer": {
"version": "0.18.1",
"resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
"integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
"dev": true,
"license": "MIT"
},
"node_modules/micromatch": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
frontend/package.json
+1
View File
@@ -40,6 +40,7 @@
"@types/node": "^22.13.11",
"@types/react": "^19.0.12",
"@types/react-dom": "^19.0.4",
"@types/three": "^0.176.0",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.23.0",
"eslint-config-mantine": "^4.0.3",
frontend/src/Router.tsx
+5
View File
@@ -2,6 +2,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { HomePage } from './pages/Home.page';
import { Consulta_API } from './pages/Consulta_api';
import { Error_404 } from './pages/404'; // Ajusta si está en otra carpeta
import { Prueba_appshell } from './pages/Prueba_appshell'; // Ajusta si está en otra carpeta
const router = createBrowserRouter([
{
@@ -12,6 +13,10 @@ const router = createBrowserRouter([
path: '/Consulta_API',
element: <Consulta_API />,
},
{
path: '/prueba_appshell',
element: <Prueba_appshell />,
},
{
path: '*',
element: <Error_404 />,
frontend/src/components/Appshell_collapse.tsx
+41
View File
@@ -0,0 +1,41 @@
import { useDisclosure } from '@mantine/hooks';
import { AppShell, Burger, Group, Skeleton } from '@mantine/core';
export function CollapseDesktop() {
const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
return (
<AppShell
header={{ height: 60 }}
navbar={{
width: 300,
breakpoint: 'sm',
collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
}}
padding="md"
>
<AppShell.Header>
<Group h="100%" px="md">
<Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" />
<Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom="sm" size="sm" />
<img
src="/src/favicon.svg"
alt="Logo"
style={{ width: 30, height: 30 }}
/>
</Group>
</AppShell.Header>
<AppShell.Navbar p="md">
Navbar
{Array(15)
.fill(0)
.map((_, index) => (
<Skeleton key={index} h={28} mt="sm" animate={false} />
))}
</AppShell.Navbar>
<AppShell.Main>Main</AppShell.Main>
</AppShell>
);
}
frontend/src/components/DoubleNavbar.tsx
+29 -14
View File
@@ -15,8 +15,9 @@ import {
UnstyledButton,
ActionIcon,
} from '@mantine/core';
import { useDisclosure, useMediaQuery } from '@mantine/hooks';
import { Link, useLocation } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import classes from './DoubleNavbar.module.css';
const mainLinksdata = [
@@ -33,6 +34,7 @@ const submenuLinks: Record<string, { label: string; to: string }[]> = {
Home: [
{ label: 'Inicio', to: '/' },
{ label: 'Consulta Api', to: '/Consulta_API' },
{ label: 'Prueba_appshell', to: '/prueba_appshell' },
],
Dashboard: [
{ label: 'Resumen', to: '/dashboard/resumen' },
@@ -64,10 +66,15 @@ const submenuLinks: Record<string, { label: string; to: string }[]> = {
export function DoubleNavbar() {
const location = useLocation();
const [collapsed, setCollapsed] = useState(false);
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]);
const [manualActiveTab, setManualActiveTab] = useState<string | null>(null);
// Detectar cuál pestaña es activa por la ruta actual
const matchedMain = Object.entries(submenuLinks).find(([mainKey, items]) =>
items.some((item) => location.pathname.startsWith(item.to))
);
@@ -87,7 +94,10 @@ export function DoubleNavbar() {
key={link.label}
>
<UnstyledButton
onClick={() => setManualActiveTab(link.label)}
onClick={() => {
setManualActiveTab(link.label);
if (isMobile) closeMobile();
}}
className={classes.mainLink}
data-active={link.label === active || undefined}
>
@@ -102,22 +112,29 @@ export function DoubleNavbar() {
data-active={activeLink === item.label || undefined}
to={item.to}
key={item.label}
style={{ display: collapsed ? 'none' : 'block' }}
style={{ display: isCollapsed ? 'none' : 'block' }}
onClick={() => {
if (isMobile) closeMobile();
}}
>
{item.label}
</Link>
));
// Resetea pestaña seleccionada si la ruta cambia (opcional)
// Restaurar pestaña al cambiar ruta (opcional pero útil)
useEffect(() => {
setManualActiveTab(null);
}, [location.pathname]);
// Abrir navbar de escritorio si cambia a pantalla grande
useEffect(() => {
if (!isMobile) openDesktop();
}, [isMobile, openDesktop]);
return (
<nav className={`${classes.navbar} ${collapsed ? classes.collapsed : ''}`}>
<nav className={`${classes.navbar} ${isCollapsed ? classes.collapsed : ''}`}>
<div className={classes.wrapper}>
<div className={classes.aside}>
{/* Sección superior: logo + mainLinks */}
<div className={classes.topSection}>
<div className={classes.logo}>
<img
@@ -126,23 +143,21 @@ export function DoubleNavbar() {
style={{ width: 30, height: 30 }}
/>
</div>
{mainLinks}
</div>
{/* Botón de colapsar separado abajo */}
<ActionIcon
variant="subtle"
onClick={() => setCollapsed((c) => !c)}
onClick={() => (isMobile ? toggleMobile() : toggleDesktop())}
className={classes.collapseButton}
size="lg"
>
{collapsed ? <IconArrowBarRight size={20} /> : <IconArrowBarLeft size={20} />}
{isCollapsed ? <IconArrowBarRight size={20} /> : <IconArrowBarLeft size={20} />}
</ActionIcon>
</div>
<div className={classes.main}>
{!collapsed && (
{!isCollapsed && (
<Title order={4} className={classes.title}>
{active}
</Title>
@@ -152,4 +167,4 @@ export function DoubleNavbar() {
</div>
</nav>
);
}
}
frontend/src/components/HoloShader.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ extend({ HoloShaderMaterial });
// 🎥 Plano con el shader
function HoloPlane({ color }: { color: [number, number, number] }) {
const mat = useRef<any>();
const mat = useRef<any>(null);
const { size } = useThree();
useFrame(({ clock }) => {
frontend/src/pages/Home.page.tsx
-4
View File
@@ -18,10 +18,6 @@ export function HomePage() {
<Welcome />
<ColorSchemeToggle />
<Center mt="md">
<MiBoton />
</Center>
</Box>
</Box>
);
frontend/src/pages/Prueba_appshell.tsx
+14
View File
@@ -0,0 +1,14 @@
import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
import { Welcome } from '../components/Welcome/Welcome';
import MiBoton from '../components/botoncito';
import { Center, Box } from '@mantine/core';
import { DoubleNavbar } from '../components/DoubleNavbar';
import { MantineCardWithShader } from '../components/HoloShader';
import { CollapseDesktop } from '../components/Appshell_collapse';
export function Prueba_appshell() {
return (
<CollapseDesktop />
);
}
frontend/yarn.lock
+43
View File
@@ -222,6 +222,11 @@
resolved "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz"
integrity sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==
"@dimforge/rapier3d-compat@^0.12.0":
version "0.12.0"
resolved "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz"
integrity sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==
"@dual-bundle/import-meta-resolve@^4.1.0":
version "4.1.0"
resolved "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz"
@@ -675,6 +680,11 @@
resolved "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz"
integrity sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==
"@tweenjs/tween.js@~23.1.3":
version "23.1.3"
resolved "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz"
integrity sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==
"@types/aria-query@^5.0.1":
version "5.0.4"
resolved "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz"
@@ -757,6 +767,24 @@
resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.6.tgz"
integrity sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==
"@types/stats.js@*":
version "0.17.4"
resolved "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz"
integrity sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==
"@types/three@^0.176.0":
version "0.176.0"
resolved "https://registry.npmjs.org/@types/three/-/three-0.176.0.tgz"
integrity sha512-FwfPXxCqOtP7EdYMagCFePNKoG1AGBDUEVKtluv2BTVRpSt7b+X27xNsirPCTCqY1pGYsPUzaM3jgWP7dXSxlw==
dependencies:
"@dimforge/rapier3d-compat" "^0.12.0"
"@tweenjs/tween.js" "~23.1.3"
"@types/stats.js" "*"
"@types/webxr" "*"
"@webgpu/types" "*"
fflate "~0.8.2"
meshoptimizer "~0.18.1"
"@types/webxr@*":
version "0.5.22"
resolved "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.22.tgz"
@@ -913,6 +941,11 @@
loupe "^3.1.3"
tinyrainbow "^2.0.0"
"@webgpu/types@*":
version "0.1.60"
resolved "https://registry.npmjs.org/@webgpu/types/-/types-0.1.60.tgz"
integrity sha512-8B/tdfRFKdrnejqmvq95ogp8tf52oZ51p3f4QD5m5Paey/qlX4Rhhy5Y8tgFMi7Ms70HzcMMw3EQjH/jdhTwlA==
accepts@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz"
@@ -2056,6 +2089,11 @@ fdir@^6.4.4:
resolved "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz"
integrity sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==
fflate@~0.8.2:
version "0.8.2"
resolved "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz"
integrity sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==
file-entry-cache@^10.0.8:
version "10.0.8"
resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-10.0.8.tgz"
@@ -2983,6 +3021,11 @@ merge2@^1.3.0, merge2@^1.4.1:
resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
meshoptimizer@~0.18.1:
version "0.18.1"
resolved "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz"
integrity sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==
micromatch@^4.0.8:
version "4.0.8"
resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz"