work on team enrollment

src/features/core/components/back-button.tsx

@@ -2,11 +2,7 @@ import { Box } from "@mantine/core"
 import { ArrowLeftIcon } from "@phosphor-icons/react"
 import { useRouter } from "@tanstack/react-router"
 
-interface BackButtonProps {
-  offsetY: number;
-}
-
-const BackButton = ({ offsetY }: BackButtonProps) => {
+const BackButton = () => {
   const router = useRouter()
 
   return (

src/features/core/components/header.tsx

@@ -1,16 +1,9 @@
 import { Title, AppShell, Flex } from "@mantine/core";
 import { HeaderConfig } from "../types/header-config";
-import BackButton from "./back-button";
-import { useMemo } from "react";
-import SettingsButton from "./settings-button";
-interface HeaderProps extends HeaderConfig {
-  scrollPosition: { x: number, y: number };
-}
 
-const Header = ({ withBackButton, settingsLink, collapsed, title, scrollPosition }: HeaderProps) => {
-  const offsetY = useMemo(() => {
-    return collapsed ? scrollPosition.y : 0;
-  }, [collapsed, scrollPosition.y]);
+interface HeaderProps extends HeaderConfig {}
+
+const Header = ({ collapsed, title }: HeaderProps) => {
 
   return (
     <AppShell.Header id='app-header' display={collapsed ? 'none' : 'block'}>

src/features/core/components/layout.tsx

@@ -33,7 +33,7 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
       mah='100dvh'
       style={{ top: viewport.top }} //, transition: 'top 0.1s ease-in-out' }}
     >
-      <Header scrollPosition={scrollPosition} {...header} />
+      <Header {...header} />
       <AppShell.Main
         pos='relative'
         h='100%'

src/features/core/components/navbar.tsx

@@ -4,6 +4,7 @@ import { NavLink } from "./nav-link";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { useAuth } from  "@/contexts/auth-context";
 import { useLinks } from "../hooks/use-links";
+import { memo } from "react";
 
 const Navbar = () => {
   const { user, roles } = useAuth()
@@ -35,4 +36,4 @@ const Navbar = () => {
   </AppShell.Navbar>
 }
 
-export default Navbar;
+export default memo(Navbar);

src/features/core/components/pullable.tsx

@@ -14,7 +14,6 @@ interface PullableProps extends PropsWithChildren {
 
 /**
  * Pullable is a component that allows the user to pull down to refresh the page
- * TODO: Need to make the router config nicer
  */
 const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollPositionChange }) => {
   const height = useAppShellHeight();
@@ -110,10 +109,6 @@ const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollP
         pt={(scrolling || scrollY > 40) || !isRefreshing ? 0 : 40 - scrollY}
       >
         <Box pt='1rem'pb='0.285rem' mih={height} style={{ boxSizing: 'content-box' }}>
-          { /* TODO: Remove this debug button */}
-          <ActionIcon display={!!refresh.length ? 'unset' : 'none' } style={{ zIndex: 1000 }} pos='absolute' top={8} left='calc(50% - 24px)' onClick={onTrigger} variant='filled' color='var(--mantine-color-dimmed)'>
-            <ArrowClockwiseIcon />
-          </ActionIcon>
           {children}
         </Box>
       </ScrollArea>

src/features/core/components/settings-button.tsx

@@ -1,13 +1,13 @@
 import { Box } from "@mantine/core"
 import { GearIcon } from "@phosphor-icons/react"
 import { useNavigate } from "@tanstack/react-router"
+import { memo } from "react";
 
 interface SettingButtonProps {
-  offsetY: number;
   to: string;
 }
 
-const SettingsButton = ({ offsetY, to }: SettingButtonProps) => {
+const SettingsButton = ({ to }: SettingButtonProps) => {
   const navigate = useNavigate();
 
   return (
@@ -23,4 +23,4 @@ const SettingsButton = ({ offsetY, to }: SettingButtonProps) => {
   );
 }
 
-export default SettingsButton;
+export default memo(SettingsButton, (prev, next) => prev.to !== next.to);